diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 2519eb8..082066d 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -255,6 +255,7 @@ const local: App.I18n.Schema = {
     signstatistics: '质量会签统计',
     professionalstatistics: '本专业变更统计',
     factoryoverview: '全工厂统计概览',
+    workshopstatistics: '本车间变更统计',
     systemmanage_setting: '系统配置',
   },
   form: {
diff --git a/src/router/elegant/imports.ts b/src/router/elegant/imports.ts
index 679e18d..e9988ee 100644
--- a/src/router/elegant/imports.ts
+++ b/src/router/elegant/imports.ts
@@ -47,4 +47,5 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   systemmanage_setting: () => import("@/views/systemManage/setting/index.vue"),
   systemmanage_template: () => import("@/views/systemManage/template/index.vue"),
   systemmanage_user: () => import("@/views/systemManage/user/index.vue"),
+  workshopstatistics: () => import("@/views/workshopStatistics/index.vue"),
 };
diff --git a/src/router/elegant/routes.ts b/src/router/elegant/routes.ts
index 9146bb4..33e4048 100644
--- a/src/router/elegant/routes.ts
+++ b/src/router/elegant/routes.ts
@@ -384,5 +384,16 @@ export const generatedRoutes: GeneratedRoute[] = [
         }
       }
     ]
+  },
+  {
+    name: 'workshopstatistics',
+    path: '/workshopstatistics',
+    component: 'layout.base$view.workshopstatistics',
+    meta: {
+      title: '本车间变更统计',
+      icon: 'ix:barchart',
+      order: 3,
+      i18nKey: 'route.workshopstatistics'
+    }
   }
 ];
