设备类型，新增4G&蓝牙通讯方式

.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/index.ts

@@ -0,0 +1,24 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+// 获取 数据总览 DataOverview
+export const getDataOverview = (params) => {
+  return request({
+    url: '/api/device/homepage/getDataOverview',
+    method: 'get',
+    params: params
+  });
+};
+// 设备分类
+export const getEquipmentClassification = (params) => {
+  return request({
+    url: '/api/device/homepage/getEquipmentClassification',
+    method: 'get',
+    params: params
+  });
+};
+
+
+export default {
+    getDataOverview,
+    getEquipmentClassification
+}

src/api/home/types.ts

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

src/views/controlCenter/6170/index.vue

@@ -229,7 +229,7 @@ const laserMode = ref<LightMode>({
     active: false
 });
 
-const deviceDetail = ref<DeviceDetail>({
+const deviceDetail = ref<DeviceDetail & { typeName: string }>({
     // 重点：personnelInfo 初始化为空对象，避免 undefined
     personnelInfo: {
         unitName: '',
@@ -246,7 +246,9 @@ const deviceDetail = ref<DeviceDetail>({
     longitude: '',
     latitude: '',
     address: '',
-    sendMsg: ''
+    sendMsg: '',
+    chargeState: '0',
+    typeName: ''
 });
 // 保留原有的操作中标志位
 const isUpdatingStatus = ref(false);
@@ -429,7 +431,7 @@ const saveBtn = () => {
 // 强制报警
 const forceAlarm = async () => {
     try {
-        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '');
+        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
         forceAlarmLoading.value = true
         // 2. 准备请求数据
         const batchId = generateShortId();
@@ -586,7 +588,7 @@ const handleDeviceMessage = (msg: any) => {
                 deviceDetail.value.batteryPercentage = deviceState[3]; //电量
                 deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
                 // getList(); // 重新获取设备详情
-                if (deviceDetail.value.batteryPercentage < 20 && deviceDetail.value.chargeState == 0) {
+                if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
                     centerDialogVisible.value=true
                 }
                 break;

src/views/equipmentManagement/deviceType/index.vue

@@ -64,6 +64,7 @@
           <template #default="scope">
             <div v-if="scope.row.communicationMode == 0">4G</div>
             <div v-if="scope.row.communicationMode == 1">蓝牙</div>
+            <div v-if="scope.row.communicationMode == 2">4G&蓝牙</div>
           </template>
         </el-table-column>
         <el-table-column prop="createTime" label="创建日期" />
@@ -141,6 +142,7 @@
               <el-select v-model="form.communicationMode" placeholder="请选择">
                 <el-option label="4G" :value="0" />
                 <el-option label="蓝牙" :value="1" />
+                <el-option label="4G&蓝牙" :value="2" />
               </el-select>
             </el-form-item>
           </el-col>

src/views/equipmentManagement/devices/index.vue

@@ -44,19 +44,23 @@
       <template #header>
         <el-row :gutter="10">
           <el-col :span="1.5">
-            <el-button v-hasPermi="['equipment:devices:add']" 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 v-hasPermi="['equipment:devices:edit']" 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 v-hasPermi="['equipment:devices:export']" 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 v-hasPermi="['equipment:devices:remove']" 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>
@@ -66,7 +70,8 @@
             </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button v-hasPermi="['equipment:devices:allocate']" 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>
@@ -115,20 +120,25 @@
           <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 v-hasPermi="['equipment:devices:edit']" 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 v-hasPermi="['equipment:devices:remove']" 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 v-hasPermi="['equipment:devices:allocate']" 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 v-hasPermi="['equipment:devices:revoke']" 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 v-hasPermi="['equipment:devices:unbind']" 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>
@@ -545,6 +555,7 @@ const handleUpdate = async (row?: deviceForm) => {
 // 设备类型触发事件
 let isProcessing = false; // 添加处理锁
 const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
+  console.log(deviceTypeId, 'deviceTypeIddeviceTypeId');
   // 重置规则和显示状态
   rules.value.deviceMac = [];
   rules.value.deviceImei = [];
@@ -553,12 +564,31 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
   communicationModeInfo.value = null;
   // 编辑时如果有值，根据已有值确定显示哪个字段
   if (form.value.id) {
-    if (form.value.deviceMac) {
+    console.log('zheshi me1 ');
+    // 1. 先判断：Mac 和 Imei 都有值（新增的关键分支）
+    const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
+    const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
+    if (hasMac && hasImei) {
+      //两个都有值：显示两个字段 + 都加校验
       showMacField.value = true;
-      rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
-    } else if (form.value.deviceImei) {
       showImeiField.value = true;
+      rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
       rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
+      console.log('两个字段都有值');
+    }
+    else if (hasMac) {
+      showMacField.value = true;
+      showImeiField.value = false;
+      rules.value.deviceMac = [{ required: true, message: '请输入设备MAC', trigger: 'blur' }];
+      rules.value.deviceImei = [];
+      console.log('只有 Mac 有值');
+    }
+    else if (hasImei) {
+      showImeiField.value = true;
+      showMacField.value = false;
+      rules.value.deviceImei = [{ required: true, message: '请输入设备IMEI', trigger: 'blur' }];
+      rules.value.deviceMac = [];
+      console.log('只有 Imei 有值');
     }
     return;
   }
@@ -583,6 +613,9 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
         showImeiField.value = true;
         form.value.deviceMac = ''; // 清空MAC
         form.value.bluetoothName = '' //   清空蓝牙名称
+      } else if (res.data.communicationMode == '2') {     //既是4G设备又是蓝牙设备
+        showImeiField.value = true;
+        showMacField.value = true;
       }
     }
   } catch (error) {

src/views/index.vue

@@ -2,36 +2,36 @@
   <div class="app-container home">
     <!-- 数据总览卡片 -->
     <div>
-      <h1>数据总览</h1>
+      <h2>数据总览</h2>
       <div class="data-item">
         <div class="data_bck">
-          <div class="number"><span>100</span> 个</div>
+          <div class="number"><span>{{ DataOverview.devicesNumber }}</span> 个</div>
           <div class="title_number">设备数量</div>
         </div>
         <div class="data_green">
-          <div class="number"><span>100</span> 个</div>
+          <div class="number"><span>{{ DataOverview.equipmentOnline }}</span> 个</div>
           <div class="title_number">在线设备</div>
         </div>
         <div class="data_orgine">
-          <div class="number"><span>100</span> 个</div>
+          <div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div>
           <div class="title_number">新增绑定</div>
         </div>
         <div class="data_red">
-          <div class="number"><span>100</span> 个</div>
+          <div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
           <div class="title_number">异常设备</div>
         </div>
       </div>
-      <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"
-                <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" :percentage="(item.current / item.total) * 100">
+                <el-progress :stroke-width="7" type="circle"
-                    <!-- 自定义进度条内部内容：显示“分子/分母” -->
+                  :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
                   <template #default>
                     <div class="progress-text">
                       <span class="current">{{ item.current }}</span>
@@ -40,7 +40,6 @@
                     </div>
                   </template>
                 </el-progress>
-                  <!-- 设备名称 -->
                 <div class="progress-name">{{ item.name }}</div>
               </div>
             </div>
@@ -70,27 +69,30 @@
           </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-select v-model="timeRange" placeholder="选择时间范围" @change="updateFrequencyChart">
                   <el-option label="近半年" value="halfYear"></el-option>
                   <el-option label="近一年" value="oneYear"></el-option>
+                </el-select> -->
+                <el-select v-model="deviceType" placeholder="设备类型" style="width: 150px;">
+                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
+                    :value="item.deviceTypeId" />
                 </el-select>
               </div>
             </div>
             <div class="card-body">
-                <!-- 引入封装好的图表组件 -->
+              <!-- 图表容器：设备使用频次 -->
-                <!-- <DeviceFrequencyChart /> -->
+              <div ref="frequencyChartRef" class="chart-container"></div>
             </div>
           </div>
         </el-col>
-
-          <!-- 右侧：报警信息 -->
         <el-col :span="12">
           <div class="region-chart-card">
             <div class="card-header">
@@ -98,28 +100,29 @@
             </div>
             <div class="card-body">
               <el-row :gutter="16">
-                  <!-- 报警总览 -->
                 <el-col :span="8">
                   <div class="alarm-overview">
-                      <!-- <AlarmOverviewChart /> -->
+                    <!-- 环形图容器：今日报警处理占比 -->
+                    <div ref="alarmRingChartRef" class="chart-container"></div>
                     <div class="alarm-stats">
                       <div class="stat-item">
-                          <span class="stat red">365</span>
+                        <div class="stat red">365</div>
-                          <span class="label">报警总数</span>
+                        <div class="label">报警总数</div>
                       </div>
                       <div class="stat-item">
-                          <span class="stat green">300</span>
+                        <div class="stat green">300</div>
-                          <span class="label">总处理报警</span>
+                        <div class="label">总处理报警</div>
                       </div>
                     </div>
                   </div>
                 </el-col>
 
-                  <!-- 报警事项 -->
+                <!-- 报警事项 + 柱状图 -->
                 <el-col :span="16">
                   <div class="alarm-items">
                     <h3>报警事项</h3>
-                      <!-- <AlarmItemsChart /> -->
+                    <!-- 柱状图容器：各类型报警次数 -->
+                    <div ref="alarmBarChartRef" class="chart-container"></div>
                   </div>
                 </el-col>
               </el-row>
@@ -129,160 +132,331 @@
       </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 api from '@/api/home/index'
+import { DataOverviewType } from '@/api/home/types'
 import router from '@/router';
-import DeviceFrequencyChart from './workflow/components/DeviceFrequencyChart.vue';
+import * as echarts from 'echarts'; // 引入ECharts核心库
-import AlarmOverviewChart from './workflow/components/AlarmOverviewChart.vue';
+import apiTypeAll from '@/api/equipmentManagement/device/index';
-import AlarmItemsChart from './workflow/components/AlarmItemsChart.vue';
+const DataOverview = ref<DataOverviewType>({
-
+  devicesNumber: 0,
-// 数据总览
+  equipmentOnline: 0,
+  bindingNew: 0,
+  equipmentAbnormal: 0
+});
+const deviceTypeOptions = ref([]); //设备类型
+const deviceType = ref()
+// ---------------------- 基础数据 ----------------------
+// 设备分类数据
 const deviceList = ref([
-  { name: "4G设备", current: 25, total: 100 },
+  { name: "4G设备", current: 0, total: 0 },
-  { name: "蓝牙设备", current: 50, total: 200 },
+  { name: "蓝牙设备", current: 0, total: 0 },
-  { name: "4G&蓝牙设备", current: 10, total: 40 },
+  { name: "4G&蓝牙设备", current: 0, total: 0 },
 ]);
+// 时间范围（控制设备使用频次图表）
 const timeRange = ref('halfYear');
-// 设备类型
+
+// ---------------------- 图表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;
+let alarmBarChartInstance: echarts.ECharts | null = null;
+
+// ---------------------- 快捷操作方法 ----------------------
 const handledeviceTypeAdd = () => {
   router.push('/equipmentManagement/deviceType');
-}
+};
-// 设备列表
 const handledeviceAdd = () => {
   router.push('/equipmentManagement/devices');
-}
+};
-// 分组
 const handleGroup = () => {
   router.push('/equipmentManagement/group');
-}
+};
-// 控制面板
 const handleControlPanel = () => {
   router.push('controlCenter/controlPanel');
+};
+
+// ---------------------- 图表初始化方法 ----------------------
+/**
+ * 1. 设备使用频次折线图
+ */
+const initFrequencyChart = () => {
+  if (!frequencyChartRef.value) return;
+
+  // 初始化图表实例
+  frequencyChartInstance = echarts.init(frequencyChartRef.value);
+
+  // 假数据：按时间范围区分
+  const chartData = timeRange.value === 'halfYear'
+    ? {
+      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      yAxis: [320, 280, 450, 380, 520, 480], // 近半年使用次数
+      peak: { name: '峰值', value: 520, month: '5月' }
     }
+    : {
+      xAxis: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+      yAxis: [320, 280, 450, 380, 520, 480, 550, 620, 580, 490, 530, 650], // 近一年使用次数
+      peak: { name: '峰值', value: 650, month: '12月' }
+    };
 
+  // ECharts配置项
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      formatter: '{b}: {c} 次'
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: chartData.xAxis,
+      axisLabel: {
+        interval: 0 // 强制显示所有x轴标签
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '使用次数',
+      min: 0,
+      max: Math.max(...chartData.yAxis) + 100 // y轴最大值留有余量
+    },
+    series: [
+      {
+        name: '使用频次',
+        type: 'line',
+        data: chartData.yAxis,
+        smooth: false, // 平滑折线
+        lineStyle: {
+          width: 3,
+          color: '#409eff'
+        },
+        itemStyle: {
+          color: '#409eff',
+          radius: 5
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [{
+              offset: 0, color: 'rgba(64, 158, 255, 0.3)'
+            }, {
+              offset: 1, color: 'rgba(64, 158, 255, 0)'
+            }]
+          }
+        },
+        // 标记峰值
+        markPoint: {
+          data: [{
+            name: chartData.peak.name,
+            value: chartData.peak.value,
+            xAxis: chartData.xAxis.indexOf(chartData.peak.month),
+            yAxis: chartData.peak.value,
+            itemStyle: {
+              color: '#ff4d4f'
+            }
+          }]
+        }
+      }
+    ]
+  };
 
+  // 渲染图表
+  frequencyChartInstance.setOption(option);
+};
 
+/**
+ * 2. 报警环形图（今日报警处理占比）
+ */
+const initAlarmRingChart = () => {
+  if (!alarmRingChartRef.value) return;
 
+  alarmRingChartInstance = echarts.init(alarmRingChartRef.value);
 
-// 地区分布数据
+  // 假数据：今日报警6次，已处理6次
-const regionData = ref([
+  const option = {
-  { name: '北京', value: 156, color: '#409eff' },
+    tooltip: {
-  { name: '上海', value: 134, color: '#67c23a' },
+      trigger: 'item',
-  { name: '杭州', value: 98, color: '#e6a23c' }
+      formatter: '{b}: {c} 次 ({d}%)'
-])
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '60%'], // 环形半径
+        center: ['50%', '50%'], // 居中显示
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'center',
+          formatter: '6/6\n今日报警/处理', // 中心显示“今日 已处理/总数”
+          fontSize: 16,
+          fontWeight: 'bold',
+          color: '#333'
+        },
+        labelLine: {
+          show: false
+        },
+        data: [
+          { value: 6, name: '已处理报警', itemStyle: { color: '#07BE75' } },
+          { value: 0, name: '未处理报警', itemStyle: { color: '#F65757' } }
+        ]
+      }
+    ]
+  };
 
+  alarmRingChartInstance.setOption(option);
+};
 
