#优化

src/views/alarm/index.vue

@@ -4,10 +4,14 @@
       <!-- 顶部操作区 -->
       <div class="operate-area">
         <el-button-group>
-          <el-button v-for="month in months" :key="month.value"
+          <!-- <el-button v-for="month in months" :key="month.value"
             :type="currentMonth === month.value ? 'primary' : 'default'" @click="handleMonthChange(month.value)">
             {{ month.label }}
-          </el-button>
+          </el-button> -->
+          <el-select v-model="currentMonth" clearable placeholder="请选择 " @change="handleMonthChange(currentMonth)">
+            <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
+            </el-option>
+          </el-select>
         </el-button-group>
         <el-button type="default" @click="handleRefresh">
           <i class="el-icon-refresh"></i> 刷新
@@ -70,6 +74,7 @@ import { getAlarmStats, exportAlarmData } from '@/api/newApi/alarm'
 export default {
   data() {
     return {
+      // monthsSelect: '2026-01',
       loadingsystemStats: false,
       currentMonth: '2026-01',
       months: [],
@@ -122,9 +127,9 @@ export default {
         indicator_networkBoundaryConnectCount: item.indicator_networkBoundaryConnectCount,
         indicator_scheduledTaskCount: item.indicator_scheduledTaskCount,
         indicator_ossUseCount: item.indicator_ossUseCount,
-        
 
-        
+
+
       }));
     }
   },
