bestlee/moc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车间主任首页完成

Browse Source
This commit is contained in:
bestlee
2026-09-29 11:18:33 +08:00
parent 09d679efd9
commit e3154adf3f
11 changed files with 993 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/modules/ringChart.vue
+19 -7
View File
@@ -6,7 +6,9 @@ defineOptions({
name: 'RingChart'
});
const props = defineProps<{ data?: { name: string; value: number; money: number; rate: number }[]; colors?: string[]; range?: string }>();
const props = defineProps<{ data?: { name: string; value: number; fee: number }[]; total?: number }>();
const chartData = ref<{ name: string; value: number; fee: number; rate: number }[]>([]);
const { domRef, updateOptions } = useEcharts(() => ({
tooltip: {
@@ -43,16 +45,16 @@ const { domRef, updateOptions } = useEcharts(() => ({
}
},
formatter: function (name: string) {
var info = props.data?.find((item: { name: string }) => item.name === name);
var info = chartData.value?.find((item: { name: string }) => item.name === name);
if(info){
return '{name|'+name+'} {count|'+(info.value)+' 起}{rate|'+(info.rate)+' %} {money|'+(info.money)+' 万元}';
return '{name|'+name+'} {count|'+(info.value)+' 起}{rate|'+(info.rate)+' %} {money|'+(info.fee)+' 万元}';
}else{
return name;
}
}
},
title: {
text: `{a|19}\n{b|已验收}`,
text: `{a|${(props.total || 0)}}\n{b|已验收}`,
textStyle: {
rich: {
a: {
@@ -72,7 +74,7 @@ const { domRef, updateOptions } = useEcharts(() => ({
}
}
},
left: '45%',
left: '43%',
top: '21%',
},
series: [
@@ -100,8 +102,18 @@ const { domRef, updateOptions } = useEcharts(() => ({
function init() {
updateOptions(opts => {
opts.series[0].data = props.data || [];
opts.series[0].color = props.colors || [];
const data:any = props.data?.map((item:any) => {
const rate = item.count === 0 ? 0 : (Math.round((item.count / (props.total || 0)) * 100) / 100)*100;
return {
name: item.label,
value: item.count,
fee: item.fee,
rate: rate
}
});
chartData.value = data;
opts.series[0].data = chartData.value;
opts.series[0].color = ["#52c41a", "#faad14", "#ff4d4f"];
return opts;
});
}
src/views/home/modules/template10.vue
+1 -13
View File
@@ -23,12 +23,6 @@ let timer: any = null;
// 首页数据
const homeData = ref<any>(null);
const highRisk = [
{ title: "聚合反应温度控制上限调整", why: "涉及工艺安全边界，建议参与 HAZOP 分析" },
{ title: "R-101 搅拌提速至 180rpm", why: "搅拌轴强度与密封形式需校核" },
];
// 跳转变更申请页面、变更台账、我的任务、发起变更
const jumpTo = (key: string,qid:number = 0) => {
if(key==='my_initiatechange' && qid){
@@ -66,12 +60,6 @@ const tick = () => {
timer = setTimeout(tick, delay);
}
// 匹配对象
const matchObj = (list:any,val:number) => {
const obj = list.find((item:any) => item.value == val);
return obj || null;
}
// 获取数据
const getData = async () => {
loading.value = true;
@@ -277,7 +265,7 @@ onUnmounted(() => {
<p class="text-11px text-#94a3b8 mt-2px">点击进入台账按阶段查看</p>
</div>
<div class="flex gap-2">
<NButton size="small" ghost type="primary" class="text-xs" @click="jumpTo('changeledger')">审判中 14</NButton>
<NButton size="small" ghost type="primary" class="text-xs" @click="jumpTo('changeledger')">审批中 14</NButton>
<NButton size="small" ghost type="primary" class="text-xs" @click="jumpTo('changeledger')">已通过 6</NButton>
<NButton size="small" ghost type="primary" class="text-xs" @click="jumpTo('changeledger')">待验收 9</NButton>
<NButton size="small" ghost type="primary" class="text-xs" @click="jumpTo('changeledger')">待关闭 7</NButton>
src/views/home/modules/template7.vue
+178 -82
View File
@@ -6,18 +6,12 @@ import { useRouterPush } from '@/hooks/common/router';
import { getColorWithOpacity, tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
import RingChart from "./ringChart.vue";
import { systemConfigApi } from "@/service/api/system";
import { urgeApi } from "@/service/api/change";
import { homeManagerApi } from "@/service/api/statistics";
const themeStore = useThemeStore();
const { routerPushByKey } = useRouterPush();
const DEPT_ACCEPT2 = [
{ name: "完全达到", value: 13, money: 61.2, rate: 68 },
{ name: "基本达到", value: 4, money: 19.8, rate: 21 },
{ name: "未达到", value: 2, money: 5.4, rate: 11 },
];
const ACCEPT_COLORS2 = ["#52c41a", "#faad14", "#ff4d4f"];
const DATE_RANGE_OPTIONS = [
{ label: "近一年", value: 'year' },
{ label: "近半年", value: 'half_year' },
@@ -27,6 +21,8 @@ const DATE_RANGE_OPTIONS = [
]
const loading = ref<boolean>(false);
// 催办按钮loading
const btnLoading = ref<boolean>(false);
// 日期范围
const dateRange = ref<string>('year');
// 自定义日期范围
@@ -44,7 +40,6 @@ let timer: any = null;
// 首页数据
const homeData = ref<any>(null);
// 时间范围改变
const timeChange = (type: string, value: number | null) => {
if(type === 'start'){
@@ -54,20 +49,16 @@ const timeChange = (type: string, value: number | null) => {
}
}
// 跳转变更申请页面、变更台账、我的任务、发起变更
// 跳转页面
const jumpTo = (key: string,qid:number = 0) => {
if(key==='my_initiatechange' && qid){
routerPushByKey(key,{ query: { id: qid.toString() } });
}else if(key==='details_closedoc' && qid){
if(key==='details_index' && qid){
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
}else if(key==='details_approval' && qid){
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
}else{
routerPushByKey(key as any);
}
}
// 打开变更详情
const openDetail = (row: any) => {
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),key:'home' } });
};
// 获取当前时间字符串
const getCurrentTimeStr = () => {
@@ -89,6 +80,16 @@ const tick = () => {
timer = setTimeout(tick, delay);
}
// 催办
const urge = async (change_id:number) => {
btnLoading.value = true;
const {error} = await urgeApi(change_id);
if(!error){
window.$message?.success('催办成功');
}
btnLoading.value = false;
}
// 匹配对象
const matchObj = (list:any,val:number) => {
const obj = list.find((item:any) => item.value == val);
@@ -101,7 +102,6 @@ const getData = async () => {
const {data,error} = await homeManagerApi();
if(!error){
homeData.value = data;
console.log(data)
}
loading.value = false;
}
@@ -152,7 +152,7 @@ onUnmounted(() => {
<div class="space-y-3.5">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<NGi span="24 s:24 m:16">
<NGi span="24 s:24 m:8">
<div class="flex-y-center">
<p
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
@@ -163,9 +163,9 @@ onUnmounted(() => {
<p class="pl-12px text-14px font-semibold">我的工作台</p>
</div>
</NGi>
<NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
<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('my_mytask')">
<NButton ghost size="small" @click="jumpTo('workshopstatistics')">
车间变更看板
</NButton>
<NButton type="primary" size="small" @click="jumpTo('my_mytask')">
@@ -187,24 +187,25 @@ onUnmounted(() => {
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.archive_todo?.total || 0"
:end-value="homeData?.todo_approvals?.total || 0"
class="text-26px font-600 text-[#333]"
/>
</div>
<p class="text-12px">含超期未审 · 请优先处理</p>
<p v-if="homeData?.todo_approvals?.overdue_count" class="text-12px text-[#e15555]">含超期未审 · 请优先处理</p>
<p v-else class="text-12px">属地变更审批</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
@click="jumpTo('changeledger')"
>
<p class="text-12px font-600">重要变更未关闭</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.reject_count || 0"
:end-value="homeData?.important_open?.total || 0"
class="text-26px font-600"
/>
</div>
@@ -221,7 +222,7 @@ onUnmounted(() => {
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.near_overdue_total || 0"
:end-value="homeData?.rejected_open?.total || 0"
class="text-26px font-600 text-[#333]"
/>
</div>
@@ -232,13 +233,13 @@ onUnmounted(() => {
<div
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
@click="jumpTo('changeledger')"
>
<p class="text-12px font-600">超期未关闭</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.overdue_total || 0"
:end-value="homeData?.overdue_open?.total || 0"
class="text-26px font-600"
/>
</div>
@@ -258,19 +259,19 @@ onUnmounted(() => {
<p class="text-13px font-700 text-#64749a">审批待办</p>
<p class="text-11px text-#94a3b8 mt-2px">属地变更审批</p>
</div>
<NButton v-if="homeData?.my_changes_progress?.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" />
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id" @click="openDetail(row)"
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)] hover:bg-[#EAF0F9]/40"
<template v-if="homeData?.todo_approvals?.total > 0">
<div v-for="row in homeData?.todo_approvals?.items?.slice(0, 3) || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
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">
@@ -298,25 +299,18 @@ onUnmounted(() => {
<NTag class="text-[11px]" v-if="row.duration_type===2" type="warning" size="small">临时</NTag>
<NTag class="text-[11px]" v-else type="info" size="small">永久</NTag>
<span class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 3 天</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 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>
<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.step_name}}</p>
<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>
@@ -335,18 +329,18 @@ onUnmounted(() => {
<p class="text-13px font-700 text-#64749a">未关闭变更进度一览</p>
<p class="text-11px text-#94a3b8 mt-2px">本车间 · 全部未关闭变更</p>
</div>
<NButton v-if="homeData?.my_changes_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('changeledger')">
<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?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id" @click="openDetail(row)"
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)] hover:bg-[#EAF0F9]/40"
<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': themeStore.themeColor,
'--hover-border': getColorWithOpacity(themeStore.themeColor, 0.25),
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
@@ -372,14 +366,28 @@ onUnmounted(() => {
>{{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>张工艺</span>
<span>{{row.change_no}}</span>
<span>{{row.org_name}}</span>
<span>{{row.applicant_name}}</span>
</div>
<!-- 审批流程 -->
<!-- <div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人：{{row.step_name}}</p>
<span v-if="row.apply_time">{{ row.apply_time?.slice(0, 10) }}</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>
@@ -398,32 +406,36 @@ onUnmounted(() => {
</div>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id"
class="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)] hover:bg-[#EAF0F9]/40"
<template v-if="homeData?.temp_after_use?.total > 0">
<div v-for="row in homeData?.temp_after_use?.items?.slice(0, 3) || []" :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',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
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 size="small" type="error">已超期4天</NTag>
<NButton size="tiny">去催办</NButton>
<NButton size="tiny">查看</NButton>
<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 font-mono text-[11px] text-slate-400">
<div class="mt-1 flex items-center gap-2 text-[11px] text-slate-400">
<span>{{ row.change_no }}</span>
<span>审判中</span>
<!-- <span>尚未投用</span>
<span>原计划恢复 2026-08-01</span> -->
<span>2026-07-16 08:30 投用</span>
<span>计划恢复 2026-08-03（已延期 1 次）</span>
</div>
<div class="mt-0.5 truncate text-[11px]" :style="{ color: themeStore.otherColor.error }">
<p>每日 08:00 提醒申请人与属地负责人，已升级上报分管领导</p>
<!-- 状态 -->
<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>
@@ -433,6 +445,53 @@ onUnmounted(() => {
</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)]"
@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>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
</NCard>
</NGi>
<!-- 右侧 -->
<NGi span="24 s:24 m:24 l:8">
@@ -452,41 +511,78 @@ onUnmounted(() => {
<div class="flex flex-col gap-3 mt-3">
<div class="flex items-end justify-between">
<div>
<span class="text-3xl font-extrabold text-slate-800">14</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>
</div>
<span class="text-[11px] text-slate-400">状态构成占比条</span>
</div>
<div class="flex h-3 w-full overflow-hidden rounded-full bg-slate-100">
<div title="已关闭 8 起" :style="{width: '57.1429%', background: themeStore.themeColor}"></div>
<div title="审批中 3 起" :style="{width: '21.4286%', background: themeStore.otherColor.warning}"></div>
<div title="实施中 2 起" :style="{width: '14.2857%', background: themeStore.otherColor.success}"></div>
<div title="超期未关闭 1 起" :style="{width: '7.14286%', background: themeStore.otherColor.error}"></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?.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">8</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">3</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">2</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 }">1</span>
<span class="ml-auto text-sm font-bold" :style="{ color: themeStore.otherColor.error }">{{ homeData?.dept_summary?.overdue || 0 }}</span>
</div>
</div>
</div>
</NCard>
<!-- 资料管理 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">资料管理</p>
</div>
<div
class="space-y-2"
:style="{
'--hover-border': getColorWithOpacity(themeStore.themeColor, 0.25),
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<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)]"
@click="jumpTo('docs_archives')"
>
<Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" />
<div class="min-w-0 flex-1">
<p class="truncate text-xs font-semibold text-slate-700">本车间操作规程</p>
<p class="truncate text-[11px] text-slate-400">现行受控版本查阅</p>
</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)]"
@click="jumpTo('docs_archives')"
>
<Icon icon="material-symbols:folder-open-outline" class="size-16px" :style="{ color: themeStore.themeColor }" />
<div class="min-w-0 flex-1">
<p class="truncate text-xs font-semibold text-slate-700">本车间变更档案</p>
<p class="truncate text-[11px] text-slate-400">历史变更记录与验收材料</p>
</div>
<Icon icon="formkit:right" class="size-14px text-slate-400" />
</div>
</div>
</NCard>
<!-- 近一年验收结论占比 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
<div class="flex items-center mb-3 gap-2">
@@ -494,10 +590,10 @@ onUnmounted(() => {
<p class="text-13px font-700 text-#64749a">近一年验收结论占比</p>
<p class="text-11px text-#94a3b8">本车间 · 已验收变更</p>
</div>
<RingChart :data="DEPT_ACCEPT2" :colors="ACCEPT_COLORS2" />
<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">
<span class="text-[11px] text-slate-400">投入合计（变更材料和实施费）</span>
<span class="text-xs font-bold" :style="{ color: themeStore.themeColor }">86.4 万元</span>
<span class="text-xs font-bold" :style="{ color: themeStore.themeColor }">{{homeData?.accept_conclusion?.total_fee || 0}} 万元</span>
</div>
</NCard>
</NGi>