安全与风险统计静态页面完成

2026-08-24 11:47:51 +08:00
parent 5bb87cb87b
commit 1ad34b15a9
9 changed files with 481 additions and 0 deletions
@@ -246,6 +246,7 @@ const local: App.I18n.Schema = {
    systemmanage_role: '角色管理',
    systemmanage_template: '审批模板管理',
    home_pssr: 'PSSR监督',
+    riskstatistics: '安全与风险统计'
  },
  form: {
    required: '不能为空',
@@ -34,6 +34,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  home_processdetail: () => import("@/views/home/processDetail/index.vue"),
  home_pssr: () => import("@/views/home/pssr/index.vue"),
  login: () => import("@/views/login/index.vue"),
+  riskstatistics: () => import("@/views/riskStatistics/index.vue"),
  systemmanage_role: () => import("@/views/systemManage/role/index.vue"),
  systemmanage_template: () => import("@/views/systemManage/template/index.vue"),
  systemmanage_user: () => import("@/views/systemManage/user/index.vue"),
@@ -253,6 +253,17 @@ export const generatedRoutes: GeneratedRoute[] = [
      hideInMenu: true
    }
  },
+  {
+    name: 'riskstatistics',
+    path: '/riskstatistics',
+    component: 'layout.base$view.riskstatistics',
+    meta: {
+      title: 'riskstatistics',
+      i18nKey: 'route.riskstatistics',
+      icon: 'ix:barchart',
+      order: 3
+    }
+  },
  {
    name: 'systemmanage',
    path: '/systemmanage',
@@ -185,6 +185,7 @@ const routeMap: RouteMap = {
  "home_processdetail": "/home/processdetail",
  "home_pssr": "/home/pssr",
  "login": "/login/:module(pwd-login)?",
+  "riskstatistics": "/riskstatistics",
  "systemmanage": "/systemmanage",
  "systemmanage_role": "/systemmanage/role",
  "systemmanage_template": "/systemmanage/template",
@@ -64,6 +64,7 @@ declare module 'vue' {
    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
    NModal: typeof import('naive-ui')['NModal']
    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NProgress: typeof import('naive-ui')['NProgress']
    NRadio: typeof import('naive-ui')['NRadio']
    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
    NScrollbar: typeof import('naive-ui')['NScrollbar']
@@ -148,6 +149,7 @@ declare global {
  const NMessageProvider: typeof import('naive-ui')['NMessageProvider']
  const NModal: typeof import('naive-ui')['NModal']
  const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+  const NProgress: typeof import('naive-ui')['NProgress']
  const NRadio: typeof import('naive-ui')['NRadio']
  const NRadioGroup: typeof import('naive-ui')['NRadioGroup']
  const NScrollbar: typeof import('naive-ui')['NScrollbar']
@@ -39,6 +39,7 @@ declare module "@elegant-router/types" {
    "home_processdetail": "/home/processdetail";
    "home_pssr": "/home/pssr";
    "login": "/login/:module(pwd-login)?";
+    "riskstatistics": "/riskstatistics";
    "systemmanage": "/systemmanage";
    "systemmanage_role": "/systemmanage/role";
    "systemmanage_template": "/systemmanage/template";
@@ -82,6 +83,7 @@ declare module "@elegant-router/types" {
    | "docs"
    | "home"
    | "login"
+    | "riskstatistics"
    | "systemmanage"
  >;

@@ -118,6 +120,7 @@ declare module "@elegant-router/types" {
    | "home_processdetail"
    | "home_pssr"
    | "login"
+    | "riskstatistics"
    | "systemmanage_role"
    | "systemmanage_template"
    | "systemmanage_user"
@@ -0,0 +1,271 @@
+<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 { TEMP_WATCH } from "@/typings/model";
+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 addRisk = ref([
+  {
+    name: '2月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '3月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '4月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '5月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '6月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+  {
+    name: '7月',
+    highRisk: 28,
+    middleRisk: 27,
+  },
+]);
+const RISK_COLORS = ["#f5222d", "#faad14"];
+
+const DEPT_ACCEPT = [
+  { name: "高风险项", value: 1 },
+  { name: "中风险项", value: 6 },
+  { name: "低风险项", value: 12 },
+];
+const ACCEPT_COLORS = ["#f5222d", "#faad14", "#b2bcca"];
+const PSSR_EXEC = [
+  { pct: 94, label: "投用前完成率", detail: "29/31 变更 · 投用时培训 / PSSR 资料已齐", status: "finish" },
+  { pct: 88, label: "行动项按期关闭率", detail: "15/17 项 · 2 项跟进中（风险分析建议措施转入）", status: "close" },
+  { pct: 100, label: "投用后补传率", detail: "0 起 · 投用前未完成而先行投用", status: "fix" },
+];
+const OVERDUE_LIST = [
+  { id: "MOC-2026-R01-0039", title: "V-102 安全阀起跳压力临时调整", stage: "待关闭", days: 4 },
+  { id: "MOC-2026-R02-0031", title: "冷冻盐水泵 P-103 叶轮材质变更", stage: "待验收", days: 7 },
+  { id: "MOC-2026-R01-0029", title: "操作规程修订（夏季工况）", stage: "审批中", days: 3 },
+];
+const SAFETY_EXPORTS = ["高风险变更清单", "新增固有风险项月度表", "剩余风险与措施落实表", "PSSR 执行统计", "超期未关闭清单", "验收一次通过率分析"];
+// 催办
+const handleReminder = (id: string) => {
+  window.$message?.success(`已催办 ${id} 当前节点负责人（系统消息 + 企业微信）`)
+}
+// 导出报表
+const handleExport = (name: string) => {
+  window.$message?.success(`${name}已导出 Excel`)
+}
+
+</script>
+
+<template>
+  <NSpace vertical :size="16">
+    <!-- 卡片数据 -->
+    <NGrid 
+      cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16"
+      :style="{
+        '--error-color':themeStore.otherColor.error,
+        '--warning-color':themeStore.otherColor.warning
+      }"
+    >
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="4"
+            class="text-28px font-600 text-[var(--error-color)]"
+            /><p class="mt-10px ml-5px">起</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">高风险变更在办</p>
+            <p class="text-[11px] text-slate-400">重要等级 · 未关闭 · 实时推导</p>
+          </div>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="1"
+            class="text-28px font-600 text-[var(--error-color)]"
+            /><p class="mt-10px ml-5px">项</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">剩余高风险项</p>
+            <p class="text-[11px] text-slate-400">目标 0 · 管控措施须 100% 落实</p>
+          </div>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="6"
+            class="text-28px font-600 text-[var(--warning-color)]"
+            /><p class="mt-10px ml-5px">项</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">剩余中风险项</p>
+            <p class="text-[11px] text-slate-400">措施落实率 86% · 逐项跟踪</p>
+          </div>
+        </div>
+      </NGi>
+      <NGi>
+        <div 
+          class="flex-1 flex items-center gap-3 bg-white px-16px py-12px text-[#94a3b8]"
+          :style="{ borderRadius: themeStore.themeRadius + 'px' }"
+        >
+          <div class="flex items-center">
+            <CountTo
+            :start-value="0"
+            :end-value="3"
+            class="text-28px font-600 text-[var(--error-color)]"
+            /><p class="mt-10px ml-5px">起</p>
+          </div>
+          <div>
+            <p class="text-xs font-semibold text-slate-600">超期未关闭</p>
+            <p class="text-[11px] text-slate-400">含临时变更到期 1 起</p>
+          </div>
+        </div>
+      </NGi>
+    </NGrid>
+
+    <NGrid 
+      :x-gap="gap" :y-gap="16" responsive="screen" item-responsive
+      :style="{
+        '--error-color':themeStore.otherColor.error,
+        '--warning-color':themeStore.otherColor.warning,
+        '--success-color':themeStore.otherColor.success,
+        '--theme-color':themeStore.themeColor
+      }"
+    >
+      <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>
+          <ColumnChart :data="addRisk" :colors="RISK_COLORS" style="height: 100%;" />
+        </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>
+          <RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
+          <div class="px-3 pt-2 pb-3">
+            <div class="border-t pt-2.5">
+              <div class="flex items-baseline justify-between">
+                <span class="text-xs text-slate-500">管控措施落实率</span>
+                <span class="text-sm font-bold text-[#1D2129]">86%<span class="ml-1 text-[11px] font-normal text-slate-400">19/22 项</span></span>
+              </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(--theme-color)]" style="width: 86%"></div>
+              </div>
+              <div class="mt-1 text-[11px] text-slate-400">剩余高风险项 1 项：措施已落实 · 复核中（聚合反应温度上限调整 · 联锁传动试验）</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%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">PSSR 执行情况</p>
+          <div class="space-y-5 px-3 pt-5 pb-3">
+            <div v-for="r in PSSR_EXEC" :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 font-semibold text-slate-500">{{ r.label }}</span>
+              </div>
+              <div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-100">
+                <div v-if="r.status==='finish'" class="h-full rounded-full bg-[var(--theme-color)]" :style="{ width: `${r.pct}%`}"></div>
+                <div v-if="r.status==='close'" class="h-full rounded-full bg-[var(--success-color)]" :style="{ width: `${r.pct}%`}"></div>
+                <div v-if="r.status==='fix'" class="h-full rounded-full bg-[#b2bcca]" :style="{ width: `${r.pct}%`}"></div>
+              </div>
+              <div class="mt-1 text-[11px] text-slate-400">{{ r.detail }}</div>
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+    <NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive :style="{'--theme-color':themeStore.themeColor}">
+      <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="flex pt-5 pb-3">
+            <div class="w-50% flex flex-col items-center gap-1.5">
+              <NProgress type="circle" :percentage="88" :color="themeStore.otherColor.warning" :offset-degree="180">
+                <div class="flex flex-col items-center">
+                  <p class="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>
+              <span class="text-xs font-semibold text-slate-600">验收一次通过率</span>
+              <span class="text-[11px] text-slate-400">近一年 · 全厂</span>
+            </div>
+            <div class="w-50% flex flex-col items-center gap-1.5">
+              <NProgress type="circle" :percentage="85" :offset-degree="180">
+                <div class="flex flex-col items-center">
+                  <p class="text-2xl font-bold leading-none text-[#1D2129]">85<span class="text-sm font-semibold">%</span></p>
+                  <p class="mt-1 text-[11px] text-slate-400">Good</p>
+                </div>
+              </NProgress>
+              <span class="text-xs font-semibold text-slate-600">按期投用率</span>
+              <span class="text-[11px] text-slate-400">计划投用 vs 实际投用</span>
+            </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%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">超期未关闭清单</p>
+          <div class="space-y-2 p-3">
+            <div v-for="o in OVERDUE_LIST" :key="o.id" class="flex items-center gap-2 rounded-lg border border-red-200 bg-red-50/40 px-3 py-2">
+              <span class="min-w-0 flex-1">
+                <span class="block truncate text-xs font-medium text-slate-800">{{ o.title }}</span>
+                <span class="text-[11px] text-slate-400">{{ o.id }} · 卡在 {{ o.stage }}</span>
+              </span>
+              <NTag size="small" type="error">超期 {{ o.days }} 天</NTag>
+              <NButton size="small" ghost class="text-xs" @click="handleReminder(o.id)">催办</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%' }">
+          <p class=" text-base font-semibold border-b border-slate-100 p-3">报表导出</p>
+          <div class="grid grid-cols-2 gap-3 p-3">
+            <div v-for="r in SAFETY_EXPORTS" :key="r" @click="handleExport(r)"
+              class="cursor-pointer flex items-center gap-2 rounded-lg border px-3 py-2.5 text-left text-xs hover:border-[var(--theme-color)] hover:text-[var(--theme-color)]">
+              <Icon icon="akar-icons:file" class="size-14px" /> {{ r }}
+            </div>
+          </div>
+        </NCard>
+      </NGi>
+    </NGrid>
+  </NSpace>
+</template>
+
+<style scoped></style>
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useEcharts } from '@/hooks/common/echarts';
+
+defineOptions({
+  name: 'RingChart'
+});
+
+const props = defineProps<{ data: { name: string; highRisk: number; middleRisk: number }[]; colors: string[] }>();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+    tooltip: {
+        trigger: "axis",
+        axisPointer: {
+            type: "shadow",
+            textStyle: {
+                color: "#fff",
+            },
+        },
+   },
+    legend: {
+        bottom: '20%',
+        left: 'center',
+        icon: 'circle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemStyle: {
+            borderWidth: 0
+        },
+    },
+    grid: {
+        top: "10%",
+        left: "5%",
+        right: "5%",
+        bottom: "35%",
+    },
+    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: [
+        {
+            name: "高风险项",
+            stack: "总数",
+            type: "bar",
+            barWidth: 30,
+            barGap: "10%",
+            color: "#00B42A",
+            data: [] as number[],
+        },
+        // 中风险项 - 橙色
+        {
+            name: "中风险项",
+            stack: "总数",
+            type: "bar",
+            barWidth: 30,
+            color: "#FF7D00",
+            data: [] as number[],
+        },
+    ]
+}));
+
+function init() {
+  updateOptions(opts => {
+    let allMonth = props.data.map((item:any) => item.name);
+    let highRis = props.data.map((item:any) => item.highRisk);
+    let middleRisk = props.data.map((item:any) => item.middleRisk);
+    opts.xAxis[0].data = allMonth;
+    opts.series[0].data = highRis;
+    opts.series[1].data = middleRisk;
+    opts.series[0].color = props.colors[0];
+    opts.series[1].color = props.colors[1];
+    return opts;
+  });
+}
+
+init();
+</script>
+
+<template>
+  <div ref="domRef" class="w-full h-220px overflow-hidden"></div>
+</template>
+
+<style scoped></style>
@@ -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|19}\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>