优化soc统计样式

src/views/pms/qhse/socSummary/index.vue

@@ -330,6 +330,52 @@ const chartColorMap: Record<string, string> = {
   作业场所: '#ff00ff'
 }
 
+const hexToRgba = (hex: string, alpha: number) => {
+  const normalizedHex = hex.replace('#', '')
+  const safeHex =
+    normalizedHex.length === 3
+      ? normalizedHex
+          .split('')
+          .map((char) => char + char)
+          .join('')
+      : normalizedHex
+
+  const red = Number.parseInt(safeHex.slice(0, 2), 16)
+  const green = Number.parseInt(safeHex.slice(2, 4), 16)
+  const blue = Number.parseInt(safeHex.slice(4, 6), 16)
+
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`
+}
+
+const getBarBaseColor = (name: string, isDrilldown: boolean) => {
+  return chartColorMap[name] || (isDrilldown ? '#67c23a' : '#409eff')
+}
+
+const getBarItemStyle = (name: string, isDrilldown: boolean) => {
+  const baseColor = getBarBaseColor(name, isDrilldown)
+
+  return {
+    color: {
+      type: 'linear',
+      x: 0,
+      y: 0,
+      x2: 0,
+      y2: 1,
+      colorStops: [
+        { offset: 0, color: hexToRgba(baseColor, 0.98) },
+        { offset: 0.55, color: baseColor },
+        { offset: 1, color: hexToRgba(baseColor, 0.72) }
+      ]
+    },
+    borderRadius: [10, 10, 3, 3],
+    shadowBlur: 14,
+    shadowColor: hexToRgba(baseColor, 0.28),
+    shadowOffsetY: 6,
+    borderColor: hexToRgba(baseColor, 0.9),
+    borderWidth: 1
+  }
+}
+
 const socChartOption = computed<EChartsOption>(() => {
   const isDrilldown = !!currentDrilldownKey.value
   const sourceData = isDrilldown ? childChartData.value : totalChartData.value
@@ -338,7 +384,16 @@ const socChartOption = computed<EChartsOption>(() => {
     tooltip: {
       trigger: 'axis',
       axisPointer: {
-        type: 'shadow'
+        type: 'shadow',
+        shadowStyle: {
+          color: 'rgba(64, 158, 255, 0.08)'
+        }
+      },
+      backgroundColor: 'rgba(18, 34, 61, 0.9)',
+      borderWidth: 0,
+      padding: [10, 14],
+      textStyle: {
+        color: '#f5f7fa'
       }
     },
     grid: {
@@ -357,12 +412,12 @@ const socChartOption = computed<EChartsOption>(() => {
       axisLabel: {
         interval: 0,
         rotate: isDrilldown ? 18 : 0,
-        color: '#606266',
+        color: '#5b6475',
         fontSize: 12
       },
       axisLine: {
         lineStyle: {
-          color: '#dcdfe6'
+          color: '#d7deea'
         }
       }
     },
@@ -370,11 +425,18 @@ const socChartOption = computed<EChartsOption>(() => {
       type: 'value',
       minInterval: 1,
       axisLabel: {
-        color: '#606266'
+        color: '#7a8599'
+      },
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
       },
       splitLine: {
         lineStyle: {
-          color: '#ebeef5'
+          color: 'rgba(148, 163, 184, 0.2)',
+          type: 'dashed'
         }
       }
     },
@@ -382,17 +444,24 @@ const socChartOption = computed<EChartsOption>(() => {
       {
         type: 'bar',
         barMaxWidth: isDrilldown ? 42 : 56,
-        data: sourceData.map((item) => ({
-          value: item.value,
+        emphasis: {
+          focus: 'series',
           itemStyle: {
-            color: chartColorMap[item.name] || (isDrilldown ? '#67c23a' : '#409eff'),
-            borderRadius: [6, 6, 0, 0]
+            shadowBlur: 20,
+            shadowOffsetY: 8
           }
+        },
+        data: sourceData.map((item) => ({
+          value: item.value,
+          itemStyle: getBarItemStyle(item.name, isDrilldown)
         })),
         label: {
           show: true,
           position: 'top',
-          color: '#303133'
+          distance: 10,
+          color: '#303133',
+          fontSize: 12,
+          fontWeight: 600
         }
       }
     ]