-// 计算最大值用于图表比例
+/**
-const maxValue = computed(() => {
+ * 3. 报警柱状图（各类型报警次数）
-  return Math.max(...regionData.value.map(item => item.value))
+ */
+const initAlarmBarChart = () => {
+  if (!alarmBarChartRef.value) return;
+
+  alarmBarChartInstance = echarts.init(alarmBarChartRef.value);
+
+  // 假数据：各类型报警次数
+  const alarmTypes = ['强制报警', '撞击闯入', '手动报警', '电子围栏'];
+  const alarmCounts = [50, 35, 65, 50]; // 对应各类型次数
+
+  // ECharts配置项
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      formatter: '{b}: {c} 次'
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: {
+      type: 'category',
+      data: alarmTypes,
+      axisLabel: {
+        interval: 0,
+        //rotate: 15 // 标签旋转，避免重叠
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '报警次数',
+      min: 0
+    },
+    series: [
+      {
+        name: '报警次数',
+        type: 'bar',
+        data: alarmCounts,
+        barWidth: '40%',
+        itemStyle: {
+          color: (params: any) => {
+            // 不同类型报警用不同颜色
+            const colors = ['#ff4d4f', '#e6a23c', '#409eff', '#67c23a'];
+            return colors[params.dataIndex];
+          }
+        }
+      }
+    ]
+  };
+
+  alarmBarChartInstance.setOption(option);
+};
+
+// ---------------------- 图表更新方法（时间范围切换时） ----------------------
+const updateFrequencyChart = () => {
+  // 先销毁旧实例，再重新初始化
+  if (frequencyChartInstance) {
+    frequencyChartInstance.dispose();
+  }
+  initFrequencyChart();
+};
+// 首页统计接口
+const getData = async () => {
+  //  设备总览
+  api.getDataOverview({}).then(res => {
+    DataOverview.value = res.data
   })
+  // 设备分类
+  try {
+    const res = await api.getEquipmentClassification({});
+    console.log(res, 'resss');
+    const { equipment4G, deviceBluetooth, devices4GAndBluetooth, total } = res.data;
+    // 映射数据：current 为各类型设备数量，total 为总设备数（6）
+    deviceList.value = [
+      {
+        name: "4G设备",
+        current: equipment4G,
+        total: total
+      },
+      {
+        name: "蓝牙设备",
+        current: deviceBluetooth,
+        total: total
+      },
+      {
+        name: "4G&蓝牙设备",
+        current: devices4GAndBluetooth,
+        total: total
+      },
+    ];
+  } catch (error) {
+    console.log('获取设备分类数据失败：', error);
+  }
+  // 设备类型
+  apiTypeAll.deviceTypeAll().then(res => {
+    if (res.code == 200) {
+      deviceTypeOptions.value = res.data
+    }
+  }).catch(err => {
 
-// 选择器数据
+  })
-const selectedMonth = ref('7')
+};
-const selectedYear = ref('2025')
+
+
+
+
+
+
+
+
+// ---------------------- 生命周期钩子（初始化/销毁图表） ----------------------
+onMounted(() => {
+  // 页面加载时初始化所有图表
+  initFrequencyChart();
+  initAlarmRingChart();
+  initAlarmBarChart();
+  getData()
+
+  // 监听窗口 resize，自动调整图表大小
+  window.addEventListener('resize', () => {
+    frequencyChartInstance?.resize();
+    alarmRingChartInstance?.resize();
+    alarmBarChartInstance?.resize();
+  });
+});
+
+onUnmounted(() => {
+  // 页面销毁时销毁图表实例，避免内存泄漏
+  frequencyChartInstance?.dispose();
+  alarmRingChartInstance?.dispose();
+  alarmBarChartInstance?.dispose();
+  window.removeEventListener('resize', () => { });
+});
 </script>
 
 <style lang="scss" scoped>
