首页页面布局编写

src/views/equipmentManagement/devices/index.vue

@@ -44,29 +44,29 @@
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
+            <el-button v-hasPermi="['equipment:devices:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
+            <el-button v-hasPermi="['equipment:devices:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
               修改
             </el-button>
           </el-col>
 
           <el-col :span="1.5">
-            <el-button type="warning" :disabled="multiple" plain icon="Download" @click="handleExport">导出</el-button>
+            <el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain icon="Download" @click="handleExport">导出</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain :disabled="multiple" @click="handleDelete()">
+            <el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple" @click="handleDelete()">
               批量删除
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain @click="handleBatchImport">
+            <el-button v-hasPermi="['equipment:devices:import']" type="warning" plain @click="handleBatchImport">
               批量导入
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="warning" plain :disabled="multiple" @click="handleBatchAssign">
+            <el-button v-hasPermi="['equipment:devices:allocate']" type="warning" plain :disabled="multiple" @click="handleBatchAssign">
               批量分配客户
             </el-button>
           </el-col>
@@ -113,21 +113,22 @@
 
         <el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
           <template #default="scope">
+            <el-button  link type="primary" @click="handleDatails(scope.row)">详情</el-button>
             <el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
+              <el-button v-hasPermi="['equipment:devices:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip v-if="!scope.row.customerName" content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
+              <el-button v-hasPermi="['equipment:devices:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top">
-              <el-button link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button>
+              <el-button v-hasPermi="['equipment:devices:allocate']" link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top">
-              <el-button link type="primary" icon="UploadFilled" @click="handleWithdraw(scope.row)"></el-button>
+              <el-button v-hasPermi="['equipment:devices:revoke']" link type="primary" icon="UploadFilled" @click="handleWithdraw(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
               placement="top">
-              <el-button link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button>
+              <el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
               <el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
@@ -299,6 +300,7 @@ const deviceDist = ref<deviceVO[]>();
 import { to } from 'await-to-js';
 import request from "@/utils/request";
 import { getBearerToken } from '@/utils/auth'
+import router from '@/router';
 const loading = ref(true);
 const showSearch = ref(true);
 const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
@@ -502,7 +504,12 @@ const handleAdd = async () => {
   // 每次打开弹框时获取最新的设备类型数据
   getDeviceType();
 };
