系统管理员首页完成

src/views/professionalStatistics/index.vue

@@ -1,28 +1,14 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useAppStore } from '@/store/modules/app';
+import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
 import { getColorWithOpacity } from '@/utils/common';
 import RingChart from './modules/ringChart.vue';
+import { specialtyStatisticsApi } from '@/service/api/statistics';
 
-const appStore = useAppStore();
 const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));
-
-const profEff = ref<{d: string, days: number, me?: boolean, target?: boolean}[]>([
-  { d: `陈质量（本人）`, days: 1.8, me: true },
-  { d: "仪表专业均值", days: 2.1, me: false },
-  { d: "设备专业均值", days: 2.2, me: false },
-  { d: "工艺专业均值", days: 2.6, me: false },
-  { d: "考核目标", days: 2.5, me: false, target: true },
-]);
-const DEPT_ACCEPT = [
-  { name: "工艺", value: 52 },
-  { name: "设备", value: 49 },
-  { name: "管理", value: 25 },
-];
-const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
+const { routerPushByKey } = useRouterPush();
 
 const profHighRisk = [
   { id: "MOC-2026-R01-0035", status: '审批中', title: 'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）' },
@@ -30,12 +16,37 @@ const profHighRisk = [
   { id: "MOC-2026-R01-0037", status: '实施中', title: '原料环己烷供应商变更（新增 B 供应商）' },
 ];
 
+const loading = ref<boolean>(false);
+const homeData = ref<any>(null);
+
+// 跳转页面
+const jumpTo = (key: string) => {
+  routerPushByKey(key as any);
+}
+
+// 获取数据
+const getData = async () => {
+  loading.value = true;
+  const {data,error} = await specialtyStatisticsApi({
+    from: null,
+    to: null,
+  });
+  if(!error){
+    homeData.value = data;
+    console.log(data);
+  }
+  loading.value = false;
+}
+
+onMounted(() => {
+  getData();
+});
 </script>
 
 <template>
 <NSpace vertical :size="16">
     <!-- 卡片数据 -->
-    <NGrid cols="s:1 m:5 l:5" responsive="screen" :x-gap="gap" :y-gap="16" 
+    <NGrid cols="s:1 m:5 l:5" responsive="screen" :x-gap="16" :y-gap="16" 
         :style="{
             '--theme-color': themeStore.themeColor,
             '--success-color': themeStore.otherColor.success,
@@ -104,7 +115,7 @@ const profHighRisk = [
               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">口径：HAZOP / JSA 分析组成员（选择式）记录</p>
+          <p class="text-12px">口径：HAZOP / FMEA 分析组成员（选择式）记录</p>
         </div>
       </NGi>
       <NGi>
@@ -125,7 +136,7 @@ const profHighRisk = [
       </NGi>
     </NGrid>
 
-    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
+    <NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
       <NGi span="24 s:24 m:24 l:8">
         <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
           :style="{ 
@@ -143,13 +154,23 @@ const profHighRisk = [
           <p class=" text-base font-semibold border-b border-slate-100 p-3">会签效率对比（考核 · 汇报）</p>
           <div class="py-3 px-4">
             <div class="space-y-3">
-                <div v-for="e in profEff" :key="e.d">
+                <div v-for="e in homeData?.approver_time || []" :key="e">
                     <div class="mb-1 flex items-center justify-between text-xs">
-                        <span :class="e.me ? 'font-semibold text-[var(--theme-color)]' : 'text-slate-600'">{{ e.d }}</span>
-                        <span :class="e.target ? 'text-slate-400' : e.days > 2.5 ? 'font-medium text-[var(--error-color)]' : 'text-slate-500'">{{ e.days }} 天{{ e.target ? "（标线）" : "" }}</span>
+                        <span class="text-slate-600">{{ e.user_name }}{{e.step_name?'（'+e.step_name+'）':''}}</span>
+                        <span :class="e.avg_days > 2.5 ? 'font-medium text-[var(--error-color)]' : 'text-slate-500'">{{ e.avg_days }} 天</span>
                     </div>
                     <div class="h-2 overflow-hidden rounded-full bg-slate-100">
-                        <div class="h-full rounded-full" :class="e.target ? 'bg-slate-300' : e.me ? 'bg-[var(--theme-color)]' : e.days > 2.5 ? 'bg-[var(--error-color)]' : 'bg-[#6E93C6]'" :style="{ width: `${Math.min(100, (e.days / 4) * 100)}%` }" />
+                        <div class="h-full rounded-full" :class="e.avg_days > 2.5 ? 'bg-[var(--error-color)]' : 'bg-[var(--theme-color)]'" :style="{ width: `${Math.min(100, (e.avg_days / e.total) * 100)}%` }"></div>
+                    </div>
+                </div>
+                <p v-if="homeData?.approver_time?.length===0" class="text-xs text-slate-400 text-center py-3">暂无数据</p>
+                <div>
+                    <div class="mb-1 flex items-center justify-between text-xs">
+                        <span class="text-slate-600">考核目标</span>
+                        <span class="text-slate-500">2.5 天（标线）</span>
+                    </div>
+                    <div class="h-2 overflow-hidden rounded-full bg-slate-100">
+                        <div class="h-full rounded-full bg-slate-300" :style="{ width: `${Math.min(100, (2.5 / 2.5) * 100)}%` }"></div>
                     </div>
                 </div>
                 <p class="text-[11px] text-slate-400">考核数据来源：节点签收 → 签出时长自动统计；连续两月超标将纳入绩效面谈</p>
@@ -161,7 +182,7 @@ const profHighRisk = [
         <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">本专业变更类型分布（近一年）</p>
             <div class="py-3 px-4">
-                <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+                <RingChart v-if="homeData" :data="homeData?.type_dist || []" />
             </div>
         </NCard>
       </NGi>
@@ -169,16 +190,17 @@ const profHighRisk = [
         <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">高风险在办（直达风险分析）</p>
             <div class="py-3 px-4">
-                <div class="space-y-2 pt-1">
-                    <div v-for="c in profHighRisk" :key="c.id" @click="emit('go', 'risk')" class="cursor-pointer flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left hover:border-red-300 hover:bg-red-50/30">
+                <div v-if="profHighRisk.length" class="space-y-2 pt-1">
+                    <div v-for="c in profHighRisk" :key="c.id" @click="jumpTo('my_highrisk')" class="cursor-pointer flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left hover:border-red-300 hover:bg-red-50/30">
                         <span class="min-w-0 flex-1">
                         <span class="block truncate text-sm font-medium text-slate-800">{{ c.title }}</span>
                         <span class="text-[11px] text-slate-400">{{ c.id }} · {{ c.status }}</span>
                         </span>
-                        <ChevronRight class="h-3.5 w-3.5 shrink-0 text-slate-300" />
+                        <Icon icon="formkit:right" class="size-14px text-slate-300" />
                     </div>
                     <p class="text-[11px] text-slate-400">更多高风险场景与分析记录见「高风险」页</p>
                 </div>
+                <p v-else class="text-center text-xs text-slate-400">暂无高风险在办</p>
             </div>
         </NCard>
       </NGi>