@@ -291,113 +465,112 @@ const selectedYear = ref('2025')
   background-color: #f5f7fa;
   min-height: calc(100vh - 84px);
 
+  // 数据总览卡片样式
   .data-item {
     display: flex;
     align-items: center;
-    transition: all 0.3s ease;
     justify-content: space-between;
     width: 100%;
     color: rgba(255, 255, 255, 1);
+    margin-bottom: 20px;
 
-    .data_bck {
+    .data_bck,
-      width: 280px;
+    .data_green,
-      height: 110px;
+    .data_orgine,
-      border-radius: 10px;
-      background: url('../assets/index/devices_online.png') no-repeat;
-      position: relative;
-      text-align: center;
-      background-size: 100%;
-      align-items: center;
-    }
-
-    .data_green {
-      width: 280px;
-      height: 110px;
-      border-radius: 10px;
-      background: url('../assets/index/online.png') no-repeat;
-      position: relative;
-      background-size: 100%;
-      text-align: center;
-
-    }
-
-    .data_orgine {
-      width: 280px;
-      height: 110px;
-      border-radius: 10px;
-      background: url('../assets/index/add.png') no-repeat;
-      position: relative;
-      background-size: 100%;
-      text-align: center;
-    }
-
     .data_red {
       width: 280px;
       height: 110px;
       border-radius: 10px;
-      background: url('../assets/index/device_yc.png') no-repeat;
       position: relative;
-      background-size: 100%;
       text-align: center;
+      background-size: 100% 100%; // 确保背景图充满容器
+    }
+
+    .data_bck {
+      background: url('../assets/index/devices_online.png') no-repeat;
+    }
+
+    .data_green {
+      background: url('../assets/index/online.png') no-repeat;
+    }
+
+    .data_orgine {
+      background: url('../assets/index/add.png') no-repeat;
+    }
+
+    .data_red {
+      background: url('../assets/index/device_yc.png') no-repeat;
     }
 
     .number {
       padding-top: 20px;
+      font-size: 18px;
 
       span {
         font-size: 36px;
         font-weight: 700;
-      }
+        margin-right: 5px;
       }
     }
 
