添加 一个设备的控制面板及一些小优化

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

.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.110.56:8000'
-
+VITE_APP_BASE_API = 'http://192.168.2.34: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_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 = 'production'
 
 # 生产环境配置 富源晟2
 # VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'
 
 # 应用访问路径 晶全1
-VITE_APP_CONTEXT_PATH = '/jingquan/'
+VITE_APP_CONTEXT_PATH = '/PC/'
+
+# 高德地图Key
+VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
 
 # 应用访问路径 富源晟2
 #VITE_APP_CONTEXT_PATH = '/sys/'          
@@ -19,8 +22,10 @@ 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'
+
+# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
 
 # 生产环境 富源晟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>

package.json

@@ -35,11 +35,13 @@
     "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "lamejs": "^1.2.1",
     "mitt": "^3.0.1",
     "nprogress": "0.2.0",
     "paho-mqtt": "^1.1.0",
     "pinia": "3.0.2",
     "qrcode-vue3": "^1.7.1",
+    "recorder-core": "^1.3.25011100",
     "screenfull": "6.0.2",
     "vue": "3.5.13",
     "vue-cropper": "1.1.1",
@@ -72,7 +74,7 @@
     "sass": "1.87.0",
     "terser": "^5.43.1",
     "typescript": "~5.8.3",
-    "unocss": "^66.0.0",
+    "unocss": "^0.58.0",
     "unplugin-auto-import": "19.1.2",
     "unplugin-icons": "22.1.0",
     "unplugin-vue-components": "28.5.0",

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/100J.ts

@@ -0,0 +1,135 @@
+import { param } from '@/utils';
+import request from '@/utils/request';
+
+// 详情信息
+export const deviceDeatil = (id: string) => {
+    return request({
+        url: `/api/hby100j/device/${id}`,
+        method: 'get',
+    });
+};
+// 警示灯爆闪模式
+export const strobeMode = (data: any) => {
+    return request({
+        url: `/api/hby100j/device/strobeMode`,
+        method: 'post',
+        data: data
+    });
+};
+
+
+// 灯光亮度
+function lightModeSettings (data: any) {
+    return request({
+        url: `/api/hby100j/device/lightAdjustment`,
+        method: 'post',
+        data: data
+    });
+};
+//频率调节
+function staticPowerSetting  (data: any)  {
+    return request({
+        url: `/api/hby100j/device/strobeFrequency`,
+        method: 'post',
+        data: data
+    });
+};
+// 修改音量
+function settingUpdateVolume  (data: any)  {
+    return request({
+        url: `/api/hby100j/device/updateVolume`,
+        method: 'post',
+        data: data
+    });       
+};
+
+// 强制报警
+function SosSetting  (data: any) {
+    return request({
+        url: `/api/hby100j/device/forceAlarmActivation`,
+        method: 'post',
+        data: data
+    });
+};
+// 语音列表
+function queryAudioFileList (params: any) {
+    return request({
+        url: `/app/video/queryAudioFileList`,
+        method: 'get',
+       params: params
+    });
+}
+// 提取文本内容
+function extractText (data: any) {
+    return request({
+        url: `/app/video/extract`,
+        method: 'post',
+        data: data
+    });
+}
+// 上传音频文件
+function uploadAudioToOss (data: any) {
+    return request({
+        url: `/app/video/uploadAudioToOss`,
+        method: 'post',
+        data: data
+    });
+}
+// 文本转语音
+export function videTtsToOss(data:any) {
+  return request({
+    url: `/app/video/ttsToOss`,
+    method: 'post',
+	data:data
+  })
+}
+// 重命名
+export function videRenameAudioFile(data:any) {
+  return request({
+    url: `/app/video/renameAudioFile`,
+    method: 'post',
+	data:data
+  })
+}
+// 删除语音文件列表
+export function deviceDeleteAudioFile(params:any) {
+  return request({
+    url: `/app/video/deleteAudioFile`,
+    method: 'get',
+	params:params
+  })
+}
+
+// 更新语音,使用语音
+export function deviceUpdateVoice(data:any) {
+  return request({
+    url: `/app/hby100j/device/updateVoice`,
+    method: 'post',
+	data:data
+  })
+}
+// 语音播放
+export function deviceVoiceBroadcast(data:any) {
+  return request({
+    url: `/app/hby100j/device/voiceBroadcast`,
+    method: 'post',
+	data:data
+  })
+}
+
+export default {
+    deviceDeatil,
+   lightModeSettings:lightModeSettings,
+   SosSetting:SosSetting,
+   staticPowerSetting:staticPowerSetting,
+   settingUpdateVolume:settingUpdateVolume,
+   queryAudioFileList,
+   videRenameAudioFile,
+   deviceDeleteAudioFile,
+   deviceUpdateVoice,
+   videTtsToOss,
+   uploadAudioToOss,
+   extractText,
+   strobeMode,
+   deviceVoiceBroadcast
+};

src/api/controlCenter/controlPanel/670.ts

@@ -26,6 +26,14 @@ function SosSetting  (data: any) {
         data: data
     });
 };
