全工厂统计概览页面完成

src/views/workshopStatistics/index.vue

@@ -1,23 +1,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
 import RingChart from './modules/ringChart.vue';
 import { systemConfigApi } from "@/service/api/system";
 import { deptStatisticsApi } from '@/service/api/statistics';
 
 const themeStore = useThemeStore();
-
-const DEPT_ACCEPT = [
-  { name: "工艺", value: 52 },
-  { name: "设备", value: 49 },
-  { name: "管理", value: 25 },
-];
+const { routerPushByKey } = useRouterPush();
 
 const loading = ref<boolean>(false);
 // 变更临期天数
 const remindDays = ref<number>(0);
 const homeData = ref<any>(null);
 
+// 跳转页面
+const jumpTo = (key: string) => {
+  routerPushByKey(key as any);
+}
+
 // 获取数据
 const getData = async () => {
   loading.value = true;
@@ -27,7 +28,6 @@ const getData = async () => {
   });
   if(!error){
     homeData.value = data;
-    console.log(data);
   }
   loading.value = false;
 }
@@ -204,7 +204,7 @@ onMounted(() => {
                     <span class="ml-auto font-semibold text-slate-600">{{homeData?.kpis?.overdue_total || 0}}</span>
                   </div>
                 </div>
-                <NButton size="small" ghost dashed block class="text-xs text-slate-400">前往变更台账查看处置 →</NButton>
+                <NButton size="small" ghost dashed block class="text-xs text-slate-400" @click="jumpTo('changeledger')">前往变更台账查看处置 →</NButton>
               </div>
             </div>
         </NCard>
@@ -221,7 +221,7 @@ onMounted(() => {
           }"
         >
           <p class=" text-base font-semibold border-b border-slate-100 p-3">变更类型分布（近一年）</p>
-          <RingChart :data="DEPT_ACCEPT" />
+          <RingChart v-if="homeData" :data="homeData?.type_dist || []" />
         </NCard>
         
       </NGi>
@@ -281,9 +281,10 @@ onMounted(() => {
             '--success-color': themeStore.otherColor.success,
           }"
         >
-          <div class="flex items-center justify-between p-3">
-            <p class=" text-base font-semibold border-b border-slate-100">变更投入和效果（近一年 · 已验收变更）</p>
-            <p class="text-[11px] text-slate-400">
+          <div class="flex items-center p-3 border-b border-slate-100">
+            <p class=" text-base font-semibold">变更投入和效果（近一年 · 已验收变更）</p>
+            <p class="text-11px text-slate-400 mt-3px">费用取验收时填报的「变更材料和实施费」；完整明细见操作台「变更投入和效果」</p>
+            <p class="text-[11px] text-slate-400 ml-auto">
               已验收 <b class="text-slate-700">3</b> 起 · 
               投入合计 <b :style="{color:themeStore.themeColor}">11.5</b> 万元 · 
               完全达到率 <b :style="{color:themeStore.otherColor.success}">67%</b>
@@ -293,22 +294,42 @@ onMounted(() => {
             <NTable size="small">
               <thead>
                 <tr>
-                  <td>变更名称 / 编号</td>
-                  <td>申请日期</td>
-                  <td>投用日期</td>
-                  <td>验收日期</td>
-                  <td>费用（万元）</td>
-                  <td>验收结论</td>
+                  <th>变更名称 / 编号</th>
+                  <th>申请日期</th>
+                  <th>投用日期</th>
+                  <th>验收日期</th>
+                  <th>费用（万元）</th>
+                  <th>验收结论</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
-                  <td></td>
-                  <td></td>
-                  <td></td>
-                  <td></td>
-                  <td></td>
                   <td>
+                    <p>氮气管网压力分级调整</p>
+                    <span class="text-11px text-slate-400">MOC-2026-R01-0024</span>
+                  </td>
+                  <td class="text-xs">2026-07-08</td>
+                  <td class="text-xs">2026-07-08</td>
+                  <td class="text-xs">2026-07-08</td>
+                  <td class="text-xs"><span class="font-600">11.5</span></td>
+                  <td>
+                    <NTag size="small" type="success" class="text-xs">完全达到</NTag>
+                    <!-- <NTag v-if="r.result_status===3" size="small" type="success">{{r.result_label}}</NTag>
+                    <NTag v-if="r.result_status===2" size="small" type="warning">{{r.result_label}}</NTag>
+                    <NTag v-if="r.result_status===1" size="small" type="error">{{r.result_label}}</NTag> -->
+                  </td>
+                </tr>
+                <tr>
+                  <td>
+                    <p>氮气管网压力分级调整</p>
+                    <span class="text-11px text-slate-400">MOC-2026-R01-0024</span>
+                  </td>
+                  <td class="text-xs">2026-07-08</td>
+                  <td class="text-xs">2026-07-08</td>
+                  <td class="text-xs">2026-07-08</td>
+                  <td class="text-xs"><span class="font-600">11.5</span></td>
+                  <td>
+                    <NTag size="small" type="success" class="text-xs">完全达到</NTag>
                     <!-- <NTag v-if="r.result_status===3" size="small" type="success">{{r.result_label}}</NTag>
                     <NTag v-if="r.result_status===2" size="small" type="warning">{{r.result_label}}</NTag>
                     <NTag v-if="r.result_status===1" size="small" type="error">{{r.result_label}}</NTag> -->

src/views/workshopStatistics/modules/ringChart.vue

@@ -7,6 +7,7 @@ defineOptions({
 });
 
 const props = defineProps<{ data?: { name: string; value: number }[]; }>();
+const chartData = ref<{ name: string; value: number; }[]>([]);
 
 const { domRef, updateOptions } = useEcharts(() => ({
   tooltip: {
@@ -22,9 +23,28 @@ const { domRef, updateOptions } = useEcharts(() => ({
     itemStyle: {
       borderWidth: 0
     },
+    textStyle: {
+      rich: {
+        name: {
+          padding: [0, 0, 0, 0],
+        },
+        count: {
+          padding: [0, 0, 0, 5],
+          fontWeight: 600,
+        },
+      }
+    },
+    formatter: function (name: string) {
+      var info = chartData.value?.find((item: { name: string }) => item.name === name);
+      if(info){
+        return '{name|'+name+'} {count|'+(info.value)+'}';
+      }else{
+        return name;
+      }
+    }
   },
   title: {
-    text: `{a|126}\n{b|近一年}`,
+    text: '',
     textStyle: {
       rich: {
         a: {
@@ -72,7 +92,14 @@ const { domRef, updateOptions } = useEcharts(() => ({
 
 function init() {
   updateOptions(opts => {
-    opts.series[0].data = props.data || [];
+    const total = props.data?.reduce((sum:number, item:any) => sum + item.count, 0);
+    const result:any = props.data?.map((item:any) => ({
+      name: item.label,
+      value: item.count,
+    }));
+    chartData.value = result || [];
+    opts.title.text = `{a|${total}}\n{b|近一年}`;
+    opts.series[0].data = result || [];
     return opts;
   });
 }