From 8753b8c251a618d9843c7342264ed4e912b487c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=AE=E5=BE=AE=E4=B8=80=E7=AC=91?= <709648985@qq.com>
Date: Mon, 11 Aug 2025 15:10:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E9=A6=96=E9=A1=B5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue | 404 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 386 insertions(+), 18 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index 5035034..6ea13d0 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,36 +1,404 @@
 <template>
   <div class="app-container home">
-    <el-row :gutter="20">
-      <el-col :sm="24" :lg="12">
-        <div class="kfzIMG">
-          <img src="@/assets/images/kfz.png" alt="" class="kfIMG">
-          <p>功能开发中....敬请期待</p>
-        </div>
-      </el-col>
+    <!-- 面包屑导航 -->
+    <el-breadcrumb separator="/" class="breadcrumb">
+      <el-breadcrumb-item>
+        <span class="breadcrumb-dot active"></span>
+        首页
+      </el-breadcrumb-item>
+      <el-breadcrumb-item>
+        <span class="breadcrumb-dot"></span>
+        设备管理
+      </el-breadcrumb-item>
+    </el-breadcrumb>
 
+    <!-- 数据总览卡片 -->
+    <el-card class="data-overview-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">数据总览</span>
+        </div>
+      </template>
+      <el-row :gutter="20">
+        <el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
+          <div class="data-item">
+            <div class="data-icon" :style="{ backgroundColor: item.color }">
+              <el-icon><component :is="item.icon" /></el-icon>
+            </div>
+            <div class="data-content">
+              <div class="data-value">{{ item.value }}</div>
+              <div class="data-label">{{ item.label }}</div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 设备统计卡片 -->
+    <el-row :gutter="20" class="device-stats">
+      <el-col :span="12">
+        <el-card class="device-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">蓝牙设备</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="8" v-for="(item, index) in bluetoothStats" :key="index">
+              <div class="device-item">
+                <div class="device-value">{{ item.value }}</div>
+                <div class="device-label">{{ item.label }}</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="device-card" shadow="hover">
+          <template #header>
+            <div class="card-header">
+              <span class="card-title">4G设备</span>
+            </div>
+          </template>
+          <el-row :gutter="20">
+            <el-col :span="8" v-for="(item, index) in g4Stats" :key="index">
+              <div class="device-item">
+                <div class="device-value">{{ item.value }}</div>
+                <div class="device-label">{{ item.label }}</div>
+              </div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
     </el-row>
-    <el-divider />
+
+    <!-- 地区分布图表 -->
+    <el-card class="region-chart-card" shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">设备使用频次地区分布</span>
+          <div class="chart-controls">
+            <el-select v-model="selectedMonth" placeholder="选择月份" size="small">
+              <el-option label="7月" value="7"></el-option>
+              <el-option label="8月" value="8"></el-option>
+              <el-option label="9月" value="9"></el-option>
+            </el-select>
+            <el-select v-model="selectedYear" placeholder="选择年份" size="small">
+              <el-option label="2025年" value="2025"></el-option>
+              <el-option label="2024年" value="2024"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </template>
+      <div class="chart-container">
+        <div class="chart-bars">
+          <div 
+            v-for="(region, index) in regionData" 
+            :key="index" 
+            class="chart-bar-item"
+          >
+            <div class="bar-label">{{ region.name }}</div>
+            <div class="bar-container">
+              <div 
+                class="bar" 
+                :style="{ 
+                  height: (region.value / maxValue) * 200 + 'px',
+                  backgroundColor: region.color 
+                }"
+              ></div>
+            </div>
+            <div class="bar-value">{{ region.value }}</div>
+          </div>
+        </div>
+        <div class="chart-nav">
+          <el-button type="text" size="small">
+            <el-icon><ArrowRight /></el-icon>
+          </el-button>
+        </div>
+      </div>
+    </el-card>
   </div>
 </template>
 
 <script setup name="Index" lang="ts">