-
+// 详情
+const handleDatails = (row: any) => {
+  console.log(row,'row');
+    const deviceId = row.deviceId;
+  router.push('/equipmentManagement/deviceDetails/' + deviceId);
+}
 /** 修改按钮操作 */
 const handleUpdate = async (row?: deviceForm) => {
   reset();

src/views/index.vue

@@ -1,158 +1,271 @@
 <template>
   <div class="app-container home">
-    <!-- 面包屑导航 -->
-    <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">
+    <div>
-      <template #header>
+      <h1>数据总览</h1>
-        <div class="card-header">
+      <div class="data-item">
-          <span class="card-title">数据总览</span>
+        <div class="data_bck">
+          <div class="number"><span>100</span> 个</div>
+          <div class="title_number">设备数量</div>
         </div>
-      </template>
+        <div class="data_green">
-      <el-row :gutter="20">
+          <div class="number"><span>100</span> 个</div>
-        <el-col :span="4" v-for="(item, index) in dataOverview" :key="index">
+          <div class="title_number">在线设备</div>
-          <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-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="data_orgine">
-      <div class="chart-container">
+          <div class="number"><span>100</span> 个</div>
-        <div class="chart-bars">
+          <div class="title_number">新增绑定</div>
-          <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">
+        <div class="data_red">
-          <el-button type="text" size="small">
+          <div class="number"><span>100</span> 个</div>
-            <el-icon><ArrowRight /></el-icon>
+          <div class="title_number">异常设备</div>
-          </el-button>
         </div>
       </div>
-    </el-card>
+      <div>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <div class="content-row">
+              <h2>设备分类</h2>
+              <div class="card-header">
+                <!-- 循环渲染每个设备的进度条 -->
+                <div v-for="(item, index) in deviceList" :key="index" class="progress-item">
+                  <el-progress :stroke-width="7" type="circle" :percentage="(item.current / item.total) * 100">
+                    <!-- 自定义进度条内部内容：显示“分子/分母” -->
+                    <template #default>
+                      <div class="progress-text">
+                        <span class="current">{{ item.current }}</span>
+                        <span class="divider">/</span>
+                        <span class="total">{{ item.total }}</span>
+                      </div>
+                    </template>
+                  </el-progress>
+                  <!-- 设备名称 -->
+                  <div class="progress-name">{{ item.name }}</div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="12">
+            <div class="content-row">
+              <h2>快捷操作</h2>
+              <div class="card-header">
+                <div class="quick-item" @click="handledeviceTypeAdd">
+                  <img src="../assets/index/device_type.png" class="quick-img" />
+                  <div class="card_title">设备类型</div>
+                </div>
+                <div class="quick-item" @click="handledeviceAdd">
+                  <img src="../assets/index/device_add.png" class="quick-img" />
+                  <div class="card_title">设备添加</div>
+                </div>
+                <div class="quick-item" @click="handleGroup">
+                  <img src="../assets/index/device_group.png" class="quick-img" />
+                  <div class="card_title">分组管理</div>
+                </div>
+                <div class="quick-item" @click="handleControlPanel">
+                  <img src="../assets/index/conton.png" class="quick-img" />
+                  <div class="card_title">控制面板</div>
+                </div>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <!-- 左侧：设备使用频次 -->
+          <el-col :span="12">
+            <div class="region-chart-card">
+              <div class="card-header">
+                <h2>设备使用频次</h2>
+                <div class="chart-controls">
+                  <el-select v-model="timeRange" placeholder="选择时间范围">
+                    <el-option label="近半年" value="halfYear"></el-option>
+                    <el-option label="近一年" value="oneYear"></el-option>
+                  </el-select>
+                </div>
+              </div>
+              <div class="card-body">
+                <!-- 引入封装好的图表组件 -->
+                <DeviceFrequencyChart />
+              </div>
+            </div>
+          </el-col>
+
+          <!-- 右侧：报警信息 -->
+          <el-col :span="12">
+            <div class="region-chart-card">
+              <div class="card-header">
+                <h2>报警信息</h2>
+              </div>
+              <div class="card-body">
+                <el-row :gutter="16">
+                  <!-- 报警总览 -->
+                  <el-col :span="8">
+                    <div class="alarm-overview">
+                      <AlarmOverviewChart />
+                      <div class="alarm-stats">
+                        <div class="stat-item">
+                          <span class="stat red">365</span>
+                          <span class="label">报警总数</span>
+                        </div>
+                        <div class="stat-item">
+                          <span class="stat green">300</span>
+                          <span class="label">总处理报警</span>
+                        </div>
+                      </div>
+                    </div>
+                  </el-col>
+
+                  <!-- 报警事项 -->
+                  <el-col :span="16">
+                    <div class="alarm-items">
+                      <h3>报警事项</h3>
+                      <AlarmItemsChart />
+                    </div>
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+    <!-- <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-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 router from '@/router';
-import { 
+import DeviceFrequencyChart from './workflow/components/DeviceFrequencyChart.vue';
-  Monitor, 
+import AlarmOverviewChart from './workflow/components/AlarmOverviewChart.vue';
-  Connection, 
+import AlarmItemsChart from './workflow/components/AlarmItemsChart.vue';
-  Warning, 
-  Plus, 
-  Bell,
-  ArrowRight 
-} from '@element-plus/icons-vue'
 
 // 数据总览
-const dataOverview = ref([
+const deviceList = ref([
-  { label: '设备总量', value: '1,234', icon: 'Monitor', color: '#409eff' },
+  { name: "4G设备", current: 25, total: 100 },
-  { label: '在线设备', value: '987', icon: 'Connection', color: '#67c23a' },
+  { name: "蓝牙设备", current: 50, total: 200 },
-  { label: '异常设备', value: '45', icon: 'Warning', color: '#e6a23c' },
+  { name: "4G&蓝牙设备", current: 10, total: 40 },
-  { label: '新增绑定', value: '23', icon: 'Plus', color: '#f56c6c' },
+]);
-  { label: '设备报警', value: '12', icon: 'Bell', color: '#909399' }
+const timeRange = ref('halfYear');
-])
+// 设备类型
+const handledeviceTypeAdd = () => {
+  router.push('/equipmentManagement/deviceType');
+}
+// 设备列表
+const handledeviceAdd = () => {
+  router.push('/equipmentManagement/devices');
+}
+// 分组
+const handleGroup = () => {
+  router.push('/equipmentManagement/group');
+}
+// 控制面板
+const handleControlPanel = () => {
+  router.push('controlCenter/controlPanel');
+}
+
+
 
-// 蓝牙设备统计
-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([
@@ -161,6 +274,7 @@ const regionData = ref([
   { name: '杭州', value: 98, color: '#e6a23c' }
 ])
 
+
 // 计算最大值用于图表比例
 const maxValue = computed(() => {
   return Math.max(...regionData.value.map(item => item.value))
@@ -177,195 +291,180 @@ const selectedYear = ref('2025')
   background-color: #f5f7fa;
   min-height: calc(100vh - 84px);
 
-  .breadcrumb {
+  .data-item {
-    margin-bottom: 20px;
+    display: flex;
-    padding: 10px 0;
+    align-items: center;
-    
+    transition: all 0.3s ease;
-    .breadcrumb-dot {
+    justify-content: space-between;
-      display: inline-block;
+    width: 100%;
-      width: 6px;
+    color: rgba(255, 255, 255, 1);
-      height: 6px;
-      border-radius: 50%;
-      margin-right: 8px;
-      background-color: #c0c4cc;
-      
-      &.active {
-        background-color: #409eff;
-      }
-    }
-  }
 
-  .data-overview-card {
+    .data_bck {
-    margin-bottom: 20px;
+      width: 280px;
-    
+      height: 110px;
-    .card-header {
+      border-radius: 10px;
-      display: flex;
+      background: url('../assets/index/devices_online.png') no-repeat;
-      justify-content: space-between;
+      position: relative;
+      text-align: center;
+      background-size: 100%;
       align-items: center;
-      
-      .card-title {
-        font-size: 16px;
-        font-weight: 600;
-        color: #303133;
-      }
     }
 
-    .data-item {
+    .data_green {
-      display: flex;
+      width: 280px;
-      align-items: center;
+      height: 110px;
-      padding: 16px;
+      border-radius: 10px;
-      background: #fafafa;
+      background: url('../assets/index/online.png') no-repeat;
-      border-radius: 8px;
+      position: relative;
-      transition: all 0.3s ease;
+      background-size: 100%;
+      text-align: center;
 
-      &:hover {
+    }
-        transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-      }
 
-      .data-icon {
+    .data_orgine {
-        width: 48px;
+      width: 280px;
-        height: 48px;
+      height: 110px;
-        border-radius: 8px;
+      border-radius: 10px;
-        display: flex;
+      background: url('../assets/index/add.png') no-repeat;
-        align-items: center;
+      position: relative;
-        justify-content: center;
+      background-size: 100%;
-        margin-right: 12px;
+      text-align: center;
-        color: white;
+    }
-        font-size: 20px;
-      }
 
-      .data-content {
+    .data_red {
-        flex: 1;
+      width: 280px;
+      height: 110px;
+      border-radius: 10px;
+      background: url('../assets/index/device_yc.png') no-repeat;
+      position: relative;
+      background-size: 100%;
+      text-align: center;
+    }
 
-        .data-value {
+    .number {
-          font-size: 24px;
+      padding-top: 20px;
-          font-weight: 700;
-          color: #303133;
-          line-height: 1.2;
-        }
 
-        .data-label {
+      span {
-          font-size: 14px;
+        font-size: 36px;
-          color: #909399;
+        font-weight: 700;
-          margin-top: 4px;
-        }
       }
     }
   }
 
-  .device-stats {
+  .content-row {
-    margin-bottom: 20px;
+    background-color: #fff;
+    height: 240px;
+    border-radius: 10px;
+    padding: 5px 25px 15px 25px;
+    margin-top: 20px;
+  }
 
-    .device-card {
+  .card-header {
-      .card-header {
+    display: flex;
-        display: flex;
+    justify-content: space-between;
-        justify-content: space-between;
+    align-items: center;
-        align-items: center;
-        
-        .card-title {
-          font-size: 16px;
-          font-weight: 600;
-          color: #303133;
-        }
-      }
 
-      .device-item {
+    .card-title {
-        text-align: center;
+      font-size: 16px;
-        padding: 20px 0;
+      font-weight: 600;
+      color: #303133;
+    }
 
-        .device-value {
+    .progress-name {
-          font-size: 28px;
+      text-align: center;
-          font-weight: 700;
+      padding-top: 10px;
-          color: #409eff;
+    }
-          line-height: 1.2;
-        }
 
-        .device-label {
+    .card_title {
-          font-size: 14px;
+      padding-top: 20px;
-          color: #909399;
+      text-align: center;
-          margin-top: 8px;
+    }
-        }
+
-      }
+    .quick-item {
+      margin-top: 15px;
+      cursor: pointer;
+    }
+
+    .quick-img {
+      height: 90px;
+      width: 90px;
     }
   }
 
+
   .region-chart-card {
-    .card-header {
+    background: #fff;
-      display: flex;
+    border-radius: 8px;
-      justify-content: space-between;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-      align-items: center;
+    padding: 16px;
-      
+    height: 100%;
-      .card-title {
+  }
-        font-size: 16px;
-        font-weight: 600;
-        color: #303133;
-      }
 
-      .chart-controls {
+  .card-header {
-        display: flex;
+    display: flex;
-        gap: 12px;
+    justify-content: space-between;
-      }
+    align-items: center;
-    }
+    margin-bottom: 12px;
+  }
 
-    .chart-container {
+  .card-header h2 {
-      display: flex;
+    font-size: 18px;
-      align-items: flex-end;
+    font-weight: 600;
-      justify-content: space-between;
+    color: #333;
-      padding: 20px 0;
+    margin: 0;
-      min-height: 250px;
+  }
 
-      .chart-bars {
+  .chart-controls {
-        display: flex;
+    display: flex;
-        align-items: flex-end;
+    gap: 8px;
-        gap: 40px;
+  }
-        flex: 1;
 
-        .chart-bar-item {
+  .card-body {
-          display: flex;
+    height: calc(100% - 50px);
-          flex-direction: column;
+  }
-          align-items: center;
-          gap: 8px;
 
-          .bar-label {
+  .alarm-overview {
-            font-size: 14px;
+    display: flex;
-            color: #606266;
+    flex-direction: column;
-            font-weight: 500;
+    align-items: center;
-          }
+  }
 
-          .bar-container {
+  .alarm-stats {
-            width: 60px;
+    display: flex;
-            height: 200px;
+    justify-content: space-around;
-            display: flex;
+    width: 100%;
-            align-items: flex-end;
+    margin-top: 8px;
-            position: relative;
+  }
 
-            .bar {
+  .stat-item {
-              width: 100%;
+    text-align: center;
-              border-radius: 4px 4px 0 0;
+  }
-              transition: all 0.3s ease;
-              position: relative;
 
-              &:hover {
+  .stat {
-                transform: scaleY(1.05);
+    font-size: 16px;
-              }
+    font-weight: bold;
-            }
+    display: block;
-          }
+    margin-bottom: 4px;
+  }
 
-          .bar-value {
+  .stat.red {
-            font-size: 16px;
+    color: #ff4d4f;
-            font-weight: 600;
+  }
-            color: #303133;
-          }
-        }
-      }
 
-      .chart-nav {
+  .stat.green {
-        display: flex;
+    color: #36cbcb;
-        align-items: center;
+  }
-        padding-left: 20px;
+
-      }
+  .label {
-    }
+    font-size: 12px;
+    color: #666;
+  }
+
+  .alarm-items h3 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #333;
   }
 }
 

src/views/workflow/compontents/AlarmItemsChart.vue

@@ -0,0 +1,55 @@
+<template>
+  <div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref(null);
+let myChart = null;
+
+const initChart = () => {
+  if (chartRef.value) {
+    myChart = echarts.init(chartRef.value);
+    const option = {
+      xAxis: { type: 'category', data: ['强制报警', '撞击闯入', '手动报警', '电子围栏'] },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [50, 30, 65, 45],
+        type: 'bar',
+        itemStyle: {
+          // 柱状图渐变色
+          color: new echarts.graphic.LinearGradient(
+            0, 0, 0, 1,
+            [{ offset: 0, color: '#ff6b6b' }, { offset: 1, color: '#ffcccc' }]
+          ),
+        },
+      }],
+    };
+    myChart.setOption(option);
+  }
+};
+
+const handleResize = () => {
+  myChart && myChart.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  myChart && myChart.dispose();
+  myChart = null;
+});
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/workflow/compontents/AlarmOverviewChart.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 180px;"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref(null);
+let myChart = null;
+
+const initChart = () => {
+  if (chartRef.value) {
+    myChart = echarts.init(chartRef.value);
+    const option = {
+      series: [{
+        type: 'pie',
+        radius: ['50%', '70%'], // 环形内外半径
+        data: [{ value: 6, name: '今日报警' }, { value: 6, name: '今日处理' }],
+        color: ['#ff4d4f', '#36cbcb'], // 红、绿配色
+        label: {
+          position: 'center',
+          formatter: '6/6\n今日报警/处理', // 中心文字
+          textStyle: { align: 'center' },
+        },
+      }],
+    };
+    myChart.setOption(option);
+  }
+};
+
+const handleResize = () => {
+  myChart && myChart.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  myChart && myChart.dispose();
+  myChart = null;
+});
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/workflow/compontents/DeviceFrequencyChart.vue

@@ -0,0 +1,54 @@
+<template>
+  <!-- 用ref绑定DOM，代替原id选择器 -->
+  <div ref="chartRef" class="chart" style="width: 100%; height: 100%; min-height: 200px;"></div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'; // 引入ECharts
+
+const chartRef = ref(null); // 绑定图表容器DOM
+let myChart = null; // 存储ECharts实例
+
+// 初始化图表
+const initChart = () => {
+  if (chartRef.value) {
+    myChart = echarts.init(chartRef.value);
+    const option = {
+      xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月'] },
+      yAxis: { type: 'value' },
+      series: [{
+        data: [30, 20, 40, 32, 45, 48],
+        type: 'line',
+        areaStyle: {}, // 开启面积填充
+        itemStyle: { color: '#409eff' },
+      }],
+      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+    };
+    myChart.setOption(option);
+  }
+};
+
+// 窗口resize时，图表自适应
+const handleResize = () => {
+  myChart && myChart.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  // 组件销毁时，移除事件 + 销毁图表（防止内存泄漏）
+  window.removeEventListener('resize', handleResize);
+  myChart && myChart.dispose();
+  myChart = null;
+});
+</script>
+
+<style scoped>
+.chart {
+  width: 100%;
+  height: 100%;
+}
+</style>