#add 大屏和告警列表

src/api/newApi/alarm/index.js

@@ -11,3 +11,15 @@ export function getAlarmStats(month) {
     method: 'get'
   })
 }
+/**
+ * 导出告警数据
+ * @param {*} month 格式为yyyy-MM
+ * @returns 
+ */
+export function exportAlarmData(month) {
+  return request({
+    url: '/alarm/export?month=' + month,
+    method: 'get',
+    responseType: 'blob'
+  })
+}

src/api/newApi/driving/index.js

@@ -7,3 +7,11 @@ export function getRealTimeAlarm(data) {
         params: data
     })
 }
+// 获取告警统计数据
+export function getAlarmDashboard(data) {
+    return request({
+        url: '/alarm/dashboard',
+        method: 'get',
+        params: data
+    })
+}

src/views/alarm/index.vue

@@ -28,9 +28,7 @@
             <template slot="prefix">
               <el-icon class="el-icon-info"></el-icon>
             </template>
-            <template slot="suffix">
-              {{ item.unit }}
-            </template>
+            <template slot="suffix">件 </template>
           </el-statistic>
           <div class="overall-label">{{ item.label }}</div>
         </div>
@@ -57,7 +55,7 @@
 </template>
 
 <script>
-import { getAlarmStats } from '@/api/newApi/alarm'
+import { getAlarmStats, exportAlarmData } from '@/api/newApi/alarm'
 
 export default {
   data() {
@@ -76,34 +74,34 @@ export default {
     overviewData() {
       const overall = this.alarmData.overall || {};
       return [
-        { label: '告警总数', value: overall.total, unit: '件' },
-        { label: '已处理告警总数', value: overall.processed, unit: '件' },
-        { label: '未处理告警总数', value: overall.unprocessed, unit: '件' },
-        { label: '内容类告警总数', value: overall.contentCount, unit: '件' },
-        { label: '阈值类告警总数', value: overall.thresholdCount, unit: '件' },
-        { label: '存在性告警总数', value: overall.existenceCount, unit: '件' }
+        { label: '告警总数', value: overall.total },
+        { label: '已处理告警总数', value: overall.processed },
+        { label: '未处理告警总数', value: overall.unprocessed },
+        { label: '内容类告警总数', value: overall.contentCount },
+        { label: '阈值类告警总数', value: overall.thresholdCount },
+        { label: '存在性告警总数', value: overall.existenceCount }
       ];
     },
     // 根据当前选择的月份获取各系统告警统计数据
     systemStatsData() {
       return (this.alarmData.indicatorStats || []).map(item => ({
-        systemName: item.system_name || '',
-        totalAlarms: item.total || 0,
-        processedAlarms: item.processed || 0,
-        unprocessedAlarms: item.unprocessed || 0,
-        contentAlarms: item.contentCount || 0,
-        thresholdAlarms: item.thresholdCount || 0,
-        existenceAlarms: item.existenceCount || 0,
-        indicator: item.total || 0,
-        dataNoDeliveredCount: item.dataNoDeliveredCount || 0,
-        internalConnectCount: item.internalConnectCount || 0,
-        interfaceFrequencyCount: item.interfaceFrequencyCount || 0,
-        databaseConnectCount: item.databaseConnectCount || 0,
-        pageTamperProofCount: item.pageTamperProofCount || 0,
-        networkBoundaryConnectCount: item.networkBoundaryConnectCount || 0,
-        scheduledTaskCount: item.scheduledTaskCount || 0,
-        ossUseCount: item.indicator_ossUseCount || 0,
-        abnormalAccessCount: item.abnormalAccessCount || 0
+        systemName: item.system_name,
+        totalAlarms: item.total,
+        processedAlarms: item.processed,
+        unprocessedAlarms: item.unprocessed,
+        contentAlarms: item.contentCount,
+        thresholdAlarms: item.thresholdCount,
+        existenceAlarms: item.existenceCount,
+        indicator: item.total,
+        dataNoDeliveredCount: item.dataNoDeliveredCount,
+        internalConnectCount: item.internalConnectCount,
+        interfaceFrequencyCount: item.interfaceFrequencyCount,
+        databaseConnectCount: item.databaseConnectCount,
+        pageTamperProofCount: item.pageTamperProofCount,
+        networkBoundaryConnectCount: item.networkBoundaryConnectCount,
+        scheduledTaskCount: item.scheduledTaskCount,
+        ossUseCount: item.indicator_ossUseCount,
+        abnormalAccessCount: item.abnormalAccessCount
       }));
     }
   },
@@ -111,9 +109,7 @@ export default {
     this.getAlarmEven();
   },
   methods: {
-    /**
-     * 获取告警统计数据
-     */
+    //获取告警统计数据
     getAlarmEven() {
       this.loadingsystemStats = true;
       getAlarmStats(this.currentMonth).then(res => {
@@ -134,6 +130,8 @@ export default {
             });
           }
           this.loadingsystemStats = false;
+        } else {
+          this.$message.error('获取告警统计数据失败');
         }
       })
     },
