Merge pull request '设备类型添加图片' (#27) from liubiao/dyf-vue-ui:main into main

Reviewed-on: dyf/dyf-vue-ui#27

.env.development

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

.env.production

@@ -2,13 +2,16 @@
 VITE_APP_TITLE = 云平台管理系统
 
 # 生产环境配置 晶全1
-VITE_APP_ENV = 'https://fuyuanshen.com/backend'
+VITE_APP_ENV = 'https://www.cnxhyc.com'
 
 # 生产环境配置 富源晟2
 # VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'
 
 # 应用访问路径 晶全1
-VITE_APP_CONTEXT_PATH = '/jingquan/'
+VITE_APP_CONTEXT_PATH = '/'
+
+# 高德地图Key
+VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
 
 # 应用访问路径 富源晟2
 #VITE_APP_CONTEXT_PATH = '/sys/'          
@@ -19,8 +22,8 @@ VITE_APP_MONITOR_ADMIN = '/admin/applications'
 # SnailJob 控制台地址
 VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 
-# 生产环境 晶全3
-VITE_APP_BASE_API = '/backend'
+# 生产环境 晶全3 代理访问
+VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
 
 # 生产环境 富源晟3
 #VITE_APP_BASE_API = '/backend-fys'

index.html

@@ -6,7 +6,12 @@
     <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&plugin=AMap.CircleEditor"></script>
+    <script  type="text/javascript">
+      window._AMapSecurityConfig = {
+        securityJsCode: "4239900f4fb7b2569df651ac814a28de",
+      };
+    </script>
+      <script src="https://webapi.amap.com/maps?v=2.0&key=78c36a1e251a95f1a21a9e5ea7a1331c&plugin=AMap.CircleEditor"></script>
     <title>物联网管理平台</title>
     <!--[if lt IE 11
       ]><script>

src/api/FenceManager/fence.ts

@@ -64,6 +64,34 @@ function DelFence(ids) {
     })
 }
 