+import { ref, computed } from 'vue'
+import { 
+  Monitor, 
+  Connection, 
+  Warning, 
+  Plus, 
+  Bell,
+  ArrowRight 
+} from '@element-plus/icons-vue'
+
+// 数据总览
+const dataOverview = ref([
+  { label: '设备总量', value: '1,234', icon: 'Monitor', color: '#409eff' },
+  { label: '在线设备', value: '987', icon: 'Connection', color: '#67c23a' },
+  { label: '异常设备', value: '45', icon: 'Warning', color: '#e6a23c' },
+  { label: '新增绑定', value: '23', icon: 'Plus', color: '#f56c6c' },
+  { label: '设备报警', value: '12', icon: 'Bell', color: '#909399' }
+])
+
+// 蓝牙设备统计
+const bluetoothStats = ref([
+  { label: '总量', value: '856' },
+  { label: '在线', value: '723' },
+  { label: '新增绑定', value: '15' }
+])
+
+// 4G设备统计
+const g4Stats = ref([
+  { label: '总量', value: '378' },
+  { label: '在线', value: '264' },
+  { label: '新增绑定', value: '8' }
+])
+
+// 地区分布数据
+const regionData = ref([
+  { name: '北京', value: 156, color: '#409eff' },
+  { name: '上海', value: 134, color: '#67c23a' },
+  { name: '杭州', value: 98, color: '#e6a23c' }
+])
+
+// 计算最大值用于图表比例
+const maxValue = computed(() => {
+  return Math.max(...regionData.value.map(item => item.value))
+})
+
+// 选择器数据
+const selectedMonth = ref('7')
+const selectedYear = ref('2025')
 </script>
 
 <style lang="scss" scoped>
 .home {
-  .kfzIMG {
-    left: 50%;
-    top: 50%;
-    position: absolute;
-    transform: translate(-50%, 100%);
-    text-align: center;
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+
+  .breadcrumb {
+    margin-bottom: 20px;
+    padding: 10px 0;
+    
+    .breadcrumb-dot {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      margin-right: 8px;
+      background-color: #c0c4cc;
+      
+      &.active {
+        background-color: #409eff;
+      }
+    }
   }
 
-  .kfIMG {
-    width: 60%;
+  .data-overview-card {
+    margin-bottom: 20px;
+    
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+    }
+
+    .data-item {
+      display: flex;
+      align-items: center;
+      padding: 16px;
+      background: #fafafa;
+      border-radius: 8px;
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      }
+
+      .data-icon {
+        width: 48px;
+        height: 48px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 12px;
+        color: white;
+        font-size: 20px;
+      }
+
+      .data-content {
+        flex: 1;
+
+        .data-value {
+          font-size: 24px;
+          font-weight: 700;
+          color: #303133;
+          line-height: 1.2;
+        }
+
+        .data-label {
+          font-size: 14px;
+          color: #909399;
+          margin-top: 4px;
+        }
+      }
+    }
+  }
+
+  .device-stats {
+    margin-bottom: 20px;
+
+    .device-card {
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        
+        .card-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: #303133;
+        }
+      }
+
+      .device-item {
+        text-align: center;
+        padding: 20px 0;
+
+        .device-value {
+          font-size: 28px;
+          font-weight: 700;
+          color: #409eff;
+          line-height: 1.2;
+        }
+
+        .device-label {
+          font-size: 14px;
+          color: #909399;
+          margin-top: 8px;
+        }
+      }
+    }
+  }
+
+  .region-chart-card {
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      .card-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #303133;
+      }
+
+      .chart-controls {
+        display: flex;
+        gap: 12px;
+      }
+    }
+
+    .chart-container {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      padding: 20px 0;
+      min-height: 250px;
+
+      .chart-bars {
+        display: flex;
+        align-items: flex-end;
+        gap: 40px;
+        flex: 1;
+
+        .chart-bar-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+
+          .bar-label {
+            font-size: 14px;
+            color: #606266;
+            font-weight: 500;
+          }
+
+          .bar-container {
+            width: 60px;
+            height: 200px;
+            display: flex;
+            align-items: flex-end;
+            position: relative;
+
+            .bar {
+              width: 100%;
+              border-radius: 4px 4px 0 0;
+              transition: all 0.3s ease;
+              position: relative;
+
+              &:hover {
+                transform: scaleY(1.05);
+              }
+            }
+          }
+
+          .bar-value {
+            font-size: 16px;
+            font-weight: 600;
+            color: #303133;
+          }
+        }
+      }
+
+      .chart-nav {
+        display: flex;
+        align-items: center;
+        padding-left: 20px;
+      }
+    }
   }
 }
-.el-divider--horizontal{
-  border: none;
+
+// 响应式设计
+@media (max-width: 768px) {
+  .home {
+    padding: 10px;
+
+    .data-overview-card {
+      .data-item {
+        margin-bottom: 10px;
+      }
+    }
+
+    .device-stats {
+      .el-col {
+        margin-bottom: 20px;
+      }
+    }
+
+    .region-chart-card {
+      .chart-container {
+        .chart-bars {
+          gap: 20px;
+
+          .chart-bar-item {
+            .bar-container {
+              width: 40px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>