风险管理

2026-01-06 12:08:08 +08:00
parent 1354380b10
commit f909230546
7 changed files with 870 additions and 319 deletions
--- a/src/views/Home/Index13.vue
+++ b/src/views/Home/Index13.vue
@@ -2,12 +2,16 @@
  <div class="dashboard-container">
    <!-- 顶部标题栏 -->
    <div class="header-container">
-      <div class="header-left">
-        <el-icon class="back-arrow" @click="returnToRegion">
-          <ArrowLeft />
-        </el-icon>
-        <div class="park-name">{{ selectedPark }}</div>
-              </div>
+      <HeaderSelector
+        back-button-type="image"
+        :show-back-button="true"
+        :on-back="returnToRegion"
+        :display-text="selectedPark"
+        :clickable="false"
+        :show-selector-indicator="false"
+        selector-type="none"
+        theme="light"
+      />
      <!-- <h1 class="header-title">园区视角数据看板</h1> -->
      <div class="header-right">
        <div class="date-range-wrapper">
@@ -297,7 +301,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { Refresh, ArrowLeft } from '@element-plus/icons-vue'
+import { Refresh } from '@element-plus/icons-vue'
 import Echart from '@/components/Echart/src/Echart.vue'
 import type { EChartsOption } from 'echarts'
 import dayjs from 'dayjs'
@@ -311,6 +315,7 @@ import {
  getHiddenDangerManagementDataParkWeek,
  getHiddenDangerManagementDataParkMonth
 } from '@/api'
+import HeaderSelector from '@/views/screen/components/HeaderSelector.vue'

 defineOptions({ name: 'Home13' })