+//添加终端
+function addTerminal(data){
+  return request({
+        url: '/api/equipment/geoFence/addTerminal',
+        method: 'post',
+        data: data
+    })
+}
+
+//删除终端
+function delTerminal(data){
+ return request({
+        url: '/api/equipment/geoFence/delTerminal',
+        method: 'post',
+        data:data
+    })
+}
+
+//查询终端
+function pageTerminal(data){
+    return request({
+        url:'api/device/pageTerminal',
+        method:'get',
+        params:data
+    });
+}
+
+
 export default{
     updateFence:updateFence,
     AddFence:AddFence,
@@ -71,7 +99,10 @@ export default{
     check:check,
     geoFenceById:geoFenceById,
     getList:getList,
-    DelFence:DelFence
+    DelFence:DelFence,
+    addTerminal:addTerminal,
+    delTerminal:delTerminal,
+    pageTerminal:pageTerminal
 }
 
 

src/api/FenceManager/mapOpt.ts

@@ -1,7 +1,7 @@
 var map = null;
 var circle = null;
 var polygon = null;
-
+import mapLocation from '@/assets/images/mapLocation.png';
 
 function initMap() {
     // let key = '90bc158992feb8ccd0145e168cab1307';
@@ -9,12 +9,18 @@ function initMap() {
         map = new AMap.Map("map", {
             viewMode: '2D', //默认使用 2D 模式
             zoom: 11, //地图级别
+              dragEnable: true, // 强制开启拖拽
+    zoomEnable: true, // 开启滚轮缩放（辅助验证）
             center: [114.420739, 30.487514], //地图中心点
         });
 
-        map.on('click',function(evt){
-          alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
-        });
+        
+setTimeout(() => {
+    map.resize();
+}, 1000);
+        // map.on('click',function(evt){
+        //   alert('您点击的位置:'+evt.lnglat.lng+' , '+ evt.lnglat.lat);
+        // });
     }
     return new Promise((resolve, reject) => {
         if(map){
@@ -39,7 +45,7 @@ function AddPoint(point, index, dragEnd, click) {
             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",
+                icon: mapLocation,
                 position: center,
                 offset: new AMap.Pixel(-15, -24),
                 draggable: true,

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

@@ -42,7 +42,8 @@ export interface DeviceDetail {
     name: string;           // 姓名
     code: string;         // ID（身份证/工号）
   };
-  chargeState: string
+  chargeState: string;
+  alarmStatus:number
 }
 // 定义灯光模式的类型接口
 export interface LightMode {

src/api/debugCenter/debugCenter.ts

@@ -58,8 +58,17 @@ function uploadBoot(formData){
   //     });
 }
 
-function getDeviceInfoById(id){
+// 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'
@@ -67,11 +76,14 @@ function getDeviceInfoById(id){
 }
 
 
+
+
 export default{
     getDevice:getDevice,
     uploadFile:uploadFile,
     addVideo:addVideo,
     updateItem:updateItem,
     uploadBoot:uploadBoot,
-    getDeviceInfoById:getDeviceInfoById
+    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/types.ts

@@ -5,6 +5,8 @@ export interface deviceQuery extends PageQuery {
     deviceType: string;
     deviceStatus: string;
     bluetoothName?: string; // 蓝牙名称查询字段
+    onlineStatus?: string;
+    bindingStatus?:string
 }
 
 export interface deviceForm {
@@ -37,6 +39,7 @@ export interface deviceVO {
     customerId?: string | number;
     typeName?: string;
     bluetoothName?: string; // 蓝牙名称字段
+    
 }
 
 export interface deviceTypeOption {

src/api/equipmentManagement/deviceType/index.ts

@@ -17,7 +17,10 @@ export const addDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
   return request({
     url: '/api/deviceType/add',
     method: 'post',
-    data: data
+    data: data,
+     headers:{
+      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
+    }
   });
 };
 
@@ -26,6 +29,9 @@ export const updateDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
   return request({
     url: '/api/deviceType/update',
     method: 'put',
+    headers:{
+      'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
+    },
     data
   })
 }
@@ -34,6 +40,7 @@ export const deleteDeviceType = (ids: any): AxiosPromise<deviceTypeVO[]> => {
   return request({
     url: '/api/deviceType/delete',
     method: 'delete',
+    
     data: ids
   })
 }

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/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/api/system/service/api.ts

@@ -0,0 +1,118 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import { ServiceVO, ServiceForm, ServiceQuery } from '@/api/system/service/types';
+
+/**
+ * 查询轨迹服务列表
+ * @param query
+ * @returns {*}
+ */
+
+export const listService = (query?: ServiceQuery): AxiosPromise<ServiceVO[]> => {
+  return request({
+    url: '/api/trackService/list',
+    method: 'get',
+    params: query
+  });
+};
+
+/**
+ * 查询轨迹服务详细
+ * @param id
+ */
+export const getService = (id: string | number): AxiosPromise<ServiceVO> => {
+  return request({
+    url: '/api/trackService/' + id,
+    method: 'get'
+  });
+};
+
+/**
+ * 新增轨迹服务
+ * @param data
+ */
+export const addService = (data: ServiceForm) => {
+  return request({
+    url: '/api/trackService/add',
+    method: 'post',
+    data: data
+  });
+};
+
+/**
+ * 修改轨迹服务
+ * @param data
+ */
+export const updateService = (data: ServiceForm) => {
+    return Promise.reject({code:500,msg:'不允许此操作'});
+//   return request({
+//     url: '/api/trackService/update',
+//     method: 'put',
+//     data: data
+//   });
+};
+
+/**
+ * 删除轨迹服务
+ * @param id
+ */
+export const delService = (id: string | number | Array<string | number>) => {
+//   return request({
+//     url: '/api/trackService/' + id,
+//     method: 'delete'
+//   });
+
+return Promise.reject({code:500,msg:'不允许此操作'});
+};
+
+
+//获取设备
+export const getDevice = (data) => {
+  return request({
+    url: '/api/device',
+    method: 'get',
+    params:data
+  });
+};
+
+//获取设备
+export const getDeviceList = (data) => {
+  return request({
+    url: '/api/device/list',
+    method: 'get',
+    params:data
+  });
+};
+//保存
+export const terminalDevice=(data)=>{
+   return request({
+    url: '/api/trackService/terminal',
+    method: 'post',
+    data:data
+  });
+}
+//删除
+export const delTerminalDevice=(id)=>{
+   return request({
+    url: '/api/trackService/delTerminal/'+id,
+    method: 'delete'    
+  });
+}
+
+//获取地图的终端，列表查询
+export const getMapDevice = (data) => {
+  return request({
+    url: '/api/trackService/listTerminal',
+    method: 'get',
+    params:data
+  });
+};
+
+//获取地图的终端，模糊查询
+export const getMapDeviceByFilter = (data) => {
+  return request({
+    url: '/api/trackService/searchTerminal',
+    method: 'get',
+    params:data
+  });
+};

src/api/system/service/types.ts

@@ -0,0 +1,56 @@
+export interface ServiceVO {
+  /**
+   * 
+   */
+  id: string | number;
+
+  /**
+   * 猎鹰服务ID
+   */
+  sid: string | number;
+
+  /**
+   * 服务名称
+   */
+  sname: string;
+
+}
+
+export interface ServiceForm extends BaseEntity {
+  /**
+   * 
+   */
+  id?: string | number;
+
+  /**
+   * 猎鹰服务ID
+   */
+  sid?: string | number;
+
+  /**
+   * 服务名称
+   */
+  sname?: string;
+
+}
+
+export interface ServiceQuery extends PageQuery {
+
+  /**
+   * 猎鹰服务ID
+   */
+  sid?: string | number;
+
+  /**
+   * 服务名称
+   */
+  sname?: string;
+
+    /**
+     * 日期范围参数
+     */
+    params?: any;
+}
+
+
+

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/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,keepAlive: false }
+        meta: { title: '首页', icon: '首页1.1', affix: true, keepAlive: false }
       }
     ]
   },
+
   {
     path: '/user',
     component: Layout,

src/utils/mqtt.ts

@@ -1,4 +1,4 @@
-import { ref, onUnmounted } from 'vue'; // 修复：导入必要的Vue API
+
 import * as Paho from 'paho-mqtt';
 
 // MQTT消息类型定义
@@ -9,61 +9,71 @@ export interface MqttMessage {
   retained: boolean;
   time: Date;
 }
-
 // 订阅选项
 export interface SubscribeOptions {
   qos: 0 | 1 | 2;
 }
 
-// MQTT配置信息
-const MQTT_CONFIG = {
-  // 连接地址（添加协议类型）
-  protocol: 'ws', // 关键：明确协议（ws或wss）
-  host: '47.120.79.150',
-  port: 9083,
-  // 认证信息
-  username: 'admin',
-  password: '#YtvpSfCNG',
-  // 客户端ID（添加时间戳确保唯一性）
-  clientId: `vue3-mqtt-client-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
-  // 连接选项
-  cleanSession: true,
-  keepAliveInterval: 60,
-  reconnect: true,
+// 根据当前页面协议自动选择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,
@@ -71,7 +81,8 @@ export function useMqtt() {
         cleanSession: MQTT_CONFIG.cleanSession,
         keepAliveInterval: MQTT_CONFIG.keepAliveInterval,
         reconnect: MQTT_CONFIG.reconnect,
-        
+        useSSL: MQTT_CONFIG.protocol === 'wss',  // 关键：根据协议自动启用 SSL
+
         // 连接成功回调
         onSuccess: () => {
           console.log('MQTT连接成功');
@@ -79,7 +90,7 @@ export function useMqtt() {
           connecting.value = false;
           connectCallbacks.forEach(cb => cb()); // 触发所有连接成功回调
         },
-        
+
         // 连接失败回调
         onFailure: (err) => {
           console.error('MQTT连接失败:', err);
@@ -89,7 +100,7 @@ export function useMqtt() {
           errorCallbacks.forEach(cb => cb(error.value!));
         }
       };
-      
+
       // 设置客户端回调
       client.onConnectionLost = (responseObject) => {
         if (responseObject.errorCode !== 0) {
@@ -97,12 +108,12 @@ export function useMqtt() {
           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 = {
@@ -112,11 +123,11 @@ export function useMqtt() {
           retained: message.retained,
           time: new Date()
         };
-        
+
         messages.value.push(newMessage);
         messageCallbacks.forEach(cb => cb(newMessage));
       };
-      
+
       // 连接服务器
       client.connect(connectOptions);
     } catch (err) {
@@ -127,18 +138,18 @@ export function useMqtt() {
       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) => {
@@ -146,12 +157,12 @@ export function useMqtt() {
         reject(new Error('未连接到MQTT服务器'));
         return;
       }
-      
+
       if (subscribedTopics.value.includes(topic)) {
         resolve();
         return;
       }
-      
+
       client.subscribe(topic, {
         qos: options.qos,
         onSuccess: () => {
@@ -166,7 +177,7 @@ export function useMqtt() {
       });
     });
   };
-  
+
   // 取消订阅
   const unsubscribe = (topic: string): Promise<void> => {
     return new Promise((resolve, reject) => {
@@ -174,12 +185,12 @@ export function useMqtt() {
         reject(new Error('未连接到MQTT服务器'));
         return;
       }
-      
+
       if (!subscribedTopics.value.includes(topic)) {
         resolve();
         return;
       }
-      
+
       client.unsubscribe(topic, {
         onSuccess: () => {
           console.log(`取消订阅主题成功: ${topic}`);
@@ -193,7 +204,7 @@ export function useMqtt() {
       });
     });
   };
-  
+
   // 发布消息
   const publish = (
     topic: string,
@@ -205,47 +216,47 @@ export function useMqtt() {
         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,

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

@@ -4,4 +4,11 @@
     </div>
 </template>
 <script setup lang="ts"></script>
-<style lang="scss" scoped></style>
+<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">
@@ -248,7 +256,8 @@ const deviceDetail = ref<DeviceDetail & { typeName: string }>({
     address: '',
     sendMsg: '',
     chargeState: '0',
-    typeName: ''
+    typeName: '',
+    alarmStatus: 0
 });
 // 保留原有的操作中标志位
 const isUpdatingStatus = ref(false);
@@ -357,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 { }
@@ -420,11 +429,56 @@ 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 {
@@ -458,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;
@@ -536,17 +592,15 @@ const getMainLightModeLabel = (mode: any) => {
 // 处理设备消息
 const handleDeviceMessage = (msg: any) => {
     try {
-        // 解析设备消息（假设格式为 { state: [类型, 模式值, 亮度, 续航...] }）
         const payloadObj = JSON.parse(msg.payload.toString());
         const deviceState = payloadObj.state; // 设备状态数组
         if (!Array.isArray(deviceState)) {
             return;
         }
-        // 用switch处理不同的消息类型（deviceState[0]）
         switch (deviceState[0]) {
             case 1:
                 // 类型1灯光主键
-                const lightModeId = getMainLightModeLabel(deviceState[1]); // 获取模式ID（如'strong'）
+                const lightModeId = getMainLightModeLabel(deviceState[1]);
                 const brightness = deviceState[2]; // 亮度值
                 const batteryTime = deviceState[3]; // 续航时间
                 console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
@@ -569,7 +623,7 @@ const handleDeviceMessage = (msg: any) => {
                 break;
             case 12:
                 // 灯光主键
-                const lightModeIdA = getMainLightModeLabel(deviceState[1]); // 获取模式ID（如'strong'）
+                const lightModeIdA = getMainLightModeLabel(deviceState[1]);
                 if (lightModeIdA !== 'unknown') {
                     lightModes.value.forEach(mode => {
                         const isActive = mode.id === lightModeIdA;
@@ -586,11 +640,14 @@ const handleDeviceMessage = (msg: any) => {
                 deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
                 // getList(); // 重新获取设备详情
                 if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
-                    centerDialogVisible.value=true
+                    centerDialogVisible.value = true
                 }
+                break;
+            case 7:
+                deviceDetail.value.alarmStatus = deviceState[1];
+
                 break;
             default:
-                // 其他类型消息（不处理，仅打印）
                 console.log('未处理的消息类型:', deviceState[0]);
                 break;
         }
@@ -598,7 +655,7 @@ const handleDeviceMessage = (msg: any) => {
     }
 };
 onMounted(async () => {
-    await getList(); // 先获取设备信息
+    await getList();
     // 连接mqtt
     onConnect(async () => {
         const deviceImei = deviceDetail.value.deviceImei;
@@ -624,7 +681,7 @@ onMounted(async () => {
         handleDeviceMessage(msg);
     });
     onError((err) => {
-        console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
+        console.error('MQTT连接失败原因:', err.message);
     });
     connect();
 });
@@ -638,6 +695,13 @@ onUnmounted(() => {
 
 </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;
@@ -942,4 +1006,23 @@ onUnmounted(() => {
     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

@@ -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>
@@ -49,6 +49,7 @@
                       <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">
@@ -81,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">
@@ -109,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">
@@ -118,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">
@@ -163,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;
@@ -336,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;
@@ -377,6 +394,7 @@ const submitForm = async () => {
     return
   }
   try {
+   
     sendTextLoading.value = true;
     // 2. 准备请求数据
     const deviceIds = ids.value.map(item => item.id);
@@ -389,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
@@ -448,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
@@ -484,9 +504,17 @@ const forceAlarm = async () => {
 
 </script>
 <style lang="scss" scoped>
-:deep .el-collapse{
-  border-top:none
+.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;
 }
@@ -547,7 +575,7 @@ const forceAlarm = async () => {
 }
 
 .Maplist {
-  height: 680px;
-  overflow: auto;
+ //height: calc(100vh - 24vh);
+  //overflow: auto;
 }
 </style>

src/views/controlCenter/delivery/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,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"
@@ -244,6 +249,12 @@ 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
 }
@@ -288,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,12 @@ 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
 }
@@ -301,7 +307,7 @@ const historyjectory = (row: any) => {
 }
 
 .Maplist {
-  height: 680px;
-  overflow: auto;
+ height: calc(100vh - 24vh);
+  // overflow: auto;
 }
 </style>

src/views/debugCenter/debugPanel/index.vue

@@ -69,7 +69,7 @@
         :data="List"
         :height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'"
       >
-        <el-table-column type="selection" width="50" align="center" />
+        <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">
           <template #default="scope">
@@ -169,42 +169,50 @@
     </el-dialog>
 
     <!-- 单个个设备编辑层 -->
-    <el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="500px">
+    <el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
       <div class="SingEditContent">
         <div class="Boot item">
           <div class="title">开机画面</div>
-          <div class="img">
+          <div class="imgs">
             <div class="Preview">
-              <img class="img" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
+              <img class="img" v-show="cEdit.fileBoot.src" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
             </div>
           </div>
           <div class="option center" @click.stop="showCheckFile('fileBoot')">修改</div>
           <div class="clear">
-            <input type="file" id="fileBoot" class="displayNone" />
+            <input type="file" accept="image/*" id="fileBoot" class="displayNone" />
           </div>
         </div>
         <div class="Param item">
           <div class="title">产品参数</div>
-          <div class="img">
+          <div class="imgs">
             <div class="Preview">
-              <img v-for="(item, index) in cEdit.fileParam" class="img" :src="item.src" />
+              <div class="imgContent" v-for="(item, index) in cEdit.fileParam">
+                <img class="img" :src="item.src" />
+                <div class="opt" @click.stop="DelImg(item,index,'fileParam')">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </div>
+              </div>
+              <div class="clear"></div>
             </div>
           </div>
-          <div class="option center" @click.stop="showCheckFile('fileParam')">修改</div>
+          <div class="option center" @click.stop="showCheckFile('fileParam')">添加</div>
           <div class="clear">
-            <input type="file" id="fileParam" class="displayNone" />
+            <input type="file" accept="image/*" id="fileParam" class="displayNone" />
           </div>
         </div>
         <div class="Oprat item">
           <div class="title">操作说明</div>
-          <div class="img">
+          <div class="imgs">
             <div class="Preview">
               <img onerror="this.style.display='none'" v-for="(item, index) in cEdit.fileOprat" class="img" :src="item.src" />
             </div>
           </div>
-          <div class="option center" @click.stop="showCheckFile('fileOprat')">修改</div>
+          <div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
           <div class="clear">
-            <input type="file" id="fileOprat" class="displayNone" />
+            <input type="file" accept="image/*" id="fileOprat" class="displayNone" />
           </div>
         </div>
         <div class="Video item">
@@ -240,6 +248,7 @@
 import api from '@/api/debugCenter/debugCenter';
 import common from '@/utils/common';
 import apiTypeAll from '@/api/equipmentManagement/device/index';
+import uploadHelper   from '@/api/debugCenter/deviceApi';
 
 var fileInput = document.getElementById('fileInput');
 var fileInputs = {
@@ -283,7 +292,8 @@ var cEdit = reactive({
   fileBoot: { name: '', type: '', size: '', src: '', file: null },
   fileParam: [],
   fileOprat: [],
-  Video: ''
+  Video: '',
+  fileIds:[]
 });
 //页码控件数据
 var pagin = reactive({
@@ -327,6 +337,12 @@ function handleQuery() {
   queryTime = setTimeout(getList, 500);
 }
 
+const isSelectable = (row: any) => {
+  // 仅当在线状态（onlineStatus == 1）时允许选中
+  return row.onlineStatus === 1;
+}
+
+
 function getList() {
   Status.loading = true;
   api
@@ -357,6 +373,7 @@ function resetQuery() {
   keys.forEach((k) => {
     queryParams[k] = cfg[k];
   });
+  handleQuery();
 }
 
 // 设备类型
@@ -411,6 +428,7 @@ function ShowMultiEdit(type: MideaType) {
 function ShowSingleEdit(item) {
   Status.ShowEditPop = true;
   //期待接口返回以下4个字段
+  
   cEdit.deviceId = item.id;
   cEdit.deviceImei = item.deviceImei;
   cEdit.Video = item.Video;
@@ -436,7 +454,7 @@ function ShowSingleEdit(item) {
           return v.fileType == 1;
         })
         .map((v) => {
-          return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+          return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
         });
 
       cEdit.fileParam = arr
@@ -444,8 +462,10 @@ function ShowSingleEdit(item) {
           return v.fileType == 2;
         })
         .map((v) => {
-          return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+          return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
         });
+
+      cEdit.fileBoot.src = '';
     }
   });
 
@@ -458,6 +478,7 @@ function CloseSingleEdit() {
   cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
   cEdit.fileOprat = [];
   cEdit.fileParam = [];
+  cEdit.fileIds=[];
 }
 
 //关闭上传框
@@ -480,7 +501,6 @@ function SaveMultiData() {
   }
   Status.fullLoading = true;
   setTimeout(() => {
-    
     let promise = null;
 
     let formData = new FormData();
@@ -506,7 +526,7 @@ function SaveMultiData() {
     });
 
     if (Status.currMideaType == MideaType.Boot) {
-      promise=updaeLogo(arr,checkFile.file);
+      promise = updaeLogo(arr, checkFile.file);
     } else if (Status.currMideaType == MideaType.Video) {
       promise = api.addVideo(json); //操作视频
     } else {
@@ -527,21 +547,39 @@ function SaveMultiData() {
   }, 0);
 }
 //上传开机画面
-function updaeLogo(ids, file) {
-  if (!file || !ids) {
+// function updaeLogo(ids, file) {
+//   if (!file || !ids) {
+//     return Promise.resolve({ code: 200, msg: '成功' });
+//   }
+//   if (!Array.isArray(ids)) {
+//     ids = [ids];
+//   }
+//   var formData = new FormData();
+//   ids.forEach((element) => {
+//     formData.append('deviceIds', element);
+//   });
+//   formData.append('file', file);
+//   return api.uploadBoot(formData);
+// }
+// 上传开机画面根据类型适配不同的上传接口，其他类型暂且默认670
+function updaeLogo(ids, file, deviceType?: number) {
+  const selectedRows = getSelectionRows(grid);
+  let realDeviceType = 670; // 默认670
+  if (selectedRows.length > 0) {
+    const deviceTypeName = selectedRows[0].typeName || '';
+    if (deviceTypeName.includes('670')) {
+      realDeviceType = 670;
+    } else if (deviceTypeName.includes('6170')) {
+      realDeviceType = 6170;
+    }
+  }
+  const finalDeviceType = deviceType || realDeviceType;
+  const finalIds = Array.isArray(ids) ? ids : [ids];
+  const finalFile = file || checkFile.file || cEdit.fileBoot.file; 
+  if (!finalFile || finalIds.length === 0) {
     return Promise.resolve({ code: 200, msg: '成功' });
   }
-  if (!Array.isArray(ids)) {
-    ids = [ids];
-  }
-  var formData = new FormData();
-  ids.forEach((element) => {
-    formData.append('deviceIds', element);
-  });
-
-  formData.append('file', file);
-
-  return api.uploadBoot(formData);
+  return uploadHelper.uploadLogo(finalDeviceType, finalIds, finalFile);
 }
 //保存单个设备的数据
 function SaveItemData() {
@@ -553,8 +591,7 @@ function SaveItemData() {
   var formData = new FormData();
   formData.append('deviceId', cEdit.deviceId);
   formData.append('deviceImei', cEdit.deviceImei);
-
-  //  formData.append("logoFile",cEdit.fileBoot.file);//开机画面
+  formData.append("fileIds",cEdit.fileIds);
 
   cEdit.fileParam.forEach((v) => {
     if (v.file) {
@@ -576,9 +613,9 @@ function SaveItemData() {
   Promise.allSettled([promise1, promise2])
     .then((res) => {
       if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
-        if (res[0].code == 200 && res[1].code == 200) {
+        if (res[0].value.code == 200 && res[1].value.code == 200) {
           CloseSingleEdit();
-          alert("操作成功");
+          alert('操作成功');
           return;
         }
       }
@@ -647,7 +684,6 @@ function dragImgAddEvt() {
     });
   }
   function handleDrop(e) {
-    
     const dt = e.dataTransfer;
     const files = dt.files;
 
@@ -660,7 +696,6 @@ function dragImgAddEvt() {
 }
 
 function addFileEvt() {
-  
   var checkImgOver = function (res, type) {
     if (type == 'fileBoot') {
       let keys = Object.keys(res);
@@ -675,16 +710,16 @@ function addFileEvt() {
     fileInputs.fileBoot = document.getElementById('fileBoot');
     fileInputs.fileOprat = document.getElementById('fileOprat');
     fileInputs.fileParam = document.getElementById('fileParam');
-  }
 
-  let keys = Object.keys(fileInputs);
-  keys.forEach((k) => {
-    fileInputs[k].addEventListener('change', () => {
-      handleFiles(fileInputs[k].files).then((res) => {
-        checkImgOver(res, k);
+    let keys = Object.keys(fileInputs);
+    keys.forEach((k) => {
+      fileInputs[k].addEventListener('change', () => {
+        handleFiles(fileInputs[k].files).then((res) => {
+          checkImgOver(res, k);
+        });
       });
     });
-  });
+  }
 }
 
 // 处理选择的文件
@@ -786,6 +821,20 @@ var hideConfirm = function () {
   Status.confirm = Cfg;
 };
 
+//删除某个图片
+function DelImg(item,index,type){
+  
+if(item.id){
+confirm('您确认删除吗?',()=>{
+  cEdit.fileIds.push(item.id);
+   cEdit[type].splice(index,1);
+
+});
+}else{
+  cEdit[type].splice(index,1);
+}
+}
+
 onMounted(() => {
   getDeviceType();
   getList();
@@ -912,7 +961,8 @@ onMounted(() => {
 
 .SingEditContent .item {
   width: 100%;
-  height: 90px;
+  min-height: 90px;
+  height: auto;
   border-bottom: 1px dashed #e7e7e7;
 
   padding: 12px 0px;
@@ -945,10 +995,11 @@ onMounted(() => {
   text-align: left;
 }
 
-.SingEditContent .item .img {
+.SingEditContent .item .imgs {
   width: calc(100% - 110px);
   float: left;
-  height: 100%;
+  min-height: 90px;
+  height: auto;
 }
 
 .SingEditContent .item .option {
@@ -1001,10 +1052,46 @@ onMounted(() => {
 }
 
 .SingEditContent .Preview .img {
-  height: 100%;
+  height: 90px;
   width: 160px;
   object-fit: contain;
   border-radius: 4px;
   border: 1px solid #d3d5d7;
 }
+
+.SingEditContent .item .imgContent {
+  height: 90px;
+  width: 160px;
+  float: left;
+  margin-right: 8px;
+  position: relative;
+}
+
+.SingEditContent .item .imgContent .opt {
+  position: absolute;
+  z-index: 1;
+  background-color: #00000091;
+  display: none;
+  top: 0px;
+  left: 0px;
+  height: 90px;
+  width: 160px;
+  cursor: pointer;
+  color: #bd2b2b;
+  font-size: 30px;
+ text-align: center;
+ line-height: 90px;
+}
+.SingEditContent .item .imgContent:hover .opt {
+  display: block !important;
+}
+
+.green {
+  color: rgba(0, 165, 82, 1);
+}
+
+.red {
+  color: rgba(224, 52, 52, 1);
+}
+
 </style>

src/views/equipmentAlarmRecord/index.vue

@@ -62,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">
@@ -89,30 +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>
+                    <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>
+                    <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">
@@ -123,7 +131,11 @@
               <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>
@@ -134,13 +146,14 @@
           </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" />
@@ -156,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);
@@ -219,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 => {
@@ -258,7 +311,7 @@ const handleQuery = () => {
 
 /** 重置按钮操作 */
 const resetQuery = () => {
-    dateRange.value = ['', ''];
+  dateRange.value = ['', ''];
   queryFormRef.value?.resetFields();
   handleQuery();
 }
@@ -266,11 +319,16 @@ onMounted(() => {
   getList();
   getDeviceType()
 });
+// 组件卸载时清除所有定时器
+onUnmounted(() => {
+  clearAllTimers();
+});
 </script>
 <style lang="scss" scoped>
-:deep .el-collapse{
-  border-top:none
+:deep .el-collapse {
+  border-top: none
 }
+
 :deep .el-collapse-item__header {
   display: none;
 }
@@ -289,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);
@@ -333,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

@@ -1,7 +1,6 @@
 <template>
   <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
-      :leave-active-class="proxy?.animate.searchAnimate.leave">
+    <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">
@@ -24,14 +23,10 @@
             <el-button type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()">
-              修改
-            </el-button>
+            <el-button type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()"> 修改 </el-button>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()">
-              删除
-            </el-button>
+            <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete()"> 删除 </el-button>
           </el-col>
           <right-toolbar v-model:show-search="showSearch" :search="true" @query-table="getList"></right-toolbar>
         </el-row>
@@ -42,8 +37,7 @@
         <el-table-column label="型号名称" align="center" prop="typeName" />
         <el-table-column label="类型code" align="center" prop="appModelDictionary">
           <template #default="scope">
-            {{appmodelDictionaryOptions.find(item => item.dictValue === String(scope.row.appModelDictionary))?.dictLabel
-            }}
+            {{ appmodelDictionaryOptions.find((item) => item.dictValue === String(scope.row.appModelDictionary))?.dictLabel }}
           </template>
         </el-table-column>
         <el-table-column label="是否支持蓝牙" align="center" prop="isSupportBle">
@@ -81,14 +75,11 @@
           </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" />
+      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
     </el-card>
 
-
     <!-- 添加或修改用户配置对话框 -->
-    <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body
-      @close="closeDialog">
+    <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body @close="closeDialog">
       <el-form ref="userFormRef" :model="form" :rules="rules" label-width="120px">
         <el-row>
           <el-col :span="24">
@@ -101,14 +92,12 @@
           <el-col :span="24">
             <el-form-item label="路由跳转" prop="appModelDictionary">
               <el-select v-model="form.appModelDictionary" placeholder="请选择" @change="handlePcRouteChange">
-                <el-option v-for="item in appmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
-                  :value="item.dictValue" />
+                <el-option v-for="item in appmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" />
               </el-select>
             </el-form-item>
-            <el-form-item label="pc路由跳转" prop="pcModelDictionary" style="display: none;">
+            <el-form-item label="pc路由跳转" prop="pcModelDictionary" style="display: none">
               <el-select v-model="form.pcModelDictionary" placeholder="请选择">
-                <el-option v-for="item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
-                  :value="item.dictValue" />
+                <el-option v-for="item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" />
               </el-select>
             </el-form-item>
           </el-col>
@@ -147,6 +136,22 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="设备图片" prop="devicePic">
+              <input type="file" id="fileTypeImg" accept="image/*" style="display: none" />
+              <div class="devicePic typeImgContent" v-if="form.devicePic">
+                <img class="img" :src="form.devicePic" />
+                <div class="mask center" @click.stop="DropImg(form)">
+                  <el-icon class="avatar-uploader-icon"><Delete /></el-icon>
+                </div>
+              </div>
+              <div class="devicePic typeImgAdd center" v-else @click.stop="AddImg(form)">
+                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
@@ -164,7 +169,23 @@ import { deviceTypeQuery } from '@/api/equipmentManagement/deviceType/types';
 import { getDicts } from '@/api/system/dict/data';
 import { to } from 'await-to-js';
 import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
-import { ElDialog, ElForm, ElFormItem, ElInput, ElRow, ElCol, ElButton, ElCard, ElSelect, ElOption, ElDatePicker, ElTable, ElTableColumn, ElTooltip, ElSwitch } from 'element-plus';
+import {
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElRow,
+  ElCol,
+  ElButton,
+  ElCard,
+  ElSelect,
+  ElOption,
+  ElDatePicker,
+  ElTable,
+  ElTableColumn,
+  ElTooltip,
+  ElSwitch
+} from 'element-plus';
 interface deviceTypeVO {
   id: string | number;
   typeName: string;
@@ -176,9 +197,9 @@ interface deviceTypeVO {
   communicationMode: number;
   createTime: string;
   createByName: string;
+  devicePic: string;
 }
-interface DeviceTypeForm extends deviceTypeVO {
-}
+interface DeviceTypeForm extends deviceTypeVO {}
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const deviceTypeList = ref<deviceTypeVO[]>();
 const loading = ref(true);
@@ -190,9 +211,11 @@ const total = ref(0);
 const queryFormRef = ref<InstanceType<typeof ElForm>>();
 const userFormRef = ref<InstanceType<typeof ElForm>>();
 const formDialogRef = ref<InstanceType<typeof ElDialog>>();
-const loadingIng = ref(false)
+const loadingIng = ref(false);
 const appmodelDictionaryOptions = ref<any[]>([]);
 const pcmodelDictionaryOptions = ref<any[]>([]);
+var fileC = null;
+var uploadFile=false;
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -207,7 +230,7 @@ const initFormData: DeviceTypeForm = {
   communicationMode: 0,
   id: '',
   createTime: '',
-  createByName: '',
+  createByName: ''
 };
 
 const initData = {
@@ -215,28 +238,20 @@ const initData = {
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    typeName: '',
+    typeName: ''
   },
   rules: {
-    typeName: [
-      { required: true, message: '请输入设备类型名称', trigger: 'blur' },
-    ],
-    appModelDictionary: [
-      { required: true, message: '请选择类型code', trigger: 'blur' },
-    ],
-    locateMode: [
-      { required: true, message: '请选择定位方式', trigger: 'blur' },
-    ],
-    communicationMode: [
-      { required: true, message: '请选择通讯方式', trigger: 'blur' },
-    ],
+    typeName: [{ required: true, message: '请输入设备类型名称', trigger: 'blur' }],
+    appModelDictionary: [{ required: true, message: '请选择类型code', trigger: 'blur' }],
+    locateMode: [{ required: true, message: '请选择定位方式', trigger: 'blur' }],
+    communicationMode: [{ required: true, message: '请选择通讯方式', trigger: 'blur' }]
   }
 };
 
 const data = reactive<{
-  form: DeviceTypeForm,
-  queryParams: deviceTypeQuery,
-  rules: any
+  form: DeviceTypeForm;
+  queryParams: deviceTypeQuery;
+  rules: any;
 }>(initData);
 
 const { queryParams, form, rules } = toRefs(data);
@@ -252,11 +267,11 @@ const getList = async () => {
 const getDict = async () => {
   const res = await getDicts('app_model_dictionary');
   appmodelDictionaryOptions.value = res.data;
-}
+};
 const pcgetDict = async () => {
   const res = await getDicts('pc_model_dictionary');
   pcmodelDictionaryOptions.value = res.data;
-}
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -270,13 +285,9 @@ const resetQuery = () => {
 };
 // PC路由变化时，同步对应APP路由
 const handlePcRouteChange = (pcDictValue: string) => {
-  const selectedPcItem = appmodelDictionaryOptions.value.find(
-    item => item.dictValue === pcDictValue
-  );
+  const selectedPcItem = appmodelDictionaryOptions.value.find((item) => item.dictValue === pcDictValue);
   if (!selectedPcItem) return;
-  const matchedAppItem = pcmodelDictionaryOptions.value.find(
-    item => item.dictLabel === selectedPcItem.dictLabel
-  );
+  const matchedAppItem = pcmodelDictionaryOptions.value.find((item) => item.dictLabel === selectedPcItem.dictLabel);
   if (matchedAppItem) {
     form.value.pcModelDictionary = matchedAppItem.dictValue;
   } else {
@@ -287,13 +298,15 @@ const handlePcRouteChange = (pcDictValue: string) => {
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: deviceTypeVO) => {
-  const deviceTypeIds = row ? [row.id] : ids.value.map(item => item.id);
-  const typeNames = row ? row.typeName : ids.value.map(item => item.typeName).join(',');
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + typeNames + '"的数据项？', '系统提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }) as any);
+  const deviceTypeIds = row ? [row.id] : ids.value.map((item) => item.id);
+  const typeNames = row ? row.typeName : ids.value.map((item) => item.typeName).join(',');
+  const [err] = await to(
+    proxy?.$modal.confirm('是否确认删除"' + typeNames + '"的数据项？', '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    }) as any
+  );
   if (!err) {
     await api.deleteDeviceType(deviceTypeIds);
     await getList();
@@ -350,7 +363,7 @@ const submitForm = () => {
     if (valid) {
       loadingIng.value = true;
       try {
-        const payload = {
+        let payload = {
           ...form.value,
           appModelDictionary: form.value.appModelDictionary,
           pcModelDictionary: form.value.pcModelDictionary,
@@ -358,7 +371,27 @@ const submitForm = () => {
           locateMode: Number(form.value.locateMode),
           communicationMode: Number(form.value.communicationMode)
         };
-        form.value.id ? await api.updateDeviceType(payload) : await api.addDeviceType(payload);
+        
+         
+
+         let formData = new FormData();
+         let keys=Object.keys(payload);
+         
+         keys.forEach(key=>{
+            if(key!=='devicePic'){
+              if(payload[key]!==null && payload[key]!==undefined){
+                formData.append(key,payload[key]);
+              }
+                
+            }          
+         });
+
+        if(uploadFile && fileC && fileC.files.length){
+            formData.append('file',fileC.files[0]);
+        }
+        
+        //如果要上传文件就用formData,不上传使用payload
+        form.value.id ? await api.updateDeviceType(formData) : await api.addDeviceType(formData);
         proxy?.$modal.msgSuccess('操作成功');
         dialog.visible = false;
         await getList();
@@ -369,6 +402,25 @@ const submitForm = () => {
   });
 };
 
+//删除图片
+function DropImg(item) {
+  ElMessageBox.confirm('删除后不可恢复，您确认要删除吗?', '提醒', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+      form.value.devicePic = null;
+    })
+    .catch(() => {});
+}
+
+//选择图片
+function AddImg(item) {
+  uploadFile=false;
+  initControl();
+  fileC.click();
+  
+}
 /**
  * 关闭用户弹窗
  */
@@ -386,9 +438,106 @@ const resetForm = () => {
   form.value.id = '';
 };
 
+function initControl() {
+  if (fileC) {
+    fileC.value="";
+    return;
+  }
+
+  fileC = document.getElementById('fileTypeImg');
+  fileC.addEventListener('change', function () {
+    if (this.files.length) {
+      let file = this.files[0];
+      if (file.type.indexOf('image/') === 0) {
+        
+        let reader = new FileReader();
+
+        reader.onload = function (e) {    
+          uploadFile=true;      
+          form.value.devicePic = e.target.result;
+        };
+
+        reader.onerror = function () {
+          console.log('读取文件失败！');
+        };
+
+        reader.readAsDataURL(file);
+      } else {
+        // form.value.devicePic = null;
+      }
+    } else {
+      // form.value.devicePic = null;
+    }
+  });
+}
+
 onMounted(() => {
   getList(); // 初始化列表数据
   getDict();
-  pcgetDict() //pc跳转
+  pcgetDict(); //pc跳转
 });
 </script>
+
+<style>
+.devicePic {
+  width: 120px;
+  height: 120px;
+  border-radius: 6px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.typeImgContent {
+  background-color: #ffffff;
+  border: 1px solid rgb(220, 223, 230);
+  position: relative;
+
+}
+
+.typeImgContent .img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 0;
+  padding: 10px;
+}
+
+.center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.typeImgAdd {
+  background-color: #fafafa;
+  border: 1px dashed rgb(205, 208, 214);
+  font-size: 30px;
+
+  cursor: pointer;
+}
+
+.mask {
+  background-color: #1c1c1c80;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  width: 0px;
+  height: 0px;
+  cursor: pointer;
+  overflow: hidden;
+  color: #ff0000;
+  font-size: 25px;
+}
+
+.typeImgContent:hover .mask {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/equipmentManagement/devices/eqDetail.vue

@@ -183,7 +183,7 @@ watch(
   font-size: 14px;
   font-weight: 400;
 
-  letter-spacing: 0px;
+  letter-spacing: 0px;   
   text-align: left;
   float: left;
 }

src/views/equipmentManagement/devices/index.vue

@@ -12,21 +12,34 @@
               <el-form-item label="设备MAC" prop="deviceMac">
                 <el-input v-model="queryParams.deviceMac" placeholder="请输入设备MAC" clearable />
               </el-form-item>
-              <el-form-item label="请输入设备IMEI" prop="deviceImei">
+              <el-form-item label="设备IMEI" prop="deviceImei">
                 <el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable />
               </el-form-item>
-              <el-form-item label="设备类型" prop="deviceType">
-                <el-select v-model="queryParams.deviceType" placeholder="设备类型">
+              <el-form-item label="设备类型" prop="deviceType" >
+                <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
                   <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                     :value="item.id" />
                 </el-select>
               </el-form-item>
-              <el-form-item label="设备状态" prop="deviceStatus">
-                <el-select v-model="queryParams.deviceStatus" placeholder="设备状态" style="margin-left: 10px">
+              <el-form-item label="设备状态" prop="deviceStatus" v-hasPermi="['equipment:devices:allocate']">
+                <el-select v-model="queryParams.deviceStatus" placeholder="设备状态"  clearable>
                   <el-option label="正常" value="1" />
                   <el-option label="失效" value="0" />
                 </el-select>
               </el-form-item>
+              <el-form-item label="在线状态" prop="onlineStatus">
+                <el-select v-model="queryParams.onlineStatus" placeholder="在线状态" clearable>
+                  <el-option label="在线" value="1" />
+                  <el-option label="离线" value="0" />
+                  <el-option label="故障" value="2" />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="绑定状态" prop="bindingStatus">
+                <el-select v-model="queryParams.bindingStatus" placeholder="绑定状态" clearable>
+                  <el-option label="已绑定" value="1" />
+                  <el-option label="未绑定" value="0" />
+                </el-select>
+              </el-form-item>
               <el-form-item label="创建时间">
                 <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
                   range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
@@ -56,8 +69,8 @@
             </el-col>
 
             <el-col :span="1.5">
-              <el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain
-                icon="Download" @click="handleExport">导出</el-button>
+              <el-button v-hasPermi="['equipment:devices:export']" type="warning" plain icon="Download"
+                @click="handleExport">导出</el-button>
             </el-col>
             <el-col :span="1.5">
               <el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
@@ -87,9 +100,10 @@
             <template #default="scope">
               <el-popover placement="right" trigger="click">
                 <template #reference>
-                  <img :src="scope.row.devicePic"
-                    style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
+                  <img v-if="scope.row.devicePic" :src="scope.row.devicePic"
+                    style="width: 50px; height: 50px; cursor: pointer; object-fit: contain"
                     class="hover:opacity-80 transition-opacity" />
+                  <img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px;">
                 </template>
                 <img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
               </el-popover>
@@ -106,6 +120,13 @@
               </el-tag>
             </template>
           </el-table-column>
+          <el-table-column prop="onlineStatus" label="设备状态">
+            <template #default="scope">
+              <el-tag :type="scope.row.onlineStatus === 1 ? 'success' : 'info'">
+                {{ scope.row.onlineStatus === 1 ? '在线' : (scope.row.onlineStatus === 2 ? '故障' : '离线') }}
+              </el-tag>
+            </template>
+          </el-table-column>
           <el-table-column prop="deviceStatus" label="设备状态" v-hasPermi="['equipment:devices:allocate']">
             <template #default="scope">
               <el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'">
@@ -297,11 +318,11 @@
           <span style="color: #409eff">批量导入完成，共检测到 <span style="color: #e6a23c">{{ importResult.total }}</span> 条数据，导入成功
             <span style="color: #67c23a">{{ importResult.succeed }}</span> 条，失败
             <span style="color: red">{{ importResult.errorSun }}</span> 条。</span>
-          <p v-if="importResult.errorSun > 0" style="padding: 10px">
-            <a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
-          </p>
         </div>
       </el-upload>
+      <p v-if="importResult.errorSun > 0" style="padding: 10px">
+        <a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
+      </p>
       <template #footer>
         <div class="dialog-footer">
           <el-button @click="importDialogVisible = false">取 消</el-button>
@@ -443,7 +464,9 @@ const initData: PageData<deviceForm, deviceQuery> = {
     deviceMac: '',
     deviceImei: '',
     deviceType: '',
-    deviceStatus: ''
+    deviceStatus: '',
+    onlineStatus: '',
+    bindingStatus:''
   },
   rules: {
     deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
@@ -516,7 +539,7 @@ const handleExport = () => {
     {
       ...queryParams.value
     },
-    `${new Date().getTime()}.xlsx`,
+    `设备列表${new Date().getTime()}.xlsx`,
     'get'
   );
 };
@@ -703,17 +726,17 @@ const httpRequestImg = (parm): Promise<any> => {
   return Promise.resolve();
 };
 const beforeUpload = (file) => {
-  const isLt2M = file.size / 1024 / 1024 < 2;
+  //const isLt2M = file.size / 1024 / 1024 < 2;
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
   if (!isJPG) {
-    ElMessage.warning('请上传jpg、png格式，大小不超过2M的照片');
+    ElMessage.warning('请上传jpg、png格式');
     return false;
   }
-  if (!isLt2M) {
-    ElMessage.warning('大小不超过2M的照片片');
-    return false;
-  }
-  return isJPG && isLt2M;
+  // if (!isLt2M) {
+  //   ElMessage.warning('大小不超过2M的照片片');
+  //   return false;
+  // }
+  return isJPG;
 };
 // 文件上传状态改变时触发
 const fileUploadChange = (files, fileList) => {
@@ -737,11 +760,12 @@ const submitForm = async () => {
     // 处理图片字段
     if (form.value.image instanceof File) {
       formData.append('file', form.value.image);
-    } else if (form.value.image && typeof form.value.image === 'string') {
-      // 如果是URL且需要转换为二进制
-      const blob = await urlToBlob(form.value.image);
-      formData.append('file', blob, 'image.jpg'); // 添加文件名
     }
+    //  else if (form.value.image && typeof form.value.image === 'string') {
+    //   // 如果是URL且需要转换为二进制
+    //   const blob = await urlToBlob(form.value.image);
+    //   formData.append('file', blob, 'image.jpg'); // 添加文件名
+    // }
     // 添加其他必要字段
     const fields = ['id', 'deviceName', 'deviceType', 'remark'];
     fields.forEach((key) => {
@@ -786,11 +810,11 @@ const submitForm = async () => {
 };
 
 // URL转Blob的方法函数
-const urlToBlob = async (url: string): Promise<Blob> => {
-  const response = await fetch(url);
-  if (!response.ok) throw new Error('图片加载失败');
-  return await response.blob();
-};
+// const urlToBlob = async (url: string): Promise<Blob> => {
+//   const response = await fetch(url);
+//   if (!response.ok) throw new Error('图片加载失败');
+//   return await response.blob();
+// };
 
 /**
  * 关闭用户弹窗
@@ -892,7 +916,7 @@ const handleBatchImport = () => {
 const downloadTemplate = () => {
   // 这里可用 window.open 或 a 标签下载模板
   const link = document.createElement('a');
-  link.href = 'https://fuyuanshen.com/fys/Equipmentimporttemplate/EquipmentImportTemplate.xlsx';
+  link.href = 'https://www.cnxhyc.com/jquan/Equipmentimporttemplate/EquipmentImportTemplate.xlsx';
   link.download = '设备数据导入模板.xlsx'; // 可选：指定下载文件名
   link.style.display = 'none'; // 隐藏标签
   document.body.appendChild(link);
@@ -900,27 +924,35 @@ const downloadTemplate = () => {
   document.body.removeChild(link); // 移除标签
 };
 const beforeImportUpload = (file: any) => {
-  const isLt5M = file.size / 1024 / 1024 < 5;
-  if (!isLt5M) {
-    proxy?.$modal.msgError('上传文件大小不能超过 5MB!');
-  }
-  return isLt5M;
+  // const isLt5M = file.size / 1024 / 1024 < 5;
+  // if (!isLt5M) {
+  //   proxy?.$modal.msgError('上传文件大小不能超过 5MB!');
+  // }
+  // return isLt5M;
 };
 
 //添加tokenf方法head_upload 直接返回 getBearerToken()
 const head_upload = () => getBearerToken();
 const handleImportSuccess = (response: any) => {
   if (response.code == 200) {
+    console.log('导入成功了么');
     importResult.value.isShow = true;
     if (response.data) {
-      importResult.value.succeed = response.data.successCount || 0;
-      importResult.value.errorSun = response.data.failureCount || 0;
+      console.log(response.data, 'response.data');
+      importResult.value.succeed = response.data.successCount;
+      importResult.value.errorSun = response.data.failureCount;
       importResult.value.total = importResult.value.succeed + importResult.value.errorSun;
-      importResult.value.link = response.data.errorExcelUrl || '';
+      importResult.value.link = response.data.errorExcelUrl;
+    }
+    if (importUpload.value) {
+      importUpload.value.clearFiles();
     }
     getList(); // 初始化列表数据
   } else {
-    proxy?.$modal.msgError(response.msg || '导入失败');
+    if (importUpload.value) {
+      importUpload.value.clearFiles();
+    }
+    proxy?.$modal.msgError(response.msg);
   }
 };
 const handleImportError = () => {
@@ -943,15 +975,13 @@ const handleBatchAssignConfirm = () => {
     customerId: batchAssignCustomerId.value, // 目标客户ID
     deviceIds: selectedIds // 选中的设备ID数组
   };
-  api
-    .deviceAssignCustomer(data)
-    .then((res) => {
-      if (res.code == 200) {
-        batchAssignDialogVisible.value = false;
-        getList();
-        return proxy?.$modal.msgSuccess(`分配成功`);
-      }
-    })
+  api.deviceAssignCustomer(data).then((res) => {
+    if (res.code == 200) {
+      batchAssignDialogVisible.value = false;
+      getList();
+      return proxy?.$modal.msgSuccess(`分配成功`);
+    }
+  })
     .catch(() => { });
 };
 

src/views/equipmentManagement/devices/shareManage.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="content" v-loading="Status.fullLoading">
     <div class="topFilter">
-      <div>
+      <div class="topTool">
         <el-button type="primary" @click="ShowEdit"
           ><el-icon> <Plus /> </el-icon>添加分享</el-button
         >
         <el-button type="danger" @click="DelShare(null, true)" :disabled="selectRows.length === 0">批量删除</el-button>
       </div>
-
+      <br/>
       <el-form :inline="true" :model="filter" class="demo-form-inline">
         <el-form-item label="">
         
@@ -96,7 +96,7 @@
       <div class="form">
         <el-form :model="cEdit" ref="ruleFormRef" style="max-width: 750px" :label-width="'75px'">
           <el-form-item label="分享用户" label-position="right">
-            <el-select v-model="cEdit.phonenumber" filterable placeholder="输入以搜索">
+            <el-select v-model="cEdit.phonenumber" filterable allow-create  default-first-option placeholder="输入以搜索">
               <el-option v-for="item in Usrs" :key="item.phonenumber" :label="item.userName" :value="item.phonenumber" />
             </el-select>
           </el-form-item>
@@ -205,9 +205,12 @@ var dic = reactive({
   '3': '开机画面',
   '4': '人员信息登记',
   '5': '发送信息',
-  '6': '产品信息'
+  '6': '产品信息',
+  '41':'静电探测',
+  '42':'SOS'
 });
 
+
 var power = computed(() => {
   let arr = [];
   let keys = Object.keys(dic);
@@ -225,13 +228,30 @@ function ShowEdit() {
 function CloseEdit() {
   Status.ShowEditPop = false;
   Status.ShowPowerSet = false;
+  cEdit.phonenumber="";
+  cEdit.permission= [];
+  cEdit.remark= '';
+  cEdit.smsCode= '';
 }
 
 //添加分享
 
 //保存分享数据
 function SaveFormData(type) {
-  let data = {
+
+  if(!cEdit.phonenumber){
+
+    alert("请输入或选择手机号");
+    return ;
+  }
+
+  let reg=/^1\d{10}$/
+  if(reg.test(cEdit.phonenumber)){
+    alert("手机号格式不正确");
+    return;
+  }
+
+    let data = {
     'deviceId': deviceid,
     'phonenumber': cEdit.phonenumber,
     'permission': cEdit.permission.join(','),
@@ -239,7 +259,6 @@ function SaveFormData(type) {
     'remark': cEdit.remark,
     'smsCode': cEdit.smsCode
   };
-
   Status.fullLoading = true;
   api
     .SaveShare(data, type)
@@ -247,19 +266,13 @@ function SaveFormData(type) {
       if (res.code == 200) {
         getRecordList();
         CloseEdit();
+         Status.fullLoading = false;
       }
       alert(res.msg);
     })
     .catch((ex) => {
       console.log('出现异常', ex);
     })
-    .finally(() => {
-      Status.fullLoading = false;
-      cEdit.phonenumber = '';
-      cEdit.permission = [];
-      cEdit.remark = '';
-      cEdit.smsCode = '';
-    });
 }
 
 function getPower(item) {
@@ -519,7 +532,7 @@ watch(
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding: 30px 12px 12px 12px;
+  padding: 12px 12px 12px 12px;
 }
 .center {
   display: flex;
@@ -541,6 +554,8 @@ watch(
   align-content: center;
   justify-content: space-between;
   align-items: flex-start;
+  
+  
 }
 :deep .pickerContent .el-date-editor {
   border: none !important;
@@ -567,4 +582,13 @@ watch(
 :deep .topFilter .el-input-group__append {
   padding: 0px 10px !important;
 }
+.topTool{
+      display: flex
+;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: flex-start;
+    align-items: center;
+}
 </style>

src/views/equipmentManagement/log/index.vue

@@ -23,44 +23,14 @@
     </transition>
 
     <el-card shadow="never">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['equipment:log:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['equipment:log:edit']">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['equipment:log:remove']">删除</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['equipment:log:export']">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
-        </el-row>
-      </template>
-
       <el-table v-loading="loading" border :data="logList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="ID" align="center" prop="id" v-if="true" />
         <el-table-column label="设备行为" align="center" prop="deviceAction" />
         <el-table-column label="设备名称" align="center" prop="deviceName" />
         <el-table-column label="数据来源" align="center" prop="dataSource" />
           <el-table-column label="操作时间" align="center" prop="createTime" />
         <el-table-column label="内容" align="center" prop="content" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['equipment:log:edit']"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['equipment:log:remove']"></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
       </el-table>
-
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
     <!-- 添加或修改设备日志对话框 -->

src/views/fys-equipment/fenceAccessRecord/index.vue

@@ -3,9 +3,9 @@
     <div class="percent100">
       <div class="topTool">
         <div class="button-row">
-          <el-button type="primary" @click.stop="ShowEdit(null)"
-            ><el-icon><Plus /></el-icon>新增</el-button
-          >
+          <!-- <el-button type="primary" @click.stop="ShowEdit(null)"
+            ><el-icon><Plus /></el-icon>新增</el-button -->
+   
           <el-button type="primary" @click.stop="Export()" plain
             ><el-icon><Download /></el-icon>导出</el-button
           >
@@ -16,7 +16,7 @@
         <div>
           <el-form :inline="true" :model="queryParams" class="demo-form-inline" @submit.native.prevent>
             <el-form-item label="" style="margin-right: 15px">
-              <el-input :suffix-icon="'Search'" v-model="queryParams.fenceName" placeholder="名称" clearable @keyup.enter.stop="handleQuery" />
+              <el-input :suffix-icon="'Search'" v-model="queryParams.fenceName" placeholder="名称" clearable @input="handleQuery" />
             </el-form-item>
 
             <el-form-item style="margin-right: 0px">
@@ -76,24 +76,25 @@
         <el-table-column label="围栏名称" align="center" prop="fenceName"> </el-table-column>
 
         <el-table-column label="设备名称" align="center" prop="deviceName"> </el-table-column>
-        <!-- <el-table-column label="人员名称" align="center" prop="userName"> </el-table-column> -->
+        <el-table-column label="事件时间" align="center" prop="eventTime"> </el-table-column>
         <el-table-column label="事件类型" align="center" prop="eventType">
           <template #default="scope">
             <div>{{ scope.row.eventType == '1' ? '闯入' : '离开' }}</div>
           </template>
         </el-table-column>
 
-        <el-table-column label="经纬度" align="center" prop="id">
+        <!-- <el-table-column label="经纬度" align="center" prop="id">
           <template #default="scope">
             <span style="margin-right: 15px">{{ scope.row.longitude }}</span
             ><span>{{ scope.row.latitude }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="精度" align="userName" prop="accuracy"> </el-table-column>
+        <el-table-column label="精度" align="userName" prop="accuracy"> </el-table-column> -->
+ <el-table-column label="事件地址" align="left" prop="eventAddress"> </el-table-column>
 
         <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
           <template #default="scope">
-            <el-button link type="primary" @click="ShowEdit(scope.row)">编辑</el-button>
+            <!-- <el-button link type="primary" @click="ShowEdit(scope.row)">编辑</el-button> -->
             <el-button link type="danger" @click="DropFence(scope.row)">删除</el-button>
           </template>
         </el-table-column>
@@ -280,8 +281,9 @@ function CloseEdit() {
 //响应查询
 var queryTime = null;
 function handleQuery() {
+  debugger;
   clearTimeout(queryTime);
-  queryTime = setTimeout(getList, 500);
+  queryTime = setTimeout(getList, 200);
 }
 
 //重置查询条件
@@ -302,6 +304,7 @@ function resetQuery() {
   keys.forEach((k) => {
     queryParams[k] = cfg[k];
   });
+  handleQuery();
 }
 
 //--------------------------------------

src/views/fys-equipment/trackService/index.vue

@@ -0,0 +1,687 @@
+<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="sid">
+              <el-input v-model="queryParams.sid" placeholder="请输入猎鹰服务ID" clearable @keyup.enter="handleQuery" />
+            </el-form-item> -->
+            <el-form-item label="服务名称" prop="sname">
+              <el-input v-model="queryParams.sname" 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="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:service:add']">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['system:service:edit']"
+              >修改</el-button
+            >
+          </el-col>
+
+          <!-- <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['system:service:export']">导出</el-button>
+          </el-col> -->
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+
+      <el-table v-loading="loading" border :data="serviceList" @selection-change="handleSelectionChange">
+        <el-table-column label="猎鹰服务ID" align="center" prop="sid" />
+        <el-table-column label="服务名称" align="center" prop="sname" />
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <template #default="scope">
+            <el-tooltip content="关联设备" placement="top">
+              <el-button link type="primary" icon="Connection" @click="ShowCheckDevice(scope.row)" v-hasPermi="['system:service:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="修改" placement="top">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:service:edit']"></el-button>
+            </el-tooltip>
+            <el-tooltip content="终端" placement="top">
+              <el-button link type="primary" icon="View" @click="ShowMapDevice(scope.row)"></el-button>
+            </el-tooltip>
+            <!-- <el-tooltip content="删除" placement="top">
+              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:service:remove']"></el-button>
+            </el-tooltip> -->
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+    <!-- 添加或修改轨迹服务对话框 -->
+    <el-dialog :title="dialog.title" :draggable="true" v-model="dialog.visible" width="500px" append-to-body>
+      <el-form ref="serviceFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="服务名称" prop="sname">
+          <el-input v-model="form.sname" 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>
+
+    <!-- 关联设备维护 -->
+    <el-dialog :title="dialog.connectTitle" :draggable="true" footer-class="dilogFooter" v-model="dialog.connectVisible" width="80%" append-to-body>
+      <div class="deviceContent" v-loading="dialog.connctLoading">
+        <div class="filter">
+          <el-form :inline="true">
+            <el-form-item label="关键字" prop="checkedKey">
+              <el-input v-model="searchFilter.checkedKey" placeholder="imei查询" clearable @keyup.enter="handleTerminalQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="searchCheckedDevice">搜索</el-button>
+              <el-button icon="Refresh" @click="searchFilter.checkedKey='';searchCheckedDevice()">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div>
+          <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+              <el-button type="primary" plain icon="Plus" @click="ShowAllDevice" v-hasPermi="['system:service:add']">新增</el-button>
+            </el-col>
+
+            <el-col :span="1.5">
+              <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="DelChecked()" v-hasPermi="['system:service:remove']"
+                >删除</el-button
+              >
+            </el-col>
+          </el-row>
+        </div>
+        <div class="checked">
+          <el-table
+            v-loading="loading"
+            border
+            :data="checkedDevices"
+            @selection-change="handleSelectionChange"
+            reserve-selection="true"
+            ref="multipleTableRef"
+            row-key="id"
+          >
+            <el-table-column type="selection" width="55" align="center" reserve-selection="true" />
+            <!-- <el-table-column label="deviceId" align="center" prop="deviceId" />
+            <el-table-column label="id" align="center" prop="id" /> -->
+            <el-table-column label="设备类型" align="center" prop="typeName" />
+            <el-table-column label="设备名称" align="center" prop="deviceName" />
+            <el-table-column label="IMEI" align="center" prop="deviceImei" />
+            <el-table-column label="Mac" align="center" prop="deviceMac" />
+            <el-table-column label="蓝牙名称" align="center" prop="bluetoothName" />
+            <!-- <el-table-column label="高德服务id" align="center" prop="sid" /> -->
+            <el-table-column label="高德终端id" align="center" prop="tid" />
+            <el-table-column label="高德轨迹id" align="center" prop="trid" />
+          </el-table>
+
+          <pagination
+            :total="checkedPageParams.total"
+            v-model:page="checkedPageParams.pageNum"
+            v-model:limit="checkedPageParams.pageSize"
+            @pagination="searchCheckedDevice"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="cancelConn">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="选择设备" :draggable="true" footer-class="dilogFooter" v-model="dialog.checkVisible" width="65%" append-to-body>
+      <div class="checkdeviceContent" v-loading="dialog.checkLoading">
+             <div class="filter">
+          <el-form :inline="true">
+            <el-form-item label="关键字" prop="nocheckKey">
+              <el-input v-model="searchFilter.nocheckKey" placeholder="imei查询" clearable @keyup.enter="handleTerminalQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="searchNoCheckDevice">搜索</el-button>
+              <el-button icon="Refresh" @click="searchFilter.nocheckKey='';searchNoCheckDevice()">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="noCheck">
+          <el-table v-loading="loading" border :data="noCheckDevices" @selection-change="checkNocheckChange" row-key="id">
+            <el-table-column type="selection" width="55" align="center" :selectable="selectable" />
+            <!-- <el-table-column label="deviceId" align="center" prop="deviceId" />
+            <el-table-column label="id" align="center" prop="id" /> -->
+            <el-table-column label="设备类型" align="center" prop="typeName" />
+            <el-table-column label="设备名称" align="center" prop="deviceName" />
+            <el-table-column label="IMEI" align="center" prop="deviceImei" />
+            <el-table-column label="Mac" align="center" prop="deviceMac" />
+            <el-table-column label="蓝牙名称" align="center" prop="bluetoothName" />
+            <el-table-column label="高德服务id" align="center" prop="sid" />
+            <el-table-column label="高德终端id" align="center" prop="tid" />
+            <el-table-column label="高德轨迹id" align="center" prop="trid" />
+          </el-table>
+
+          <pagination
+            :total="noCheckPageParams.total"
+            v-model:page="noCheckPageParams.pageNum"
+            v-model:limit="noCheckPageParams.pageSize"
+            @pagination="searchNoCheckDevice"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" :disabled="checkNoFlag" @click="checkedOK">保 存</el-button>
+          <el-button @click="cancelCheck">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <el-dialog title="查看终端" :draggable="true" footer-class="dilogFooter" v-model="dialog.showMap" width="70%" append-to-body>
+      <div class="checkdeviceContent" v-loading="dialog.viewLoading">
+        <div class="filter">
+          <el-form :inline="true">
+            <el-form-item label="关键字" prop="keywork">
+              <el-input v-model="TerminalQuery.keywork" placeholder="终端名称/描述/自定义内容" clearable @keyup.enter="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleTerminalQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetTterminalQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+
+        <div class="noCheck">
+          <el-table v-loading="loading" border :data="mapDevices" reserve-selection="true" row-key="tid">
+            <el-table-column label="终端设备id" align="center" prop="tid" />
+            <el-table-column label="终端名称" align="center" prop="name" />
+            <el-table-column label="创建时间" align="center" prop="createtime" />
+            <el-table-column label="最后定位时间" align="center" prop="locatetime" />
+            <el-table-column label="终端描述" align="center" prop="desc" />
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template #default="scope">
+                <el-tooltip content="删除" placement="top">
+                  <el-button link type="primary" icon="Delete" @click="deleteDevice(scope.row)" v-hasPermi="['system:service:remove']"></el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination
+            :total="viewDevicePageParams.total"
+            v-model:page="viewDevicePageParams.pageNum"
+            v-model:limit="viewDevicePageParams.pageSize"
+            @pagination="ShowMapDevice"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button :loading="buttonLoading" type="primary" :disabled="checkNoFlag" @click="checkedOK">保 存</el-button>
+          <el-button @click="HideMapDevice">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Service" lang="ts">
+import {
+  listService,
+  getService,
+  delService,
+  addService,
+  updateService,
+  getDevice,
+  terminalDevice,
+  delTerminalDevice,
+  getMapDevice,
+  getMapDeviceByFilter,
+  getDeviceList
+} from '@/api/system/service/api';
+import { ServiceVO, ServiceQuery, ServiceForm } from '@/api/system/service/types';
+import type { TableInstance } from 'element-plus';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
+const serviceList = ref<ServiceVO[]>([]);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<any>([]);
+const checkNoDevices = ref<any>([]);
+const single = ref(true);
+const multiple = ref(true);
+const checkNoFlag = ref(true);
+const total = ref(0);
+const multipleTableRef = ref<TableInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const serviceFormRef = ref<ElFormInstance>();
+
+const dialog = reactive({
+  visible: false,
+  title: '',
+  connectVisible: false,
+  connectTitle: '编辑关联设备',
+  connctLoading: false,
+  checkVisible: false,
+  checkLoading: false,
+  showMap: false,
+  viewLoading: false
+});
+
+
+const searchFilter=ref({
+  nocheckKey:'',
+  checkedKey:''
+});
+const initFormData: ServiceForm = {
+  id: undefined,
+  sid: undefined,
+  sname: undefined
+};
+const data = reactive<PageData<ServiceForm, ServiceQuery>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    sid: undefined,
+    sname: undefined,
+    params: {}
+  },
+  rules: {
+    id: [{ required: true, message: '不能为空', trigger: 'blur' }]
+  }
+});
+
+var cEdit = reactive<ServiceVO>({
+  id: null,
+  sid: null,
+  sname: null
+});
+
+var noCheckPageParams = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  total: 0
+});
+var checkedPageParams = reactive({
+  pageNum: 1,
+  pageSize: 20,
+  total: 0
+});
+
+var viewDevicePageParams = reactive({
+  pageNum: 1,
+  pageSize: 50,
+  total: 0
+});
+
+var noCheckDevices = ref([]);
+var checkedDevices = ref([]);
+var mapDevices = ref([]);
+const { queryParams, form, rules } = toRefs(data);
+/** 重置按钮操作 */
+const resetTterminalQuery = () => {
+  TerminalQuery.value.keywork = '';
+  ShowMapDevice(cEdit);
+};
+
+/** 搜索按钮操作 */
+const handleTerminalQuery = () => {
+  viewDevicePageParams.pageNum = 1;
+  ShowMapDevice(cEdit);
+};
+
+//查看终端
+function ShowMapDevice(row) {
+  debugger;
+  dialog.showMap = true;
+  if(row && row.sid){
+ cEdit = row;
+  }
+ 
+
+  let para2 = { sid: cEdit.sid, 
+    filter: TerminalQuery.value.keywork, 
+    page: viewDevicePageParams.pageNum, 
+    pagesize: viewDevicePageParams.pageSize 
+  };
+
+  dialog.viewLoading = true;
+
+  let p2 = getMapDeviceByFilter(para2);
+
+  p2.then((res) => {
+    if (res.code === 200) {
+      mapDevices.value = res.rows;
+      viewDevicePageParams.total = res.total;
+    } else {
+      mapDevices.value = [];
+      viewDevicePageParams.total = 0;
+    }
+  }).finally(() => {
+    dialog.viewLoading = false;
+  });
+}
+
+function HideMapDevice() {
+  dialog.showMap = false;
+  cEdit = null;
+}
+
+/** 查询轨迹服务列表 */
+const getList = async () => {
+  loading.value = true;
+  const res = await listService(queryParams.value);
+  serviceList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+};
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+};
+
+function selectable(row, index) {
+  if (row.sid) {
+    return false;
+  }
+  return true;
+}
+
+//查询未选择的设备
+const searchNoCheckDevice = () => {
+  return new Promise((resolve, reject) => {
+    let para = {
+      deviceStatus: 1,
+      // isTid: false,
+      // sid: cEdit.sid,
+      pageNum: noCheckPageParams.pageNum,
+      pageSize: noCheckPageParams.pageSize,
+      deviceImei:searchFilter.value.nocheckKey
+    };
+    dialog.checkLoading = true;
+    getDeviceList(para)
+      .then((res) => {
+        debugger;
+        if (res.code === 200) {
+          noCheckDevices.value = res.rows;
+          noCheckPageParams.total = res.total;
+          resolve(res);
+
+          return;
+        }
+        resolve(null);
+      })
+      .catch((ex) => {
+        resolve(null);
+      })
+      .finally(() => {
+        dialog.checkLoading = false;
+      });
+  });
+};
+//查询已选择的设备
+const searchCheckedDevice = () => {
+  return new Promise((resolve, reject) => {
+    let para = {
+      deviceStatus: 1,
+      isTid: true,
+      sid: cEdit.sid,
+      pageNum: checkedPageParams.pageNum,
+      pageSize: checkedPageParams.pageSize,
+      deviceImei:searchFilter.value.checkedKey
+    };
+    checkedPageParams.total = 0;
+    dialog.connctLoading = true;
+    getDevice(para)
+      .then((res) => {
+        console.log('查询已选择设备成功');
+        if (res.code === 200) {
+          debugger;
+          checkedDevices.value = res.rows;
+          checkedPageParams.total = res.total;
+          resolve(res);
+          return;
+        }
+        resolve(null);
+      })
+      .catch((ex) => {
+        resolve(null);
+      })
+      .finally(() => {
+        dialog.connctLoading = false;
+      });
+  });
+};
+
+/** 关闭关联设备的弹窗 */
+const cancelConn = () => {
+  dialog.connectVisible = false;
+};
+const cancelCheck = () => {
+  dialog.checkVisible = false;
+};
+//弹出选择框
+const ShowCheckDevice = (row) => {
+  cEdit = row;
+  dialog.connectVisible = true;
+  searchCheckedDevice();
+};
+const ShowAllDevice = () => {
+  dialog.checkVisible = true;
+
+  searchNoCheckDevice();
+};
+//删除某一个
+const deleteDevice = (row) => {
+  proxy?.$modal.confirm('删除后不可恢复,是否确认选中的的数据项？').then((res) => {
+    // delTerminalDevice(row.tid).then((res) => {
+    //   if (res.code === 200) {
+    //     proxy?.$modal.msgSuccess(res.msg);
+    //     searchCheckedDevice();
+    //   } else {
+    //     proxy?.$modal.alertError('操作失败');
+    //   }
+    // });
+  });
+};
+//删除所选
+const DelChecked = () => {
+  if (!ids.value.length) {
+    proxy?.$modal.msgError('请选择要删除的数据');
+
+    return;
+  }
+
+  let id = ids.value
+    .map((v) => {
+      return v.deviceId;
+    })
+    .join(',');
+
+  proxy?.$modal.confirm('删除后不可恢复,是否确认选中的的数据项？').then((res) => {
+    delTerminalDevice(id).then((res) => {
+      if (res.code === 200) {
+        proxy?.$modal.msgSuccess(res.msg);
+        searchCheckedDevice();
+      } else {
+        proxy?.$modal.alertError('操作失败');
+      }
+    });
+  });
+};
+//选中某一些设备
+const checkedOK = () => {
+  if (!checkNoFlag.value) {
+    if (checkNoDevices.value.length > 0) {
+      let arr = checkNoDevices.value.map((v) => {
+        return { deviceImei: v.deviceImei, typeName: v.typeName, id: v.id };
+      });
+      let data = { sid: cEdit.sid, deviceList: arr };
+      terminalDevice(data).then((res) => {
+        if (res.code === 200) {
+          proxy?.$modal.msgSuccess('操作成功');
+          searchNoCheckDevice();
+          searchCheckedDevice();
+        } else {
+          proxy?.$modal.msgError('操作失败');
+        }
+      });
+    }
+  }
+};
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  serviceFormRef.value?.resetFields();
+};
+
+const TerminalQuery = ref({
+  keywork: ''
+});
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+};
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: ServiceVO[]) => {
+  ids.value = selection;
+  if (selection.length) {
+    multiple.value = false;
+  } else {
+    multiple.value = true;
+  }
+};
+
+const checkNocheckChange = (selection: ServiceVO[]) => {
+  checkNoDevices.value = selection;
+  if (selection.length) {
+    checkNoFlag.value = false;
+  } else {
+    checkNoFlag.value = true;
+  }
+};
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = '添加轨迹服务';
+};
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: ServiceVO) => {
+  reset();
+  const _id = row?.id || ids.value[0];
+  const res = await getService(_id);
+  Object.assign(form.value, res.data);
+  dialog.visible = true;
+  dialog.title = '修改轨迹服务';
+};
+
+/** 提交按钮 */
+const submitForm = () => {
+  serviceFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      if (form.value.id) {
+        await updateService(form.value).finally(() => (buttonLoading.value = false));
+      } else {
+        await addService(form.value).finally(() => (buttonLoading.value = false));
+      }
+      proxy?.$modal.msgSuccess('操作成功');
+      dialog.visible = false;
+      await getList();
+    }
+  });
+};
+
+/** 删除按钮操作 */
+const handleDelete = async (row?: ServiceVO) => {
+  const _ids = row?.id || ids.value;
+  await proxy?.$modal.confirm('是否确认删除轨迹服务编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
+  await delService(_ids);
+  proxy?.$modal.msgSuccess('删除成功');
+  await getList();
+};
+
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    'system/service/export',
+    {
+      ...queryParams.value
+    },
+    `service_${new Date().getTime()}.xlsx`
+  );
+};
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss" scoped>
+.deviceContent {
+  width: 100%;
+  height: 75vh;
+}
+
+.checkdeviceContent {
+  width: 100%;
+  height: 65vh;
+}
+
+.noCheck,
+.checked {
+  width: 100%;
+  height: 100%;
+  /* border: 1px solid #b8b6b6; */
+  border-radius: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+}
+
+.dilogFooter {
+  text-align: center;
+}
+.center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.cell,
+:deep .cell {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:deep .el-checkbox__input.is-disabled .el-checkbox__inner,
+.el-checkbox__input.is-disabled .el-checkbox__inner {
+  background-color: #e5e5e5 !important;
+}
+</style>

src/views/homeIndex/components/AlarmCount.vue

@@ -0,0 +1,187 @@
+<template>
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'
+import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
+
+const chartRef = ref<HTMLDivElement | null>(null);
+let myChart: echarts.ECharts | null = null;
+let dataTimer: NodeJS.Timeout | null = null;
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) return;
+    myChart = echarts.init(chartRef.value);
+    updateChartData();
+    window.addEventListener('resize', handleResize);
+};
+// 更新图表数据
+const updateChartData = () => {
+    if (!myChart) return;
+    getMonthlyAlarmStatistics({}).then((res) => {
+        const monthlyData = res.data.monthlyStatistics || {};
+        // 提取1-12月数据并转为数字
+        const alarmData = [
+            monthlyData.m1,
+            monthlyData.m2,
+            monthlyData.m3,
+            monthlyData.m4,
+            monthlyData.m5,
+            monthlyData.m6,
+            monthlyData.m7,
+            monthlyData.m8,
+            monthlyData.m9,
+            monthlyData.m10,
+            monthlyData.m11,
+            monthlyData.m12
+        ].map(Number);
+
+        const maxValue = Math.max(...alarmData);
+        const maxIndex = alarmData.indexOf(maxValue);
+        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+        const option = {
+            tooltip: {
+                trigger: 'axis',
+            },
+            grid: {
+                left: '5%',
+                right: '5%',
+                bottom: '10%',
+                top: '15%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                data: months,
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.2)'
+                    }
+                },
+                axisLabel: {
+                    color: '#DEEFFF',
+                    fontSize: 12
+                },
+                splitLine: {
+                    show: false
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: {
+                    show: false
+                },
+                axisLabel: {
+                    color: '#DEEFFF',
+                    fontSize: 12,
+                    formatter: '{value}'
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.1)',
+                        type: 'dashed'
+                    }
+                },
+                boundaryGap: [0, '30%']
+            },
+            series: [
+                {
+                    type: 'line',
+                    data: alarmData,
+                    smooth: true,
+                    symbol: 'circle',
+                    symbolSize: 6,
+                    emphasis: {
+                        showSymbol: true,
+                        symbolSize: 8
+                    },
+                    lineStyle: {
+                        color: '#22E1DB',
+                        width: 2
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(34,225,219, 0.6)' },
+                            { offset: 1, color: 'rgba(34,225,219, 0)' }
+                        ])
+                    },
+                    itemStyle: {
+                        color: (params: any) => {
+                           if (params.dataIndex === maxIndex) {
+                                return '#fff'; // 最大值的点标为白色
+                            }
+                            return '#22E1DB';
+                        }
+                    },
+                    label: {
+                        show: (params: any) => params.dataIndex === maxIndex,
+                        position: 'top',
+                        color: '#22E1DB',
+                        formatter: '{c}', // 显示当前数据值
+                        fontSize: 12,
+                    }
+                }
+            ],
+        };
+
+        myChart.setOption(option);
+    }).catch(err => {
+        console.error('获取月度报警统计数据失败:', err);
+    });
+};
+
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+// 开始数据定时器
+const startDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+    }
+    // 每300秒（5分钟
+    dataTimer = setInterval(updateChartData, 300000);
+};
+
+// 清除数据定时器
+const clearDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+        dataTimer = null;
+    }
+};
+
+onMounted(() => {
+    initChart();
+    startDataTimer();
+});
+
+onUnmounted(() => {
+    // 清除定时器
+    clearDataTimer();
+    // 移除事件监听
+    window.removeEventListener('resize', handleResize);
+    // 销毁图表
+    if (myChart) {
+        myChart.dispose();
+        myChart = null;
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 7.4vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 24vh;
+}
+</style>

src/views/homeIndex/components/AlarmEvent.vue

@@ -0,0 +1,144 @@
+<template>
+    <!-- 图表容器，设置宽高 -->
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts'; // 引入 ECharts
+const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
+const echartData = ref<any>({});
+let myChart: echarts.ECharts | null = null; // 保存图表实例
+const props = defineProps({
+    alarmOverview: {
+        type: Object,
+        required: true,
+    },
+});
+
+watch(() => props.alarmOverview, (newVal) => {
+    echartData.value = newVal;
+    console.log('newVal:', newVal);
+}, { immediate: true, deep: true });
+
+onMounted(() => {
+    setTimeout(() => {
+        if (chartRef.value) {
+            const {
+                forcedAlarms,
+                intrusionImpactAlarms,
+                autoAlarms,
+                geoFenceAlarms
+            } = echartData.value;
+            // 初始化 ECharts 实例
+            myChart = echarts.init(chartRef.value);
+            // 配置图表参数
+            const option = {
+                tooltip: {
+                    trigger: 'axis', // 触发方式：坐标轴触发
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '3%',
+                    top: '15%',
+                    containLabel: true, // 网格包含坐标轴标签
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['强制报警', '撞击闯入', '自动报警', '电子围栏告警'], // X 轴类目
+                    axisLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)', // X 轴线颜色
+                        },
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF', // X 轴文字颜色
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLine: {
+                        lineStyle: {
+                            color: '#1e3a8a', // Y 轴线颜色
+                        },
+                    },
+                    axisLabel: {
+                        color: '#DEEFFF', // Y 轴标签文字颜色
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: 'rgba(255, 255, 255, 0.1)', // Y 轴分割
+                            type: 'dashed', // 分割线为虚线
+                        },
+                    },
+                },
+                series: [
+                    {
+                        name: '报警次数',
+                        type: 'bar',
+                        data: [forcedAlarms, intrusionImpactAlarms, autoAlarms, geoFenceAlarms],
+                        barWidth: '20px', // 柱子宽度
+                        // 为不同柱子设置渐变色
+                        itemStyle: {
+                            color: function (params: any) {
+                                const colorList = [
+                                    // 强制报警：蓝色渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#00A8FF' },
+                                    ]),
+                                    // 撞击闯入：黄色渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#E4B90C' },
+                                    ]),
+                                    // 自动报警：青蓝渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#15DBCB' },
+                                    ]),
+                                    // 电子围栏告警：红色渐变
+                                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                        { offset: 0, color: '#0F3352' },
+                                        { offset: 1, color: '#F00C0C' },
+                                    ]),
+                                ];
+                                return colorList[params.dataIndex];
+                            },
+                            borderRadius: 4
+                        },
+                    },
+                ],
+            };
+            // 将配置项设置到图表实例
+            myChart.setOption(option);
+            window.addEventListener('resize', handleResize);
+        }
+    },500)
+
+
+});
+
+// 处理窗口大小变化
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+})
+
+</script>
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 4.8vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 24.5vh;
+}
+</style>

src/views/homeIndex/components/AlarmOverview.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <div class="alarmOvery">
+            <div class="alarm">
+                <div class="alarmIMG">
+                    <div class="alarmNum">{{ alarmOverview.activeAlarms || '0' }} <span>个</span></div>
+                </div>
+                <div class="alarmText">正在报警</div>
+            </div>
+
+            <div class="alarm">
+                <div class="alarmIMG">
+                    <div class="alarmNum">{{ alarmOverview.totalAlarms || '0' }} <span>个</span></div>
+                </div>
+                <div class="alarmText">报警总数</div>
+            </div>
+            <div class="alarm">
+                <div class="alarmIMG">
+                    <div class="alarmNum">{{ alarmOverview.processedAlarms || '0' }} <span>个</span></div>
+                </div>
+                <div class="alarmText">已处理</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+    alarmOverview: {
+        type: Object,
+        required: false,
+        default: () => ({}),
+    },
+});
+
+
+</script>
+<style scoped lang="scss">
+.alarmOvery {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+    margin-top: 7.5vh;
+    text-align: center;
+    font-size: 0.7vw;
+    color: #DEEFFF;
+    padding: 1.5vw;
+}
+
+.alarmIMG {
+    width: 12vh;
+    height: 12vh;
+    background: url(@/assets/homeIndex/alarmIMG.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+}
+
+.alarmText {
+    padding-top: 1.5vh;
+}
+
+.alarmNum {
+    line-height: 12vh;
+    display: inline-block;
+    position: relative;
+    background: radial-gradient(circle at center, #F63838 0%, #FFFFFF 49%);
+    /* 兼容写法 */
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    z-index: 1;
+    overflow: visible;
+    font-size: 1.3vw;
+    font-weight: 600;
+}
+
+.alarmNum span {
+    font-size: 0.6vw;
+}
+</style>

src/views/homeIndex/components/DeviceCategory.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="vchartPage">
+        <div ref="chartRef" class="chartRef"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
+import * as echarts from 'echarts';
+
+const chartRef = ref<HTMLDivElement | null>(null);
+let myChart: echarts.ECharts | null = null; // 保存图表实例
+let dataTimer: NodeJS.Timeout | null = null;
+
+// 更新图表数据
+const updateChartData = () => {
+    if (!myChart) return;
+    
+    getDeviceCommunicationModeStatistics().then((res) => {
+        console.log(res, '接口数据');
+        const dataList = res.data || [];
+        // 1.（通信方式名称）
+        const xAxisData = dataList.map(item => item.communicationModeName);
+        // 2. 总数数据
+        const totalData = dataList.map(item => item.totalDevices);
+        // 3. 异常数数据
+        const abnormalData = dataList.map(item => item.abnormalDevices);
+        // 图表配置）
+        const option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: { type: 'shadow' }
+            },
+            legend: {
+                data: ['总数', '异常'],
+                right: '20px',
+                textStyle: { color: '#DEEFFF' },
+                itemWidth: 12,
+                itemHeight: 12
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                top: '15%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                data: xAxisData,
+                axisLine: {
+                    lineStyle: { color: 'rgba(255,255,255,0.1)' }
+                },
+                axisLabel: {
+                    color: '#DEEFFF'
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { color: '#fff' },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.1)',
+                        type: 'dashed'
+                    }
+                }
+            },
+            series: [
+                {
+                    name: '总数',
+                    type: 'bar',
+                    data: totalData,
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                { offset: 0, color: 'rgba(0,166,255,1)' },
+                                { offset: 1, color: 'rgba(0,125,221, 0.3)' }
+                            ]
+                        ),
+                        borderRadius: 4
+                    },
+                    barWidth: '20px'
+                },
+                {
+                    name: '异常',
+                    type: 'bar',
+                    data: abnormalData,
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                { offset: 0, color: 'rgba(232,69,37,1)' },
+                                { offset: 1, color: 'rgba(240,12,12, 0.3)' }
+                            ]
+                        ),
+                        borderRadius: 4
+                    },
+                    barWidth: '20px'
+                }
+            ]
+        };
+
+        myChart.setOption(option);
+    }).catch(err => {
+        console.log('获取数据失败', err);
+    });
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+
+// 开始数据定时器
+const startDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+    }
+    // 每800秒（8分钟
+    dataTimer = setInterval(updateChartData, 800000);
+};
+
+// 清除数据定时器
+const clearDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+        dataTimer = null;
+    }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) return;
+    myChart = echarts.init(chartRef.value);
+    // 初始加载数据
+    updateChartData();
+    // 启动定时器
+    startDataTimer();
+    // 窗口 resize 时自适应
+    window.addEventListener('resize', handleResize);
+};
+onMounted(() => {
+    initChart();
+});
+onUnmounted(() => {
+    // 清除定时器
+    clearDataTimer();
+    // 移除事件监听
+    window.removeEventListener('resize', handleResize);
+    // 销毁图表实例
+    if (myChart) {
+        myChart.dispose();
+        myChart = null;
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 5.8vh;
+}
+
+.chartRef {
+    width: 100%;
+    height: 23.5vh;
+}
+</style>

src/views/homeIndex/components/DeviceOverview.vue

@@ -0,0 +1,92 @@
+<template>
+    <div>
+        <div class="deviceOvery">
+            <div class="alarm">
+                <div class="deviceIMG">
+                    <div class="deviceNum">{{ DataOverview.totalDevices || '0' }} <span>个</span></div>
+                </div>
+                <div class="deviceText">设备总数</div>
+            </div>
+
+            <div class="alarm">
+                <div class="deviceIMG">
+                    <div class="deviceNum">{{ DataOverview.onlineDevices || '0' }} <span>个</span></div>
+                </div>
+                <div class="deviceText">在线数量</div>
+            </div>
+            <div class="alarm">
+                <div class="deviceIMG">
+                    <div class="deviceNum">{{ DataOverview.deviceTypes || '0' }} <span>种</span></div>
+                </div>
+                <div class="deviceText">设备型号</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { getDeviceOverview } from '@/api/homeIndex'
+const DataOverview = ref<any>({})
+const getData = () => {
+    getDeviceOverview({}).then((res) => {
+        if (res.code == 200) {
+            DataOverview.value = res.data
+        }
+
+    })
+}
+onMounted(() => {
+    getData();
+})
+
+const timerAlarm = setInterval(() => {
+    getData();
+}, 300000);
+onUnmounted(() => {
+    clearInterval(timerAlarm);
+});
+</script>
+<style scoped lang="scss">
+.deviceOvery {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    align-items: center;
+    margin-top: 7.5vh;
+    text-align: center;
+    font-size: 0.7vw;
+    color: #DEEFFF;
+    padding: 1.5vw;
+}
+
+.deviceIMG {
+    width: 12vh;
+    height: 12vh;
+    background: url(@/assets/homeIndex/deviceIMG.png) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+
+}
+
+.deviceText {
+    padding-top: 1.5vh;
+}
+
+.deviceNum {
+    line-height: 12vh;
+    display: inline-block;
+    position: relative;
+    background: radial-gradient(circle at center, #00FCFF 0%, #FFFFFF 49%);
+    /* 兼容写法 */
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    z-index: 1;
+    overflow: visible;
+    font-size: 1.3vw;
+    font-weight: 600;
+}
+
+.deviceNum span {
+    font-size: 0.6vw;
+}
+</style>

src/views/homeIndex/components/DeviceUsage.vue

@@ -0,0 +1,292 @@
+<template>
+    <div class="vchartPage">
+        <div class="btn_mounth_box">
+            <div class="btn_mounth" :class="{ cur: activeTab == 'month' }" @click="switchTab('month')">近一月</div>
+            <div class="btn_mounth" :class="{ cur: activeTab === 'halfYear' }" @click="switchTab('halfYear')">近半年</div>
+        </div>
+        <div ref="chartContainerRef" class="chartContainer" :class="{ 'show-scroll': showScroll }">
+            <div ref="chartRef" class="chartRef"></div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import * as echarts from 'echarts';
+import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
+
+const chartRef = ref<HTMLDivElement | null>(null);
+const chartContainerRef = ref<HTMLDivElement | null>(null);
+const activeTab = ref('month');
+const showScroll = ref(false); // 控制是否显示滚动条
+let myChart: echarts.ECharts | null = null;
+let dataTimer: NodeJS.Timeout | null = null;
+
+// 根据天数获取数据并更新图表
+const fetchDataAndUpdate = (days: number) => {
+    getDeviceUsageFrequency({ days }).then((res) => {
+        if (res.code === 200 && res.data && myChart) {
+            // 模拟数据（根据需求调整数量）
+            const dataCount = activeTab.value === 'month' ? 8 : 25; // 一月8条，半年25条
+            const mockData = Array.from({ length: dataCount }, (_, index) => ({
+                deviceName: `设备${index + 1}`,
+                frequency: Math.floor(Math.random() * 100)
+            }));
+            const chartData = res.data.map(item => ({
+                name: item.deviceName,
+                value: item.frequency
+            }));
+            const scrollThreshold = 20;
+            showScroll.value = chartData.length > scrollThreshold;
+
+            // 动态计算图表高度
+            const baseItemHeight = 20;
+            const minHeight = 200; 
+            const maxHeight = 600; 
+            
+            let chartHeight;
+            if (showScroll.value) {
+
+                chartHeight = Math.min(chartData.length * baseItemHeight, maxHeight);
+            } else {
+                chartHeight = Math.max(chartData.length * baseItemHeight, minHeight);
+            }
+
+            if (chartRef.value) {
+                chartRef.value.style.height = `${chartHeight}px`;
+            }
+
+            // 更新图表
+            myChart.setOption({
+                yAxis: {
+                    data: chartData.map(item => item.name)
+                },
+                series: [{
+                    data: chartData.map(item => item.value)
+                }]
+            });
+            
+            // 数据更新后，重新调整图表尺寸
+            setTimeout(() => {
+                if (myChart) {
+                    myChart.resize();
+                }
+            }, 0);
+        }
+    }).catch(err => {
+        console.error(err);
+    });
+};
+
+// 切换标签逻辑
+const switchTab = (tab: string) => {
+    activeTab.value = tab;
+    const days = tab === 'month' ? 30 : 180;
+    fetchDataAndUpdate(days);
+    startDataTimer();
+
+    // 重置滚动位置
+    if (chartContainerRef.value) {
+        chartContainerRef.value.scrollTop = 10;
+    }
+};
+
+// 开始数据定时器
+const startDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+    }
+    dataTimer = setInterval(() => {
+        const days = activeTab.value === 'month' ? 30 : 180;
+        fetchDataAndUpdate(days);
+    }, 300000);
+};
+
+// 清除数据定时器
+const clearDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+        dataTimer = null;
+    }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) return;
+
+    myChart = echarts.init(chartRef.value);
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' }
+        },
+        grid: {
+            left: '5%',
+            right: '5%',
+            bottom: '2%',
+            top: '12%',
+            containLabel: true
+        },
+        yAxis: {
+            type: 'category',
+            inverse: true, 
+            data: [],
+            axisLine: {
+                lineStyle: {
+                    color: '#1e3a8a',
+                    show: false
+                }
+            },
+            axisLabel: {
+                color: '#DEEFFF',
+                fontSize: 12
+            },
+            axisTick: {
+                alignWithLabel: true
+            }
+        },
+        xAxis: {
+            type: 'value',
+            axisLine: { show: false },
+            axisLabel: { show: false },
+            splitLine: { 
+                show: true,
+                lineStyle: {
+                    color: 'rgba(30, 58, 138, 0.3)',
+                    type: 'dashed'
+                }
+            }
+        },
+        series: [{
+            name: '使用频次',
+            type: 'bar',
+            data: [],
+            barWidth: '12px',
+            stack: 'total',
+            label: {
+                show: true,
+                position: 'right',
+                valueAnimation: true,
+                color: '#DEEFFF',
+                fontSize: 11
+            },
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(
+                    0, 0, 1, 0,
+                    [
+                        { offset: 0, color: '#0768D4' },
+                        { offset: 1, color: '#0EC4DF' }
+                    ]
+                ),
+                borderRadius: 4
+            },
+            barGap: '30%',
+            barCategoryGap: '40%'
+        }]
+    };
+    myChart.setOption(option);
+
+    fetchDataAndUpdate(30);
+    startDataTimer();
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+
+onMounted(() => {
+    initChart();
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    clearDataTimer();
+    window.removeEventListener('resize', handleResize);
+    if (myChart) {
+        myChart.dispose();
+        myChart = null;
+    }
+});
+</script>
+
+<style scoped lang="scss">
+.vchartPage {
+    margin-top: 4.9vh;
+    position: relative;
+    height: 100%;
+}
+
+.btn_mounth_box {
+    display: flex;
+    position: absolute;
+    right: 1vh;
+    top: 0vh;
+    z-index: 1;
+}
+
+.btn_mounth {
+    width: 4.5vw;
+    height: 4.5vh;
+    background: url(@/assets/homeIndex/btn.png) no-repeat;
+    background-size: 100% 100%;
+    text-align: center;
+    line-height: 4.4vh;
+    color: #fff;
+    font-size: 0.8vw;
+    cursor: pointer;
+    margin-left: 0.5vw;
+}
+
+.cur {
+    background: url(@/assets/homeIndex/btn_cur.png) no-repeat;
+    background-size: 100% 100%;
+}
+
+.chartContainer {
+    width: 100%;
+    height: auto;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    position: relative;
+    // margin-top: 2vh;
+    transition: all 0.3s ease;
+
+    // 当需要显示滚动条时的样式
+    &.show-scroll {
+        height: 24vh;
+        overflow-y: auto;
+
+        &::-webkit-scrollbar {
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(7, 104, 212, 0.8);
+            border-radius: 4px;
+            border: 2px solid transparent;
+            background-clip: content-box;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(7, 104, 212, 1);
+        }
+
+        &::-webkit-scrollbar-track {
+            background-color: rgba(30, 58, 138, 0.1);
+            border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-track:hover {
+            background-color: rgba(30, 58, 138, 0.2);
+        }
+    }
+}
+
+.chartRef {
+    width: 100%;
+    min-height: 100px;
+    box-sizing: border-box;
+}
+</style>

src/views/homeIndex/components/MapComponent.vue

@@ -0,0 +1,701 @@
+<template>
+  <div class="content">
+    <div class="map" id="map" v-loading="Status.loading" element-loading-background="#022D51a8"></div>
+    <div class="topTool">
+      <div class="form">
+        <div class="form-item">
+          <div class="vertiLine"></div>
+          <div class="input" @click.stop="showCheck('showCheckGroup')">
+            <div>{{ groupName }}</div>
+            <div class="iconContent">
+              <div class="arrow">
+                <el-icon v-show="!Status.showCheckGroup"><CaretBottom /></el-icon>
+                <el-icon v-show="Status.showCheckGroup"><CaretTop /></el-icon>
+              </div>
+              <div class="clear" @click.stop="search.groupId = ''">
+                <el-icon><CloseBold /></el-icon>
+              </div>
+            </div>
+          </div>
+          <div class="ul" :class="Status.showCheckGroup ? '' : 'displayNone'">
+            <div
+              class="li"
+              @click.stop="checkItem(item, 'groupId')"
+              :class="item.value === search.groupId ? 'active' : ''"
+              v-for="item in groups"
+              :style="{ paddingLeft: `${(item.level - 1) * 16}px` }"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+
+        <div class="form-item">
+          <div class="vertiLine"></div>
+          <div class="input" @click.stop="showCheck('showCheckType')">
+            <div>{{ devType }}</div>
+
+            <div class="iconContent">
+              <div class="arrow">
+                <el-icon v-show="!Status.showCheckType"><CaretBottom /></el-icon>
+                <el-icon v-show="Status.showCheckType"><CaretTop /></el-icon>
+              </div>
+              <div class="clear" @click.stop="search.deviceType = ''">
+                <el-icon><CloseBold /></el-icon>
+              </div>
+            </div>
+          </div>
+          <div class="ul" :class="Status.showCheckType ? '' : 'displayNone'">
+            <div
+              class="li"
+              @click.stop="checkItem(item, 'deviceType')"
+              :class="item.value === search.deviceType ? 'active' : ''"
+              v-for="item in types"
+            >
+              {{ item.label }}
+            </div>
+          </div>
+        </div>
+        <div class="form-item">
+          <div class="vertiLine"></div>
+          <input type="text" class="input" @focus="hideCheck()" v-model="search.deviceImei" placeholder="设备IMEI" />
+        </div>
+        <div class="searchBtn" @click="getPoints()">查询</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import common from '@/utils/common';
+import map from '@/api/largeScreen/mapOpt';
+import request from '@/utils/request';
+
+import mapPoint from '@/assets/images/mapPoint.png';
+import mapWarn from '@/assets/images/mapWarn.png';
+
+var groups = ref([]);
+var types = ref([]);
+
+var search = ref({
+  groupId: '',
+  deviceType: '',
+  deviceImei: ''
+});
+
+var points = ref([]);
+var fens = ref([]);
+var Status = reactive({
+  loading: false,
+  showCheckGroup: false,
+  showCheckType: false
+});
+
+//假数据
+function getFakeData() {
+  return [
+    {
+      'deviceId': 1001,
+      'deviceName': '智能监控设备-01',
+      'longitude': '116.39748',
+      'latitude': '39.90882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5002,
+        'name': '圆形电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 1,
+        'coordinates': [{ 'longitude': '116.39768', 'latitude': '39.89482' }],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1002,
+      'deviceName': '环境监测终端-02',
+      'longitude': '116.41748',
+      'latitude': '39.92882',
+      'isAlarming': false,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1003,
+      'deviceName': '智能停车桩-03',
+      'longitude': '116.43748',
+      'latitude': '39.94882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1004,
+      'deviceName': '智慧路灯-04',
+      'longitude': '116.45748',
+      'latitude': '39.96882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1005,
+      'deviceName': '水质监测仪-05',
+      'longitude': '116.37748',
+      'latitude': '39.88882',
+      'isAlarming': false,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1006,
+      'deviceName': '智能门禁-06',
+      'longitude': '116.35748',
+      'latitude': '39.99882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1007,
+      'deviceName': '消防传感器-07',
+      'longitude': '116.47748',
+      'latitude': '39.87882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1008,
+      'deviceName': '气象站-08',
+      'longitude': '116.49748',
+      'latitude': '39.91882',
+      'isAlarming': false,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1009,
+      'deviceName': '智能垃圾桶-09',
+      'longitude': '116.33748',
+      'latitude': '39.86882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    },
+    {
+      'deviceId': 1010,
+      'deviceName': '充电桩-10',
+      'longitude': '116.31748',
+      'latitude': '39.93882',
+      'isAlarming': true,
+      'fenceInfo': {
+        'id': 5001,
+        'name': '东城区电子围栏',
+        'description': '覆盖东城区主要街道',
+        'areaType': 0,
+        'coordinates': [
+          { 'longitude': '116.38748', 'latitude': '39.91882' },
+          { 'longitude': '116.40748', 'latitude': '39.90882' },
+          { 'longitude': '116.39748', 'latitude': '39.89882' }
+        ],
+        'radius': 500,
+        'isActive': 1
+      }
+    }
+  ];
+}
+
+let time = null;
+function getPoints() {
+  hideCheck();
+  clearTimeout(time);
+  setTimeout(() => {
+    Status.loading = true;
+
+    let promise = request({
+      url:
+        '/api/largeScreen/getDeviceLocationInfo?groupId=' +
+        search.value.groupId +
+        '&deviceType=' +
+        search.value.deviceType +
+        '&deviceImei=' +
+        search.value.deviceImei,
+      method: 'get'
+    });
+
+    // let fakeData = getFakeData();
+    promise
+      .then((res) => {
+        map.clearOverLays();
+        if (res) {
+          if (res.code && res.code == 200) {
+            var array = res.data;
+            // if (!array.length) {
+            //   // ElMessage.error('未查询到任何数据,以下展示假数据,仅供查看效果,正式上线时取消');
+            //   // array = fakeData;
+            //   // return;
+            // }
+            let promise = [];
+            for (let i = 0; i < array.length; i++) {
+              let v = array[i];
+
+              let json = {
+                deviceId: v.deviceId,
+                deviceName: v.deviceName,
+                longitude: v.longitude,
+                latitude: v.latitude,
+                fenceId: null,
+                isAlarming: v.isAlarming
+              };
+
+              if (v.fenceInfo) {
+                fens.value.find((item) => {
+                  return item.id == v.fenceInfo.id;
+                });
+                json.fenceId = v.fenceInfo.id;
+                fens.value.push(v.fenceInfo);
+              }
+              points.value.push(json);
+
+              promise.push(map.AddPoint(json, '', null, null, json.isAlarming ? mapWarn : mapPoint));
+            }
+
+            if (fens.value && fens.value.length > 0) {
+              for (let i = 0; i < fens.value.length; i++) {
+                let f = fens.value[i];
+                if (f.areaType === 0) {
+                  promise.push(map.DrawPoy(f));
+                } else {
+                  promise.push(map.DrawCicle(f, f.radius, null));
+                }
+              }
+            }
+            Promise.allSettled(promise).then((res) => {                                     
+               map.setFitView();               
+            });
+          } else {
+            console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+          }
+        } else {
+          console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+        }
+      })
+      .finally(() => {
+        Status.loading = false;
+      });
+  }, 200);
+}
+
+function getTypes() {
+  let promise = request({
+    url: '/api/deviceType/all',
+    method: 'get'
+  });
+
+  promise.then((res) => {
+    if (res && res.code && res.code == 200) {
+      if (res.data.length) {
+        types.value = res.data.map((v) => {
+          return {
+            value: v.deviceTypeId,
+            label: v.typeName
+          };
+        });
+      } else {
+        for (let i = 0; i < 5; i++) {
+          types.value.push({
+            value: i,
+            label: '类型' + (i + 1)
+          });
+        }
+      }
+    }
+  });
+}
+
+function getGroups() {
+  let promise = request({
+    url: '/api/device/group/list',
+    method: 'get',
+    params: {
+      status: 1,
+      isDeleted: 0,
+      pageNum: 1,
+      pageSize: 9999
+    }
+  });
+
+  let flattenTree = (nodes, currentLevel = 1) => {
+    let result = [];
+
+    nodes.forEach((node) => {
+      // 复制当前节点，添加level字段，移除children属性
+      const { children, ...rest } = node;
+      const nodeWithLevel = {
+        ...rest,
+        level: currentLevel // 添加层级信息
+      };
+
+      // 将当前节点添加到结果数组
+      result.push(nodeWithLevel);
+
+      // 如果有子节点，递归处理并将层级+1
+      if (children && children.length > 0) {
+        result = result.concat(flattenTree(children, currentLevel + 1));
+      }
+    });
+
+    return result;
+  };
+
+  promise.then((res) => {
+    if (res && res.code && res.code == 200) {
+      let arr = res.data;
+      arr = flattenTree(arr);
+      if (arr.length) {
+        groups.value = arr.map((v) => {
+          return {
+            value: v.id,
+            label: v.groupName,
+            level: v.level
+          };
+        });
+      } else {
+        let array = [];
+        for (let i = 0; i < 5; i++) {
+          array.push({
+            value: i,
+            label: '假数据' + (i + 1),
+            level: (i % 3) + 1
+          });
+        }
+
+        groups.value = array;
+      }
+    }
+  });
+}
+
+function checkItem(item, type) {
+  if (search.value[type] === item.value) {
+    return;
+  }
+
+  search.value[type] = item.value;
+  hideCheck();
+}
+
+var groupName = computed(() => {
+  if (search.value.groupId) {
+    let f = groups.value.find((v) => {
+      return v.value === search.value.groupId;
+    });
+
+    if (f) {
+      return f.label;
+    }
+  }
+  return '所属分组';
+});
+
+var devType = computed(() => {
+  if (search.value.deviceType) {
+    let f = types.value.find((v) => {
+      return v.value === search.value.deviceType;
+    });
+
+    if (f) {
+      return f.label;
+    }
+  }
+  return '设备类型';
+});
+
+function hideCheck() {
+  Status.showCheckGroup = false;
+  Status.showCheckType = false;
+}
+
+function showCheck(type) {
+  if (type == 'showCheckGroup') {
+    Status.showCheckType = false;
+  } else {
+    Status.showCheckGroup = false;
+  }
+  Status[type] = !Status[type];
+}
+
+onMounted(() => {
+  map.initMap(hideCheck).then((res) => {
+    getPoints();
+    setInterval(getPoints, 300000);
+  });
+
+  getTypes();
+  getGroups();
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100vw;
+  height: 100vh;
+}
+.el-icon {
+  color: #007eff;
+  font-size: 1vw;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.topTool {
+  position: absolute;
+  width: 100%;
+  height: 45px;
+  z-index: 99;
+
+  background: #00000000;
+  top: 100px;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: flex-start;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.topTool .form-item {
+  width: calc(calc(100% - 160px) / 3);
+  height: 5vh;
+  border: none;
+}
+:deep .el-select__wrapper,
+:deep .el-input__wrapper {
+  border: none;
+  height: 7vh;
+}
+
+:deep .el-select__wrapper,
+:deep .el-input__wrapper,
+.topTool .form-item {
+  background: url(@/assets/homeIndex/select.png) no-repeat;
+}
+.topTool .form {
+  width: 43%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.topTool .searchBtn {
+  background: linear-gradient(to bottom, #006aae2e, #0056b7);
+  font-family: MicrosoftYaHei;
+  font-size: 16px;
+  color: #ddf4ff;
+  line-height: 45px;
+  width: 100px;
+  height: 45px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  text-align: center;
+  border-radius: 34px;
+  cursor: pointer;
+}
+
+.form-item1 {
+  width: 144px;
+  height: 44px;
+  background: linear-gradient(to bottom, #007eff 0%, /* 顶部红色 */ #00efed 48%, /* 中间蓝色 */ #1d5df4 100% /* 底部红色 */);
+
+  opacity: 0.35;
+}
+
+.topTool .form-item {
+  display: flex;
+  position: relative;
+}
+
+.topTool .form-item .input {
+  width: 100%;
+  height: 100%;
+  background-color: #00000000;
+  border: none;
+  box-sizing: border-box;
+  padding: 0px 10px;
+  line-height: 4.5vh;
+  outline: none;
+  font-family: MicrosoftYaHei;
+  font-size: 15px;
+  color: #deefff;
+  width: calc(100% - 6px);
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+
+  justify-content: space-between;
+}
+.topTool .form-item input::placeholder {
+  font-family: MicrosoftYaHei;
+  font-size: 15px;
+  color: #deefff;
+  line-height: 4vh;
+}
+.topTool .form-item input:focus {
+  outline: none;
+  caret-color: #ffffff;
+}
+
+.topTool .form-item .vertiLine {
+  width: 6px;
+  height: 100%;
+  // background: radial-gradient(0% 0% at 0% 0%, #00d6ef 0%, #007eff 100%);
+}
+
+.topTool .form-item .ul {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  top: 100%;
+  left: 0px;
+  min-height: 30px;
+  background: #022e51cc;
+}
+
+.topTool .form-item .li {
+  height: 40px;
+  line-height: 40px;
+  text-indent: 10px;
+  cursor: pointer;
+  font-family: MicrosoftYaHei;
+  font-size: 15px;
+  color: #deefff;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  font-weight: 300;
+  box-sizing: border-box;
+  width: 100%;
+}
+.topTool .form-item .li.active {
+  color: #00fcff;
+}
+
+.topTool .form-item .li:hover {
+  background: #007eff59;
+  color: #00fcff;
+}
+
+.displayNone {
+  display: none !important;
+}
+
+.iconContent:hover .arrow {
+  display: none;
+}
+
+.iconContent .clear {
+  display: none;
+}
+
+.iconContent:hover .clear {
+  display: block;
+}
+</style>

src/views/homeIndex/components/RealTimeAlarm.vue

@@ -0,0 +1,237 @@
+<template>
+    <div class="alarm-table-container">
+        <div class="alarm-table-header">
+            <div class="header-item">报警时间</div>
+            <div class="header-item">设备类型</div>
+            <div class="header-item">设备IMEI</div>
+            <div class="header-item">报警事件</div>
+            <div class="header-item">报警位置</div>
+        </div>
+        <div class="alarm-table-body">
+            <div ref="tableBody" class="alarm-table-body-inner">
+                <div v-for="(item, index) in displayData" :key="`first-${getKey(item, index)}`" class="alarm-item">
+                    <div class="item-cell">{{ item.startTime }}</div>
+                    <div class="item-cell">{{ item.deviceTypeName }}</div>
+                    <div class="item-cell">{{ item.deviceImei }}</div>
+                    <div class="item-cell alarm-event">
+                        {{ getEventName(item.deviceAction) }}
+                    </div>
+                    <div class="item-cell loaction"> {{ item.location && item.location !== '[]' ? item.location : '无' }}</div>
+                </div>
+                <div v-for="(item, index) in displayData" :key="`second-${getKey(item, index)}`" class="alarm-item">
+                    <div class="item-cell">{{ item.startTime }}</div>
+                    <div class="item-cell">{{ item.deviceTypeName }}</div>
+                    <div class="item-cell">{{ item.deviceImei }}</div>
+                    <div class="item-cell alarm-event">
+                        {{ getEventName(item.deviceAction) }}
+                    </div>
+                    <div class="item-cell loaction"> {{ item.location && item.location !== '[]' ? item.location : '无' }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { getRealtimeAlarm } from '@/api/homeIndex/index';
+
+let alarmTimer = null;
+const alarmData = ref([]);
+const displayData = ref([]); // 显示的数据（复制一份用于无缝滚动）
+const tableBody = ref(null);
+const isScrolling = ref(true);
+const animationId = ref(null);
+const scrollPosition = ref(0);
+const itemHeight = ref(0); // 动态计算每个条目的高度
+
+// 获取报警事件名称
+const getEventName = (action) => {
+    const eventMap = {
+        0: '强制报警',
+        1: '撞击闯入',
+        2: '自动报警',
+        3: '电子围栏告警'
+    };
+    return eventMap[action] || '未知报警';
+};
+
+// 获取实时报警数据
+const getRealtimeAlarmData = () => {
+    getRealtimeAlarm().then((res) => {
+        if (res.data && res.data.length > 0) {
+            // 新数据插入到最前面
+            alarmData.value = [...res.data, ...alarmData.value];
+            
+            // 限制数据量，避免性能问题
+            if (alarmData.value.length > 10) {
+                alarmData.value = alarmData.value.slice(0, 10);
+            }
+            // 更新显示数据
+            updateDisplayData();
+            // 新数据插入时重置滚动位置
+            scrollPosition.value = 0;
+            if (tableBody.value) {
+                tableBody.value.style.transform = `translateY(0)`;
+            }
+        }
+    });
+};
+
+// 更新显示数据（复制一份用于无缝滚动）
+const updateDisplayData = () => {
+    displayData.value = [...alarmData.value];
+    // 计算每个条目的实际高度
+    nextTick(() => {
+        const items = document.querySelectorAll('.alarm-item');
+        if (items.length > 0) {
+            itemHeight.value = items[0].offsetHeight;
+        }
+    });
+};
+
+// 生成唯一的key
+const getKey = (item, index) => {
+    return `${item.deviceImei}_${item.startTime}_${index}`;
+};
+
+// 开始滚动动画
+const startScroll = () => {
+    if (!tableBody.value || displayData.value.length === 0) return;
+    stopScroll(); // 先停止之前的动画
+    const scrollSpeed = 0.3; // 滚动速度
+    const animate = () => {
+        if (!isScrolling.value) {
+            animationId.value = requestAnimationFrame(animate);
+            return;
+        }
+        
+        scrollPosition.value += scrollSpeed;
+        
+        // 当滚动超过一份数据的高度时，减去整段高度，实现无缝衔接
+        const oneListHeight = itemHeight.value * displayData.value.length;
+        if (itemHeight.value > 0 && scrollPosition.value >= oneListHeight) {
+            scrollPosition.value -= oneListHeight;
+        }
+        
+        // 应用滚动效果
+        if (tableBody.value) {
+            tableBody.value.style.transform = `translateY(-${scrollPosition.value}px)`;
+        }
+        
+        animationId.value = requestAnimationFrame(animate);
+    };
+    
+    animationId.value = requestAnimationFrame(animate);
+};
+
+// 停止滚动动画
+const stopScroll = () => {
+    if (animationId.value) {
+        cancelAnimationFrame(animationId.value);
+        animationId.value = null;
+    }
+};
+
+// 开始报警定时器
+const startAlarmTimer = () => {
+    if (alarmTimer) {
+        clearInterval(alarmTimer);
+    }
+    getRealtimeAlarmData();
+    alarmTimer = setInterval(getRealtimeAlarmData, 30 * 10000);
+};
+
+// 清除报警定时器
+const clearAlarmTimer = () => {
+    if (alarmTimer) {
+        clearInterval(alarmTimer);
+        alarmTimer = null;
+    }
+};
+
+// 监听数据变化
+watch(displayData, (newData) => {
+    if (newData.length > 0) {
+        // 延迟一点确保DOM已更新
+        setTimeout(() => {
+            startScroll();
+        }, 100);
+    }
+});
+
+onMounted(() => {
+    startAlarmTimer();
+});
+
+onUnmounted(() => {
+    clearAlarmTimer();
+    stopScroll();
+});
+</script>
+
+<style scoped lang="scss">
+.alarm-table-container {
+    width: 100%;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 4vh;
+    padding: 1vw 0vw;
+}
+
+.alarm-table-header {
+    display: flex;
+    color: #00C0FF;
+    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
+    font-size: 0.8vw;
+    background-color: #0C2644;
+}
+
+.header-item {
+    flex: 1;
+    padding: 8px;
+    text-align: center;
+}
+
+.alarm-table-body {
+    height: 18vh;
+    overflow: hidden;
+    color: #fff;
+    position: relative;
+}
+
+.alarm-table-body-inner {
+    transition: none;
+    will-change: transform;
+    transform: translateZ(0);
+    backface-visibility: hidden;
+}
+
+.alarm-item {
+    display: flex;
+    border-bottom: 1px dashed rgba(100, 150, 200, 0.3);
+    font-size: 0.6vw;
+    align-items: center;
+    padding: 0.8vw;
+    height: 7vh;
+    box-sizing: border-box;
+}
+
+.item-cell {
+    flex: 1;
+    text-align: center;
+}
+
+.alarm-event {
+    color: #ff5252;
+}
+
+/* 隐藏滚动条 */
+.alarm-table-body::-webkit-scrollbar {
+    display: none;
+}
+
+.alarm-table-body {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+</style>

src/views/homeIndex/index.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="dashboard-container">
+    <!-- 顶部固定区域 -->
+    <div class="top-fixed">
+      <div class="top-bar">
+        <div class="header-info">
+          <div>{{ currentTime }}</div>
+        </div>
+      </div>
+    </div>
+
+
+    <!-- 全屏地图区域（背景） -->
+    <div class="fullscreen-map">
+      <MapComponent></MapComponent>
+    </div>
+
+    <!-- 悬浮模块容器 -->
+    <div class="floating-modules">
+      <!-- 左侧模块组 -->
+      <div class="left">
+        <div class="left-modules">
+          <div class="module-card overview-card">
+            <!-- <div class="module-header">设备总览</div> -->
+            <div class="module-content">
+              <DeviceOverview />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <!-- <div class="module-header">设备类别</div> -->
+            <div class="module-content">
+              <DeviceCategory />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <!-- <div class="module-header">设备使用频次</div> -->
+            <div class="module-content">
+              <DeviceUsage />
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 右侧模块组 -->
+      <div class="right">
+
+
+        <div class="right-modules">
+          <div class="module-card alarm-card">
+            <!-- <div class="module-header">报警数据</div> -->
+            <div class="module-content">
+              <AlarmOverview :alarmOverview="alarmOverview" />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <!-- <div class="module-header">报警事件</div> -->
+            <div class="module-content">
+              <AlarmEvent :alarmOverview="alarmOverview" />
+            </div>
+          </div>
+
+          <div class="module-card">
+            <!-- <div class="module-header">报警次数</div> -->
+            <div class="module-content">
+              <AlarmCount />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 底部中间模块 -->
+      <div class="bottom">
+        <div class="bottom-middle-module">
+          <div class="module-card realtime-card">
+            <!-- <div class="module-header realtime-header">实时报警信息</div> -->
+            <div class="module-content">
+              <RealTimeAlarm />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getAlarmStatistics } from '@/api/homeIndex'
+import DeviceOverview from './components/DeviceOverview.vue';
+import AlarmOverview from './components/AlarmOverview.vue';
+import DeviceCategory from './components/DeviceCategory.vue';
+import DeviceUsage from './components/DeviceUsage.vue';
+import AlarmEvent from './components/AlarmEvent.vue';
+import AlarmCount from './components/AlarmCount.vue';
+import RealTimeAlarm from './components/RealTimeAlarm.vue';
+import MapComponent from './components/MapComponent.vue';
+const alarmOverview = ref<any>({})
+// 实时时间实现
+const currentDate = ref(new Date());
+// 每秒更新时间
+const timer = setInterval(() => {
+  currentDate.value = new Date();
+}, 1000);
+// 组件卸载时清除定时器
+onUnmounted(() => {
+  clearInterval(timer);
+  clearInterval(timerAlarm);
+});
+
+// 格式化时间
+const currentTime = computed(() => {
+  const now = currentDate.value;
+  return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+});
+// 报警事件是同一个接口，在这里调用，两个子组件直接引入
+const getData = async () => {
+  const res = await getAlarmStatistics({})
+  if (res.code == 200) {
+    alarmOverview.value = res.data
+  }
+}
+
+const timerAlarm = setInterval(() => {
+  getData();
+}, 300000);
+
+getData()
+onMounted(() => {
+
+})
+
+
+</script>
+
+<style scoped>
+.dashboard-container {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.top-fixed {
+  width: 100%;
+  height: 7vh;
+  background: url(@/assets/homeIndex/top.png) no-repeat;
+  background-size: 100% 100%;
+  z-index: 11;
+  position: absolute;
+}
+
+/* 顶部栏 */
+.top-bar {
+  position: relative;
+  z-index: 10;
+  height: 13vh;
+  background: url(@/assets/homeIndex/nav.png) no-repeat;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-size: 100% 100%;
+
+}
+
+.header-info {
+  position: absolute;
+  right: 6vh;
+  top: 3.8vh;
+  color: #fff;
+  font-size: 1.8vh;
+}
+
+/* 全屏地图 */
+.fullscreen-map {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 悬浮模块容器 */
+.floating-modules {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 5;
+  padding: 1.5vw;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+
+.left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 35vw;
+  height: 100vh;
+  background: url(@/assets/homeIndex/left.png) no-repeat;
+  background-size: 100%;
+}
+
+.right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 35vw;
+  height: 100vh;
+  background: url(@/assets/homeIndex/right.png) no-repeat;
+  background-size: 100%;
+}
+
+/* 左侧模块组 */
+.left-modules {
+  position: absolute;
+  top: 8vh;
+  left: 0.5vw;
+  display: flex;
+  flex-direction: column;
+  width: 27.2vw;
+  height: calc(100vh - 8vh);
+  pointer-events: auto;
+
+}
+
+/* 右侧模块组 */
+.right-modules {
+  position: absolute;
+  top: 8vh;
+  right: 0.5vw;
+  display: flex;
+  flex-direction: column;
+  width: 27.2vw;
+  height: calc(100vh - 8vh);
+  pointer-events: auto;
+}
+
+.bottom {
+  position: absolute;
+  bottom: 0.4vw;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 44vw;
+  height: calc(40vh - 7vh);
+  pointer-events: auto;
+  background: url(/src/assets/homeIndex/bottom.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+/* 底部中间模块 */
+.bottom-middle-module {
+  position: absolute;
+  bottom: 0.1vw;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 44vw;
+  height: calc(40vh - 10.5vh);
+  pointer-events: auto;
+}
+
+/* 模块卡片样式 */
+.module-card {
+  /* background: url(@/assets/homeIndex/card.png) no-repeat; */
+  position: relative;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  margin-bottom: 1vh;
+}
+
+.left-modules .module-card:nth-of-type(1) {
+  background: url(@/assets/homeIndex/card1.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.left-modules .module-card:nth-of-type(2) {
+  background: url(@/assets/homeIndex/card2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.left-modules .module-card:nth-of-type(3) {
+  background: url(@/assets/homeIndex/card3.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.right-modules .module-card:nth-of-type(1) {
+  background: url(@/assets/homeIndex/card4.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.right-modules .module-card:nth-of-type(2) {
+  background: url(@/assets/homeIndex/card5.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.right-modules .module-card:nth-of-type(3) {
+  background: url(@/assets/homeIndex/card6.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+.bottom-middle-module .module-card:nth-of-type(1) {
+  background: url(@/assets/homeIndex/card7.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+/* 模块标题 */
+.module-header {
+  position: absolute;
+  font-size: 1.6vh;
+
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  left: 4.8vh;
+  top: 1.5vh;
+  font-family: SourceHanSansCN, SourceHanSansCN;
+  font-weight: 500;
+  /* font-size: 18px; */
+  color: #F2F8FF;
+
+  text-shadow: 3px 0px 6px rgba(3, 33, 42, 0.5);
+
+}
+
+.realtime-header {
+  left: 7.5vh;
+  top: 1.5vh;
+}
+
+/* 模块内容 */
+.module-content {
+  position: relative;
+}
+</style>

src/views/index.vue

@@ -326,7 +326,7 @@ const initAlarmRingChart = async () => {
               },
               textStyle: {
                 color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义）
-                fontSize: 12,     // 文字字号
+                fontSize: 14,     // 文字字号
                 lineHeight: 20    // 文字行高
               }
             },
@@ -338,15 +338,16 @@ const initAlarmRingChart = async () => {
             show: false // 隐藏标签连接线
           },
           data: [
-            {
-              value: processingAlarmToday,
-              name: '报警',
-              itemStyle: { color: '#F65757' } // 红色：未处理
-            },
-            {
-              value: alarmsTotalToday,
+         
+            {  
+              value:processingAlarmToday ,
               name: '已处理',
-              itemStyle: { color: '#07BE75' } // 绿色：已处理
+              itemStyle: { color: '#07BE75' }
+            },
+               {
+              value: alarmsTotalToday,
+              name: '报警',
+              itemStyle: { color: '#F65757' }
             },
 
           ]
@@ -368,7 +369,7 @@ const initAlarmBarChart = () => {
   const alarmTypeMap = [
     { name: '强制报警', field: 'alarmForced' },         // alarmForced 
     { name: '撞击闯入', field: 'intrusionImpact' },     // intrusionImpact 
-    { name: '自动报警', field: 'alarmManual' },          // alarmManual 
+    { name: '自动报警', field: 'alarmAuto' },          // alarmAuto 
     { name: '电子围栏', field: 'fenceElectronic' }       // fenceElectronic 
   ];
 
@@ -506,7 +507,7 @@ onUnmounted(() => {
   alarmRingChartInstance?.dispose();
   //alarmBarChartInstance?.dispose();
   window.removeEventListener('resize', () => { });
-});
+});                    
 </script>
 
 <style lang="scss" scoped>

src/views/largeScreen/index.vue

@@ -0,0 +1,151 @@
+<template>
+  <div class="content">
+    <div class="map" id="map"></div>
+    <div class="topTool">
+      <div class="form">
+        <el-select v-model="search.deviceType" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in dic.types" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+        <el-select v-model="value" placeholder="Select" style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+
+       
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import common from '@/utils/common';
+import map from '@/api/largeScreen/mapOpt';
+import request from '@/utils/request';
+
+var dic = reactive({
+  groups: [],
+  types: [],
+  imeis: []
+});
+
+var search = ref({
+  groupId: '',
+  deviceType: '',
+  deviceImei: ''
+});
+
+var points = ref([]);
+var fens = ref([]);
+
+function getPoints() {
+  let promise = request({
+    url: '/api/largeScreen/getDeviceLocationInfo',
+    method: 'get',
+    params: search
+  });
+
+  promise.then((res) => {
+    if (res) {
+      if (res.code && res.code == 200) {
+        var array = res.data;
+
+        for (let i = 0; i < array.length; i++) {
+          let v = array[i];
+          
+          let json={
+            deviceId: v.deviceId,
+            deviceName: v.deviceName,
+            longitude: v.longitude,
+            latitude: v.latitude,
+            fenceId: null
+          };
+
+          if (v.fenceInfo) {
+            fens.value.find((item) => {
+              return item.id == v.fenceInfo.id;
+            });
+            json.fenceId=v.fenceInfo.id;
+            fens.value.push(v.fenceInfo);
+          }
+          points.value.push(json);
+          
+
+        }
+      } else {
+        console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+      }
+    } else {
+      console.error('接口getDeviceLocationInfo出现了未知的异常', res);
+    }
+  });
+}
+
+function getTypes(){
+  let promise = request({
+    url: '/api/deviceType/all',
+    method: 'get'
+  });
+
+  promise.then(res=>{
+    if(res && res.code && res.code==200){
+      dic.types=res.data.map(v=>{
+        return {
+          value:v.id,
+          label:v.typeName
+        }
+      });
+    }
+  });
+}
+
+function getGroups(){
+  let promise = request({
+    url: '/api/device/group/list',
+    method: 'get',
+    params:{
+      status:1,
+      isDeleted:0,
+      pageNum:1,
+      pageSize:9999
+    }
+  });
+
+  promise.then(res=>{
+    if(res && res.code && res.code==200){
+      dic.groups=res.data;
+    }
+  });
+}
+
+
+
+onMounted(() => {
+  debugger;
+  map.initMap();
+  getTypes();
+  getGroups();
+
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100vw;
+  height: 100vh;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}
+
+.topTool {
+  position: absolute;
+  width: 33%;
+  height: 200px;
+  z-index: 9999999999999999;
+  left: 50%;
+  background: #e2e2e2;
+  top: 100px;
+}
+</style>

src/views/login.vue

@@ -13,13 +13,13 @@
         </el-select>
       </el-form-item>
       <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off"
+        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" name="random-username-field"
           placeholder="账号">
           <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
         </el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off"
+        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" name="random-password-field"
           placeholder="密码" @keyup.enter="handleLogin">
           <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
         </el-input>
@@ -61,9 +61,9 @@ const userStore = useUserStore();
 const router = useRouter();
 
 const loginForm = ref<LoginData>({
-  tenantId: '000000',
-  username: 'admin',
-  password: 'admin123',
+  tenantId: '',
+  username: '',
+  password: '',
   rememberMe: false,
   code: '',
   uuid: ''

src/views/system/dict/index.vue

@@ -43,9 +43,9 @@
               删除
             </el-button>
           </el-col>
-          <el-col :span="1.5">
+          <!-- <el-col :span="1.5">
             <el-button v-hasPermi="['system:dict:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-          </el-col>
+          </el-col> -->
           <el-col :span="1.5">
             <el-button v-hasPermi="['system:dict:remove']" type="danger" plain icon="Refresh" @click="handleRefreshCache">刷新缓存</el-button>
           </el-col>