UI优化

src/views/Home/Index10.vue

@@ -584,26 +584,11 @@ const hiddenDangerChartOption = computed<EChartsOption>(() => {
     xAxis: {
       type: 'category',
       boundaryGap: false,
-      data: dates.length > 0 ? dates : [],
+      data: dates.length > 0 ? dates : []
-      axisLine: {
-        lineStyle: {
-          color: '#e5e7eb'
-        }
-      }
     },
     yAxis: {
       type: 'value',
-      max: yAxisMax,
+      max: yAxisMax
-      axisLine: {
-        lineStyle: {
-          color: '#e5e7eb'
-        }
-      },
-      splitLine: {
-        lineStyle: {
-          color: '#f3f4f6'
-        }
-      }
     },
     series: [
       {
@@ -747,12 +732,9 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
   const trainingCount = trainingBarData.value.trainingCount || []
   const participants = trainingBarData.value.participants || []
   
-  // 计算Y轴最大值（向上取整到最近的10的倍数）
+  // 计算堆叠后的最大值（培训次数 + 参与人次）
-  const maxValue = Math.max(
+  const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0))
-    ...trainingCount,
+  const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小
-    ...participants,
-    10 // 最小值为10，避免图表显示过小
-  )
   const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10
   
   return {
@@ -822,6 +804,7 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
       {
         name: '培训次数',
         type: 'bar',
+        stack: 'total',
         data: trainingCount.length > 0 ? trainingCount : [],
         barWidth: 32,
         itemStyle: {
@@ -832,32 +815,26 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: '#8b5cf6' },
+              { offset: 0, color: '#3b82f6' },
-              { offset: 1, color: '#7c3aed' }
+              { offset: 1, color: '#2563eb' }
             ]
           },
-          borderRadius: [6, 6, 0, 0]
+          borderRadius: [0, 0, 0, 0]
         },
         label: {
-          show: true,
+          show: false
-          position: 'insideTop',
-          color: '#fff',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(139, 92, 246, 0.5)'
+            shadowColor: 'rgba(59, 130, 246, 0.5)'
           }
         }
       },
       {
         name: '参与人次',
         type: 'bar',
+        stack: 'total',
         data: participants.length > 0 ? participants : [],
         barWidth: 32,
         itemStyle: {
@@ -868,26 +845,19 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: '#c4b5fd' },
+              { offset: 0, color: '#84cc16' },
-              { offset: 1, color: '#a78bfa' }
+              { offset: 1, color: '#65a30d' }
             ]
           },
           borderRadius: [6, 6, 0, 0]
         },
         label: {
-          show: true,
+          show: false
-          position: 'top',
-          color: '#7c3aed',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(196, 181, 253, 0.5)'
+            shadowColor: 'rgba(132, 204, 22, 0.5)'
           }
         }
       }