@@ -580,10 +585,10 @@ const initRiskData = async () => {
      
      // 处理风险等级分布数据（用于环形图）
      const allLevels = [
-        { key: '低', level: '低风险', count: 0, percent: '0%', color: '#10b981' },
-        { key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
-        { key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
-        { key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+        { key: '低', level: '低风险', count: 0, percent: '0%', color: '#117cee' },
+        { key: '一般', level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
+        { key: '较大', level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
+        { key: '重大', level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
      ]
      
      riskDistribution.value = allLevels.map(defaultItem => {
@@ -621,10 +626,10 @@ const initRiskData = async () => {
    } else {
      riskTotal.value = 0
      riskDistribution.value = [
-        { level: '低风险', count: 0, percent: '0%', color: '#10b981' },
-        { level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
-        { level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
-        { level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+        { level: '低风险', count: 0, percent: '0%', color: '#117cee' },
+        { level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
+        { level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
+        { level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
      ]
      locationRiskDistribution.value = []
      console.log('园区风险管理无数据')
@@ -633,10 +638,10 @@ const initRiskData = async () => {
    console.error('获取园区风险管理数据失败:', error)
    riskTotal.value = 0
    riskDistribution.value = [
-      { level: '低风险', count: 0, percent: '0%', color: '#10b981' },
-      { level: '一般风险', count: 0, percent: '0%', color: '#f59e0b' },
-      { level: '较大风险', count: 0, percent: '0%', color: '#ef4444' },
-      { level: '重大风险', count: 0, percent: '0%', color: '#dc2626' }
+      { level: '低风险', count: 0, percent: '0%', color: '#117cee' },
+      { level: '一般风险', count: 0, percent: '0%', color: '#fbde28' },
+      { level: '较大风险', count: 0, percent: '0%', color: '#ed740c' },
+      { level: '重大风险', count: 0, percent: '0%', color: '#df2a3f' }
    ]
    locationRiskDistribution.value = []
  }
@@ -1013,6 +1018,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
  if (chartData.length === 0 || outsourcingTotal.value === 0) {
    return {
      tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+      graphic: [
+        {
+          type: 'text',
+          left: 'center',
+          top: 'center',
+          style: {
+            text: `${outsourcingTotal.value}\n外协人员总数`,
+            fontSize: 16,
+            fontWeight: 'bold',
+            fill: '#333',
+            textAlign: 'center',
+            textVerticalAlign: 'middle'
+          }
+        }
+      ],
      series: [{
        name: '外协人员',
        type: 'pie',
@@ -1020,13 +1040,8 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
-            label: {
-          show: true,
-          position: 'center',
-          formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
-          fontSize: 16,
-          fontWeight: 'bold',
-          color: '#333'
+        label: {
+          show: false
        },
        data: [{ value: 1, name: '暂无数据', itemStyle: { color: '#e5e7eb' } }]
      }]
@@ -1035,6 +1050,21 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
  
  return {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${outsourcingTotal.value}\n外协人员总数`,
+          fontSize: 16,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
    series: [{
      name: '外协人员',
      type: 'pie',
@@ -1043,14 +1073,9 @@ const outsourcingChartOption = computed<EChartsOption>(() => {
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
      label: {
-        show: true,
-        position: 'center',
-        formatter: () => `${outsourcingTotal.value}\n外协人员总数`,
-        fontSize: 16,
-        fontWeight: 'bold',
-        color: '#333'
+        show: false
      },
-      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
+      emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
      data: chartData
    }]
  }
@@ -1066,6 +1091,21 @@ const riskChartOption = computed<EChartsOption>(() => {
  
  return {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${riskTotal.value}\n风险总数`,
+          fontSize: 16,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
    series: [{
      name: '风险',
      type: 'pie',
@@ -1075,13 +1115,51 @@ const riskChartOption = computed<EChartsOption>(() => {
      itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
      label: {
        show: true,
-        position: 'center',
-        formatter: () => `${riskTotal.value}\n风险总数`,
-        fontSize: 16,
-        fontWeight: 'bold',
+        alignTo: 'edge',
+        formatter: (params: any) => {
+          const value = Number(params.value) || 0
+          const total = Number(riskTotal.value) || 0
+          if (total === 0) {
+            return '0%'
+          }
+          const percent = ((value / total) * 100).toFixed(2) + '%'
+          return percent
+        },
+        minMargin: 5,
+        edgeDistance: 10,
+        lineHeight: 15,
+        fontSize: 12,
        color: '#333'
      },
-      emphasis: { label: { show: true, fontSize: 18, fontWeight: 'bold' } },
+      labelLine: {
+        show: true,
+        length: 15,
+        length2: 10,
+        maxSurfaceAngle: 80
+      },
+      labelLayout: function (params: any) {
+        const isLeft = params.labelRect.x < params.labelRect.width
+        const points = params.labelLinePoints
+        if (points && points.length >= 3) {
+          // 调整线条的终点位置
+          if (isLeft) {
+            points[2][0] = params.labelRect.x
+          } else {
+            points[2][0] = params.labelRect.x + params.labelRect.width
+          }
+          return {
+            labelLinePoints: points
+          }
+        }
+        return {}
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 14,
+          fontWeight: 'bold'
+        }
+      },
      data: chartData
    }]
  }
@@ -1159,6 +1237,21 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
 const highRiskChartOption = computed<EChartsOption>(() => {
  return {
    tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' },
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: {
+          text: `${highRiskTotal.value}\n累计作业`,
+          fontSize: 15,
+          fontWeight: 'bold',
+          fill: '#333',
+          textAlign: 'center',
+          textVerticalAlign: 'middle'
+        }
+      }
+    ],
    series: [{
      name: '高危作业',
      type: 'pie',
@@ -1167,14 +1260,9 @@ const highRiskChartOption = computed<EChartsOption>(() => {
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
      label: {
-        show: true,
-        position: 'center',
-        formatter: () => `${highRiskTotal.value}\n累计作业`,
-        fontSize: 15,
-        fontWeight: 'bold',
-        color: '#333'
+        show: false
      },
-      emphasis: { label: { show: true, fontSize: 20, fontWeight: 'bold' } },
+      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
      data: operationTypeDistribution.value.map(item => ({
        value: item.count,
        name: item.type,