发起变更，底部封装通用组件

2026-09-04 11:24:27 +08:00
parent cb918ea562
commit 7d05236399
18 changed files with 2260 additions and 1608 deletions
@@ -0,0 +1,335 @@
+<!-- 风险分析记录表 -->
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import Ed from "./Ed.vue";
+import Hazop from "./hazop.vue";
+import Jsa from "./jsa.vue";
+import Scl from "./scl.vue";
+import RiskCheck from "./riskCheck.vue";
+import ApprovalDrawer from './approvalDrawer.vue'
+
+const themeStore = useThemeStore();
+// 抽屉类型
+const approvalDrawerShow = ref<boolean>(false);
+const trainText = ref<string>('');
+const btnDisabled = ref<boolean>(false);
+const saveLoading = ref<boolean>(false);
+const downloadLoading = ref<boolean>(false);
+const regenerateLoading = ref<boolean>(false);
+const submitLoading = ref<boolean>(false);
+const confirmed = ref<boolean>(false);
+const approvers = ref<Record<string, string>>({
+  部门审核: "李主任（一车间主任）",
+  最终批准: "李主任（部门负责人 · 固定）",
+});
+const signers = ref<Record<string, string>>({});
+const pluginDone = ref<Record<string, number>>({});
+const tools = ref<string[]>(["HAZOP","JSA", "SCL", "RISK_CHECK"]);
+const riskRecords = ref<any>([]);
+const pluginDrawer = ref<boolean>(false);
+const currentPlugin = ref<string>('');
+const lvlNext = (v: string) => (v === "高" ? "中" : v === "中" ? "低" : "高");
+
+// 风险识别分析记录表
+const TOOL_CARDS = [
+  { key: "HAZOP" as const, name: "HAZOP 分析", desc: "节点-偏离结构化分析：原因 / 后果 / LS 风险矩阵 / 安全措施" },
+  { key: "JSA" as const, name: "JSA 分析", desc: "作业步骤分解：危害因素识别与 LS 风险分级管控" },
+  { key: "SCL" as const, name: "设备 SCL", desc: "设备 / 管理检查项目对照标准逐项核查" },
+  { key: "RISK_CHECK" as const, name: "风险检查表", desc: "变更通用检查项：是 / 否 / 不涉及逐项判定，输出风险描述与管控措施" },
+];
+const pssrGroups = ref<{ g: string; items: any[] }[]>([
+  { g: "一、风险分析行动项落实", items: [
+    { c: "联锁跳车电流设定值校核并留存记录", p: "投用前" },
+    { c: "电缆与开关容量校核升级完成", p: "投用前" },
+    { c: "操作人员培训完成并考核合格", p: "投用前" },
+  ] },
+  { g: "二、现场设备安装检查确认", items: [
+    { c: "电机安装就位，联轴器对中合格", p: "投用前" },
+    { c: "地脚螺栓紧固，减振垫安装到位", p: "投用前" },
+    { c: "电缆接线、防爆格兰头密封良好", p: "投用前" },
+  ] },
+  { g: "三、保护措施确认", items: [
+    { c: "联锁跳车设定值与新电机额定电流匹配", p: "投用前" },
+    { c: "电机外壳接地、防护罩完好", p: "投用前" },
+    { c: "紧急停机按钮功能试验正常", p: "投用前" },
+  ] },
+  { g: "四、资料归档确认", items: [
+    { c: "P&ID（图号 PID-R201-03）已更新并受控", p: "关闭前" },
+    { c: "设备台账、备件清单已更新", p: "关闭前" },
+    { c: "培训签到表、考核记录已归档", p: "关闭前" },
+  ] },
+]);
+
+const toPssrAll = () => {
+  const rest = riskRecords.value.map((x:any, i:any) => (x.pssr ? -1 : i)).filter((i:any) => i >= 0);
+  if (!rest.length) { window.$message?.info("所有建议措施均已转为 PSSR 行动项"); return; }
+  const items = rest.map((i:any) => ({ c: `${riskRecords.value[i].suggest}（来源：风险分析记录表 · ${riskRecords.value[i].item}）`, p: "投用前" }));
+  pssrGroups.value = pssrGroups.value.map((g:any, gi:any) => gi === 0 ? { ...g, items: [...g.items, ...items] } : g);
+  riskRecords.value = riskRecords.value.map((x:any) => ({ ...x, pssr: true }));
+  window.$message?.success(`已将 ${rest.length} 条建议措施全部转为 PSSR 行动项（见「PSSR 检查内容」）`);
+};
+
+const lsLevel = (l: number | null, s: number | null) => {
+  const rr = (l ?? 0) * (s ?? 0);
+  return rr >= 10 ? "高" : rr >= 5 ? "中" : "低";
+};
+
+const aiOrganize = async () => {
+  // let form = changePreRef.value?.form;
+  // analyzing.value = true;
+  // try {
+  //   const res = await aiRiskOrganize(form.description, (form.compare_rows ?? []).map((x: any) => ({ item: x.item, before_text: x.before_text, after_text: x.after_text })));
+  //   const gen = (res?.records ?? []).map((r) => ({
+  //     item: r.item,
+  //     scene: r.scene,
+  //     inherent: lsLevel(r.l, r.s),
+  //     existing: r.existing,
+  //     suggest: r.suggest,
+  //     residual: lsLevel(r.residual_l, r.residual_s),
+  //     source: "AI 整理",
+  //   }));
+  //   riskRecords.value = [...riskRecords.value, ...gen];
+  //   window.$message?.success(`AI 已根据变更内容自动整理形成风险分析记录表（${gen.length} 项），支持手动修改`);
+  // } catch (e: any) {
+  //   aiFail(e);
+  // } finally {
+  //   analyzing.value = false;
+  // }
+};
+
+const toPssr = (i: number) => {
+  const rec = riskRecords.value[i];
+  if (!rec || rec.pssr) return;
+  pssrGroups.value = pssrGroups.value.map((g:any, gi:any) => gi === 0
+    ? { ...g, items: [...g.items, { c: `${rec.suggest}（来源：风险分析记录表 · ${rec.item}）`, p: "投用前" }] }
+    : g);
+  updRec(i, { pssr: true });
+  window.$message?.success("建议措施已转为 PSSR 行动项（见「PSSR 检查内容」· 一、风险分析行动项落实）");
+};
+
+const updRec = (i: number, patch: Partial<any>) => {
+  riskRecords.value = riskRecords.value.map((x, j) => (j === i ? { ...x, ...patch } : x));
+};
+const onBack = () => {
+  pluginDrawer.value = false;
+}
+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 regenerate = () => window.$message?.success(`演示：已根据变更描述重新生成变更申请表（本页内容已刷新）`);
+const download = () => window.$message?.success(`演示：变更申请表已下载（Word/PDF）`);
+
+// 保存草稿
+const saveDraft = async () => {
+  // if(changeApplyRules()){
+  //   return
+  // }
+  // saveLoading.value = true;
+  // const {error} = await applicationSaveApi(props.currentId, form.value);
+  // if(!error){
+  //   window.$message?.success("已保存为草稿，可在左侧「我的草稿」中继续编辑");
+  // }
+  // saveLoading.value = false;
+}
+// ---------- 提交 ----------
+const submitApply = () => {
+
+}
+const confirmTab = () => {
+  confirmed.value = !confirmed.value;
+}
+
+defineExpose({trainText})
+</script>
+
+<template>
+<div class="p-4">
+  <div class="space-y-4 scroll">
+    <div class="border p-3" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <div class="flex flex-wrap items-center gap-2">
+        <span class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+          <Icon icon="lucide:shield-alert" class="size-16px" />
+          风险识别工具（按变更等级匹配）
+        </span>
+        <!-- <NTag size="small" :type="form?.level === '重要' ? 'error' : 'default'">
+          {{ form?.level === '重要' ? '重要变更' : '一般变更' }}
+        </NTag>
+        <span class="text-xs text-slate-400">
+          {{ form?.level === '重要' ? '规则：HAZOP 必做，同时开展 JSA 与检查表法（SCL）' : '规则：JSA + 检查表法（SCL），涉及工艺安全边界的应升级 HAZOP' }}；可在申请表「风险分析」栏手动重选
+        </span> -->
+      </div>
+      <div class="grid gap-2 grid-cols-4 mt-3">
+        <div v-for="t in TOOL_CARDS" :key="t.key" :title="t.desc"
+          class="flex items-center gap-2 rounded-lg border px-3 py-2 transition"
+          :class="pluginDone[t.key] !== undefined ? 'border-[var(--theme-color)] bg-[var(--theme-color)]' : tools.includes(t.key) ? 'border-[var(--theme-color)] bg-white' : 'border-slate-200 bg-white'"
+          :style="{'--theme-color': themeStore.themeColor}"
+        >
+          <div class="min-w-0 flex-1">
+            <div 
+              class="flex items-center gap-1.5 text-xs font-semibold"
+              :class="pluginDone[t.key] !== undefined ? 'text-white' : tools.includes(t.key) ? 'text-[var(--theme-color)]' : 'text-slate-500'"
+              :style="{'--theme-color': themeStore.themeColor}"
+            >
+              <Icon icon="fluent:wand-24-regular" class="size-16px" />
+              {{ t.name }}
+            </div>
+            <div class="mt-0.5 text-[10px]" :class="pluginDone[t.key] !== undefined ? 'text-white/75' : 'text-slate-400'">
+              {{ pluginDone[t.key] !== undefined ? `已使用并分析了 ${pluginDone[t.key]} 条内容` : '未使用此工具分析' }}
+            </div>
+          </div>
+          <NButton size="small" class="text-xs" :type="pluginDone[t.key] !== undefined ? 'default' : tools.includes(t.key) ? 'primary' : 'default'" 
+          >
+            使用
+          </NButton>
+        </div>
+      </div>
+    </div>
+
+    <div class="border" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+      <div class="flex flex-wrap items-center gap-2 bg-slate-100 px-3 py-2">
+        <span class="flex items-center gap-1.5 text-sm font-medium text-slate-700">
+          <Icon icon="proicons:alert-triangle" class="size-16px text-amber-500" />
+          风险分析记录表
+        </span>
+        <span class="text-[11px] text-slate-400">共 {{ riskRecords.length }} 项</span>
+        <span class="ml-auto hidden text-[11px] text-slate-400 lg:block">插件结果「入表」或 AI 自动整理形成；单元格点击修改，风险等级点击切换</span>
+        <NButton ghost size="small" color="#7c3aed" class="text-xs" @click="toPssrAll">
+          <Icon icon="tabler:clipboard-check" class="size-14px" />
+          全部转 PSSR 行动项
+        </NButton>
+        <NButton ghost size="small" type="primary" class="text-xs" @click="aiOrganize">
+          <Icon icon="lucide:sparkles" class="size-12px" />
+          AI 自动整理
+        </NButton>
+      </div>
+      <div v-if="riskRecords.length === 0" class="px-3 py-6 text-center text-xs text-slate-400">
+        尚无风险记录：调用上方插件完成分析后逐条「入表」，或点击「AI 自动整理」形成记录表
+      </div>
+      <div v-else class="overflow-x-auto p-3">
+        <table class="w-full min-w-[960px] border-collapse text-xs">
+          <thead>
+            <tr>
+              <th v-for="h in ['风险项', '场景描述', '固有风险', '现有措施', '建议措施', '剩余风险', '来源', '操作']" :key="h"
+                class="border bg-slate-50 px-2 py-1.5 text-[11px] font-medium text-slate-500">{{ h }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(rec, i) in riskRecords" :key="i">
+              <td class="border px-1.5 py-1 align-top font-medium text-slate-700">
+                <Ed :v="rec.item" @update="(x) => updRec(i, { item: x })" />
+              </td>
+              <td class="border px-1.5 py-1 align-top"><Ed :v="rec.scene" @update="(x) => updRec(i, { scene: x })" /></td>
+              <td class="border px-1.5 py-1 text-center align-top">
+                <NTag v-if="rec.inherent==='高'" type="error" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
+                  {{ rec.inherent }}
+                </NTag>
+                <NTag v-if="rec.inherent==='中'" type="warning" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
+                  {{ rec.inherent }}
+                </NTag>
+                <NTag v-if="rec.inherent==='低'" type="success" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { inherent: lvlNext(rec.inherent) as '高' | '中' | '低' })">
+                  {{ rec.inherent }}
+                </NTag>
+              </td>
+              <td class="border px-1.5 py-1 align-top"><Ed :v="rec.existing" @update="(x) => updRec(i, { existing: x })" /></td>
+              <td class="border px-1.5 py-1 align-top"><Ed :v="rec.suggest" @update="(x) => updRec(i, { suggest: x })" /></td>
+              <td class="border px-1.5 py-1 text-center align-top">
+                <NTag v-if="rec.residual==='高'" type="error" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
+                  {{ rec.residual }}
+                </NTag>
+                <NTag v-if="rec.residual==='中'" type="warning" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
+                  {{ rec.residual }}
+                </NTag>
+                <NTag v-if="rec.residual==='低'" type="success" size="small" class="cursor-pointer" title="点击切换等级" @click="updRec(i, { residual: lvlNext(rec.residual) as '高' | '中' | '低' })">
+                  {{ rec.residual }}
+                </NTag>
+              </td>
+              <td class="border px-1.5 py-1 text-center align-top">
+                <NTag size="small" type="info">{{ rec.source }}</NTag>
+              </td>
+              <td class="border px-1.5 py-1 text-center align-top">
+                <NTag v-if="rec.pssr" size="small" :color="{ color: '#f5f3ff', textColor: '#7c3aed', borderColor: '#f5f3ff' }">已转 PSSR</NTag>
+                <NButton text size="tiny" color="#7c3aed" v-else class="hover:underline" @click="toPssr(i)">转 PSSR</NButton>
+                <NButton text type="error" size="tiny" class="mt-2" @click="riskRecords = riskRecords.filter((_, j) => j !== i)">删除</NButton>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="flex flex-wrap items-center justify-between gap-2 border-t p-4">
+  <div class="flex flex-wrap gap-2">
+    <NButton ghost type="success" :disabled="btnDisabled" :loading="downloadLoading" @click="download">
+      <Icon icon="material-symbols:download" class="size-16px" /> 下载风险分析记录表
+    </NButton>
+    <NButton ghost type="warning" :disabled="btnDisabled" :loading="regenerateLoading" @click="regenerate">
+      <Icon icon="tdesign:refresh" class="size-14px" /> 重新生成风险分析记录表
+    </NButton>
+    <NButton ghost :type="confirmed ? 'success' : 'primary'" :disabled="btnDisabled" @click="confirmTab">
+      <Icon icon="ix:success" class="size-16px" /> {{ confirmed ? '已确认完毕' : '本标签内容确认完毕' }}
+    </NButton>
+  </div>
+</div>
+<div class="flex flex-wrap items-center gap-x-4 gap-y-2 bg-[#EAF0F9] px-4 py-2.5 shadow-[0_-2px_8px_rgba(0,0,0,0.05)]">
+  <div class="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-slate-500">
+    <Icon icon="lucide:users" class="size-14px" />
+    <span class="min-w-0 truncate">
+      部门审核：{{ approvers.部门审核 }} → 专业会签：{{ Object.keys(signers).length ? Object.values(signers).join('、') : '未涉及专业 · 免会签' }} → 最终批准：{{ approvers.最终批准 }}
+    </span>
+    <NButton ghost size="small" type="primary" @click="approvalDrawerShow = true">
+      <Icon icon="octicon:sliders-24" class="size-14px" />
+      审批流程设置
+    </NButton>
+  </div>
+  <div class="ml-auto flex shrink-0 items-center gap-2">
+    <NButton size="small" type="primary" :disabled="btnDisabled" :loading="saveLoading" @click="saveDraft">保存</NButton>
+    <!-- <span v-if="!form" class="flex items-center text-xs text-amber-600">请先在「变更预识别」页生成变更申请单</span> -->
+    <NButton size="small" type="primary" @click="submitApply" :disabled="btnDisabled" :loading="submitLoading">
+      提交 <Icon icon="formkit:right" class="size-14px" />
+    </NButton>
+  </div>
+</div>
+<!-- 插件抽屉 -->
+<NDrawer v-model:show="pluginDrawer" :width="1200" placement="right">
+  <NDrawerContent>
+    <template v-if="currentPlugin === 'HAZOP'">
+      <Hazop @back="onBack" @export="exportAll" />
+    </template>
+    <template v-else-if="currentPlugin === 'JSA'">
+      <Jsa @back="onBack" @export="exportAll" />
+    </template>
+    <template v-else-if="currentPlugin === 'SCL'">
+      <Scl @back="onBack" @export="exportAll" />
+    </template>
+    <template v-else-if="currentPlugin === 'RISK_CHECK'">
+      <RiskCheck @back="onBack" />
+    </template>
+  </NDrawerContent>
+</NDrawer>
+<!-- 审批流程设置 -->
+<NDrawer v-model:show="approvalDrawerShow" placement="right" width="28rem">
+  <NDrawerContent>
+    <template #header>
+      <div class="text-base font-semibold text-slate-800">审批流程设置</div>
+    </template>
+    <ApprovalDrawer />
+  </NDrawerContent>
+</NDrawer>
+</template>
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 393px);
+  overflow-y: auto;
+}
+</style>