首页代码优化

.env.development

@@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
+VITE_APP_BASE_API = 'http://47.120.79.150/backend'
-VITE_APP_BASE_API = 'http://192.168.2.23:8000'
+#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
 # VITE_APP_BASE_API = 'http://localhost:8000'
 
 

src/api/home/types.ts

@@ -1,6 +1,6 @@
 export interface DataOverviewType {
   devicesNumber: number | string;
   equipmentOnline: number | string;
-  bindingNew: number | string;
+  binding: number | string;
   equipmentAbnormal: number | string;
 }

src/router/index.ts

@@ -48,7 +48,7 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/index',
         component: () => import('@/views/index.vue'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
       }
     ]
   },

src/views/index.vue

@@ -13,8 +13,8 @@
           <div class="title_number">在线设备</div>
         </div>
         <div class="data_orgine">
-          <div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div>
+          <div class="number"><span>{{ DataOverview.binding }}</span> 个</div>
-          <div class="title_number">新增绑定</div>
+          <div class="title_number">已绑定设备</div>
         </div>
         <div class="data_red">
           <div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
@@ -30,7 +30,7 @@
             <div class="card-header">
               <div v-for="(item, index) in deviceList" :key="index" class="progress-item"
                 style="display: inline-block; margin-right: 40px;">
-                <el-progress :stroke-width="7" type="circle"
+                <el-progress :stroke-width="7" type="circle" :width="100"
                   :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
                   <template #default>
                     <div class="progress-text">
@@ -123,7 +123,6 @@
                     </div>
                   </div>
                 </el-col>
-
                 <!-- 报警事项 + 柱状图 -->
                 <el-col :span="16">
                   <div class="alarm-items">
@@ -150,7 +149,7 @@ import apiTypeAll from '@/api/equipmentManagement/device/index';
 const DataOverview = ref<DataOverviewType>({
   devicesNumber: 0,
   equipmentOnline: 0,
-  bindingNew: 0,
+  binding: 0,
   equipmentAbnormal: 0
 });
 const deviceTypeOptions = ref([]); //设备类型
