美化

src/view/largeScreen2/ttes.js

@@ -1,13 +1,54 @@
 import * as echarts from 'echarts'
+import {
+  techChartAxisLabel,
+  techChartAxisLine,
+  techChartCenterText,
+  techChartLegend,
+  techChartSeriesColors,
+  techChartSplitLine,
+  techChartTooltip
+} from '@/utils/techChartTheme'
+
+const chartNameTextStyle = {
+  color: techChartAxisLabel.color,
+  fontSize: 10
+}
+
+const dashedSplitLine = {
+  lineStyle: {
+    ...techChartSplitLine.lineStyle,
+    type: 'dashed'
+  }
+}
+
+const compactAxisLabel = {
+  ...techChartAxisLabel,
+  fontSize: 10
+}
+
+const pieItemStyle = {
+  borderRadius: 8,
+  borderColor: 'rgba(5, 16, 32, 0.96)',
+  borderWidth: 2
+}
+
+const createCenterLabelRich = (totalFontSize, nameFontSize) => ({
+  total: {
+    fontSize: totalFontSize,
+    fontWeight: 'bold',
+    color: techChartCenterText.primary,
+    lineHeight: 35
+  },
+  name: {
+    fontSize: nameFontSize,
+    color: techChartCenterText.secondary
+  }
+})
 
 export const getAlarmPendingOption = () => ({
   tooltip: {
     trigger: 'axis',
-    backgroundColor: 'rgba(15, 23, 42, 0.9)',
-    borderColor: '#1e3a8a',
-    textStyle: {
-      color: '#e2e8f0'
-    }
+    ...techChartTooltip
   },
   grid: {
     top: '15%',
@@ -19,38 +60,16 @@ export const getAlarmPendingOption = () => ({
   xAxis: {
     type: 'category',
     data: ['02-17', '02-22', '02-27', '03-04', '03-09', '03-14'],
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
+    axisLine: techChartAxisLine,
+    axisLabel: compactAxisLabel
   },
   yAxis: {
     type: 'value',
     name: '次数',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 10
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
+    nameTextStyle: chartNameTextStyle,
+    splitLine: dashedSplitLine,
+    axisLine: techChartAxisLine,
+    axisLabel: compactAxisLabel
   },
   series: [
     {
@@ -59,11 +78,11 @@ export const getAlarmPendingOption = () => ({
       type: 'line',
       smooth: true,
       lineStyle: {
-        color: '#00d4ff',
+        color: techChartSeriesColors[0],
         width: 2
       },
       itemStyle: {
-        color: '#00d4ff'
+        color: techChartSeriesColors[0]
       },
       areaStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -94,27 +113,12 @@ export const getAlertDistributionOption = (alertTypes) => ({
       radius: ['45%', '70%'],
       center: ['50%', '50%'],
       avoidLabelOverlap: false,
-      itemStyle: {
-        borderRadius: 8,
-        borderColor: '#0f172a',
-        borderWidth: 2
-      },
+      itemStyle: pieItemStyle,
       label: {
         show: true,
         position: 'center',
         formatter: '{total|15}\n{name|报警总数}',
-        rich: {
-          total: {
-            fontSize: 28,
-            fontWeight: 'bold',
-            color: '#e2e8f0',
-            lineHeight: 35
-          },
-          name: {
-            fontSize: 14,
-            color: '#94a3b8'
-          }
-        }
+        rich: createCenterLabelRich(28, 14)
       },
       labelLine: {
         show: false
@@ -146,27 +150,12 @@ export const getDeviceStatOption = (deviceTypes) => {
         radius: ['45%', '70%'],
         center: ['50%', '50%'],
         avoidLabelOverlap: false,
-        itemStyle: {
-          borderRadius: 8,
-          borderColor: '#0f172a',
-          borderWidth: 2
-        },
+        itemStyle: pieItemStyle,
         label: {
           show: true,
           position: 'center',
           formatter: `{total|${total}}\n{name|设备总数}`,
-          rich: {
-            total: {
-              fontSize: 18,
-              fontWeight: 'bold',
-              color: '#e2e8f0',
-              lineHeight: 35
-            },
-            name: {
-              fontSize: 12,
-              color: '#94a3b8'
-            }
-          }
+          rich: createCenterLabelRich(18, 12)
         },
         labelLine: {
           show: false
@@ -186,11 +175,7 @@ export const getDeviceStatOption = (deviceTypes) => {
 export const getProjectBarOption = (projectData) => ({
   tooltip: {
     trigger: 'axis',
-    backgroundColor: 'rgba(15, 23, 42, 0.9)',
-    borderColor: '#1e3a8a',
-    textStyle: {
-      color: '#e2e8f0'
-    }
+    ...techChartTooltip
   },
   grid: {
     top: '10%',
@@ -202,14 +187,9 @@ export const getProjectBarOption = (projectData) => ({
   xAxis: {
     type: 'category',
     data: projectData.map((item) => item.projectName || item.name || '未知'),
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
+    axisLine: techChartAxisLine,
     axisLabel: {
-      color: '#64748b',
-      fontSize: 9,
+      ...compactAxisLabel,
       rotate: 30,
       interval: 0,
       overflow: 'truncate',
@@ -220,25 +200,10 @@ export const getProjectBarOption = (projectData) => ({
   yAxis: {
     type: 'value',
     name: '数量',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 10
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
+    nameTextStyle: chartNameTextStyle,
+    splitLine: dashedSplitLine,
+    axisLine: techChartAxisLine,
+    axisLabel: compactAxisLabel
   },
   series: [
     {
@@ -248,8 +213,8 @@ export const getProjectBarOption = (projectData) => ({
       barWidth: '40%',
       itemStyle: {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#00d4ff' },
-          { offset: 1, color: '#3b82f6' }
+          { offset: 0, color: techChartSeriesColors[0] },
+          { offset: 1, color: techChartSeriesColors[4] }
         ]),
         borderRadius: [4, 4, 0, 0]
       }
@@ -260,18 +225,15 @@ export const getProjectBarOption = (projectData) => ({
 export const getAlertTrendOption = () => ({
   tooltip: {
     trigger: 'axis',
-    backgroundColor: 'rgba(15, 23, 42, 0.9)',
-    borderColor: '#1e3a8a',
-    textStyle: {
-      color: '#e2e8f0'
-    }
+    ...techChartTooltip
   },
   legend: {
     data: ['二级报警', '报警', '预警'],
     right: 10,
     top: 0,
+    ...techChartLegend,
     textStyle: {
-      color: '#94a3b8',
+      ...techChartLegend.textStyle,
       fontSize: 10
     },
     itemWidth: 10,
@@ -287,38 +249,16 @@ export const getAlertTrendOption = () => ({
   xAxis: {
     type: 'category',
     data: ['01', '05', '10', '15', '20', '25', '30'],
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
+    axisLine: techChartAxisLine,
+    axisLabel: compactAxisLabel
   },
   yAxis: {
     type: 'value',
     name: '数量',
-    nameTextStyle: {
-      color: '#64748b',
-      fontSize: 10
-    },
-    splitLine: {
-      lineStyle: {
-        color: '#1e3a8a',
-        type: 'dashed'
-      }
-    },
-    axisLine: {
-      lineStyle: {
-        color: '#1e3a8a'
-      }
-    },
-    axisLabel: {
-      color: '#64748b',
-      fontSize: 10
-    }
+    nameTextStyle: chartNameTextStyle,
+    splitLine: dashedSplitLine,
+    axisLine: techChartAxisLine,
+    axisLabel: compactAxisLabel
   },
   series: [
     {
@@ -327,11 +267,11 @@ export const getAlertTrendOption = () => ({
       type: 'line',
       smooth: true,
       lineStyle: {
-        color: '#a855f7',
+        color: techChartSeriesColors[5],
         width: 2
       },
       itemStyle: {
-        color: '#a855f7'
+        color: techChartSeriesColors[5]
       },
       markPoint: {
         data: [
@@ -352,11 +292,11 @@ export const getAlertTrendOption = () => ({
       type: 'line',
       smooth: true,
       lineStyle: {
-        color: '#ef4444',
+        color: techChartSeriesColors[3],
         width: 2
       },
       itemStyle: {
-        color: '#ef4444'
+        color: techChartSeriesColors[3]
       },
       markPoint: {
         data: [
@@ -377,11 +317,11 @@ export const getAlertTrendOption = () => ({
       type: 'line',
       smooth: true,
       lineStyle: {
-        color: '#f59e0b',
+        color: techChartSeriesColors[2],
         width: 2
       },
       itemStyle: {
-        color: '#f59e0b'
+        color: techChartSeriesColors[2]
       },
       markPoint: {
         data: [