From c2dcff2da9764f50dbd645032ac34c67442b67bc Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期四, 29 一月 2026 17:45:47 +0800
Subject: [PATCH] 安全培训考核部分功能

---
 src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue |   58 +++++++++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
index 9346680..c787fce 100644
--- a/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
+++ b/src/views/reportAnalysis/dataDashboard/components/basic/left-top.vue
@@ -2,7 +2,8 @@
   <div>
     <PanelHeader title="浜у搧澶х被" />
     <div class="panel-item-customers">
-      <div style="height: 70%">
+      <div class="pie-chart-wrapper">
+        <div class="pie-background"></div>
         <Echarts
           ref="chart"
           :chartStyle="chartStyle"
@@ -10,7 +11,7 @@
           :series="landSeries"
           :tooltip="landTooltip"
           :color="landColors"
-          :options="{ backgroundColor: 'transparent', textStyle: { color: '#B8C8E0' } }"
+          :options="pieOptions"
           style="height: 100%"
           class="land-chart"
         />
@@ -82,17 +83,20 @@
 
 // 鎻愮ず妗�
 const landTooltip = {
-  triggerOn: 'click',
+  // triggerOn: 'hover',
   alwaysShowContent: true,
   position: function (pt) {
     return [pt[0], 130]
+  },
+  formatter: function (params) {
+    return `${params.name} (${params.value}绫�)`
   },
 }
 
 // 鍙屽眰鐜舰楗煎浘
 const landSeries = ref([
   {
-    name: '澶栧湀',
+    name: '浜у搧澶х被',
     type: 'pie',
     radius: ['35%', '55%'],
     center: ['50%', '50%'],
@@ -104,21 +108,22 @@
       lineHeight: 18,
       rich: {
         ...dotRich,
-        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 },
+        parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20, overflow: 'break' },
         child: { fontSize: 12, color: '#fff', lineHeight: 18 },
       },
       formatter: function (params) {
         const children = params?.data?.children || []
         const parentName = params?.data?.name || ''
-        const parentValue = params?.data?.value ?? 0
+        const rawVal = params?.data?.value
+        const parentValue = typeof rawVal === 'number' && !Number.isNaN(rawVal) ? rawVal : (Number(rawVal) || 0)
         const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}`
         const dot = `{${dotKey}|} `
-        if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}`
-        // 灏忓渾鐐� + 鐖剁骇 name + 鐖剁骇 value锛屾崲琛屽睍绀� children 鐨� name + value
-        return [
-          `${dot}{parent|${parentName} ${parentValue}}`,
-          ...children.map((c) => `{child|${c.name}}`),
-        ].join('\n')
+        const parentLine = `${dot}{parent|${parentName} (${parentValue}绫�)}`
+        if (!children.length) return parentLine
+        // 鐖剁骇鍏ㄩ儴鏄剧ず锛涘瓙绾ф渶澶� 5 涓紝瓒呭嚭鏄剧ず鐪佺暐鍙�
+        const displayed = children.slice(0, 5).map((c) => `{child|${c.name}}`)
+        if (children.length > 5) displayed.push('{child|鈥')
+        return [parentLine, ...displayed].join('\n')
       },
     },
     labelLine: {
@@ -157,7 +162,12 @@
 
 const chartStyle = {
   width: '100%',
-  height: '150%',
+  height: '126%',
+}
+
+const pieOptions = {
+  backgroundColor: 'transparent',
+  textStyle: { color: '#B8C8E0' },
 }
 
 const loadData = async () => {
@@ -192,4 +202,26 @@
   width: 100%;
   height: 420px;
 }
+
+.pie-chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 320px;
+  background: transparent;
+}
+
+.pie-background {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-51.5%, -39%);
+  width: 360px;
+  height: 360px;
+  background-image: url('@/assets/BI/鐜懓鍥捐竟妗�.png');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  z-index: 1;
+  pointer-events: none;
+}
 </style>

--
Gitblit v1.9.3