更新

src/view/largeScreen2/ttes.js

@@ -106,33 +106,43 @@ export const getAlarmPendingOption = () => ({
   ]
 })
 
-export const getAlertDistributionOption = (alertTypes) => ({
+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: ['45%', '70%'],
+        radius: ['42%', '68%'],
         center: ['50%', '50%'],
         avoidLabelOverlap: false,
         itemStyle: pieItemStyle,
         label: {
           show: true,
           position: 'center',
-        formatter: '{total|15}\n{name|报警总数}',
+          formatter: `{total|${total}}\n{name|报警总数}`,
-        rich: createCenterLabelRich(28, 14)
+          rich: createCenterLabelRich(16, 10)
         },
         labelLine: {
           show: false
         },
-      data: alertTypes.map((item) => ({
+        data: (alertTypes || []).map((item, index) => ({
-        value: item.count,
+          value: item.count || 0,
-        name: item.name,
+          name: item.name || '未知',
           itemStyle: {
-          color: item.color
+            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,13 +232,44 @@ export const getProjectBarOption = (projectData) => ({
   ]
 })
 
-export const getAlertTrendOption = () => ({
+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,
+        width: 2
+      },
+      itemStyle: {
+        color
+      },
+      markPoint: {
+        data: [
+          {
+            type: 'max',
+            name: 'Max'
+          },
+          {
+            type: 'min',
+            name: 'Min'
+          }
+        ]
+      }
+    }
+  })
+
+  return {
     tooltip: {
       trigger: 'axis',
       ...techChartTooltip
     },
     legend: {
-    data: ['二级报警', '报警', '预警'],
+      data: seriesList.map((s) => s.name),
       right: 10,
       top: 0,
       ...techChartLegend,
@@ -248,7 +289,7 @@ export const getAlertTrendOption = () => ({
     },
     xAxis: {
       type: 'category',
-    data: ['01', '05', '10', '15', '20', '25', '30'],
+      data: dates,
       axisLine: techChartAxisLine,
       axisLabel: compactAxisLabel
     },
@@ -260,81 +301,6 @@ export const getAlertTrendOption = () => ({
       axisLine: techChartAxisLine,
       axisLabel: compactAxisLabel
     },
-  series: [
+    series: seriesList
-    {
-      name: '二级报警',
-      data: [0, 1, 1, 2, 0, 0, 3],
-      type: 'line',
-      smooth: true,
-      lineStyle: {
-        color: techChartSeriesColors[5],
-        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]
-      },
-      markPoint: {
-        data: [
-          {
-            type: 'max',
-            name: 'Max'
-          },
-          {
-            type: 'min',
-            name: 'Min'
-          }
-        ]
   }
 }
-  ]
-})