类型分布

src/components/AlertChart.vue

@@ -3,58 +3,188 @@
     <el-card class="alert-card">
       <div class="alert-header">告警趋势</div>
       <el-tabs v-model="activeName" @tab-click="handleClick" class="alert-tabs">
-        <el-tab-pane label="24小时" name="first">24小时数据展示</el-tab-pane>
+        <el-tab-pane label="前一天" name="first">前一天数据</el-tab-pane>
-        <el-tab-pane label="30天" name="second">30天数据展示</el-tab-pane>
+        <el-tab-pane label="3天" name="second">近3天数据展示</el-tab-pane>
-        <el-tab-pane label="12月" name="third">12月数据展示</el-tab-pane>
       </el-tabs>
-      <div id="alert-chart" class="chart-container"></div>
+      <div id="alertChart" class="chart-container"></div>
     </el-card>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts';
+import { login, getEvents } from '../../superbox.js';
+
+const username = 'turingvideo';
+const password = '1234qwer!';
 
 export default {
   name: 'AlertChart',
   data() {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      eventsData: []
     };
   },
-  mounted() {
+  async created() {
-    this.initChart();
+    try {
+      const token = await login(username, password);
+      this.eventsData = await getEvents(token);
+      this.initChart();
+    } catch (error) {
+      console.error("Error fetching events:", error);
+    }
   },
   methods: {
     handleClick(tab, event) {
-      console.log(tab, event);
-      // 根据选中的标签刷新图表数据
       this.initChart();
     },
     initChart() {
-      var chartDom = document.getElementById('alert-chart');
+      var chartDom = document.getElementById('alertChart');
       var myChart = echarts.init(chartDom);
       var option;
 
-      option = {
+      if (this.activeName === 'first') {
+        option = this.get24HourChartOption();
+      } else if (this.activeName === 'second') {
+        option = this.get3DayChartOption();
+      }
+
+      option && myChart.setOption(option);
+    },
+    get24HourChartOption() {
+      const now = new Date();
+      const todayMidnight = new Date(now);
+      todayMidnight.setHours(0, 0, 0, 0);
+
+      const yesterdayMidnight = new Date(todayMidnight);
+      yesterdayMidnight.setDate(todayMidnight.getDate() - 1);
+
+      const timePoints = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'];
+      const alertCounts = Array(timePoints.length).fill(0);
+
+      this.eventsData.forEach(event => {
+        const eventTime = new Date(event.started_at);
+        if (eventTime >= yesterdayMidnight && eventTime < todayMidnight) {
+          const hours = eventTime.getHours();
+          if (hours < 4) alertCounts[1]++;
+          else if (hours < 8) alertCounts[2]++;
+          else if (hours < 12) alertCounts[3]++;
+          else if (hours < 16) alertCounts[4]++;
+          else if (hours < 20) alertCounts[5]++;
+          else if (hours < 24) alertCounts[6]++;
+        }
+      });
+
+      // Accumulate the alert counts
+      for (let i = 1; i < alertCounts.length; i++) {
+        alertCounts[i] += alertCounts[i - 1];
+      }
+
+      return {
+        title: {
+          text: '24小时内告警数量变化',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          formatter: '{b0}: {c0}'
+        },
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['2024-07-08 00:00', '2024-07-08 08:00', '2024-07-08 16:00', '2024-07-09 00:00', '2024-07-09 08:00', '2024-07-09 16:00']
+          data: timePoints
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
-            data: [10, 22, 28, 43, 49, 62],
+            data: alertCounts,
             type: 'line',
             areaStyle: {}
           }
         ]
       };
+    },
 
-      option && myChart.setOption(option);
+    get3DayChartOption() {
+      const now = new Date();
+      const day1Midnight = new Date(now);
+      day1Midnight.setHours(0, 0, 0, 0);
+
+      const day2Midnight = new Date(day1Midnight);
+      day2Midnight.setDate(day1Midnight.getDate() - 1);
+
+      const day3Midnight = new Date(day2Midnight);
+      day3Midnight.setDate(day2Midnight.getDate() - 1);
+
+      // 在生成字符串之前增加一天
+      const adjustedDay1 = new Date(day1Midnight);
+      adjustedDay1.setDate(day1Midnight.getDate() + 1);
+
+      const adjustedDay2 = new Date(day2Midnight);
+      adjustedDay2.setDate(day2Midnight.getDate() + 1);
+
+      const adjustedDay3 = new Date(day3Midnight);
+      adjustedDay3.setDate(day3Midnight.getDate() + 1);
+
+      // 使用调整后的日期作为时间点
+      const timePoints = [
+        adjustedDay3.toISOString().slice(0, 10),
+        adjustedDay2.toISOString().slice(0, 10),
+        adjustedDay1.toISOString().slice(0, 10),
+      ];
+      const alertCounts = Array(timePoints.length).fill(0);
+
+      this.eventsData.forEach(event => {
+        const eventTime = new Date(event.started_at);
+        if (eventTime >= day3Midnight && eventTime < day2Midnight) {
+          alertCounts[0]++;
+        } else if (eventTime >= day2Midnight && eventTime < day1Midnight) {
+          alertCounts[1]++;
+        } else if (eventTime >= day1Midnight && eventTime <= now) {
+          alertCounts[2]++;
+        }
+      });
+
+      return {
+        title: {
+          text: '近3天内告警数量变化',
+          left: 'center',
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          formatter: '{b0}: {c0}'
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: timePoints
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: alertCounts,
+            type: 'line',
+            areaStyle: {}
+          }
+        ]
+      };
     }
   }
 };

