详情页-风险评估方法显示修改

This commit is contained in:
2026-10-13 10:00:18 +08:00
parent f355f6fe11
commit 842f7f0941
4 changed files with 2089 additions and 2019 deletions
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
+416 -399
View File
@@ -322,413 +322,430 @@ onMounted(() => {
</script> </script>
<template> <template>
<NSpace vertical :size="16"> <NSpace vertical :size="16">
<!-- 高风险 --> <!-- 高风险 -->
<NSpin :show="loading" size="small"> <NSpin :show="loading" size="small">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }"> <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div <div
class="flex flex-wrap items-center gap-3 border border-slate-200 px-3 py-2 mb-3" class="flex flex-wrap items-center gap-3 border border-slate-200 px-3 py-2 mb-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }" :style="{ borderRadius: themeStore.themeRadius + 'px' }"
>
<NButton ghost type="primary" @click="back">
<Icon icon="ep:back" class="size-16px mr-1" />返回
</NButton>
<div class="min-w-0 flex-1 truncate text-base font-bold text-slate-800">{{ currentInfo?.title }}</div>
<NTag size="small" type="info" class="font-mono text-xs">编号:{{ currentInfo?.change_no }}</NTag>
</div>
<div class="space-y-3 scroll">
<!-- 变更申请表 -->
<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('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">{{ currentInfo?.applicant_name }}</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">{{ currentInfo?.apply_form?.org_name }}</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">{{ currentInfo?.apply_form?.created_at?.slice(0,10) }}</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">{{ currentInfo?.apply_form?.plan_use_date?.slice(0,10) }}</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">{{ currentInfo?.apply_form?.duration_type === 1 ? '永久变更' : '临时变更' }}</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">{{ currentInfo?.apply_form?.urgent === 1 ? '是' : '否' }}</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="flex items-center flex-wrap gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
<NRadioGroup v-model:value="level">
<NRadio v-for="item in levelList" :key="item.value" :value="item.value" :disabled="true">{{item.label}}</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>
<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">
{{matchLabel(typeList,currentInfo?.apply_form?.change_type)?.label}}
<NButton v-if="isAiOn" ghost type="primary" size="small" round class="text-xs" @click="openTypeSheet">
<Icon icon="lucide:sparkles" 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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{currentInfo?.apply_form?.purposes?.join('、')}}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{currentInfo?.apply_form?.effect}}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
<p v-for="(main,mIndex) in currentInfo?.apply_form?.main_changes" :key="mIndex">{{Number(mIndex)+1}}.{{main}}</p>
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
<p v-for="(related,rIndex) in currentInfo?.apply_form?.related_changes" :key="rIndex">{{Number(rIndex)+1}}.{{related}}</p>
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{currentInfo?.apply_form?.risk_tools?.join('、')}}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{currentInfo?.apply_form?.materials}}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{currentInfo?.apply_form?.update_docs?.join('、')}}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{currentInfo?.apply_form?.disciplines?.join('、')}}
</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(null)"><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 v-for="(doc,dIndex) in currentInfo?.apply_form?.attachments" :key="dIndex">
<td class="text-center">1</td>
<td>{{doc.file_name}}</td>
<td class="text-center text-xs">{{doc?.file_type}}</td>
<td class="text-center text-xs">{{doc?.file_size}}</td>
<td class="text-center text-xs">{{doc?.created_at?.slice(0,16)}}</td>
<td class="text-center text-xs">
<span v-if="doc?.step_no===1">变更申请表</span>
</td>
<td>
<div class="flex items-center justify-center gap-2">
<NButton text type="primary" class="text-xs" @click="openPreview(doc)">预览</NButton>
<NButton text type="primary" class="text-xs" @click="downloadFile(doc)">下载</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>场景描述</th>
<th class="w-80px !text-center">固有风险</th>
<th>现有措施</th>
<th>建议措施</th>
<th class="w-80px !text-center">剩余风险</th>
<th class="w-100px !text-center">来源</th>
</tr>
</thead>
<tbody>
<tr v-for="(risk,index) in currentInfo?.risk_records?.records" :key="index">
<td class="text-center">{{Number(index)+1}}</td>
<td>{{risk.item}}</td>
<td>{{risk.scene}}</td>
<td class="text-center">{{risk.inherent_level}}</td>
<td>{{risk.safeguards}}</td>
<td>{{risk.suggestions}}</td>
<td class="text-center">{{risk.residual_level}}</td>
<td class="text-center">
<NTag size="small" type="info" class="text-11px">{{ risk.source==='RISK'?'风险预分析':risk.source==='RISK_CHECK'?'风险检查': risk.source }}</NTag>
</td>
</tr>
</tbody>
</NTable>
<!-- 变更培训内容 -->
<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>
</div>
<div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<p>{{currentInfo?.train?.content}}</p>
</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>
</div>
<div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<div v-for="(pssr,index) in pssrlist" class="border" :key="index" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">{{pssr.g}}</div>
<div v-for="item in pssr.items" :key="item.id" class="flex items-center border-t px-3 py-1.6">
<p class="flex-1">{{item.content}}</p>
<NTag v-if="item.phase===1" size="small" type="info">投用前完成</NTag>
<NTag v-else size="small" type="info">关闭前完成</NTag>
</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>
</div>
<div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<NTable size="small">
<thead>
<tr>
<th class="w-56">验收项目</th>
<th>量化验收标准</th>
<th>验收方式</th>
<th class="w-46 !text-center">组织层级</th>
</tr>
</thead>
<tbody>
<tr v-for="(accept,index) in acceptList" :key="index">
<td class="text-xs">{{accept.item}}</td>
<td class="text-xs">{{accept.standard}}</td>
<td class="text-xs">{{accept.method}}</td>
<td class="text-xs text-center">{{accept.org_name}}</td>
</tr>
</tbody>
</NTable>
</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>
</div>
<NTable size="small">
<thead>
<tr>
<th class="w-120px">流程阶段</th>
<th class="w-120px">操作人</th>
<th class="w-140px !text-center">操作时间</th>
<th>操作内容和意见</th>
</tr>
</thead>
<tbody>
<tr v-for="(record,index) in currentInfo?.approval_records" :key="index">
<td class="text-xs">{{record.action}}</td>
<td class="text-xs">{{record.user_name}}</td>
<td class="text-center text-xs">{{record.updated_at?.slice(0,16)}}</td>
<td class="text-xs">{{record.remark}}</td>
</tr>
</tbody>
</NTable>
<!-- 审批流程进度 -->
<div class="space-y-2">
<div class="text-sm font-semibold">审批流程{{ matchLabel(levelList,level)?.label? '('+matchLabel(levelList,level)?.label+'变更)':'' }}</div>
<div class="flex flex-wrap items-center gap-1">
<template v-for="(n, i) in currentInfo?.approval_flow?.steps" :key="n.name">
<div class="flex items-center gap-1">
<Icon v-if="i !== 0" icon="formkit:right" class="size-14px text-slate-300" />
<div class="rounded-lg border px-3 py-2 text-center"
:class="n.status === 'PASSED' ? 'border-emerald-300 bg-emerald-50' : n.status === 'PENDING' ? 'border-amber-400 bg-amber-50' : n.status === 'REJECTED' ? 'border-red-300 bg-red-50' :'border-amber-400 bg-amber-50'">
<p class="text-xs font-medium">
{{ n.name }}
</p>
<div class="flex items-center justify-center gap-1">
<span v-for="member in n.members" :key="member.id" class="text-xs text-slate-500">{{ member.user_name }}</span>
</div>
</div>
</div>
</template>
</div>
<div v-if="allMembers?.length" 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">
{{ allMembers.filter((m) => m.status === 'PASSED').length }}/{{ allMembers.length }} 已签
</span>
</div>
<div class="flex flex-wrap items-center gap-2">
<span v-for="m in allMembers" :key="m.id" class="flex items-center gap-1">
<NTag size="small" :type="m.status === 'PASSED' ? 'success' : m.status === 'REJECTED' ? 'error' : 'default'">
<template #icon>
<Icon v-if="m.status === 'PASSED'" icon="ix:success" class="size-14px" />
<Icon v-if="m.status === 'PENDING'" icon="ant-design:clock-circle-outlined" class="size-12px text-slate-400" />
<Icon v-if="m.status === 'REJECTED'" icon="ix:close" class="size-12px" />
</template>
{{ m.user_name }}
</NTag>
<div v-if="m.status === 'PENDING'"
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" :auto-focus="false">
<NDrawerContent title="变更类型判定说明" closable>
<NTag v-if="typeAiLoading" type="info" size="small">
<template #icon>
<Icon icon="ri:loader-4-fill" class="size-12px animate-spin" />
</template>
AI 判定中…
</NTag>
<div v-else class="flex items-center gap-2 max-h-[22px] mb-3">
<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 v-if="typeAi?.type" type="info" size="small">判定:{{ typeAi?.type }}</NTag>
<NTag v-if="typeAi" size="small">置信度:{{ `${Math.round(typeAi.confidence * 100)}%` }}</NTag>
</div>
<div v-if="typeAi" class="space-y-3 text-sm leading-relaxed text-slate-700">
<p><b>判定结论:</b>{{ typeAi.conclusion }}</p>
<p><b>判定依据:</b></p>
<ul class="list-disc space-y-1 pl-5">
<li v-for="r in typeAi.hit_rules" :key="r">命中规则:{{ r }}</li>
<li v-for="r in typeAi.exclude_rules" :key="r">排除规则:{{ r }}</li>
</ul>
<p v-if="typeAi.knowledge_refs.length"><b>知识库引用:</b>{{ typeAi.knowledge_refs.join('、') }}。</p>
<p class="rounded-lg bg-amber-50 p-3 text-xs text-amber-700">AI 判定结果仅供参考,最终类型以人工确认为准;如调整为其他类型,系统将记录修改留痕。</p>
</div>
</NDrawerContent>
</NDrawer>
<!-- 变更等级判定表(右侧抽屉查看) -->
<NDrawer v-model:show="levelDrawer" :width="576" placement="right" :auto-focus="false">
<NDrawerContent title="变更等级判定表" closable>
<div class="space-y-4">
<div class="flex items-center gap-2">
<NTag
size="small"
:color="{
color: tagBgColor(matchLabel(levelList,level)?.color),
textColor: tagTextColor(matchLabel(levelList,level)?.color),
borderColor: tagBorderColor(matchLabel(levelList,level)?.color),
}"
>{{ matchLabel(levelList,level)?.label? matchLabel(levelList,level)?.label+'变更':'' }}</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-40">评估维度</th>
<th class="w-20 !text-center">得分</th>
<th>评分依据</th>
</tr>
</thead>
<tbody>
<tr v-for="s in questions" :key="s.dim" class="border-b last:border-b-0">
<td class="font-medium">{{ s.name }}</td>
<td class="font-bold text-[#17407F] text-center">{{ s.score }}</td>
<td class="text-xs leading-relaxed text-slate-600">{{ matchBasis(s.options,s.score) }}</td>
</tr>
</tbody>
</NTable>
</div>
</NDrawerContent>
</NDrawer>
<!-- 附件在线预览弹窗 -->
<NModal
v-model:show="previewModal"
preset="card"
:auto-focus="false"
:style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }"
> >
<template #header> <NButton ghost type="primary" @click="back">
<div class="flex items-center gap-2 text-base font-semibold text-slate-800"> <Icon icon="ep:back" class="size-16px mr-1" />返回
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }} </NButton>
<div class="min-w-0 flex-1 truncate text-base font-bold text-slate-800">{{ currentInfo?.title }}</div>
<NTag size="small" type="info" class="font-mono text-xs">编号:{{ currentInfo?.change_no }}</NTag>
</div>
<div class="space-y-3 scroll">
<!-- 变更申请表 -->
<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('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">{{ currentInfo?.applicant_name }}</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">{{ currentInfo?.apply_form?.org_name }}</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">{{ currentInfo?.apply_form?.created_at?.slice(0,10) }}</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">{{ currentInfo?.apply_form?.plan_use_date?.slice(0,10) }}</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">{{ currentInfo?.apply_form?.duration_type === 1 ? '永久变更' : '临时变更' }}</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">{{ currentInfo?.apply_form?.urgent === 1 ? '是' : '否' }}</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="flex items-center flex-wrap gap-2 px-3 py-1.6 text-sm leading-relaxed text-slate-800">
<NRadioGroup v-model:value="level">
<NRadio v-for="item in levelList" :key="item.value" :value="item.value" :disabled="true">{{ item.label }}</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>
<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">
{{ matchLabel(typeList,currentInfo?.apply_form?.change_type)?.label }}
<NButton v-if="isAiOn" ghost type="primary" size="small" round class="text-xs" @click="openTypeSheet">
<Icon icon="lucide:sparkles" 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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{ currentInfo?.apply_form?.purposes?.join('、') }}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{ currentInfo?.apply_form?.effect }}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
<p v-for="(main,mIndex) in currentInfo?.apply_form?.main_changes" :key="mIndex">{{ Number(mIndex)+1 }}.{{ main }}</p>
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
<p v-for="(related,rIndex) in currentInfo?.apply_form?.related_changes" :key="rIndex">{{ Number(rIndex)+1 }}.{{ related }}</p>
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
<template v-for="(item,index) in currentInfo?.apply_form?.risk_tools" :key="index">
<span v-if="index!==0">、</span>
<span v-if="item==='RISK'">风险预分析</span>
<span v-else-if="item==='RISK_CHECK'">风险检查表</span>
<span v-else>{{ item }}</span>
</template>
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{ currentInfo?.apply_form?.materials }}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{ currentInfo?.apply_form?.update_docs?.join('、') }}
</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="px-3 py-1.6 text-sm leading-relaxed text-slate-800">
{{ currentInfo?.apply_form?.disciplines?.join('、') }}
</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(null)"><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 v-for="(doc,dIndex) in currentInfo?.apply_form?.attachments" :key="dIndex">
<td class="text-center">1</td>
<td>{{ doc.file_name }}</td>
<td class="text-center text-xs">{{ doc?.file_type }}</td>
<td class="text-center text-xs">{{ doc?.file_size }}</td>
<td class="text-center text-xs">{{ doc?.created_at?.slice(0,16) }}</td>
<td class="text-center text-xs">
<span v-if="doc?.step_no===1">变更申请表</span>
</td>
<td>
<div class="flex items-center justify-center gap-2">
<NButton text type="primary" class="text-xs" @click="openPreview(doc)">预览</NButton>
<NButton text type="primary" class="text-xs" @click="downloadFile(doc)">下载</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>场景描述</th>
<th class="w-80px !text-center">固有风险</th>
<th>现有措施</th>
<th>建议措施</th>
<th class="w-80px !text-center">剩余风险</th>
<th class="w-100px !text-center">来源</th>
</tr>
</thead>
<tbody>
<tr v-for="(risk,index) in currentInfo?.risk_records?.records" :key="index">
<td class="text-center">{{ Number(index)+1 }}</td>
<td>{{ risk.item }}</td>
<td>{{ risk.scene }}</td>
<td class="text-center">{{ risk.inherent_level }}</td>
<td>{{ risk.safeguards }}</td>
<td>{{ risk.suggestions }}</td>
<td class="text-center">{{ risk.residual_level }}</td>
<td class="text-center">
<NTag size="small" type="info" class="text-11px">{{ risk.source==='RISK'?'风险预分析':risk.source==='RISK_CHECK'?'风险检查': risk.source }}</NTag>
</td>
</tr>
</tbody>
</NTable>
<!-- 变更培训内容 -->
<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>
</div>
<div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<p>{{ currentInfo?.train?.content }}</p>
</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>
</div>
<div class="space-y-2.5 border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<div v-for="(pssr,index) in pssrlist" :key="index" class="border" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<div class="bg-slate-100 px-3 py-1.6 font-medium text-slate-600">{{ pssr.g }}</div>
<div v-for="item in pssr.items" :key="item.id" class="flex items-center border-t px-3 py-1.6">
<p class="flex-1">{{ item.content }}</p>
<NTag v-if="item.phase===1" size="small" type="info">投用前完成</NTag>
<NTag v-else size="small" type="info">关闭前完成</NTag>
</div> </div>
</template> </div>
<template #default> </div>
<div class="space-y-3"> </div>
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400"> <!-- 验收评价 -->
<span>上传人:{{ previewFile?.uploader_name }}</span> <div>
<span>上传时间:{{ previewFile?.created_at }}</span> <div class="flex items-center gap-2 mb-1.5">
<span v-if="previewFile?.version">{{ `版本:${previewFile?.version}(受控)` }}</span> <Icon icon="ix:success" class="size-16px text-emerald-500" />
<span class="text-sm font-semibold text-slate-700">验收评价</span>
</div>
<div class="border p-3" :style="{borderRadius: themeStore.themeRadius + 'px'}">
<NTable size="small">
<thead>
<tr>
<th class="w-56">验收项目</th>
<th>量化验收标准</th>
<th>验收方式</th>
<th class="w-46 !text-center">组织层级</th>
</tr>
</thead>
<tbody>
<tr v-for="(accept,index) in acceptList" :key="index">
<td class="text-xs">{{ accept.item }}</td>
<td class="text-xs">{{ accept.standard }}</td>
<td class="text-xs">{{ accept.method }}</td>
<td class="text-xs text-center">{{ accept.org_name }}</td>
</tr>
</tbody>
</NTable>
</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>
</div>
<NTable size="small">
<thead>
<tr>
<th class="w-120px">流程阶段</th>
<th class="w-120px">操作人</th>
<th class="w-140px !text-center">操作时间</th>
<th>操作内容和意见</th>
</tr>
</thead>
<tbody>
<tr v-for="(record,index) in currentInfo?.approval_records" :key="index">
<td class="text-xs">{{ record.action }}</td>
<td class="text-xs">{{ record.user_name }}</td>
<td class="text-center text-xs">{{ record.updated_at?.slice(0,16) }}</td>
<td class="text-xs">{{ record.remark }}</td>
</tr>
</tbody>
</NTable>
<!-- 审批流程进度 -->
<div class="space-y-2">
<div class="text-sm font-semibold">审批流程{{ matchLabel(levelList,level)?.label? '('+matchLabel(levelList,level)?.label+'变更)':'' }}</div>
<div class="flex flex-wrap items-center gap-1">
<template v-for="(n, i) in currentInfo?.approval_flow?.steps" :key="n.name">
<div class="flex items-center gap-1">
<Icon v-if="i !== 0" icon="formkit:right" class="size-14px text-slate-300" />
<div
class="rounded-lg border px-3 py-2 text-center"
:class="n.status === 'PASSED' ? 'border-emerald-300 bg-emerald-50' : n.status === 'PENDING' ? 'border-amber-400 bg-amber-50' : n.status === 'REJECTED' ? 'border-red-300 bg-red-50' :'border-amber-400 bg-amber-50'"
>
<p class="text-xs font-medium">
{{ n.name }}
</p>
<div class="flex items-center justify-center gap-1">
<span v-for="member in n.members" :key="member.id" class="text-xs text-slate-500">{{ member.user_name }}</span>
</div> </div>
<previewComponent v-if="previewFile" :previewFile="previewFile" /> </div>
</div> </div>
</template>
</div>
<div v-if="allMembers?.length" 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">
{{ allMembers.filter((m) => m.status === 'PASSED').length }}/{{ allMembers.length }} 已签
</span>
</div>
<div class="flex flex-wrap items-center gap-2">
<span v-for="m in allMembers" :key="m.id" class="flex items-center gap-1">
<NTag size="small" :type="m.status === 'PASSED' ? 'success' : m.status === 'REJECTED' ? 'error' : 'default'">
<template #icon>
<Icon v-if="m.status === 'PASSED'" icon="ix:success" class="size-14px" />
<Icon v-if="m.status === 'PENDING'" icon="ant-design:clock-circle-outlined" class="size-12px text-slate-400" />
<Icon v-if="m.status === 'REJECTED'" icon="ix:close" class="size-12px" />
</template>
{{ m.user_name }}
</NTag>
<div
v-if="m.status === 'PENDING'"
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" :auto-focus="false">
<NDrawerContent title="变更类型判定说明" closable>
<NTag v-if="typeAiLoading" type="info" size="small">
<template #icon>
<Icon icon="ri:loader-4-fill" class="size-12px animate-spin" />
</template> </template>
</NModal> AI 判定中…
</NTag>
<div v-else class="flex items-center gap-2 max-h-[22px] mb-3">
<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 v-if="typeAi?.type" type="info" size="small">判定:{{ typeAi?.type }}</NTag>
<NTag v-if="typeAi" size="small">置信度:{{ `${Math.round(typeAi.confidence * 100)}%` }}</NTag>
</div>
<div v-if="typeAi" class="space-y-3 text-sm leading-relaxed text-slate-700">
<p><b>判定结论:</b>{{ typeAi.conclusion }}</p>
<p><b>判定依据:</b></p>
<ul class="list-disc space-y-1 pl-5">
<li v-for="r in typeAi.hit_rules" :key="r">命中规则:{{ r }}</li>
<li v-for="r in typeAi.exclude_rules" :key="r">排除规则:{{ r }}</li>
</ul>
<p v-if="typeAi.knowledge_refs.length"><b>知识库引用:</b>{{ typeAi.knowledge_refs.join('、') }}。</p>
<p class="rounded-lg bg-amber-50 p-3 text-xs text-amber-700">AI 判定结果仅供参考,最终类型以人工确认为准;如调整为其他类型,系统将记录修改留痕。</p>
</div>
</NDrawerContent>
</NDrawer>
<!-- 变更等级判定表(右侧抽屉查看) -->
<NDrawer v-model:show="levelDrawer" :width="576" placement="right" :auto-focus="false">
<NDrawerContent title="变更等级判定表" closable>
<div class="space-y-4">
<div class="flex items-center gap-2">
<NTag
size="small"
:color="{
color: tagBgColor(matchLabel(levelList,level)?.color),
textColor: tagTextColor(matchLabel(levelList,level)?.color),
borderColor: tagBorderColor(matchLabel(levelList,level)?.color),
}"
>
{{ matchLabel(levelList,level)?.label? matchLabel(levelList,level)?.label+'变更':'' }}
</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-40">评估维度</th>
<th class="w-20 !text-center">得分</th>
<th>评分依据</th>
</tr>
</thead>
<tbody>
<tr v-for="s in questions" :key="s.dim" class="border-b last:border-b-0">
<td class="font-medium">{{ s.name }}</td>
<td class="font-bold text-[#17407F] text-center">{{ s.score }}</td>
<td class="text-xs leading-relaxed text-slate-600">{{ matchBasis(s.options,s.score) }}</td>
</tr>
</tbody>
</NTable>
</div>
</NDrawerContent>
</NDrawer>
<!-- 附件在线预览弹窗 -->
<NModal
v-model:show="previewModal"
preset="card"
:auto-focus="false"
:style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }"
>
<template #header>
<div class="flex items-center gap-2 text-base font-semibold text-slate-800">
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
</div>
</template>
<template #default>
<div class="space-y-3">
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
<span>上传人:{{ previewFile?.uploader_name }}</span>
<span>上传时间:{{ previewFile?.created_at }}</span>
<span v-if="previewFile?.version">{{ `版本:${previewFile?.version}(受控)` }}</span>
</div>
<PreviewComponent v-if="previewFile" :preview-file="previewFile" />
</div>
</template>
</NModal>
</NSpin> </NSpin>
</NSpace> </NSpace>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
+423 -413
View File
@@ -170,466 +170,476 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<NSpin :show="loading" size="small"> <NSpin :show="loading" size="small">
<div class="space-y-3.5"> <div class="space-y-3.5">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }"> <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive> <NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGi span="24 s:24 m:8"> <NGi span="24 s:24 m:8">
<div class="flex-y-center"> <div class="flex-y-center">
<p <p
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold" class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
>
MOC
</p>
<p class="pl-12px text-14px font-semibold">我的工作台</p>
</div>
</NGi>
<NGi span="24 s:24 m:16" class="flex items-center justify-end gap-12px">
<p class="text-#999 text-xs">{{ clock }}</p>
<NButton ghost size="small" @click="jumpTo('workshopstatistics')">
车间变更看板
</NButton>
<NButton type="primary" size="small" @click="jumpTo('my_mytask')">
<Icon icon="lucide:clipboard-check" class="size-14px" />
审批待办
</NButton>
</NGi>
</NGrid>
</NCard>
<!-- 卡片数据 -->
<NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }" :style="{ borderRadius: themeStore.themeRadius + 'px' }"
>
MOC
</p>
<p class="pl-12px text-14px font-semibold">我的工作台</p>
</div>
</NGi>
<NGi span="24 s:24 m:16" class="flex items-center justify-end gap-12px">
<p class="text-#999 text-xs">{{clock}}</p>
<NButton ghost size="small" @click="jumpTo('workshopstatistics')">
车间变更看板
</NButton>
<NButton type="primary" size="small" @click="jumpTo('my_mytask')">
<Icon icon="lucide:clipboard-check" class="size-14px" />
审批待办
</NButton>
</NGi>
</NGrid>
</NCard>
<!-- 卡片数据 -->
<NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')" @click="jumpTo('my_mytask')"
> >
<p class="text-12px font-600">待我审批</p> <p class="text-12px font-600">待我审批</p>
<div class="flex justify-between"> <div class="flex justify-between">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="homeData?.todo_approvals?.total || 0" :end-value="homeData?.todo_approvals?.total || 0"
class="text-26px font-600 text-[#333]" class="text-26px font-600 text-[#333]"
/> />
</div> </div>
<p v-if="homeData?.todo_approvals?.overdue_count" class="text-12px text-[#e15555]">含超期未审 · 请优先处理</p> <p v-if="homeData?.todo_approvals?.overdue_count" class="text-12px text-[#e15555]">含超期未审 · 请优先处理</p>
<p v-else class="text-12px">属地变更审批</p> <p v-else class="text-12px">属地变更审批</p>
</div> </div>
</NGi> </NGi>
<NGi> <NGi>
<div <div
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer" class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }" :style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('changeledger')" @click="jumpTo('changeledger')"
> >
<p class="text-12px font-600">重要变更未关闭</p> <p class="text-12px font-600">重要变更未关闭</p>
<div class="flex justify-between"> <div class="flex justify-between">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="homeData?.important_open?.total || 0" :end-value="homeData?.important_open?.total || 0"
class="text-26px font-600" class="text-26px font-600"
/> />
</div> </div>
<p class="text-12px">本车间 · 需重点跟踪</p> <p class="text-12px">本车间 · 需重点跟踪</p>
</div> </div>
</NGi> </NGi>
<NGi> <NGi>
<div <div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8] cursor-pointer" class="flex-1 bg-white px-16px py-12px text-[#94a3b8] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }" :style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')" @click="jumpTo('my_mytask')"
> >
<p class="text-12px font-600">未通过审批</p> <p class="text-12px font-600">未通过审批</p>
<div class="flex justify-between"> <div class="flex justify-between">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="homeData?.rejected_open?.total || 0" :end-value="homeData?.rejected_open?.total || 0"
class="text-26px font-600 text-[#333]" class="text-26px font-600 text-[#333]"
/> />
</div> </div>
<p class="text-12px">本车间 · 驳回待修改重报</p> <p class="text-12px">本车间 · 驳回待修改重报</p>
</div> </div>
</NGi> </NGi>
<NGi> <NGi>
<div <div
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer" class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }" :style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('changeledger')" @click="jumpTo('changeledger')"
> >
<p class="text-12px font-600">超期未关闭</p> <p class="text-12px font-600">超期未关闭</p>
<div class="flex justify-between"> <div class="flex justify-between">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="homeData?.overdue_open?.total || 0" :end-value="homeData?.overdue_open?.total || 0"
class="text-26px font-600" class="text-26px font-600"
/> />
</div> </div>
<p class="text-12px">本车间 · 红色预警</p> <p class="text-12px">本车间 · 红色预警</p>
</div> </div>
</NGi> </NGi>
</NGrid> </NGrid>
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive> <NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<!-- 左侧 --> <!-- 左侧 -->
<NGi span="24 s:24 m:24 l:16"> <NGi span="24 s:24 m:24 l:16">
<!-- 审批待办 --> <!-- 审批待办 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }"> <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3"> <div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Icon icon="lucide:clipboard-check" class="size-16px" :style="{ color: themeStore.themeColor }" /> <Icon icon="lucide:clipboard-check" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">审批待办</p> <p class="text-13px font-700 text-#64749a">审批待办</p>
<p class="text-11px text-#94a3b8 mt-2px">属地变更审批</p> <p class="text-11px text-#94a3b8 mt-2px">属地变更审批</p>
</div> </div>
<NButton v-if="homeData?.todo_approvals?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_mytask')"> <NButton v-if="homeData?.todo_approvals?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_mytask')">
我的任务 我的任务
<Icon icon="formkit:right" class="size-12px" /> <Icon icon="formkit:right" class="size-12px" />
</NButton> </NButton>
</div> </div>
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<template v-if="homeData?.todo_approvals?.total > 0"> <template v-if="homeData?.todo_approvals?.total > 0">
<div v-for="row in homeData?.todo_approvals?.items || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)" <div
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition" v-for="row in homeData?.todo_approvals?.items || []" :key="row.change_id" class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition"
:style="{ :style="{
borderRadius: themeStore.themeRadius + 'px', borderRadius: themeStore.themeRadius + 'px',
borderColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.25):getColorWithOpacity(themeStore.themeColor, 0.25), borderColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.25):getColorWithOpacity(themeStore.themeColor, 0.25),
backgroundColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.05):getColorWithOpacity(themeStore.themeColor, 0.05), backgroundColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.05):getColorWithOpacity(themeStore.themeColor, 0.05),
}"
@click="jumpTo('details_approval',row.change_id)"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="font-mono text-[11px] text-slate-400">{{ row.change_no }}</span>
<NTag v-if="row.urgent===1" class="text-[11px]" type="error" size="small">紧急</NTag>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}" }"
> >
<div class="min-w-0 flex-1"> {{ matchObj(levelList,row.change_level)?.label }}
<div class="flex flex-wrap items-center gap-2"> </NTag>
<span class="font-mono text-[11px] text-slate-400">{{ row.change_no }}</span> <!-- 变更类型 -->
<NTag class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag> <NTag
<!-- 变更等级 --> size="small"
<NTag :color="{
size="small" color: tagBgColor(matchObj(typeList,row.change_type)?.color),
:color="{ textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
color: tagBgColor(matchObj(levelList,row.change_level)?.color), borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color), }"
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color), >
}" {{ matchObj(typeList,row.change_type)?.label }}
>{{matchObj(levelList,row.change_level)?.label}}</NTag> </NTag>
<!-- 变更类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
}"
>{{matchObj(typeList,row.change_type)?.label}}</NTag>
<NTag class="text-[11px]" v-if="row.duration_type===2" type="warning" size="small">临时</NTag> <NTag v-if="row.duration_type===2" class="text-[11px]" type="warning" size="small">临时</NTag>
<NTag class="text-[11px]" v-else type="info" size="small">永久</NTag> <NTag v-else class="text-[11px]" type="info" size="small">永久</NTag>
<span v-if="row.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days}} 天</span> <span v-if="row.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{ row.overdue_days }} 天</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<NTag size="small" type="warning">审批:{{row.step_name}}</NTag>
<NButton size="small" type="primary" class="text-xs">
去审批
<Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
</NButton>
</div>
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人:{{row.applicant_name}}</p>
<span v-if="row.apply_time" class="text-[11px] text-slate-400">{{ row.apply_time?.slice(0, 10) }}</span>
</div>
</div>
</div> </div>
</template> <div class="mt-1 flex items-center gap-2">
<template v-else> <span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<div class="h-100% flex items-center justify-center py-3"> <NTag size="small" type="warning">审批:{{ row.step_name }}</NTag>
<NEmpty description="暂无数据" class="!text-xs"></NEmpty> <NButton size="small" type="primary" class="text-xs">
</div> 去审批
</template> <Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
</div> </NButton>
</NCard>
<!-- 未关闭变更进度一览 -->
<NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lets-icons:clock" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">未关闭变更进度一览</p>
<p class="text-11px text-#94a3b8 mt-2px">本车间 · 全部未关闭变更</p>
</div> </div>
<NButton v-if="homeData?.unclosed_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('changeledger')"> <div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
变更台账 <p>申请人:{{ row.applicant_name }}</p>
<Icon icon="formkit:right" class="size-12px" /> <span v-if="row.apply_time" class="text-[11px] text-slate-400">{{ row.apply_time?.slice(0, 10) }}</span>
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.unclosed_progress?.total > 0">
<div v-for="row in homeData?.unclosed_progress?.items || []" :key="row.change_id" @click="jumpTo('details_index',row.change_id)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)]"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': getColorWithOpacity(themeStore.themeColor, 0.25),
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<!-- 状态标签 -->
<NTag v-if="row.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="row.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="row.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>{{matchObj(levelList,row.change_level)?.label}}</NTag>
</div>
<div class="mt-1 flex items-center gap-2 font-mono text-[11px] text-slate-400">
<span>{{row.change_no}}</span>
<span>{{row.org_name}}</span>
<span>{{row.applicant_name}}</span>
</div>
<!-- 审批流程 -->
<div v-if="row.flow" class="mt-0.5 truncate text-[11px] flex items-center gap-2">
<div v-for="(item,index) in row.flow" :key="index" class="flex items-center gap-1">
<Icon v-if="index!==0" icon="formkit:right" class="size-12px text-slate-400" />
<!-- 通过 -->
<div v-if="item.status==='PASSED'" class="w-6px h-6px rounded-6px" :style="{ backgroundColor: themeStore.otherColor.success }"></div>
<p v-if="item.status==='PASSED'" :style="{ color: themeStore.otherColor.success }">{{item.name}}</p>
<!-- 进行中 -->
<div v-if="item.status==='ACTIVE'" class="w-6px h-6px rounded-6px" :style="{ backgroundColor: themeStore.otherColor.warning }"></div>
<p v-if="item.status==='ACTIVE'" :style="{ color: themeStore.otherColor.warning }">{{item.name}}</p>
<!-- 待 -->
<div v-if="item.status==='PENDING'" class="w-6px h-6px rounded-6px bg-slate-400"></div>
<p v-if="item.status==='PENDING'" class="text-slate-400">{{item.name}}</p>
<!-- 驳回 -->
<div v-if="item.status==='REJECTED'" class="w-6px h-6px rounded-6px" :style="{ backgroundColor: themeStore.otherColor.error }"></div>
<p v-if="item.status==='REJECTED'" :style="{ color: themeStore.otherColor.error }">{{item.name}}</p>
</div>
</div>
</div>
</div>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</template>
</div>
</NCard>
<!-- 临时变更投用后情况 -->
<NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lets-icons:clock" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">临时变更投用后情况</p>
<p class="text-11px text-#94a3b8 mt-2px">临期提醒 · 超期催办 · 延期 / 转永久跟踪</p>
</div> </div>
</div>
</div> </div>
<div class="flex flex-col gap-3"> </template>
<template v-if="homeData?.temp_after_use?.total > 0"> <template v-else>
<div v-for="row in homeData?.temp_after_use?.items || []" :key="row.change_id" <div class="h-100% flex items-center justify-center py-3">
class="flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition" <NEmpty description="暂无数据" class="!text-xs"></NEmpty>
:style="{
borderRadius: themeStore.themeRadius + 'px',
borderColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.25):getColorWithOpacity(themeStore.themeColor, 0.25),
backgroundColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.05):getColorWithOpacity(themeStore.themeColor, 0.05),
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<NTag v-if="row.overdue_status===2" size="small" type="error">已超期{{row.overdue_days}}天</NTag>
<NButton v-if="row.overdue_status===2" size="tiny" :disabled="btnLoading" @click="urge(row.change_id)">去催办</NButton>
<NButton v-else size="tiny" @click="jumpTo('changeledger')">查看</NButton>
</div>
<div class="mt-1 flex items-center gap-2 text-[11px] text-slate-400">
<span>{{ row.change_no }}</span>
<!-- 状态 -->
<span v-if="row.status==='APPROVING'">审批中</span>
<span v-if="row.status==='APPROVED'">已通过</span>
<span v-if="row.status==='IMPLEMENTED'">待验收</span>
<span v-if="row.status==='ACCEPTED'">待关闭</span>
<span v-if="row.status==='CLOSED'">已关闭</span>
<span v-if="row.status==='WITHDRAWN'">已撤回</span>
<span v-if="row.status==='REJECTED'">已驳回</span>
<span v-if="row.use_time">{{row.use_time?.slice(0, 16)}} 投用</span>
<span v-else>尚未投用</span>
<p v-if="row.use_time">计划恢复 {{row.restore_deadline?.slice(0, 10)}}<span>(已延期 1 次)</span></p>
<span v-else>原计划恢复 {{row.restore_deadline?.slice(0, 10)}}</span>
</div>
</div>
</div>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</template>
</div> </div>
</NCard> </template>
<!-- 重点关注 --> </div>
<NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }"> </NCard>
<div class="flex items-center justify-between mb-3"> <!-- 未关闭变更进度一览 -->
<div class="flex items-center gap-2"> <NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<Icon icon="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" /> <div class="flex items-center justify-between mb-3">
<p class="text-13px font-700 text-#64749a">重点关注</p> <div class="flex items-center gap-2">
<p class="text-11px text-#94a3b8 mt-2px">安全管控重点 · 点击打开变更单(含风险分析)</p> <Icon icon="lets-icons:clock" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">未关闭变更进度一览</p>
<p class="text-11px text-#94a3b8 mt-2px">本车间 · 全部未关闭变更</p>
</div>
<NButton v-if="homeData?.unclosed_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('changeledger')">
变更台账
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.unclosed_progress?.total > 0">
<div
v-for="row in homeData?.unclosed_progress?.items || []" :key="row.change_id" class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)]"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': getColorWithOpacity(themeStore.themeColor, 0.25),
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
@click="jumpTo('details_index',row.change_id)"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<!-- 状态标签 -->
<NTag v-if="row.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="row.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="row.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>
{{ matchObj(levelList,row.change_level)?.label }}
</NTag>
</div> </div>
<div class="mt-1 flex items-center gap-2 font-mono text-[11px] text-slate-400">
<span>{{ row.change_no }}</span>
<span>{{ row.org_name }}</span>
<span>{{ row.applicant_name }}</span>
</div>
<!-- 审批流程 -->
<div v-if="row.flow" class="mt-0.5 truncate text-[11px] flex items-center gap-2">
<div v-for="(item,index) in row.flow" :key="index" class="flex items-center gap-1">
<Icon v-if="index!==0" icon="formkit:right" class="size-12px text-slate-400" />
<!-- 通过 -->
<div v-if="item.status==='PASSED'" class="w-6px h-6px rounded-6px" :style="{ backgroundColor: themeStore.otherColor.success }"></div>
<p v-if="item.status==='PASSED'" :style="{ color: themeStore.otherColor.success }">{{ item.name }}</p>
<!-- 进行中 -->
<div v-if="item.status==='ACTIVE'" class="w-6px h-6px rounded-6px" :style="{ backgroundColor: themeStore.otherColor.warning }"></div>
<p v-if="item.status==='ACTIVE'" :style="{ color: themeStore.otherColor.warning }">{{ item.name }}</p>
<!-- 待 -->
<div v-if="item.status==='PENDING'" class="w-6px h-6px rounded-6px bg-slate-400"></div>
<p v-if="item.status==='PENDING'" class="text-slate-400">{{ item.name }}</p>
<!-- 驳回 -->
<div v-if="item.status==='REJECTED'" class="w-6px h-6px rounded-6px" :style="{ backgroundColor: themeStore.otherColor.error }"></div>
<p v-if="item.status==='REJECTED'" :style="{ color: themeStore.otherColor.error }">{{ item.name }}</p>
</div>
</div>
</div>
</div> </div>
<div class="flex flex-col gap-3"> </template>
<template v-if="homeData?.key_attention?.total > 0"> <template v-else>
<div v-for="row in homeData?.key_attention?.items || []" :key="row.change_id" <div class="h-100% flex items-center justify-center py-3">
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition !hover:border-[var(--hover-border)]" <NEmpty description="暂无数据" class="!text-xs"></NEmpty>
@click="jumpTo('details_index',row.change_id)"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': getColorWithOpacity(themeStore.otherColor.error, 0.3),
backgroundColor: getColorWithOpacity(themeStore.otherColor.error, 0.05),
borderColor: getColorWithOpacity(themeStore.otherColor.error, 0.05),
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<NTag size="small" type="error">重要</NTag>
<span class="text-xs text-slate-400">{{ row.change_no }}</span>
</div>
<p class="mt-1 truncate text-sm font-medium text-slate-800">{{ row.title }}</p>
<div class="mt-1 flex items-center gap-2 text-[11px] text-slate-400">
<!-- 状态 -->
<span v-if="row.status==='APPROVING'">审批中</span>
<span v-if="row.status==='APPROVED'">已通过</span>
<span v-if="row.status==='IMPLEMENTED'">待验收</span>
<span v-if="row.status==='ACCEPTED'">待关闭</span>
<span v-if="row.status==='CLOSED'">已关闭</span>
<span v-if="row.status==='WITHDRAWN'">已撤回</span>
<span v-if="row.status==='REJECTED'">已驳回</span>
<span>{{row.applicant_name}}</span>
</div>
</div>
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
</div>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</template>
</div> </div>
</NCard> </template>
</div>
</NCard>
<!-- 临时变更投用后情况 -->
<NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lets-icons:clock" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">临时变更投用后情况</p>
<p class="text-11px text-#94a3b8 mt-2px">临期提醒 · 超期催办 · 延期 / 转永久跟踪</p>
</div>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.temp_after_use?.total > 0">
<div
v-for="row in homeData?.temp_after_use?.items || []" :key="row.change_id"
class="flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition"
:style="{
borderRadius: themeStore.themeRadius + 'px',
borderColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.25):getColorWithOpacity(themeStore.themeColor, 0.25),
backgroundColor: row.overdue_status===2?getColorWithOpacity(themeStore.otherColor.error, 0.05):getColorWithOpacity(themeStore.themeColor, 0.05),
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<NTag v-if="row.overdue_status===2" size="small" type="error">已超期{{ row.overdue_days }}天</NTag>
<NButton v-if="row.overdue_status===2" size="tiny" :disabled="btnLoading" @click="urge(row.change_id)">去催办</NButton>
<NButton v-else size="tiny" @click="jumpTo('changeledger')">查看</NButton>
</div>
<div class="mt-1 flex items-center gap-2 text-[11px] text-slate-400">
<span>{{ row.change_no }}</span>
<!-- 状态 -->
<span v-if="row.status==='APPROVING'">审批中</span>
<span v-if="row.status==='APPROVED'">已通过</span>
<span v-if="row.status==='IMPLEMENTED'">待验收</span>
<span v-if="row.status==='ACCEPTED'">待关闭</span>
<span v-if="row.status==='CLOSED'">已关闭</span>
<span v-if="row.status==='WITHDRAWN'">已撤回</span>
<span v-if="row.status==='REJECTED'">已驳回</span>
<span v-if="row.use_time">{{ row.use_time?.slice(0, 16) }} 投用</span>
<span v-else>尚未投用</span>
<p v-if="row.use_time">计划恢复 {{ row.restore_deadline?.slice(0, 10) }}<span>(已延期 1 次)</span></p>
<span v-else>原计划恢复 {{ row.restore_deadline?.slice(0, 10) }}</span>
</div>
</div>
</div>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</template>
</div>
</NCard>
<!-- 重点关注 -->
<NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">重点关注</p>
<p class="text-11px text-#94a3b8 mt-2px">安全管控重点 · 点击打开变更单(含风险分析)</p>
</div>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.key_attention?.total > 0">
<div
v-for="row in homeData?.key_attention?.items || []" :key="row.change_id"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition !hover:border-[var(--hover-border)]"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': getColorWithOpacity(themeStore.otherColor.error, 0.3),
backgroundColor: getColorWithOpacity(themeStore.otherColor.error, 0.05),
borderColor: getColorWithOpacity(themeStore.otherColor.error, 0.05),
}"
@click="jumpTo('details_index',row.change_id)"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<NTag size="small" type="error">重要</NTag>
<span class="text-xs text-slate-400">{{ row.change_no }}</span>
</div>
<p class="mt-1 truncate text-sm font-medium text-slate-800">{{ row.title }}</p>
<div class="mt-1 flex items-center gap-2 text-[11px] text-slate-400">
<!-- 状态 -->
<span v-if="row.status==='APPROVING'">审批中</span>
<span v-if="row.status==='APPROVED'">已通过</span>
<span v-if="row.status==='IMPLEMENTED'">待验收</span>
<span v-if="row.status==='ACCEPTED'">待关闭</span>
<span v-if="row.status==='CLOSED'">已关闭</span>
<span v-if="row.status==='WITHDRAWN'">已撤回</span>
<span v-if="row.status==='REJECTED'">已驳回</span>
<span>{{ row.applicant_name }}</span>
</div>
</div>
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
</div>
</template>
<template v-else>
<div class="h-100% flex items-center justify-center py-3">
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
</div>
</template>
</div>
</NCard>
</NGi> </NGi>
<!-- 右侧 --> <!-- 右侧 -->
<NGi span="24 s:24 m:24 l:8"> <NGi span="24 s:24 m:24 l:8">
<!-- 本车间统计 --> <!-- 本车间统计 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }"> <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center flex-wrap gap-2"> <div class="flex items-center flex-wrap gap-2">
<Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">本车间统计</p> <p class="text-13px font-700 text-#64749a">本车间统计</p>
<p class="text-11px text-#94a3b8">一车间 · 近一年</p> <p class="text-11px text-#94a3b8">一车间 · 近一年</p>
<NSelect :value="dateRange" size="small" :options="DATE_RANGE_OPTIONS" class="ml-auto w-120px" :on-update:value="timeChange"></NSelect> <NSelect :value="dateRange" size="small" :options="DATE_RANGE_OPTIONS" class="ml-auto w-120px" :on-update:value="timeChange"></NSelect>
</div> </div>
<div v-if="dateRange==='custom'" class="flex items-center gap-2 mt-2"> <div v-if="dateRange==='custom'" class="flex items-center gap-2 mt-2">
<NDatePicker :value="from" type="date" size="small" class="w-full" :on-update:value="(v) => customTimeChange('start',v)" /> <NDatePicker :value="from" type="date" size="small" class="w-full" :on-update:value="(v) => customTimeChange('start',v)" />
<span class="text-xs text-slate-400 flex-1">至</span> <span class="text-xs text-slate-400 flex-1">至</span>
<NDatePicker :value="to" type="date" size="small" class="w-full" :on-update:value="(v) => customTimeChange('end',v)" /> <NDatePicker :value="to" type="date" size="small" class="w-full" :on-update:value="(v) => customTimeChange('end',v)" />
</div> </div>
<div class="flex flex-col gap-3 mt-3"> <div class="flex flex-col gap-3 mt-3">
<div class="flex items-end justify-between"> <div class="flex items-end justify-between">
<div> <div>
<span class="text-3xl font-extrabold text-slate-800">{{ homeData?.dept_summary?.total || 0 }}</span> <span class="text-3xl font-extrabold text-slate-800">{{ homeData?.dept_summary?.total || 0 }}</span>
<span class="ml-1.5 text-[11px] text-slate-500">变更总数</span> <span class="ml-1.5 text-[11px] text-slate-500">变更总数</span>
</div>
<span class="text-[11px] text-slate-400">状态构成占比条</span>
</div> </div>
<div class="flex h-3 w-full overflow-hidden rounded-full bg-slate-100"> <span class="text-[11px] text-slate-400">状态构成占比条</span>
<div :title="`已关闭 ${homeData?.dept_summary?.closed || 0} 起`" :style="{width: `${(homeData?.dept_summary?.closed || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.themeColor}"></div> </div>
<div :title="`审批中 ${homeData?.dept_summary?.approving || 0} 起`" :style="{width: `${(homeData?.dept_summary?.approving || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.otherColor.warning}"></div> <div class="flex h-3 w-full overflow-hidden rounded-full bg-slate-100">
<div :title="`实施中 ${homeData?.dept_summary?.executing || 0} 起`" :style="{width: `${(homeData?.dept_summary?.executing || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.otherColor.success}"></div> <div :title="`已关闭 ${homeData?.dept_summary?.closed || 0} 起`" :style="{width: `${(homeData?.dept_summary?.closed || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.themeColor}"></div>
<div :title="`超期未关闭 ${homeData?.dept_summary?.overdue || 0} 起`" :style="{width: `${(homeData?.dept_summary?.overdue || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.otherColor.error}"></div> <div :title="`审批中 ${homeData?.dept_summary?.approving || 0} 起`" :style="{width: `${(homeData?.dept_summary?.approving || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.otherColor.warning}"></div>
<div :title="`实施中 ${homeData?.dept_summary?.executing || 0} 起`" :style="{width: `${(homeData?.dept_summary?.executing || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.otherColor.success}"></div>
<div :title="`超期未关闭 ${homeData?.dept_summary?.overdue || 0} 起`" :style="{width: `${(homeData?.dept_summary?.overdue || 0) / (homeData?.dept_summary?.total || 0) * 100}%`, background: themeStore.otherColor.error}"></div>
</div>
<div class="grid grid-cols-2 gap-1.5">
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.themeColor }"></span>
<span class="text-[11px] text-slate-500">已关闭</span>
<span class="ml-auto text-sm font-bold text-slate-800">{{ homeData?.dept_summary?.closed || 0 }}</span>
</div> </div>
<div class="grid grid-cols-2 gap-1.5"> <div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50"> <span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.warning }"></span>
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.themeColor }"></span> <span class="text-[11px] text-slate-500">审批中</span>
<span class="text-[11px] text-slate-500">已关闭</span> <span class="ml-auto text-sm font-bold text-slate-800">{{ homeData?.dept_summary?.approving || 0 }}</span>
<span class="ml-auto text-sm font-bold text-slate-800">{{ homeData?.dept_summary?.closed || 0 }}</span>
</div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.warning }"></span>
<span class="text-[11px] text-slate-500">审批中</span>
<span class="ml-auto text-sm font-bold text-slate-800">{{ homeData?.dept_summary?.approving || 0 }}</span>
</div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.success }"></span>
<span class="text-[11px] text-slate-500">实施中</span>
<span class="ml-auto text-sm font-bold text-slate-800">{{ homeData?.dept_summary?.executing || 0 }}</span>
</div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-red-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.error }"></span>
<span class="text-[11px] text-slate-500">超期未关闭</span>
<span class="ml-auto text-sm font-bold" :style="{ color: themeStore.otherColor.error }">{{ homeData?.dept_summary?.overdue || 0 }}</span>
</div>
</div> </div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.success }"></span>
<span class="text-[11px] text-slate-500">实施中</span>
<span class="ml-auto text-sm font-bold text-slate-800">{{ homeData?.dept_summary?.executing || 0 }}</span>
</div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-red-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.error }"></span>
<span class="text-[11px] text-slate-500">超期未关闭</span>
<span class="ml-auto text-sm font-bold" :style="{ color: themeStore.otherColor.error }">{{ homeData?.dept_summary?.overdue || 0 }}</span>
</div>
</div>
</div> </div>
</NCard> </NCard>
<!-- 资料管理 --> <!-- 资料管理 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }"> <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
<div class="flex items-center mb-3 gap-2"> <div class="flex items-center mb-3 gap-2">
<Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" /> <Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">资料管理</p> <p class="text-13px font-700 text-#64749a">资料管理</p>
</div> </div>
<div <div
class="space-y-2" class="space-y-2"
:style="{ :style="{
'--hover-border': getColorWithOpacity(themeStore.themeColor, 0.25), '--hover-border': getColorWithOpacity(themeStore.themeColor, 0.25),
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05) '--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}" }"
> >
<div <div
class="cursor-pointer flex w-full items-center gap-3 rounded-lg border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)]" class="cursor-pointer flex w-full items-center gap-3 rounded-lg border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)]"
@click="jumpTo('docs_archives')" @click="jumpTo('docs_archives')"
> >
<Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" /> <Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" />
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="truncate text-xs font-semibold text-slate-700">本车间操作规程</p> <p class="truncate text-xs font-semibold text-slate-700">本车间操作规程</p>
<p class="truncate text-[11px] text-slate-400">现行受控版本查阅</p> <p class="truncate text-[11px] text-slate-400">现行受控版本查阅</p>
</div>
<Icon icon="formkit:right" class="size-14px text-slate-400" />
</div> </div>
<div <Icon icon="formkit:right" class="size-14px text-slate-400" />
</div>
<div
class="cursor-pointer flex w-full items-center gap-3 rounded-lg border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)]" class="cursor-pointer flex w-full items-center gap-3 rounded-lg border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)]"
@click="jumpTo('docs_archives')" @click="jumpTo('docs_archives')"
> >
<Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" /> <Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" />
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="truncate text-xs font-semibold text-slate-700">本车间变更档案</p> <p class="truncate text-xs font-semibold text-slate-700">本车间变更档案</p>
<p class="truncate text-[11px] text-slate-400">历史变更记录与验收材料</p> <p class="truncate text-[11px] text-slate-400">历史变更记录与验收材料</p>
</div>
<Icon icon="formkit:right" class="size-14px text-slate-400" />
</div> </div>
<Icon icon="formkit:right" class="size-14px text-slate-400" />
</div>
</div> </div>
</NCard> </NCard>
<!-- 近一年验收结论占比 --> <!-- 近一年验收结论占比 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }"> <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
<div class="flex items-center mb-3 gap-2"> <div class="flex items-center mb-3 gap-2">
<Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" /> <Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">近一年验收结论占比</p> <p class="text-13px font-700 text-#64749a">近一年验收结论占比</p>
<p class="text-11px text-#94a3b8">本车间 · 已验收变更</p> <p class="text-11px text-#94a3b8">本车间 · 已验收变更</p>
</div> </div>
<RingChart v-if="homeData" :data="homeData?.accept_conclusion?.items || []" :total="homeData?.accept_conclusion?.total_count || 0" /> <RingChart v-if="homeData" :data="homeData?.accept_conclusion?.items || []" :total="homeData?.accept_conclusion?.total_count || 0" />
<div class="flex items-center justify-between border-slate-200 border-t pt-2 border-dashed"> <div class="flex items-center justify-between border-slate-200 border-t pt-2 border-dashed">
<span class="text-[11px] text-slate-400">投入合计(变更材料和实施费)</span> <span class="text-[11px] text-slate-400">投入合计(变更材料和实施费)</span>
<span class="text-xs font-bold" :style="{ color: themeStore.themeColor }">{{homeData?.accept_conclusion?.total_fee || 0}} 万元</span> <span class="text-xs font-bold" :style="{ color: themeStore.themeColor }">{{ homeData?.accept_conclusion?.total_fee || 0 }} 万元</span>
</div> </div>
</NCard> </NCard>
</NGi> </NGi>
</NGrid> </NGrid>
</div> </div>
</NSpin> </NSpin>
</template> </template>
<style scoped></style> <style scoped></style>