更新

src/view/largeScreen2/ttes.js

@@ -106,33 +106,43 @@ export const getAlarmPendingOption = () => ({
   ]
 })
 
-export const getAlertDistributionOption = (alertTypes) => ({
-  series: [
-    {
-      type: 'pie',
-      radius: ['45%', '70%'],
-      center: ['50%', '50%'],
-      avoidLabelOverlap: false,
-      itemStyle: pieItemStyle,
-      label: {
-        show: true,
-        position: 'center',
-        formatter: '{total|15}\n{name|报警总数}',
-        rich: createCenterLabelRich(28, 14)
-      },
-      labelLine: {
-        show: false
-      },
-      data: alertTypes.map((item) => ({
-        value: item.count,
-        name: item.name,
-        itemStyle: {
-          color: item.color
-        }
-      }))
-    }
-  ]
-})
+export const getAlertDistributionOption = (alertTypes) => {
+  const total = (alertTypes || []).reduce((sum, item) => sum + (item.count || 0), 0)
+  return {
+    grid: {
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      containLabel: false
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['42%', '68%'],
+        center: ['50%', '50%'],
+        avoidLabelOverlap: false,
+        itemStyle: pieItemStyle,
+        label: {
+          show: true,
+          position: 'center',
+          formatter: `{total|${total}}\n{name|报警总数}`,
+          rich: createCenterLabelRich(16, 10)
+        },
+        labelLine: {
+          show: false
+        },
+        data: (alertTypes || []).map((item, index) => ({
+          value: item.count || 0,
+          name: item.name || '未知',
+          itemStyle: {
+            color: item.color || techChartSeriesColors[index % techChartSeriesColors.length]
+          }
+        }))
+      }
+    ]
+  }
+}
 
 export const getDeviceStatOption = (deviceTypes) => {
   const total = deviceTypes.reduce((sum, item) => sum + (item.count || item.value || 0), 0)
@@ -222,106 +232,21 @@ export const getProjectBarOption = (projectData) => ({
   ]
 })
 
-export const getAlertTrendOption = () => ({
-  tooltip: {
-    trigger: 'axis',
-    ...techChartTooltip
-  },
-  legend: {
-    data: ['二级报警', '报警', '预警'],
-    right: 10,
-    top: 0,
-    ...techChartLegend,
-    textStyle: {
-      ...techChartLegend.textStyle,
-      fontSize: 10
-    },
-    itemWidth: 10,
-    itemHeight: 10
-  },
-  grid: {
-    top: '15%',
-    left: '3%',
-    right: '4%',
-    bottom: '3%',
-    containLabel: true
-  },
-  xAxis: {
-    type: 'category',
-    data: ['01', '05', '10', '15', '20', '25', '30'],
-    axisLine: techChartAxisLine,
-    axisLabel: compactAxisLabel
-  },
-  yAxis: {
-    type: 'value',
-    name: '数量',
-    nameTextStyle: chartNameTextStyle,
-    splitLine: dashedSplitLine,
-    axisLine: techChartAxisLine,
-    axisLabel: compactAxisLabel
-  },
-  series: [
-    {
-      name: '二级报警',
-      data: [0, 1, 1, 2, 0, 0, 3],
+export const getAlertTrendOption = (payload = {}) => {
+  const dates = payload.dates || []
+  const seriesList = (payload.series || []).map((item, index) => {
+    const color = techChartSeriesColors[index % techChartSeriesColors.length]
+    return {
+      name: item.category || `系列${index + 1}`,
+      data: item.data || [],
       type: 'line',
       smooth: true,
       lineStyle: {
-        color: techChartSeriesColors[5],
+        color,
         width: 2
       },
       itemStyle: {
-        color: techChartSeriesColors[5]
-      },
-      markPoint: {
-        data: [
-          {
-            type: 'max',
-            name: 'Max'
-          },
-          {
-            type: 'min',
-            name: 'Min'
-          }
-        ]
-      }
-    },
-    {
-      name: '报警',
-      data: [1, 0, 0, 1, 1, 1, 0],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: techChartSeriesColors[3],
-        width: 2
-      },
-      itemStyle: {
-        color: techChartSeriesColors[3]
-      },
-      markPoint: {
-        data: [
-          {
-            type: 'max',
-            name: 'Max'
-          },
-          {
-            type: 'min',
-            name: 'Min'
-          }
-        ]
-      }
-    },
-    {
-      name: '预警',
-      data: [0, 1, 1, 0, 1, 1, 1],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: techChartSeriesColors[2],
-        width: 2
-      },
-      itemStyle: {
-        color: techChartSeriesColors[2]
+        color
       },
       markPoint: {
         data: [
@@ -336,5 +261,46 @@ export const getAlertTrendOption = () => ({
         ]
       }
     }
-  ]
-})
+  })
+
+  return {
+    tooltip: {
+      trigger: 'axis',
+      ...techChartTooltip
+    },
+    legend: {
+      data: seriesList.map((s) => s.name),
+      right: 10,
+      top: 0,
+      ...techChartLegend,
+      textStyle: {
+        ...techChartLegend.textStyle,
+        fontSize: 10
+      },
+      itemWidth: 10,
+      itemHeight: 10
+    },
+    grid: {
+      top: '15%',
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: dates,
+      axisLine: techChartAxisLine,
+      axisLabel: compactAxisLabel
+    },
+    yAxis: {
+      type: 'value',
+      name: '数量',
+      nameTextStyle: chartNameTextStyle,
+      splitLine: dashedSplitLine,
+      axisLine: techChartAxisLine,
+      axisLabel: compactAxisLabel
+    },
+    series: seriesList
+  }
+}