@@ -1453,7 +1423,7 @@ onMounted(async () => {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 
   .header-left {
-    flex: 1;
+    // flex: 1;
     display: flex;
     align-items: center;
 

src/views/Home/Index12.vue

@@ -1148,7 +1148,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
     series: [{
       name: '高危作业',
       type: 'pie',
-      radius: ['45%', '65%'],
+      radius: ['49%', '61%'],
       center: ['50%', '50%'],
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
@@ -1181,7 +1181,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
     series: [{
       name: '演练完成率',
       type: 'pie',
-      radius: ['45%', '65%'],
+      radius: ['49%', '61%'],
       center: ['50%', '50%'],
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' },
@@ -1207,12 +1207,9 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
   const trainingCount = trainingBarData.value.trainingCount || []
   const participants = trainingBarData.value.participants || []
   
-  // 计算Y轴最大值（向上取整到最近的10的倍数）
+  // 计算堆叠后的最大值（培训次数 + 参与人次）
-  const maxValue = Math.max(
+  const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0))
-    ...trainingCount,
+  const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小
-    ...participants,
-    10 // 最小值为10，避免图表显示过小
-  )
   const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10
   
   return {
@@ -1282,6 +1279,7 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
       {
         name: '培训次数',
         type: 'bar',
+        stack: 'total',
         data: trainingCount.length > 0 ? trainingCount : [],
         barWidth: 32,
         itemStyle: {
@@ -1292,62 +1290,49 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: '#8b5cf6' },
+              { offset: 0, color: '#3b82f6' },
-              { offset: 1, color: '#7c3aed' }
+              { offset: 1, color: '#2563eb' }
             ]
           },
-          borderRadius: [6, 6, 0, 0]
+          borderRadius: [0, 0, 0, 0]
         },
         label: {
-          show: true,
+          show: false
-          position: 'insideTop',
-          color: '#fff',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(139, 92, 246, 0.5)'
+            shadowColor: 'rgba(59, 130, 246, 0.5)'
           }
         }
       },
       {
         name: '参与人次',
-    type: 'bar',
+        type: 'bar',
+        stack: 'total',
         data: participants.length > 0 ? participants : [],
         barWidth: 32,
-    itemStyle: {
+        itemStyle: {
-      color: {
+          color: {
-        type: 'linear',
+            type: 'linear',
-        x: 0,
+            x: 0,
-        y: 0,
+            y: 0,
-        x2: 0,
+            x2: 0,
-        y2: 1,
+            y2: 1,
-        colorStops: [
+            colorStops: [
-              { offset: 0, color: '#c4b5fd' },
+              { offset: 0, color: '#84cc16' },
-              { offset: 1, color: '#a78bfa' }
+              { offset: 1, color: '#65a30d' }
-        ]
+            ]
-      },
+          },
           borderRadius: [6, 6, 0, 0]
-    },
+        },
-    label: {
+        label: {
-      show: true,
+          show: false
-      position: 'top',
-          color: '#7c3aed',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(196, 181, 253, 0.5)'
+            shadowColor: 'rgba(132, 204, 22, 0.5)'
           }
         }
       }

src/views/Home/Index13.vue

@@ -1069,7 +1069,7 @@ const highRiskChartOption = computed<EChartsOption>(() => {
     series: [{
       name: '高危作业',
       type: 'pie',
-      radius: ['45%', '65%'],
+      radius: ['49%', '61%'],
       center: ['50%', '50%'],
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0 },
@@ -1102,7 +1102,7 @@ const emergencyPlanChartOption = computed<EChartsOption>(() => {
     series: [{
       name: '演练完成率',
       type: 'pie',
-      radius: ['45%', '65%'],
+      radius: ['49%', '61%'],
       center: ['50%', '50%'],
       avoidLabelOverlap: false,
       itemStyle: { borderRadius: 0, borderColor: 'transparent', borderWidth: 0, color: '#10b981' },
@@ -1128,12 +1128,9 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
   const trainingCount = trainingBarData.value.trainingCount || []
   const participants = trainingBarData.value.participants || []
   
-  // 计算Y轴最大值（向上取整到最近的10的倍数）
+  // 计算堆叠后的最大值（培训次数 + 参与人次）
-  const maxValue = Math.max(
+  const stackedValues = trainingCount.map((count, index) => count + (participants[index] || 0))
-    ...trainingCount,
+  const maxValue = Math.max(...stackedValues, 10) // 最小值为10，避免图表显示过小
-    ...participants,
-    10 // 最小值为10，避免图表显示过小
-  )
   const yAxisMax = Math.ceil(maxValue / 10) * 10 || 10
   
   return {
@@ -1203,6 +1200,7 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
       {
         name: '培训次数',
         type: 'bar',
+        stack: 'total',
         data: trainingCount.length > 0 ? trainingCount : [],
         barWidth: 32,
         itemStyle: {
@@ -1213,62 +1211,49 @@ const safetyTrainingChartOption = computed<EChartsOption>(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: '#8b5cf6' },
+              { offset: 0, color: '#3b82f6' },
-              { offset: 1, color: '#7c3aed' }
+              { offset: 1, color: '#2563eb' }
             ]
           },
-          borderRadius: [6, 6, 0, 0]
+          borderRadius: [0, 0, 0, 0]
         },
         label: {
-          show: true,
+          show: false
-          position: 'insideTop',
-          color: '#fff',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(139, 92, 246, 0.5)'
+            shadowColor: 'rgba(59, 130, 246, 0.5)'
           }
         }
       },
       {
         name: '参与人次',
-    type: 'bar',
+        type: 'bar',
+        stack: 'total',
         data: participants.length > 0 ? participants : [],
         barWidth: 32,
-    itemStyle: {
+        itemStyle: {
-      color: {
+          color: {
-        type: 'linear',
+            type: 'linear',
-        x: 0,
+            x: 0,
-        y: 0,
+            y: 0,
-        x2: 0,
+            x2: 0,
-        y2: 1,
+            y2: 1,
-        colorStops: [
+            colorStops: [
-              { offset: 0, color: '#c4b5fd' },
+              { offset: 0, color: '#84cc16' },
-              { offset: 1, color: '#a78bfa' }
+              { offset: 1, color: '#65a30d' }
-        ]
+            ]
-      },
+          },
           borderRadius: [6, 6, 0, 0]
-    },
+        },
-    label: {
+        label: {
-      show: true,
+          show: false
-      position: 'top',
-          color: '#7c3aed',
-          fontSize: 12,
-          fontWeight: 'bold',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
         },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
-            shadowColor: 'rgba(196, 181, 253, 0.5)'
+            shadowColor: 'rgba(132, 204, 22, 0.5)'
           }
         }
       }