@@ -146,12 +144,23 @@ export default {
     // 处理刷新
     handleRefresh() {
       // 刷新时重新获取数据
-      this.getAlarmEven();
-      this.$message.success('数据已刷新');
+      this.getAlarmEven()
     },
     // 处理导出
     handleExport() {
-      this.$message.success('导出功能已触发');
+      exportAlarmData(this.currentMonth).then(res => {
+        // 处理导出成功逻辑
+        const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `告警数据_${this.currentMonth}.xlsx`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        window.URL.revokeObjectURL(url);
+        this.$message.success('导出成功');
+      })
     }
   }
 }

src/views/driving/index.vue

@@ -4,7 +4,7 @@
     <div class="page-header">
       <h2>告警数据驾驶舱</h2>
       <div class="header-right">
-        <el-date-picker v-model="currentDate" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
+        <el-date-picker disabled v-model="currentDate" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss"
           value-format="yyyy-MM-dd HH:mm:ss" style="width: 200px; margin-right: 10px">
         </el-date-picker>
         <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
@@ -71,19 +71,19 @@
             <h3>七日告警数据分布</h3>
           </div>
           <div class="card-body">
-            <div class="total-alarms">
+            <!-- <div class="total-alarms">
               <div class="total-label">七日内总告警数</div>
-              <div class="total-count">{{ sevenDayTotalAlarms }}</div>
-            </div>
+              <div class="total-count">{{this.alarmDistribution.reduce((acc, item) => acc + item.value, 0)}}</div>
+            </div> -->
             <div class="chart-wrapper">
               <div ref="distributionChart"></div>
             </div>
-            <div class="legend">
-              <div v-for="item in distributionLegend" :key="item.name" class="legend-item">
+            <!-- <div class="legend">
+              <div v-for="item in alarmDistribution" :key="item.name" class="legend-item">
                 <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
                 <span class="legend-text">{{ item.name }}: {{ item.value }}%</span>
               </div>
-            </div>
+            </div> -->
           </div>
         </div>
       </div>
@@ -124,7 +124,7 @@
 
 <script>
 import * as echarts from 'echarts'
-import { getRealTimeAlarm } from '@/api/newApi/driving'
+import { getRealTimeAlarm, getAlarmDashboard } from '@/api/newApi/driving'
 
 export default {
   data() {
@@ -134,7 +134,7 @@ export default {
       refreshInterval: null,
       activeCategoryTab: 'content',
 
-     
+
       realTimeAlarms: [],//实时告警列表
 
 
@@ -149,7 +149,13 @@ export default {
       ],
 
       // 图表实例
-      charts: {}
+      charts: {},
+
+
+      alarmDistribution: [],//告警分布
+      indicatorStatus: [],//指标状态
+      alarmTrend: [],//七日告警趋势分析
+      systemAlarms: [],//各系统七日告警
     }
   },
   mounted() {
@@ -182,14 +188,76 @@ export default {
         }
       })
     },