+//批量强制报警
+function SosSettingBatch(data:any){
+     return request({
+        url: `/api/xinghan/device/SOSGradeSettingsBatch`,
+        method: 'post',
+        data: data
+    });
+}
 
 //静电探测档位控制
 function staticPowerSetting  (data: any)  {
@@ -62,5 +70,6 @@ export default {
    SosSetting:SosSetting,
    staticPowerSetting:staticPowerSetting,
    deviceRealTimeStatus:deviceRealTimeStatus,
-   SendMessage:SendMessage
+   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

@@ -1,3 +1,5 @@
+import { string } from "vue-types";
+
 export interface deviceQuery {
   groupId: string;
   pageNum: number;
@@ -36,13 +38,12 @@ export interface DeviceDetail {
   currentLightMode?: string;// 当前选中的灯光模式（如"strong"，对应强光）
   sendMsg: string;
   lightBrightness: string;
-  personnelInfo: {                  // 人员信息（嵌套对象，根据接口调整）
-    unitName: string;           // 单位
-    position: string;       // 职位
-    name: string;           // 姓名
-    code: string;         // ID（身份证/工号）
-  };
-  chargeState: string
+  strobeFrequency: string;
+  volume: string;
+  chargeState: string;
+  alarmStatus: number,
+  voiceStrobeAlarm?:number
+  voiceBroadcast?: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/components/FileUpload/index.vue

@@ -57,9 +57,9 @@ const props = defineProps({
   // 数量限制
   limit: propTypes.number.def(5),
   // 大小限制(MB)
-  fileSize: propTypes.number.def(5),
+  fileSize: propTypes.number.def(200),
   // 文件类型, 例如['png', 'jpg', 'jpeg']
-  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4','ttf']),
   // 是否显示提示
   isShowTip: propTypes.bool.def(true),
   // 禁用组件（仅查看文件）

src/directive/common/copyText.ts

@@ -28,7 +28,6 @@ function copyTextToClipboard(input: string, { target = document.body } = {}) {
   element.value = input;
   // Prevent keyboard from showing on mobile
   element.setAttribute('readonly', '');
-
   element.style.contain = 'strict';
   element.style.position = 'absolute';
   element.style.left = '-9999px';

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)">
+        <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

@@ -17,7 +17,9 @@ export interface SubscribeOptions {
 // 根据当前页面协议自动选择MQTT配置
 const getMqttConfig = () => {
   // 检测当前页面协议（http: 或 https:）
-  const isHttps = window.location.protocol === 'https:';
+  //const isHttps = window.location.protocol === 'https:';
+
+  const isHttps =true;// import.meta.env.VITE_APP_ENV === 'production' || window.location.protocol === 'https:';
     console.log(isHttps,'检测环境');
   
   return {
@@ -220,9 +222,7 @@ export function useMqtt() {
         return;
       }
 
-      const message = new Paho.Message(
-        typeof payload === 'string' ? payload : payload.toString()
-      );
+      const message = new Paho.Message(payload);
 
       message.destinationName = topic;
       message.qos = options.qos;

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/6075J/TextToHex.vue

@@ -0,0 +1,264 @@
+<template>
+	<div class="text-to-hex">
+		<canvas 
+			ref="canvasRef"
+			:width="currentCanvasWidth" 
+			:height="currentCanvasHeight"
+			class="offscreen-canvas"
+		></canvas>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+
+// Props 定义
+const props = defineProps({
+	txts: {
+		type: Array,
+		default: () => [],
+		validator: (value) => value.every(item => typeof item === 'string')
+	},
+	fontSize: {
+		type: Number,
+		default: 16,
+		validator: (value) => value > 0 && value <= 100
+	},
+	bgColor: {
+		type: String,
+		default: "#ffffff"
+	},
+	color: {
+		type: String,
+		default: "#000000"
+	},
+	fontFamily: {
+		type: String,
+		default: "PingFang SC, Microsoft YaHei, Arial, sans-serif"
+	}
+});
+
+// 响应式数据
+const canvasRef = ref(null);
+const currentCanvasWidth = ref(0);
+const currentCanvasHeight = ref(0);
+let ctx = null;
+const canvasWarmed = ref(false);
+
+// 计算属性
+const validTxts = computed(() => {
+	return props.txts.filter(line => line && line.trim() !== '');
+});
+
+// 获取字符实际宽度
+const getCharWidth = (char) => {
+	if (!ctx) return props.fontSize * 0.6;
+	ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+	return ctx.measureText(char).width;
+};
+
+// 计算整行宽度（精确）
+const calcLineWidth = (textLine) => {
+	if (!ctx) return textLine.length * props.fontSize * 0.6;
+	
+	ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+	let totalWidth = 0;
+	for (let i = 0; i < textLine.length; i++) {
+		totalWidth += ctx.measureText(textLine[i]).width;
+	}
+	return Math.ceil(totalWidth);
+};
+
+// 清除Canvas内容
+const clearCanvas = () => {
+	if (!ctx) return;
+	ctx.fillStyle = props.bgColor;
+	ctx.fillRect(0, 0, currentCanvasWidth.value, currentCanvasHeight.value);
+};
+
+// 预热画布
+const warmupCanvas = async () => {
+	if (canvasWarmed.value || !ctx) return;
+	
+	try {
+		currentCanvasWidth.value = 16;
+		currentCanvasHeight.value = 16;
+		
+		clearCanvas();
+		
+		ctx.fillStyle = props.color;
+		ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+		ctx.textBaseline = 'middle';
+		ctx.fillText('测', 0, 8);
+		
+		// 等待字体加载完成
+		await document.fonts.ready;
+		
+		// 获取像素数据验证画布可用
+		const imageData = ctx.getImageData(0, 0, 16, 16);
+		if (imageData) {
+			canvasWarmed.value = true;
+		}
+		
+		// 额外等待确保字体完全渲染
+		await new Promise(resolve => setTimeout(resolve, 100));
+	} catch (ex) {
+		console.log("画布预热异常:", ex);
+		canvasWarmed.value = true;
+	}
+};
+
+// 像素数据转16进制矩阵
+const convertCharToMatrix = (imageData, width, height) => {
+	let matrix = [];
+	const data = imageData.data;
+	
+	// 只处理16x16的字符矩阵
+	for (let y = 0; y < 16; y++) {
+		let byte1 = 0, byte2 = 0;
+		
+		for (let x = 0; x < 16; x++) {
+			// 计算实际像素位置（需要考虑画布可能比16宽）
+			let actualX = Math.floor(x * width / 16);
+			let actualY = Math.floor(y * height / 16);
+			let index = (actualY * width + actualX) * 4;
+			
+			let red = data[index];
+			let green = data[index + 1];
+			let blue = data[index + 2];
+			
+			// 判断是否为非背景色（根据颜色阈值）
+			// let isBlack = !(red > 200 && green > 200 && blue > 200);
+			let gray = (red + green + blue) / 3;
+			let isBlack = gray < 255 ;
+			if (x < 8) {
+				if (isBlack) {
+					byte1 |= 0x80 >> x;
+				}
+			} else {
+				if (isBlack) {
+					byte2 |= 0x80 >> (x - 8);
+				}
+			}
+		}
+		
+		matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
+		matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
+	}
+	
+	return matrix;
+};
+
+// 绘制单个字符并获取像素数据
+const drawChar = async (char) => {
+	return new Promise((resolve, reject) => {
+		try {
+			// 获取字符宽度
+			const charWidth = getCharWidth(char);
+			const canvasWidth = Math.max(16, Math.ceil(charWidth));
+			
+			// 调整画布尺寸
+			currentCanvasWidth.value = canvasWidth;
+			currentCanvasHeight.value = 16;
+			
+			// 重置画布尺寸
+			if (canvasRef.value) {
+				canvasRef.value.width = canvasWidth;
+				canvasRef.value.height = 16;
+			}
+			
+			// 清空画布
+			clearCanvas();
+			
+			// 绘制字符
+			ctx.fillStyle = props.color;
+			ctx.font = `${props.fontSize}px ${props.fontFamily}`;
+			ctx.textBaseline = 'middle';
+			ctx.fillText(char, 0, 8);
+			
+			// 获取像素数据
+			const imageData = ctx.getImageData(0, 0, canvasWidth, 16);
+			
+			resolve({
+				char: char,
+				pixelData: imageData,
+				width: canvasWidth,
+				height: 16
+			});
+		} catch (err) {
+			reject(err);
+		}
+	});
+};
+
+// 绘制文本行并获取所有字符的矩阵数据
+const drawLine = async (textLine) => {
+	const charMatrices = [];
+	
+	for (let i = 0; i < textLine.length; i++) {
+		const char = textLine[i];
+		const result = await drawChar(char);
+		const matrix = convertCharToMatrix(result.pixelData, result.width, result.height);
+		charMatrices.push(matrix);
+	}
+	
+	return charMatrices;
+};
+
+// 主方法：处理所有文本并返回十六进制矩阵数组
+const drawAndGetPixels = async () => {
+	// 确保画布已预热
+	await warmupCanvas();
+	
+	const result = [];
+	
+	for (let i = 0; i < validTxts.value.length; i++) {
+		const line = validTxts.value[i];
+		const lineMatrices = await drawLine(line);
+		result.push(lineMatrices);
+	}
+	
+	return result;
+};
+
+// 获取单个字符的十六进制矩阵（便捷方法）
+const getCharHexMatrix = async (char) => {
+	await warmupCanvas();
+	const result = await drawChar(char);
+	return convertCharToMatrix(result.pixelData, result.width, result.height);
+};
+
+// 获取文本行的十六进制矩阵（便捷方法）
+const getTextLineHexMatrix = async (textLine) => {
+	await warmupCanvas();
+	return await drawLine(textLine);
+};
+
+// 暴露方法给父组件
+defineExpose({
+	drawAndGetPixels,
+	getCharHexMatrix,
+	getTextLineHexMatrix
+});
+
+// 生命周期
+onMounted(() => {
+	if (canvasRef.value) {
+		ctx = canvasRef.value.getContext('2d');
+	}
+});
+</script>
+
+<style scoped>
+.text-to-hex {
+	position: relative;
+}
+
+.offscreen-canvas {
+	position: fixed;
+	left: -9999px;
+	top: -9999px;
+	visibility: hidden;
+	pointer-events: none;
+}
+</style>

src/views/controlCenter/6170/index.vue

@@ -4,17 +4,23 @@
     <div class="header-bar">
       <div>设备名称：{{ deviceDetail.deviceName }}</div>
       <div>设备型号：{{ deviceDetail.deviceImei }}</div>
-            <div class="device-status">设备状态：
+      <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>
-            <div>续航：{{ deviceDetail.batteryRemainingTime || "0" }} 分钟</div>
+      <div>续航：{{ deviceDetail.batteryRemainingTime || '0' }} 分钟</div>
     </div>
 
     <!-- 主体内容区域 -->
     <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">
@@ -22,17 +28,20 @@
             <h4 class="section-title">灯光模式</h4>
             <div class="light-mode">
               <!-- 使用v-for循环渲染灯光模式卡片 -->
-                            <div class="mode-card" :class="{ 'active': mode.active }"
-                                @click.stop="handleModeClick(mode.id)" v-for="mode in lightModes" :key="mode.id">
-                                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
-                                    class="mode-icon" />
+              <div
+                class="mode-card"
+                :class="{ 'active': mode.active }"
+                @click.stop="handleModeClick(mode.id)"
+                v-for="mode in lightModes"
+                :key="mode.id"
+              >
+                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name" class="mode-icon" />
                 <div class="mode-name">{{ mode.name }}</div>
                 <el-switch v-model="mode.switchStatus" />
               </div>
               <!-- 激光模式（单独处理） -->
               <div class="mode-card" :class="{ 'active': laserMode.active }" @click="handleLaserClick">
-                                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon"
-                                    :alt="laserMode.name" class="mode-icon" />
+                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon" :alt="laserMode.name" class="mode-icon" />
                 <div class="mode-name">{{ laserMode.name }}</div>
                 <el-switch v-model="laserMode.switchStatus" />
               </div>
@@ -43,32 +52,43 @@
           <div class="brightness-alarm">
             <div class="brightness-control">
               <span class="brightness-label">灯光亮度</span>
-                            <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100"
-                                :step="1" size="small" />
+              <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100" :step="1" size="small" />
               <span class="brightness-value">%</span>
-                            <el-button type="primary" class="save-btn" @click="saveBtn" :loading="lightModesLoading"
-                                :loading-text="lightModesLoading ? '保存中...' : '保存'"> {{
-                                    lightModesLoading ? '保存中' : '保存' }}</el-button>
+              <el-button
+                type="primary"
+                class="save-btn"
+                @click="saveBtn"
+                :loading="lightModesLoading"
+                :loading-text="lightModesLoading ? '保存中...' : '保存'"
+              >
+                {{ lightModesLoading ? '保存中' : '保存' }}</el-button
+              >
             </div>
-                        <el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading"
-                            :loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
-                                forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
+            <el-button
+              type="danger"
+              class="alarm-btn"
+              @click="forceAlarm"
+              :loading="forceAlarmLoading"
+              :loading-text="forceAlarmLoading ? '解除报警' : '强制报警'"
+            >
+              {{ forceAlarmLoading ? '解除报警' : '强制报警' }}</el-button
+            >
           </div>
           <div class="content-card_gps">
             <h4 class="section-title">位置信息</h4>
             <div class="location-info">
               <div class="location-item">
                 <span class="location-icon"></span>
-                                <span>经纬度 {{ deviceDetail && deviceDetail.longitude ?
-                                    Number(deviceDetail.longitude).toFixed(4) : '无' }}
-                                    {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
-                                        : '无' }} </span>
+                <span
+                  >经纬度 {{ deviceDetail && deviceDetail.longitude ? Number(deviceDetail.longitude).toFixed(4) : '无' }}
+                  {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4) : '无' }}
+                </span>
               </div>
               <div class="location-item">
-
-                                <div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
-                                <el-button link type="primary" class="view-btn"
-                                    @click="lookMap(deviceDetail)">查看</el-button>
+                <div>
+                  地址 <span class="lacatin_gps">{{ deviceDetail.address || '未获取到地址' }}</span>
+                </div>
+                <el-button link type="primary" class="view-btn" @click="lookMap(deviceDetail)">查看</el-button>
               </div>
             </div>
           </div>
@@ -83,27 +103,29 @@
             <div class="form-grid">
               <div class="form-item">
                 <span class="form-label">单位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入单位名称"
-                                    v-model="deviceDetail.personnelInfo.unitName" />
+                <el-input v-if="deviceDetail" placeholder="请输入单位名称" v-model="deviceDetail.personnelInfo.unitName" />
               </div>
               <div class="form-item">
                 <span class="form-label">职位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位名称"
-                                    v-model="deviceDetail.personnelInfo.position" />
+                <el-input v-if="deviceDetail" placeholder="请输入职位名称" v-model="deviceDetail.personnelInfo.position" />
               </div>
               <div class="form-item">
                 <span class="form-label">姓名</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位姓名"
-                                    v-model="deviceDetail.personnelInfo.name" />
+                <el-input v-if="deviceDetail" placeholder="请输入职位姓名" v-model="deviceDetail.personnelInfo.name" />
               </div>
               <div class="form-item">
                 <span class="form-label">ID:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入ID"
-                                    v-model="deviceDetail.personnelInfo.code" />
+                <el-input v-if="deviceDetail" placeholder="请输入ID" v-model="deviceDetail.personnelInfo.code" />
               </div>
-                            <el-button type="primary" class="register-btn" @click="registerPostInit"
-                                :loading="fullscreenLoading" :loading-text="fullscreenLoading ? '登记中...' : '登记'"> {{
-                                    fullscreenLoading ? '登记中' : '登记' }}</el-button>
+              <el-button
+                type="primary"
+                class="register-btn"
+                @click="registerPostInit"
+                :loading="fullscreenLoading"
+                :loading-text="fullscreenLoading ? '登记中...' : '登记'"
+              >
+                {{ fullscreenLoading ? '登记中' : '登记' }}</el-button
+              >
             </div>
           </div>
         </el-col>
@@ -111,26 +133,37 @@
           <div class="content-card">
             <h4 class="section-title">发送信息</h4>
             <div class="message-content">
-                            <el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
-                                v-model="deviceDetail.sendMsg" resize="none" />
-                            <div style="text-align: end;clear: both;">
-                                <el-button type="primary" class="send-btn" @click="sendTextMessage"
-                                    :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
-                                        sendTextLoading ? '发送中' : '发送' }}</el-button>
+              <el-input
+                type="textarea"
+                class="textareaTFT"
+                :rows="4"
+                placeholder="现场危险，停止救援！紧急撤离至安全区域！"
+                v-model="deviceDetail.sendMsg"
+                resize="none"
+              />
+              <div style="text-align: end; clear: both">
+                <el-button
+                  type="primary"
+                  class="send-btn"
+                  @click="sendTextMessage"
+                  :loading="sendTextLoading"
+                  :loading-text="sendTextLoading ? '发送中...' : '发送'"
+                >
+                  {{ sendTextLoading ? '发送中' : '发送' }}</el-button
+                >
               </div>
             </div>
-
           </div>
         </el-col>
       </el-row>
     </div>
     <!-- ===========充电提示框====== -->
     <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
-            <div style="display: flex; align-items: center;">
+      <div style="display: flex; align-items: center">
         <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
       </div>
       <div>请及时充电</div>
-            <span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
+      <span slot="footer" class="dialog-footer" style="text-align: right; display: block">
         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>
@@ -139,7 +172,7 @@
 <script setup name="DeviceControl" lang="ts">
 const route = useRoute();
 import { useMqtt } from '@/utils/mqtt';
-import api from '@/api/controlCenter/controlPanel/index'
+import api from '@/api/controlCenter/controlPanel/index';
 import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
 import { generateShortId, getDeviceStatus } from '@/utils/function';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -157,20 +190,12 @@ import laserLightDefault from '@/assets/images/laser-light.png';
 import laserLightActive from '@/assets/images/laser-light_HL.png';
 import closeDefault from '@/assets/images/close.png';
 import closeActive from '@/assets/images/close_HL.png';
-const fullscreenLoading = ref(false)
-const forceAlarmLoading = ref(false)  //强制报警
-const sendTextLoading = ref(false)
-const lightModesLoading = ref(false)
-const centerDialogVisible = ref(false)
-const {
-    connected,
-    connect,
-    subscribe,
-    onConnect,
-    onError,
-    onMessage,
-    disconnect
-} = useMqtt();
+const fullscreenLoading = ref(false);
+const forceAlarmLoading = ref(false); //强制报警
+const sendTextLoading = ref(false);
+const lightModesLoading = ref(false);
+const centerDialogVisible = ref(false);
+const { connected, connect, subscribe, onConnect, onError, onMessage, disconnect, publish } = useMqtt();
 // 灯光模式数据（引用导入的图片）
 const lightModes = ref<LightMode[]>([
   {
@@ -180,7 +205,7 @@ const lightModes = ref<LightMode[]>([
     activeIcon: strongLightActive,
     switchStatus: true,
     instructValue: '1',
-        active: true,
+    active: true
   },
   {
     id: 'weak',
@@ -189,7 +214,7 @@ const lightModes = ref<LightMode[]>([
     activeIcon: weakLightActive,
     switchStatus: false,
     instructValue: '2',
-        active: false,
+    active: false
   },
   {
     id: 'strobe',
@@ -217,7 +242,7 @@ const lightModes = ref<LightMode[]>([
     switchStatus: false,
     instructValue: '0',
     active: false
-    },
+  }
 ]);
 const laserMode = ref<LightMode>({
   id: 'laser',
@@ -248,7 +273,8 @@ const deviceDetail = ref<DeviceDetail & { typeName: string }>({
   address: '',
   sendMsg: '',
   chargeState: '0',
-    typeName: ''
+  typeName: '',
+  alarmStatus: 0
 });
 // 保留原有的操作中标志位
 const isUpdatingStatus = ref(false);
@@ -257,7 +283,7 @@ const handleModeClick = async (modeId: string) => {
   try {
     const deviceId = route.params.deviceId as string;
     if (!deviceId) return;
-        const targetMode = lightModes.value.find(m => m.id === modeId);
+    const targetMode = lightModes.value.find((m) => m.id === modeId);
     if (!targetMode || !targetMode.instructValue) return;
     // 标记为用户操作中的更新
     isUpdatingStatus.value = true;
@@ -266,7 +292,7 @@ const handleModeClick = async (modeId: string) => {
       deviceId,
       instructValue: targetMode.instructValue,
       deviceImei: deviceDetail.value.deviceImei,
-            typeName: deviceDetail.value.typeName,
+      typeName: deviceDetail.value.typeName
     });
     if (res.code === 200) {
       ElMessage.closeAll();
@@ -274,7 +300,7 @@ const handleModeClick = async (modeId: string) => {
       setActiveLightMode(modeId);
     } else {
       proxy?.$modal.msgError(res.msg);
-            const prevActiveMode = lightModes.value.find(m => m.active);
+      const prevActiveMode = lightModes.value.find((m) => m.active);
       if (prevActiveMode) {
         setActiveLightMode(prevActiveMode.id);
       }
@@ -282,7 +308,7 @@ const handleModeClick = async (modeId: string) => {
   } catch (error) {
     // proxy?.$modal.msgError("操作失败，请稍后重试");
     // 异常时恢复状态
-        const prevActiveMode = lightModes.value.find(m => m.active);
+    const prevActiveMode = lightModes.value.find((m) => m.active);
     if (prevActiveMode) {
       setActiveLightMode(prevActiveMode.id);
     }
@@ -294,7 +320,7 @@ const handleModeClick = async (modeId: string) => {
 const isSyncingStatus = ref(false);
 const setActiveLightMode = (targetModeId: string) => {
   isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
-    lightModes.value.forEach(mode => {
+  lightModes.value.forEach((mode) => {
     const isActive = mode.id === targetModeId;
     mode.active = isActive;
     mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
@@ -317,11 +343,9 @@ const getList = async () => {
       };
     }
     // 1. 匹配接口返回的灯光模式
-        let targetModeId = "strong";
-        const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
-        const matchedMode = lightModes.value.find(
-            mode => mode.instructValue === mainLightMode
-        );
+    let targetModeId = 'strong';
+    const mainLightMode = String(res.data.mainLightMode || '1'); // 接口值转字符串，“强光”
+    const matchedMode = lightModes.value.find((mode) => mode.instructValue === mainLightMode);
     if (matchedMode) {
       targetModeId = matchedMode.id;
     }
@@ -330,8 +354,8 @@ const getList = async () => {
     laserMode.value.active = laserStatus === 1;
     laserMode.value.switchStatus = laserStatus === 1;
   } catch (error) {
-        console.error("获取设备详情失败：", error);
-        setActiveLightMode("strong"); // 异常时默认强光
+    console.error('获取设备详情失败：', error);
+    setActiveLightMode('strong'); // 异常时默认强光
   }
 };
 // 激光接口调用
@@ -357,33 +381,34 @@ 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 { }
+  } finally {
   }
+};
 
 // 人员信息发送
 const registerPostInit = () => {
   if (!deviceDetail.value.personnelInfo.unitName) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('单位名称不能为空');
-        return
+    return;
   }
   if (!deviceDetail.value.personnelInfo.name) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('姓名不能为空');
-        return
+    return;
   }
   if (!deviceDetail.value.personnelInfo.position) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('职位不能为空');
-        return
+    return;
   }
   if (!deviceDetail.value.personnelInfo.code) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('ID不能为空');
-        return
+    return;
   }
   let data = {
     code: deviceDetail.value.personnelInfo.code,
@@ -392,44 +417,41 @@ const registerPostInit = () => {
     unitName: deviceDetail.value.personnelInfo.unitName,
     deviceId: route.params.deviceId,
     deviceImei: deviceDetail.value.deviceImei
-    }
-    fullscreenLoading.value = true
+  };
+  fullscreenLoading.value = true;
   api.registerPersonInfo(data).then((res) => {
     console.log(res, 'res');
     if (res.code === 200) {
-            fullscreenLoading.value = false
+      fullscreenLoading.value = false;
       proxy?.$modal.msgSuccess(res.msg);
     } else {
-            fullscreenLoading.value = false
+      fullscreenLoading.value = false;
       proxy?.$modal.msgError(res.msg);
     }
-    })
-}
+  });
+};
 // 灯光亮度
 const saveBtn = () => {
-    lightModesLoading.value = true
+  lightModesLoading.value = true;
   let data = {
     deviceId: route.params.deviceId,
     instructValue: deviceDetail.value.lightBrightness + '.00',
-        deviceImei: deviceDetail.value.deviceImei,
-    }
+    deviceImei: deviceDetail.value.deviceImei
+  };
   api.lightBrightnessSettings(data).then((res) => {
     if (res.code === 200) {
-            lightModesLoading.value = false
+      lightModesLoading.value = false;
       proxy?.$modal.msgSuccess(res.msg);
-
     } else {
-            lightModesLoading.value = false
-            proxy?.$modal.msgError(res.msg);
+      lightModesLoading.value = false;
+      //proxy?.$modal.msgError(res.msg);
     }
-
-    })
-}
-// 强制报警
-const forceAlarm = async () => {
+  });
+};
+// 解除报警
+const showClose = async () => {
   try {
-        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
-        forceAlarmLoading.value = true
+    await proxy?.$modal.confirm('确定要对该设备解除报警？', '提示');
     // 2. 准备请求数据
     const batchId = generateShortId();
     let data = {
@@ -437,16 +459,26 @@ const forceAlarm = async () => {
       typeName: deviceDetail.value.typeName,
       deviceImeiList: [deviceDetail.value.deviceImei],
       batchId: batchId,
-            instructValue: '1', //强制报警1，解除报警0
-        }
-        const registerRes = await api.sendAlarmMessage(data);
+      instructValue: '0' //强制报警1，解除报警0
+    };
+    let mqsend = () => {
+      let msg = JSON.stringify({ 'instruct': [7, data.instructValue, 0, 0, 0, 0] });
+      publish('B/' + deviceDetail.value.deviceImei, msg, { qos: 0, retained: false });
+      deviceDetail.value.alarmStatus = parseInt(data.instructValue);
+      proxy?.$modal.msgSuccess('操作成功');
+    };
+    await api
+      .sendAlarmMessage(data)
+      .then(async (registerRes) => {
         if (registerRes.code !== 200) {
-            proxy?.$modal.msgWarning(registerRes.msg)
-            return
+          mqsend();
+          return;
         }
+
         // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
-        const statusRes = await getDeviceStatus({
+        let deviceImei = deviceDetail.value.deviceImei;
+        const statusRes = await getDeviceStatus(
+          {
             functionMode: 2,
             batchId,
             typeName: 'FunctionAccessBatchStatusRule',
@@ -458,15 +490,73 @@ const forceAlarm = async () => {
         // 只有当状态为'OK'时才显示成功弹窗
         if (statusRes.data.functionAccess === 'OK') {
           proxy?.$modal.msgSuccess(statusRes.msg);
+          await getList();
         }
+      })
+      .catch((ex) => {
+        mqsend();
+      });
+  } catch (error: any) {}
+};
 
+// 强制报警
+const forceAlarm = async () => {
+  try {
+    let msg = deviceDetail.value.alarmStatus == 1 ? '确定要对该设备解除强制报警？' : '确定要对该设备开启强制报警？';
+    await proxy?.$modal.confirm(msg, '提示');
+    forceAlarmLoading.value = true;
+    // 2. 准备请求数据
+    const batchId = generateShortId();
+    let data = {
+      deviceIds: [route.params.deviceId],
+      typeName: deviceDetail.value.typeName,
+      deviceImeiList: [deviceDetail.value.deviceImei],
+      batchId: batchId,
+      instructValue: deviceDetail.value.alarmStatus == 1 ? '0' : '1' //强制报警1，解除报警0
+    };
+
+    let mqsend = () => {
+      let msg = JSON.stringify({ 'instruct': [7, data.instructValue, 0, 0, 0, 0] });
+      publish('B/' + deviceDetail.value.deviceImei, msg, { qos: 0, retained: false });
+      deviceDetail.value.alarmStatus = parseInt(data.instructValue);
+      proxy?.$modal.msgSuccess('操作成功');
+    };
+    api
+      .sendAlarmMessage(data)
+      .then(async (registerRes) => {
+        if (registerRes.code !== 200) {
+          // proxy?.$modal.msgWarning(registerRes.msg)
+          mqsend();
+          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((ex) => {
+        mqsend();
+      });
   } catch (error: any) {
-        proxy?.$modal.msgWarning(error.msg)
-
+    // proxy?.$modal.msgWarning(error.msg)
+    forceAlarmLoading.value = false;
   } finally {
     forceAlarmLoading.value = false;
   }
-}
+};
 // 发送文本消息
 const sendTextMessage = async () => {
   // 防重复提交
@@ -484,17 +574,18 @@ const sendTextMessage = async () => {
       deviceIds: [route.params.deviceId],
       typeName: deviceDetail.value.typeName,
       batchId: batchId,
-            deviceImeiList: [deviceDetail.value.deviceImei],
+      deviceImeiList: [deviceDetail.value.deviceImei]
     };
     // 3.人员信息
     const registerRes = await api.deviceSendMessage(data);
     if (registerRes.code !== 200) {
-            proxy?.$modal.msgWarning(registerRes.msg)
-            return
+      proxy?.$modal.msgWarning(registerRes.msg);
+      return;
     }
     // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
-        const statusRes = await getDeviceStatus({
+    let deviceImei = deviceDetail.value.deviceImei;
+    const statusRes = await getDeviceStatus(
+      {
         functionMode: 2,
         batchId,
         typeName: 'FunctionAccessBatchStatusRule',
@@ -508,11 +599,11 @@ const sendTextMessage = async () => {
       proxy?.$modal.msgSuccess(statusRes.msg);
     }
   } catch (error: any) {
-        proxy?.$modal.msgWarning(error.msg)
+    proxy?.$modal.msgWarning(error.msg);
   } finally {
     sendTextLoading.value = false;
   }
-}
+};
 const lookMap = (row: any) => {
   console.log(row, 'row');
   router.push({
@@ -522,7 +613,7 @@ const lookMap = (row: any) => {
       deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
     }
   });
-}
+};
 const getMainLightModeLabel = (mode: any) => {
   const modeMap = {
     0: 'close', // 0 → 关闭
@@ -530,29 +621,34 @@ const getMainLightModeLabel = (mode: any) => {
     2: 'weak', // 2 → 弱光
     3: 'strobe', // 3 → 爆闪
     4: 'flood' // 4 → 泛光
-    }
+  };
   return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
-}
+};
 // 处理设备消息
 const handleDeviceMessage = (msg: any) => {
   try {
-        // 解析设备消息（假设格式为 { state: [类型, 模式值, 亮度, 续航...] }）
     const payloadObj = JSON.parse(msg.payload.toString());
+    if ('sta_BreakNews' in payloadObj) {
+      console.error('收到确认消息');
+      if (payloadObj.sta_BreakNews == 'I get it') {
+        proxy?.$modal.msgSuccess("用户已确认收到消息");
+      }
+      return;
+    }
     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 });
         // 1. 同步灯光模式状态
         if (lightModeId !== 'unknown') {
-                    lightModes.value.forEach(mode => {
+          lightModes.value.forEach((mode) => {
             const isActive = mode.id === lightModeId;
             mode.active = isActive;
             mode.switchStatus = isActive;
@@ -567,11 +663,12 @@ const handleDeviceMessage = (msg: any) => {
           deviceDetail.value.batteryRemainingTime = batteryTime.toString();
         }
         break;
+
       case 12:
         // 灯光主键
-                const lightModeIdA = getMainLightModeLabel(deviceState[1]); // 获取模式ID（如'strong'）
+        const lightModeIdA = getMainLightModeLabel(deviceState[1]);
         if (lightModeIdA !== 'unknown') {
-                    lightModes.value.forEach(mode => {
+          lightModes.value.forEach((mode) => {
             const isActive = mode.id === lightModeIdA;
             mode.active = isActive;
             mode.switchStatus = isActive;
@@ -586,19 +683,21 @@ 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;
     }
-    } catch (e) {
-    }
+  } catch (e) {}
 };
 onMounted(async () => {
-    await getList(); // 先获取设备信息
+  await getList();
   // 连接mqtt
   onConnect(async () => {
     const deviceImei = deviceDetail.value.deviceImei;
@@ -624,7 +723,7 @@ onMounted(async () => {
     handleDeviceMessage(msg);
   });
   onError((err) => {
-        console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
+    console.error('MQTT连接失败原因:', err.message);
   });
   connect();
 });
@@ -635,9 +734,15 @@ onUnmounted(() => {
     disconnect(); // 调用断开连接方法
   }
 });
-
 </script>
 <style lang="scss" scoped>
+.p-2 {
+  background: rgba(247, 248, 252, 1);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
 .device-page {
   .header-bar {
     border-radius: 8px;
@@ -683,7 +788,6 @@ onUnmounted(() => {
       padding: 0px 20px 50px;
       border: 1px solid #ebeef5;
       height: 78%;
-
     }
 
     .section-title {
@@ -742,8 +846,6 @@ onUnmounted(() => {
         --el-switch-on-color: #409eff;
         --el-switch-off-color: #dcdfe6;
       }
-
-
     }
 
     .brightness-alarm {
@@ -779,7 +881,7 @@ onUnmounted(() => {
           padding: 6px 20px;
           border-radius: 29px;
           background: rgba(2, 124, 251, 1);
-                    border: none
+          border: none;
         }
 
         .inputTFT {
@@ -850,7 +952,7 @@ onUnmounted(() => {
         bottom: 30px;
         border-radius: 29px;
         background: rgba(2, 124, 251, 1);
-                border: none
+        border: none;
       }
     }
 
@@ -878,7 +980,6 @@ onUnmounted(() => {
         background: rgba(2, 124, 251, 1);
         border: none;
         margin: 20px 0px 30px 0;
-
       }
     }
 
@@ -942,4 +1043,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>