@@ -168,7 +167,6 @@ const deviceList = ref([
 const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
 const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图
 const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图
-
 // ---------------------- 图表实例存储（用于销毁/更新） ----------------------
 let frequencyChartInstance: echarts.ECharts | null = null;
 let alarmRingChartInstance: echarts.ECharts | null = null;
@@ -301,6 +299,10 @@ const initAlarmRingChart = async () => {
         trigger: 'item',
         formatter: '{b}: {c} 次 ({d}%)' // 显示数量和百分比
       },
+      legend: {
+        origin: 'vertical',
+        data: ['报警', '已处理']
+      },
       series: [
         {
           type: 'pie',
@@ -310,7 +312,24 @@ const initAlarmRingChart = async () => {
           label: {
             show: true,
             position: 'center',
-            formatter: `${alarmsTotalToday}/${processingAlarmToday}\n今日报警/处理`,
+            formatter: [
+              '{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}',
+              '{textStyle|今日报警/处理}'
+            ].join('\n'), // 换行
+            // 关键：配置 rich 定义样式
+            rich: {
+              valueStyle: {
+                color: '#333',    // 数字颜色
+                fontSize: 18,     // 数字字号
+                fontWeight: 'bold',// 数字加粗
+                lineHeight: 24    // 行高（控制与下一行间距）
+              },
+              textStyle: {
+                color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义）
+                fontSize: 12,     // 文字字号
+                lineHeight: 20    // 文字行高
+              }
+            },
             fontSize: 16,
             fontWeight: 'bold',
             color: '#333'
@@ -320,15 +339,16 @@ const initAlarmRingChart = async () => {
           },
           data: [
             {
-              value: alarmsTotalToday,
+              value: processingAlarmToday,
-              name: '已处理报警',
+              name: '报警',
-              itemStyle: { color: '#07BE75' } // 绿色：已处理
+              itemStyle: { color: '#F65757' } // 红色：未处理
             },
             {
-              value: processingAlarmToday,
+              value: alarmsTotalToday,
-              name: '未处理报警',
+              name: '已处理',
-              itemStyle: { color: '#F65757' } // 红色：未处理
+              itemStyle: { color: '#07BE75' } // 绿色：已处理
-            }
+            },
+
           ]
         }
       ]
@@ -449,7 +469,8 @@ const getData = async () => {
   // 设备类型
   apiTypeAll.deviceTypeAll().then(res => {
     if (res.code == 200) {
-      deviceTypeOptions.value = res.data
+      const originalData = Array.isArray(res.data) ? res.data : [];
+      deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: ''}].concat(originalData); 
     }
   }).catch(err => {
 
@@ -489,14 +510,13 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .home {
-  padding:0px 20px 10px 20px;
+  padding: 0px 20px 10px 20px;
   background-color: #f5f7fa;
   min-height: calc(100vh - 84px);
 
   // 数据总览卡片样式
   .data-item {
     display: flex;
-    align-items: center;
     justify-content: space-between;
     width: 100%;
     color: rgba(255, 255, 255, 1);
@@ -506,32 +526,35 @@ onUnmounted(() => {
     .data_green,
     .data_orgine,
     .data_red {
-      width: 280px;
+      width:23%;
-      height: 110px;
+      height: 135px;
       border-radius: 10px;
       position: relative;
       text-align: center;
-      background-size: 100% 100%; // 确保背景图充满容器
     }
 
     .data_bck {
       background: url('../assets/index/devices_online.png') no-repeat;
+      background-size: 100%; // 确保背景图充满容器
     }
 
     .data_green {
       background: url('../assets/index/online.png') no-repeat;
+      background-size: 100%; // 确保背景图充满容器
     }
 
     .data_orgine {
       background: url('../assets/index/add.png') no-repeat;
+      background-size: 100%; // 确保背景图充满容器
     }
 
     .data_red {
       background: url('../assets/index/device_yc.png') no-repeat;
+      background-size: 100%; // 确保背景图充满容器
     }
 
     .number {
-      padding-top: 20px;
+      padding-top:30px;
       font-size: 18px;
 
       span {
@@ -550,7 +573,7 @@ onUnmounted(() => {
   // 设备分类/快捷操作卡片样式
   .content-row {
     background-color: #fff;
-    height: 240px;
+    height: 215px;
     border-radius: 10px;
     padding: 15px 25px;
     margin-bottom: 20px;
@@ -577,16 +600,16 @@ onUnmounted(() => {
       }
 
       .progress-name {
-        margin-top: 10px;
+        margin-top: 20px;
-        font-size: 14px;
+        font-size: 16px;
-        color: #666;
+        color: #333;
       }
     }
 
     .quick-item {
       cursor: pointer;
       text-align: center;
-      margin-top: 25px;
+      margin-top: 15px;
 
       .quick-img {
         width: 80px;
@@ -733,5 +756,91 @@ onUnmounted(() => {
       }
     }
   }
+
+  // 新增媒体查询，处理更小屏幕尺寸
+  @media (max-width: 768px) {
+    .data-item {
+      .data_bck,
+      .data_green,
+      .data_orgine,
+      .data_red {
+        width: 100%; // 在更小屏幕上，每个卡片占据一行
+        margin-bottom: 20px;
+      }
+    }
+
+    .content-row {
+      height: auto; // 自动高度，避免固定高度导致内容溢出
+      padding: 15px;
+
+      h2 {
+        font-size: 16px;
+      }
+
+      .progress-item,
+      .quick-item {
+        margin-top: 10px;
+      }
+    }
+
+    .region-chart-card {
+      height: auto; // 自动高度，避免固定高度导致内容溢出
+
+      .card-body {
+        height: auto;
+      }
+
+      .chart-container {
+        height: 200px; // 减少图表高度，适应小屏幕
+      }
+    }
+
+    .alarm-overview {
+      .alarm-stats {
+        flex-direction: column; // 报警统计项改为垂直排列
+        gap: 10px;
+      }
+    }
+  }
+
+  // 针对超小屏幕尺寸的适配
+  @media (max-width: 480px) {
+    .data-item {
+      .data_bck,
+      .data_green,
+      .data_orgine,
+      .data_red {
+        width: 100%; // 每个卡片占据一行
+        margin-bottom: 15px;
+      }
+    }
+
+    .content-row {
+      padding: 10px;
+
+      h2 {
+        font-size: 14px;
+      }
+
+      .progress-item,
+      .quick-item {
+        margin-top: 5px;
+      }
+    }
+
+    .region-chart-card {
+      padding: 10px;
+
+      .chart-container {
+        height: 150px; // 进一步减少图表高度
+      }
+    }
+
+    .alarm-overview {
+      .alarm-stats {
+        gap: 5px;
+      }
+    }
+  }
 }
 </style>