src/components/Statistics.vue

@@ -1,48 +1,10 @@
 <template>
   <div>
     <el-card class="stats-card">
-      <div class="stats-header">布控情况</div>
+      <div class="stats-header">告警数量和类型分布</div>
       <el-row :gutter="20" class="stats-row">
-        <el-col :span="8">
+        <el-col :span="24">
-          <div class="stats-item">
+          <div ref="chart" class="chart"></div>
-            <div class="stats-title">布控区域数</div>
-            <div class="stats-value">15</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="stats-item">
-            <div class="stats-title">布控站点数</div>
-            <div class="stats-value">54</div>
-            <div class="stats-subvalue">7 异常站点</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="stats-item">
-            <div class="stats-title">布控摄像头数</div>
-            <div class="stats-value">2000</div>
-          </div>
-        </el-col>
-      </el-row>
-      <div class="stats-divider"></div>
-      <div class="stats-header">告警情况</div>
-      <el-row :gutter="20" class="stats-row">
-        <el-col :span="8">
-          <div class="stats-item">
-            <div class="stats-title">告警站点</div>
-            <div class="stats-value">25</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="stats-item">
-            <div class="stats-title">未完成告警</div>
-            <div class="stats-value">1511</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="stats-item">
-            <div class="stats-title">已完成告警</div>
-            <div class="stats-value">123916</div>
-          </div>
         </el-col>
       </el-row>
     </el-card>
@@ -50,9 +12,100 @@
 </template>
 
 <script>
+import * as echarts from 'echarts';
+import { login, getAlgorithms,getEvents} from '../../superbox.js';
+
+const username = 'turingvideo';
+const password = '1234qwer!';
+
+
 export default {
-  name: 'Statistics'
+  name: 'Statistics',
-}
+  data() {
+    return {
+      chart: null,
+      seriesData: [
+
+      ],
+    };
+  },
+  // mounted() {
+  //   this.initChart();
+  // },
+  async created(){
+    try{
+      const token = await login(username, password);
+      await this.fetchTypeMapping(token);
+      await this.updateSeriesData(token);
+      this.initChart();
+    }catch(error){
+      console.error("Error fetching algorithms:", error);
+    }
+  },
+  methods: {
+    async fetchTypeMapping(token) {
+      const algorithms = await getAlgorithms(token);
+      let mapping = algorithms.map(algorithm => ({
+        value: 0, // 初始化为10，可以根据实际数据进行调整
+        code_name: algorithm.code_name,
+        name: algorithm.name
+      }));
+      const newMapping = [
+        {code_name: "minizawu:532",name: "杂物堆积",value: 0},
+      ]
+
+      mapping = mapping.concat(newMapping);
+      this.seriesData = mapping;
+    },
+    async updateSeriesData(token){
+      const events = await getEvents(token);
+      events.forEach(event => {
+        const matchAlgorithm = this.seriesData.find(item => item.code_name === event.types);
+        if (matchAlgorithm){
+          matchAlgorithm.value += 1;
+        }
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart);
+      const option = {
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          orient: 'horizontal',
+          bottom: 10,
+          textStyle: {
+            color: '#fff',
+          },
+          itemGap: 20,
+          data: this.seriesData.map(item => item.name),
+        },
+        series: [
+          {
+            name: '告警类型',
+            type: 'pie',
+            radius: '50%',
+            center: ['50%', '150px'],
+            data: this.seriesData,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              show: true    
+            },
+            stillShowZeroSum: false,
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  }
+};
 </script>
 
 <style scoped>
@@ -72,30 +125,12 @@ export default {
 }
 
 .stats-row {
-  margin-bottom: 20px;
+  /* margin-top: 20px; */
-}
-
-.stats-item {
-  text-align: center;
-}
-
-.stats-title {
-  font-size: 16px;
   margin-bottom: 10px;
 }
 
-.stats-value {
+.chart {
-  font-size: 24px;
+  width: 100%;
-  font-weight: bold;
+  height: 500px;
-}
-
-.stats-subvalue {
-  font-size: 14px;
-  color: #f39c12;
-}
-
-.stats-divider {
-  border-top: 1px solid #3a4b5c;
-  margin: 20px 0;
 }
 </style>