hazop插件添加

src/views/my/initiateChange/index.vue

@@ -3,12 +3,12 @@ import { computed, ref } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import {
-  CHANGES, DOC_TODO, LEVEL_COLOR, STATUS_COLOR, TEMP_WATCH, URGE_RECORDS,
+  CHANGES, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
-  countOpenStatus, type ChangeLevel, type ChangeOrder, type ChangeStatus, type ChangeType,
 } from "@/typings/model";
 import { getColorWithOpacity } from "@/utils/common";
-import HighlightText from "@/views/my/modules/HighlightText.vue";
+import HighlightText from "./modules/HighlightText.vue";
-import Ed from "@/views/my/modules/Ed.vue";
+import Ed from "./modules/Ed.vue";
+import Hazop from "./modules/hazop.vue";
 
 
 const themeStore = useThemeStore();
@@ -108,8 +108,7 @@ const formGen = ref<string>("idle");
 const materialsText = ref("");
 const updateDocs = ref<string[]>([]);
 const disciplines = ref<string[]>([]);
-const tools = ref<string[]>(["JSA", "检查表法", "通用检查表"]);
+const tools = ref<string[]>(["HAZOP","JSA", "SCL", "通用检查表"]);
-const plugin = ref<"HAZOP" | "JSA" | "检查表法" | "通用检查表" | null>(null);
 const genForm = () => {
   if (formGen.value === "generating") return;
   formGen.value = "generating";
@@ -136,8 +135,8 @@ const genForm = () => {
     updateDocs.value = ["PID图纸", "操作规程", "总图", "设备台账"];
     disciplines.value = ["技术", "仪表"];
     signers.value = { 技术: "王仪表（技术部）", 仪表: "王仪表（技术部 · 仪表）" };
-    tools.value = ["JSA", "检查表法", "通用检查表"];
+    tools.value = ["HAZOP","JSA", "SCL", "通用检查表"];
-    plugin.value = null;
+    currentPlugin.value = "";
     formGen.value = "done";
     tab.value = "form";
     window.$message?.success("变更申请单已生成：AI 自动总结名称、预填内容，均可手动修改");
@@ -293,7 +292,7 @@ const levelResult = computed(() => (totalScore.value >= 20 ? "重要变更" : "
 const RISK_TOOLS_FORM = [
   { key: "HAZOP", label: "HAZOP" },
   { key: "JSA", label: "JSA" },
-  { key: "检查表法", label: "设备SCL" },
+  { key: "SCL", label: "设备SCL" },
   { key: "通用检查表", label: "风险检查表" },
 ];
 const recommendTools = () => {
@@ -301,9 +300,6 @@ const recommendTools = () => {
   tools.value = lv === "重要" ? ["HAZOP", "JSA", "检查表法", "通用检查表"] : ["JSA", "检查表法", "通用检查表"];
   window.$message?.success(`已按「${lv}变更」规则匹配风险分析工具，可继续手动重选`);
 };
-const toggleTool = (t: string) => {
-  tools.value = tools.value.includes(t) ? tools.value.filter((x) => x !== t) : [...tools.value, t];
-};
 
 const files = ref<string[]>(["小试实验报告.pdf", "杂质初步分析.docx"]);
 const previewFile = ref<string | null>(null);
@@ -396,7 +392,7 @@ const finishApprover = () => {
 const TOOL_CARDS = [
   { key: "HAZOP" as const, name: "HAZOP 分析", desc: "节点-偏离结构化分析：原因 / 后果 / LS 风险矩阵 / 安全措施" },
   { key: "JSA" as const, name: "JSA 分析", desc: "作业步骤分解：危害因素识别与 LS 风险分级管控" },
-  { key: "检查表法" as const, name: "设备 SCL", desc: "设备 / 管理检查项目对照标准逐项核查" },
+  { key: "SCL" as const, name: "设备 SCL", desc: "设备 / 管理检查项目对照标准逐项核查" },
   { key: "通用检查表" as const, name: "风险检查表", desc: "变更通用检查项：是 / 否 / 不涉及逐项判定，输出风险描述与管控措施" },
 ];
 const pluginDone = ref<Record<string, number>>({});
@@ -404,15 +400,6 @@ const riskRecords = ref<any>([]);
 const updRec = (i: number, patch: Partial<any>) => {
   riskRecords.value = riskRecords.value.map((x, j) => (j === i ? { ...x, ...patch } : x));
 };
-const addRiskRecords = (items: any[], mode: "manual" | "ai") => {
-  riskRecords.value = [...riskRecords.value, ...items];
-  if (mode === "ai") {
-    plugin.value = null;
-    window.$message?.success(`AI 已自动整理形成风险分析记录表（新增 ${items.length} 项），支持手动修改`);
-  } else {
-    window.$message?.success(`已选入 ${items.length} 条风险记录，可继续挑选或返回查看记录表`);
-  }
-};
 const lvlNext = (v: string) => (v === "高" ? "中" : v === "中" ? "低" : "高");
 const pssrGroups = ref<{ g: string; items: any[] }[]>([
   { g: "一、风险分析行动项落实", items: [
@@ -561,6 +548,30 @@ const uploadConfirm = () => {
   uploadDoc.value = null;
 }
 
+const pluginDrawer = ref<boolean>(false);
+const currentPlugin = ref<string>("");
+// 插件选择
+const toggleTool = (t: any) => {
+  if (!tools.value.includes(t.key))
+  tools.value = tools.value.includes(t.key) ? tools.value.filter((x) => x !== t.key) : [...tools.value, t.key];
+  currentPlugin.value = t.key;
+  pluginDrawer.value = true;
+};
+
+
+const exportAll = (items: any[], mode: "manual" | "ai") => {
+  riskRecords.value = [...riskRecords.value, ...items];
+  if (mode === "ai") {
+    pluginDrawer.value = false;
+    currentPlugin.value = '';
+    window.$message?.success(`AI 已自动整理形成风险分析记录表（新增 ${items.length} 项），支持手动修改`);
+  } else {
+    window.$message?.success(`已选入 ${items.length} 条风险记录，可继续挑选或返回查看记录表`);
+  }
+}
+const onBack = () => {
+  pluginDrawer.value = false;
+}
 
 
 </script>
@@ -927,7 +938,7 @@ const uploadConfirm = () => {
             </div>
 
           </template>
-          <!-- ===== 风险记录表 ===== -->
+          <!-- ===== 风险分析记录表 ===== -->
           <template v-if="tab === 'risk'">
             <div class="border p-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
               <div class="flex flex-wrap items-center gap-2">
@@ -962,7 +973,7 @@ const uploadConfirm = () => {
                     </div>
                   </div>
                   <NButton size="small" class="text-xs" :type="pluginDone[t.key] !== undefined ? 'default' : tools.includes(t.key) ? 'primary' : 'default'" 
-                    @click="if (!tools.includes(t.key)) toggleTool(t.key); plugin = t.key;">
+                    @click="toggleTool(t)">
                     使用
                   </NButton>
                 </div>
@@ -1632,6 +1643,14 @@ const uploadConfirm = () => {
         </div>
       </template>
     </NModal>
+    <!-- 插件抽屉 -->
+    <NDrawer v-model:show="pluginDrawer" :width="1200" placement="right">
+      <NDrawerContent>
+        <template v-if="currentPlugin === 'HAZOP'">
+          <Hazop @back="onBack" @export="exportAll" />
+        </template>
+      </NDrawerContent>
+  </NDrawer>
   </NCard>
 </NSpace>
 </template>

src/views/my/initiateChange/modules/Ed.vue

@@ -9,7 +9,7 @@ const start = () => { val.value = props.v; ed.value = true; };
 const done = () => { ed.value = false; if (val.value !== props.v) emit("update", val.value); };
 </script>
 <template>
-    <NInput v-if="ed" class="text-xs" v-model:value="val" type="textarea" autofocus rows="3" @blur="done" />
+  <NInput v-if="ed" class="text-xs" v-model:value="val" type="textarea" autofocus rows="3" @blur="done" />
   <p v-else @click="start" title="点击修改"
     class="cursor-pointer w-full rounded px-1 py-0.5 text-left text-xs leading-relaxed text-slate-700 transition hover:bg-[#EAF0F9]">
     <template v-if="v">{{ v }}</template>

src/views/my/initiateChange/modules/hazop.vue

@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useMessage } from "naive-ui";
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import Ed from "./Ed.vue";
+
+const themeStore = useThemeStore();
+const message = useMessage();
+const emit = defineEmits<{
+  back: [];
+  done: [records: number];
+  export: [items: any[], mode: "manual" | "ai"];
+  save: [];
+}>();
+
+const TH = "border bg-slate-100 px-2 py-1.5 text-[11px] font-medium text-slate-500";
+const TD = "border px-1.5 py-1 align-top";
+const HAZOP_INIT = [
+  { name: "节点1：缩合反应釜 R-101", obj: "R-101 缩合反应釜", devs: [
+    { dev: "温度过高", rows: [
+      { cause: "温控回路失效或冷却水中断；90℃ 新工艺窗口更接近溶剂回流温度，超温溜温概率上升", cons: "反应溜温冲料，釜压骤升，物料喷溅造成灼烫与环境污染", l: 3, s: 4, safe: "DCS 温度高报 95℃、高高报及联锁 100℃（随变更上调并重新整定验证）；紧急冷却有效", sug: "投用前完成联锁测试并留存记录；投用首周每班复核温度趋势" },
+      { cause: "未知杂质含量升高（0.05%→0.12%），热稳定性尚未定性，长期累积加速釜壁结垢", cons: "副反应加剧，可能引发二次分解放热，搅拌负荷异常", l: 2, s: 4, safe: "小试热稳定性筛查；安全阀泄放能力不受本次调整影响，仍然有效", sug: "将杂质含量纳入日常分析计划（每周 1 次，连续 8 周）" },
+    ] },
+    { dev: "温度过低", rows: [
+      { cause: "保温时间缩短至 4h，反应终点判断窗口变窄，人为误判", cons: "转化率不足 98%，批次报废或返工，增加处置风险", l: 3, s: 2, safe: "DCS 批次记录与转化率化验联动判定", sug: "明确反应终点取样判定规程，首 5 批加密化验" },
+    ] },
+    { dev: "搅拌失效", rows: [] },
+    { dev: "冷却水中断", rows: [] },
+  ] },
+  { name: "节点2：DCS 温控与联锁", obj: "DCS 温控回路及联锁", devs: [
+    { dev: "报警 / 联锁值设置不当", rows: [
+      { cause: "报警 / 联锁值上调后（高报 85→95℃、联锁 90→100℃），原有报警裕度改变", cons: "误报、漏报导致操作人员对真实超温失去预警", l: 2, s: 4, safe: "参数修改执行申请-复核双人确认；修改清单与变更单逐项核对", sug: "联锁逻辑图与台账同步更新，纳入变更资料归档" },
+    ] },
+    { dev: "联锁拒动 / 误动", rows: [] },
+  ] },
+];
+const HAZOP_AI:any = {
+  "搅拌失效": [
+    { cause: "搅拌器机械故障或变频器跳闸，釜内物料传热不均", cons: "局部过热引发暴沸冲料；温度测量失真误导操作", l: 2, s: 4, safe: "搅拌电流 DCS 在线监视与低电流报警；跳闸联锁停进料", sug: "变更后复核搅拌电流裕量，纳入交接班巡检" },
+  ],
+  "冷却水中断": [
+    { cause: "冷却水总管压力波动或阀门误关", cons: "撤热失效，反应温度快速上升溜温", l: 2, s: 5, safe: "冷却水流量低报警；紧急切断进料联锁", sug: "核实紧急冷却旁路可用性，写入超温应急处置卡" },
+  ],
+  "联锁拒动 / 误动": [
+    { cause: "联锁设定值修改后未重新整定验证，或逻辑修改错误", cons: "超温时联锁拒动失去最后保护层；误动造成非计划停车", l: 1, s: 5, safe: "投用前 100% 联锁传动测试，动作正确率确认", sug: "联锁测试记录归档至变更资料；修改执行双人复核" },
+  ],
+};
+const inherentOf = (l: number, s: number): "高" | "中" | "低" => {
+  const v = l * s;
+  return v >= 10 ? "高" : v >= 5 ? "中" : "低";
+}
+const lowerOf = (lv: "高" | "中" | "低"): "高" | "中" | "低" => {
+  return lv === "高" ? "中" : "低";
+}
+
+const nodes = ref<any>(JSON.parse(JSON.stringify(HAZOP_INIT)));
+const sel = ref({ n: 0, d: 0 });
+const analyzing = ref(false);
+
+const cur = computed(() => nodes.value[sel.value.n].devs[sel.value.d]);
+const devTotal = computed(() => nodes.value.reduce((a, n) => a + n.devs.length, 0));
+const devDone = computed(() => nodes.value.reduce((a, n) => a + n.devs.filter((d) => d.rows.length > 0).length, 0));
+const recTotal = computed(() => nodes.value.reduce((a, n) => a + n.devs.reduce((b, d) => b + d.rows.length, 0), 0));
+
+const toRec = (obj: string, dev: string, row: any): any => ({
+  item: `${dev}（${obj}）`,
+  scene: `${row.cause}；可能导致：${row.cons}`,
+  inherent: inherentOf(row.l, row.s),
+  existing: row.safe,
+  suggest: row.sug,
+  residual: lowerOf(inherentOf(row.l, row.s)),
+  source: "HAZOP",
+});
+
+const updRow = (ri: number, patch: Partial<any>) => {
+  const row = cur.value.rows[ri];
+  if (row) Object.assign(row, patch);
+};
+const clampLS = (v: string) => Math.max(1, Math.min(5, +v || 1));
+
+const runAi = () => {
+  if (cur.value.rows.length) return message.info("当前偏离已有分析记录，可手动新增行补充");
+  analyzing.value = true;
+  setTimeout(() => {
+    const gen = HAZOP_AI[cur.value.dev] ?? [
+      { cause: "（AI 生成）偏离场景原因分析", cons: "（AI 生成）可能后果描述", l: 2, s: 3, safe: "现有保护层说明", sug: "建议补充的管控措施" },
+    ];
+    cur.value.rows = gen.map((x) => ({ ...x }));
+    analyzing.value = false;
+    message.success(`AI 已完成「${cur.value.dev}」偏离分析，生成 ${gen.length} 条记录（支持手动修改）`);
+  }, 1100);
+};
+
+const addRow = () => cur.value.rows.push({ cause: "", cons: "", l: 2, s: 3, safe: "", sug: "" });
+const delRow = (ri: number) => cur.value.rows.splice(ri, 1);
+const exportAll = () => {
+    emit("export", nodes.value.flatMap((n) => n.devs.flatMap((d) => d.rows.map((row) => toRec(n.obj, d.dev, row)))), "ai");
+}
+const save = () => {
+  message.success("已手动保存，分析记录数已同步至工具卡片（内容修改实时自动保存，退出不丢失）");
+};
+
+const ANALYSIS_POOL = [
+  { name: "张工艺", org: "一车间", post: "工艺工程师" },
+  { name: "王仪表", org: "技术部", post: "仪表工程师" },
+  { name: "周设备", org: "设备科", post: "设备工程师" },
+  { name: "刘文静", org: "技术部", post: "工艺员" },
+  { name: "王海燕", org: "安全环保部", post: "安全工程师" },
+  { name: "李主任", org: "一车间", post: "车间主任" },
+  { name: "吴海涛", org: "设备科", post: "维修班长" },
+  { name: "陈国栋", org: "一车间", post: "班长" },
+];
+const open = ref(false);
+const q = ref("");
+const sels = ref<string[]>(["张工艺", "王仪表"]);
+const list = computed(() => ANALYSIS_POOL.filter((x) => !q.value || x.name.includes(q.value)));
+const toggle = (n: string) => {
+  sels.value = sels.value.includes(n) ? sels.value.filter((x) => x !== n) : [...sels.value, n];
+};
+const rrOf = (l: number, s: number) => {
+  const v = l * s;
+  if (v >= 15) return { t: `重大 (${v})`, c: "bg-red-500 text-white" };
+  if (v >= 10) return { t: `较大 (${v})`, c: "bg-[#F5A623] text-white" };
+  if (v >= 5) return { t: `一般 (${v})`, c: "bg-amber-300 text-amber-900" };
+  return { t: `低 (${v})`, c: "bg-emerald-500 text-white" };
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <div 
+        class="flex flex-wrap items-center gap-2 rounded-lg border border-[#ACC6E5] bg-[#EAF0F9] px-3 py-2"
+        :style="{
+            '--theme-color': themeStore.themeColor
+        }"
+    >
+        <NButton size="small" ghost type="primary" class="text-xs" @click="emit('back')">
+            <Icon icon="basil:arrow-left-outline" class="size-18px" />
+            返回工具列表
+        </NButton>
+        <NButton size="small" ghost type="primary" class="text-xs" @click="save">保存</NButton>
+        <span class="text-sm font-bold text-[var(--theme-color)]">HAZOP 分析插件</span>
+        <NTag size="small" type="primary">插件</NTag>
+        <NTag size="small">MOC 变更：缩合反应温度及时间优化（演示）</NTag>
+        <span class="text-[11px] text-slate-500">{{ `分析进度 ${devDone}/${devTotal} 个偏离 · ${recTotal} 条记录` }}</span>
+        <div class="relative">
+            <NButton size="small" ghost type="primary" class="text-[11px]" @click="open = !open">
+                <Icon icon="lucide:users" class="size-12px" /> 分析组成员 · 已选 {{ sels.length }} 人
+            </NButton>
+            <template v-if="open">
+                <div class="fixed inset-0 z-10" @click="open = false"></div>
+                <div class="absolute right-0 top-8 z-20 w-72 rounded-lg border bg-white p-2 shadow-xl">
+                    <div class="mb-1.5 flex items-center justify-between">
+                        <span class="text-xs font-semibold text-slate-700">选择分析组成员（岗位人员库）</span>
+                        <span class="text-[11px] text-slate-400">已选 {{ sels.length }} 人</span>
+                    </div>
+                    <NInput v-model:value="q" size="small" placeholder="搜索人名…" class="mb-1.5 text-xs" />
+                    <div class="max-h-48 space-y-0.5 overflow-y-auto">
+                        <div v-for="x in list" :key="x.name" @click="toggle(x.name)"
+                            class="cursor-pointer flex w-full items-center min-h-34px gap-2 rounded-md px-2 py-1.5 text-left text-xs"
+                            :class="sels.includes(x.name) ? 'bg-[#DFE9F6]' : 'hover:bg-slate-50'">
+                            <span class="flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border text-[10px]"
+                            :class="sels.includes(x.name) ? 'border-[var(--theme-color)] bg-[var(--theme-color)] text-white' : 'border-slate-300'">{{ sels.includes(x.name) ? "✓" : "" }}</span>
+                            <span class="font-medium text-slate-800">{{ x.name }}</span>
+                            <span class="text-[11px] text-slate-400">{{ x.org }} · {{ x.post }}</span>
+                            <NTag v-if="sels[0] === x.name" size="small" type="primary" class="ml-auto">组长</NTag>
+                        </div>
+                    </div>
+                    <div class="mt-1.5 border-t pt-1.5 text-[11px] leading-4 text-slate-400">
+                    首位选择者默认为组长；成员为选择式（非手写），参与记录自动归属到人，用于「参与风险分析次数」统计采集。
+                    </div>
+                </div>
+            </template>
+        </div>
+        <div class="ml-auto flex items-center gap-1.5">
+            <NButton size="small" ghost type="primary" class="text-xs" :disabled="recTotal === 0" @click="exportAll">
+                <Icon icon="lucide:sparkles" class="size-12px mr-1" /> AI 整理入表
+            </NButton>
+            <NButton size="small" ghost type="primary" class="text-xs" @click="message.success('演示：HAZOP 分析报告已导出（Word）')">
+            <Icon icon="material-symbols:download" class="size-14px" /> 导出 Word
+            </NButton>
+            <NButton size="small" type="primary" class="text-xs" :disabled="analyzing" @click="runAi">
+                <Icon v-if="analyzing" icon="ri:loader-4-fill" class="size-14px animate-spin" />
+                <Icon v-else icon="lucide:sparkles" class="size-12px" />
+                AI 分析当前偏离
+            </NButton>
+        </div>
+    </div>
+
+    <div class="flex items-center gap-2 text-xs text-slate-500">
+      <span>当前位置：</span>
+      <NTag size="small">{{ nodes[sel.n].name }}</NTag>
+      <span>›</span>
+      <NTag size="small" type="success">分析对象：{{ nodes[sel.n].obj }}</NTag>
+      <span>›</span>
+      <NTag size="small" type="warning">偏离：{{ cur.dev }}</NTag>
+    </div>
+
+    <div 
+        class="flex gap-3"
+        :style="{
+            '--theme-color': themeStore.themeColor,
+            '--success-color': themeStore.otherColor.success
+        }"
+    >
+      <!-- 左：节点 / 偏离树 -->
+      <div class="shrink-0 rounded-lg border bg-white p-2">
+        <div v-for="(n, i) in nodes" :key="n.name" class="mb-1">
+          <div class="px-2 py-1.5 text-xs font-semibold text-slate-700">{{ n.name }}</div>
+          <div v-for="(d, j) in n.devs" :key="d.dev" @click="sel = { n: i, d: j }"
+            class="cursor-pointer flex w-full items-center gap-1.5 rounded-md px-3 py-1.5 text-left text-xs transition"
+            :class="sel.n === i && sel.d === j ? 'bg-[var(--theme-color)] text-white' : 'text-slate-600 hover:bg-slate-100'">
+            <span class="flex-1">{{ d.dev }}</span>
+            <span class="rounded-full px-1.5 text-[10px]"
+              :class="d.rows.length
+                ? (sel.n === i && sel.d === j ? 'bg-white/25 text-white' : 'bg-emerald-100 text-[var(--success-color)]')
+                : (sel.n === i && sel.d === j ? 'bg-white/30 text-white' : 'bg-slate-100 text-slate-400')">
+              {{ d.rows.length ? `${d.rows.length} 条` : "待分析" }}
+            </span>
+          </div>
+        </div>
+      </div>
+      <!-- 右：HAZOP 记录表 -->
+      <div class="min-w-0 flex-1 bg-white">
+        <div class="flex items-center gap-2 pb-2">
+          <NButton size="small" ghost type="primary" class="text-xs" @click="addRow">
+            <Icon icon="ic:round-plus" class="size-14px" /> 新增行
+          </NButton>
+          <span class="text-[11px] text-slate-400">单元格点击即可修改；L / S 取值 1-5，风险等级按风险矩阵实时重算；「入表」将本条选入风险分析记录表</span>
+        </div>
+        <table class="w-full min-w-[860px] border-collapse text-xs">
+          <thead>
+            <tr>
+              <th :class="TH" class="w-16">操作</th>
+              <th :class="TH">原因</th>
+              <th :class="TH">后果</th>
+              <th :class="TH" class="w-8">L</th>
+              <th :class="TH" class="w-8">S</th>
+              <th :class="TH" class="w-20">RR</th>
+              <th :class="TH">安全措施</th>
+              <th :class="TH">建议措施</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="cur.rows.length === 0">
+              <td colspan="8" class="px-3 py-8 text-center text-xs text-slate-400">
+                当前偏离暂无分析记录，点击右上角「AI 分析当前偏离」自动生成，或「新增行」手动填写
+              </td>
+            </tr>
+            <tr v-for="(row, ri) in cur.rows" :key="ri">
+              <td :class="TD">
+                <div class="flex items-center justify-between px-1 mt-1">
+                    <NButton text type="primary" class="mt-1px text-[11px] hover:underline" title="选入风险分析记录表"
+                      @click="message.success('已选入 1 条风险记录，可继续挑选或返回查看记录表')">入表
+                    </NButton>
+                    <NButton text type="error" title="删除行" @click="delRow(ri)">
+                      <Icon icon="ep:delete" class="size-14px" />
+                    </NButton>
+                </div>
+              </td>
+              <td :class="TD"><Ed :v="row.cause" @update="(x) => updRow(ri, { cause: x })" /></td>
+              <td :class="TD"><Ed :v="row.cons" @update="(x) => updRow(ri, { cons: x })" /></td>
+              <td :class="TD" class="text-center">
+                <input :value="row.l" @change="(e) => updRow(ri, { l: clampLS((e.target as HTMLInputElement).value) })"
+                  class="w-7 rounded border border-transparent text-center hover:border-slate-200" />
+              </td>
+              <td :class="TD" class="text-center">
+                <input :value="row.s" @change="(e) => updRow(ri, { s: clampLS((e.target as HTMLInputElement).value) })"
+                  class="w-7 rounded border border-transparent text-center hover:border-slate-200" />
+              </td>
+              <td :class="TD" class="text-center">
+                <span class="inline-block rounded px-1.5 py-0.5 text-[11px] font-medium" :class="rrOf(row.l, row.s).c">{{ rrOf(row.l, row.s).t }}</span>
+              </td>
+              <td :class="TD"><Ed :v="row.safe" @update="(x) => updRow(ri, { safe: x })" /></td>
+              <td :class="TD"><Ed :v="row.sug" @update="(x) => updRow(ri, { sug: x })" /></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>