设备列表

# Conflicts:
#	src/views/fys-equipment/fenceAccessRecord/index.vue

.env.development

@@ -5,9 +5,11 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
-VITE_APP_BASE_API = 'http://192.168.110.54:8000'
-# VITE_APP_BASE_API = 'http://localhost:8000'
+ #VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
+VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
+#VITE_APP_BASE_API = 'http://192.168.2.23:8000'   
+#代永飞接口
+# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   
 
 
 # 应用访问路径 例如使用前缀 /admin/

index.html

@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit" />
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
     <link rel="icon" href="/favicon.ico" />
-      <script src="https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307"></script>
+      <script src="https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307&plugin=AMap.CircleEditor"></script>
     <title>物联网管理平台</title>
     <!--[if lt IE 11
       ]><script>

package.json

@@ -37,6 +37,7 @@
     "jsencrypt": "3.3.2",
     "mitt": "^3.0.1",
     "nprogress": "0.2.0",
+    "paho-mqtt": "^1.1.0",
     "pinia": "3.0.2",
     "qrcode-vue3": "^1.7.1",
     "screenfull": "6.0.2",
@@ -55,9 +56,9 @@
     "@types/js-cookie": "3.0.6",
     "@types/node": "^22.13.4",
     "@types/nprogress": "0.2.3",
-    "@unocss/preset-attributify": "66.0.0",
-    "@unocss/preset-icons": "66.0.0",
-    "@unocss/preset-uno": "66.0.0",
+    "@unocss/preset-attributify": "^66.0.0",
+    "@unocss/preset-icons": "^66.0.0",
+    "@unocss/preset-uno": "^66.0.0",
     "@vitejs/plugin-vue": "5.2.3",
     "@vue/compiler-sfc": "3.5.13",
     "@vue/eslint-config-prettier": "10.2.0",
@@ -71,12 +72,12 @@
     "sass": "1.87.0",
     "terser": "^5.43.1",
     "typescript": "~5.8.3",
-    "unocss": "66.0.0",
+    "unocss": "^66.0.0",
     "unplugin-auto-import": "19.1.2",
     "unplugin-icons": "22.1.0",
     "unplugin-vue-components": "28.5.0",
     "unplugin-vue-setup-extend-plus": "1.0.1",
-    "vite": "^7.1.3",
+    "vite": "^6.3.6",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-svg-icons-ng": "^1.4.0",
     "vite-plugin-vue-devtools": "7.7.5",

src/api/FenceManager/fence.ts

@@ -0,0 +1,77 @@
+import request from '@/utils/request';
+
+//修改电子围栏
+function updateFence(data) {
+    return request({
+        url: '/api/equipment/geoFence',
+        method: 'put',
+        data: data
+    })
+}
+
+//新增电子围栏
+function AddFence(data) {
+    return request({
+        url: '/api/equipment/geoFence',
+        method: 'post',
+        data: data
+    })
+}
+
+//导出电子围栏列表
+function exportFence (data){
+    return request({
+        url: '/api/equipment/geoFence/export',
+        method: 'post',
+        data: data
+    })
+}
+
+//位置检查
+function check(data) {
+    return request({
+        url: '/api/equipment/geoFence/check',
+        method: 'post',
+        data: data
+    })
+}
+
+//获取电子围栏详细信息
+function geoFenceById(id) {
+    return request({
+        url: '/api/equipment/geoFence/'+id,
+        method: 'get'
+    })
+}
+
+//查询电子围栏列表
+function getList(data) {
+    if(!data){
+        data={pageNum:1,pageSize:9999};
+    }
+    return request({
+        url: '/api/equipment/geoFence/list',
+        method: 'get',
+        params: data
+    })
+}
+
+//删除电子围栏
+function DelFence(ids) {
+    return request({
+        url: '/api/equipment/geoFence/' + ids,
+        method: 'delete'
+    })
+}
+
+export default{
+    updateFence:updateFence,
+    AddFence:AddFence,
+    exportFence:exportFence,
+    check:check,
+    geoFenceById:geoFenceById,
+    getList:getList,
+    DelFence:DelFence
+}
+
+

src/api/FenceManager/mapOpt.ts

@@ -0,0 +1,239 @@
+var map = null;
+var circle = null;
+var polygon = null;
+
+
+function initMap() {
+    // let key = '90bc158992feb8ccd0145e168cab1307';
+    let init = function () {
+        map = new AMap.Map("map", {
+            viewMode: '2D', //默认使用 2D 模式
+            zoom: 11, //地图级别
+            center: [114.420739, 30.487514], //地图中心点
+        });
+
+        map.on('click',function(evt){
+          alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
+        });
+    }
+    return new Promise((resolve, reject) => {
+        if(map){
+            resolve(200);
+            return;
+        }
+        if (window.AMap) {
+            init();
+            resolve(200);
+            return;
+        }
+            reject({code:500,msg:'高德地图未能初始化成功'});
+    });
+
+}
+
+//添加一个点
+function AddPoint(point, index, dragEnd, click) {
+
+    return new Promise((resolve, reject) => {
+        try {
+            let center = point ? new AMap.LngLat(point.lng, point.lat) : map.getCenter();
+
+            let marker = new AMap.Text({
+                icon: "http://wdxm.ztzhtech.com:8111/Script/Home/img/welComeImg/mapLocation.png",
+                position: center,
+                offset: new AMap.Pixel(-15, -24),
+                draggable: true,
+                cursor: 'point',
+                title: '点击删除',
+                text: index,
+                class: 'point',
+                extData: { type: 'point', txt: index }
+            });
+            marker.setMap(map);
+
+            let lays = map.getAllOverlays('text');
+            for (let i = 0; i < lays.length; i++) {
+                const element = lays[i];
+                let cls = element.getOptions();
+                if (cls.class) {
+                    element.dom.classList.add(cls.class);
+                }
+            }
+
+            marker.on('dragend', dragEnd);
+            marker.on('mouseover', function (evt) {
+                marker.setText('X');
+
+            });
+            marker.on('mouseout', function (evt) {
+                marker.setText(marker.getExtData().txt);
+
+            });
+            marker.on('click', function (evt) {
+
+                click(evt, marker);
+            });
+            resolve(center);
+        } catch (ex) {
+            reject(ex)
+        }
+
+    });
+
+
+}
+
+function getCenter() {
+    var center = map.getCenter().toJSON();
+    return center;
+}
+
+function setCenter(lon, lat) {
+    var position = new AMap.LngLat(lon, lat); //传入经纬度    
+    map.setCenter(position); //简写 设置地图中心点
+    
+}
+//画多边形
+function DrawPoy(points) {
+    if(!map){
+        return;
+    }
+    if (!points) {
+        return;
+    }
+    let path = [];
+    if (polygon) {
+        map.remove(polygon);
+        polygon = null;
+
+    }
+
+    setTimeout(() => {
+        points.filter(v => {
+            path.push(new AMap.LngLat(v.lng, v.lat));
+            return true;
+        });
+
+        polygon = new AMap.Polygon({
+            path: path,
+            fillColor: '#ccebc5',
+            strokeOpacity: 1,
+            fillOpacity: 0.5,
+            strokeColor: '#FF0000',
+            strokeWeight: 5,
+            strokeStyle: 'solid',
+            strokeDasharray: [5, 5],
+        });
+
+        map.add(polygon);
+
+        //   map.setFitView();
+    }, 0);
+
+}
+//画圆形
+function DrawCicle(points, raduis, dragEnd) {
+    if(!map){
+        return;
+    }
+    if (circle) {
+        map.remove(circle);
+    }
+
+    circle = new AMap.Circle({
+        center: [points[0].lng, points[0].lat],
+        radius: raduis ? raduis : 1000, //半径
+        borderWeight: 3,
+        strokeColor: "#FF33FF",
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillOpacity: 0.4,
+        strokeStyle: 'solid',
+        strokeDasharray: [10, 10],
+        // 线样式还支持 'dashed'
+        fillColor: '#1791fc',
+        zIndex: 50,
+    })
+
+    // var circleEditor = new AMap.CircleEditor(map, circle,{
+    //    editOptions: {
+    //             moveable: false, // 禁止拖拽圆心
+    //             // 可以同时配置其他编辑选项
+    //             // scalable: true // 允许缩放(默认开启)
+    //         }
+    // });
+
+    // circleEditor.open();
+
+    // circleEditor.on('move', function (event) {
+
+    //     console.log('触发事件：move')
+    // })
+
+    // circleEditor.on('adjust', function (event) {
+    //     console.log('触发事件：adjust');
+
+    //     dragEnd(event.radius);
+    // })
+
+    // circleEditor.on('end', function (event) {
+
+    //     console.log('触发事件： end')
+    //     // event.target 即为编辑后的圆形对象
+    // })
+
+    map.add(circle);
+    // 缩放地图到合适的视野级别
+    map.setFitView([circle])
+}
+
+//清除所有
+function clearOverLays() {
+   map && map.clearMap();
+}
+
+
+
+function removeOverLay(lay) {
+  map &&  map.remove(lay);
+}
+
+function removePoy() {
+    if(!map){
+        return;
+    }
+    if (polygon) {
+        map.remove(polygon);
+        polygon = null;
+    }
+
+}
+function removeCircle() {
+    if(!map){
+        return;
+    }
+    if (circle) {
+        map.remove(circle);
+        circle = null;
+
+
+    }
+
+}
+
+function setFitView() {
+    if(map){map.setFitView();}
+}
+export default {
+    gdMap: map,
+    initMap: initMap,
+    AddPoint: AddPoint,
+    getCenter: getCenter,
+    DrawPoy: DrawPoy,
+    DrawCicle: DrawCicle,
+    clearOverLays: clearOverLays,
+    removeOverLay: removeOverLay,
+    removePoy: removePoy,
+    removeCircle: removeCircle,
+    setFitView: setFitView
+}

src/api/FenceManager/record.ts

@@ -0,0 +1,62 @@
+import request from '@/utils/request';
+import common from '@/utils/common';
+
+//修改围栏进出记录
+function updateRecord(data) {
+    return request({
+        url: '/api/equipment/fenceAccessRecord',
+        method: 'put',
+        data: data
+    })
+}
+
+//新增围栏进出记录
+function addRecord(data) {
+    return request({
+        url: '/api/equipment/fenceAccessRecord',
+        method: 'post',
+        data: data
+    })
+}
+
+
+
+//获取围栏进出记录详细信息
+function getRecordById(id) {
+    return request({
+        url: '/api/equipment/fenceAccessRecord/' + id,
+        method: 'get'
+    })
+}
+
+//查询围栏进出记录列表
+function RecordList(data) {
+    let queryParams = Object.assign({}, data);
+    if (queryParams.Date && queryParams.Date.length) {
+        queryParams.beginTime = common.DateFormat(queryParams.Date[0], 'yyyy-MM-dd');
+        queryParams.endTime = common.DateFormat(queryParams.Date.length > 1 ? queryParams.Date[1] : '', 'yyyy-MM-dd');
+    }
+    delete queryParams['Date'];
+    return request({
+        url: '/api/equipment/fenceAccessRecord/list',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+//删除围栏进出记录
+function DropRecord(ids) {
+    return request({
+        url: '/api/equipment/fenceAccessRecord/' + ids,
+        method: 'delete'
+    })
+}
+
+
+export default {
+    updateRecord: updateRecord,
+    addRecord: addRecord,
+    getRecordById: getRecordById,
+    RecordList: RecordList,
+    DropRecord: DropRecord
+}

src/api/controlCenter/controlPanel/670.ts

@@ -0,0 +1,75 @@
+import request from '@/utils/request';
+
+// 人员信息发送
+function SendUser (data: any) {
+    return request({
+        url: `/api/xinghan/device/registerPersonInfo`,
+        method: 'post',
+        data: data
+    });
+};
+
+// 灯光模式
+function lightModeSettings (data: any) {
+    return request({
+        url: `/api/xinghan/device/LightGradeSettings`,
+        method: 'post',
+        data: data
+    });
+};
+
+// 强制报警
+function SosSetting  (data: any) {
+    return request({
+        url: `/api/xinghan/device/SOSGradeSettings`,
+        method: 'post',
+        data: data
+    });
+};
+//批量强制报警
+function SosSettingBatch(data:any){
+     return request({
+        url: `/api/xinghan/device/SOSGradeSettingsBatch`,
+        method: 'post',
+        data: data
+    });
+}
+
+//静电探测档位控制
+function staticPowerSetting  (data: any)  {
+    return request({
+        url: `/api/xinghan/device/DetectGradeSettings`,
+        method: 'post',
+        data: data
+    });
+};
+
+// 获取设备实时状态
+function deviceRealTimeStatus  (id: any)  {
+    return request({
+        url: `/api/xinghan/device/`+id,
+        method: 'get'        
+    });
+};
+
+// 发送信息
+function SendMessage  (data: any)  {
+    return request({
+        url: `/api/xinghan/device/sendAlarmMessage`,
+        method: 'post',
+        data: data
+    });
+};
+
+
+
+
+export default {
+   SendUser:SendUser,
+   lightModeSettings:lightModeSettings,
+   SosSetting:SosSetting,
+   staticPowerSetting:staticPowerSetting,
+   deviceRealTimeStatus:deviceRealTimeStatus,
+   SendMessage:SendMessage,
+   SosSettingBatch:SosSettingBatch
+};

src/api/controlCenter/controlPanel/eqControl.ts

@@ -0,0 +1,114 @@
+import xhyc from '@/api/controlCenter/controlPanel/670'
+import fys from '@/api/controlCenter/controlPanel/index'
+
+
+var dic = [{
+    typeNames: ['670'],//星汉的配置
+    sendMsg: {
+        cfg: ['sendMsg', 'deviceIds', 'deviceImeiList', 'instructValue', 'batchId'],
+        method: xhyc.SendMessage
+    },
+    SOS: {
+
+        cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "instructValue"],
+        method: xhyc.SosSettingBatch
+    },
+    sendImg: {
+        cfg: [],
+        method: null
+    }
+},
+{
+    typeNames: ['6170', '210'],//富源晟的配置
+    sendMsg: {
+        cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "sendMsg"],
+        method: fys.deviceSendMessage
+    },
+    SOS: {
+        cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "instructValue"],
+        method: fys.sendAlarmMessage
+    },
+    sendImg: {
+        cfg: [],
+        method: null
+    }
+},
+{
+    typeNames: null,//如果找不到，以富源晟的配置为准
+    sendMsg: {
+        cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "sendMsg"],
+        method: fys.deviceSendMessage
+    },
+    SOS: {
+        cfg: ["deviceIds", "typeName", "batchId", "deviceImeiList", "instructValue"],
+        method: fys.sendAlarmMessage
+    },
+    sendImg: {
+        cfg: [],
+        method: null
+    }
+    
+}
+];
+
+function getCfg(json, type) {
+    let f = dic.find(v => {
+
+        let flag = false;
+        for (let index = 0; index < v.typeNames.length; index++) {
+            let i = v.typeNames[index];
+            if (i.toLowerCase().indexOf(json.typeName.toLowerCase()) > -1 || json.typeName.toLowerCase().indexOf(i.toLowerCase()) > -1) {
+                flag = true;
+                break;
+            }
+        }
+        return flag;
+    });
+
+    if (!f) {
+        f = dic.find(v => {
+            return !v.typeNames;
+        });
+    }
+    if (f) {
+        let keys = f[type].cfg;
+        let method = f[type].method;
+
+        let formData = {};
+        keys.forEach(key => {
+            formData[key] = json[key];
+        });
+
+        return {
+            formData: formData,
+            method: method
+        }
+
+
+    }
+    return null;
+}
+
+//发送信息
+function deviceSendMessage(json) {
+    let cfg = getCfg(json, 'sendMsg');
+    if (cfg.method) {
+        return cfg.method(cfg.formData);
+    }
+    return Promise.reject({ code: 500, msg: '配置中找不到该类型的设备' });
+
+}
+
+//强制报警
+function sendAlarmMessage(json) {
+    
+ let cfg = getCfg(json, 'SOS');
+    if (cfg.method) {
+        return cfg.method(cfg.formData);
+    }
+    return Promise.reject({ code: 500, msg: '配置中找不到该类型的设备' });
+}
+export default {
+    deviceSendMessage: deviceSendMessage,
+    sendAlarmMessage: sendAlarmMessage
+}

src/api/controlCenter/controlPanel/types.ts

