系统管理员首页完成

2026-09-30 10:29:46 +08:00
parent 3f6b16f8be
commit bcfc167905
7 changed files with 333 additions and 277 deletions
@@ -88,3 +88,21 @@ export function departmentStatisticsApi(params: {from: string | null, to: string
    params
  });
 }
+
+// 本专业变更统计
+export function specialtyStatisticsApi(params: {from: string | null, to: string | null}) {
+  return request({
+    url: `/api/reports/dept-stats/specialty-sign`,
+    method: 'get',
+    params
+  });
+}
+
+// 本车间变更统计
+export function deptStatisticsApi(params: {from: string | null, to: string | null}) {
+  return request({
+    url: `/api/reports/dept-stats/dept`,
+    method: 'get',
+    params
+  });
+}
@@ -18,9 +18,7 @@ const homeData = ref<any>(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_approval' && qid){
    routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
  }else if(key==='details_index' && qid){
    routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
@@ -146,10 +144,6 @@ onUnmounted(() => {
                    <p class="text-13px font-700 text-#64749a">待关闭确认</p>
                    <p class="text-11px text-#94a3b8 mt-2px">变更主管部门（归口部门）专责确认 · 系统记录关闭时间</p>
                    </div>
-                    <NButton v-if="homeData?.close_pending?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_closeconfirm')">
-                    关闭管理
-                    <Icon icon="formkit:right" class="size-12px" />
-                    </NButton>
                </div>
                <div class="flex flex-col gap-3">
                    <template v-if="homeData?.close_pending?.total > 0">
@@ -160,16 +154,10 @@ onUnmounted(() => {
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-2">
                                <!-- 状态标签 -->
-                                <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="error">待关闭</NTag>
                                <p class="flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</p>
                                <span v-if="row.status==='CLOSED'" class="text-[11px]" :style="{color: themeStore.otherColor.success}">关闭时间 2026/9/28 14:29:57</span>
-                                <NButton v-if="row.status==='ACCEPTED'" size="small" type="success" class="text-xs">确认关闭</NButton>
+                                <NButton size="small" type="success" class="text-xs" @click="jumpTo('details_approval', row.change_id)">确认关闭</NButton>
                                <NButton size="small" ghost class="text-xs" @click="jumpTo('details_index', row.change_id)">打开变更单</NButton>
                            </div>
                            <div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
@@ -193,14 +181,17 @@ 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?.open_changes?.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="jumpTo('details_index', row.change_id)"
+                    <div class="flex items-center gap-2">
+                        <NTag v-for="item in homeData?.open_changes?.items || []" :key="item.status" size="small" type="primary">{{item.label}}{{item.count}}</NTag>
+                    </div>
+                    <template v-if="homeData?.open_changes?.total > 0">
+                        <div v-for="row in homeData?.open_changes?.rows || []" :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)] hover:bg-[#EAF0F9]/40"
                            :style="{ 
                            borderRadius: themeStore.themeRadius + 'px',
@@ -219,13 +210,14 @@ onUnmounted(() => {
                                    <NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
                                    <NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
                                    <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>
+                                    <NTag v-if="row.overdue_days" size="small" type="error">超期{{row.overdue_days}}天</NTag>
                                    <NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
                                </div>
                                <div class="mt-1 truncate flex items-center gap-2 text-[11px] text-slate-400">
                                    <span>{{ row.change_no }}</span>
-                                    <span>一车间</span>
-                                    <span>张工艺</span>
+                                    <span>{{row.org_name}}</span>
+                                    <span>{{row.applicant_name}}</span>
+                                    <span v-if="row.pending_handlers">当前待办：{{row.pending_handlers}}</span>
                                </div>
                            </div>
                        </div>
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
@@ -102,8 +102,8 @@ onMounted(() => {
 </script>

 <template>
-<NSpace vertical :size="16">
 <NSpin :show="loading" size="small">
+<NSpace vertical :size="16">
    <!-- 我的工作台 -->
    <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
        <div class="flex flex-wrap items-center gap-2">
@@ -315,8 +315,8 @@ onMounted(() => {
        </NCard>
        </NGi>
    </NGrid>
-    </NSpin>
 </NSpace>
+</NSpin>
 </template>

 <style scoped></style>
@@ -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>
@@ -6,7 +6,8 @@ defineOptions({
  name: 'RingChart'
 });

-const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
+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|39}\n{b|本专业变更}`,
+    text: '',
    textStyle: {
      rich: {
        a: {
@@ -50,7 +70,7 @@ const { domRef, updateOptions } = useEcharts(() => ({
  series: [
    {
      type: 'pie',
-      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      color: ["#2080f0", "#7CC242", "#F5A623"],
      radius: ['45%', '65%'],
      center: ['50%', '45%'],
      avoidLabelOverlap: false,
@@ -72,8 +92,14 @@ const { domRef, updateOptions } = useEcharts(() => ({

 function init() {
  updateOptions(opts => {
-    opts.series[0].data = props.data || [];
-    opts.series[0].color = props.colors || [];
+    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;
  });
 }
@@ -1,15 +1,13 @@
 <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';
+import { deptStatisticsApi } from '@/service/api/statistics';

-const appStore = useAppStore();
 const themeStore = useThemeStore();
-const gap = computed(() => (appStore.isMobile ? 0 : 16));

 const P_PERIODS = ["近一个月", "近三个月", "近半年", "近一年"];
 const period = ref<(typeof P_PERIODS)[number]>("近一年");
@@ -114,7 +112,7 @@ const ADM_ARCHIVE_TAGS = [
      </div>
    </NCard>
    <!-- 卡片数据 -->
-    <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor}">
+    <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="16" :y-gap="16" :style="{'--theme-color': themeStore.themeColor}">
      <NGi>
        <div 
          class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
@@ -182,7 +180,7 @@ const ADM_ARCHIVE_TAGS = [
      </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: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>
@@ -201,7 +199,7 @@ const ADM_ARCHIVE_TAGS = [
      </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="{ 
@@ -324,7 +322,7 @@ const ADM_ARCHIVE_TAGS = [
      </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" 
@@ -434,7 +432,7 @@ const ADM_ARCHIVE_TAGS = [
      </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="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
            <p class=" text-base font-semibold border-b border-slate-100 p-3">各部门审批时长（天 · {{period}}）</p>
@@ -529,7 +527,7 @@ const ADM_ARCHIVE_TAGS = [
      </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:24">
        <NCard :bordered="true" size="small" :content-style="{padding: 0}" 
          :style="{