+    .title_number {
+      margin-top: 5px;
+      font-size: 16px;
+    }
+  }
+
+  // 设备分类/快捷操作卡片样式
   .content-row {
     background-color: #fff;
     height: 240px;
     border-radius: 10px;
-    padding: 5px 25px 15px 25px;
+    padding: 15px 25px;
-    margin-top: 20px;
+    margin-bottom: 20px;
+
+    h2 {
+      font-size: 18px;
+      font-weight: 600;
+      color: #333;
+      margin: 0 0 15px 0;
     }
 
-  .card-header {
+    .progress-item {
-    display: flex;
+      text-align: center;
-    justify-content: space-between;
-    align-items: center;
 
-    .card-title {
+      .progress-text {
-      font-size: 16px;
+        font-size: 20px;
-      font-weight: 600;
+        color: #666;
-      color: #303133;
+
+        .current {
+          font-weight: bold;
+          color: #000;
+          font-size: 23px;
+        }
       }
 
       .progress-name {
-      text-align: center;
+        margin-top: 10px;
-      padding-top: 10px;
+        font-size: 14px;
+        color: #666;
       }
-
-    .card_title {
-      padding-top: 20px;
-      text-align: center;
     }
 
     .quick-item {
-      margin-top: 15px;
       cursor: pointer;
-    }
+      text-align: center;
+      margin-top: 25px;
 
       .quick-img {
-      height: 90px;
+        width: 80px;
-      width: 90px;
+        height: 80px;
-    }
       }
 
-
+      .card_title {
-  .region-chart-card {
+        margin-top: 20px;
-    background: #fff;
+        font-size: 16px;
-    border-radius: 8px;
+        color: #333;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+      }
-    padding: 16px;
+    }
-    height: 100%;
   }
 
   .card-header {
@@ -405,46 +578,53 @@ const selectedYear = ref('2025')
     justify-content: space-between;
     align-items: center;
     margin-bottom: 12px;
-  }
 
-  .card-header h2 {
+    h2 {
       font-size: 18px;
       font-weight: 600;
       color: #333;
       margin: 0;
     }
-
-  .chart-controls {
-    display: flex;
-    gap: 8px;
   }
 
+  // 图表卡片样式
+  .region-chart-card {
+    background: #fff;
+    border-radius: 10px;
+    padding: 16px;
+    height: 360px; // 固定图表卡片高度，避免布局错乱
+
+
     .card-body {
-    height: calc(100% - 50px);
+      height: calc(100% - 40px); // 卡片内容区高度（减去header高度）
     }
 
+    // 图表容器通用样式（必须设置宽高，否则图表无法渲染）
+    .chart-container {
+      width: 100%;
+      height: 250px;
+    }
+  }
+
+  // 报警信息区域样式
   .alarm-overview {
+    height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
-  }
 
     .alarm-stats {
+      // width: 100%;
       display: flex;
-    justify-content: space-around;
+      // flex-direction: column;
-    width: 100%;
+      gap: 15px;
-    margin-top: 8px;
-  }
 
       .stat-item {
         text-align: center;
-  }
 
         .stat {
-    font-size: 16px;
+          font-size: 18px;
           font-weight: bold;
-    display: block;
-    margin-bottom: 4px;
         }
 
         .stat.red {
@@ -452,52 +632,50 @@ const selectedYear = ref('2025')
         }
 
         .stat.green {
-    color: #36cbcb;
+          color: #07BE75;
         }
 
         .label {
           font-size: 12px;
           color: #666;
         }
+      }
+    }
+  }
 
-  .alarm-items h3 {
+  .alarm-items {
+    height: 100%;
+
+    h3 {
       font-size: 16px;
       font-weight: 600;
-    margin-bottom: 8px;
       color: #333;
+      margin: 0 0 10px 0;
+    }
   }
 }
 
-// 响应式设计
+// 响应式适配（小屏幕下调整布局）
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
   .home {
-    padding: 10px;
-
-    .data-overview-card {
     .data-item {
-        margin-bottom: 10px;
+      flex-wrap: wrap;
+      gap: 15px;
+
+      .data_bck,
+      .data_green,
+      .data_orgine,
+      .data_red {
+        width: calc(50% - 7.5px); // 小屏幕下2列布局
       }
     }
 
-    .device-stats {
     .el-col {
+      &:span-12 {
+        width: 100%;
         margin-bottom: 20px;
       }
     }
-
-    .region-chart-card {
-      .chart-container {
-        .chart-bars {
-          gap: 20px;
-
-          .chart-bar-item {
-            .bar-container {
-              width: 40px;
-            }
-          }
-        }
-      }
-    }
   }
 }
 </style>

src/views/workflow/compontents/AlarmItemsChart.vue

@@ -1,55 +0,0 @@
-<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

@@ -1,53 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-<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>