From a2ce15f68a22b75b1cfc07e1e5b602f3f8f4708e Mon Sep 17 00:00:00 2001
From: bestlee <bestlee@djxinxi.net>
Date: Fri, 21 Aug 2026 16:44:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=AC=E4=B8=93=E4=B8=9A=E9=AB=98=E9=A3=8E?=
 =?UTF-8?q?=E9=99=A9=E8=AF=A6=E6=83=85=E9=9D=99=E6=80=81=E9=A1=B5=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/typings/components.d.ts             |    2 +
 src/views/home/highRiskDetail/index.vue | 1154 ++++++++++++++++++++++-
 2 files changed, 1146 insertions(+), 10 deletions(-)

diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index bf3098c..5d47c86 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -72,6 +72,7 @@ declare module 'vue' {
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTab: typeof import('naive-ui')['NTab']
+    NTable: typeof import('naive-ui')['NTable']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']
     NTooltip: typeof import('naive-ui')['NTooltip']
@@ -155,6 +156,7 @@ declare global {
   const NSpin: typeof import('naive-ui')['NSpin']
   const NSwitch: typeof import('naive-ui')['NSwitch']
   const NTab: typeof import('naive-ui')['NTab']
+  const NTable: typeof import('naive-ui')['NTable']
   const NTabs: typeof import('naive-ui')['NTabs']
   const NTag: typeof import('naive-ui')['NTag']
   const NTooltip: typeof import('naive-ui')['NTooltip']
diff --git a/src/views/home/highRiskDetail/index.vue b/src/views/home/highRiskDetail/index.vue
index 7a39663..0643068 100644
--- a/src/views/home/highRiskDetail/index.vue
+++ b/src/views/home/highRiskDetail/index.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
 import { useRoute } from 'vue-router';
+import { getColorWithOpacity } from '@/utils/common';
 
 const themeStore = useThemeStore();
 const { routerPushByKey } = useRouterPush();
@@ -12,15 +13,145 @@ const route = useRoute();
 const loading = ref<boolean>(false);
 // 当前高风险详情
 const currentInfo = ref<any>(null);
-// 是否开启 AI 标注
-const aiOn = ref<boolean>(false);
 const editMode = ref<boolean>(false);
+// 变更等级
+const level = ref<string>('重要');
+// 变更培训内容
+const traceCount = ref<number>(0);
+const canCosign = ref<boolean>(false);
+const acceptSign = ref<string>("none");
+const role = ref<string>("applicant");
+const today = () => new Date().toLocaleDateString("zh-CN");
+// 判定说明抽屉
+const describeDrawer = ref<boolean>(false);
+const levelDrawer = ref<boolean>(false);
+// 判定类型
+const judgmentType = ref<string>('工艺');
+// 得分
+const totalScore = ref<number>(21);
+// 评分维度
+const SCORE_MAJOR = [
+    { dim: "设备影响", score: 3, basis: "关键设备运行边界调整，接近设计上限" },
+    { dim: "财务影响", score: 3, basis: "失效可能导致装置停车，损失较大" },
+    { dim: "质量影响", score: 4, basis: "直接影响产品关键指标" },
+    { dim: "安全影响", score: 4, basis: "涉及工艺安全边界 / 重大危险源区域" },
+    { dim: "环境影响", score: 2, basis: "排放参数需重新校核" },
+    { dim: "合规声誉", score: 5, basis: "涉及重点监管危险化工工艺" },
+];
+const SCORE_GENERAL = [
+    { dim: "设备影响", score: 2, basis: "温度 / 压力仍在设计范围内，腐蚀速率略增" },
+    { dim: "财务影响", score: 2, basis: "控制不当可能批次报废，损失中等（1万~10万）" },
+    { dim: "质量影响", score: 3, basis: "涉及主要工艺参数，需加强过程监控" },
+    { dim: "安全影响", score: 3, basis: "涉及联锁参数调整，需 PSSR 确认" },
+    { dim: "环境影响", score: 1, basis: "无新增污染物排放" },
+    { dim: "合规声誉", score: 1, basis: "不涉及监管工艺备案" },
+];
+const scoreRows = computed(() => (level.value === "重要" ? SCORE_MAJOR : SCORE_GENERAL));
+
+interface FlowNode {
+  name: string;
+  kind: "审批" | "会签" | "最终批准";
+  status: "done" | "current" | "todo";
+  members?: { name: string; done: boolean }[];
+}
+const flow = ref<FlowNode[]>([
+    { name: "部门审核", kind: "审批", status: "done" },
+    { name: "专业会签", kind: "会签", status: "done" },
+    { name: "安全审查", kind: "审批", status: "current", members: [{ name: "安全审查", done: false }] },
+    { name: "分管领导最终批准", kind: "最终批准", status: "todo" },
+]);
+const current = computed(() => flow.value.find((n:any) => n.status === "current"));
+// ai 标注抽屉
+const aiDrawer = ref<boolean>(false);
+const mandClosed = ref<boolean>(false);
+const confirmClose = () => {
+    mandClosed.value = true; 
+    window.$message?.success('强制合规项已确认闭环，操作已留痕');
+}
+const conflictHide = ref<boolean>(false);
+const PARAM_DIFF = [
+    { k: "反应温度", before: "80℃", after: "90℃", over: false, note: "仍在溶剂沸点与物料分解温度的安全裕度内" },
+    { k: "保温时间", before: "8 h", after: "4 h", over: false, note: "终点判断窗口变窄，须修订操作规程" },
+    { k: "DCS 温度高报警", before: "85℃", after: "95℃", over: true, note: "超出原报警裕度，须重新整定验证" },
+    { k: "联锁高高报", before: "90℃", after: "100℃", over: true, note: "接近设备设计温度上限，投用前须完成联锁测试" },
+    { k: "未知杂质含量", before: "0.05%", after: "0.12%", over: false, note: "结构未定，须纳入日常分析计划" },
+];
+const aiRead = ref<boolean>(false);
+const roleName = ref<string>('张工艺');
+const suggs = ref([
+    { id: 1, text: "将未知杂质含量纳入日常分析计划（每周 1 次，连续 8 周）", st: "待定" },
+    { id: 2, text: "修订操作规程并补充超温应急处置卡后再投用", st: "待定" },
+]);
+const opinion = ref<string>("");
+
+// 已阅 AI 建议
+const readSuggest = () => {
+    aiRead.value = true;
+    window.$message?.success(`${roleName} 已阅 AI 建议，时间与操作已写入审批留痕`);
+}
+// 采纳为行动项
+const acceptSuggest = (s: any) => {
+    suggs.value = suggs.value.map((x:any) => (x.id === s.id ? { ...x, st: '已采纳' } : x)); 
+    opinion.value = (opinion.value ? `${opinion.value}\n` : '') + `采纳 AI 建议：${s.text}`; 
+    window.$message?.success('已采纳，自动生成 PSSR 行动项（来源：AI 建议），并纳入审批意见');
+}
+// 不采纳 AI 建议
+const rejectSuggest = (s: any) => {
+    suggs.value = suggs.value.map((x:any) => (x.id === s.id ? { ...x, st: '不采纳' } : x)); 
+    window.$message?.info('不采纳理由「现有分析频次已覆盖风险」已记录留痕');
+}
+// 查看归档包
+const viewArchive = (name: string) => {
+    window.$message?.info(`新窗口打开 ${name} 归档包，不影响当前审批`);
+}
+
 
 // 返回
 const back = () => {
     routerPushByKey('home_highrisk')
 };
 
+// 导出
+const exportFile = (type: string) => {
+    if(type === 'change'){
+        window.$message?.success('导出变更申请表成功');
+    }
+    if(type === 'risk'){
+        window.$message?.success('导出风险检查行动项表成功');
+    }
+    if(type === 'flow'){
+        window.$message?.info('查看审批流程图');
+    }
+};
+
+// 变更附带资料下载/一键下载
+const downloadFile = (type: string) => {
+    if(type === 'all'){
+        window.$message?.success('打包下载全部附件');
+    }else{
+        window.$message?.success('下载当前附件成功');
+    }
+};
+// 变更附带资料预览
+const previewFile = () => {
+    window.$message?.info('预览当前附件成功');
+}
+// 打开完整分析记录
+const openRecord = (name: string) => {
+    window.$message?.info(`打开「${name}」完整分析记录`);
+}
+
+// 加签
+const joinSign = () => {
+    acceptSign.value = 'safety'; 
+    window.$message?.success('演示：安全部门加签完成（电子签署留痕）· 验收签署链闭环');
+}
+// 催办
+const handleReminder = (m: any) => {
+    window.$message?.success(`演示：已催办 ${m.name}（系统消息 + 企业微信 + 短信），连续 2 次未响应将上报部门负责人`)
+}
+
+
 onMounted(() => {
     if(route.query && route.query.params){
         currentInfo.value = JSON.parse(route.query.params as string);
@@ -47,10 +178,10 @@ onMounted(() => {
                     ghost 
                     size="small"
                     class="text-xs"
-                    :type="aiOn ? 'success' : 'default'"
-                    @click="aiOn = !aiOn"
+                    :type="aiDrawer ? 'success' : 'default'"
+                    @click="aiDrawer = !aiDrawer"
                 >
-                    <Icon icon="lucide:sparkles" class="size-12px mr-1" /> AI 标注{{ aiOn ? ' · 已开启' : ' · 已关闭' }}
+                    <Icon icon="lucide:sparkles" class="size-12px mr-1" /> AI 标注{{ aiDrawer ? ' · 已开启' : ' · 已关闭' }}
                 </NButton>
             </div>
             <div class="space-y-3 scroll">
@@ -63,24 +194,1027 @@ onMounted(() => {
                         <span class="ml-2 text-xs text-slate-400">王海燕 · 2026-07-30 14:22 修改，已通知申请人确认</span>
                     </p>
                 </div>
+                <!-- 变更申请表 -->
                 <div class="flex items-center justify-between">
                     <p 
                         class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
                         :style="{'--theme-color': themeStore.themeColor}"
                     >变更申请表</p>
-                    <NButton ghost size="small" class="text-xs"><Icon icon="material-symbols:download" class="size-16px" />导出变更申请表</NButton>
+                    <NButton ghost size="small" class="text-xs" @click="exportFile('change')"><Icon icon="material-symbols:download" class="size-16px" />导出变更申请表</NButton>
                 </div>
+                <div
+                    class="border border-slate-200"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                >
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更发起人</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">孙丽</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">申请单位</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">一车间 · 工艺组</div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">主管部门</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">技术部</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更类别</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            工艺 
+                            <NButton ghost type="primary" size="small" round class="text-xs" @click="describeDrawer = true">
+                                <Icon icon="lucide:sparkles" class="size-12px mr-1" />判定说明
+                            </NButton>
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">发起日期</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">2026-07-25</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">计划投用日期</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">2026-08-05</div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr_100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更时限</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">永久变更</div>
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">紧急</p>
+                        <div class="px-3 py-1.6 text-sm leading-relaxed text-slate-800">否</div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更等级</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            <NRadioGroup v-model:value="level">
+                                <NRadio value="重要">重要</NRadio>
+                                <NRadio value="一般" :disabled="true">一般</NRadio>
+                            </NRadioGroup>
+                            <NTag type="error" size="small">合计 {{totalScore}} 分</NTag>
+                            <NButton ghost type="warning" size="small" round class="text-xs" @click="levelDrawer = true">
+                                <Icon icon="lucide:eye" class="size-12px mr-1" />查看等级判定
+                            </NButton>
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">涉及设备</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            R-101 聚合釜 / TIC-101
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更目的</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            提高反应温度上限以缩短聚合时间、提升装置产能，满足新增订单需求。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">预期效果</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            单釜反应周期缩短约 40 分钟，年产能预计提升 8%。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更前</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            聚合反应温度控制范围 65–78℃，TIC-101 高报 78℃、联锁 80℃。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">变更后</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            控制范围调整为 65–82℃，TIC-101 高报 82℃、联锁值维持 85℃ 安全边界不变。
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">连带变更</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            修订工艺卡片与操作规程；DCS 参数与报警值修改；更新 HAZOP 分析报告；岗位人员再培训
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-[100px_1fr]">
+                        <p class="flex items-center justify-end px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">所需材料</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            工艺计算书、热平衡与飞温风险分析、HAZOP 分析报告、更新后的工艺卡片
+                        </div>
+                    </div>
+                </div>
+                <!-- 变更附带资料 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >变更附带资料</p>
+                    <NButton ghost size="small" class="text-xs" @click="downloadFile('all')"><Icon icon="material-symbols:download" class="size-16px" />一键下载</NButton>
+                </div>
+                <NTable size="small">
+                    <thead>
+                    <tr>
+                        <th class="w-60px !text-center">序号</th>
+                        <th>文件名</th>
+                        <th class="w-100px !text-center">类型</th>
+                        <th class="w-100px !text-center">文件大小</th>
+                        <th class="w-120px !text-center">上传时间</th>
+                        <th class="w-120px !text-center">上传阶段</th>
+                        <th class="w-90px !text-center">操作</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td class="text-center">1</td>
+                        <td>变更方案.pdf</td>
+                        <td class="text-center text-xs">pdf</td>
+                        <td class="text-center text-xs">441.04KB</td>
+                        <td class="text-center text-xs">2026-07-28 09:12</td>
+                        <td class="text-center text-xs">发起变更</td>
+                        <td>
+                            <div class="flex items-center justify-center gap-2">
+                                <NButton text type="primary" class="text-xs" @click="previewFile">预览</NButton>
+                                <NButton text type="primary" class="text-xs" @click="downloadFile('single')">下载</NButton>
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </NTable>
+                <!-- 试验验证和风险评估方式 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >试验验证和风险评估方式</p>
+                </div>
+                <div
+                    class="border border-slate-200"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                >
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">是否需要进行试验验证</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            否
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">试验附件</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            无附件
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">是否需要设计委托</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            否
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">风险评估方法</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            AI 分析、HAZOP
+                        </div>
+                    </div>
+                </div>
+                <!-- 风险辨识会议信息 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >风险辨识会议信息</p>
+                    <NButton ghost size="small" class="text-xs" @click="downloadFile('all')"><Icon icon="material-symbols:download" class="size-16px" />一键下载</NButton>
+                </div>
+                <div
+                    class="border border-slate-200"
+                    :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+                >
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">会议主题</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            聚合反应温度控制上限调整（78℃→82℃）
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">会议时间</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            2026-07-29 13:32
+                        </div>
+                    </div>
+                    <div class="grid border-b grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">参会人员</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            张工艺、王仪表、周设备、王海燕、李主任
+                        </div>
+                    </div>
+                    <div class="grid grid-cols-[100px_1fr]">
+                        <p class="text-right px-3 py-1.6 text-xs text-slate-500 bg-[#fafafc]">风险评估方法</p>
+                        <div class="flex items-center gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
+                            AI 分析、HAZOP
+                        </div>
+                    </div>
+                </div>
+                <NTable size="small">
+                    <thead>
+                    <tr>
+                        <th class="w-60px !text-center">序号</th>
+                        <th>文件名</th>
+                        <th class="w-100px !text-center">类型</th>
+                        <th class="w-100px !text-center">文件大小</th>
+                        <th class="w-120px !text-center">上传时间</th>
+                        <th class="w-120px !text-center">上传阶段</th>
+                        <th class="w-90px !text-center">操作</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td class="text-center">1</td>
+                        <td>风险辨识会议照片.pdf</td>
+                        <td class="text-center text-xs">pdf</td>
+                        <td class="text-center text-xs">441.04KB</td>
+                        <td class="text-center text-xs">2026-07-28 09:12</td>
+                        <td class="text-center text-xs">风险辨识</td>
+                        <td>
+                            <div class="flex items-center justify-center gap-2">
+                                <NButton text type="primary" class="text-xs" @click="previewFile">预览</NButton>
+                                <NButton text type="primary" class="text-xs" @click="downloadFile('single')">下载</NButton>
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </NTable>
+                
+                <!-- 风险辨识评估 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >风险辨识评估</p>
+                    <NButton ghost size="small" class="text-xs" @click="exportFile('risk')"><Icon icon="material-symbols:download" class="size-16px" />导出风险检查行动项表</NButton>
+                </div>
+                <NTable size="small">
+                    <thead>
+                        <tr>
+                            <th class="w-60px !text-center">序号</th>
+                            <th>采取的安全措施</th>
+                            <th class="w-100px !text-center">剩余风险等级</th>
+                            <th class="w-100px !text-center">负责人</th>
+                            <th class="w-100px !text-center">计划完成日期</th>
+                            <th class="w-100px !text-center">部门负责人</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="text-center">1</td>
+                            <td>
+                                <div class="flex items-center flex-wrap">
+                                    <p>投用前完成联锁跳车电流设定值校核并留存记录</p>
+                                    <NTag type="info" size="small" class="ml-2">投用前完成</NTag>
+                                </div>
+                            </td>
+                            <td class="text-center text-xs">
+                                <NTag type="success" size="small">低</NTag>
+                            </td>
+                            <td class="text-center text-xs">周设备</td>
+                            <td class="text-center text-xs">2026-07-28</td>
+                            <td class="text-center text-xs">李主任</td>
+                        </tr>
+                        <tr>
+                            <td class="text-center">2</td>
+                            <td>
+                                <div class="flex items-center flex-wrap">
+                                    <p>电缆与开关容量校核升级完成后方可送电</p>
+                                    <NTag type="info" size="small" class="ml-2">投用前完成</NTag>
+                                </div>
+                            </td>
+                            <td class="text-center text-xs">
+                                <NTag type="warning" size="small">中</NTag>
+                            </td>
+                            <td class="text-center text-xs">张工艺</td>
+                            <td class="text-center text-xs">2026-08-09</td>
+                            <td class="text-center text-xs">李主任</td>
+                        </tr>
+                        <tr>
+                            <td class="text-center">3</td>
+                            <td>
+                                <div class="flex items-center flex-wrap">
+                                    <p>更新 P&ID（图号 PID-R201-03）与设备台账</p>
+                                    <NTag type="info" size="small" class="ml-2">关闭前完成</NTag>
+                                </div>
+                            </td>
+                            <td class="text-center text-xs">
+                                <NTag type="error" size="small">高</NTag>
+                            </td>
+                            <td class="text-center text-xs">王仪表</td>
+                            <td class="text-center text-xs">2026-08-12</td>
+                            <td class="text-center text-xs">李主任</td>
+                        </tr>
+                    </tbody>
+                </NTable>
+                <div class="flex flex-wrap items-center gap-2 rounded-lg bg-[#fafafc] px-3 py-2.5 text-xs text-slate-500">
+                    <span>完整分析记录：</span>
+                    <template v-for="t in ['AI','HAZOP']" :key="t">
+                        <NButton size="small" ghost type="primary" class="text-xs" @click="openRecord(t)">{{  t }}分析记录</NButton>
+                    </template>
+                </div>
+
+                <div class="flex gap-2 rounded-lg border bg-[#EAF0F9]/50 px-3 py-2 text-xs text-slate-500 !mt-6">
+                    <Icon icon="lucide:sparkles" class="size-14px" />
+                    <p class="flex-1">
+                        以下表单与变更申请页同格式展示，随申请单一并提交；审批 / 会签人员可直接修改，修改自动留痕并通知申请人确认；后续培训签到、PSSR 执行、验收、关闭环节按同一格式确认
+                    </p>
+                </div>
+                <!-- 变更培训内容 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="lucide:graduation-cap" class="size-16px text-violet-500" />
+                        <span class="text-sm font-semibold text-slate-700">变更培训内容</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">培训安排</div>
+                            <div class="grid grid-cols-2">
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训对象</span>
+                                    <p>R-201 位操作人员（4 人）、维修班（2 人）</p>
+                                </div>
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训方式</span>
+                                    <p>现场讲解 + 操作演示</p>
+                                </div>
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">培训时长</span>
+                                    <p>2 学时（投用前完成）</p>
+                                </div>
+                                <div class="flex items-center border-t px-3 py-1.6 text-sm">
+                                    <span class="w-20 shrink-0 text-xs text-slate-500">考核方式</span>
+                                    <p>现场提问 + 签到确认，合格后上岗</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">一、变更内容</div>
+                            <p class="px-3 py-1.6">M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机（ExdⅡBT4 → ExdⅡCT4），额定电流 102A → 138A；电缆与开关容量同步升级，联锁跳车电流设定值同步校核调整。</p>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">二、变化的操作方式</div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p class="w-[100px]">1. 搅拌器启动</p>
+                                    <p 
+                                        class="flex-1 bg-slate-50 py-1.5 px-2"
+                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">前：</span>直接启动，观察电流 ≤102A
+                                    </p>
+                                </div>
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p 
+                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                        }"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">后：</span>启动后核对电流 ≤138A，确认变频器参数已更新
+                                    </p>
+                                    <p 
+                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                            color: themeStore.otherColor.warning
+                                        }"
+                                    >
+                                        注：首次启动空载试运行 30 分钟
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p class="w-[100px]">2. 高粘度工况操作</p>
+                                    <p 
+                                        class="flex-1 bg-slate-50 py-1.5 px-2"
+                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">前：</span>粘度 >3000cP 需降速运行
+                                    </p>
+                                </div>
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p 
+                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                        }"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">后：</span>粘度 ≤6000cP 可全速运行
+                                    </p>
+                                    <p 
+                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                            color: themeStore.otherColor.warning
+                                        }"
+                                    >
+                                        注：严禁超过 6000cP 上限
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p class="w-[100px]">3. 过载跳闸处置</p>
+                                    <p 
+                                        class="flex-1 bg-slate-50 py-1.5 px-2"
+                                        :style="{borderRadius: themeStore.themeRadius + 'px'}"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">前：</span>复位后直接重启
+                                    </p>
+                                </div>
+                                <div class="flex items-center gap-2 px-3 py-1.6">
+                                    <p 
+                                        class="w-[70%] bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.themeColor, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                        }"
+                                    >
+                                        <span :style="{color:themeStore.themeColor}">后：</span>先查明原因并记录，联锁复位需班长确认
+                                    </p>
+                                    <p 
+                                        class="flex-1 bg-[var(--bg-color)] py-1.5 px-2"
+                                        :style="{
+                                            '--bg-color': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                                            borderRadius: themeStore.themeRadius + 'px',
+                                            color: themeStore.otherColor.warning
+                                        }"
+                                    >
+                                        注：跳闸电流设定值已调整
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">三、潜在风险与应对方式</div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex px-3 py-2.2">
+                                    <span class="text-slate-400 pr-1">1.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
+                                    <p>电机 / 电缆过热</p>
+                                </div>
+                                <div class="flex px-3 py-2.2">
+                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
+                                    <p class="flex-1">投用首周每班测温并记录，红外点检复核</p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex px-3 py-2.2">
+                                    <span class="text-slate-400 pr-1">2.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
+                                    <p class="flex-1">联锁设定错误导致拒动 / 误动</p>
+                                </div>
+                                <div class="flex px-3 py-2.2">
+                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
+                                    <p class="flex-1">投用前完成跳车试验并留存记录</p>
+                                </div>
+                            </div>
+                            <div class="grid grid-cols-2 border-t text-xs">
+                                <div class="flex px-3 py-2.2">
+                                    <span class="text-slate-400 pr-1">3.</span><span :style="{color: themeStore.otherColor.error}">风险：</span>
+                                    <p class="flex-1">防爆接合面或格兰头密封失效</p>
+                                </div>
+                                <div class="flex px-3 py-2.2">
+                                    <span :style="{color: themeStore.otherColor.success}">应对：</span>
+                                    <p class="flex-1">检查防爆接合面与格兰头，严禁带电开盖</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">四、培训签到</div>
+                            <p class="px-3 py-1.6">反应岗位：张大勇、李强；维修班：周设备；班长：李主任（名单由培训对象岗位自动匹配，扫码签到 / 手动确认 / 拍照上传签到表）</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- PSSR 检查内容 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="lucide:list-checks" class="size-16px text-violet-500" /> 
+                        <span class="text-sm font-semibold text-slate-700">PSSR 检查内容</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">一、风险分析行动项落实</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">联锁跳车电流设定值校核并留存记录</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">周设备</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">电缆与开关容量校核升级完成后方可送电</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">操作人员培训完成并考核合格，签到表归档</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">张工艺</NTag>
+                                    <span class="text-slate-400">培训签到记录</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">二、现场安装设备检查确认</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">电机安装对中、地脚螺栓力矩复核</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">周设备</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">防爆接合面、格兰头密封检查</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">手动确认 + 记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">三、保护措施确认</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">联锁跳车试验合格并留存记录</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">周设备</NTag>
+                                    <span class="text-slate-400">试验记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">电机接地、漏电保护测试合格</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">测试记录上传</span>
+                                    <NTag size="small" type="info">投用前</NTag>
+                                    <!-- <NTag size="small">关闭前</NTag> -->
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">四、资料归档</div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">更新 P&ID（图号 PID-R201-03）与设备台账</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small">王仪表</NTag>
+                                    <span class="text-slate-400">版本受控上传</span>
+                                    <NTag size="small">关闭前</NTag>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 验收评价 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="ix:success" class="size-16px text-emerald-500" />
+                        <span class="text-sm font-semibold text-slate-700">验收评价</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <NTable size="small">
+                            <thead>
+                                <tr>
+                                    <th class="w-160px">验收项目</th>
+                                    <th>量化标准</th>
+                                    <th class="w-190px">验收方式</th>
+                                    <th class="w-100px">责任方</th>
+                                    <th class="w-80px !text-center">评估结论</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td class="text-xs">过载跳闸消除</td>
+                                    <td class="text-xs">投用后月均过载跳闸 0 次（变更前月均 3 次）</td>
+                                    <td class="text-xs">DCS 跳闸记录统计，投用后连续 30 天</td>
+                                    <td class="text-xs">车间 · 李主任</td>
+                                    <td class="text-center text-xs">
+                                        <NTag type="warning" size="small">待验收</NTag>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </NTable>
+                        <div class="mt-1.5 text-[11px] text-slate-400">评估结论由车间与各专业在验收阶段填写：完全达到 / 基本达到 / 未达成</div>
+                        <!-- 验收审核签署链 -->
+                        <div class="mt-2 rounded-lg border border-[#ACC6E5]/60 bg-[#EAF0F9]/50 p-3">
+                            <div class="mb-2 flex flex-wrap items-center gap-2 text-xs font-semibold text-slate-600">
+                                验收审核签署
+                                <span class="font-normal text-slate-400">申请人填报 → 属地负责人审核{{ level === '重要' ? ' → 安全部门加签（重要变更）' : '' }}</span>
+                            </div>
+                            <div class="flex flex-wrap items-center gap-2">
+                                <NTag size="small" type="success">
+                                    <template #icon><Icon icon="ix:success" class="size-14px" /></template>
+                                    验收填报 · 申请人
+                                </NTag>
+                                <Icon icon="formkit:right" class="size-12px text-slate-300" />
+                                <template v-if="acceptSign === 'none'">
+                                    <template v-if="role === 'dept'">
+                                        <button class="inline-flex h-7 items-center rounded-md bg-emerald-600 px-2.5 text-xs font-medium text-white transition hover:bg-emerald-700" @click="acceptSign = 'dept'; toast.success(level === '重要' ? '演示：属地负责人已审核验收结论（电子签署留痕）· 重要变更已流转安全部门加签（王海燕）' : '演示：属地负责人已审核验收结论（电子签署留痕）');">同意验收结论</button>
+                                        <button class="inline-flex h-7 items-center rounded-md border border-red-200 bg-white px-2.5 text-xs text-red-600 transition hover:bg-red-50" @click="toast.warning('演示：已退回申请人补正验收材料，补正后重新提交审核')">退回补正</button>
+                                    </template>
+                                    <NTag v-else size="small">待属地负责人（李主任）审核</NTag>
+                                </template>
+                                <NTag v-else size="small" type="success"><CheckCircle2 class="mr-1 h-3 w-3" />属地负责人审核 · 李主任 {{ today() }}</NTag>
+                                <template v-if="level === '重要' && acceptSign !== 'none'">
+                                    <Icon icon="formkit:right" class="size-12px text-slate-300" />
+                                    <NTag v-if="acceptSign === 'safety'" size="small" type="success"><CheckCircle2 class="mr-1 h-3 w-3" />安全加签 · 王海燕 {{ today() }}</NTag>
+                                    <button v-else-if="role === 'safety'" @click="joinSign">安全加签</button>
+                                    <NTag v-else size="small" class="bg-white text-slate-500">待安全部门加签（王海燕）</NTag>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- 变更关闭确认表 -->
+                <div>
+                    <div class="flex items-center gap-2 mb-1.5">
+                        <Icon icon="lucide:folder-archive" class="size-16px text-slate-500" />
+                        <span class="text-sm font-semibold text-slate-700">变更关闭确认表</span>
+                        <NTag v-if="traceCount" size="small" type="error">已修改 · 留痕 ×{{ traceCount }}</NTag>
+                        <NTag v-else-if="canCosign" size="small" type="info">会签可修改</NTag>
+                    </div>
+                    <div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                        <div class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+                            <div class="flex items-center px-3 py-1.6 text-xs">
+                                <p class="flex-1">PID 图纸（PID-R201-03，受控最新版）</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small" type="success" round>是</NTag>
+                                    <NTag size="small" type="success">已归档</NTag>
+                                    <!-- <NTag size="small">未归档</NTag> -->
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">操作规程（含超温应急处置卡）</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small" type="success" round>是</NTag>
+                                    <NTag size="small">未归档</NTag>
+                                </div>
+                            </div>
+                            <div class="flex items-center border-t px-3 py-1.6 text-xs">
+                                <p class="flex-1">DCS 联锁台账（新报警 / 联锁值）</p>
+                                <div class="flex items-center gap-2">
+                                    <NTag size="small" type="success" round>是</NTag>
+                                    <NTag size="small">未归档</NTag>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-1.5 text-[11px] text-slate-400">AI 辅助判定一次（是 / 否 / 不涉及），可改判留痕；全部资料归档且行动项关闭后，系统自动推送变更主管部门专人确认关闭</div>
+                    </div>
+                </div>
+                <!-- 审批记录 -->
+                <div class="flex items-center justify-between">
+                    <p 
+                        class="rounded-sm bg-[var(--theme-color)] px-3 py-1 text-xs font-semibold text-white"
+                        :style="{'--theme-color': themeStore.themeColor}"
+                    >审批记录</p>
+                    <NButton ghost size="small" class="text-xs" @click="exportFile('flow')">查看审批流程图</NButton>
+                </div>
+                <NTable size="small">
+                    <thead>
+                        <tr>
+                            <th class="w-120px">流程阶段</th>
+                            <th class="w-120px">操作人</th>
+                            <th class="w-80px !text-center">操作类型</th>
+                            <th class="w-140px !text-center">操作时间</th>
+                            <th>操作内容和意见</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td class="text-xs">专业会签（仪表）</td>
+                            <td class="text-xs">王仪表 / JC000018</td>
+                            <td class="text-center text-xs">
+                                <NTag type="info" size="small">发起</NTag>
+                            </td>
+                            <td class="text-center text-xs">2026-07-28 09:12</td>
+                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
+                        </tr>
+                        <tr>
+                            <td class="text-xs">专业会签（仪表）</td>
+                            <td class="text-xs">王仪表 / JC000018</td>
+                            <td class="text-center text-xs">
+                                <NTag type="success" size="small">同意</NTag>
+                            </td>
+                            <td class="text-center text-xs">2026-07-28 09:12</td>
+                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
+                        </tr>
+                        <tr>
+                            <td class="text-xs">专业会签（仪表）</td>
+                            <td class="text-xs">王仪表 / JC000018</td>
+                            <td class="text-center text-xs">
+                                <NTag type="warning" size="small">待处理</NTag>
+                            </td>
+                            <td class="text-center text-xs">2026-07-28 09:12</td>
+                            <td class="text-xs">已经过组会评审，相关变更无安全风险隐患，同意变更</td>
+                        </tr>
+                    </tbody>
+                </NTable>
+
+                <!-- 审批流程进度 -->
+                <div class="space-y-2">
+                    <div class="text-sm font-semibold">审批流程（{{ level }}变更）</div>
+                    <div class="flex flex-wrap items-center gap-1">
+                        <template v-for="(n, i) in flow" :key="n.name">
+                        <div class="flex items-center gap-1">
+                            <div class="rounded-lg border px-3 py-2 text-center"
+                            :class="n.status === 'done' ? 'border-emerald-300 bg-emerald-50' : n.status === 'current' ? 'border-amber-400 bg-amber-50' : 'bg-slate-50'">
+                            <div class="flex items-center gap-1 text-xs font-medium">
+                                <Icon v-if="n.kind === '会签'" icon="lucide:users" class="size-12px" />
+                                <Icon v-if="n.kind === '最终批准'" icon="uil:lock" class="size-12px" />
+                                {{ n.name }}
+                            </div>
+                            <div class="text-[10px] text-slate-500">{{ n.kind }}</div>
+                            </div>
+                            <Icon v-if="i < flow.length - 1" icon="formkit:right" class="size-14px text-slate-300" />
+                        </div>
+                        </template>
+                    </div>
+                    <div v-if="current?.members" class="rounded-lg border border-amber-200 bg-amber-50/60 p-3">
+                        <div class="mb-2 flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-700">
+                            会签进度（全体通过方可流转）
+                            <span class="font-normal text-amber-600">
+                                {{ current.members.filter((m) => m.done).length }}/{{ current.members.length }} 已签 · 未签已等待 22 小时
+                            </span>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-2">
+                        <span v-for="m in current.members" :key="m.name" class="flex items-center gap-1">
+                            <NTag size="small" :type="m.done ? 'success' : 'default'">
+                                <template #icon>
+                                    <Icon v-if="m.done" icon="ix:success" class="size-14px" />
+                                    <Icon v-else icon="lucide:circle" class="size-12px text-slate-400" />
+                                </template>
+                                {{ m.name }}
+                            </NTag>
+                            <div v-if="!m.done && (role === 'applicant' || role === 'dept')"
+                                class="cursor-pointer inline-flex h-6 items-center gap-1 rounded-md border border-amber-300 bg-white px-2 text-[11px] text-amber-700 transition hover:bg-amber-100"
+                                @click="handleReminder(m)"
+                            >
+                                <Icon icon="lucide:bell" class="size-12px" /> 催办
+                            </div>
+                        </span>
+                        </div>
+                    </div>
+                </div>
+
             </div>
-
-
         </NCard>
+        <!-- 变更类型判定说明（右侧抽屉） -->
+        <NDrawer v-model:show="describeDrawer" :width="576" placement="right">
+            <NDrawerContent title="AI 变更类型判定说明" closable>
+                <div class="space-y-4">
+                    <div class="flex items-center gap-2">
+                        <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                            ✨ AI 生成 · 需人工确认
+                        </span>
+                        <NTag size="small" type="info">判定：{{ judgmentType }}</NTag>
+                        <NTag size="small">置信度：高</NTag>
+                    </div>
+                    <div class="space-y-3 text-sm leading-relaxed text-slate-700">
+                        <p><b>判定结论：</b>本次变更为 M-201A 搅拌电机由 55kW 更换为 75kW 防爆电机，涉及设备本体规格型号、防爆等级（ExdⅡBT4 → ExdⅡCT4）与额定电流变化，并连带电缆、开关容量及联锁设定值调整，依据变更类型规则判定为「{{ judgmentType }}」类变更。</p>
+                        <p><b>判定依据：</b></p>
+                        <ul class="list-disc space-y-1 pl-5">
+                            <li>命中规则 3.1：设备规格型号 / 功率等级变化 → 设备类</li>
+                            <li>命中规则 3.3：防爆等级与电气配套（电缆、开关容量）变更 → 设备类（电气联动）</li>
+                            <li>排除规则 2.1：反应温度、压力等工艺控制窗口未变化 → 不构成工艺类</li>
+                        </ul>
+                        <p><b>知识库引用：</b>设备数据表 M-201A（Rev C）、防爆合格证、电气负荷校核计算书、《变更管理制度》第 4.3 条。</p>
+                        <p class="rounded-lg bg-amber-50 p-3 text-xs text-amber-700">AI 判定结果仅供参考，最终类型以人工确认为准；如调整为其他类型，系统将记录修改留痕。</p>
+                    </div>
+                </div>
+            </NDrawerContent>
+        </NDrawer>
+        <!-- 变更等级判定表（右侧抽屉查看） -->
+        <NDrawer v-model:show="levelDrawer" :width="576" placement="right">
+            <NDrawerContent title="变更等级判定表" closable>
+                <div class="space-y-4">
+                    <div class="flex items-center gap-2">
+                        <NTag v-if="level==='重要'" size="small" type="error">判定：{{ level }}变更</NTag>
+                        <NTag v-if="level==='一般'" size="small">判定：{{ level }}变更</NTag>
+                        <span class="text-xs text-slate-400">合计得分 <b class="text-[#17407F]">{{ totalScore }}</b> 分（&lt;20 分为一般，≥20 分为重要）</span>
+                    </div>
+                    <NTable size="small">
+                        <thead>
+                            <tr class="border-b bg-slate-50">
+                                <th class="w-28">评估维度</th>
+                                <th class="w-20">得分</th>
+                                <th>评分依据</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="s in scoreRows" :key="s.dim" class="border-b last:border-b-0">
+                                <td class="font-medium">{{ s.dim }}</td>
+                                <td class="font-bold text-[#17407F]">{{ s.score }}</td>
+                                <td class="text-xs leading-relaxed text-slate-600">{{ s.basis }}</td>
+                            </tr>
+                        </tbody>
+                    </NTable>
+                    <div class="rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-400">
+                        AI 初评 + 人工确认，改判留痕；评分表版本随变更提交版本冻结。
+                    </div>
+                </div>
+            </NDrawerContent>
+        </NDrawer>
+        <!-- AI 审批辅助（右侧抽屉查看） -->
+        <NDrawer v-model:show="aiDrawer" :width="576" placement="right">
+            <NDrawerContent title="变更等级判定表" closable>
+                <template #header>
+                    <span class="flex items-center gap-1.5 text-sm font-bold text-slate-700">
+                        <Icon icon="lucide:sparkles" class="size-16px text-violet-500 mr-1" />
+                        AI 审批辅助（抽屉式，正文全窗口阅读）
+                    </span>
+                </template>
+                <div class="space-y-4">
+                    <!-- 合规警告条（强制合规项，不可关闭；闭环后转绿） -->
+                    <div 
+                        class="px-3 py-2.5 text-sm" 
+                        :class="mandClosed ? 'text-[var(--success-color)] bg-[var(--success-bg-color)]' : 'text-[var(--warning-color)] bg-[var(--warning-bg-color)]'"
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--success-color':themeStore.otherColor.success, 
+                            '--success-bg-color':getColorWithOpacity(themeStore.otherColor.success,0.1),
+                            '--warning-color':themeStore.otherColor.warning,
+                            '--warning-bg-color':getColorWithOpacity(themeStore.otherColor.warning,0.1)
+                        }"
+                    >
+                        <div class="flex items-center gap-2">
+                            <Icon icon="proicons:alert-triangle" class="size-16px" />
+                            <span class="font-semibold">强制合规</span>
+                            <span class="ml-auto shrink-0">
+                                <NTag v-if="mandClosed" size="small" type="success">
+                                    <template #icon>
+                                        <Icon icon="lucide:shield-check" class="size-12px" />
+                                    </template>
+                                    已闭环
+                                </NTag>
+                                <NTag v-else size="small" type="warning">未闭环</NTag>
+                            </span>
+                        </div>
+                        <p class="mt-1 text-xs leading-relaxed">
+                            本次变更涉及 DCS 联锁设定值修改，依据 AQ/T 3034《化工企业工艺安全管理实施导则》，投用前须完成联锁测试并留存记录。
+                        </p>
+                        <div v-if="!mandClosed" class="mt-1 text-right">
+                            <NButton text type="primary" class="text-xs" @click="confirmClose">确认闭环（留痕）</NButton>
+                        </div>
+                    </div>
+                    <!-- 变更冲突提示（同设备在途变更，可收起） -->
+                    <div 
+                        v-if="!conflictHide" 
+                        class="bg-[var(--bg-color)] px-3 py-2.5 text-sm text-[var(--theme-color)]"
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--theme-color':themeStore.themeColor, 
+                            '--bg-color':getColorWithOpacity(themeStore.themeColor,0.1),
+                        }"
+                    >
+                        <div class="flex items-center gap-2">
+                            <Icon icon="lucide:bell" class="size-14px" />
+                            <span class="font-semibold">冲突提示</span>
+                            <NButton text type="primary" class="ml-auto shrink-0 text-xs" @click="conflictHide = true">知道了</NButton>
+                        </div>
+                        <p class="mt-1 text-xs leading-relaxed">
+                            涉及设备 R-101 关联变更 <b>MOC-2026-0038「机封冲洗方案调整」</b>正在审批中，请确认施工时序与隔离方案无冲突。
+                        </p>
+                    </div>
+                    <!-- 属地影响摘要（仅属地负责人视角） -->
+                    <div v-if="role === 'dept'" class="border" :style="{borderRadius:themeStore.themeRadius+'px'}">
+                        <div class="flex items-center gap-2 border-b bg-slate-50/70 px-3 py-2">
+                            <Icon icon="lucide:sparkles" class="size-16px text-violet-500" />
+                            <span class="text-sm font-semibold text-slate-700">属地影响摘要</span>
+                            <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                                ✨ AI 生成 · 需人工确认
+                            </span>
+                        </div>
+                        <div class="space-y-1.5 px-3 py-2.5 text-xs leading-relaxed text-slate-600">
+                            <p><b class="text-slate-700">涉及单元：</b>一车间 R-201 反应釜及配套 DCS 回路，不影响相邻单元。</p>
+                            <p><b class="text-slate-700">现行规程影响：</b>操作规程第 4.2 节（报警处置）需同步修订，变更关闭前完成受控换版。</p>
+                            <p><b class="text-slate-700">交接班提示：</b>投用后首个班次需向班组交代新报警值与处置卡位置，建议纳入班前会内容。</p>
+                        </div>
+                    </div>
+                    <!-- 变更前后关键参数对比（变化标蓝 / 超限标红） -->
+                    <div 
+                        class="border" 
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--error-color':themeStore.otherColor.error,
+                            '--theme-color':themeStore.themeColor
+                        }"
+                    >
+                        <div class="border-b bg-slate-50/70 px-3 py-2 text-xs font-semibold text-slate-600">
+                            关键参数对比（AI 提取） · <span class="font-bold text-[var(--theme-color)]">蓝=变化</span> · <span class="font-bold text-[var(--error-color)]">红=超限</span>
+                        </div>
+                        <div v-for="d in PARAM_DIFF" :key="d.k" class="border-b px-3 py-2 last:border-b-0">
+                            <div class="flex flex-wrap items-baseline gap-x-2 text-sm">
+                                <span class="w-24 shrink-0 text-xs text-slate-500">{{ d.k }}</span>
+                                <span class="text-xs text-slate-400">{{ d.before }}</span>
+                                <span class="text-slate-300">→</span>
+                                <span 
+                                class="text-sm font-semibold" 
+                                :class="d.over ? 'text-[var(--error-color)]' : 'text-[var(--theme-color)]'"
+                                >{{ d.after }}</span>
+                                <NTag v-if="d.over" size="small" type="error">超限</NTag>
+                            </div>
+                            <div 
+                                class="mt-0.5 text-[11px] leading-snug" 
+                                :class="d.over ? 'text-[var(--error-color)]' : 'text-slate-400'" 
+                            >{{ d.note }}</div>
+                        </div>
+                    </div>
+                    <!-- AI 审批建议（版本冻结 · 建议分级 · 已阅留痕 · 无感审计） -->
+                    <div 
+                        class="border"
+                        :style="{
+                            borderRadius:themeStore.themeRadius+'px',
+                            '--error-color':themeStore.otherColor.error,
+                            '--theme-color':themeStore.themeColor,
+                            '--warning-color':themeStore.otherColor.warning,
+                        }"
+                    >
+                        <div class="flex flex-wrap items-center gap-2 border-b bg-slate-50/70 px-3 py-2">
+                            <Icon icon="lucide:sparkles" class="size-14px text-violet-500" />
+                            <span class="text-sm font-semibold text-slate-700">AI 审批建议</span>
+                            <span class="inline-flex items-center gap-1 rounded-full border border-violet-200 bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700">
+                                ✨ AI 生成 · 需人工确认
+                            </span>
+                            <NTag size="small">基于提交版本 V1 一次性分析 · 版本冻结</NTag>
+                            <div class="ml-auto">
+                                <NTag v-if="aiRead" size="small" type="success">✓ {{ roleName }} 已阅 AI 建议（已留痕）</NTag>
+                                <NButton v-else size="small" class="text-xs" @click="readSuggest">已阅 AI 建议</NButton>
+                            </div>
+                        </div>
+                        <div class="space-y-3 p-3">
+                            <!-- 强制合规项 -->
+                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--error-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--error-color)]" /> 强制合规项（驳回前必须处理，否则无法通过）</div>
+                            <div class="flex flex-wrap items-center gap-2 rounded-lg border border-red-100 bg-red-50/50 px-3 py-2 text-sm">
+                                <span class="min-w-0 flex-1 text-slate-700">联锁测试记录须在投用前完成并上传归档</span>
+                                <NTag v-if="mandClosed" size="small" type="success">已闭环</NTag>
+                                <NTag v-else size="small" type="warning">未闭环</NTag>
+                            </div>
+                            <!-- 推荐改进项 -->
+                            <div>
+                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--warning-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--warning-color)]" /> 推荐改进项（可采纳为行动项，可忽略但须填理由）</div>
+                            <div class="space-y-1.5">
+                                <div v-for="s in suggs" :key="s.id" class="rounded-lg border px-3 py-2 text-sm">
+                                <div class="leading-relaxed text-slate-700">{{ s.text }}</div>
+                                <div class="mt-1.5">
+                                    <div v-if="s.st === '待定'" class="flex gap-3">
+                                        <NButton text type="success" class="text-xs hover:underline"
+                                            @click="acceptSuggest(s)">
+                                            采纳为行动项
+                                        </NButton>
+                                        <NButton text class="text-xs hover:underline"
+                                            @click="rejectSuggest(s)">
+                                            已知悉，不采纳
+                                        </NButton>
+                                    </div>
+                                    <NTag v-else-if="s.st === '已采纳'" size="small" type="success">已采纳 → 已生成 PSSR 行动项</NTag>
+                                    <NTag v-else size="small" type="default">已知悉不采纳（理由已留痕）</NTag>
+                                </div>
+                                </div>
+                            </div>
+                            </div>
+                            <!-- 参考信息 -->
+                            <div>
+                            <div class="mb-1 flex items-center gap-1.5 text-xs font-semibold text-[var(--theme-color)]"><span class="inline-block h-2 w-2 rounded-full bg-[var(--theme-color)]" /> 参考信息（纯参考，无强制力）</div>
+                                <div class="space-y-1.5">
+                                    <div class="flex flex-wrap items-center gap-2 rounded-lg border border-[#DFE9F6] bg-[#EAF0F9]/60 px-3 py-2 text-sm">
+                                        <span class="min-w-0 flex-1 text-slate-700">相似变更 <b>MOC-2025-0112「酯化反应温度上调」</b>投用后运行正常，无异常记录</span>
+                                        <NButton text type="primary" class="hover:underline text-xs" @click="viewArchive('MOC-2025-0112')">查看归档包</NButton>
+                                    </div>
+                                    <div class="rounded-lg border border-[#DFE9F6] bg-[#EAF0F9]/60 px-3 py-2 text-sm text-slate-700">
+                                    历史经验：温度类变更投用后首周超温报警占比约 38%，建议关注投用首周报警趋势
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="rounded-lg bg-slate-50 px-3 py-2 text-[11px] leading-5 text-slate-400">
+                                查看、采纳、已阅等操作均由后台自动记录（无感审计），供内审追溯；AI 建议不强制采纳，决策主导权在审批人。驳回重新提交后，AI 将对新版本重新分析一次。
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </NDrawerContent>
+        </NDrawer>
     </NSpin>
 </NSpace>
 </template>
 
 <style scoped lang="scss">
 .scroll {
-  height: calc(100vh - 303px);
+  height: calc(100vh - 210px);
   overflow-y: auto;
 }
 </style>