diff --git a/src/router/elegant/transform.ts b/src/router/elegant/transform.ts
index 56eb71a..457d689 100644
--- a/src/router/elegant/transform.ts
+++ b/src/router/elegant/transform.ts
@@ -198,7 +198,8 @@ const routeMap: RouteMap = {
   "systemmanage_role": "/systemmanage/role",
   "systemmanage_setting": "/systemmanage/setting",
   "systemmanage_template": "/systemmanage/template",
-  "systemmanage_user": "/systemmanage/user"
+  "systemmanage_user": "/systemmanage/user",
+  "workshopstatistics": "/workshopstatistics"
 };
 
 /**
diff --git a/src/typings/elegant-router.d.ts b/src/typings/elegant-router.d.ts
index e3c6ecd..7a54274 100644
--- a/src/typings/elegant-router.d.ts
+++ b/src/typings/elegant-router.d.ts
@@ -53,6 +53,7 @@ declare module "@elegant-router/types" {
     "systemmanage_setting": "/systemmanage/setting";
     "systemmanage_template": "/systemmanage/template";
     "systemmanage_user": "/systemmanage/user";
+    "workshopstatistics": "/workshopstatistics";
   };
 
   /**
@@ -101,6 +102,7 @@ declare module "@elegant-router/types" {
     | "riskstatistics"
     | "signstatistics"
     | "systemmanage"
+    | "workshopstatistics"
   >;
 
   /**
@@ -149,6 +151,7 @@ declare module "@elegant-router/types" {
     | "systemmanage_setting"
     | "systemmanage_template"
     | "systemmanage_user"
+    | "workshopstatistics"
   >;
 
   /**
diff --git a/src/views/home/modules/ringChart.vue b/src/views/home/modules/ringChart.vue
index b95fc98..c5f5968 100644
--- a/src/views/home/modules/ringChart.vue
+++ b/src/views/home/modules/ringChart.vue
@@ -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;
   });
 }
diff --git a/src/views/home/modules/template10.vue b/src/views/home/modules/template10.vue
index 13a36e3..dd4bcda 100644
--- a/src/views/home/modules/template10.vue
+++ b/src/views/home/modules/template10.vue
@@ -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>
diff --git a/src/views/home/modules/template7.vue b/src/views/home/modules/template7.vue
index ff60663..6b79088 100644
--- a/src/views/home/modules/template7.vue
+++ b/src/views/home/modules/template7.vue
@@ -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>
diff --git a/src/views/workshopStatistics/index.vue b/src/views/workshopStatistics/index.vue
new file mode 100644
index 0000000..85f29b1
--- /dev/null
+++ b/src/views/workshopStatistics/index.vue
@@ -0,0 +1,599 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { useAppStore } from '@/store/modules/app';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { getColorWithOpacity } from '@/utils/common';
+import RingChart from './modules/ringChart.vue';
+import ColumnChart from './modules/columnChart.vue';
+
+const appStore = useAppStore();
+const themeStore = useThemeStore();
+const gap = computed(() => (appStore.isMobile ? 0 : 16));
+
+const P_PERIODS = ["近一个月", "近三个月", "近半年", "近一年"];
+const period = ref<(typeof P_PERIODS)[number]>("近一年");
+
+const DEPT_ACCEPT = [
+  { name: "工艺", value: 52 },
+  { name: "设备", value: 49 },
+  { name: "管理", value: 25 },
+];
+const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
+
+const changeData = ref([
+  {
+    name: '一车间',
+    value: 42,
+  },
+  {
+    name: '二车间',
+    value: 35,
+  },
+  {
+    name: '三车间',
+    value: 28,
+  },
+  {
+    name: '供应部',
+    value: 12,
+  },
+  {
+    name: '质量部',
+    value: 9,
+  },
+]);
+const ADM_ACCEPT_DETAIL = [
+    { id: "MOC-2026-R01-0028", title: "成品包装规格调整", dept: "一车间", applyDate: "2026-02-20", useTime: "2026-03-15", acceptDate: "2026-04-10", cost: 3.2, result: "完全达到" },
+    { id: "MOC-2026-R01-0019", title: "R-201 搅拌密封改造", dept: "一车间", applyDate: "2026-03-18", useTime: "2026-04-12", acceptDate: "2026-05-20", cost: 6.8, result: "完全达到" },
+    { id: "MOC-2026-R01-0022", title: "循环水加药泵冲程临时调整", dept: "一车间", applyDate: "2026-04-25", useTime: "2026-05-18", acceptDate: "2026-06-30", cost: 1.5, result: "基本达到" },
+    { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", dept: "二车间", applyDate: "2026-06-30", useTime: "2026-07-24", acceptDate: "2026-08-02", cost: 4.6, result: "基本达到" },
+    { id: "MOC-2026-R03-0040", title: "原料环己烷供应商变更", dept: "供应部", applyDate: "2026-07-10", useTime: "2026-08-01", acceptDate: "2026-08-04", cost: 2.1, result: "完全达到" },
+];
+const admOpenStages = ref<{ name: string, n: number }[]>([
+    { name: "审批中（含会签）", n: 5 },
+    { name: "已批准待投用", n: 2 },
+    { name: "待验收", n: 0 },
+    { name: "待关闭", n: 1 },
+]);
+
+const EFFICIENCY_DATA = [
+  { d: "一车间", days: 6.2 }, { d: "二车间", days: 7.8 }, { d: "三车间", days: 9.4 }, { d: "供应部", days: 5.1 },
+];
+const ADM_PERSON_EFF = [
+  { p: "李主任", node: "部门审核", avg: 1.2, max: 2.5, onTime: 96 },
+  { p: "王仪表", node: "专业会签（仪表）", avg: 1.8, max: 3.0, onTime: 92 },
+  { p: "周设备", node: "专业会签（设备）", avg: 2.6, max: 4.1, onTime: 85 },
+  { p: "陈质量", node: "质量会签", avg: 1.6, max: 2.4, onTime: 95 },
+  { p: "王海燕", node: "安全审查", avg: 2.1, max: 3.5, onTime: 90 },
+  { p: "刘副总", node: "最终批准", avg: 1.5, max: 2.8, onTime: 94 },
+];
+const ADM_TEMP_DISP = [
+  { name: "到期恢复", value: 8, c: "#1D4E9C", note: "恢复原状并验收关闭" },
+  { name: "办理延期", value: 5, c: "#F5A623", note: "均符合「至多延期 1 次」" },
+  { name: "转为永久", value: 2, c: "#7CC242", note: "补办永久变更审批" },
+  { name: "超期未处理", value: 3, c: "#E15555", note: "系统已推送超期提醒至申请人" },
+];
+const ADM_REJECT_REASONS = [
+  { reason: "变更前后对比描述不完整 / 缺少核算数据", n: 4 },
+  { reason: "风险分析覆盖不足（情景缺失）", n: 3 },
+  { reason: "连带变更识别遗漏", n: 3 },
+  { reason: "所需材料不齐全", n: 2 },
+  { reason: "变更等级判定偏低", n: 2 },
+];
+const ADM_ARCHIVE_GAP = [
+  { item: "培训签到表", n: 3 }, { item: "PSSR 确认表", n: 2 }, { item: "变更验收单", n: 1 },
+];
+const ADM_ARCHIVE_TAGS = [
+  { k: "资料齐全", n: 76, c: "border-emerald-200 bg-emerald-50 text-emerald-700" },
+  { k: "缺培训签到", n: 3, c: "border-amber-200 bg-amber-50 text-amber-700" },
+  { k: "缺PSSR表", n: 2, c: "border-amber-200 bg-amber-50 text-amber-700" },
+  { k: "缺验收单", n: 1, c: "border-red-200 bg-red-50 text-red-700" },
+];
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- 统计报表 -->
+    <NCard :bordered="false" size="small" :style="{borderRadius: themeStore.themeRadius + 'px'}">
+      <div class="flex flex-wrap items-center justify-between">
+        <div class="flex items-center gap-1.5 text-sm font-semibold text-slate-700">
+            <span>统计中心</span>   
+            <span class="text-xs font-normal text-slate-400">变更归口管理视角 · 全厂口径</span>
+        </div>
+        <div class="flex flex-wrap items-center gap-1.5 min-h-28px">
+            <NButton size="tiny" round v-for="p in P_PERIODS" :key="p" @click="period = p"
+                :ghost="period === p ? false : true"
+                :type="period === p ? 'primary' : 'default'"
+            >{{ p }}</NButton>
+            <NButton size="small" class="text-xs ml-1">
+                <Icon icon="material-symbols:download" class="size-14px mr-1" />导出
+            </NButton>
+        </div>
+      </div>
+    </NCard>
+    <!-- 卡片数据 -->
+    <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor}">
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">变更总数</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="126"
+              class="text-24px font-600 text-[var(--theme-color)]"
+            />
+          </div>
+          <p class="text-12px">{{period}} · 全厂</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">重要变更</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="18"
+              class="text-26px font-600 text-[var(--theme-color)]"
+            />
+          </div>
+          <p class="text-12px">占比 14%</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">变更费用合计</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="86.4"
+              :decimals="1"
+              class="text-26px font-600 text-[var(--theme-color)]"
+            /><p class="text-26px font-600 text-[var(--theme-color)]">万</p>
+          </div>
+          <p class="text-12px">验收填报口径</p>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <p class="text-12px font-600">平均审批通过时长</p>
+          <div class="flex items-center">
+            <CountTo
+              :start-value="0"
+              :end-value="58"
+              class="text-26px font-600 text-[var(--theme-color)]"
+            /><p class="text-26px font-600 text-[var(--theme-color)]">%</p>
+          </div>
+          <p class="text-12px">验收结论口径</p>
+        </div>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:14">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">各车间变更数量（{{period}}）</p>
+            <div class="py-3 px-4">
+                <ColumnChart :data="changeData" style="height: 220px" />
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:10">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更类型分布（{{period}}）</p>
+            <div class="py-3 px-4">
+                <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+            </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">各审批人审批时长（天 · {{period}} · 系统自动采集）</p>
+          <div class="py-3 px-4">
+            <table class="w-full text-xs">
+              <thead>
+                <tr class="border-b text-left text-slate-500">
+                  <th class="py-2 font-semibold">审批人 / 节点</th>
+                  <th class="w-[50px] py-2 text-right font-semibold">平均时长</th>
+                  <th class="w-[60px] py-2 text-right font-semibold">最长时长</th>
+                  <th class="w-[130px] py-2 font-semibold">及时率（≤2天）</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="r in ADM_PERSON_EFF" :key="r.p" class="border-b last:border-0">
+                  <td class="py-2">
+                    <p class="text-xs font-medium text-slate-800">{{ r.p }}</p>
+                    <p class="text-[11px] text-slate-400">{{ r.node }}</p>
+                  </td>
+                  <td class="py-2 text-right text-xs font-bold text-slate-800">{{ r.avg.toFixed(1) }}</td>
+                  <td class="py-2 text-right text-xs text-slate-500">{{ r.max.toFixed(1) }}</td>
+                  <td class="py-2">
+                    <div class="flex items-center gap-2">
+                      <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
+                        <div class="h-full rounded-full" :class="r.onTime >= 90 ? 'bg-[var(--success-color)]' : 'bg-[var(--warning-color)]'" :style="{ width: `${r.onTime}%` }" />
+                      </div>
+                      <span class="text-[11px] text-slate-500">{{ r.onTime }}%</span>
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </NCard>
+        
+      </NGi>
+      <NGi span="24 s:24 m:24 l:16">
+        <NCard 
+            :bordered="true" 
+            size="small" 
+            :content-style="{padding: 0}" 
+            :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--theme-color': themeStore.themeColor,
+                '--error-color': themeStore.otherColor.error,
+                '--warning-color': themeStore.otherColor.warning,
+                '--success-color': themeStore.otherColor.success,
+                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            }"
+        >
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更是否达到预期效果及费用（{{period}}）</p>
+            <div class="py-3 px-4">
+                <div class="space-y-2.5">
+                    <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
+                            <span class="h-2 w-2 rounded-full bg-[var(--theme-color)]"></span>
+                            完全达到 73
+                        </div>
+                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
+                            <span class="h-2 w-2 rounded-full bg-[var(--success-color)]"></span>
+                            基本达到 44
+                        </div>
+                        <div class="flex items-center gap-1 text-[11px] text-slate-500">
+                            <span class="h-2 w-2 rounded-full bg-[var(--error-color)]"></span>
+                            未达到 9
+                        </div>
+                        <span class="ml-auto text-[11px] text-slate-500">费用合计 <b class="text-[var(--theme-color)]">86.4 万元</b></span>
+                    </div>
+                    <div class="overflow-x-auto rounded-lg border">
+                    <div class="min-w-[680px]">
+                        <div class="flex items-center gap-3 border-b bg-slate-50 px-3 py-1.5 text-[11px] font-semibold text-slate-500">
+                        <span class="min-w-0 flex-1">验收明细 · 变更名称 / 编号 / 部门</span>
+                        <span class="w-[84px] shrink-0">申请日期</span>
+                        <span class="w-[84px] shrink-0">投用日期</span>
+                        <span class="w-[84px] shrink-0">验收日期</span>
+                        <span class="w-[68px] shrink-0 text-right">费用（万元）</span>
+                        <span class="w-[76px] shrink-0 text-center">验收结论</span>
+                        <span class="w-[52px] shrink-0 text-right">操作</span>
+                        </div>
+                        <div class="divide-y">
+                        <div v-for="r in ADM_ACCEPT_DETAIL" :key="r.id" class="flex items-center gap-3 px-3 py-2 transition hover:bg-[#EAF0F9]/40">
+                            <span class="min-w-0 flex-1">
+                                <span class="block truncate text-xs font-medium text-slate-800">{{ r.title }}</span>
+                                <span class="block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.dept }}</span>
+                            </span>
+                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.applyDate }}</span>
+                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span>
+                            <span class="w-[84px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span>
+                            <span class="w-[68px] shrink-0 text-right text-xs font-bold text-slate-800">{{ r.cost.toFixed(1) }}</span>
+                            <span class="w-[76px] shrink-0 text-center">
+                                <NTag v-if="r.result==='完全达到'" size="small" type="success">{{ r.result }}</NTag>
+                                <NTag v-if="r.result==='基本达到'" size="small" type="info">{{ r.result }}</NTag>
+                                <NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag>
+                            </span>
+                            <span class="w-[52px] shrink-0 text-right">
+                                <NButton size="small" class="text-[11px]" @click="message.info(`演示：打开 ${r.id} 验收详情（含费用明细与运行数据）`)">查看</NButton>
+                            </span>
+                        </div>
+                        </div>
+                    </div>
+                    </div>
+                    <div class="text-[11px] text-slate-400">明细为部分演示数据 · 全量见变更台账筛选「已关闭」</div>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard 
+            :bordered="true" 
+            size="small" 
+            :content-style="{padding: 0}" 
+            :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--error-color': themeStore.otherColor.error,
+                '--warning-color': themeStore.otherColor.warning,
+                '--success-color': themeStore.otherColor.success,
+                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            }"
+        >
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">变更带来的风险增量及管控（{{period}}）</p>
+            <div class="py-3 px-4">
+                <div class="space-y-3">
+                    <div class="grid grid-cols-2 gap-3">
+                    <div class="rounded-lg border border-[var(--error-color)] bg-[var(--error-bg)] px-3 py-2.5">
+                        <div class="text-[11px] text-slate-500">新增固有风险项</div>
+                        <div class="mt-1 text-sm font-bold text-slate-800">高 <b class="text-[var(--error-color)]">7</b> · 中 <b class="text-[var(--warning-color)]">21</b></div>
+                    </div>
+                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2.5">
+                        <div class="text-[11px] text-slate-500">剩余风险项（管控中）</div>
+                        <div class="mt-1 text-sm font-bold text-slate-800">高 <b class="text-[var(--error-color)]">2</b> · 中 <b class="text-[var(--warning-color)]">9</b></div>
+                    </div>
+                    </div>
+                    <div>
+                    <div class="flex items-center justify-between text-xs text-slate-500">
+                        <span>管控措施落实率</span><b class="text-[var(--success-color)]">92%</b>
+                    </div>
+                    <div class="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
+                        <div class="h-full rounded-full bg-[var(--success-color)]" :style="{ width: `92%` }"></div>
+                    </div>
+                    </div>
+                    <div class="text-[11px] text-slate-400">口径：风险分析记录表识别的新增固有高/中风险项，与验收时剩余风险项对比；剩余高风险项均挂接管控措施并跟踪落实</div>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+            :style="{ 
+                borderRadius: themeStore.themeRadius + 'px', 
+                height: '100%',
+                '--theme-color': themeStore.themeColor,
+                '--error-color': themeStore.otherColor.error,
+                '--warning-color': themeStore.otherColor.warning,
+                '--success-color': themeStore.otherColor.success,
+                '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+                '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+                '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+            }"
+        >
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">当前未关闭变更（{{period}}）</p>
+            <div class="py-3 px-4">
+                <div class="space-y-3">
+                    <div class="flex items-end gap-2">
+                    <span class="text-3xl font-extrabold leading-none text-[var(--theme-color)]">8</span>
+                    <span class="pb-0.5 text-[11px] text-slate-400">起 · 实时台账口径</span>
+                    </div>
+                    <div class="flex flex-wrap gap-1.5">
+                        <span v-for="s in admOpenStages" :key="s.name" class="rounded-md border border-[var(--theme-color)] bg-[var(--theme-bg)] px-2 py-0.5 text-[11px] text-[var(--theme-color)]">{{ s.name }} <b>{{ s.n }}</b></span>
+                    </div>
+                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2 text-[11px] text-[var(--warning-color)]">
+                    临时变更临期 <b>1</b> 起 · 已到期未处置 <b class="text-[var(--error-color)]">1</b> 起（临期提醒天数可在通知设置调整）
+                    </div>
+                    <NButton size="small" ghost type="primary" block class="text-xs" @click="emit('go', 'ledger')">
+                      进入变更台账<Icon icon="formkit:right" class="size-12px" />
+                    </NButton>
+                </div>
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">驳回的变更申请（{{period}}）</p>
+          <div class="py-3 px-4">
+            <div class="space-y-3">
+              <div class="flex items-end gap-2">
+                <span class="text-3xl font-extrabold leading-none text-[var(--error-color)]">14</span>
+                <span class="pb-0.5 text-[11px] text-slate-400">起 · 驳回率 11.1%</span>
+              </div>
+              <div class="rounded-lg border px-3 py-2.5 text-[11px] text-slate-500">
+                驳回后修改重报通过率 <b class="text-[var(--success-color)]">78.6%</b>
+                <div class="mt-0.5 text-slate-400">驳回均留痕并附带理由，申请人可「修改重报」</div>
+              </div>
+              <NButton size="small" ghost type="primary" block class="text-xs" @click="emit('go', 'ledger')">
+                查看驳回单<Icon icon="formkit:right" class="size-12px" />
+              </NButton>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
+            <p class=" text-base font-semibold border-b border-slate-100 p-3">各部门审批时长（天 · {{period}}）</p>
+            <div class="py-3 px-4">
+              <div class="space-y-3">
+                <div v-for="e in EFFICIENCY_DATA" :key="e.d" class="flex items-center gap-3">
+                  <span class="w-14 shrink-0 text-xs text-slate-600">{{ e.d }}</span>
+                  <NProgress
+                    type="line"
+                    :percentage="(e.days / 10) * 100"
+                    :height="15"
+                    :border-radius="4"
+                    :fill-border-radius="4"
+                  >
+                    <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ e.days }} 天</span>
+                  </NProgress>
+                </div>
+              </div>
+            </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">临时变更后续处置方式（{{period}}）</p>
+          <div class="py-3 px-4">
+            <div class="space-y-2.5">
+              <div v-for="t in ADM_TEMP_DISP" :key="t.name" class="rounded-lg border px-3 py-2.5">
+                <div class="flex items-center gap-1">
+                  <div class="flex items-center gap-1">
+                    <span v-if="t.name==='到期恢复'" class="h-2.5 w-2.5 rounded-sm bg-[var(--theme-color)]"></span>
+                    <span v-if="t.name==='办理延期'" class="h-2.5 w-2.5 rounded-sm bg-[var(--warning-color)]"></span>
+                    <span v-if="t.name==='转为永久'" class="h-2.5 w-2.5 rounded-sm bg-[var(--success-color)]"></span>
+                    <span v-if="t.name==='超期未处理'" class="h-2.5 w-2.5 rounded-sm bg-[var(--error-color)]"></span>
+                    <span class="text-xs font-medium text-slate-800">{{ t.name }}</span>
+                    <p class="mt-[1px] pl-1 text-[11px] text-slate-400">{{ t.note }}</p>
+                  </div>
+                  <span v-if="t.name==='到期恢复'" class="ml-auto text-sm font-extrabold text-[var(--theme-color)]">{{ t.value }}</span>
+                  <span v-if="t.name==='办理延期'" class="ml-auto text-sm font-extrabold text-[var(--warning-color)]">{{ t.value }}</span>
+                  <span v-if="t.name==='转为永久'" class="ml-auto text-sm font-extrabold text-[var(--success-color)]">{{ t.value }}</span>
+                  <span v-if="t.name==='超期未处理'" class="ml-auto text-sm font-extrabold text-[var(--error-color)]">{{ t.value }}</span>
+                </div>
+              </div>
+              <div class="text-[11px] text-slate-400">处置子单（延期 / 转永久 / 恢复）均走简化审批并留痕，与本统计同源</div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+      <NGi span="24 s:24 m:24 l:8">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--theme-color': themeStore.themeColor,
+            '--error-color': themeStore.otherColor.error,
+            '--warning-color': themeStore.otherColor.warning,
+            '--success-color': themeStore.otherColor.success,
+            '--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
+            '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
+            '--theme-bg': getColorWithOpacity(themeStore.themeColor,0.1),
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">主要驳回理由汇总（{{period}} · 按驳回单数）</p>
+          <div class="py-3 px-4">
+            <div class="space-y-2.5">
+              <div v-for="r in ADM_REJECT_REASONS" :key="r.reason">
+                <div class="flex items-center justify-between text-xs">
+                  <span class="text-slate-600">{{ r.reason }}</span>
+                </div>
+                <NProgress
+                  type="line"
+                  :percentage="(r.n / 10) * 100"
+                >
+                  <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ r.n }} 起</span>
+                </NProgress>
+              </div>
+              <div class="text-[11px] text-slate-400">可用于申请端填报质量改进：TOP2 理由已纳入 AI 预识别检查项</div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+      <NGi span="24 s:24 m:24 l:24">
+        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
+          :style="{ 
+            borderRadius: themeStore.themeRadius + 'px', 
+            height: '100%',
+            '--error-color': themeStore.otherColor.error,
+            '--success-color': themeStore.otherColor.success,
+          }"
+        >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更归档资料情况（{{period}}）</p>
+          <div class="py-3 px-4">
+            <div class="grid gap-4 grid-cols-12">
+              <div class="flex items-center gap-4 col-span-4">
+                <NProgress type="circle" :percentage="93.8" :offset-degree="180">
+                  <div class="flex flex-col items-center mt-2">
+                    <p class="flex text-xl font-bold leading-none text-[#1D2129]">
+                      93.8<span class="text-sm font-semibold">%</span>
+                    </p>
+                    <p class="mt-1 text-[11px] text-slate-400">Good</p>
+                  </div>
+                </NProgress>
+                <div class="space-y-1 text-xs text-slate-500">
+                  <div>应归档 <b class="text-slate-800">81</b> 起 · 已归档 <b class="text-[var(--success-color)]">76</b> 起</div>
+                  <div>待补齐资料 <b class="text-[var(--error-color)]">5</b> 起（已推送申请人补齐提醒）</div>
+                  <div class="text-[11px] text-slate-400">归档包确认关闭后只读锁定，不可修改删除</div>
+                </div>
+              </div>
+              <div class="col-span-4">
+                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">资料缺项 TOP</p>
+                <div class="mt-2 space-y-2">
+                  <div v-for="g in ADM_ARCHIVE_GAP" :key="g.item" class="flex items-center gap-2 text-xs">
+                    <span class="min-w-0 flex-1 text-slate-600">{{ g.item }}缺失</span>
+                    <div class="w-44">
+                      <NProgress
+                        type="line"
+                        status="warning"
+                        :percentage="(g.n / 5) * 100"
+                      >
+                        <span class="w-12 shrink-0 text-right text-xs font-bold text-slate-800">{{ g.n }}</span>
+                      </NProgress>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-span-4">
+                <p class="text-[11px] font-bold uppercase tracking-[0.14em] text-slate-400">归档构成（已关闭 81 起）</p>
+                <div class="mt-2 flex flex-wrap gap-1.5">
+                  <template v-for="x in ADM_ARCHIVE_TAGS" :key="x.k">
+                    <NTag v-if="x.k==='资料齐全'" size="small" type="success">{{ x.k }} {{ x.n }}</NTag>
+                    <NTag v-if="x.k==='缺培训签到' || x.k==='缺PSSR表'" size="small" type="warning">{{ x.k }} {{ x.n }}</NTag>
+                    <NTag v-if="x.k==='缺验收单'" size="small" type="error">{{ x.k }} {{ x.n }}</NTag>
+                  </template>
+                </div>
+                <NButton size="small" type="primary" ghost block class="mt-3 text-xs" @click="emit('go', 'knowledge')">
+                  进入资料库 / 归档<Icon icon="formkit:right" class="size-12px" />
+                </NButton>
+              </div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+
+</NSpace>
+</template>
+
+<style scoped></style>
diff --git a/src/views/workshopStatistics/modules/columnChart.vue b/src/views/workshopStatistics/modules/columnChart.vue
new file mode 100644
index 0000000..0e5f285
--- /dev/null
+++ b/src/views/workshopStatistics/modules/columnChart.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data: { name: string; value: number; }[]; }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+    tooltip: {
+        trigger: "axis",
+        axisPointer: {
+            type: "shadow",
+            textStyle: {
+                color: "#fff",
+            },
+        },
+   },
+    legend: {
+        show:false,
+        bottom: '20%',
+        left: 'center',
+        icon: 'circle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemStyle: {
+            borderWidth: 0
+        },
+    },
+    grid: {
+        top: "5%",
+        left: "5%",
+        right: "5%",
+        bottom: "11%",
+    },
+    calculable: true,
+    xAxis: [
+        {
+            type: "category",
+            boundaryGap: true, // 新增，固定柱子位置
+            axisLine: {
+                show: false,
+            },
+            axisLabel: {
+                interval: 0,
+            },
+            splitLine: { show: false },
+            axisTick: { show: false },
+            splitArea: { show: false },
+            data: [] as string[],
+        },
+    ],
+    yAxis: [
+        {
+            type: "value",
+            show: false,
+        },
+    ],
+    series: [
+        {
+            type: "bar",
+            barWidth: 45,
+            barGap: "10%",
+            color: "#2080f0",
+            label: { show: true, position: 'top',color: '#333',fontWeight: 'bold' },
+            data: [] as number[],
+        },
+    ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    let allMonth = props.data.map((item:any) => item.name);
+    let values = props.data.map((item:any) => item.value);
+    opts.xAxis[0].data = allMonth;
+    opts.series[0].data = values;
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/workshopStatistics/modules/ringChart.vue b/src/views/workshopStatistics/modules/ringChart.vue
new file mode 100644
index 0000000..e8e23a8
--- /dev/null
+++ b/src/views/workshopStatistics/modules/ringChart.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b}: {c} ({d}%)'
+  },
+  legend: {
+    bottom: 0,
+    left: 'center',
+    icon: 'circle',
+    itemWidth: 10,
+    itemHeight: 10,
+    itemStyle: {
+      borderWidth: 0
+    },
+  },
+  title: {
+    text: `{a|126}\n{b|总数}`,
+    textStyle: {
+      rich: {
+        a: {
+          fontSize: 24,
+          color: '#333',
+          fontWeight: 800,
+          align: 'center',
+          verticalAlign: 'middle',
+        },
+        b: {
+          fontSize: 12,
+          color: '#999',
+          align: 'center',
+          verticalAlign: 'middle',
+          fontWeight: 500,
+          padding: [5, 0, 0, 0]
+        }
+      }
+    },
+    left: 'center',
+    top: '35%',
+  },
+  series: [
+    {
+      type: 'pie',
+      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      radius: ['45%', '65%'],
+      center: ['50%', '45%'],
+      avoidLabelOverlap: false,
+      label: {
+        show: false,
+        position: 'outside',
+        formatter: '{b}\n{c} ({d}%)',
+        fontSize: 12,
+      },
+      labelLine: {
+        show: true,
+        length: 10,
+        length2: 10
+      },
+      data: [] as { name: string; value: number }[]
+    }
+  ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    opts.series[0].data = props.data || [];
+    opts.series[0].color = props.colors || [];
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>