本车间变更统计页面完成

This commit is contained in:
2026-09-30 15:13:21 +08:00
parent 071d751f79
commit 9f674eb5c6
3 changed files with 46 additions and 53 deletions
+2
View File
@@ -308,6 +308,7 @@ const getList = async () => {
} }
// 获取配置 // 获取配置
const getConfig = async () => { const getConfig = async () => {
loading.value = true;
const {data,error} = await systemConfigApi(); const {data,error} = await systemConfigApi();
if(!error){ if(!error){
// 解析 变更类型设置 // 解析 变更类型设置
@@ -321,6 +322,7 @@ const getConfig = async () => {
levelList.value = levelList.value.concat(changeLevelGroup.items); levelList.value = levelList.value.concat(changeLevelGroup.items);
} }
} }
loading.value = false;
} }
// 获取组织列表 // 获取组织列表
+38 -47
View File
@@ -14,6 +14,11 @@ const loading = ref<boolean>(false);
const remindDays = ref<number>(0); const remindDays = ref<number>(0);
const homeData = ref<any>(null); const homeData = ref<any>(null);
// 小时转换天
const hourToDay = (hour: number) => {
return Math.trunc((hour / 24) * 100) / 100;
}
// 跳转页面 // 跳转页面
const jumpTo = (key: string) => { const jumpTo = (key: string) => {
routerPushByKey(key as any); routerPushByKey(key as any);
@@ -28,6 +33,7 @@ const getData = async () => {
}); });
if(!error){ if(!error){
homeData.value = data; homeData.value = data;
console.log(data);
} }
loading.value = false; loading.value = false;
} }
@@ -67,7 +73,7 @@ onMounted(() => {
<div class="flex items-center"> <div class="flex items-center">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="126" :end-value="homeData?.kpis?.apply_total || 0"
class="text-24px font-600 text-slate-800" class="text-24px font-600 text-slate-800"
/> />
</div> </div>
@@ -83,7 +89,7 @@ onMounted(() => {
<div class="flex items-center"> <div class="flex items-center">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="18" :end-value="homeData?.kpis?.unclosed_total || 0"
class="text-26px font-600" class="text-26px font-600"
:style="{color:themeStore.themeColor}" :style="{color:themeStore.themeColor}"
/> />
@@ -100,7 +106,7 @@ onMounted(() => {
<div class="flex items-center"> <div class="flex items-center">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="86" :end-value="homeData?.kpis?.overdue_total || 0"
class="text-26px font-600" class="text-26px font-600"
:style="{color:themeStore.otherColor.error}" :style="{color:themeStore.otherColor.error}"
/> />
@@ -117,7 +123,8 @@ onMounted(() => {
<div class="flex items-center"> <div class="flex items-center">
<CountTo <CountTo
:start-value="0" :start-value="0"
:end-value="58" :end-value="homeData?.kpis?.my_timely_rate || 0"
:decimals="1"
class="text-26px font-600" class="text-26px font-600"
:style="{color:themeStore.otherColor.success}" :style="{color:themeStore.otherColor.success}"
/><p class="text-26px font-600" :style="{color:themeStore.otherColor.success}">%</p> /><p class="text-26px font-600" :style="{color:themeStore.otherColor.success}">%</p>
@@ -136,17 +143,17 @@ onMounted(() => {
<div class="space-y-3"> <div class="space-y-3">
<div class="flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2.5"> <div class="flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2.5">
<span class="min-w-0 flex-1 text-sm text-slate-700">平均审批时长</span> <span class="min-w-0 flex-1 text-sm text-slate-700">平均审批时长</span>
<span class="text-base font-bold" :style="{color:themeStore.themeColor}">1.6 天</span> <span class="text-base font-bold" :style="{color:themeStore.themeColor}">{{homeData?.my_eff?.avg_audit_days || 0}} 天</span>
<span class="text-[11px]" :style="{color:themeStore.otherColor.success}">目标 ≤2 天</span> <span class="text-[11px]" :style="{color:themeStore.otherColor.success}">目标 ≤{{hourToDay(homeData?.my_eff?.sign_timely_hours || 0)}} 天</span>
</div> </div>
<div class="flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2.5"> <div class="flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2.5">
<span class="min-w-0 flex-1 text-sm text-slate-700">按时审批率</span> <span class="min-w-0 flex-1 text-sm text-slate-700">按时审批率</span>
<span class="text-base font-bold" :style="{color:themeStore.themeColor}">92%</span> <span class="text-base font-bold" :style="{color:themeStore.themeColor}">{{homeData?.my_eff?.timely_rate || 0}}%</span>
<span class="text-[11px]" :style="{color:themeStore.otherColor.success}">目标 ≥90%</span> <span class="text-[11px]" :style="{color:themeStore.otherColor.success}">目标 ≥90%</span>
</div> </div>
<div class="flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2.5"> <div class="flex items-center gap-2 rounded-lg bg-slate-50 px-3 py-2.5">
<span class="min-w-0 flex-1 text-sm text-slate-700">驳回补充说明率</span> <span class="min-w-0 flex-1 text-sm text-slate-700">驳回补充说明率</span>
<span class="text-base font-bold" :style="{color:themeStore.themeColor}">100%</span> <span class="text-base font-bold" :style="{color:themeStore.themeColor}">{{homeData?.my_eff?.reject_comment_rate || 0}}%</span>
<span class="text-[11px]" :style="{color:themeStore.otherColor.success}">驳回必附整改指引</span> <span class="text-[11px]" :style="{color:themeStore.otherColor.success}">驳回必附整改指引</span>
</div> </div>
<p class="text-[11px] text-slate-400">考核数据来源:本人节点签收 → 签出时长,系统自动统计,不可修改</p></div> <p class="text-[11px] text-slate-400">考核数据来源:本人节点签收 → 签出时长,系统自动统计,不可修改</p></div>
@@ -159,7 +166,7 @@ onMounted(() => {
<p class=" text-base font-semibold border-b border-slate-100 p-3">本车间变更状态构成(实时)</p> <p class=" text-base font-semibold border-b border-slate-100 p-3">本车间变更状态构成(实时)</p>
<div class="py-3 px-4"> <div class="py-3 px-4">
<div class="space-y-2.5"> <div class="space-y-2.5">
<div v-for="item in homeData?.open_status_counts" :key="item.status" class="flex items-center gap-2"> <div v-for="item in homeData?.status_dist" :key="item.status" class="flex items-center gap-2">
<!-- 审批中 --> <!-- 审批中 -->
<span v-if="item.status==='APPROVING'" class="h-2.5 w-2.5 shrink-0 rounded-sm" :style="{background:themeStore.otherColor.warning}"></span> <span v-if="item.status==='APPROVING'" class="h-2.5 w-2.5 shrink-0 rounded-sm" :style="{background:themeStore.otherColor.warning}"></span>
<!-- 已批准待投用 --> <!-- 已批准待投用 -->
@@ -187,21 +194,21 @@ onMounted(() => {
<div class="flex items-center gap-2 text-xs"> <div class="flex items-center gap-2 text-xs">
<span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.success }"></span> <span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.success }"></span>
<span class="font-medium text-slate-700">正常(到期 > {{remindDays}} 天)</span> <span class="font-medium text-slate-700">正常(到期 > {{remindDays}} 天)</span>
<span class="ml-auto font-semibold text-slate-600">{{homeData?.kpis?.unclosed_total || 0}}</span> <span class="ml-auto font-semibold text-slate-600">{{homeData?.temp_watch?.normal || 0}}</span>
</div> </div>
</div> </div>
<div class="rounded-lg border px-3 py-2"> <div class="rounded-lg border px-3 py-2">
<div class="flex items-center gap-2 text-xs"> <div class="flex items-center gap-2 text-xs">
<span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.warning }"></span> <span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.warning }"></span>
<span class="font-medium text-slate-700">临期(到期 ≤ {{remindDays}} 天)</span> <span class="font-medium text-slate-700">临期(到期 ≤ {{remindDays}} 天)</span>
<span class="ml-auto font-semibold text-slate-600">{{homeData?.kpis?.near_overdue_total || 0}}</span> <span class="ml-auto font-semibold text-slate-600">{{homeData?.temp_watch?.near || 0}}</span>
</div> </div>
</div> </div>
<div class="rounded-lg border px-3 py-2"> <div class="rounded-lg border px-3 py-2">
<div class="flex items-center gap-2 text-xs"> <div class="flex items-center gap-2 text-xs">
<span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.error }"></span> <span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.error }"></span>
<span class="font-medium text-slate-700">已超期</span> <span class="font-medium text-slate-700">已超期</span>
<span class="ml-auto font-semibold text-slate-600">{{homeData?.kpis?.overdue_total || 0}}</span> <span class="ml-auto font-semibold text-slate-600">{{homeData?.temp_watch?.overdue || 0}}</span>
</div> </div>
</div> </div>
<NButton size="small" ghost dashed block class="text-xs text-slate-400" @click="jumpTo('changeledger')">前往变更台账查看处置 →</NButton> <NButton size="small" ghost dashed block class="text-xs text-slate-400" @click="jumpTo('changeledger')">前往变更台账查看处置 →</NButton>
@@ -241,11 +248,11 @@ onMounted(() => {
<div class="grid grid-cols-2 gap-2"> <div class="grid grid-cols-2 gap-2">
<div class="rounded-lg bg-red-50 px-3 py-2"> <div class="rounded-lg bg-red-50 px-3 py-2">
<div class="text-[11px] text-slate-500">新增固有高风险项</div> <div class="text-[11px] text-slate-500">新增固有高风险项</div>
<div class="text-xl font-bold" :style="{color:themeStore.otherColor.error}">{{homeData?.risk?.inherent_high || 0}}</div> <div class="text-xl font-bold" :style="{color:themeStore.otherColor.error}">{{homeData?.risk?.new_high || 0}}</div>
</div> </div>
<div class="rounded-lg bg-amber-50 px-3 py-2"> <div class="rounded-lg bg-amber-50 px-3 py-2">
<div class="text-[11px] text-slate-500">新增中风险项</div> <div class="text-[11px] text-slate-500">新增中风险项</div>
<div class="text-xl font-bold" :style="{color:themeStore.otherColor.warning}">{{homeData?.risk?.inherent_mid || 0}}</div> <div class="text-xl font-bold" :style="{color:themeStore.otherColor.warning}">{{homeData?.risk?.new_mid || 0}}</div>
</div> </div>
<div class="rounded-lg bg-slate-50 px-3 py-2"> <div class="rounded-lg bg-slate-50 px-3 py-2">
<div class="text-[11px] text-slate-500">剩余高风险项</div> <div class="text-[11px] text-slate-500">剩余高风险项</div>
@@ -256,15 +263,13 @@ onMounted(() => {
<div class="text-xl font-bold" :style="{color:themeStore.otherColor.warning}">{{homeData?.risk?.residual_mid || 0}}</div> <div class="text-xl font-bold" :style="{color:themeStore.otherColor.warning}">{{homeData?.risk?.residual_mid || 0}}</div>
</div> </div>
</div> </div>
<div> <!-- <div class="flex items-center gap-2 text-slate-500">
<div class="flex items-center gap-2 text-slate-500">
<span class="text-xs">管控措施落实率</span> <span class="text-xs">管控措施落实率</span>
<div class="h-2 flex-1 rounded-full bg-slate-100"> <div class="h-2 flex-1 rounded-full bg-slate-100">
<div class="h-2 rounded-full" :style="{ background: themeStore.otherColor.success }" style="width: 96%"></div> <div class="h-2 rounded-full" :style="{ background: themeStore.otherColor.success }" style="width: 96%"></div>
</div> </div>
<span class="font-semibold" :style="{color:themeStore.otherColor.success}">96%</span> <span class="font-semibold" :style="{color:themeStore.otherColor.success}">96%</span>
</div> </div> -->
</div>
<p class="mt-1.5 text-[11px] text-slate-400">高风险场景明细见「高风险」页(按部门筛选一车间)</p> <p class="mt-1.5 text-[11px] text-slate-400">高风险场景明细见「高风险」页(按部门筛选一车间)</p>
</div> </div>
</NCard> </NCard>
@@ -285,9 +290,9 @@ onMounted(() => {
<p class=" text-base font-semibold">变更投入和效果(近一年 · 已验收变更)</p> <p class=" text-base font-semibold">变更投入和效果(近一年 · 已验收变更)</p>
<p class="text-11px text-slate-400 mt-3px">费用取验收时填报的「变更材料和实施费」;完整明细见操作台「变更投入和效果」</p> <p class="text-11px text-slate-400 mt-3px">费用取验收时填报的「变更材料和实施费」;完整明细见操作台「变更投入和效果」</p>
<p class="text-[11px] text-slate-400 ml-auto"> <p class="text-[11px] text-slate-400 ml-auto">
已验收 <b class="text-slate-700">3</b> 起 · 已验收 <b class="text-slate-700">{{homeData?.invest?.total || 0}}</b> 起 ·
投入合计 <b :style="{color:themeStore.themeColor}">11.5</b> 万元 · 投入合计 <b :style="{color:themeStore.themeColor}">{{homeData?.invest?.total_cost || 0}}</b> 万元 ·
完全达到率 <b :style="{color:themeStore.otherColor.success}">67%</b> 完全达到率 <b :style="{color:themeStore.otherColor.success}">{{homeData?.invest?.full_rate || 0}}%</b>
</p> </p>
</div> </div>
<div class="py-3 px-4"> <div class="py-3 px-4">
@@ -303,36 +308,22 @@ onMounted(() => {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr v-if="homeData?.invest?.items?.length===0">
<td> <td colspan="6" class="text-center text-xs !text-slate-400">暂无数据</td>
<p>氮气管网压力分级调整</p>
<span class="text-11px text-slate-400">MOC-2026-R01-0024</span>
</td>
<td class="text-xs">2026-07-08</td>
<td class="text-xs">2026-07-08</td>
<td class="text-xs">2026-07-08</td>
<td class="text-xs"><span class="font-600">11.5</span></td>
<td>
<NTag size="small" type="success" class="text-xs">完全达到</NTag>
<!-- <NTag v-if="r.result_status===3" size="small" type="success">{{r.result_label}}</NTag>
<NTag v-if="r.result_status===2" size="small" type="warning">{{r.result_label}}</NTag>
<NTag v-if="r.result_status===1" size="small" type="error">{{r.result_label}}</NTag> -->
</td>
</tr> </tr>
<tr> <tr v-for="row in homeData?.invest?.items || []" :key="row.change_id">
<td> <td>
<p>氮气管网压力分级调整</p> <p>{{row.title}}</p>
<span class="text-11px text-slate-400">MOC-2026-R01-0024</span> <span class="text-11px text-slate-400">{{row.change_no}}</span>
</td> </td>
<td class="text-xs">2026-07-08</td> <td class="text-xs">{{row?.apply_time?.slice(0,10)}}</td>
<td class="text-xs">2026-07-08</td> <td class="text-xs">{{row?.use_time?.slice(0,10)}}</td>
<td class="text-xs">2026-07-08</td> <td class="text-xs">{{row?.accept_time?.slice(0,10)}}</td>
<td class="text-xs"><span class="font-600">11.5</span></td> <td class="text-xs"><span class="font-600">{{row?.cost || 0}}</span></td>
<td> <td>
<NTag size="small" type="success" class="text-xs">完全达到</NTag> <NTag v-if="row.result_status===3" size="small" type="success">{{row.result_label}}</NTag>
<!-- <NTag v-if="r.result_status===3" size="small" type="success">{{r.result_label}}</NTag> <NTag v-if="row.result_status===2" size="small" type="warning">{{row.result_label}}</NTag>
<NTag v-if="r.result_status===2" size="small" type="warning">{{r.result_label}}</NTag> <NTag v-if="row.result_status===1" size="small" type="error">{{row.result_label}}</NTag>
<NTag v-if="r.result_status===1" size="small" type="error">{{r.result_label}}</NTag> -->
</td> </td>
</tr> </tr>
</tbody> </tbody>
@@ -15,7 +15,7 @@ const { domRef, updateOptions } = useEcharts(() => ({
formatter: '{b}: {c} ({d}%)' formatter: '{b}: {c} ({d}%)'
}, },
legend: { legend: {
bottom: 0, bottom: 10,
left: 'center', left: 'center',
icon: 'circle', icon: 'circle',
itemWidth: 10, itemWidth: 10,