-    initCharts() {
+    async initCharts() {
+      await this.getAlarmEvent()
       this.initCategoryCharts()
       this.initDistributionChart()
       this.initTrendChart()
       this.initSystemChart()
       this.getRealEvent()
     },
-
+    async getAlarmEvent() {
+      try {
+        const res = await getAlarmDashboard()
+        if (res) {
+          console.log('告警数据驾驶舱全量数据:', res)
+          if (res.alarmDistribution && res.alarmDistribution.length > 0) {
+            this.alarmDistribution = res.alarmDistribution.map(item => ({
+              value: item.count,
+              name: item.indicator,
+            }))
+            console.log(this.alarmDistribution)
+          }
+          if (res.indicatorStatus && res.indicatorStatus.length > 0) {
+            // 根据type分类
+            const groupedData = {}
+            res.indicatorStatus.forEach(item => {
+              if (!groupedData[item.type]) {
+                groupedData[item.type] = []
+              }
+              groupedData[item.type].push({
+                value: item.count,
+                type: item.type,
+                name: item.situation
+              })
+            })
+            this.indicatorStatus = groupedData
+            console.log(this.indicatorStatus['内容类'])
+            console.log('按类型分组的指标状态:', this.indicatorStatus)
+          }
+          if (res.alarmTrend && res.alarmTrend.length > 0) {
+            // 按照type分类
+            const groupedTrend = {}
+            res.alarmTrend.forEach(item => {
+              if (!groupedTrend[item.type]) {
+                groupedTrend[item.type] = []
+              }
+              groupedTrend[item.type].push({
+                value: item.count,
+                name: item.date,
+                type: item.type,
+              })
+            })
+            this.alarmTrend = groupedTrend
+            console.log('按类型分组的告警趋势:', this.alarmTrend)
+          }
+          if (res.systemAlarms && res.systemAlarms.length > 0) {
+            // 按照systemName分类
+            const groupedSystem = {}
+            res.systemAlarms.forEach(item => {
+              if (!groupedSystem[item.systemName]) {
+                groupedSystem[item.systemName] = {}
+              }
+              groupedSystem[item.systemName][item.type] = item.count
+            })
+            this.systemAlarms = groupedSystem
+            console.log('按系统分组的系统告警:', this.systemAlarms)
+          }
+        }
+      } catch (error) {
+        console.error('获取告警数据失败:', error)
+      }
+    },
     initCategoryCharts() {
       // 初始化当前激活的选项卡对应的图表
       this.initCategoryChart(this.activeCategoryTab)
@@ -197,7 +265,7 @@ export default {
 
     initDistributionChart() {
       const chartRef = this.$refs.distributionChart
-      console.log('初始化分布图表:', chartRef)
+      // console.log('初始化分布图表:', chartRef)
       if (!chartRef) {
         console.error('未找到分布图表引用')
         return
@@ -210,25 +278,32 @@ export default {
 
       try {
         const distributionChart = echarts.init(chartRef)
-        console.log('分布图表初始化成功')
+        // console.log('分布图表初始化成功')
         distributionChart.setOption({
           tooltip: {
             trigger: 'item',
             formatter: '{a} <br/>{b}: {c} ({d}%)'
           },
+          legend: {
+            orient: 'vertical',
+            left: 'right'
+          },
           series: [
             {
               name: '告警分布',
               type: 'pie',
-              radius: '60%',
-              center: ['50%', '50%'],
-              data: [
-                { value: 30, name: 'CPU使用率', itemStyle: { color: '#5470c6' } },
-                { value: 25, name: '内存使用率', itemStyle: { color: '#91cc75' } },
-                { value: 20, name: '磁盘空间', itemStyle: { color: '#fac858' } },
-                { value: 15, name: '网络延迟', itemStyle: { color: '#ee6666' } },
-                { value: 10, name: '服务可用性', itemStyle: { color: '#73c0de' } }
-              ],
+              radius: ['40%', '70%'],
+              center: ['25%', '50%'],
+              label: {
+                show: true,
+                position: 'center',
+                formatter: function () {
+                  const total = this.alarmDistribution.reduce((sum, item) => sum + item.value, 0);
+                  return total + '\n七日告警数分布';
+                }.bind(this),
+                fontSize: 16,
+              },
+              data: this.alarmDistribution,
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
@@ -240,7 +315,7 @@ export default {
           ]
         })
         this.charts.distributionChart = distributionChart
-        console.log('分布图表配置设置成功')
+        // console.log('分布图表配置设置成功')
       } catch (error) {
         console.error('初始化分布图表时出错:', error)
       }
@@ -248,7 +323,7 @@ export default {
 
     initTrendChart() {
       const chartRef = this.$refs.trendChart
-      console.log('初始化趋势图表:', chartRef)
+      // console.log('初始化趋势图表:', chartRef)
       if (!chartRef) {
         console.error('未找到趋势图表引用')
         return
@@ -261,7 +336,7 @@ export default {
 
       try {
         const trendChart = echarts.init(chartRef)
-        console.log('趋势图表初始化成功')
+        // console.log('趋势图表初始化成功')
         trendChart.setOption({
           tooltip: {
             trigger: 'axis',
@@ -273,7 +348,7 @@ export default {
             }
           },
           legend: {
-            data: ['内容类', '阈值类', '存在性']
+            data: Object.keys(this.alarmTrend)
           },
           grid: {
             left: '3%',
@@ -285,7 +360,7 @@ export default {
             {
               type: 'category',
               boundaryGap: false,
-              data: ['11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13']
+              data: [...new Set(Object.values(this.alarmTrend).flat().map(item => item.name))]
             }
           ],
           yAxis: [
@@ -302,7 +377,7 @@ export default {
               emphasis: {
                 focus: 'series'
               },
-              data: [12, 19, 3, 5, 2, 3, 15],
+              data: (this.alarmTrend['内容类'] || []).map(item => item.value),
               lineStyle: {
                 color: '#ee6666'
               },
@@ -318,7 +393,7 @@ export default {
               emphasis: {
                 focus: 'series'
               },
-              data: [11, 22, 33, 44, 55, 43, 32],
+              data: (this.alarmTrend['阈值类'] || []).map(item => item.value),
               lineStyle: {
                 color: '#5470c6'
               },
@@ -334,7 +409,7 @@ export default {
               emphasis: {
                 focus: 'series'
               },
-              data: [12, 21, 15, 18, 22, 25, 20],
+              data: this.alarmTrend['存在性'].map(item => item.value),
               lineStyle: {
                 color: '#91cc75'
               },
@@ -345,7 +420,7 @@ export default {
           ]
         })
         this.charts.trendChart = trendChart
-        console.log('趋势图表配置设置成功')
+        // console.log('趋势图表配置设置成功')
       } catch (error) {
         console.error('初始化趋势图表时出错:', error)
       }
@@ -353,7 +428,7 @@ export default {
 
     initSystemChart() {
       const chartRef = this.$refs.systemChart
-      console.log('初始化系统图表:', chartRef)
+      // console.log('初始化系统图表:', chartRef)
       if (!chartRef) {
         console.error('未找到系统图表引用')
         return
@@ -366,7 +441,7 @@ export default {
 
       try {
         const systemChart = echarts.init(chartRef)
-        console.log('系统图表初始化成功')
+        // console.log('系统图表初始化成功')
         systemChart.setOption({
           tooltip: {
             trigger: 'axis',
@@ -386,7 +461,7 @@ export default {
           xAxis: [
             {
               type: 'category',
-              data: ['系统1', '系统2', '系统3', '系统4']
+              data: Object.keys(this.systemAlarms || {})
             }
           ],
           yAxis: [
@@ -398,11 +473,10 @@ export default {
             {
               name: '内容类',
               type: 'bar',
-              stack: 'total',
               emphasis: {
                 focus: 'series'
               },
-              data: [32, 28, 35, 25],
+              data: Object.keys(this.systemAlarms || {}).map(system => this.systemAlarms[system]['内容类'] || 0),
               itemStyle: {
                 color: '#ee6666'
               }
@@ -410,11 +484,10 @@ export default {
             {
               name: '阈值类',
               type: 'bar',
-              stack: 'total',
               emphasis: {
                 focus: 'series'
               },
-              data: [45, 40, 38, 42],
+              data: Object.keys(this.systemAlarms || {}).map(system => this.systemAlarms[system]['阈值类'] || 0),
               itemStyle: {
                 color: '#5470c6'
               }
@@ -422,11 +495,10 @@ export default {
             {
               name: '存在性',
               type: 'bar',
-              stack: 'total',
               emphasis: {
                 focus: 'series'
               },
-              data: [18, 22, 15, 20],
+              data: Object.keys(this.systemAlarms || {}).map(system => this.systemAlarms[system]['存在性'] || 0),
               itemStyle: {
                 color: '#91cc75'
               }
@@ -434,7 +506,7 @@ export default {
           ]
         })
         this.charts.systemChart = systemChart
-        console.log('系统图表配置设置成功')
+        // console.log('系统图表配置设置成功')
       } catch (error) {
         console.error('初始化系统图表时出错:', error)
       }
@@ -475,7 +547,7 @@ export default {
     initCategoryChart(type) {
       // 初始化单个分类图表
       const chartRef = this.$refs[`${type}Chart`]
-      console.log('初始化图表类型:', type, '图表引用:', chartRef)
+      // console.log('初始化图表类型:', type, '图表引用:', chartRef)
       if (!chartRef) {
         console.error('未找到图表引用，类型:', type)
         return
@@ -488,7 +560,7 @@ export default {
 
       try {
         const chart = echarts.init(chartRef)
-        console.log('图表初始化成功:', type)
+        // console.log('图表初始化成功:', type)
         let option = {}
 
         if (type === 'content') {
@@ -527,11 +599,13 @@ export default {
                 labelLine: {
                   show: false
                 },
-                data: [
-                  { value: 15, name: '正常', itemStyle: { color: '#91cc75' } },
-                  { value: 3, name: '无数据', itemStyle: { color: '#ee6666' } },
-                  { value: 2, name: '未配置', itemStyle: { color: '#d9d9d9' } }
-                ]
+                data:
+                  // this.indicatorStatus['内容类']
+                  [
+                    { value: 15, name: '正常' },
+                    { value: 3, name: '无数据' },
+                    { value: 2, name: '未配置' }
+                  ]
               }
             ]
           }
@@ -571,11 +645,7 @@ export default {
                 labelLine: {
                   show: false
                 },
-                data: [
-                  { value: 12, name: '正常', itemStyle: { color: '#91cc75' } },
-                  { value: 5, name: '无数据', itemStyle: { color: '#ee6666' } },
-                  { value: 3, name: '未配置', itemStyle: { color: '#d9d9d9' } }
-                ]
+                data: this.indicatorStatus['阈值类']
               }
             ]
           }
@@ -615,11 +685,7 @@ export default {
                 labelLine: {
                   show: false
                 },
-                data: [
-                  { value: 18, name: '正常', itemStyle: { color: '#91cc75' } },
-                  { value: 2, name: '无数据', itemStyle: { color: '#ee6666' } },
-                  { value: 0, name: '未配置', itemStyle: { color: '#d9d9d9' } }
-                ]
+                data: this.indicatorStatus['存在性']
               }
             ]
           }
@@ -628,7 +694,7 @@ export default {
         if (option && chart) {
           chart.setOption(option)
           this.charts[`${type}Chart`] = chart
-          console.log('图表配置设置成功:', type)
+          // console.log('图表配置设置成功:', type)
         }
       } catch (error) {
         console.error('初始化图表时出错:', type, error)