@@ -3,14 +3,14 @@ export interface deviceQuery {
   pageNum: number;
   deviceId: string;
   deviceName: string;
-  deviceStatus: string;
+  onlineStatus: string;
   deviceMac: string;
   deviceImei: string;
   personnelBy: string;
   communicationMode: string;
   pageSize: Number;
   deviceType: string;
-  content:string
+  content: string
 
 }
 export interface deviceVO {
@@ -20,7 +20,7 @@ export interface deviceVO {
   onlineStatus: 0 | 1; // 设备状态（0=失效/离线，1=正常/在线，对应子组件的device.status）
   lng?: number;        // 经度（地图打点用）
   lat?: number;        // 纬度（地图打点用
-  
+
   // 其他字段...
 }
 // 1. 定义设备详情的类型（根据接口返回字段调整！关键：和后端返回的字段名一致）
@@ -42,7 +42,8 @@ export interface DeviceDetail {
     name: string;           // 姓名
     code: string;         // ID（身份证/工号）
   };
-
+  chargeState: string;
+  alarmStatus:number
 }
 // 定义灯光模式的类型接口
 export interface LightMode {

src/api/debugCenter/debugCenter.ts

@@ -0,0 +1,89 @@
+import request from '@/utils/request';
+
+//获取列表数据
+function getDevice(queryParams){
+    return request({
+    url: '/api/device/debug/list',
+    method: 'get',
+    params: queryParams
+  })
+}
+
+//上传文件
+function uploadFile(formData){
+    return request({
+    url: '/api/device/debug/addFile',
+    method: 'post',
+    data: formData
+  })
+}
+
+//修改操作视频
+function addVideo(formData){
+    return request({
+    url: '/api/device/debug/addVideo',
+    method: 'post',
+    data: formData
+  })
+}
+
+
+//修改单个数据的多个文件
+function updateItem(formData){
+  
+    return request({
+    url: '/api/device/debug/editDebug',
+    method: 'post',
+    data: formData
+  })
+  //开发时假装成功
+  // return new Promise((resolve,reject)=>{
+  //    resolve({
+  //     code:200,
+  //     msg:"操作成功"
+  //    });
+  // });
+}
+//批量上传开机画面
+function uploadBoot(formData){
+   return request({
+    url: '/api/device/debug/addLogo',
+    method: 'post',
+    data: formData
+  })
+  //开发时假装成功
+  //  return new Promise((resolve, reject) => {
+  //       //开机画面
+  //       resolve({ code: 200, msg: '操作成功' });
+  //     });
+}
+
+// 6170上传logo开机画面
+function deviceUploadLogo(formData){
+   return request({
+    url: '/api/bjq/device/batchUploadLogo',
+    method: 'post',
+    data: formData
+  })
+}
+
+
+function getDeviceInfoById(id){
+     return request({
+    url: '/api/device/debug/detail/'+id,
+    method: 'get'
+  })
+}
+
+
+
+
+export default{
+    getDevice:getDevice,
+    uploadFile:uploadFile,
+    addVideo:addVideo,
+    updateItem:updateItem,
+    uploadBoot:uploadBoot,
+    getDeviceInfoById:getDeviceInfoById,
+    deviceUploadLogo:deviceUploadLogo
+}

src/api/debugCenter/deviceApi.ts

@@ -0,0 +1,29 @@
+
+import debugCenter from '@/api/debugCenter/debugCenter';
+const uploadConfig = {
+  670: {
+    api: debugCenter.uploadBoot,   // 670对应接口
+    requiredParams: ['deviceIds', 'file']
+  },
+  6170: {
+    api: debugCenter.deviceUploadLogo, 
+    requiredParams: ['deviceIds', 'file',] 
+  },
+  default: {
+    api: debugCenter.uploadBoot,
+    requiredParams: ['deviceIds', 'file']
+  }
+};
+function handleParams(deviceType, deviceIds, file) {
+  const formattedIds = Array.isArray(deviceIds) ? deviceIds : [deviceIds];
+  const formData = new FormData();
+  formattedIds.forEach(id => formData.append('deviceIds', id));
+  formData.append('file', file);
+  return formData;
+}
+export function uploadLogo(deviceType, deviceIds, file) {
+  const currentConfig = uploadConfig[deviceType] || uploadConfig.default;
+  const formData = handleParams(deviceType, deviceIds, file);
+  return currentConfig.api(formData);
+}
+export default { uploadLogo };

src/api/equipmentAlarmRecord/types.ts

@@ -16,6 +16,7 @@ export interface AlarmVO {
   deviceMac: string;
   devicePic:string;
   finishTime: string;
+  timeDiff:string
   
 }
 

src/api/equipmentManagement/device/shareManage.ts

@@ -0,0 +1,86 @@
+import request from '@/utils/request';
+import { resolve } from 'path';
+
+
+
+function DelShare(ids) {
+    return request({
+        url: '/api/equipment/share/' + ids,
+        method: 'delete'
+    });
+}
+//添加分享数据
+function SaveShare(data,type){
+
+    let promise=null;
+   if(type=='add'){
+    promise=addShare(data);
+   }else{
+    promise=powerSet(data);
+   }
+   return promise;
+}
+//添加
+function addShare(data) {
+    return request({
+        url: '/api/equipment/share/deviceShare',
+        method: 'post',
+        data: data
+    });
+}
+
+//修改
+function powerSet(data) {
+    return request({
+        url: '/api/equipment/share/permission',
+        method: 'post',
+        data: data
+    });
+
+}
+//查询
+function searchShare(params) {
+    return request({
+        url: '/api/equipment/share/deviceShareList',
+        method: 'get',
+        params: params
+    })
+}
+
+//发送验证码
+function sendSms(phoneNumber) {
+    return request({
+        url: '/api/equipment/share/sms/code',
+        method: 'get',
+        params: {
+            phonenumber: phoneNumber
+        }
+    });
+
+    // return new Promise((resolve,reject)=>{
+    //     resolve({
+    //         code:200
+    //     });
+    // });
+}
+
+function getUsrs(){
+     return request({
+        url: '/WebApp/user/list',
+        method: 'get',
+        params: {
+           pageNum:1,
+           pageSize:9999
+        }
+    });
+    
+}
+
+export default {
+    powerSet: powerSet,
+    DelShare: DelShare,
+    SaveShare: SaveShare,
+    searchShare: searchShare,
+sendSms:sendSms,
+getUsrs:getUsrs
+}

src/api/equipmentManagement/device/types.ts

@@ -5,6 +5,7 @@ export interface deviceQuery extends PageQuery {
     deviceType: string;
     deviceStatus: string;
     bluetoothName?: string; // 蓝牙名称查询字段
+    onlineStatus?: string;
 }
 
 export interface deviceForm {

src/api/equipmentManagement/devicegroup/index.ts

@@ -1,6 +1,4 @@
-import { func } from 'vue-types';
 import request from '@/utils/request';
-import { AxiosPromise } from 'axios';
 
 //左侧节点的数据源
 function getTreeData(para: any) {

src/api/equipmentManagement/repairRecords/index.ts

@@ -89,8 +89,9 @@ function getRepairList(data) {
             "repairPart": data.repairPart,
             "repairReason": data.repairReason,
             "repairPerson": data.repairPerson,
-            "repairBeginTime": data.repairBeginTime,
-            "repairEndTime": data.repairBeginTime,
+            "repairBeginTime":data.Date?data.Date[0]:'',
+            "repairEndTime": data.Date?data.Date[1]:'',
+            "searchValue":data.searchValue,
             "pageNum": data.pageNum,
             "pageSize": data.pageSize
         }
@@ -126,6 +127,13 @@ function getDeviceTypeAll() {
     });
 }
 
+function getDeviceAll(){
+    return request({
+        url:'api/device?pageNum=1&pageSize=99999',
+        method:'get'}
+    );
+}
+
 export default {
     updateRepair: updateRepair,
     addRepir: addRepir,
@@ -133,5 +141,6 @@ export default {
     getRepirDetail: getRepirDetail,
     getRepairList: getRepairList,
     dropRepir: dropRepir,
-    getDeviceTypeAll: getDeviceTypeAll
+    getDeviceTypeAll: getDeviceTypeAll,
+    getDeviceAll:getDeviceAll
 }

src/api/home/index.ts

@@ -0,0 +1,43 @@
+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 const getEquipmentUsageData = (range, params = {}) => {
+  return request({
+    url: `/api/device/homepage/getEquipmentUsageData/${range}`,
+    method: 'get',
+    params: params
+  });
+};
+
+// 获取报警信息
+export const getAlarmInformation = (params) => {
+  return request({
+    url: `/api/device/homepage/getAlarmInformation`,
+    method: 'get',
+    params: params
+  });
+};
+
+
+export default {
+    getDataOverview,
+    getEquipmentClassification,
+    getEquipmentUsageData,
+    getAlarmInformation
+}

src/api/home/types.ts

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

src/api/homeIndex/index.ts

@@ -0,0 +1,59 @@
+import request from '@/utils/request';
+// 获取设备总览 DataOverview
+export const getDeviceOverview = (params) => {
+  return request({
+    url: '/api/largeScreen/getDeviceOverview',
+    method: 'get',
+    params: params
+  });
+};
+
+
+// 报警事件，报警总数统计
+export const getAlarmStatistics = (params) => {
+  return request({
+    url: '/api/largeScreen/getAlarmStatistics',
+    method: 'get',
+    params: params
+  });
+}
+
+
+// 报警次数
+export const getMonthlyAlarmStatistics = (params) => {
+  return request({
+    url: '/api/largeScreen/getMonthlyAlarmStatistics',
+    method: 'get',
+    params: params
+  });
+}
+
+// 设备类别
+export const getDeviceCommunicationModeStatistics = (params = {}) => {
+  return request({
+    url: '/api/largeScreen/getDeviceCommunicationModeStatistics',
+    method: 'get',
+    params: params
+  });
+}
+
+// 设备使用频次
+export const getDeviceUsageFrequency = (params = {}) => {
+  return request({
+    url: '/api/largeScreen/getDeviceUsageFrequency',
+    method: 'get',
+    params: params
+  });
+}
+
+// 实时报警
+export const getRealtimeAlarm = (params = {}) => {
+  return request({
+    url: '/api/largeScreen/getRealtimeAlarm',
+    method: 'get',
+    params: params
+  });
+}
+
+
+

src/api/largeScreen/mapOpt.ts

@@ -0,0 +1,241 @@
+var map = null;
+var layPoints = [];
+
+function initMap(click) {
+    // let key = '90bc158992feb8ccd0145e168cab1307';
+    let init = function () {
+        map = new AMap.Map("map", {
+            viewMode: '2D', //默认使用 2D 模式
+            zoom: 11, //地图级别
+            center: [116.396477, 39.909278], //地图中心点
+            mapStyle: "amap://styles/darkblue"
+        });
+
+        map.on('click', function (evt) {
+            //    alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
+            if (click) {
+                click(evt.lnglat);
+            }
+        });
+    }
+    return new Promise((resolve, reject) => {
+        if (map) {
+            resolve(200);
+            return;
+        }
+        if (window.AMap) {
+            init();
+            resolve(200);
+            return;
+        }
+        reject({ code: 500, msg: '高德地图未能初始化成功' });
+    });
+
+}
+
+//添加一个点
+function AddPoint(point, index, dragEnd, click, iconImg) {
+  
+    return new Promise((resolve, reject) => {
+        try {
+            if (!point) {
+                reject("point不可用")
+                return;
+            }
+            if (!point.longitude || !point.latitude) {
+                reject("point的经纬度不可用")
+                return;
+            }
+            layPoints.push({ lng: point.longitude, lat: point.latitude });
+
+            let center = new AMap.LngLat(point.longitude, point.latitude);
+
+            let icon = new AMap.Icon({
+                size: new AMap.Size(45, 45), //图标尺寸
+                image: iconImg, //Icon 的图像
+
+                imageSize: new AMap.Size(45, 45), //根据所设置的大小拉伸或压缩图片
+            });
+            let marker = new AMap.Marker({
+                icon: icon,
+                position: center,
+                offset: new AMap.Pixel(-15, -24),
+                draggable: dragEnd ? true : false,
+                cursor: 'point',
+                title: point.isAlarming ? '正在报警:' + point.deviceName : point.deviceName,
+                text: index,
+                class: 'point',
+                extData: point,
+                anchor:'bottom-center'
+            });
+            marker.setMap(map);
+
+            let lays = map.getAllOverlays('text');
+            for (let i = 0; i < lays.length; i++) {
+                const element = lays[i];
+                let cls = element.getOptions();
+                if (cls.class) {
+                    element.dom.classList.add(cls.class);
+                }
+            }
+
+
+            resolve(center);
+        } catch (ex) {
+            reject(ex)
+        }
+
+    });
+
+
+}
+
+function getCenter() {
+    var center = map.getCenter().toJSON();
+    return center;
+}
+
+function setCenter(lon, latitude) {
+    var position = new AMap.LngLat(lon, latitude); //传入经纬度    
+    map.setCenter(position); //简写 设置地图中心点
+
+}
+
+function calcCenter() {
+
+    
+}
+//画多边形
+function DrawPoy(points) {
+    
+    return new Promise((resolve, reject) => {
+        if (!map) {
+            reject("map未初始化");
+            return;
+        }
+        if (!points) {
+            reject("points未初始化");
+            return;
+        }
+        if (!points.coordinates) {
+            reject("coordinates未初始化");
+            return;
+        }
+
+        if (!Array.isArray(points.coordinates)) {
+            points.coordinates = JSON.parse(points.coordinates);
+        }
+
+        let path = [];
+
+
+        setTimeout(() => {
+            points.coordinates.filter(v => {
+                if (v.lng && v.lat) {
+                    path.push(new AMap.LngLat(v.lng, v.lat));
+                    layPoints.push({ lng: v.lng, lat: v.lat });
+                    return true;
+                }
+                return false;
+            });
+            if (!path.length) {
+                reject("path为空");
+            }
+            let polygon = new AMap.Polygon({
+                path: path,
+                fillColor: '#F00C0C',
+                fillOpacity: 0.03,
+                strokeOpacity: 0.1,
+                strokeColor: '#F00C0C',
+
+                strokeWeight: 3,
+                strokeStyle: 'dashed',
+                // strokeDasharray: [50,50,50],
+                extData: points
+            });
+            map.add(polygon);
+            resolve("添加多边形成功");
+        }, 0);
+    });
+
+
+}
+//画圆形
+function DrawCicle(points, raduis, dragEnd) {
+    
+    return new Promise((resolve, reject) => {
+        if (!map) {
+            reject("map未初始化");
+            return;
+        }
+        if (!points) {
+            reject("points未初始化");
+            return;
+        }
+        if (!points.coordinates) {
+            reject("coordinates未初始化");
+            return;
+        }
+
+        if (!Array.isArray(points.coordinates)) {
+            points.coordinates = JSON.parse(points.coordinates);
+        }
+
+        if (!(points.coordinates[0].lng && points.coordinates[0].lat)) {
+            reject("圆的中心点不正确")
+            return;
+        }
+        
+        let circle = new AMap.Circle({
+            center: [points.coordinates[0].lng, points.coordinates[0].lat],
+            radius: raduis ? raduis : 1000, //半径
+            borderWeight: 3,
+            strokeColor: "#F00C0C",
+            strokeWeight: 1,
+            strokeOpacity: 0.2,
+            fillOpacity: 0.4,
+            strokeStyle: 'dashed',
+            strokeDasharray: [10, 10],
+            // 线样式还支持 'dashed'
+            fillColor: '#1791fc',
+            zIndex: 50,
+        })
+        map.add(circle);
+        layPoints.push({ lng: points.coordinates[0].lng, lat: points.coordinates[0].lat });
+        resolve("添加圆成功");
+    });
+
+
+
+}
+
+//清除所有
+function clearOverLays() {
+    map && map.clearMap();
+    layPoints = [];
+}
+
+
+
+function removeOverLay(lay) {
+    map && map.remove(lay);
+}
+
+
+
+function setFitView() {
+    if (map) { map.setFitView(); }
+}
+export default {
+    gdMap: map,
+    initMap: initMap,
+    AddPoint: AddPoint,
+    getCenter: getCenter,
+    DrawPoy: DrawPoy,
+    DrawCicle: DrawCicle,
+    clearOverLays: clearOverLays,
+    removeOverLay: removeOverLay,
+    setCenter: setCenter,
+    calcCenter: calcCenter,
+    setFitView: setFitView
+}

src/assets/icons/svg/home.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="_图层_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.99 18">
+  <path id="_矢量_42" d="M17.82,5.81L9.5.08c-.16-.11-.38-.11-.54,0L.2,5.81c-.13.08-.2.21-.2.35v11.41c0,.24.21.43.46.43h5.54c.25,0,.46-.19.46-.43v-2.48c0-1.42,1.17-2.65,2.68-2.69,1.57-.04,2.85,1.13,2.85,2.58v2.59c0,.24.21.43.46.43h5.08c.25,0,.46-.19.46-.43V6.15c0-.14-.06-.26-.18-.35h.01Z"/>
+</svg>

src/assets/icons/svg/报警信息1.1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 18">
+
+        <path  d="M8.1,3.9c.6,0,1-.5,1-1v-1.9C9.1.5,8.6,0,8.1,0s-1,.4-1,1v1.9c0,.6.4,1,1,1h0ZM3.3,5.7c-.4.4-1,.4-1.4,0l-1.6-1.5c-.4-.4-.4-.9,0-1.3.4-.4,1-.4,1.4,0l1.6,1.5c.4.4.4.9,0,1.3ZM12.6,5.7c.4.4,1,.4,1.4,0l1.6-1.5c.4-.4.4-.9,0-1.3-.4-.4-1-.4-1.4,0l-1.6,1.5c-.4.4-.4.9,0,1.3ZM3,15.4v-5.4c0-2.8,2.3-5.1,5-5.1s5.1,2.3,5.1,5.1v5.4h1.6c.7,0,1.3.6,1.3,1.3s-.6,1.3-1.3,1.3H1.5c-.7,0-1.3-.6-1.3-1.3s.6-1.3,1.3-1.3c0,0,1.6,0,1.6,0ZM10.1,11.3h-1.1c-.1,0-.2,0-.2-.2l.4-2.1c0-.1-.2-.2-.3-.1l-2.9,2.6c0,0,0,.2.1.2h1.2c0,0,.2,0,.2.2l-.4,2.1c0,.1.2.2.3.1l2.9-2.6c.1,0,0-.2-.1-.2Z"/>
+   
+</svg>

src/assets/icons/svg/控制中心1.1.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 16">
+      <path id="_矢量_54" class="cls-1" d="M13.5,12.6v-1.1h2.2v1.1h2.2v2.3h-2.2v1.1h-2.2v-1.1H0v-2.3h13.5ZM7.9,6.9v-1.1h2.2v1.1h7.9v2.3h-7.9v1.1h-2.2v-1.1H0v-2.3s7.9,0,7.9,0ZM2.2,1.1V0h2.2v1.1h13.5v2.3H4.5v1.1h-2.2v-1.1H0V1.1h2.2Z"/>
+</svg>

src/assets/icons/svg/数据可视化1.1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 15">
+ 
+      <path  d="M.8,0h16.4s.1,0,.2,0c0,0,.1,0,.1,0,0,0,.1,0,.1,0,0,0,0,0,.1,0,0,0,0,0,.1.1s0,0,0,.1c0,0,0,.1,0,.2,0,0,0,.1,0,.2v10.8c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.1,0,0,0,0-.1.1s0,0-.1.1c0,0,0,0-.1,0,0,0-.1,0-.1,0s-.1,0-.2,0H.8c0,0-.1,0-.2,0,0,0-.1,0-.1,0,0,0,0,0-.1,0s0,0-.1-.1c0,0,0,0,0-.1s0,0,0-.1c0,0,0-.1,0-.2C0,11.8,0,11.7,0,11.7V.8S0,.7,0,.7c0,0,0-.1,0-.2s0,0,0-.1c0,0,0,0,0-.1s0,0,.1,0c0,0,0,0,.1,0,0,0,.1,0,.1,0C.7,0,.8,0,.8,0h0ZM2.5,6.7h0s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v2.7s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h1s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0v-2.7s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h-.9ZM6.5,5h0s0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v4.3s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h1s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0v-4.3s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0-.9,0-.9,0ZM10.6,2.5h0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0v6.8s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0h1s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0V2.8s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h0s-.8,0-.8,0ZM14.7,5.8h0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0v3.5s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0h1s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v-3.5s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h0s-.8,0-.8,0ZM6.6,14.2v-.5s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h4.3s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v.5h3.8s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0v.2s0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0H2.8s0,0,0,0c0,0,0,0,0,0s0,0,0,0,0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0v-.2s0,0,0,0,0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0s0,0,0,0h3.8Z"/>
+
+</svg>

src/assets/icons/svg/日志报表1.1.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 18">
+ 
+        <path d="M5.8,2.4h4.4c.4,0,.7-.3.7-.7V.7c0-.4-.3-.7-.7-.7h-4.4c-.4,0-.7.3-.7.7v1.1c0,.4.3.7.7.7Z"/>
+        <path  d="M13.8,1.3h-2.3v.7c0,.5-.4.8-.9.8h-5.2c-.5,0-.9-.4-.9-.8v-.7h-2.3C1,1.3,0,2.2,0,3.4v12.5c0,1.1,1,2.1,2.2,2.1h11.5c1.2,0,2.2-.9,2.2-2.1V3.4c0-1.2-1-2.1-2.2-2.1ZM13.2,13.4H3.3c-.3,0-.6-.2-.6-.5s.2-.5.6-.5h9.9c.3,0,.6.2.6.5s-.3.5-.6.5h0ZM13.2,10H3.3c-.3,0-.6-.2-.6-.5s.2-.5.6-.5h9.9c.3,0,.6.2.6.5s-.3.5-.6.5h0ZM13.2,6.5H3.3c-.3,0-.6-.2-.6-.5s.2-.5.6-.5h9.9c.3,0,.6.2.6.5s-.3.5-.6.5h0Z"/>
+
+</svg>

src/assets/icons/svg/用户管理1.1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
+  
+      <path  d="M16.9,12.8c-.1-.4-.3-.8-.5-1.2l.6-1-.5-.6-1,.6c-.3-.2-.7-.4-1.1-.4l-.3-1.2h-.8l-.3,1.2c-.4,0-.7.2-1.1.4l-1-.6-.5.6.6,1c-.2.4-.4.8-.5,1.2l-1.1.3v.8l1,.3c0,.5.2,1,.5,1.4l-.5.9.5.5.8-.5c.4.3.9.6,1.4.7l.2.9h.8l.2-.9c.3,0,.5-.1.8-.2s.5-.2.7-.4l.8.5.5-.5-.5-.9c.3-.4.4-.9.5-1.4l1-.3v-.8l-1.1-.3s0,0,0,0ZM13.7,15.6h-.2c0,0-.1,0-.2,0,0,0-.1,0-.2,0s-.1,0-.2,0c0,0-.1,0-.2,0,0,0-.1,0-.2-.1s-.1,0-.1-.1c0,0,0,0-.1-.1,0,0,0,0-.1-.1s0-.1-.1-.1c0,0,0-.1,0-.2,0,0,0-.1,0-.2s0-.1,0-.2,0-.1,0-.2c0,0,0-.1,0-.2v-.4c0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.2s0-.1,0-.2c0,0,0-.1,0-.2s0-.1.1-.1c0,0,0-.1.1-.1,0,0,0,0,.1-.1s.1,0,.1-.1c0,0,.1,0,.2-.1s.1,0,.2,0c0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.2,0h.4c0,0,.1,0,.2,0,0,0,.1,0,.2,0s.1,0,.2,0c0,0,.1,0,.2,0,0,0,.1,0,.2.1s.1,0,.1.1c0,0,0,0,.1.1,0,0,0,0,.1.1s0,.1.1.1c0,0,0,.1,0,.2,0,0,0,.1,0,.2s0,.1,0,.2,0,.1,0,.2c0,0,0,.1,0,.2v.4c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.2s0,.1,0,.2c0,0,0,.1,0,.2s0,.1-.1.1c0,0,0,.1-.1.1,0,0,0,0-.1.1s-.1,0-.1.1c0,0-.1,0-.2.1,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.2,0-.2,0ZM10.4,9.6c-.6-.5-1.3-.8-2-1,1.4-.7,2.5-2.3,2.5-4S8.9,0,6.5,0,2.2,2,2.2,4.5s1,3.3,2.4,4C1.9,9.4,0,11.9,0,14.8,0,14.8,3.3,15.8,6.6,15.8s1.7,0,2.5-.2c-.1-.3-.2-.7-.3-1,0-.4-.1-.7-.1-1.1,0-1.6.7-3,1.7-3.9h0Z"/>
+  
+</svg>

src/assets/icons/svg/租户管理1.1.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
+ 
+        <path  d="M7.4,12.7c.3-2,1.8-3.2,2.4-3.7h0c0,0,.2,0,.3-.2,1.9-.7,3.2-2.3,3.2-4.3,0-2.5-2.3-4.6-5.1-4.6S3.1,2.1,3.1,4.6s1.4,3.6,3.3,4.3c-.9.2-1.8.6-2.5,1C.6,11.7,0,14.2,0,17.7s.3.3.6.3h9.9l-.9-.4c-.9-.4-2.7-2.3-2.3-4.9h0Z"/>
+        <path  d="M13.2,11.6l-1.7,1.4v2.4h.7v-1.2h2v1.2h.7v-2.4l-1.7-1.4h0ZM14.9,11.9h-.3l.3.3v-.3Z"/>
+        <path  d="M13.2,9.1c-2.7,0-4.8,2-4.8,4.4s2.2,4.4,4.8,4.4,4.8-2,4.8-4.4-2.1-4.4-4.8-4.4ZM15.9,13.6c0,0-.1,0-.3,0s-.1,0-.2,0v2c0,.2-.2.4-.5.4h-1.6v-1.2h-.6v1.2h-1.6c-.3,0-.5-.2-.5-.4v-2s0,0-.2,0-.2,0-.3,0,0-.2,0-.2,0-.2,0-.2l2.4-2c.3-.2.6-.2.9,0l.4.4c0,0,.2-.2.3-.2h.9c.2,0,.3.2.3.3v.8c0,.1,0,.2-.1.2l.5.5c0,0,0,.1,0,.2,0,0,0,.1,0,.2h0Z"/>
+
+</svg>

src/assets/icons/svg/维修记录1.1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
+ 
+      <path  d="M17.2,2.8s0,0,0,0c-.1-.1-.3-.1-.4,0l-3.2,3.2c-.4.4-1,.4-1.4,0h-.1c-.4-.5-.4-1.1,0-1.5l3.2-3.2s0,0,0,0c0-.1,0-.3-.1-.4-2.2-1.3-5.1-1-7,.9-1.4,1.4-1.9,3.2-1.6,5,0,.3,0,.7-.3,1L0,13.9c0,0,0,.2,0,.2l3.8,3.8c0,0,.2,0,.2,0l6.2-6.2c.2-.2.6-.3,1-.3,1.8.3,3.7-.2,5-1.6,1.9-1.9,2.2-4.8.9-7h0Z"/>
+   
+</svg>

src/assets/icons/svg/联调中心1.1.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18"> 
+      <path id="_联调中心图标" class="cls-1" d="M9.8,12.3c-1.1,0-2.1-.4-2.9-1.2-.2-.2-.3-.5-.3-.8s.1-.6.3-.8c.4-.4,1.2-.4,1.6,0,.8.8,2.1.7,3-.2l3.5-3.5c.5-.5.7-1.1.7-1.7s0-.9-.6-1.3c-.5-.5-1-.6-1.4-.5-.6,0-1.1.3-1.6.7l-2,2c-.5-.5-2.4-.8-2.9-.3l3.3-3.3c.9-.9,2-1.4,3.1-1.4,1.2,0,2.3.4,3.1,1.2.8.8,1.2,1.8,1.2,2.9s-.5,2.4-1.4,3.3l-3.5,3.5c-.9.9-2.1,1.4-3.3,1.4M4.9,7.1l-3.5,3.5C.5,11.5,0,12.7,0,13.9s.4,2.1,1.2,2.9c.8.8,1.9,1.3,3.1,1.2,1.1,0,2.2-.5,3.1-1.4l3.3-3.3c-.5.5-2.5.2-2.9-.3l-2,2c-.4.4-1,.7-1.6.7-.4,0-.9,0-1.4-.6-.5-.4-.5-1-.5-1.3,0-.6.3-1.2.7-1.7l3.5-3.5c.9-.9,2.2-1,3-.2s.5.3.8.3.6-.1.8-.3.3-.5.3-.8-.1-.6-.3-.8c-.8-.8-1.9-1.2-2.9-1.2s-2.4.5-3.3,1.4h0Z"/>
+</svg>

src/assets/icons/svg/设备管理1.1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
+
+      <path  d="M17.6,14.4l-6.4,3.5s-.1,0-.1,0c0,0-.1,0-.2,0h-.2c0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1,0-.1,0s0,0-.1-.1,0,0-.1-.1c0-.1-.1-.3-.1-.4v-5.9c0,0,0-.1,0-.2,0,0,0-.1,0-.2,0,0,0-.1.1-.2,0,0,.1,0,.2-.1l6.4-3.5s.1,0,.1,0,.1,0,.2,0h.2c0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1,0,.1,0,0,0,0,0,.1.1s0,0,.1.1c0,.1.1.3.1.4v5.9c0,0,0,.1,0,.2,0,0,0,.1,0,.2,0,0,0,.1-.1.2,0,0-.1,0-.2.1h0ZM.4,14.4c0,0-.1,0-.2-.1,0,0,0-.1-.1-.2,0,0,0-.1,0-.2C0,13.8,0,13.7,0,13.6v-5.9C0,7.3.4,7,.9,7s.3,0,.4.1l6.4,3.5c0,0,.1,0,.2.1,0,0,0,.1.1.2s0,.1,0,.2,0,.1,0,.2v5.9c0,.5-.4.8-.9.8s-.3,0-.4-.1L.4,14.4H.4ZM8.6.1c.3-.1.6-.1.9,0l7.3,3.9s0,0,0,0,0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0v.2s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0l-7.3,3.9c0,0-.1,0-.2,0,0,0-.1,0-.2,0s-.1,0-.2,0-.1,0-.2,0L1.3,5.5s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0v-.2s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0L8.6.1h0Z"/>
+ 
+</svg>

src/assets/icons/svg/首页1.1.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 18">
+
+      <path  d="M17.8,5.8L9.5,0c-.2-.1-.4-.1-.5,0L.2,5.8c-.1,0-.2.2-.2.3v11.4c0,.2.2.4.5.4h5.5c.2,0,.5-.2.5-.4v-2.5c0-1.4,1.2-2.6,2.7-2.7,1.6,0,2.8,1.1,2.8,2.6v2.6c0,.2.2.4.5.4h5.1c.2,0,.5-.2.5-.4V6.2c0-.1,0-.3-.2-.3h0Z"/>
+
+</svg>

src/assets/styles/index.scss

@@ -88,12 +88,7 @@ div:focus {
 .pl-5 {
   padding-left: 5px;
 }
-.p-2{
-  background: rgba(247, 248, 252, 1);
-  min-height: 100vh;
-  box-sizing: border-box;
-  padding: 15px;
-}
+
 
 .block {
   display: block;

src/assets/styles/sidebar.scss

@@ -28,7 +28,7 @@
     // 使用CSS变量定义边框样式，支持动态修改
     border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor);
     box-shadow: var(--sidebarBoxShadow);
-    
+
     // 备用方案：如果CSS变量不支持，使用默认样式
     @supports not (border-right: var(--sidebarBorderWidth) var(--sidebarBorderStyle) var(--sidebarBorderColor)) {
       border-right: none;
@@ -81,11 +81,14 @@
       width: 100% !important;
     }
 
-    .el-menu-item,
+    .el-sub-menu,
     .menu-title {
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
+      font-family: Microsoft YaHei;
+      font-size: 13px;
+      font-weight: 600;
     }
 
     .el-menu-item .el-menu-tooltip__trigger {
@@ -100,6 +103,7 @@
         transition: all 0.3s ease;
       }
     }
+
     .sub-menu-title-noDropdown,
     .el-sub-menu__title {
       &:hover {
@@ -108,7 +112,7 @@
       }
     }
 
-    & .theme-dark .is-active > .el-sub-menu__title {
+    & .theme-dark .is-active>.el-sub-menu__title {
       color: #ffffff !important;
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
       border-radius: 4px;
@@ -116,16 +120,17 @@
       box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
     }
 
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-sub-menu .el-menu-item {
       min-width: $base-sidebar-width !important;
+
       &:hover {
         background-color: rgba(0, 0, 0, 0.1) !important;
         transition: all 0.3s ease;
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-sub-menu .el-menu-item {
       background-color: $base-sub-menu-background !important;
 
@@ -135,7 +140,7 @@
       }
     }
 
-    & .theme-dark .nest-menu .el-sub-menu > .el-sub-menu__title,
+    & .theme-dark .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .theme-dark .el-menu-item {
       &:hover {
         // you can use $sub-menuHover
@@ -143,7 +148,8 @@
         transition: all 0.3s ease;
       }
     }
-    & .nest-menu .el-sub-menu > .el-sub-menu__title,
+
+    & .nest-menu .el-sub-menu>.el-sub-menu__title,
     & .el-menu-item {
       &:hover {
         // you can use $sub-menuHover
@@ -178,7 +184,7 @@
     .el-sub-menu {
       overflow: hidden;
 
-      & > .el-sub-menu__title {
+      &>.el-sub-menu__title {
         padding: 0 !important;
 
         .svg-icon {
@@ -189,15 +195,16 @@
 
     .el-menu--collapse {
       .el-sub-menu {
-        & > .el-sub-menu__title {
-          & > span {
+        &>.el-sub-menu__title {
+          &>span {
             height: 0;
             width: 0;
             overflow: hidden;
             visibility: hidden;
             display: inline-block;
           }
-          & > i {
+
+          &>i {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -234,6 +241,7 @@
   }
 
   .withoutAnimation {
+
     .main-container,
     .sidebar-container {
       transition: none;
@@ -243,7 +251,7 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  & > .el-menu {
+  &>.el-menu {
     .svg-icon {
       margin-right: 16px;
     }
@@ -286,7 +294,7 @@
 }
 
 // 子菜单激活状态
-.el-sub-menu.is-active > .el-sub-menu__title {
+.el-sub-menu.is-active>.el-sub-menu__title {
   background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
   color: #ffffff !important;
   border-radius: 4px;
@@ -299,7 +307,7 @@
 .sidebar-container {
   // 确保背景色与图片一致
   background: #2c3e50 !important;
-  
+
   .el-menu-item {
     &.is-active {
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
@@ -310,9 +318,9 @@
       transition: all 0.3s ease;
     }
   }
-  
+
   .el-sub-menu {
-    &.is-active > .el-sub-menu__title {
+    &.is-active>.el-sub-menu__title {
       background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
       color: #ffffff !important;
       border-radius: 4px;
@@ -321,12 +329,12 @@
       transition: all 0.3s ease;
     }
   }
-  
+
   // 子菜单项激活状态（只有文字颜色变化，无背景）
   .el-sub-menu .el-menu-item {
     &.is-active {
       background: transparent !important;
-      color: #409eff !important;
+      color: rgba(1, 159, 228, 1) !important;
       border-radius: 0;
       margin: 0;
       box-shadow: none;
@@ -341,35 +349,35 @@
     box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1) !important;
     border-right: none !important;
   }
-  
+
   .sidebar-logo-container {
     background: #2c3e50 !important;
   }
-  
+
   .el-menu {
     background: #2c3e50 !important;
   }
-  
+
   // 非激活菜单项样式
   .el-menu-item,
   .el-sub-menu__title {
     color: #bfcbd9 !important;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.1) !important;
     }
   }
-  
+
   // 激活的主菜单项（正确的渐变背景）
   .el-menu-item.is-active,
-  .el-sub-menu.is-active > .el-sub-menu__title {
+  .el-sub-menu.is-active>.el-sub-menu__title {
     background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
     color: #ffffff !important;
     border-radius: 4px;
     margin: 2px 8px;
     box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
   }
-  
+
   // 激活的子菜单项（只有蓝色文字，无背景）
   .el-sub-menu .el-menu-item.is-active {
     background: transparent !important;
@@ -378,17 +386,17 @@
     margin: 0;
     box-shadow: none;
   }
-  
+
   // 子菜单背景色
   .el-sub-menu .el-menu {
-    background: #1f2d3d !important;
+    background: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15), rgba(0, 87, 159, 0) 100%) !important;
   }
-  
+
   // 子菜单项悬停效果
   .el-sub-menu .el-menu-item:hover {
     background-color: rgba(0, 0, 0, 0.1) !important;
   }
-  
+
   // 主菜单项悬停效果
   .el-menu-item:hover,
   .el-sub-menu__title:hover {
@@ -399,28 +407,29 @@
 // 全局菜单样式匹配设计UI
 #app .sidebar-container {
   // 确保背景色一致
-  background: #2c3e50 !important;
-  
+  background: rgba(11, 24, 40, 1) !important;
+  //background: #2c3e50 !important;
+
   // 菜单项基础样式
   .el-menu-item,
   .el-sub-menu__title {
     color: #bfcbd9 !important;
-    
+
     &:hover {
       background-color: rgba(0, 0, 0, 0.1) !important;
     }
   }
-  
+
   // 激活的主菜单项
   .el-menu-item.is-active,
-  .el-sub-menu.is-active > .el-sub-menu__title {
+  .el-sub-menu.is-active>.el-sub-menu__title {
     background: var(--menuActiveGradient) !important; // 使用正确的渐变颜色
     color: #ffffff !important;
     border-radius: 4px;
     margin: 2px 8px;
     box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
   }
-  
+
   // 激活的子菜单项
   .el-sub-menu .el-menu-item.is-active {
     background: transparent !important;
@@ -429,19 +438,19 @@
     margin: 0;
     box-shadow: none;
   }
-  
+
   // 子菜单背景
   .el-sub-menu .el-menu {
     background: #1f2d3d !important;
   }
-  
+
   // 图标颜色
   .svg-icon {
     color: inherit !important;
   }
-  
+
   // 箭头图标颜色
   .el-sub-menu__icon-arrow {
     color: inherit !important;
   }
-}
+}

src/assets/styles/variables.module.scss

@@ -1,6 +1,6 @@
 // 全局SCSS变量
 :root {
-  --menuBg: #2c3e50; // 精确匹配图片中的深色背景
+  --menuBg: linear-gradient(0.00deg, rgba(0, 87, 159, 0.15),rgba(0, 87, 159, 0) 100%);; // 精确匹配图片中的深色背景
   --menuColor: #bfcbd9; // 非激活菜单项的文字颜色
   --menuActiveText: #ffffff; // 激活菜单项的文字颜色
   --menuHover: #34495e; // 悬停时的背景色
@@ -11,7 +11,7 @@
   --subMenuTitleHover: #293444; // 子菜单标题悬停背景色
 
   // 激活菜单项的渐变颜色 - 根据设计UI调整
-  --menuActiveGradient: linear-gradient(90deg, #0080EA 0%, #000F27 100%);
+  --menuActiveGradient:linear-gradient(90.00deg, rgba(0, 128, 234, 1),rgba(0, 15, 39, 0) 100%);
 
   --fixedHeaderBg: #ffffff;
   --tableHeaderBg: #f8f8f9;
@@ -130,7 +130,7 @@ $--color-warning: #e6a23c;
 $--color-danger: #f56c6c;
 $--color-info: #909399;
 
-$base-sidebar-width: 280px;
+$base-sidebar-width: 250px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/layout/components/Navbar.vue

@@ -20,7 +20,7 @@
           <div class="avatar-wrapper">
             <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
             <img src="@/assets/images/avatar.png" class="user-avatar" />
-            <div style="margin-left: 10px;">{{ useUserStore().nickname }}</div>
+            <div style="margin-left: 10px; white-space: nowrap; font-size: 14px;">{{ useUserStore().nickname }}</div>
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,13 +1,16 @@
 <template>
   <div v-if="!item.hidden">
-    <template v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
+    <template
+      v-if="hasOneShowingChild(item, item.children) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path, onlyOneChild.query)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
-          <template #title>
-            <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
-          </template>
-        </el-menu-item>
+        <span @click="handleMenuClick(onlyOneChild, $event)">
+          <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+            <svg-icon :icon-class="onlyOneChild.meta.icon || (item.meta && item.meta.icon)" />
+            <template #title>
+              <span class="menu-title" :title="hasTitle(onlyOneChild.meta.title)">{{ onlyOneChild.meta.title }}</span>
+            </template>
+          </el-menu-item>
+        </span>
       </app-link>
     </template>
 
@@ -17,14 +20,8 @@
         <span class="menu-title" :title="hasTitle(item.meta?.title)">{{ item.meta?.title }}</span>
       </template>
 
-      <sidebar-item
-        v-for="(child, index) in item.children"
-        :key="child.path + index"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-        class="nest-menu"
-      />
+      <sidebar-item v-for="(child, index) in item.children" :key="child.path + index" :is-nest="true" :item="child"
+        :base-path="resolvePath(child.path)" class="nest-menu" />
     </el-sub-menu>
   </div>
 </template>
@@ -77,8 +74,25 @@ const hasOneShowingChild = (parent: RouteRecordRaw, children?: RouteRecordRaw[])
 
   return false;
 };
-
+const router = useRouter();
+// 处理菜单点击，完全控制跳转行为
+const handleMenuClick = (route, event) => {
+  console.log(route, 'route');
+  if (route.meta.openInNewTab) {
+    // 完全阻止默认行为和事件冒泡
+    event.preventDefault();
+    event.stopPropagation();
+    console.log('Opening in new tab:', route);
+    const resolvedRoute = router.resolve({
+      name: route.name || route.path
+    });
+    const fullUrl = new URL(resolvedRoute.href, window.location.origin).href;
+    window.open(fullUrl, '_blank');
+  } else {
+  }
+};
 const resolvePath = (routePath: string, routeQuery?: string): any => {
+
   if (isExternal(routePath)) {
     return routePath;
   }

src/router/index.ts

@@ -39,6 +39,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/error/401.vue'),
     hidden: true
   },
+  {
+    path: "/homeIndex",
+    name: "HomeIndex",
+    component: () => import("@/views/homeIndex/index.vue"),
+    meta: { title: '数据大屏', icon: '首页1.1', preload: true, keepAlive: true, openInNewTab: true },
+  },
   {
     path: '',
     component: Layout,
@@ -48,10 +54,11 @@ export const constantRoutes: RouteRecordRaw[] = [
         path: '/index',
         component: () => import('@/views/index.vue'),
         name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
+        meta: { title: '首页', icon: '首页1.1', affix: true, keepAlive: false }
       }
     ]
   },
+
   {
     path: '/user',
     component: Layout,

src/utils/common.ts

@@ -1,6 +1,7 @@
+//日期格式化
 function DateFormat(date, format) {
   if (!date) {
-    date = new Date();
+    return '';
   }
   if (!format) {
     format = 'yyyy-MM-dd HH:mm:ss';
@@ -39,8 +40,79 @@ function DateFormat(date, format) {
     return formatMap[match];
   });
 }
+//日期加减
+function DateAdd(datePart, number, date) {
+    // 创建日期的副本，避免修改原日期对象
+    const newDate = new Date(date.getTime());
+    
+    // 根据不同的时间单位添加相应的值
+    switch (datePart.toLowerCase()) {
+        case 'year':
+            newDate.setFullYear(newDate.getFullYear() + number);
+            break;
+        case 'month':
+            newDate.setMonth(newDate.getMonth() + number);
+            break;
+        case 'day':
+            newDate.setDate(newDate.getDate() + number);
+            break;
+        case 'hour':
+            newDate.setHours(newDate.getHours() + number);
+            break;
+        case 'minute':
+            newDate.setMinutes(newDate.getMinutes() + number);
+            break;
+        case 'second':
+            newDate.setSeconds(newDate.getSeconds() + number);
+            break;
+        default:
+            throw new Error('不支持的datePart参数。支持的参数: Year, Month, Day, Hour, Minute, Second');
+    }
+    
+    return newDate;
+}
+
+//将字节转换成0.53kb 10.13MB 1GB这样的友好单位
+function formatBytes(bytes, decimals = 2) {
+    // 处理0字节的情况
+    if (bytes === 0) return '0 B';
+
+    // 定义单位和换算比例
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+    // 计算最合适的单位
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    // 格式化并返回结果
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+//数组某个字段取唯一值
+function getUniqueValues(dataSource, field) {
+    if(!field){
+      return [];
+    }
+    // 使用Set来存储唯一值，因为Set会自动去重
+    const uniqueValues = new Set();
+    
+    // 遍历数据源
+    for (const item of dataSource) {
+        // 检查对象是否包含指定字段
+        if (item.hasOwnProperty(field)) {
+            uniqueValues.add(item[field]);
+        }
+    }
+    
+    // 将Set转换为数组并返回
+    return Array.from(uniqueValues);
+}
 
 
 export default{
-DateFormat:DateFormat
+DateFormat:DateFormat,
+DateAdd:DateAdd,
+formatBytes:formatBytes,
+getUniqueValues:getUniqueValues
 }

src/utils/coordinate-transform.ts

@@ -0,0 +1,211 @@
+/**
+ * 坐标系转换工具
+ * WGS84（地球坐标系）与 GCJ02（火星坐标系）相互转换
+ */
+
+// 地标转国测常量
+const X_PI = (3.14159265358979324 * 3000.0) / 180.0;
+const PI = 3.1415926535897932384626;
+const A = 6378245.0; // 卫星椭球坐标投影到平面地图坐标系的投影因子
+const EE = 0.00669342162296594323; // 椭球的偏心率
+
+/**
+ * 坐标点类型定义
+ */
+export interface CoordinatePoint {
+  lng: number; // 经度
+  lat: number; // 纬度
+}
+
+/**
+ * 判断是否在国内，在中国国内的经纬度才需要做偏移
+ * @param lng 经度
+ * @param lat 纬度
+ * @returns 是否在国外
+ */
+function outOfChina(lng: number, lat: number): boolean {
+  return (
+    lng < 72.004 ||
+    lng > 137.8347 ||
+    lat < 0.8293 ||
+    lat > 55.8271
+  );
+}
+
+/**
+ * 转化经度
+ * @param lng 经度
+ * @param lat 纬度
+ * @returns 转换后的经度偏移量
+ */
+function transformLng(lng: number, lat: number): number {
+  let ret =
+    300.0 +
+    lng +
+    2.0 * lat +
+    0.1 * lng * lng +
+    0.1 * lng * lat +
+    0.1 * Math.sqrt(Math.abs(lng));
+
+  ret +=
+    ((20.0 * Math.sin(6.0 * lng * PI) +
+      20.0 * Math.sin(2.0 * lng * PI)) *
+      2.0) /
+    3.0;
+
+  ret +=
+    ((20.0 * Math.sin(lng * PI) +
+      40.0 * Math.sin((lng / 3.0) * PI)) *
+      2.0) /
+    3.0;
+
+  ret +=
+    ((150.0 * Math.sin((lng / 12.0) * PI) +
+      300.0 * Math.sin((lng / 30.0) * PI)) *
+      2.0) /
+    3.0;
+
+  return ret;
+}
+
+/**
+ * 转化纬度
+ * @param lng 经度
+ * @param lat 纬度
+ * @returns 转换后的纬度偏移量
+ */
+function transformLat(lng: number, lat: number): number {
+  let ret =
+    -100.0 +
+    2.0 * lng +
+    3.0 * lat +
+    0.2 * lat * lat +
+    0.1 * lng * lat +
+    0.2 * Math.sqrt(Math.abs(lng));
+
+  ret +=
+    ((20.0 * Math.sin(6.0 * lng * PI) +
+      20.0 * Math.sin(2.0 * lng * PI)) *
+      2.0) /
+    3.0;
+
+  ret +=
+    ((20.0 * Math.sin(lat * PI) +
+      40.0 * Math.sin((lat / 3.0) * PI)) *
+      2.0) /
+    3.0;
+
+  ret +=
+    ((160.0 * Math.sin((lat / 12.0) * PI) +
+      320 * Math.sin((lat * PI) / 30.0)) *
+      2.0) /
+    3.0;
+
+  return ret;
+}
+
+/**
+ * WGS84坐标系转GCJ02坐标系（地球坐标系转火星坐标系）
+ * @param lng 经度
+ * @param lat 纬度
+ * @returns 转换后的坐标 [经度, 纬度]
+ */
+export function wgs84ToGcj02(lng: number, lat: number): [number, number] {
+  if (outOfChina(lng, lat)) {
+    return [lng, lat];
+  }
+
+  const dlat = transformLat(lng - 105.0, lat - 35.0);
+  const dlng = transformLng(lng - 105.0, lat - 35.0);
+  const radlat = (lat / 180.0) * PI;
+  let magic = Math.sin(radlat);
+  magic = 1 - EE * magic * magic;
+  const sqrtmagic = Math.sqrt(magic);
+
+  const transformedLat =
+    (dlat * 180.0) /
+    (((A * (1 - EE)) / (magic * sqrtmagic)) * PI);
+  const transformedLng =
+    (dlng * 180.0) / ((A / sqrtmagic) * Math.cos(radlat) * PI);
+
+  const mglat = lat + transformedLat;
+  const mglng = lng + transformedLng;
+
+  return [mglng, mglat];
+}
+
+/**
+ * GCJ02坐标系转WGS84坐标系（火星坐标系转地球坐标系）
+ * @param lng 经度
+ * @param lat 纬度
+ * @returns 转换后的坐标 [经度, 纬度]
+ */
+export function gcj02ToWgs84(lng: number, lat: number): [number, number] {
+  if (outOfChina(lng, lat)) {
+    return [lng, lat];
+  }
+
+  const dlat = transformLat(lng - 105.0, lat - 35.0);
+  const dlng = transformLng(lng - 105.0, lat - 35.0);
+  const radlat = (lat / 180.0) * PI;
+  let magic = Math.sin(radlat);
+  magic = 1 - EE * magic * magic;
+  const sqrtmagic = Math.sqrt(magic);
+
+  const transformedLat = (dlat * 180.0) / ((A * (1 - EE)) / (magic * sqrtmagic) * PI);
+  const transformedLng = (dlng * 180.0) / (A / sqrtmagic * Math.cos(radlat) * PI);
+
+  const mglat = lat + transformedLat;
+  const mglng = lng + transformedLng;
+
+  return [lng * 2 - mglng, lat * 2 - mglat];
+}
+
+/**
+ * 对象形式的坐标转换 - WGS84转GCJ02
+ * @param point 坐标点对象 {lng: 经度, lat: 纬度}
+ * @returns 转换后的坐标点对象
+ */
+export function wgs84ToGcj02Point(point: CoordinatePoint): CoordinatePoint {
+  const [lng, lat] = wgs84ToGcj02(point.lng, point.lat);
+  return { lng, lat };
+}
+
+/**
+ * 对象形式的坐标转换 - GCJ02转WGS84
+ * @param point 坐标点对象 {lng: 经度, lat: 纬度}
+ * @returns 转换后的坐标点对象
+ */
+export function gcj02ToWgs84Point(point: CoordinatePoint): CoordinatePoint {
+  const [lng, lat] = gcj02ToWgs84(point.lng, point.lat);
+  return { lng, lat };
+}
+
+/**
+ * 批量转换坐标点 - WGS84转GCJ02
+ * @param points 坐标点数组
+ * @returns 转换后的坐标点数组
+ */
+export function batchWgs84ToGcj02(points: CoordinatePoint[]): CoordinatePoint[] {
+  return points.map(point => wgs84ToGcj02Point(point));
+}
+
+/**
+ * 批量转换坐标点 - GCJ02转WGS84
+ * @param points 坐标点数组
+ * @returns 转换后的坐标点数组
+ */
+export function batchGcj02ToWgs84(points: CoordinatePoint[]): CoordinatePoint[] {
+  return points.map(point => gcj02ToWgs84Point(point));
+}
+
+// 默认导出
+export default {
+  wgs84ToGcj02,
+  gcj02ToWgs84,
+  wgs84ToGcj02Point,
+  gcj02ToWgs84Point,
+  batchWgs84ToGcj02,
+  batchGcj02ToWgs84,
+  outOfChina
+};

src/utils/index.ts

@@ -316,3 +316,15 @@ export const removeClass = (ele: HTMLElement, cls: string) => {
 export const isExternal = (path: string) => {
   return /^(https?:|http?:|mailto:|tel:)/.test(path);
 };
+
+// 导出坐标系转换工具
+export { default as coordinateTransform } from './coordinate-transform';
+export type { CoordinatePoint } from './coordinate-transform';
+export {
+  wgs84ToGcj02,
+  gcj02ToWgs84,
+  wgs84ToGcj02Point,
+  gcj02ToWgs84Point,
+  batchWgs84ToGcj02,
+  batchGcj02ToWgs84
+} from './coordinate-transform';

src/utils/mqtt.ts

@@ -0,0 +1,276 @@
+
+import * as Paho from 'paho-mqtt';
+
+// MQTT消息类型定义
+export interface MqttMessage {
+  topic: string;
+  payload: string | ArrayBuffer;
+  qos: number;
+  retained: boolean;
+  time: Date;
+}
+// 订阅选项
+export interface SubscribeOptions {
+  qos: 0 | 1 | 2;
+}
+
+// 根据当前页面协议自动选择MQTT配置
+const getMqttConfig = () => {
+  // 检测当前页面协议（http: 或 https:）
+  //const isHttps = window.location.protocol === 'https:';
+
+  const isHttps = import.meta.env.VITE_APP_ENV === 'production' || window.location.protocol === 'https:';
+    console.log(isHttps,'检测环境');
+  
+  return {
+    // 自动切换协议：https页面用wss，http页面用ws
+    protocol: isHttps ? 'wss' : 'ws',
+    host: 'www.cnxhyc.com',
+    // 自动切换端口：https对应9084，http对应9083
+    port: isHttps ? 9084 : 9083,
+    // 认证信息
+    username: 'admin',
+    password: '#YtvpSfCNG',
+    clientId: `vue3-mqtt-client-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
+    cleanSession: true,
+    keepAliveInterval: 60,
+    reconnect: true,
+  };
+};
+const MQTT_CONFIG = getMqttConfig();
+
+// MQTT客户端组合式API
+export function useMqtt() {
+  // 客户端实例
+  let client: Paho.Client | null = null;
+  // 状态管理（修复：已导入ref）
+  const connected = ref(false);
+  const connecting = ref(false);
+  const error = ref<Error | null>(null);
+  const messages = ref<MqttMessage[]>([]);
+  const subscribedTopics = ref<string[]>([]);
+  // 事件回调
+  const connectCallbacks: (() => void)[] = [];
+  const messageCallbacks: ((message: MqttMessage) => void)[] = [];
+  const errorCallbacks: ((err: Error) => void)[] = [];
+  const disconnectCallbacks: (() => void)[] = [];
+  // 修复：移除无用的p0参数，connect方法不接受回调（通过onConnect注册）
+  const connect = () => {
+    if (connected.value || connecting.value) return;
+    connecting.value = true;
+    error.value = null;
+
+    try {
+      // 打印当前使用的配置（方便调试）
+      console.log('当前MQTT连接配置:', {
+        protocol: MQTT_CONFIG.protocol,
+        host: MQTT_CONFIG.host,
+        port: MQTT_CONFIG.port,
+        clientId: MQTT_CONFIG.clientId
+      });
+      client = new Paho.Client(
+        MQTT_CONFIG.host,
+        MQTT_CONFIG.port,
+        MQTT_CONFIG.clientId
+      );
+
+      // 设置连接选项
+      const connectOptions: Paho.ConnectOptions = {
+        userName: MQTT_CONFIG.username,
+        password: MQTT_CONFIG.password,
+        cleanSession: MQTT_CONFIG.cleanSession,
+        keepAliveInterval: MQTT_CONFIG.keepAliveInterval,
+        reconnect: MQTT_CONFIG.reconnect,
+        useSSL: MQTT_CONFIG.protocol === 'wss',  // 关键：根据协议自动启用 SSL
+
+        // 连接成功回调
+        onSuccess: () => {
+          console.log('MQTT连接成功');
+          connected.value = true;
+          connecting.value = false;
+          connectCallbacks.forEach(cb => cb()); // 触发所有连接成功回调
+        },
+
+        // 连接失败回调
+        onFailure: (err) => {
+          console.error('MQTT连接失败:', err);
+          error.value = new Error(err.errorMessage || '连接失败');
+          connected.value = false;
+          connecting.value = false;
+          errorCallbacks.forEach(cb => cb(error.value!));
+        }
+      };
+
+      // 设置客户端回调
+      client.onConnectionLost = (responseObject) => {
+        if (responseObject.errorCode !== 0) {
+          console.error('连接丢失:', responseObject.errorMessage);
+          error.value = new Error(responseObject.errorMessage || '连接丢失');
+          errorCallbacks.forEach(cb => cb(error.value!));
+        }
+
+        connected.value = false;
+        connecting.value = false;
+        disconnectCallbacks.forEach(cb => cb());
+      };
+
+      // 消息接收回调
+      client.onMessageArrived = (message) => {
+        const newMessage: MqttMessage = {
+          topic: message.destinationName,
+          payload: message.payloadString || message.payloadBytes,
+          qos: message.qos,
+          retained: message.retained,
+          time: new Date()
+        };
+
+        messages.value.push(newMessage);
+        messageCallbacks.forEach(cb => cb(newMessage));
+      };
+
+      // 连接服务器
+      client.connect(connectOptions);
+    } catch (err) {
+      console.error('MQTT连接异常:', err);
+      error.value = err as Error;
+      connected.value = false;
+      connecting.value = false;
+      errorCallbacks.forEach(cb => cb(error.value!));
+    }
+  };
+
+  // 断开连接
+  const disconnect = () => {
+    if (!client || !connected.value) return;
+
+    client.disconnect();
+    client = null;
+    connected.value = false;
+    subscribedTopics.value = [];
+    disconnectCallbacks.forEach(cb => cb());
+  };
+
+  // 订阅主题
+  const subscribe = (topic: string, options: SubscribeOptions): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (!client || !connected.value) {
+        reject(new Error('未连接到MQTT服务器'));
+        return;
+      }
+
+      if (subscribedTopics.value.includes(topic)) {
+        resolve();
+        return;
+      }
+
+      client.subscribe(topic, {
+        qos: options.qos,
+        onSuccess: () => {
+          console.log(`订阅主题成功: ${topic}`);
+          subscribedTopics.value.push(topic);
+          resolve();
+        },
+        onFailure: (err) => {
+          console.error(`订阅主题失败: ${topic}`, err);
+          reject(new Error(err.errorMessage || `订阅主题 ${topic} 失败`));
+        }
+      });
+    });
+  };
+
+  // 取消订阅
+  const unsubscribe = (topic: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (!client || !connected.value) {
+        reject(new Error('未连接到MQTT服务器'));
+        return;
+      }
+
+      if (!subscribedTopics.value.includes(topic)) {
+        resolve();
+        return;
+      }
+
+      client.unsubscribe(topic, {
+        onSuccess: () => {
+          console.log(`取消订阅主题成功: ${topic}`);
+          subscribedTopics.value = subscribedTopics.value.filter(t => t !== topic);
+          resolve();
+        },
+        onFailure: (err) => {
+          console.error(`取消订阅主题失败: ${topic}`, err);
+          reject(new Error(err.errorMessage || `取消订阅主题 ${topic} 失败`));
+        }
+      });
+    });
+  };
+
+  // 发布消息
+  const publish = (
+    topic: string,
+    payload: string | ArrayBuffer,
+    options: { qos: 0 | 1 | 2; retained?: boolean }
+  ): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (!client || !connected.value) {
+        reject(new Error('未连接到MQTT服务器'));
+        return;
+      }
+
+      if (!topic) {
+        reject(new Error('主题不能为空'));
+        return;
+      }
+
+      const message = new Paho.Message(
+        typeof payload === 'string' ? payload : payload.toString()
+      );
+
+      message.destinationName = topic;
+      message.qos = options.qos;
+      message.retained = options.retained ?? false;
+
+      client.send(message);
+      resolve();
+    });
+  };
+
+  // 事件注册
+  const onConnect = (callback: () => void) => {
+    connectCallbacks.push(callback);
+  };
+
+  const onMessage = (callback: (message: MqttMessage) => void) => {
+    messageCallbacks.push(callback);
+  };
+
+  const onError = (callback: (err: Error) => void) => {
+    errorCallbacks.push(callback);
+  };
+
+  const onDisconnect = (callback: () => void) => {
+    disconnectCallbacks.push(callback);
+  };
+
+  // 组件卸载时断开连接
+  onUnmounted(() => {
+    disconnect();
+  });
+
+  return {
+    connected,
+    connecting,
+    error,
+    messages,
+    subscribedTopics,
+    connect,
+    disconnect,
+    subscribe,
+    unsubscribe,
+    publish,
+    onConnect,
+    onMessage,
+    onError,
+    onDisconnect
+  };
+}

src/utils/timeConverter.ts

@@ -0,0 +1,113 @@
+/**
+ * 时间转换工具类
+ * 提供时间格式化、时间差计算等功能
+ */
+export class TimeConverter {
+  /**
+   * 检查时间字符串是否有效
+   * @param timeStr 时间字符串
+   * @returns 是否有效的时间
+   */
+  static isValidTime(timeStr: string): boolean {
+    if (!timeStr) return false;
+    return !isNaN(new Date(timeStr).getTime());
+  }
+
+  /**
+   * 格式化时间
+   * @param timeStr 时间字符串
+   * @param format 格式，可选值: 'YYYY-MM-DD', 'HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'
+   * @returns 格式化后的时间字符串
+   */
+  static formatTime(timeStr: string, format: 'YYYY-MM-DD' | 'HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss' = 'YYYY-MM-DD HH:mm:ss'): string {
+    if (!this.isValidTime(timeStr)) return '无效时间';
+
+    const date = new Date(timeStr);
+    const year = date.getFullYear();
+    const month = this.padZero(date.getMonth() + 1);
+    const day = this.padZero(date.getDate());
+    const hours = this.padZero(date.getHours());
+    const minutes = this.padZero(date.getMinutes());
+    const seconds = this.padZero(date.getSeconds());
+
+    switch (format) {
+      case 'YYYY-MM-DD':
+        return `${year}-${month}-${day}`;
+      case 'HH:mm:ss':
+        return `${hours}:${minutes}:${seconds}`;
+      case 'YYYY-MM-DD HH:mm:ss':
+      default:
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+  }
+
+  /**
+   * 计算与当前时间的差值（格式为 HH:mm:ss）
+   * @param startTimeStr 起始时间字符串
+   * @returns 格式化的时间差字符串
+   */
+  static calculateTimeDiff(startTimeStr: string): string {
+    if (!this.isValidTime(startTimeStr)) return '';
+
+    const startTime = new Date(startTimeStr).getTime();
+    const nowTime = new Date().getTime();
+    const diffMs = nowTime - startTime;
+
+    // 处理未来时间
+    if (diffMs < 0) {
+      return '00:00:00';
+    }
+
+    // 计算总秒数
+    const totalSeconds = Math.floor(diffMs / 1000);
+
+    // 计算时、分、秒
+    const hours = this.padZero(Math.floor(totalSeconds / 3600));
+    const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
+    const seconds = this.padZero(totalSeconds % 60);
+
+    return `${hours}:${minutes}:${seconds}`;
+  }
+
+  /**
+   * 数字补零
+   * @param num 数字
+   * @returns 补零后的字符串
+   */
+  private static padZero(num: number): string {
+    return num < 10 ? `0${num}` : num.toString();
+  }
+
+  /**
+   * 创建一个时间差更新定时器
+   * @param startTimeStr 起始时间字符串
+   * @param callback 回调函数，接收计算后的时间差
+   * @param interval 刷新间隔(毫秒)
+   * @returns 定时器ID，用于清除定时器
+   */
+  static createTimeDiffTimer(
+    startTimeStr: string,
+    callback: (diffText: string) => void,
+    interval: number = 1000
+  ): number {
+    // 立即执行一次
+    callback(this.calculateTimeDiff(startTimeStr));
+
+    // 设置定时器
+    const timerId = window.setInterval(() => {
+      callback(this.calculateTimeDiff(startTimeStr));
+    }, interval);
+
+    return timerId;
+  }
+
+  /**
+   * 清除时间差更新定时器
+   * @param timerId 定时器ID
+   */
+  static clearTimeDiffTimer(timerId: number | null): void {
+    if (timerId) {
+      clearInterval(timerId);
+    }
+  }
+}

src/views/controlCenter/210/index.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="device-page p-2">
+        这是210控制页面
+    </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped>
+.p-2{
+  background: rgba(247, 248, 252, 1);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 15px;
+}
+</style>

src/views/controlCenter/6170/index.vue

@@ -6,7 +6,7 @@
             <div>设备型号：{{ deviceDetail.deviceImei }}</div>
             <div class="device-status">设备状态：
                 <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
-                    {{ deviceDetail.onlineStatus === 1 ? "在线" : "离线" }}
+                    {{ deviceDetail.onlineStatus === 1 ? '在线' : (deviceDetail.onlineStatus === 2 ? '故障' : '离线') }}
                 </span>
             </div>
             <div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
@@ -15,6 +15,14 @@
 
         <!-- 主体内容区域 -->
         <div class="content-wrapper">
+            <el-row :gutter="20" class="content-row" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'" >
+                <el-col :lg="24" :xs="24">
+                    <div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'"
+                        @click="showClose()">
+                        设备强制报警中!
+                    </div>
+                </el-col>
+            </el-row>
             <!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
             <el-row :gutter="20" class="content-row">
                 <el-col :lg="16" :xs="24">
@@ -50,8 +58,8 @@
                                 :loading-text="lightModesLoading ? '保存中...' : '保存'"> {{
                                     lightModesLoading ? '保存中' : '保存' }}</el-button>
                         </div>
-                        <el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading"
-                            :loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
+                        <el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading" v-if="deviceDetail.alarmStatus === 0 || deviceDetail.alarmStatus === null"
+                            :loading-text="forceAlarmLoading ? '报警中...' : '强制报警'" > {{
                                 forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
                     </div>
                     <div class="content-card_gps">
@@ -113,18 +121,32 @@
                         <div class="message-content">
                             <el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
                                 v-model="deviceDetail.sendMsg" resize="none" />
-                            <el-button type="primary" class="send-btn" @click="sendTextMessage"
-                                :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
-                                    sendTextLoading ? '发送中' : '发送' }}</el-button>
+                            <div style="text-align: end;clear: both;">
+                                <el-button type="primary" class="send-btn" @click="sendTextMessage"
+                                    :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
+                                        sendTextLoading ? '发送中' : '发送' }}</el-button>
+                            </div>
                         </div>
+
                     </div>
                 </el-col>
             </el-row>
         </div>
+        <!-- ===========充电提示框====== -->
+        <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
+            <div style="display: flex; align-items: center;">
+                <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
+            </div>
+            <div>请及时充电</div>
+            <span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
+                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script setup name="DeviceControl" lang="ts">
 const route = useRoute();
+import { useMqtt } from '@/utils/mqtt';
 import api from '@/api/controlCenter/controlPanel/index'
 import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
 import { generateShortId, getDeviceStatus } from '@/utils/function';
@@ -147,7 +169,16 @@ const fullscreenLoading = ref(false)
 const forceAlarmLoading = ref(false)  //强制报警
 const sendTextLoading = ref(false)
 const lightModesLoading = ref(false)
-
+const centerDialogVisible = ref(false)
+const {
+    connected,
+    connect,
+    subscribe,
+    onConnect,
+    onError,
+    onMessage,
+    disconnect
+} = useMqtt();
 // 灯光模式数据（引用导入的图片）
 const lightModes = ref<LightMode[]>([
     {
@@ -206,7 +237,7 @@ const laserMode = ref<LightMode>({
     active: false
 });
 
-const deviceDetail = ref<DeviceDetail>({
+const deviceDetail = ref<DeviceDetail & { typeName: string }>({
     // 重点：personnelInfo 初始化为空对象，避免 undefined
     personnelInfo: {
         unitName: '',
@@ -223,7 +254,10 @@ const deviceDetail = ref<DeviceDetail>({
     longitude: '',
     latitude: '',
     address: '',
-    sendMsg: ''
+    sendMsg: '',
+    chargeState: '0',
+    typeName: '',
+    alarmStatus: 0
 });
 // 保留原有的操作中标志位
 const isUpdatingStatus = ref(false);
@@ -244,6 +278,7 @@ const handleModeClick = async (modeId: string) => {
             typeName: deviceDetail.value.typeName,
         });
         if (res.code === 200) {
+            ElMessage.closeAll();
             proxy?.$modal.msgSuccess(res.msg);
             setActiveLightMode(modeId);
         } else {
@@ -254,7 +289,7 @@ const handleModeClick = async (modeId: string) => {
             }
         }
     } catch (error) {
-        proxy?.$modal.msgError("操作失败，请稍后重试");
+        // proxy?.$modal.msgError("操作失败，请稍后重试");
         // 异常时恢复状态
         const prevActiveMode = lightModes.value.find(m => m.active);
         if (prevActiveMode) {
@@ -300,7 +335,7 @@ const getList = async () => {
             targetModeId = matchedMode.id;
         }
         setActiveLightMode(targetModeId);
-        const laserStatus = res.data.laserModeStatus ?? 0;
+        const laserStatus = Number(res.data.laserLightMode);
         laserMode.value.active = laserStatus === 1;
         laserMode.value.switchStatus = laserStatus === 1;
     } catch (error) {
@@ -321,6 +356,7 @@ const handleLaserClick = async () => {
             instructValue: targetStatus ? 1 : 0
         });
         if (res.code === 200) {
+            ElMessage.closeAll();
             proxy?.$modal.msgSuccess(res.msg);
             laserMode.value.active = targetStatus;
             laserMode.value.switchStatus = targetStatus;
@@ -330,7 +366,7 @@ const handleLaserClick = async () => {
             laserMode.value.switchStatus = !targetStatus;
         }
     } catch (error: any) {
-        proxy?.$modal.msgError(error.msg);
+       // proxy?.$modal.msgError(error.msg);
         // 恢复之前的状态
         laserMode.value.switchStatus = !laserMode.value.switchStatus;
     } finally { }
@@ -393,15 +429,60 @@ const saveBtn = () => {
 
         } else {
             lightModesLoading.value = false
-            proxy?.$modal.msgError(res.msg);
+            //proxy?.$modal.msgError(res.msg);
         }
 
     })
 }
+// 解除报警
+const showClose = async () => {
+    try {
+        await proxy?.$modal.confirm('确定要对该设备解除报警？', '提示');
+        // 2. 准备请求数据
+        const batchId = generateShortId();
+        let data = {
+            deviceIds: [route.params.deviceId],
+            typeName: deviceDetail.value.typeName,
+            deviceImeiList: [deviceDetail.value.deviceImei],
+            batchId: batchId,
+            instructValue: '0', //强制报警1，解除报警0
+        }
+        const registerRes = await api.sendAlarmMessage(data);
+        if (registerRes.code !== 200) {
+            proxy?.$modal.msgWarning(registerRes.msg)
+            return
+        }
+        // 4. 获取设备状态
+        let deviceImei = deviceDetail.value.deviceImei
+        const statusRes = await getDeviceStatus({
+            functionMode: 2,
+            batchId,
+            typeName: 'FunctionAccessBatchStatusRule',
+            deviceImei,
+            interval: 500
+        },
+            api.deviceRealTimeStatus
+        );
+        // 只有当状态为'OK'时才显示成功弹窗
+        if (statusRes.data.functionAccess === 'OK') {
+            proxy?.$modal.msgSuccess(statusRes.msg);
+            await getList();
+        }
+
+    } catch (error: any) {
+    }
+
+
+}
+
+
+
+
+
 // 强制报警
 const forceAlarm = async () => {
     try {
-        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '');
+        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
         forceAlarmLoading.value = true
         // 2. 准备请求数据
         const batchId = generateShortId();
@@ -431,10 +512,12 @@ const forceAlarm = async () => {
         // 只有当状态为'OK'时才显示成功弹窗
         if (statusRes.data.functionAccess === 'OK') {
             proxy?.$modal.msgSuccess(statusRes.msg);
+            await getList();
         }
 
     } catch (error: any) {
-        proxy?.$modal.msgWarning(error.msg)
+       // proxy?.$modal.msgWarning(error.msg)
+         forceAlarmLoading.value = false;
 
     } finally {
         forceAlarmLoading.value = false;
@@ -496,13 +579,129 @@ const lookMap = (row: any) => {
         }
     });
 }
+const getMainLightModeLabel = (mode: any) => {
+    const modeMap = {
+        0: 'close',    // 0 → 关闭
+        1: 'strong',   // 1 → 强光
+        2: 'weak',     // 2 → 弱光
+        3: 'strobe',   // 3 → 爆闪
+        4: 'flood'     // 4 → 泛光
+    }
+    return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
+}
+// 处理设备消息
+const handleDeviceMessage = (msg: any) => {
+    try {
+        const payloadObj = JSON.parse(msg.payload.toString());
+        const deviceState = payloadObj.state; // 设备状态数组
+        if (!Array.isArray(deviceState)) {
+            return;
+        }
+        switch (deviceState[0]) {
+            case 1:
+                // 类型1灯光主键
+                const lightModeId = getMainLightModeLabel(deviceState[1]);
+                const brightness = deviceState[2]; // 亮度值
+                const batteryTime = deviceState[3]; // 续航时间
+                console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
+                // 1. 同步灯光模式状态
+                if (lightModeId !== 'unknown') {
+                    lightModes.value.forEach(mode => {
+                        const isActive = mode.id === lightModeId;
+                        mode.active = isActive;
+                        mode.switchStatus = isActive;
+                    });
+                }
+                // 2.亮度
+                if (brightness !== undefined) {
+                    deviceDetail.value.lightBrightness = brightness.toString();
+                }
+                // 3.续航时间
+                if (batteryTime !== undefined) {
+                    deviceDetail.value.batteryRemainingTime = batteryTime.toString();
+                }
+                break;
+            case 12:
+                // 灯光主键
+                const lightModeIdA = getMainLightModeLabel(deviceState[1]);
+                if (lightModeIdA !== 'unknown') {
+                    lightModes.value.forEach(mode => {
+                        const isActive = mode.id === lightModeIdA;
+                        mode.active = isActive;
+                        mode.switchStatus = isActive;
+                    });
+                }
+                // 激光
+                const laserValue = deviceState[2];
+                // 同步激光模式状态：1=开启（true），0=关闭（false）
+                laserMode.value.active = laserValue === 1;
+                laserMode.value.switchStatus = laserValue === 1;
+                deviceDetail.value.batteryPercentage = deviceState[3]; //电量
+                deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
+                // getList(); // 重新获取设备详情
+                if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
+                    centerDialogVisible.value = true
+                }
+                break;
+            case 7:
+                deviceDetail.value.alarmStatus = deviceState[1];
 
-onMounted(() => {
-    getList();
+                break;
+            default:
+                console.log('未处理的消息类型:', deviceState[0]);
+                break;
+        }
+    } catch (e) {
+    }
+};
+onMounted(async () => {
+    await getList();
+    // 连接mqtt
+    onConnect(async () => {
+        const deviceImei = deviceDetail.value.deviceImei;
+        if (!deviceImei) {
+            return;
+        }
+        try {
+            await subscribe(`A/${deviceImei}`, { qos: 1 });
+            console.log('订阅成功');
+        } catch (err) {
+            console.error('订阅失败（onConnect内）:', err);
+        }
+    });
+    // 2. 注册消息接收回调（核心：处理设备发送的消息）
+    onMessage((msg) => {
+        console.log('收到新消息:', {
+            主题: msg.topic,
+            内容: msg.payload,
+            时间: msg.time,
+            QoS: msg.qos
+        });
+        // 在这里处理消息（根据实际业务逻辑）
+        handleDeviceMessage(msg);
+    });
+    onError((err) => {
+        console.error('MQTT连接失败原因:', err.message);
+    });
+    connect();
+});
+onUnmounted(() => {
+    // 只有当连接已建立时，才执行断开操作（避免无效调用）
+    if (connected.value) {
+        console.log('页面离开，断开MQTT连接');
+        disconnect(); // 调用断开连接方法
+    }
 });
 
 </script>
 <style lang="scss" scoped>
+.p-2 {
+    background: rgba(247, 248, 252, 1);
+    min-height: 100vh;
+    box-sizing: border-box;
+    padding: 15px;
+}
+
 .device-page {
     .header-bar {
         border-radius: 8px;
@@ -537,7 +736,7 @@ onMounted(() => {
             background: white;
             padding: 0px 20px 50px;
             border: 1px solid #ebeef5;
-            height: 100%;
+            height: 289px;
             position: relative;
         }
 
@@ -720,9 +919,9 @@ onMounted(() => {
         }
 
         .message-content {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
+            // display: flex;
+            // flex-direction: column;
+            // gap: 10px;
 
             .el-textarea {
                 border: 1px solid rgba(29, 111, 255, 1);
@@ -741,7 +940,9 @@ onMounted(() => {
                 padding: 10px 20px;
                 border-radius: 29px;
                 background: rgba(2, 124, 251, 1);
-                border: none
+                border: none;
+                margin: 20px 0px 30px 0;
+
             }
         }
 
@@ -800,4 +1001,28 @@ onMounted(() => {
         }
     }
 }
-</style>
+
+.path-img {
+    width: 52px;
+    height: 28px;
+}
+
+.staticRwo {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+    background: white;
+    border: 1px solid #ebeef5;
+    height: auto;
+    line-height: 36px;
+    box-sizing: border-box;
+    text-indent: 15px;
+    color: #ff0000;
+    font-weight: bold;
+    font-size: 17px;
+    margin-bottom: 5px;
+}
+
+.displayNone {
+    display: none !important;
+}
+</style>

src/views/controlCenter/controlPanel/components/map.vue

@@ -11,7 +11,7 @@
           <div class="device_item" v-for="(device, index) in effectiveDeviceList" :key="device.id">
             <el-checkbox :value="device.id" :model-value="checkedDeviceIds.includes(device.id)"
               @update:model-value="(checked: boolean) => handleCheckboxChange(checked, device.id)"
-              class="device_checkbox" :hidden="isSingleDevice"></el-checkbox>
+              class="device_checkbox" :hidden="isSingleDevice" :disabled="device.onlineStatus==0"></el-checkbox>
 
             <div class="device_page">
               <div class="device_info">
@@ -101,7 +101,7 @@ const initMap = async () => {
   // 创建地图实例（确保容器DOM已渲染）
   mapInstance = new AMap.Map(mapRef.value, {
     center: getCenterCoord(),
-    zoom: isSingleDevice.value ? 5 : 5,
+    zoom: isSingleDevice.value ? 8 : 8,
     resizeEnable: true
   });
 
@@ -222,7 +222,7 @@ onUnmounted(() => {
 }
 
 .amap-container {
-  height: 640px;
+  height: calc(100vh - 25vh);
   border-radius: 4px;
   overflow: hidden;
   width: 100%;
@@ -234,11 +234,12 @@ onUnmounted(() => {
   border-radius: 4px;
   box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
   background: rgba(255, 255, 255, 1);
-  height: 620px;
+ height: calc(100vh - 25vh);
   position: absolute;
   z-index: 1;
   top: 10px;
-  left: 10px
+  left: 10px;
+  overflow: auto;
 }
 
 /* 其他样式保持不变... */

src/views/controlCenter/controlPanel/index.vue

@@ -37,7 +37,7 @@
                 <el-collapse-item name="1">
                   <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
                     <el-form-item label="设备类型" prop="deviceType">
-                      <el-select v-model="queryParams.deviceType" placeholder="设备类型">
+                      <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
                         <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                           :value="item.deviceTypeId" />
                       </el-select>
@@ -45,10 +45,11 @@
                     <el-form-item label="设备名称" prop="deviceName">
                       <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
                     </el-form-item>
-                    <el-form-item label="设备状态" prop="deviceStatus">
-                      <el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
+                    <el-form-item label="设备状态" prop="onlineStatus">
+                      <el-select v-model="queryParams.onlineStatus" placeholder="设备状态" clearable>
                         <el-option label="在线" value="1"></el-option>
                         <el-option label="离线" value="0"></el-option>
+                        <el-option label="故障" value="2"></el-option>
                       </el-select>
                     </el-form-item>
                     <el-form-item label="设备MAC" prop="deviceMac">
@@ -66,6 +67,7 @@
                       <el-select v-model="queryParams.communicationMode" placeholder="请选择通信方式" clearable>
                         <el-option label="4G" value="0"></el-option>
                         <el-option label="蓝牙" value="1"></el-option>
+                        <el-option label="4G&蓝牙" value="2"></el-option>
                       </el-select>
                     </el-form-item>
                     <el-form-item>
@@ -80,7 +82,7 @@
         </transition>
         <el-card class="Maplist">
           <div v-if="isListView" key="list">
-            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
+            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange"  height="calc(100vh - 310px)">
               <el-table-column type="selection" width="50" align="center" :selectable="isSelectable" />
               <el-table-column label="设备名称" align="center" prop="deviceName" />
               <el-table-column label="设备图片" align="center" prop="devicePic">
@@ -108,6 +110,7 @@
                 <template #default="scope">
                   <div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
                   <div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
+                   <div class="normal red" v-if="scope.row.onlineStatus == 2">故障</div>
                 </template>
               </el-table-column>
               <el-table-column label="电量" align="center" prop="battery">
@@ -117,10 +120,22 @@
                     'battery-yellow': Number(scope.row.battery) >= 20 && Number(scope.row.battery) < 80,
                     'battery-green': Number(scope.row.battery) >= 80 && Number(scope.row.battery) <= 100
                   }">
-                    {{ scope.row.battery }}%
+                    {{ scope.row.battery || '0' }}%
                   </div>
                 </template>
               </el-table-column>
+               <el-table-column label="绑定状态" align="center" prop="bindingStatus">
+                <template #default="scope">
+                  <div class="normal green" v-if="scope.row.bindingStatus == 1">已绑定</div>
+                  <div class="normal red" v-if="scope.row.bindingStatus == 0">未绑定</div>
+                </template>
+              </el-table-column>
+              <el-table-column label="报警状态" align="center" prop="alarmStatus">
+                <template #default="scope">
+                  <div class="normal red" v-if="scope.row.alarmStatus == 1">报警中</div>
+                  <div class="normal green" v-if="scope.row.alarmStatus == 0">未报警</div>
+                </template>
+              </el-table-column>
 
               <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
                 <template #default="scope">
@@ -162,6 +177,8 @@ import apiTypeAll from '@/api/equipmentManagement/device/index';
 import { deviceQuery, deviceVO } from '@/api/controlCenter/controlPanel/types';
 import Amap from "./components/map.vue";
 import { generateShortId, getDeviceStatus } from '@/utils/function';
+import eqControl from '@/api/controlCenter/controlPanel/eqControl';
+
 const router = useRouter();
 const route = useRoute(); // 新增：用于获取URL中的query参数
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -192,7 +209,7 @@ const initData: PageData<'', deviceQuery> = {
     pageSize: 10,
     deviceId: '',
     deviceName: '',
-    deviceStatus: '',
+    onlineStatus: '',
     deviceMac: '',
     deviceImei: '',
     personnelBy: '',
@@ -299,12 +316,13 @@ const resetQuery = () => {
 };
 
 
-/** 设备控制跳转 */
+/** 设备控制跳转动态取detailPageUrl字段值，跳转 */
 const handleControl = (row: any) => {
-  console.log(row,'row1111');
-  
   const deviceId = row.id;
-  router.push('/controlCenter/6170/' + deviceId);
+  const detailPageUrl = row.detailPageUrl;
+  const basePath = detailPageUrl.replace(/\/index$/, '');
+  const dynamicPath = `/${basePath}/${deviceId}`;
+  router.push(dynamicPath); // 跳转路由
 };
 
 /** 选择条数  */
@@ -334,6 +352,7 @@ onMounted(() => {
 const getList = async () => {
   loading.value = false;
   const res = await api.deviceControlCenterList(queryParams.value);
+
   loading.value = false;
   deviceList.value = res.rows;
   total.value = res.total;
@@ -356,12 +375,12 @@ const getDeptTree = async () => {
 const sendTextMessage = () => {
   // 防重复提交
   if (!queryParams.value.deviceType) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选择设备类型');
     return;
   }
   if (ids.value.length == 0) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选中一条设备');
     return;
   }
@@ -370,11 +389,12 @@ const sendTextMessage = () => {
 // 发送文本消息确认
 const submitForm = async () => {
   if (!form.value.messageToSend) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('发送消息不能为空');
     return
   }
   try {
+   
     sendTextLoading.value = true;
     // 2. 准备请求数据
     const deviceIds = ids.value.map(item => item.id);
@@ -387,10 +407,11 @@ const submitForm = async () => {
       typeName: typeName,
       batchId: batchId,
       deviceImeiList: deviceImeiList,
-      sendMsg: form.value.messageToSend
+      sendMsg: form.value.messageToSend,
+      instructValue:""
     };
     // 3.人员信息
-    const registerRes = await api.deviceSendMessage(data);
+    const registerRes = await eqControl.deviceSendMessage(data);
     if (registerRes.code !== 200) {
       proxy?.$modal.msgWarning(registerRes.msg)
       return
@@ -426,12 +447,12 @@ const cancel = () => {
 // 强制报警
 const forceAlarm = async () => {
   if (!queryParams.value.deviceType) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选择设备类型');
     return;
   }
   if (ids.value.length == 0) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选中一条设备');
     return;
   }
@@ -446,12 +467,13 @@ const forceAlarm = async () => {
     const typeName = firstDevice.typeName; // 取第一个设备的typeName，为空时给默认值
     let data = {
       deviceIds: deviceIds,
-      typeName: typeName,
+      typeName: typeName,      
       batchId: batchId,
       deviceImeiList: deviceImeiList,
-      instructValue: '1', //强制报警1，解除报警0
+      instructValue: '1' //强制报警1，解除报警0
+      
     }
-    const registerRes = await api.sendAlarmMessage(data);
+    const registerRes = await eqControl.sendAlarmMessage(data);
     if (registerRes.code !== 200) {
       proxy?.$modal.msgWarning(registerRes.msg)
       return
@@ -482,6 +504,17 @@ const forceAlarm = async () => {
 
 </script>
 <style lang="scss" scoped>
+.p-2 {
+  background: rgba(247, 248, 252, 1);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+:deep .el-collapse {
+  border-top: none
+}
+
 :deep .el-collapse-item__header {
   display: none;
 }
@@ -542,7 +575,7 @@ const forceAlarm = async () => {
 }
 
 .Maplist {
-  height: 680px;
-  overflow: auto;
+ //height: calc(100vh - 24vh);
+  //overflow: auto;
 }
 </style>

src/views/controlCenter/delivery/index.vue

@@ -15,11 +15,10 @@
             <el-card>
               <!-- =========搜索按钮操作======= -->
               <div class="btn_search">
-                <el-button type="primary"  plain icon="Download"
-                  @click="handleExport">导出</el-button>
+                <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
                 <div style="position: absolute; right:30px; top:20px">
                   <el-input v-model="queryParams.content" placeholder="MAC/IMEI" clearable
-                    style="width: 200px; margin-right: 20px;"  @keyup.enter="handleQuery" @input="handleInput" />
+                    style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
                   <el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
                 </div>
               </div>
@@ -27,7 +26,7 @@
                 <el-collapse-item name="1">
                   <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
                     <el-form-item label="设备类型" prop="deviceType">
-                      <el-select v-model="queryParams.deviceType" placeholder="设备类型">
+                      <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
                         <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                           :value="item.deviceTypeId" />
                       </el-select>
@@ -59,12 +58,17 @@
         </transition>
         <el-card class="Maplist">
           <div>
-            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
+            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange" height="calc(100vh - 400px)">
               <el-table-column type="selection" width="50" align="center" />
               <el-table-column label="设备名称" align="center" prop="deviceName" />
               <el-table-column label="设备型号" align="center" prop="deviceType" />
               <el-table-column label="操作模块" align="center" prop="deviceAction" />
-              <el-table-column label="操作内容" align="center" prop="content" show-overflow-tooltip />
+              <el-table-column label="操作内容" align="center" prop="content" show-overflow-tooltip >
+                  <template #default="scope">
+                  <div>{{scope.row.content || '/'}}</div>
+                </template>
+              </el-table-column>
+
               <el-table-column label="操作时间" align="center" prop="createTime" />
             </el-table>
             <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@@ -109,7 +113,7 @@ const initData: PageData<'', deviceQuery> = {
     deviceType: '',
     startTime: '',
     endTime: '',
-    content:""
+    content: ""
   },
   rules: undefined,
   form: ''
@@ -245,6 +249,15 @@ const handleExport = () => {
 
 </script>
 <style lang="scss" scoped>
+.p-2{
+  background: rgba(247, 248, 252, 1);
+height: calc(100vh - 8vh);
+  box-sizing: border-box;
+  padding: 15px;
+}
+:deep .el-collapse{
+  border-top:none
+}
 :deep .el-collapse-item__header {
   display: none;
 }
@@ -286,7 +299,7 @@ const handleExport = () => {
 }
 
 .Maplist {
-  height: 680px;
-  overflow: auto;
+ height: calc(100vh - 24vh);
+ // overflow: auto;
 }
 </style>

src/views/controlCenter/historyjectory/index.vue

@@ -26,7 +26,7 @@
                 <el-collapse-item name="1">
                   <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
                     <el-form-item label="设备类型" prop="deviceType">
-                      <el-select v-model="queryParams.deviceType" placeholder="设备类型">
+                      <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
                         <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                           :value="item.deviceTypeId" />
                       </el-select>
@@ -58,7 +58,7 @@
         </transition>
         <el-card class="Maplist">
           <div>
-            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
+            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange" height="calc(100vh - 400px)">
               <el-table-column type="selection" width="50" align="center" />
               <el-table-column label="设备名称" align="center" prop="deviceName" />
               <el-table-column label="设备型号" align="center" prop="deviceType" />
@@ -257,6 +257,15 @@ const historyjectory = (row: any) => {
 
 </script>
 <style lang="scss" scoped>
+.p-2{
+  background: rgba(247, 248, 252, 1);
+height: calc(100vh - 8vh);
+  box-sizing: border-box;
+  padding: 15px;
+}
+:deep .el-collapse{
+  border-top:none
+}
 :deep .el-collapse-item__header {
   display: none;
 }
@@ -298,7 +307,7 @@ const historyjectory = (row: any) => {
 }
 
 .Maplist {
-  height: 680px;
-  overflow: auto;
+ height: calc(100vh - 24vh);
+  // overflow: auto;
 }
 </style>

src/views/controlCenter/historyjectory/trackplayback.vue

@@ -216,10 +216,10 @@ const handlePlayPause = (group: any) => {
         return isNaN(lng) || isNaN(lat) ? null : [lng, lat] as [number, number];
     }).filter((point: any) => point !== null); // 过滤无效点
 
-    if (validTrackPoints.length < 2) {
-        ElMessage.warning('有效轨迹点不足2个，无法播放');
-        return;
-    }
+    // if (validTrackPoints.length < 2) {
+    //     ElMessage.warning('有效轨迹点不足2个，无法播放');
+    //     return;
+    // }
 
     // 3. 重置播放状态并赋值轨迹数据
     resetPlayState();

src/views/demo/demo/index.vue

@@ -1,254 +0,0 @@
-<template>
-  <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="部门id" prop="deptId">
-              <el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="用户id" prop="userId">
-              <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="排序号" prop="orderNum">
-              <el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="key键" prop="testKey">
-              <el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="值" prop="value">
-              <el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
-    <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-              >删除</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column v-if="true" label="主键" align="center" prop="id" />
-        <el-table-column label="部门id" align="center" prop="deptId" />
-        <el-table-column label="用户id" align="center" prop="userId" />
-        <el-table-column label="排序号" align="center" prop="orderNum" />
-        <el-table-column label="key键" align="center" prop="testKey" />
-        <el-table-column label="值" align="center" prop="value" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button v-hasPermi="['demo:demo:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button v-hasPermi="['demo:demo:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
-    </el-card>
-    <!-- 添加或修改测试单对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="部门id" prop="deptId">
-          <el-input v-model="form.deptId" placeholder="请输入部门id" />
-        </el-form-item>
-        <el-form-item label="用户id" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入用户id" />
-        </el-form-item>
-        <el-form-item label="排序号" prop="orderNum">
-          <el-input v-model="form.orderNum" placeholder="请输入排序号" />
-        </el-form-item>
-        <el-form-item label="key键" prop="testKey">
-          <el-input v-model="form.testKey" placeholder="请输入key键" />
-        </el-form-item>
-        <el-form-item label="值" prop="value">
-          <el-input v-model="form.value" placeholder="请输入值" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="Demo" lang="ts">
-import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
-import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const demoList = ref<DemoVO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-
-const queryFormRef = ref<ElFormInstance>();
-const demoFormRef = ref<ElFormInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: DemoForm = {
-  id: undefined,
-  deptId: undefined,
-  userId: undefined,
-  orderNum: undefined,
-  testKey: undefined,
-  value: undefined
-};
-const data = reactive<PageData<DemoForm, DemoQuery>>({
-  form: { ...initFormData },
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    deptId: undefined,
-    userId: undefined,
-    orderNum: undefined,
-    testKey: undefined,
-    value: undefined
-  },
-  rules: {
-    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
-    deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
-    userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
-    orderNum: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],
-    testKey: [{ required: true, message: 'key键不能为空', trigger: 'blur' }],
-    value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询测试单列表 */
-const getList = async () => {
-  loading.value = true;
-  const res = await listDemo(queryParams.value);
-  demoList.value = res.rows;
-  total.value = res.total;
-  loading.value = false;
-};
-
-/** 取消按钮 */
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  demoFormRef.value?.resetFields();
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: DemoVO[]) => {
-  ids.value = selection.map((item) => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
-/** 新增按钮操作 */
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加测试单';
-};
-
-/** 修改按钮操作 */
-const handleUpdate = async (row?: DemoVO) => {
-  reset();
-  const _id = row?.id || ids.value[0];
-  const res = await getDemo(_id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改测试单';
-};
-
-/** 提交按钮 */
-const submitForm = () => {
-  demoFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateDemo(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addDemo(form.value).finally(() => (buttonLoading.value = false));
-      }
-      proxy?.$modal.msgSuccess('修改成功');
-      dialog.visible = false;
-      await getList();
-    }
-  });
-};
-
-/** 删除按钮操作 */
-const handleDelete = async (row?: DemoVO) => {
-  const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
-  await delDemo(_ids);
-  proxy?.$modal.msgSuccess('删除成功');
-  await getList();
-};
-
-/** 导出按钮操作 */
-const handleExport = () => {
-  proxy?.download(
-    'demo/demo/export',
-    {
-      ...queryParams.value
-    },
-    `demo_${new Date().getTime()}.xlsx`
-  );
-};
-
-onMounted(() => {
-  getList();
-});
-</script>

src/views/demo/tree/index.vue

@@ -1,259 +0,0 @@
-<template>
-  <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="树节点名" prop="treeName">
-              <el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
-    <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:tree:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
-          </el-col>
-          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
-      </template>
-      <el-table
-        ref="treeTableRef"
-        v-loading="loading"
-        :data="treeList"
-        row-key="id"
-        border
-        :default-expand-all="isExpandAll"
-        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      >
-        <el-table-column label="父id" align="center" prop="parentId" />
-        <el-table-column label="部门id" align="center" prop="deptId" />
-        <el-table-column label="用户id" align="center" prop="userId" />
-        <el-table-column label="树节点名" align="center" prop="treeName" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button v-hasPermi="['demo:tree:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
-            </el-tooltip>
-            <el-tooltip content="新增" placement="top">
-              <el-button v-hasPermi="['demo:tree:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button v-hasPermi="['demo:tree:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-    <!-- 添加或修改测试树对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="treeFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="父id" prop="parentId">
-          <el-tree-select
-            v-model="form.parentId"
-            :data="treeOptions"
-            :props="{ value: 'id', label: 'treeName', children: 'children' } as any"
-            value-key="id"
-            placeholder="请选择父id"
-            check-strictly
-          />
-        </el-form-item>
-        <el-form-item label="部门id" prop="deptId">
-          <el-input v-model="form.deptId" placeholder="请输入部门id" />
-        </el-form-item>
-        <el-form-item label="用户id" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入用户id" />
-        </el-form-item>
-        <el-form-item label="值" prop="treeName">
-          <el-input v-model="form.treeName" placeholder="请输入值" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="Tree" lang="ts">
-import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree';
-import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
-
-type TreeOption = {
-  id: number;
-  treeName: string;
-  children?: TreeOption[];
-};
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const treeList = ref<TreeVO[]>([]);
-const treeOptions = ref<TreeOption[]>([]);
-const buttonLoading = ref(false);
-const showSearch = ref(true);
-const isExpandAll = ref(true);
-const loading = ref(false);
-
-const queryFormRef = ref<ElFormInstance>();
-const treeFormRef = ref<ElFormInstance>();
-const treeTableRef = ref<ElTableInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: TreeForm = {
-  id: undefined,
-  parentId: undefined,
-  deptId: undefined,
-  userId: undefined,
-  treeName: undefined
-};
-
-const data = reactive<PageData<TreeForm, TreeQuery>>({
-  form: { ...initFormData },
-  queryParams: {
-    parentId: undefined,
-    deptId: undefined,
-    userId: undefined,
-    treeName: undefined
-  },
-  rules: {
-    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
-    parentId: [{ required: true, message: '父id不能为空', trigger: 'blur' }],
-    deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
-    userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
-    treeName: [{ required: true, message: '值不能为空', trigger: 'blur' }]
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询测试树列表 */
-const getList = async () => {
-  loading.value = true;
-  const res = await listTree(queryParams.value);
-  const data = proxy?.handleTree<TreeVO>(res.data, 'id', 'parentId');
-  if (data) {
-    treeList.value = data;
-    loading.value = false;
-  }
-};
-
-/** 查询测试树下拉树结构 */
-const getTreeselect = async () => {
-  const res = await listTree();
-  treeOptions.value = [];
-  const data: TreeOption = { id: 0, treeName: '顶级节点', children: [] };
-  data.children = proxy?.handleTree<TreeOption>(res.data, 'id', 'parentId');
-  treeOptions.value.push(data);
-};
-
-// 取消按钮
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-// 表单重置
-const reset = () => {
-  form.value = { ...initFormData };
-  treeFormRef.value?.resetFields();
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 新增按钮操作 */
-const handleAdd = (row?: TreeVO) => {
-  reset();
-  getTreeselect();
-  if (row && row.id) {
-    form.value.parentId = row.id;
-  } else {
-    form.value.parentId = 0;
-  }
-  dialog.visible = true;
-  dialog.title = '添加测试树';
-};
-
-/** 展开/折叠操作 */
-const handleToggleExpandAll = () => {
-  isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(treeList.value, isExpandAll.value);
-};
-
-/** 展开/折叠操作 */
-const toggleExpandAll = (data: TreeVO[], status: boolean) => {
-  data.forEach((item) => {
-    treeTableRef.value?.toggleRowExpansion(item, status);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
-  });
-};
-
-/** 修改按钮操作 */
-const handleUpdate = async (row: TreeVO) => {
-  reset();
-  await getTreeselect();
-  if (row) {
-    form.value.parentId = row.id;
-  }
-  const res = await getTree(row.id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改测试树';
-};
-
-/** 提交按钮 */
-const submitForm = () => {
-  treeFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateTree(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addTree(form.value).finally(() => (buttonLoading.value = false));
-      }
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
-    }
-  });
-};
-
-/** 删除按钮操作 */
-const handleDelete = async (row: TreeVO) => {
-  await proxy?.$modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？');
-  loading.value = true;
-  await delTree(row.id).finally(() => (loading.value = false));
-  await getList();
-  proxy?.$modal.msgSuccess('删除成功');
-};
-
-onMounted(() => {
-  getList();
-});
-</script>

src/views/equipmentAlarmRecord/index.vue

@@ -34,9 +34,8 @@
                   <el-select v-model="queryParams.deviceAction">
                     <el-option value="0" label="强制报警"></el-option>
                     <el-option value="1" label="撞击闯入"></el-option>
-                    <el-option value="2" label="手动报警"></el-option>
+                    <el-option value="2" label="自动报警"></el-option>
                     <el-option value="3" label="电子围栏告警"></el-option>
-                    <el-option value="4" label="强制告警"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="报警时间" style="width: 308px">
@@ -44,10 +43,10 @@
                     range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                     :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
                 </el-form-item>
-                <el-form-item label="报警状态" prop="treatmentState">
+                <el-form-item label="处理状态" prop="treatmentState">
                   <el-select v-model="queryParams.treatmentState">
                     <el-option value="0" label="已处理"></el-option>
-                    <el-option value="1" label="未处理"></el-option>
+                    <el-option value="1" label="待处理"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item>
@@ -63,7 +62,7 @@
 
     <el-card shadow="never">
       <div v-if="isListView" key="card">
-        <el-row :gutter="20">
+        <el-row :gutter="20" v-if="alarmList.length > 0">
           <el-col :span="6" v-for="(item, index) in alarmList" :key="index">
             <el-card class="custom-alarm-card">
               <div class="card-header">
@@ -90,33 +89,38 @@
                 <div class="label">报警事项</div>
                 <div class="alearm">
                   <template v-if="item.deviceAction === 0">强制报警
-                    <span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
+                    <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
                   </template>
                   <template v-else-if="item.deviceAction === 1">撞击闯入
-                    <span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
+                    <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
                   </template>
-                  <template v-else-if="item.deviceAction === 2">手动报警
-                    <span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
+                  <template v-else-if="item.deviceAction === 2">自动报警
+                    <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
                   </template>
                   <template v-else-if="item.deviceAction === 3">电子围栏告警
-                    <span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
-                  </template>
-                  <template v-else-if="item.deviceAction === 4">强制告警
-                    <span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
+                    <span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
                   </template>
                 </div>
-                <div class="label">报警地点：</div>
+                <div class="label">报警地点</div>
                 <div class="alearmADD">
-                  {{ item.location }}
+                 {{ item.location && item.location !== '[]' ? item.location : '无' }}
                 </div>
                 <div v-if="item.treatmentState === 0" class="dl_bot d_fl">
-                  <div>时长:{{ item.durationTime }}</div>
-                  <div>解除: {{ item.finishTime.split(' ')[1] || '' }}</div>
+                  <div v-if="item.durationTime">时长:{{ item.durationTime }}</div>
+                  <div v-if="item.finishTime">解除: {{ item.finishTime.split(' ')[1] || '' }}</div>
                 </div>
               </div>
             </el-card>
           </el-col>
         </el-row>
+        <el-row :gutter="20" v-else>
+          <!-- 使用flex容器实现垂直居中布局 -->
+          <div
+            style="display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%;">
+            <img src="@/assets/images/noData.png" alt="暂无数据" style="max-width: 150px; margin-bottom: 16px;">
+            <div style="color: #999; font-size: 14px;">暂无数据</div>
+          </div>
+        </el-row>
       </div>
       <div v-else key="list">
         <el-table v-loading="loading" border :data="alarmList">
@@ -127,25 +131,29 @@
               <div>{{ scope.row.deviceImei }} {{ scope.row.deviceMac }}</div>
             </template>
           </el-table-column>
-          <el-table-column label="报警地点" align="center" prop="location" />
+          <el-table-column label="报警地点" align="center" prop="location"  show-overflow-tooltip>
+            <template #default="scope">
+              <div>{{ scope.row.location && scope.row.location !== '[]' ? scope.row.location : '无' }}</div>
+            </template>
+          </el-table-column>
           <el-table-column label="报警事项" align="center" prop="deviceAction">
             <template #default="scope">
               <el-tag type="danger" v-if="scope.row.deviceAction == 0">强制报警</el-tag>
               <el-tag type="danger" v-if="scope.row.deviceAction == 1">撞击闯入</el-tag>
-              <el-tag type="danger" v-if="scope.row.deviceAction == 2">手动报警</el-tag>
+              <el-tag type="danger" v-if="scope.row.deviceAction == 2">自动报警</el-tag>
               <el-tag type="danger" v-if="scope.row.deviceAction == 3">电子围栏告警</el-tag>
-              <el-tag type="danger" v-if="scope.row.deviceAction == 4">强制告警</el-tag>
             </template>
           </el-table-column>
           <el-table-column label="报警持续时间" align="center" prop="durationTime" width="180">
             <template #default="scope">
-              <el-tag type="danger">{{ scope.row.durationTime }}</el-tag>
+              <el-tag type="danger">{{ scope.row.durationTime || '/' }}</el-tag>
             </template>
           </el-table-column>
           <el-table-column label="处理状态" align="center" prop="treatmentState">
             <template #default="scope">
               <div class="ysStatus" v-if="scope.row.treatmentState == 0">已处理</div>
               <el-tag type="danger" v-if="scope.row.treatmentState == 1">未处理</el-tag>
+
             </template>
           </el-table-column>
           <el-table-column label="报警时间" align="center" prop="startTime" />
@@ -161,8 +169,10 @@
 import { listAlarm } from '@/api/equipmentAlarmRecord/index';
 import { AlarmVO, AlarmQuery, AlarmForm } from '@/api/equipmentAlarmRecord/types';
 import apiTypeAll from '@/api/equipmentManagement/device/index';
+import { TimeConverter } from '@/utils/timeConverter';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const alarmList = ref<AlarmVO[]>([]);
+const timers = ref<Record<string, number>>({});
 const isListView = ref(true);
 const dateRange = ref(['', '']);
 const loading = ref(true);
@@ -224,10 +234,48 @@ const getList = async () => {
     queryTime2: endTime
   };
   const res = await listAlarm(queryParams.value);
-  alarmList.value = res.rows;
-  total.value = res.total;
+  if (res.rows) {
+    // 先清除已有定时器
+    clearAllTimers();
+    //alarmList.value = res.rows;
+    // 为每个项添加timeDiff属性并初始化
+    alarmList.value = res.rows.map(item => ({
+      ...item,
+      timeDiff: '' // 用于存储计算出的时间差
+    }));
+    total.value = res.total;
+    // 为每个需要计时的项创建定时器
+    initTimers();
+  }
+
   loading.value = false;
 }
+// 初始化所有定时器
+const initTimers = () => {
+  alarmList.value.forEach(item => {
+    // 只对需要计时的项创建定时器（根据你的业务逻辑判断）
+    if (item.treatmentState === 1 && item.startTime) {
+      // 使用项的唯一标识作为定时器键名（假设id是唯一标识）
+      timers.value[item.id] = TimeConverter.createTimeDiffTimer(
+        item.startTime,
+        (diff) => {
+          // 找到对应的项并更新时间差
+          const index = alarmList.value.findIndex(i => i.id === item.id);
+          if (index !== -1) {
+            alarmList.value[index].timeDiff = diff;
+          }
+        }
+      );
+    }
+  });
+};
+// 清除所有定时器
+const clearAllTimers = () => {
+  Object.values(timers.value).forEach(timerId => {
+    TimeConverter.clearTimeDiffTimer(timerId);
+  });
+  timers.value = {};
+};
 // 设备类型
 const getDeviceType = () => {
   apiTypeAll.deviceTypeAll().then(res => {
@@ -263,6 +311,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
+  dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
 }
@@ -270,8 +319,16 @@ onMounted(() => {
   getList();
   getDeviceType()
 });
+// 组件卸载时清除所有定时器
+onUnmounted(() => {
+  clearAllTimers();
+});
 </script>
 <style lang="scss" scoped>
+:deep .el-collapse {
+  border-top: none
+}
+
 :deep .el-collapse-item__header {
   display: none;
 }
@@ -290,7 +347,7 @@ onMounted(() => {
 }
 
 .custom-alarm-card {
-  height: 270px;
+  min-height: 270px;
   display: flex;
   flex-direction: column;
   box-shadow: 0px 0px 6px 0px rgba(0, 27, 74, 0.1);
@@ -334,7 +391,7 @@ onMounted(() => {
 .deviceName {
   color: rgba(56, 64, 79, 1);
   font-family: Microsoft YaHei;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
 }
 

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="创建日期" />
@@ -105,7 +106,7 @@
               </el-select>
             </el-form-item>
             <el-form-item label="pc路由跳转" prop="pcModelDictionary" style="display: none;">
-              <el-select v-model="form.pcModelDictionary" placeholder="请选择" >
+              <el-select v-model="form.pcModelDictionary" placeholder="请选择">
                 <el-option v-for="item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
                   :value="item.dictValue" />
               </el-select>
@@ -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/Charge.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="content">
+    <div class="topFilter">
+      <el-form :inline="true" :model="filter" class="demo-form-inline">
+        <el-form-item label="操作时间">
+          <el-date-picker
+            v-model="filter.Date"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            :size="'default'"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getRecordList">查询</el-button>
+          <el-button link type="primary" @click="filter.Date = []">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="grid" v-loading="Status.loading">
+      <el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+        <el-table-column label="设备名称" align="center" prop="deviceName" />
+        <el-table-column label="数据来源" align="center" prop="dataSource" />
+        <el-table-column label="内容" align="center" prop="content" />
+      </el-table>
+
+      <pagination
+        v-show="pagin.total > 0"
+        v-model:page="pagin.pageIndex"
+        v-model:limit="pagin.pageSize"
+        :total="pagin.total"
+        @pagination="getRecordList"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+var filter = ref({
+  Date: []
+});
+var Status = ref({
+  loading: false
+});
+
+var data = ref({});
+var grid = ref(null);
+var List = ref([]);
+var pagin = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+function getRecordList() {
+  Status.value.loading = true;
+
+
+  setTimeout(() => {
+    initData(props.data,true);
+  }, 0);
+}
+
+var deviceid = null;
+function initData(item,Refresh) {
+  if (deviceid == item.data.deviceId && !Refresh) {
+      Status.value.loading = false;
+    return;
+  }
+    List.value = [];
+  deviceid = item.data.deviceId;
+  
+  let params = {
+    startTime: '',
+    endTime: '',
+    deviceId:deviceid,
+    pageNum:pagin.value.pageIndex,
+    pageSize:pagin.value.pageSize,
+    orderByColumn:"updatedAt",
+    isAsc:"descending"
+  };
+  if (filter.value.Date && filter.value.Date.length) {
+    params.startTime = filter.value.Date[0];
+    params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
+  }
+
+  request({
+    url: '/equipment/chargeDischarge/list' ,
+    method: 'get',
+    params: params
+  })
+    .then((res) => {
+      if (res.code == 200) {
+        if (res.rows) {
+          if (res.rows.length) {
+            List.value = res.rows;
+          }
+        }
+         pagin.value.total= res.total;
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+      Status.value.loading = false;
+    });
+}
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+
+   
+    if (newVal === 3) {
+      // 确保参数有效
+      
+       console.log('newVal=', newVal);
+      getRecordList(); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+
+.pickerContent {
+  box-sizing: border-box;
+  border: 1px solid rgba(189, 198, 215, 0.8);
+  border-radius: 2px;
+}
+.topFilter {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: center;
+}
+:deep .pickerContent .el-date-editor {
+  border: none !important;
+}
+</style>

src/views/equipmentManagement/devices/OpraRecored.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="content">
+    <div class="topFilter">
+      <el-form :inline="true" :model="filter" class="demo-form-inline">
+        <el-form-item label="操作时间">
+          <el-date-picker
+            v-model="filter.Date"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="YYYY-MM-DD"
+            :size="'default'"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getRecordList">查询</el-button>
+          <el-button link type="primary" @click="filter.Date = []">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="grid" v-loading="Status.loading">
+      <el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+        <el-table-column label="设备名称" align="center" prop="deviceName" />
+        <el-table-column label="数据来源" align="center" prop="dataSource" />
+        <el-table-column label="内容" align="center" prop="content" />
+      </el-table>
+
+      <pagination
+        v-show="pagin.total > 0"
+        v-model:page="pagin.pageIndex"
+        v-model:limit="pagin.pageSize"
+        :total="pagin.total"
+        @pagination="getRecordList"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+var filter = ref({
+  Date: []
+});
+var Status = ref({
+  loading: false
+});
+
+var data = ref({});
+var grid = ref(null);
+var List = ref([]);
+var pagin = ref({
+  total: 0,
+  pageIndex: 1,
+  pageSize: 10
+});
+function getRecordList() {
+  Status.value.loading = true;
+
+
+  setTimeout(() => {
+    initData(props.data,true);
+  }, 0);
+}
+
+var deviceid = null;
+function initData(item,Refresh) {
+  if (deviceid == item.data.deviceId && !Refresh) {
+      Status.value.loading = false;
+    return;
+  }
+    List.value = [];
+  deviceid = item.data.deviceId;
+
+ 
+  let params = {
+    startTime: '',
+    endTime: '',
+    pageNum:pagin.value.pageIndex,
+    pageSize:pagin.value.pageSize,
+    orderByColumn:"updateTime",
+    isAsc:"descending"
+  };
+  if (filter.value.Date && filter.value.Date.length) {
+    params.startTime = filter.value.Date[0];
+    params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
+  }
+
+  request({
+    url: '/api/device/getOperationRecord/' + item.data.deviceId,
+    method: 'get',
+    params: params
+  })
+    .then((res) => {
+      if (res.code == 200) {
+        if (res.rows) {
+          if (res.rows.length) {
+            List.value = res.rows;
+          }
+        }
+
+        pagin.value.total= res.total;
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+      Status.value.loading = false;
+    });
+}
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+
+   
+    if (newVal === 3) {
+      // 确保参数有效
+      
+       console.log('newVal=', newVal);
+      getRecordList(); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+
+.pickerContent {
+  box-sizing: border-box;
+  border: 1px solid rgba(189, 198, 215, 0.8);
+  border-radius: 2px;
+}
+.topFilter {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-end;
+  align-items: center;
+}
+:deep .pickerContent .el-date-editor {
+  border: none !important;
+}
+</style>

src/views/equipmentManagement/devices/Usr.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="content">
+    <div class="row">
+      <div class="item">
+        <div class="lable">姓名<span>：</span></div>
+        <div class="val">{{ lastData?.name }}</div>
+      </div>
+      <div class="item">
+        <div class="lable">单位名称<span>：</span></div>
+        <div class="val">{{ lastData?.position }}</div>
+      </div>
+      <div class="item">
+        <div class="lable">职务<span>：</span></div>
+        <div class="val">{{ lastData?.unitName }}</div>
+      </div>
+      <div class="item">
+        <div class="lable">ID号<span>：</span></div>
+        <div class="val">{{ lastData?.code }}</div>
+      </div>
+      <div class="clear"></div>
+    </div>
+    <div class="clear divider"></div>
+    <div class="listTitle">信息登记记录</div>
+    <div class="list">
+      <div class="item" v-for="(item, index) in detailData">
+        <div class="time">
+          <el-icon><Timer /></el-icon>{{ item.item }}
+        </div>
+        <div class="childContent">
+          <div class="itemChild" :class="i === item.child.length - 1 ? '' : 'marginBottom'" v-for="(c, i) in item.child">
+            <div class="itemRow">登记时间：{{ c.createTime }}</div>
+            <div class="itemRow">姓&nbsp;&nbsp;&nbsp;&nbsp;名：{{ c.name }}</div>
+            <div class="itemRow">单位名称：{{ c.position }}</div>
+            <div class="itemRow">职&nbsp;&nbsp;&nbsp;&nbsp;务：{{ c.unitName }}</div>
+            <div class="itemRow">ID&nbsp;&nbsp;&nbsp;&nbsp;号：{{ c.code }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import request from '@/utils/request';
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  acIndex: {
+    type: Number,
+    required: true
+  }
+});
+
+var detailData = ref([]);
+var data = ref({});
+var deviceid = null;
+var lastData = ref({ name: '', position: '', unitName: '', code: '' });
+function processDataByDateGroup(originalData) {
+  // 1. 深拷贝原始数据（避免修改原数据，保护源数据完整性）
+  const data = JSON.parse(JSON.stringify(originalData));
+
+  // 边界处理：若data不存在或非数组，返回原结构+空sipledate
+  if (!data?.data || !Array.isArray(data.data)) {
+    return {
+      code: data?.code ?? 400, // 若原code不存在，默认400（请求错误）
+      msg: data?.msg ?? '数据格式错误',
+      sipledate: []
+    };
+  }
+
+  // 2. 先按createTime逆序排序（子数据内部也保持“新->旧”顺序）
+  const sortedData = data.data.sort((a, b) => {
+    const timeA = new Date(a.createTime);
+    const timeB = new Date(b.createTime);
+    return timeB - timeA; // 逆序：后创建的排在前面
+  });
+
+  // 3. 按日期分组（key：yyyy-MM-dd，value：该日期下的所有子数据）
+  const dateGroupMap = sortedData.reduce((map, item) => {
+    // 提取当前数据的“yyyy-MM-dd”格式日期
+    const dateKey = item.createTime.slice(0, 10);
+    // 若当前日期未在map中，初始化空数组；若已存在，直接push子数据
+    if (!map.has(dateKey)) {
+      map.set(dateKey, []);
+    }
+    map.get(dateKey).push(item);
+    return map;
+  }, new Map()); // 使用Map而非Object，确保日期顺序与排序后一致
+
+  // 4. 转换为需求格式的sipledate数组（每个元素含item和child）
+  const sipledate = Array.from(dateGroupMap.entries()).map(([date, childData]) => ({
+    item: date, // 日期标识（yyyy-MM-dd），原需求“item1/item2”统一为“item”（更语义化）
+    child: childData // 该日期下的所有子数据（已按时间逆序）
+  }));
+
+  // 5. 返回最终格式结果
+  return {
+    code: data.code,
+    msg: data.msg,
+    sipledate: sipledate
+  };
+}
+
+function initData(item) {
+  if (deviceid == item.data.deviceId) {
+    return;
+  }
+  deviceid = item.data.deviceId;
+  detailData.value=[];
+  lastData.value.code="";
+  lastData.value.name="";
+  lastData.value.unitName="";
+  lastData.value.position="";
+
+
+  request({
+    url: '/api/device/getDeviceUser/' + item.data.deviceId,
+    method: 'get'
+  })
+    .then((res) => {
+      if (res.code == 200) {
+        if (res.data) {
+          if (res.data.length) {
+            lastData.value = res.data[0];
+            let data = processDataByDateGroup(res);
+            detailData.value = data.sipledate;
+          }
+        }
+      }
+    })
+    .finally(() => {
+      data.value = item.data;
+    });
+}
+
+watch(
+  () => props.acIndex, // 监听的属性
+  (newVal) => {
+    if (newVal === 2 && props.data) {
+      // 确保参数有效
+      initData(props.data); // 调用回调
+    }
+  },
+  { immediate: true } // 关键：组件初始化时立即执行一次
+);
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 30px 12px 12px 12px;
+}
+.row {
+  width: 50%;
+}
+.row .item {
+  width: 50%;
+  float: left;
+  height: 36px;
+  line-height: 36px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+
+  color: rgba(56, 64, 79, 1);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.row .item .lable {
+  width: 100px;
+  text-align: right;
+}
+
+.divider {
+  width: 100%;
+  height: 0px;
+  border-bottom: 1px solid rgba(235, 238, 248, 1);
+}
+
+.listTitle {
+  color: rgba(56, 64, 79, 1);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 700;
+  height: 56px;
+  line-height: 56px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.list {
+  width: 100%;
+  box-sizing: border-box;
+  height: calc(100% - 130px);
+  padding: 15px 12px;
+  overflow-y: scroll;
+}
+
+.list .time {
+  color: #027cfb;
+
+  font-family: Microsoft YaHei;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 21px;
+  height: 21px;
+  letter-spacing: 0px;
+  text-align: left;
+  margin-left: -7px;
+}
+
+.list .itemRow {
+  color: rgba(56, 64, 79, 1);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+  margin-bottom: 13px;
+}
+
+.list .itemRow:last-child {
+  margin-bottom: 0px;
+}
+.itemChild.marginBottom {
+  margin-bottom: 12px;
+}
+.list .childContent {
+  width: 100%;
+  height: auto;
+  border-left: 2px solid rgba(0, 198, 250, 0.2);
+  box-sizing: border-box;
+  padding: 6px 20px;
+}
+
+.list .itemChild {
+  border-radius: 4px;
+  background: rgba(247, 248, 252, 1);
+  width: 100%;
+  height: auto;
+  box-sizing: border-box;
+  padding: 10px;
+}
+
+.fleft {
+  float: left;
+}
+.fright {
+  float: right;
+}
+
+.clear {
+  clear: both;
+}
+</style>