@@ -147,7 +152,8 @@ export default {
             this.months = res.data.months.map(month => {
               const [year, monthNum] = month.split('-');
               return {
-                label: `${monthNum}月`,
+                // label: `${monthNum}月`,
+                label: month,
                 value: month
               };
             });
@@ -160,6 +166,7 @@ export default {
     },
     // 处理月份切换
     handleMonthChange(month) {
+      console.log(month)
       this.currentMonth = month;
       // 切换月份后重新获取数据
       this.getAlarmEven();
@@ -171,6 +178,13 @@ export default {
     },
     // 处理导出
     handleExport() {
+      const loading = this.$loading({
+        lock: true,
+        text: '正在下载...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      
       exportAlarmData(this.currentMonth).then(res => {
         // 处理导出成功逻辑
         const blob = new Blob([res], { type: 'application/vnd.ms-excel' });
@@ -183,6 +197,8 @@ export default {
         document.body.removeChild(a);
         window.URL.revokeObjectURL(url);
         this.$message.success('导出成功');
+      }).finally(() => {
+        loading.close();
       })
     }
   }

src/views/driving/index.vue

@@ -8,7 +8,7 @@
           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>
-        <el-checkbox v-model="autoRefresh" style="margin-left: 10px">自动刷新</el-checkbox>
+        <!-- <el-checkbox v-model="autoRefresh" style="margin-left: 10px">自动刷新</el-checkbox> -->
       </div>
     </div>
 
@@ -21,23 +21,16 @@
             <h3>指标分类数据获取情况</h3>
           </div>
           <div class="card-body">
-            <el-tabs v-model="activeCategoryTab" @tab-click="handleTabClick">
-              <el-tab-pane label="内容类" name="content">
-                <div class="chart-wrapper">
-                  <div ref="contentChart"></div>
-                </div>
-              </el-tab-pane>
-              <el-tab-pane label="阈值类" name="threshold">
-                <div class="chart-wrapper">
-                  <div ref="thresholdChart"></div>
-                </div>
-              </el-tab-pane>
-              <el-tab-pane label="存在性" name="existence">
-                <div class="chart-wrapper">
-                  <div ref="existenceChart"></div>
-                </div>
-              </el-tab-pane>
-            </el-tabs>
+            <div class="category-charts-container">
+              <div class="chart-item">
+                <div ref="contentChart" class="chart"></div>
+                <div class="chart-title">内容类</div>
+              </div>
+              <div class="chart-item">
+                <div ref="thresholdChart" class="chart"></div>
+                <div class="chart-title">阈值类</div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -129,7 +122,7 @@ import { getRealTimeAlarm, getAlarmDashboard } from '@/api/newApi/driving'
 export default {
   data() {
     return {
-      currentDate: new Date().toISOString().slice(0, 19).replace('T', ' '),
+      currentDate: new Date(),
       autoRefresh: false,
       refreshInterval: null,
       activeCategoryTab: 'content',
@@ -259,8 +252,9 @@ export default {
       }
     },
     initCategoryCharts() {
-      // 初始化当前激活的选项卡对应的图表
-      this.initCategoryChart(this.activeCategoryTab)
+      // 同时初始化内容类和阈值类图表
+      this.initCategoryChart('content')
+      this.initCategoryChart('threshold')
     },
 
     initDistributionChart() {
@@ -350,6 +344,7 @@ export default {
           legend: {
             data: Object.keys(this.alarmTrend)
           },
+
           grid: {
             left: '3%',
             right: '4%',
@@ -368,6 +363,15 @@ export default {
               type: 'value'
             }
           ],
+          // dataZoom: [
+          //   {
+          //     type: 'slider',
+          //     orient: 'horizontal',
+          //     xAxisIndex: 0,
+          //     start: 0,
+          //     end: 50
+          //   }
+          // ],
           series: [
             {
               name: '内容类',
@@ -469,6 +473,15 @@ export default {
               type: 'value'
             }
           ],
+          dataZoom: [
+            {
+              type: 'slider',
+              orient: 'horizontal',
+              xAxisIndex: 0,
+              start: 0,
+              end: 50
+            }
+          ],
           series: [
             {
               name: '内容类',
@@ -570,9 +583,15 @@ export default {
               formatter: '{a} <br/>{b}: {c} ({d}%)'
             },
             legend: {
-              orient: 'vertical',
-              left: 10,
-              data: ['正常', '无数据', '未配置']
+              orient: 'horizontal',
+              bottom: 0,
+              data: ['正常', '无数据', '未配置'],
+              width: '100%',
+              itemWidth: 10,
+              itemHeight: 10,
+              textStyle: {
+                fontSize: 12
+              }
             },
             series: [
               {
@@ -581,31 +600,28 @@ export default {
                 radius: ['40%', '70%'],
                 avoidLabelOverlap: false,
                 itemStyle: {
-                  borderRadius: 10,
+                  borderRadius: 0,
                   borderColor: '#fff',
-                  borderWidth: 2
+                  borderWidth: 0
                 },
                 label: {
-                  show: false,
-                  position: 'center'
+                  show: false
                 },
                 emphasis: {
                   label: {
-                    show: true,
-                    fontSize: '18',
-                    fontWeight: 'bold'
+                    show: false
                   }
                 },
                 labelLine: {
                   show: false
                 },
                 data:
-                  // this.indicatorStatus['内容类']
-                  [
-                    { value: 15, name: '正常' },
-                    { value: 3, name: '无数据' },
-                    { value: 2, name: '未配置' }
-                  ]
+                  this.indicatorStatus['内容类'] || [
+                    { value: 3, name: '正常' },
+                    { value: 1, name: '无数据' },
+                    { value: 4, name: '未配置' }
+                  ],
+                color: ['#F44336', '#BDBDBD', '#8BC34A']
               }
             ]
           }
@@ -616,9 +632,15 @@ export default {
               formatter: '{a} <br/>{b}: {c} ({d}%)'
             },
             legend: {
-              orient: 'vertical',
-              left: 10,
-              data: ['正常', '无数据', '未配置']
+              orient: 'horizontal',
+              bottom: 0,
+              data: ['正常', '无数据', '未配置'],
+              width: '100%',
+              itemWidth: 10,
+              itemHeight: 10,
+              textStyle: {
+                fontSize: 12
+              }
             },
             series: [
               {
@@ -627,25 +649,29 @@ export default {
                 radius: ['40%', '70%'],
                 avoidLabelOverlap: false,
                 itemStyle: {
-                  borderRadius: 10,
+                  borderRadius: 0,
                   borderColor: '#fff',
-                  borderWidth: 2
+                  borderWidth: 0
                 },
                 label: {
-                  show: false,
-                  position: 'center'
+                  show: false
                 },
                 emphasis: {
                   label: {
-                    show: true,
-                    fontSize: '18',
-                    fontWeight: 'bold'
+                    show: false
                   }
                 },
                 labelLine: {
                   show: false
                 },
-                data: this.indicatorStatus['阈值类']
+                data:
+                  this.indicatorStatus['阈值类'] || [
+                    { value: 4, name: '正常' },
+                    { value: 0, name: '无数据' },
+                    { value: 6, name: '未配置' }
+                  ],
+                color: ['#F44336', '#BDBDBD', '#8BC34A']
+
               }
             ]
           }
@@ -812,6 +838,35 @@ export default {
   overflow: hidden;
   flex: 1;
   min-width: 0;
+}
+
+.category-charts-container {
+  display: flex;
+  gap: 20px;
+  padding: 10px;
+  height: 100%;
+  min-height: 250px;
+}
+
+.chart-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+}
+
+.chart-title {
+  margin-top: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
   display: flex;
   flex-direction: column;
 }