全工厂统计概览静态页面完成

src/locales/langs/zh-cn.ts

@@ -252,7 +252,8 @@ const local: App.I18n.Schema = {
     home_datachangecenter: '变更数据中心',
     home_closeconfirm: '关闭确认',
     report: '统计报表',
-    signstatistics: '质量会签统计'
+    signstatistics: '质量会签统计',
+    factoryoverview: '全工厂统计概览'
   },
   form: {
     required: '不能为空',

src/router/elegant/imports.ts

@@ -23,6 +23,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   changestatistics: () => import("@/views/changeStatistics/index.vue"),
   docs_archives: () => import("@/views/docs/archives/index.vue"),
   docs_query: () => import("@/views/docs/query/index.vue"),
+  factoryoverview: () => import("@/views/factoryOverview/index.vue"),
   home_closeconfirm: () => import("@/views/home/closeConfirm/index.vue"),
   home_datachangecenter: () => import("@/views/home/dataChangeCenter/index.vue"),
   home_effect: () => import("@/views/home/effect/index.vue"),

src/router/elegant/routes.ts

@@ -116,6 +116,17 @@ export const generatedRoutes: GeneratedRoute[] = [
       }
     ]
   },
+  {
+    name: 'factoryoverview',
+    path: '/factoryoverview',
+    component: 'layout.base$view.factoryoverview',
+    meta: {
+      title: 'factoryoverview',
+      i18nKey: 'route.factoryoverview',
+      icon: 'ix:barchart',
+      order: 3
+    }
+  },
   {
     name: 'home',
     path: '/home',

src/router/elegant/transform.ts

@@ -173,6 +173,7 @@ const routeMap: RouteMap = {
   "docs": "/docs",
   "docs_archives": "/docs/archives",
   "docs_query": "/docs/query",
+  "factoryoverview": "/factoryoverview",
   "home": "/home",
   "home_closeconfirm": "/home/closeconfirm",
   "home_datachangecenter": "/home/datachangecenter",

src/typings/elegant-router.d.ts

@@ -27,6 +27,7 @@ declare module "@elegant-router/types" {
     "docs": "/docs";
     "docs_archives": "/docs/archives";
     "docs_query": "/docs/query";
+    "factoryoverview": "/factoryoverview";
     "home": "/home";
     "home_closeconfirm": "/home/closeconfirm";
     "home_datachangecenter": "/home/datachangecenter";
@@ -87,6 +88,7 @@ declare module "@elegant-router/types" {
     | "changeledger"
     | "changestatistics"
     | "docs"
+    | "factoryoverview"
     | "home"
     | "login"
     | "report"
@@ -117,6 +119,7 @@ declare module "@elegant-router/types" {
     | "changestatistics"
     | "docs_archives"
     | "docs_query"
+    | "factoryoverview"
     | "home_closeconfirm"
     | "home_datachangecenter"
     | "home_effect"

src/views/factoryOverview/index.vue

@@ -0,0 +1,213 @@
+<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 DEPT_ACCEPT = [
+  { name: "工艺", value: 52 },
+  { name: "设备", value: 49 },
+  { name: "管理", value: 25 },
+];
+const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
+
+const changeData = ref([
+  {
+    name: '2月',
+    value: 42,
+  },
+  {
+    name: '3月',
+    value: 35,
+  },
+  {
+    name: '4月',
+    value: 28,
+  },
+  {
+    name: '5月',
+    value: 12,
+  },
+  {
+    name: '6月',
+    value: 9,
+  },
+  {
+    name: '7月',
+    value: 33,
+  },
+]);
+
+const DEFAULT_EFF = [
+  { pct: 85, label: "按期投用率", c: "#1D4E9C" },
+  { pct: 64, label: "培训按期完成率", c: "#F5A623" },
+  { pct: 25, label: "超期变更占比", c: "#E15555" },
+];
+const DEFAULT_EXPORTS = ["变更数量统计", "变更周期分析", "超期预警报表", "风险分析执行", "PSSR 与验收", "关闭及时率"];
+
+</script>
+
+<template>
+<NSpace vertical :size="16">
+  <!-- 卡片数据 -->
+  <NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor,'--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1)}">
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8]"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">按期关闭率</p>
+        <div class="flex justify-center py-2.5">
+          <NProgress type="circle" :percentage="93.8" :offset-degree="180">
+            <div class="flex flex-col items-center mt-2">
+              <p class="flex items-end text-2xl 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>
+        <p class="text-12px text-center">近一年 · 全厂</p>
+      </div>
+    </NGi>
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8]"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">PSSR 完成率</p>
+        <div class="flex justify-center py-2.5">
+          <NProgress type="circle" :percentage="96" :offset-degree="180" status="success">
+            <div class="flex flex-col items-center mt-2">
+              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
+                96<span class="text-sm font-semibold">%</span>
+              </p>
+              <p class="mt-1 text-[11px] text-slate-400">Excellent</p>
+            </div>
+          </NProgress>
+        </div>
+        <p class="text-12px text-center">近一年 · 全厂</p>
+      </div>
+    </NGi>
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8]"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">验收一次通过率</p>
+        <div class="flex justify-center py-2.5">
+          <NProgress type="circle" :percentage="88" :offset-degree="180" status="warning">
+            <div class="flex flex-col items-center mt-2">
+              <p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
+                88<span class="text-sm font-semibold">%</span>
+              </p>
+              <p class="mt-1 text-[11px] text-slate-400">Fair</p>
+            </div>
+          </NProgress>
+        </div>
+        <p class="text-12px text-center">近一年 · 全厂</p>
+      </div>
+    </NGi>
+    <NGi>
+      <div 
+        class="bg-white px-16px py-12px text-[#94a3b8] flex flex-col justify-center items-center"
+        :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
+      >
+        <p class="text-12px font-600 text-center">平均关闭时长</p>
+        <p class="mt-2 text-[40px] font-bold leading-none text-[#1D2129] text-center">8.2</p>
+        <p class="text-12px text-center mt-1">天 · 优于行业均值</p>
+        <span class="mt-2 rounded-full bg-[var(--theme-bg)] px-2 py-0.5 text-[11px] font-medium text-[var(--theme-color)]">环比 ↓ 0.6 天</span>
+      </div>
+    </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">月度变更数量</p>
+          <div class="py-3 px-4">
+              <ColumnChart :data="changeData" style="height: 220px" />
+          </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%' }">
+          <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" />
+          </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,
+          '--warning-color': themeStore.otherColor.warning,
+          '--error-color': themeStore.otherColor.error,
+        }"
+      >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">变更效率指标</p>
+          <div class="py-3 px-4">
+            <div class="space-y-5">
+              <div v-for="r in DEFAULT_EFF" :key="r.label">
+                <div class="flex items-baseline gap-2">
+                  <span class="text-2xl font-bold text-[#1D2129]">{{ r.pct }}<span class="text-sm font-semibold">%</span></span>
+                  <span class="text-xs text-slate-400">{{ r.label }}</span>
+                </div>
+                <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-100">
+                  <div v-if="r.label==='按期投用率'" class="h-full rounded-full bg-[var(--theme-color)]" :style="{ width: `${r.pct}%` }"></div>
+                  <div v-if="r.label==='培训按期完成率'" class="h-full rounded-full bg-[var(--warning-color)]" :style="{ width: `${r.pct}%` }"></div>
+                  <div v-if="r.label==='超期变更占比'" class="h-full rounded-full bg-[var(--error-color)]" :style="{ width: `${r.pct}%` }"></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:16">
+      <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">
+              <ColumnChart :data="changeData" style="height: 220px" />
+          </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,
+          '--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1),
+        }"
+      >
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">报表导出</p>
+          <div class="py-3 px-4">
+            <div class="grid grid-cols-2 gap-2">
+              <div v-for="r in DEFAULT_EXPORTS" :key="r" @click="message.success(`演示：${r}已导出 Excel`)"
+                class="cursor-pointer flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm hover:border-[var(--theme-color)] hover:bg-[var(--theme-bg)]">
+                <Icon icon="akar-icons:file" class="size-16px text-slate-400" />
+                {{ r }}
+              </div>
+            </div>
+          </div>
+      </NCard>
+    </NGi>
+  </NGrid>
+</NSpace>
+</template>
+
+<style scoped></style>

src/views/factoryOverview/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>

src/views/factoryOverview/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>