diff --git a/src/assets/images/haiba.png b/src/assets/images/haiba.png
new file mode 100644
index 0000000..678919f
Binary files /dev/null and b/src/assets/images/haiba.png differ
diff --git a/src/assets/images/haibaRelative.png b/src/assets/images/haibaRelative.png
new file mode 100644
index 0000000..383b317
Binary files /dev/null and b/src/assets/images/haibaRelative.png differ
diff --git a/src/assets/images/jieN.png b/src/assets/images/jieN.png
new file mode 100644
index 0000000..07022cc
Binary files /dev/null and b/src/assets/images/jieN.png differ
diff --git a/src/assets/images/jieN_HL.png b/src/assets/images/jieN_HL.png
new file mode 100644
index 0000000..c21de9a
Binary files /dev/null and b/src/assets/images/jieN_HL.png differ
diff --git a/src/assets/images/location.png b/src/assets/images/location.png
new file mode 100644
index 0000000..404ba84
Binary files /dev/null and b/src/assets/images/location.png differ
diff --git a/src/assets/images/lonlat.png b/src/assets/images/lonlat.png
new file mode 100644
index 0000000..af5af01
Binary files /dev/null and b/src/assets/images/lonlat.png differ
diff --git a/src/assets/images/sgWarn.png b/src/assets/images/sgWarn.png
new file mode 100644
index 0000000..c46b958
Binary files /dev/null and b/src/assets/images/sgWarn.png differ
diff --git a/src/assets/images/sos.png b/src/assets/images/sos.png
new file mode 100644
index 0000000..56033d6
Binary files /dev/null and b/src/assets/images/sos.png differ
diff --git a/src/assets/images/sos_HL.png b/src/assets/images/sos_HL.png
new file mode 100644
index 0000000..37f58c2
Binary files /dev/null and b/src/assets/images/sos_HL.png differ
diff --git a/src/assets/images/superStrong.png b/src/assets/images/superStrong.png
new file mode 100644
index 0000000..2808612
Binary files /dev/null and b/src/assets/images/superStrong.png differ
diff --git a/src/assets/images/superStrong_HL.png b/src/assets/images/superStrong_HL.png
new file mode 100644
index 0000000..1dfab9e
Binary files /dev/null and b/src/assets/images/superStrong_HL.png differ
diff --git a/src/assets/images/work.png b/src/assets/images/work.png
new file mode 100644
index 0000000..994323a
Binary files /dev/null and b/src/assets/images/work.png differ
diff --git a/src/assets/images/work_HL.png b/src/assets/images/work_HL.png
new file mode 100644
index 0000000..e9578b2
Binary files /dev/null and b/src/assets/images/work_HL.png differ
diff --git a/src/components/FileUpload/index.vue b/src/components/FileUpload/index.vue
index 02fc51c..7cda1ba 100644
--- a/src/components/FileUpload/index.vue
+++ b/src/components/FileUpload/index.vue
@@ -59,7 +59,7 @@ const props = defineProps({
   // 大小限制(MB)
   fileSize: propTypes.number.def(200),
   // 文件类型, 例如['png', 'jpg', 'jpeg']
-  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4']),
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4','ttf']),
   // 是否显示提示
   isShowTip: propTypes.bool.def(true),
   // 禁用组件（仅查看文件）
diff --git a/src/utils/mqtt.ts b/src/utils/mqtt.ts
index 13febdd..5a5bfad 100644
--- a/src/utils/mqtt.ts
+++ b/src/utils/mqtt.ts
@@ -19,7 +19,7 @@ const getMqttConfig = () => {
   // 检测当前页面协议（http: 或 https:）
   //const isHttps = window.location.protocol === 'https:';
 
-  const isHttps = import.meta.env.VITE_APP_ENV === 'production' || window.location.protocol === 'https:';
+  const isHttps =true;// import.meta.env.VITE_APP_ENV === 'production' || window.location.protocol === 'https:';
     console.log(isHttps,'检测环境');
   
   return {
@@ -222,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;
diff --git a/src/views/controlCenter/6075J/TextToHex.vue b/src/views/controlCenter/6075J/TextToHex.vue
new file mode 100644
index 0000000..a14dc5e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/controlCenter/6075J/index.vue b/src/views/controlCenter/6075J/index.vue
new file mode 100644
index 0000000..42c132f
--- /dev/null
+++ b/src/views/controlCenter/6075J/index.vue
@@ -0,0 +1,1594 @@
+<template>
+  <div class="device-page p-2">
+    <!-- 头部信息栏 -->
+    <div class="header-bar">
+      <div>设备名称：{{ deviceDetail.deviceName }}，IMEI:{{ deviceDetail.deviceImei }}</div>
+      <div>设备型号：{{ deviceDetail.typeName }}</div>
+      <div class="device-status">
+        设备状态：
+        <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
+          {{ deviceDetail.onlineStatus === 1 ? '在线' : '离线' }}
+        </span>
+      </div>
+      <div>电量：{{ Status.staPowerPercent ? Status.staPowerPercent : deviceDetail.staPowerPercent || 0 }}%</div>
+      <div>续航：{{ Status.powerTime }}</div>
+    </div>
+
+    <div class="leftContent fleft">
+      <div class="row card mainLight padding">
+        <div class="title">主光模式</div>
+        <div class="lightFlex">
+          <div class="lightItem" :class="{ active: item.checked }" v-for="(item, index) in dic.main" @click="sendMode(item, index, 'main')">
+            <div class="imgContent">
+              <div v-show="!item.checked" class="img" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+              <div v-show="item.checked" class="img" :style="{ backgroundImage: `url(${item.iconAc})` }"></div>
+              <div class="imgTxt">{{ item.text }}</div>
+            </div>
+
+            <el-switch v-model="item.checked" size="large" active-text="开" inactive-text="关" inline-prompt />
+          </div>
+        </div>
+      </div>
+      <div class="row fuLight">
+        <div class="fleft card light padding">
+          <div class="title">辅光模式</div>
+          <div class="lightFlex">
+            <div class="lightItem" :class="{ active: item.checked }" v-for="(item, index) in dic.fu" @click="sendMode(item, index, 'fu')">
+              <div class="imgContent">
+                <div v-show="!item.checked" class="img" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+                <div v-show="item.checked" class="img" :style="{ backgroundImage: `url(${item.iconAc})` }"></div>
+
+                <div class="imgTxt">{{ item.text }}</div>
+              </div>
+
+              <el-switch v-model="item.checked" size="large" active-text="开" inactive-text="关" inline-prompt />
+            </div>
+          </div>
+        </div>
+        <div class="fleft card sos padding">
+          <div class="title"></div>
+          <div class="lightFlex" style="justify-content: space-around">
+            <div class="lightItem" :class="{ active: item.checked }" v-for="(item, index) in dic.sos" @click="sendMode(item, index, 'sos')">
+              <div class="imgContent">
+                <div v-show="!item.checked" class="img" :style="{ backgroundImage: `url(${item.icon})` }"></div>
+                <div v-show="item.checked" class="img" :style="{ backgroundImage: `url(${item.iconAc})` }"></div>
+
+                <div class="imgTxt">{{ item.text }}</div>
+              </div>
+
+              <el-switch v-model="item.checked" size="large" active-text="开" inactive-text="关" inline-prompt />
+            </div>
+          </div>
+        </div>
+        <div class="clear"></div>
+      </div>
+      <div class="row card usr padding">
+        <div class="title">人员信息登记</div>
+        <div class="form-grid">
+          <div class="form-item">
+            <span class="form-label">单位:</span>
+            <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" />
+          </div>
+          <div class="form-item">
+            <span class="form-label">姓名:</span>
+            <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" />
+          </div>
+        </div>
+        <el-button type="primary" class="register-btn fright" @click="sendUsr">登记</el-button>
+      </div>
+    </div>
+    <div class="rightContent fleft">
+      <div class="liangdu">
+        <div class="leftsett">
+          <div class="rmkLiangdu">灯光亮度</div>
+          <input type="number" class="txtLiangdu" max="100" min="1" v-model="formData.ins_brightness" />
+          <div>%</div>
+        </div>
+
+        <el-button type="primary" class="register-btn fright" @click="setBrightness">保存</el-button>
+      </div>
+      <div class="location padding">
+        <div class="title">位置信息</div>
+        <div class="mylocation">
+          <div class="icoRemark"><img src="@/assets/images/lonlat.png" />经纬度</div>
+          <div class="lonlat">
+            <div>{{ deviceDetail.longitude }}</div>
+            <div>{{ deviceDetail.latitude }}</div>
+          </div>
+          <div class="icoRemark"><img src="@/assets/images/location.png" />地址</div>
+          <div class="addressLink">
+            <div class="addrss">{{ currStatu.address ? currStatu.address : deviceDetail.address }}</div>
+            <div class="link">查看</div>
+          </div>
+        </div>
+        <div class="title">高度信息</div>
+        <div class="height mylocation">
+          <div class="icoRemark"><img src="@/assets/images/haiba.png" />海拔高度</div>
+          <div class="haiba">{{currStatu.sta_Height}}</div>
+          <div class="icoRemark"><img src="@/assets/images/haibaRelative.png" />相对高度</div>
+          <div class="haiba">{{currStatu.sta_reHeight}}</div>
+        </div>
+      </div>
+      <div class="msg padding" >
+        <div class="title">发送信息</div>
+        <div class="form-grid">
+          <textarea class="textarea" maxlength="16" v-model="formData.sendMsg"></textarea>
+        </div>
+        <el-button type="primary" class="register-btn fright" @click="sendMsg" :loading="Status.msgLoading">发送</el-button>
+      </div>
+    </div>
+    <div class="clear"></div>
+    <!-- 提示框 -->
+    <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
+      <span>
+        {{ Status.confirm.text }}
+      </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="Status.confirm.OkCallback">{{ Status.confirm.OkTxt || '确定' }} </el-button>
+          <el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">{{ Status.confirm.cancelTxt || '取消' }}</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <TextToHex ref="textToHex" :txts="formData.textLines" :fontSize="16" />
+  </div>
+</template>
+<script setup name="DeviceControl" lang="ts">
+const route = useRoute();
+import TextToHex from './TextToHex.vue';
+import { useMqtt } from '@/utils/mqtt';
+import api from '@/api/controlCenter/controlPanel/670';
+import { object } from 'vue-types';
+import request from '@/utils/request';
+import { status } from 'nprogress';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { connected, connect, subscribe, onConnect, onError, onMessage, disconnect, publish } = useMqtt();
+const mapApiKey = import.meta.env.VITE_AMAP_WebApi_KEY;
+const textToHex = ref(null);
+
+const deviceDetail = ref<any>({
+  'deviceId': null,
+  'deviceName': null,
+  'deviceImei': null,
+  'deviceMac': null,
+  'communicationMode': null,
+  'devicePic': null,
+  'typeName': null,
+  'bluetoothName': null,
+  'deviceStatus': null,
+  'personnelInfo': {
+    'id': null,
+    'deviceId': null,
+    'name': null,
+    'position': null,
+    'unitName': null,
+    'code': null
+  },
+  'onlineStatus': null,
+  'longitude': null,
+  'latitude': null,
+  'address': null,
+  'staDetectGrade': null,
+  'staLightGrade': null,
+  'staSOSGrade': null,
+  'staPowerTime': null,
+  'staPowerPercent': null,
+  'staDetectResult': null,
+  'sendMsg': null,
+  'sta_ShakeBit': null
+});
+
+const Status = reactive<any>({
+  powerTime: null,
+  confirm: {
+    //弹出框的配置
+    Visible: false,
+    title: '',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: true,
+    OkTxt: '',
+    cancelTxt: '',
+    msgLoading:false
+  }
+});
+
+const getList = () => {
+  api
+    .deviceRealTimeStatus(route.params.deviceId)
+    .then((res) => {
+      if (res && res.code == 200) {
+        let keys = Object.keys(res.data);
+        keys.forEach((key) => {
+          deviceDetail.value[key] = res.data[key];
+        });
+
+        if (!deviceDetail.value.personnelInfo) {
+          deviceDetail.value.personnelInfo = {
+            'id': null,
+            'deviceId': null,
+            'name': null,
+            'position': null,
+            'unitName': null,
+            'code': null
+          };
+        }
+      }
+    })
+    .catch((ex) => {
+      console.error('出现异常', ex);
+    });
+};
+
+var dic = reactive<any>({
+  mainClose: 6,
+  fuClose: 5,
+
+  main: [
+    {
+      text: '强光',
+      icon: 'strong-light.png',
+      iconAc: 'strong-light_HL.png',
+      value: 1,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    // {
+    //   text: '超强光',
+    //   icon: 'superStrong.png',
+    //   iconAc: 'superStrong_HL.png',
+    //   value: 7,
+    //   key: 'ins_LightGrade',
+    //   checked: false
+    // },
+    {
+      text: '工作光',
+      icon: 'work.png',
+      iconAc: 'work_HL.png',
+      value: 2,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    {
+      text: '节能光',
+      icon: 'jieN.png',
+      iconAc: 'jieN_HL.png',
+      value: 3,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    {
+      text: '爆闪',
+      icon: 'strobe-light.png',
+      iconAc: 'strobe-light_HL.png',
+      value: 4,
+      key: 'ins_LightGrade',
+      checked: false
+    },
+    {
+      text: 'SOS',
+      icon: 'sos.png',
+      iconAc: 'sos_HL.png',
+      value: 5,
+      key: 'ins_LightGrade',
+      checked: false
+    }
+    // ,
+    // {
+    //   text: '关闭',
+    //   icon: 'close.png',
+    //   iconAc: 'close_HL.png',
+    //   value: '6',
+    //   key: 'ins_LightGrade',
+    //   checked: false
+    // }
+  ],
+  fu: [
+    {
+      text: '泛光',
+      icon: 'weak-light.png',
+      iconAc: 'weak-light_HL.png',
+      value: 2,
+      key: 'ins_Side_Light',
+      checked: false
+    },
+    {
+      text: '泛光爆闪',
+      icon: 'weak-light.png',
+      iconAc: 'weak-light_HL.png',
+      value: 3,
+      key: 'ins_Side_Light',
+      checked: false
+    },
+    {
+      text: '警示灯',
+      icon: 'hb.png',
+      iconAc: 'hbAc.png',
+      value: 1,
+      key: 'ins_Side_Light',
+      checked: false
+    },
+    {
+      text: '警示灯/泛光',
+      icon: 'hb.png',
+      iconAc: 'hbAc.png',
+      value: 4,
+      key: 'ins_Side_Light',
+      checked: false
+    } //,
+    // {
+    //   text: '关闭',
+    //     icon: 'close.png',
+    //   iconAc: 'close_HL.png',
+    //   value: '5',
+    //   key: 'ins_Side_Light'
+    // }
+  ],
+  sos: [
+    {
+      text: '激光模式',
+      icon: 'laser-light.png',
+      iconAc: 'laser-light_HL.png',
+      value: 1,
+      closeVal: 0,
+      key: 'ins_laser',
+      checked: false
+    },
+    {
+      text: '声光报警',
+      icon: 'hb.png',
+      iconAc: 'hbAc.png',
+      value: 1,
+      closeVal: 0,
+      key: 'ins_ShakeBit',
+      checked: false
+    }
+  ]
+});
+
+var formData = reactive<any>({
+  ins_brightness: null,
+  textLines: ['湖北星汉文化', '有限', '公司', '胡红军'],
+  sendMsg: '湖北星汉文化有限公司'
+});
+
+var currStatu = reactive<any>({
+  'sta_LightGrade': null, // 主灯档位：null=未设置，1=强光，2=工作光，3=节能光，4=爆闪，5=SOS，6=关闭
+  'sta_Side_Light': null, // 副灯档位：1=两侧红蓝警示，2=泛光长亮，3=泛光爆闪，4=红蓝警示与泛光同步开启，5=关闭所有
+  'sta_PowerTime': null, // 剩余工作时间，单位分钟，范围0-5999
+  'sta_PowerPercent': null, // 剩余电量百分比，范围0-100
+  'sta_ShakeBit': null, // 报警状态：0=未报警，1=正在报警
+  'sta_4gSinal': null, // 4G信号强度，范围0-32，数值越大信号越强
+  'sta_imei': null, // IMEI卡号
+  'sta_longitude': null, // 经度
+  'sta_latitude': null, // 纬度
+  'sta_system': null, // 设备现状：0=关机，1=仅充电，2=开机未充电，3=开机且充电
+  'sta_laser': null, // 激光：0=关闭，1=开启
+  'sta_address': null, // 蓝牙MAC地址，String类型，冒号可有可无
+  'sta_brightness': null, // 亮度，范围1-100
+  'sta_SOSGrade': null, // SOS档位：0=关闭，1=单色爆闪模式，2=红蓝模式
+  'sta_Heat': null, // 温度，单位摄氏度
+  'sta_Height': null, // 海拔，单位米
+  'sta_reHeight':null,//相对海拔
+  address: '',
+  sta_BreakNews:null
+});
+
+function getImageUrl(fileName) {
+  let img = new URL(`/src/assets/images/${fileName}`, import.meta.url);
+
+  return img.href;
+}
+
+function dicImgHandle() {
+  let keys = Object.keys(dic);
+  keys.forEach((key) => {
+    if (dic[key] instanceof Array) {
+      dic[key].forEach((el) => {
+        el.icon = getImageUrl(el.icon);
+        el.iconAc = getImageUrl(el.iconAc);
+      });
+    }
+  });
+}
+function sendMode(item, index, type) {
+  let flag = !dic[type][index].checked;
+  let json = {};
+  if (type == 'sos') {
+    dic.sos[index].checked = flag;
+    if (flag) {
+      json[item.key] = 1;
+    } else {
+      json[item.key] = 0;
+    }
+  } else {
+    dic[type].forEach((el, i) => {
+      if (i == index) {
+        el.checked = flag;
+      } else {
+        el.checked = false;
+      }
+    });
+
+    if (flag) {
+      json[item.key] = item.value;
+    } else {
+      json[item.key] = dic[type + 'Close'];
+    }
+  }
+
+  sendCmd(json);
+}
+
+function setBrightness() {
+  let json = { ins_brightness: formData.ins_brightness };
+  sendCmd(json);
+}
+
+function sendCmd(json, isBuffer) {
+  if (isBuffer) {
+    let buffer = new ArrayBuffer(json.length);
+
+    let view = new DataView(buffer);
+    for (let i = 0; i < json.length; i++) {
+      const el = json[i];
+      view.setUint8(i, el);
+    }
+
+    json = buffer;
+  } else if (json instanceof Object) {
+    json = JSON.stringify(json);
+  }
+
+  return publish('B/' + deviceDetail.value.deviceImei, json, { qos: 0, retained: false });
+}
+
+function handleDeviceMessage(payload) {
+  console.log('payload=', payload);
+
+  if (!(payload instanceof object)) {
+    payload = JSON.parse(payload);
+  }
+
+  let keys = Object.keys(payload);
+
+  for (let i = 0; i < keys.length; i++) {
+    let key = keys[i];
+    currStatu[key] = payload[key];
+  }
+
+  //修改主灯模式
+  let index = null;
+  dic.main.find((v, i) => {
+    if (v.value == currStatu.sta_LightGrade) {
+      index = i;
+      return true;
+    }
+  });
+  for (let i = 0; i < dic.main.length; i++) {
+    if (i == index) {
+      dic.main[i].checked = true;
+      continue;
+    }
+    dic.main[i].checked = false;
+  }
+
+  dic.fu.find((v, i) => {
+    if (v.value == currStatu.sta_Side_Light) {
+      index = i;
+      return true;
+    }
+  });
+  for (let i = 0; i < dic.fu.length; i++) {
+    if (i == index) {
+      dic.fu[i].checked = true;
+      continue;
+    }
+    dic.fu[i].checked = false;
+  }
+
+  dic.sos[0] = currStatu.sta_laser;
+  dic.sos[1] = currStatu.sta_ShakeBit;
+}
+
+watch(()=>currStatu.sta_BreakNews,(newVal,oldVal)=>{
+  if(!newVal){
+    return;
+  }
+
+  if(newVal=='I get it'){
+    confirm("用户已确认收到消息");
+  }
+
+  currStatu.sta_BreakNews=null;
+});
+
+//坐标变化了
+watch(
+  () => currStatu.sta_longitude,
+  (newVal, oldVal) => {
+    if(!newVal){
+      return;
+    }
+    //GPS坐标转高德
+    let lonLatConvert = () => {
+      return new Promise((resolve,reject)=>{
+         let url ='https://restapi.amap.com/v3/assistant/coordinate/convert?locations=' +
+        currStatu.sta_longitude +
+        ',' +
+        currStatu.sta_latitude +
+        '&coordsys=gps&output=json&key='+mapApiKey;
+
+      request({
+        url: url,
+        method: 'get'
+      }).then((res) => {
+        if (res.statusCode == 200) {
+          if (res.data.status == '1' && res.data.infocode == '10000') {
+            console.log('坐标转换接口成功', res);
+            let lonLat = res.data.locations.split(',');
+            deviceDetail.value.longitude = lonLat[0];
+            deviceDetail.value.latitude = lonLat[1];
+            resolve({lon:lonLat[0],lat:lonLat[1],flag:true});
+            return;
+          }
+        } else {
+          deviceDetail.value.longitude = currStatu.sta_longitude;
+          deviceDetail.value.latitude = currStatu.sta_latitude;
+           resolve({lon:currStatu.sta_longitude,lat:currStatu.sta_latitude,flag:false});
+          return;
+        }
+
+        reject(false);
+      }).catch(ex=>{
+
+      });
+      });
+     
+    };
+
+    //坐标点逆地理，解析出地址
+    let regeo=(param)=>{
+        let url="https://restapi.amap.com/v3/geocode/regeo?key="+mapApiKey+"&location="+param.lon+","+param.lat;
+         request({
+        url: url,
+        method: 'get'
+      }).then((res) => {
+          if(!res){
+              return;
+          }
+          if(res.info=="OK" && res.infocode=="10000" && res.status=="1"){
+            currStatu.address= res.regeocode.formatted_address;
+          }
+
+      }).catch(ex=>{
+
+      });
+    }
+
+
+    lonLatConvert().then(res=>{
+      regeo(res);
+    }).catch(ex=>{
+
+    });
+  }
+);
+function sendMsg() {
+  
+  formData.sendMsg.padStart(16, ' ');
+
+  formData.textLines = [formData.sendMsg.slice(0, 8), formData.sendMsg.slice(8, 16)];
+  //握手
+  let holdHand = (hexs, time) => {
+    return new Promise((resolve, reject) => {
+      sendCmd(hexs)
+        .then((res) => {
+          setTimeout(() => {
+            resolve(true);
+          }, time);
+        })
+        .catch((err) => {
+          reject(err);
+        });
+    });
+  };
+  //画图
+  let drawText = () => {
+    return new Promise((resolve, reject) => {
+      textToHex.value
+        .drawAndGetPixels()
+        .then((allPixels) => {
+          if (!allPixels) {
+            reject('文本初始化失败');
+            return;
+          }
+          console.log('画图成功');
+          resolve(allPixels);
+        })
+        .catch((compEx) => {
+          reject(compEx);
+           Status.msgLoading=false;
+        });
+    });
+  };
+  //发送3个分包的数据
+  let task = (allPixels) => {
+    try {
+      let combinedData = [];
+      for (let i = 0; i < 2; i++) {
+        let linePixels = (allPixels[i] || []).flat(Infinity).map((item) => item.replace('0x', ''));
+
+        for (var j = linePixels.length; j < 256; j++) {
+          linePixels.push('00');
+        }
+
+        combinedData.push(['0' + (i + 1), '01'].concat(linePixels.slice(0, 128)));
+        combinedData.push(['0' + (i + 1), '02'].concat(linePixels.slice(128, 256)));
+      }
+
+      let curr = 1;
+      let len = combinedData.length;
+
+      console.log('包数量', len);
+      //分包发送
+      let sendPacket = () => {
+        if (combinedData.length === curr - 1) {
+          holdHand('transmit complete', 200).then((res) => {
+            debugger;
+          });
+   Status.msgLoading=false;
+          return;
+        }
+
+        let array = combinedData[curr - 1];
+
+        let json = {
+          ins_msg: array.join('')
+        };
+
+        sendCmd(json)
+          .then((res) => {
+            curr++;
+            console.log('发送成功', curr);
+            setTimeout(sendPacket, 500);
+          })
+          .catch((err) => {
+            if (err.code == '10007') {
+              setTimeout(sendPacket, 500);
+            } else {
+              debugger;
+              console.error('err:', err);
+            }
+               Status.msgLoading=false;
+          });
+      };
+
+      setTimeout(sendPacket, 0);
+      // 5. 发送成功处理
+    } catch (ex) {
+      console.error('出现错误', ex);
+    }
+  };
+  Status.msgLoading=true;
+  setTimeout(() => {
+    Promise.allSettled([holdHand('word transmit start', 2200), drawText()]).then((results) => {
+      console.log('PromiseAll=', results);
+      if (results[0].status == 'rejected') {
+        console.error('出现错误', results[0].reason);
+        return;
+      }
+      if (results[1].status == 'rejected') {
+        console.log('任务1失败了', results[1].reason);
+        return;
+      }
+      console.log('开始发送数据包');
+      task(results[1].value);
+    });
+  }, 0);
+}
+function sendUsr() {
+  formData.textLines = [
+    deviceDetail.value.personnelInfo.unitName,
+    deviceDetail.value.personnelInfo.position,
+    deviceDetail.value.personnelInfo.name,
+    deviceDetail.value.personnelInfo.code
+  ];
+  console.log('data=', formData.textLines);
+
+  let sendServer = () => {
+    let data = {
+      code: deviceDetail.value.personnelInfo.code,
+      name: deviceDetail.value.personnelInfo.name,
+      position: deviceDetail.value.personnelInfo.position,
+      unitName: deviceDetail.value.personnelInfo.unitName,
+      deviceId: route.params.deviceId,
+      deviceImei: deviceDetail.value.deviceImei
+    };
+    return api.SendUser(data);
+  };
+  //握手
+  let holdHand = (hexs, time) => {
+    return new Promise((resolve, reject) => {
+      sendCmd(hexs)
+        .then((res) => {
+          setTimeout(() => {
+            resolve(true);
+          }, time);
+        })
+        .catch((err) => {
+          reject(err);
+        });
+    });
+  };
+  //画图
+  let drawText = () => {
+    return new Promise((resolve, reject) => {
+      textToHex.value
+        .drawAndGetPixels()
+        .then((allPixels) => {
+          if (!allPixels) {
+            reject('文本初始化失败');
+            return;
+          }
+          console.log('画图成功');
+          resolve(allPixels);
+        })
+        .catch((compEx) => {
+          reject(compEx);
+        });
+    });
+  };
+
+  let toByteValue = (value) => {
+    if (typeof value === 'number') {
+      return value;
+    }
+    if (typeof value === 'string') {
+      if (value.startsWith('0x') || value.startsWith('0X')) {
+        return parseInt(value, 16);
+      }
+      return parseInt(`0x${value}`, 16);
+    }
+    return 0;
+  };
+  //发送3个分包的数据
+  let task = (allPixels) => {
+    try {
+      let combinedData = [];
+      for (let i = 0; i < 4; i++) {
+        let linePixels = (allPixels[i] || []).flat(Infinity).map((item) => (typeof item === 'string' ? toByteValue(item) : item));
+
+        for (var j = linePixels.length; j < 256; j++) {
+          linePixels.push(0x00);
+        }
+        linePixels = [0xfa, 0x06, 0x03, i + 1].concat(linePixels);
+
+        linePixels.push(0xff);
+
+        combinedData.push(linePixels);
+      }
+
+      let curr = 1;
+      let len = combinedData.length;
+
+      //分包发送
+      let sendPacket = () => {
+        if (combinedData.length === curr - 1) {
+          holdHand('transmit complete', 200).then((res) => {});
+          sendServer();
+          return;
+        }
+
+        let array = combinedData[curr - 1];
+
+        console.log('array=', array);
+        sendCmd(array, true)
+          .then((res) => {
+            curr++;
+            console.log('发送成功', curr);
+
+            setTimeout(sendPacket, 250);
+          })
+          .catch((err) => {
+            console.error('发送失败', err);
+            if (err.code == '10007') {
+              setTimeout(sendPacket, 250);
+            } else {
+              console.log('err:', err);
+            }
+          });
+      };
+
+      setTimeout(sendPacket, 0);
+      // 5. 发送成功处理
+    } catch (ex) {
+      console.error('发送失败', ex);
+    }
+  };
+
+  setTimeout(() => {
+    Promise.allSettled([holdHand('word transmit start', 2200), drawText()]).then((results) => {
+      if (results[0].status == 'rejected') {
+        setTimeout(() => {}, 500);
+        return;
+      }
+      if (results[1].status == 'rejected') {
+        return;
+      }
+
+      task(results[1].value);
+    });
+  }, 0);
+}
+
+onUnmounted(() => {
+  disconnect();
+});
+onMounted(() => {
+  getList();
+  dicImgHandle();
+  onConnect(async () => {
+    const deviceImei = deviceDetail.value.deviceImei;
+    if (!deviceImei) {
+      return;
+    }
+    try {
+      await subscribe(`A/${deviceImei}`, { qos: 1 });
+      console.log('订阅成功');
+    } catch (err) {
+      console.error('订阅失败（onConnect内）:', err);
+    }
+  });
+  // 2. 注册消息接收回调（核心：处理设备发送的消息）
+  onMessage((msg) => {
+    console.log('收到新消息:', {
+      主题: msg.topic,
+      内容: msg.payload,
+      时间: msg.time,
+      QoS: msg.qos
+    });
+    // 在这里处理消息（根据实际业务逻辑）
+    handleDeviceMessage(msg.payload);
+  });
+  onError((err) => {
+    console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
+  });
+  connect();
+});
+
+window.confirm = function (msg, OK, cancel, title) {
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: msg ? msg : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (cancel) {
+        cancel();
+      }
+    },
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.ShowConfirm = function (option: any) {
+  let Cfg = {
+    Visible: true,
+    title: option.title ? option.title : '提示',
+    text: option.text ? option.text : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (option.OkCallback) {
+        option.OkCallback();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (option.cancelCallback) {
+        option.cancelCallback();
+      }
+    },
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.hideConfirm = function () {
+  let Cfg = {
+    Visible: false,
+    title: '提示',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: false,
+    OkTxt: '',
+    cancelTxt: ''
+  };
+
+  Status.confirm = Cfg;
+};
+</script>
+<style lang="scss" scoped>
+.p-2 {
+  background: #f7f8fc;
+  min-height: calc(100vh - 84px);
+  height: calc(100vh - 84px);
+  box-sizing: border-box;
+  padding: 15px;
+}
+.device-page {
+  .header-bar {
+    border-radius: 8px;
+    background: linear-gradient(135deg, #3400e7, #009bff);
+    color: white;
+    padding: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+
+    .device-status {
+      .online {
+        color: #00ff00;
+      }
+
+      .offline {
+        color: rgb(224, 52, 52);
+      }
+    }
+  }
+
+  .content-wrapper {
+    .content-row {
+      margin-bottom: 10px;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 289px;
+      position: relative;
+    }
+
+    .content-card_gps {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 100%;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #303133;
+    }
+
+    .light-mode {
+      display: flex;
+
+      justify-content: space-between;
+    }
+
+    .lacatin_gps {
+      height: 70px;
+      border-radius: 4px;
+      background: rgba(247, 248, 252, 1);
+      display: inline-block;
+      width: 400px;
+      padding: 10px;
+    }
+
+    .brightness-alarm {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .brightness-control {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        border-radius: 39px;
+        box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+        background: rgba(255, 255, 255, 1);
+        width: 70%;
+        height: 54px;
+        padding: 10px 20px;
+
+        .brightness-label {
+          font-size: 14px;
+          color: #606266;
+          min-width: 70px;
+        }
+
+        .brightness-value {
+          font-size: 14px;
+          color: #409eff;
+          font-weight: 500;
+        }
+
+        .save-btn {
+          padding: 6px 20px;
+          border-radius: 29px;
+          background: rgba(2, 124, 251, 1);
+          border: none;
+        }
+
+        .inputTFT {
+          width: 130px;
+          height: 40px;
+        }
+      }
+
+      .alarm-btn {
+        background-color: rgba(224, 52, 52, 1);
+        border-color: rgba(224, 52, 52, 1);
+        padding: 8px 20px;
+        border-radius: 27px;
+      }
+    }
+
+    .location-info {
+      .location-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        font-size: 14px;
+        color: #606266;
+
+        .location-icon {
+          margin-right: 8px;
+          font-weight: bold;
+          color: #409eff;
+        }
+
+        .view-btn {
+          margin: 0 8px;
+          padding: 0;
+          font-size: 13px;
+        }
+      }
+    }
+
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
+      margin-bottom: 15px;
+      text-align: right;
+
+      .form-item {
+        display: flex;
+        align-items: center;
+
+        .form-label {
+          min-width: 35px;
+          font-size: 14px;
+          color: #606266;
+          margin-right: 10px;
+        }
+
+        .el-input {
+          flex: 1;
+        }
+      }
+
+      .register-btn {
+        grid-column: 1 / 3;
+        justify-self: start;
+        padding: 6px 20px;
+        position: absolute;
+        right: 19px;
+        bottom: 30px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+      }
+    }
+
+    .message-content {
+      // display: flex;
+      // flex-direction: column;
+      // gap: 10px;
+
+      .el-textarea {
+        border: 1px solid rgba(29, 111, 255, 1);
+        border-radius: 4px;
+        background: rgba(247, 248, 252, 1);
+        border-radius: 6px;
+        padding: 10px;
+      }
+
+      .el-textarea__inner {
+        background: rgba(247, 248, 252, 1);
+      }
+
+      .send-btn {
+        align-self: flex-end;
+        padding: 10px 20px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+        margin: 20px 0px 30px 0;
+      }
+    }
+
+    .upload-area {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100px;
+      border: 1px dashed #dcdfe6;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .video-input {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      .el-input {
+        flex: 1;
+      }
+
+      .save-video-btn {
+        padding: 6px 12px;
+      }
+    }
+  }
+
+  // 响应式调整
+  @media (max-width: 768px) {
+    .header-bar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid .register-btn {
+      grid-column: 1;
+    }
+
+    .light-mode .mode-group {
+      gap: 10px;
+    }
+
+    .light-mode .mode-item {
+      width: 60px;
+    }
+
+    .light-mode .mode-icon {
+      width: 30px;
+      height: 30px;
+    }
+  }
+}
+
+.displayNone {
+  display: none !important;
+}
+
+.fleft {
+  float: left !important;
+}
+.fright {
+  float: right !important;
+}
+
+.clear {
+  clear: both !important;
+}
+
+.leftContent {
+  width: calc(70% - 15px);
+  margin-right: 15px;
+  height: calc(100% - 80px);
+}
+
+.leftContent .row {
+  width: 100%;
+  height: calc(calc(100% - 30px) / 3);
+  margin-bottom: 15px;
+}
+.leftContent .row:last-child {
+  margin-bottom: 0px !important;
+}
+.leftContent .fuLight .light {
+  width: calc(65% - 15px);
+  margin-right: 15px;
+}
+.leftContent .fuLight .sos {
+  width: 35%;
+}
+.card {
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: #ffffff;
+}
+
+.rightContent {
+  width: 30%;
+  height: calc(100% - 80px);
+  display: flex;
+  flex-direction: column;
+}
+
+.rightContent .liangdu {
+  width: 100%;
+  height: 55px;
+  margin-bottom: 15px;
+  flex-shrink: 0; /* 防止被压缩 */
+
+  border-radius: 39px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: #ffffff;
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.rightContent .leftsett {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  width: calc(100% - 80px);
+  box-sizing: border-box;
+  padding-left: 15px;
+}
+
+.rightContent .location {
+  flex: 1; /* 自动填充剩余空间 */
+  width: 100%;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: #ffffff;
+}
+
+.rightContent .msg {
+  height: calc(calc(100% - 30px) / 3);
+  flex-shrink: 0; /* 防止被压缩 */
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px #0022604a;
+  background: rgba(255, 255, 255, 1);
+  margin-top: 15px;
+}
+
+.title {
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Bold;
+  font-size: 14px;
+  font-weight: 700;
+
+  letter-spacing: 0px;
+  text-align: left;
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+}
+
+.padding {
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.usr .form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  width: 100%;
+  height: calc(100% - 90px);
+  margin-bottom: 15px;
+  text-align: right;
+  position: relative;
+
+  .form-item {
+    display: flex;
+    align-items: center;
+
+    .form-label {
+      min-width: 35px;
+      font-size: 14px;
+      color: #606266;
+      margin-right: 10px;
+    }
+
+    .el-input {
+      flex: 1;
+    }
+  }
+}
+.msg .form-grid {
+  width: 100%;
+  height: calc(100% - 90px);
+  margin-bottom: 15px;
+  .textarea {
+    width: 100%;
+    height: 100%;
+    resize: none;
+    padding: 5px;
+    box-sizing: border-box;
+    border: 1px solid #bdc6d7;
+    border-radius: 4px;
+    background: #f7f8fc;
+  }
+  .textarea:focus,
+  .textarea:focus-visible {
+    border: 1px solid #1d6fff !important;
+    outline: none !important;
+  }
+}
+
+.register-btn {
+  width: 70px;
+  padding: 0px 20px;
+
+  border-radius: 29px;
+  background: #027cfb;
+  border: none;
+}
+.lightFlex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: calc(100% - 50px);
+}
+
+.lightItem {
+  width: 100px;
+  box-sizing: border-box;
+
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: center;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+}
+
+.lightItem .imgContent {
+  width: 100%;
+  height: 130px;
+  height: calc(100% - 30px);
+  border: 1px solid #027cfb33;
+  border-radius: 4px;
+  position: relative;
+}
+
+.lightItem .imgContent img,
+.lightItem .imgContent .img {
+  width: 100px;
+  height: 100px;
+  object-fit: none;
+  object-position: center;
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-position-y: 15px;
+  background-size: inherit;
+}
+
+.lightItem .imgContent .imgTxt {
+  height: 30px;
+  line-height: 25px;
+  color: #38404f;
+  text-align: center;
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0px;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  z-index: 1;
+  width: 100%;
+}
+// 贴一层透明膜,让switch点不上
+.lightItem::before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  background-color: #00000000;
+}
+
+.lightItem.active .imgContent {
+  border: 1px solid #027cfb;
+  background: #027cfb0f;
+}
+.rightContent .liangdu .rmkLiangdu {
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Bold;
+  font-size: 14px;
+  font-weight: 700;
+
+  letter-spacing: 0px;
+  text-align: left;
+  height: 30px;
+  line-height: 30px;
+}
+.rightContent .liangdu .txtLiangdu {
+  box-sizing: border-box;
+  border: 1px solid #d2d2d3;
+  border-radius: 8px;
+  height: 38px;
+  line-height: 38px;
+  text-align: left;
+  text-indent: 5px;
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  margin-left: 5px;
+  letter-spacing: 0px;
+  margin-right: 5px;
+  width: 70px;
+}
+
+.TextToHex {
+  position: fixed;
+  z-index: 0;
+  top: -999999rpx;
+  left: -999999rpx;
+  visibility: hidden;
+}
+.mylocation {
+  width: 100%;
+  height: calc(calc(100% - 60px) / 2);
+}
+.mylocation .icoRemark img {
+  width: auto;
+  height: 15px;
+  margin-right: 5px;
+}
+.mylocation .icoRemark {
+  height: 30px;
+  width: 100%;
+
+  color: #38404f99;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+
+  letter-spacing: 0px;
+  text-align: left;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+}
+.mylocation .lonlat {
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 30px;
+  letter-spacing: 0px;
+  text-align: left;
+  width: 100%;
+  height: 30px;
+}
+
+.mylocation .addressLink {
+  width: 100%;
+  height: calc(100% - 100px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;
+}
+.mylocation .addrss {
+  width: calc(100% - 60px);
+  height: 100%;
+  border-radius: 4px;
+  background: rgba(247, 248, 252, 1);
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.mylocation .link {
+  width: 60px;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+
+  color: #027cfb;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+
+  letter-spacing: 0px;
+}
+
+.mylocation .haiba {
+  width: 100%;
+  color: #38404f;
+
+  font-family: 'Microsoft YaHei';
+  font-style: Regular;
+  font-size: 14px;
+  font-weight: 400;
+  height: 30px;
+  line-height: 30px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+</style>
diff --git a/src/views/controlCenter/6170/index.vue b/src/views/controlCenter/6170/index.vue
index e10d8af..4a355bf 100644
--- a/src/views/controlCenter/6170/index.vue
+++ b/src/views/controlCenter/6170/index.vue
@@ -1,153 +1,178 @@
 <template>
-    <div class="device-page p-2">
-        <!-- 头部信息栏 -->
-        <div class="header-bar">
-            <div>设备名称：{{ deviceDetail.deviceName }}</div>
-            <div>设备型号：{{ deviceDetail.deviceImei }}</div>
-            <div class="device-status">设备状态：
-                <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
-                    {{ deviceDetail.onlineStatus === 1 ? '在线' : (deviceDetail.onlineStatus === 2 ? '故障' : '离线') }}
-                </span>
-            </div>
-            <div>电量：{{ deviceDetail.batteryPercentage || 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">
-                    <div class="content-card">
-                        <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-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" />
-                                <div class="mode-name">{{ laserMode.name }}</div>
-                                <el-switch v-model="laserMode.switchStatus" />
-                            </div>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :lg="8" :xs="24">
-                    <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" />
-                            <span class="brightness-value">%</span>
-                            <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" v-if="deviceDetail.alarmStatus === 0 || deviceDetail.alarmStatus === null"
-                            :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>
-                            </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>
-                        </div>
-                    </div>
-                </el-col>
-            </el-row>
-
-            <!-- 第二行：人员信息登记 + 发送信息 -->
-            <el-row :gutter="20" class="content-row">
-                <el-col :lg="16" :xs="24">
-                    <div class="content-card">
-                        <h4 class="section-title">人员信息登记</h4>
-                        <div class="form-grid">
-                            <div class="form-item">
-                                <span class="form-label">单位:</span>
-                                <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" />
-                            </div>
-                            <div class="form-item">
-                                <span class="form-label">姓名</span>
-                                <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" />
-                            </div>
-                            <el-button type="primary" class="register-btn" @click="registerPostInit"
-                                :loading="fullscreenLoading" :loading-text="fullscreenLoading ? '登记中...' : '登记'"> {{
-                                    fullscreenLoading ? '登记中' : '登记' }}</el-button>
-                        </div>
-                    </div>
-                </el-col>
-                <el-col :lg="8" :xs="24">
-                    <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>
-                            </div>
-                        </div>
-
-                    </div>
-                </el-col>
-            </el-row>
-        </div>
-        <!-- ===========充电提示框====== -->
-        <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
-            <div style="display: flex; align-items: center;">
-                <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
-            </div>
-            <div>请及时充电</div>
-            <span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
-                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
-            </span>
-        </el-dialog>
+  <div class="device-page p-2">
+    <!-- 头部信息栏 -->
+    <div class="header-bar">
+      <div>设备名称：{{ deviceDetail.deviceName }}</div>
+      <div>设备型号：{{ deviceDetail.deviceImei }}</div>
+      <div class="device-status">
+        设备状态：
+        <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
+          {{ deviceDetail.onlineStatus === 1 ? '在线' : deviceDetail.onlineStatus === 2 ? '故障' : '离线' }}
+        </span>
+      </div>
+      <div>电量：{{ deviceDetail.batteryPercentage || 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">
+          <div class="content-card">
+            <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-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" />
+                <div class="mode-name">{{ laserMode.name }}</div>
+                <el-switch v-model="laserMode.switchStatus" />
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :lg="8" :xs="24">
+          <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" />
+              <span class="brightness-value">%</span>
+              <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
+            >
+          </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>
+              </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>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 第二行：人员信息登记 + 发送信息 -->
+      <el-row :gutter="20" class="content-row">
+        <el-col :lg="16" :xs="24">
+          <div class="content-card">
+            <h4 class="section-title">人员信息登记</h4>
+            <div class="form-grid">
+              <div class="form-item">
+                <span class="form-label">单位:</span>
+                <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" />
+              </div>
+              <div class="form-item">
+                <span class="form-label">姓名</span>
+                <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" />
+              </div>
+              <el-button
+                type="primary"
+                class="register-btn"
+                @click="registerPostInit"
+                :loading="fullscreenLoading"
+                :loading-text="fullscreenLoading ? '登记中...' : '登记'"
+              >
+                {{ fullscreenLoading ? '登记中' : '登记' }}</el-button
+              >
+            </div>
+          </div>
+        </el-col>
+        <el-col :lg="8" :xs="24">
+          <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
+                >
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <!-- ===========充电提示框====== -->
+    <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
+      <div style="display: flex; align-items: center">
+        <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
+      </div>
+      <div>请及时充电</div>
+      <span slot="footer" class="dialog-footer" style="text-align: right; display: block">
+        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
 </template>
 <script setup name="DeviceControl" lang="ts">
 const route = useRoute();
 import { useMqtt } from '@/utils/mqtt';
-import api from '@/api/controlCenter/controlPanel/index'
+import 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;
@@ -165,864 +190,876 @@ 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[]>([
-    {
-        id: 'strong',
-        name: '强光',
-        icon: strongLightDefault, // 直接使用导入的变量
-        activeIcon: strongLightActive,
-        switchStatus: true,
-        instructValue: '1',
-        active: true,
-    },
-    {
-        id: 'weak',
-        name: '弱光',
-        icon: weakLightDefault,
-        activeIcon: weakLightActive,
-        switchStatus: false,
-        instructValue: '2',
-        active: false,
-    },
-    {
-        id: 'strobe',
-        name: '爆闪',
-        icon: strobeLightDefault,
-        activeIcon: strobeLightActive,
-        switchStatus: false,
-        instructValue: '3',
-        active: false
-    },
-    {
-        id: 'flood',
-        name: '泛光',
-        icon: floodLightDefault,
-        activeIcon: floodLightActive,
-        switchStatus: false,
-        instructValue: '4',
-        active: false
-    },
-    {
-        id: 'close',
-        name: '关闭',
-        icon: closeDefault,
-        activeIcon: closeActive,
-        switchStatus: false,
-        instructValue: '0',
-        active: false
-    },
+  {
+    id: 'strong',
+    name: '强光',
+    icon: strongLightDefault, // 直接使用导入的变量
+    activeIcon: strongLightActive,
+    switchStatus: true,
+    instructValue: '1',
+    active: true
+  },
+  {
+    id: 'weak',
+    name: '弱光',
+    icon: weakLightDefault,
+    activeIcon: weakLightActive,
+    switchStatus: false,
+    instructValue: '2',
+    active: false
+  },
+  {
+    id: 'strobe',
+    name: '爆闪',
+    icon: strobeLightDefault,
+    activeIcon: strobeLightActive,
+    switchStatus: false,
+    instructValue: '3',
+    active: false
+  },
+  {
+    id: 'flood',
+    name: '泛光',
+    icon: floodLightDefault,
+    activeIcon: floodLightActive,
+    switchStatus: false,
+    instructValue: '4',
+    active: false
+  },
+  {
+    id: 'close',
+    name: '关闭',
+    icon: closeDefault,
+    activeIcon: closeActive,
+    switchStatus: false,
+    instructValue: '0',
+    active: false
+  }
 ]);
 const laserMode = ref<LightMode>({
-    id: 'laser',
-    name: '激光',
-    icon: laserLightDefault,
-    activeIcon: laserLightActive,
-    switchStatus: false,
-    instructValue: '1',
-    active: false
+  id: 'laser',
+  name: '激光',
+  icon: laserLightDefault,
+  activeIcon: laserLightActive,
+  switchStatus: false,
+  instructValue: '1',
+  active: false
 });
 
 const deviceDetail = ref<DeviceDetail & { typeName: string }>({
-    // 重点：personnelInfo 初始化为空对象，避免 undefined
-    personnelInfo: {
-        unitName: '',
-        position: '',
-        name: '',
-        code: ''
-    },
-    lightBrightness: '',
-    deviceName: '',
-    deviceImei: '',
-    onlineStatus: 0,
-    batteryPercentage: 0,
-    batteryRemainingTime: '',
-    longitude: '',
-    latitude: '',
-    address: '',
-    sendMsg: '',
-    chargeState: '0',
-    typeName: '',
-    alarmStatus: 0
+  // 重点：personnelInfo 初始化为空对象，避免 undefined
+  personnelInfo: {
+    unitName: '',
+    position: '',
+    name: '',
+    code: ''
+  },
+  lightBrightness: '',
+  deviceName: '',
+  deviceImei: '',
+  onlineStatus: 0,
+  batteryPercentage: 0,
+  batteryRemainingTime: '',
+  longitude: '',
+  latitude: '',
+  address: '',
+  sendMsg: '',
+  chargeState: '0',
+  typeName: '',
+  alarmStatus: 0
 });
 // 保留原有的操作中标志位
 const isUpdatingStatus = ref(false);
 const handleModeClick = async (modeId: string) => {
-    if (isUpdatingStatus.value || isSyncingStatus.value) return;
-    try {
-        const deviceId = route.params.deviceId as string;
-        if (!deviceId) return;
-        const targetMode = lightModes.value.find(m => m.id === modeId);
-        if (!targetMode || !targetMode.instructValue) return;
-        // 标记为用户操作中的更新
-        isUpdatingStatus.value = true;
-        // 调用接口（仅用户点击时触发一次）
-        const res = await api.lightModeSettings({
-            deviceId,
-            instructValue: targetMode.instructValue,
-            deviceImei: deviceDetail.value.deviceImei,
-            typeName: deviceDetail.value.typeName,
-        });
-        if (res.code === 200) {
-            ElMessage.closeAll();
-            proxy?.$modal.msgSuccess(res.msg);
-            setActiveLightMode(modeId);
-        } else {
-            proxy?.$modal.msgError(res.msg);
-            const prevActiveMode = lightModes.value.find(m => m.active);
-            if (prevActiveMode) {
-                setActiveLightMode(prevActiveMode.id);
-            }
-        }
-    } catch (error) {
-        // proxy?.$modal.msgError("操作失败，请稍后重试");
-        // 异常时恢复状态
-        const prevActiveMode = lightModes.value.find(m => m.active);
-        if (prevActiveMode) {
-            setActiveLightMode(prevActiveMode.id);
-        }
-    } finally {
-        // 无论成功失败，最终重置用户操作标志位
-        isUpdatingStatus.value = false;
+  if (isUpdatingStatus.value || isSyncingStatus.value) return;
+  try {
+    const deviceId = route.params.deviceId as string;
+    if (!deviceId) return;
+    const targetMode = lightModes.value.find((m) => m.id === modeId);
+    if (!targetMode || !targetMode.instructValue) return;
+    // 标记为用户操作中的更新
+    isUpdatingStatus.value = true;
+    // 调用接口（仅用户点击时触发一次）
+    const res = await api.lightModeSettings({
+      deviceId,
+      instructValue: targetMode.instructValue,
+      deviceImei: deviceDetail.value.deviceImei,
+      typeName: deviceDetail.value.typeName
+    });
+    if (res.code === 200) {
+      ElMessage.closeAll();
+      proxy?.$modal.msgSuccess(res.msg);
+      setActiveLightMode(modeId);
+    } else {
+      proxy?.$modal.msgError(res.msg);
+      const prevActiveMode = lightModes.value.find((m) => m.active);
+      if (prevActiveMode) {
+        setActiveLightMode(prevActiveMode.id);
+      }
     }
+  } catch (error) {
+    // proxy?.$modal.msgError("操作失败，请稍后重试");
+    // 异常时恢复状态
+    const prevActiveMode = lightModes.value.find((m) => m.active);
+    if (prevActiveMode) {
+      setActiveLightMode(prevActiveMode.id);
+    }
+  } finally {
+    // 无论成功失败，最终重置用户操作标志位
+    isUpdatingStatus.value = false;
+  }
 };
 const isSyncingStatus = ref(false);
 const setActiveLightMode = (targetModeId: string) => {
-    isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
-    lightModes.value.forEach(mode => {
-        const isActive = mode.id === targetModeId;
-        mode.active = isActive;
-        mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
-    });
-    isSyncingStatus.value = false; // 同步完成，重置标志位
+  isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
+  lightModes.value.forEach((mode) => {
+    const isActive = mode.id === targetModeId;
+    mode.active = isActive;
+    mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
+  });
+  isSyncingStatus.value = false; // 同步完成，重置标志位
 };
 const getList = async () => {
-    try {
-        const deviceId = route.params.deviceId;
-        if (!deviceId) return;
-        const res = await api.deviceDeatil(deviceId as string);
-        deviceDetail.value = res.data;
-        // 处理人员信息空值（原有逻辑保留）
-        if (!deviceDetail.value.personnelInfo) {
-            deviceDetail.value.personnelInfo = {
-                unitName: '',
-                position: '',
-                name: '',
-                code: ''
-            };
-        }
-        // 1. 匹配接口返回的灯光模式
-        let targetModeId = "strong";
-        const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
-        const matchedMode = lightModes.value.find(
-            mode => mode.instructValue === mainLightMode
-        );
-        if (matchedMode) {
-            targetModeId = matchedMode.id;
-        }
-        setActiveLightMode(targetModeId);
-        const laserStatus = Number(res.data.laserLightMode);
-        laserMode.value.active = laserStatus === 1;
-        laserMode.value.switchStatus = laserStatus === 1;
-    } catch (error) {
-        console.error("获取设备详情失败：", error);
-        setActiveLightMode("strong"); // 异常时默认强光
+  try {
+    const deviceId = route.params.deviceId;
+    if (!deviceId) return;
+    const res = await api.deviceDeatil(deviceId as string);
+    deviceDetail.value = res.data;
+    // 处理人员信息空值（原有逻辑保留）
+    if (!deviceDetail.value.personnelInfo) {
+      deviceDetail.value.personnelInfo = {
+        unitName: '',
+        position: '',
+        name: '',
+        code: ''
+      };
     }
+    // 1. 匹配接口返回的灯光模式
+    let targetModeId = 'strong';
+    const mainLightMode = String(res.data.mainLightMode || '1'); // 接口值转字符串，“强光”
+    const matchedMode = lightModes.value.find((mode) => mode.instructValue === mainLightMode);
+    if (matchedMode) {
+      targetModeId = matchedMode.id;
+    }
+    setActiveLightMode(targetModeId);
+    const laserStatus = Number(res.data.laserLightMode);
+    laserMode.value.active = laserStatus === 1;
+    laserMode.value.switchStatus = laserStatus === 1;
+  } catch (error) {
+    console.error('获取设备详情失败：', error);
+    setActiveLightMode('strong'); // 异常时默认强光
+  }
 };
 // 激光接口调用
 const handleLaserClick = async () => {
-    try {
-        const deviceId = route.params.deviceId as string;
-        if (!deviceId) return;
-        const targetStatus = !laserMode.value.active;
-        const res = await api.laserModeSettings({
-            deviceId,
-            deviceImei: deviceDetail.value.deviceImei,
-            typeName: deviceDetail.value.typeName,
-            instructValue: targetStatus ? 1 : 0
-        });
-        if (res.code === 200) {
-            ElMessage.closeAll();
-            proxy?.$modal.msgSuccess(res.msg);
-            laserMode.value.active = targetStatus;
-            laserMode.value.switchStatus = targetStatus;
-        } else {
-            proxy?.$modal.msgError(res.msg);
-            // 恢复之前的状态
-            laserMode.value.switchStatus = !targetStatus;
-        }
-    } catch (error: any) {
-       // proxy?.$modal.msgError(error.msg);
-        // 恢复之前的状态
-        laserMode.value.switchStatus = !laserMode.value.switchStatus;
-    } finally { }
-}
+  try {
+    const deviceId = route.params.deviceId as string;
+    if (!deviceId) return;
+    const targetStatus = !laserMode.value.active;
+    const res = await api.laserModeSettings({
+      deviceId,
+      deviceImei: deviceDetail.value.deviceImei,
+      typeName: deviceDetail.value.typeName,
+      instructValue: targetStatus ? 1 : 0
+    });
+    if (res.code === 200) {
+      ElMessage.closeAll();
+      proxy?.$modal.msgSuccess(res.msg);
+      laserMode.value.active = targetStatus;
+      laserMode.value.switchStatus = targetStatus;
+    } else {
+      proxy?.$modal.msgError(res.msg);
+      // 恢复之前的状态
+      laserMode.value.switchStatus = !targetStatus;
+    }
+  } catch (error: any) {
+    // proxy?.$modal.msgError(error.msg);
+    // 恢复之前的状态
+    laserMode.value.switchStatus = !laserMode.value.switchStatus;
+  } finally {
+  }
+};
 
 // 人员信息发送
 const registerPostInit = () => {
-    if (!deviceDetail.value.personnelInfo.unitName) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('单位名称不能为空');
-        return
+  if (!deviceDetail.value.personnelInfo.unitName) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('单位名称不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.name) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('姓名不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.position) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('职位不能为空');
+    return;
+  }
+  if (!deviceDetail.value.personnelInfo.code) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('ID不能为空');
+    return;
+  }
+  let data = {
+    code: deviceDetail.value.personnelInfo.code,
+    name: deviceDetail.value.personnelInfo.name,
+    position: deviceDetail.value.personnelInfo.position,
+    unitName: deviceDetail.value.personnelInfo.unitName,
+    deviceId: route.params.deviceId,
+    deviceImei: deviceDetail.value.deviceImei
+  };
+  fullscreenLoading.value = true;
+  api.registerPersonInfo(data).then((res) => {
+    console.log(res, 'res');
+    if (res.code === 200) {
+      fullscreenLoading.value = false;
+      proxy?.$modal.msgSuccess(res.msg);
+    } else {
+      fullscreenLoading.value = false;
+      proxy?.$modal.msgError(res.msg);
     }
-    if (!deviceDetail.value.personnelInfo.name) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('姓名不能为空');
-        return
-    }
-    if (!deviceDetail.value.personnelInfo.position) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('职位不能为空');
-        return
-    }
-    if (!deviceDetail.value.personnelInfo.code) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('ID不能为空');
-        return
-    }
-    let data = {
-        code: deviceDetail.value.personnelInfo.code,
-        name: deviceDetail.value.personnelInfo.name,
-        position: deviceDetail.value.personnelInfo.position,
-        unitName: deviceDetail.value.personnelInfo.unitName,
-        deviceId: route.params.deviceId,
-        deviceImei: deviceDetail.value.deviceImei
-    }
-    fullscreenLoading.value = true
-    api.registerPersonInfo(data).then((res) => {
-        console.log(res, 'res');
-        if (res.code === 200) {
-            fullscreenLoading.value = false
-            proxy?.$modal.msgSuccess(res.msg);
-        } else {
-            fullscreenLoading.value = false
-            proxy?.$modal.msgError(res.msg);
-        }
-    })
-}
+  });
+};
 // 灯光亮度
 const saveBtn = () => {
-    lightModesLoading.value = true
-    let data = {
-        deviceId: route.params.deviceId,
-        instructValue: deviceDetail.value.lightBrightness + '.00',
-        deviceImei: deviceDetail.value.deviceImei,
+  lightModesLoading.value = true;
+  let data = {
+    deviceId: route.params.deviceId,
+    instructValue: deviceDetail.value.lightBrightness + '.00',
+    deviceImei: deviceDetail.value.deviceImei
+  };
+  api.lightBrightnessSettings(data).then((res) => {
+    if (res.code === 200) {
+      lightModesLoading.value = false;
+      proxy?.$modal.msgSuccess(res.msg);
+    } else {
+      lightModesLoading.value = false;
+      //proxy?.$modal.msgError(res.msg);
     }
-    api.lightBrightnessSettings(data).then((res) => {
-        if (res.code === 200) {
-            lightModesLoading.value = false
-            proxy?.$modal.msgSuccess(res.msg);
-
-        } else {
-            lightModesLoading.value = false
-            //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);
+  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
+    };
+    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',
             deviceImei,
             interval: 500
-        },
-            api.deviceRealTimeStatus
+          },
+          api.deviceRealTimeStatus
         );
         // 只有当状态为'OK'时才显示成功弹窗
         if (statusRes.data.functionAccess === 'OK') {
-            proxy?.$modal.msgSuccess(statusRes.msg);
-            await getList();
+          proxy?.$modal.msgSuccess(statusRes.msg);
+          await getList();
         }
-
-    } catch (error: any) {
-    }
-
-
-}
-
-
-
-
+      })
+      .catch((ex) => {
+        mqsend();
+      });
+  } catch (error: any) {}
+};
 
 // 强制报警
 const forceAlarm = async () => {
-    try {
-        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
-        forceAlarmLoading.value = true
-        // 2. 准备请求数据
-        const batchId = generateShortId();
-        let data = {
-            deviceIds: [route.params.deviceId],
-            typeName: deviceDetail.value.typeName,
-            deviceImeiList: [deviceDetail.value.deviceImei],
-            batchId: batchId,
-            instructValue: '1', //强制报警1，解除报警0
-        }
-        const registerRes = await api.sendAlarmMessage(data);
+  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)
-            return
+          // proxy?.$modal.msgWarning(registerRes.msg)
+          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',
             deviceImei,
             interval: 500
-        },
-            api.deviceRealTimeStatus
+          },
+          api.deviceRealTimeStatus
         );
         // 只有当状态为'OK'时才显示成功弹窗
         if (statusRes.data.functionAccess === 'OK') {
-            proxy?.$modal.msgSuccess(statusRes.msg);
-            await getList();
+          proxy?.$modal.msgSuccess(statusRes.msg);
+          await getList();
         }
-
-    } catch (error: any) {
-       // proxy?.$modal.msgWarning(error.msg)
-         forceAlarmLoading.value = false;
-
-    } finally {
-        forceAlarmLoading.value = false;
-    }
-}
+      })
+      .catch((ex) => {
+        mqsend();
+      });
+  } catch (error: any) {
+    // proxy?.$modal.msgWarning(error.msg)
+    forceAlarmLoading.value = false;
+  } finally {
+    forceAlarmLoading.value = false;
+  }
+};
 // 发送文本消息
 const sendTextMessage = async () => {
-    // 防重复提交
-    if (!deviceDetail.value.sendMsg) {
-        ElMessage.closeAll();
-        proxy?.$modal.msgWarning('发送信息不能为空');
-        return;
+  // 防重复提交
+  if (!deviceDetail.value.sendMsg) {
+    ElMessage.closeAll();
+    proxy?.$modal.msgWarning('发送信息不能为空');
+    return;
+  }
+  try {
+    sendTextLoading.value = true;
+    // 2. 准备请求数据
+    const batchId = generateShortId();
+    const data = {
+      sendMsg: deviceDetail.value.sendMsg,
+      deviceIds: [route.params.deviceId],
+      typeName: deviceDetail.value.typeName,
+      batchId: batchId,
+      deviceImeiList: [deviceDetail.value.deviceImei]
+    };
+    // 3.人员信息
+    const registerRes = await api.deviceSendMessage(data);
+    if (registerRes.code !== 200) {
+      proxy?.$modal.msgWarning(registerRes.msg);
+      return;
     }
-    try {
-        sendTextLoading.value = true;
-        // 2. 准备请求数据
-        const batchId = generateShortId();
-        const data = {
-            sendMsg: deviceDetail.value.sendMsg,
-            deviceIds: [route.params.deviceId],
-            typeName: deviceDetail.value.typeName,
-            batchId: batchId,
-            deviceImeiList: [deviceDetail.value.deviceImei],
-        };
-        // 3.人员信息
-        const registerRes = await api.deviceSendMessage(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);
-        }
-    } catch (error: any) {
-        proxy?.$modal.msgWarning(error.msg)
-    } finally {
-        sendTextLoading.value = false;
+    // 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);
     }
-}
+  } catch (error: any) {
+    proxy?.$modal.msgWarning(error.msg);
+  } finally {
+    sendTextLoading.value = false;
+  }
+};
 const lookMap = (row: any) => {
-    console.log(row, 'row');
-    router.push({
-        path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
-        query: {
-            view: 'map',
-            deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
-        }
-    });
-}
-const getMainLightModeLabel = (mode: any) => {
-    const modeMap = {
-        0: 'close',    // 0 → 关闭
-        1: 'strong',   // 1 → 强光
-        2: 'weak',     // 2 → 弱光
-        3: 'strobe',   // 3 → 爆闪
-        4: 'flood'     // 4 → 泛光
+  console.log(row, 'row');
+  router.push({
+    path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
+    query: {
+      view: 'map',
+      deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
     }
-    return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
-}
+  });
+};
+const getMainLightModeLabel = (mode: any) => {
+  const modeMap = {
+    0: 'close', // 0 → 关闭
+    1: 'strong', // 1 → 强光
+    2: 'weak', // 2 → 弱光
+    3: 'strobe', // 3 → 爆闪
+    4: 'flood' // 4 → 泛光
+  };
+  return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
+};
 // 处理设备消息
 const handleDeviceMessage = (msg: any) => {
-    try {
-        const payloadObj = JSON.parse(msg.payload.toString());
-        const deviceState = payloadObj.state; // 设备状态数组
-        if (!Array.isArray(deviceState)) {
-            return;
-        }
-        switch (deviceState[0]) {
-            case 1:
-                // 类型1灯光主键
-                const lightModeId = getMainLightModeLabel(deviceState[1]);
-                const brightness = deviceState[2]; // 亮度值
-                const batteryTime = deviceState[3]; // 续航时间
-                console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
-                // 1. 同步灯光模式状态
-                if (lightModeId !== 'unknown') {
-                    lightModes.value.forEach(mode => {
-                        const isActive = mode.id === lightModeId;
-                        mode.active = isActive;
-                        mode.switchStatus = isActive;
-                    });
-                }
-                // 2.亮度
-                if (brightness !== undefined) {
-                    deviceDetail.value.lightBrightness = brightness.toString();
-                }
-                // 3.续航时间
-                if (batteryTime !== undefined) {
-                    deviceDetail.value.batteryRemainingTime = batteryTime.toString();
-                }
-                break;
-            case 12:
-                // 灯光主键
-                const lightModeIdA = getMainLightModeLabel(deviceState[1]);
-                if (lightModeIdA !== 'unknown') {
-                    lightModes.value.forEach(mode => {
-                        const isActive = mode.id === lightModeIdA;
-                        mode.active = isActive;
-                        mode.switchStatus = isActive;
-                    });
-                }
-                // 激光
-                const laserValue = deviceState[2];
-                // 同步激光模式状态：1=开启（true），0=关闭（false）
-                laserMode.value.active = laserValue === 1;
-                laserMode.value.switchStatus = laserValue === 1;
-                deviceDetail.value.batteryPercentage = deviceState[3]; //电量
-                deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
-                // getList(); // 重新获取设备详情
-                if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
-                    centerDialogVisible.value = true
-                }
-                break;
-            case 7:
-                deviceDetail.value.alarmStatus = deviceState[1];
-
-                break;
-            default:
-                console.log('未处理的消息类型:', deviceState[0]);
-                break;
-        }
-    } catch (e) {
+  try {
+    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]) {
+      case 1:
+        // 类型1灯光主键
+        const lightModeId = getMainLightModeLabel(deviceState[1]);
+        const brightness = deviceState[2]; // 亮度值
+        const batteryTime = deviceState[3]; // 续航时间
+        console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
+        // 1. 同步灯光模式状态
+        if (lightModeId !== 'unknown') {
+          lightModes.value.forEach((mode) => {
+            const isActive = mode.id === lightModeId;
+            mode.active = isActive;
+            mode.switchStatus = isActive;
+          });
+        }
+        // 2.亮度
+        if (brightness !== undefined) {
+          deviceDetail.value.lightBrightness = brightness.toString();
+        }
+        // 3.续航时间
+        if (batteryTime !== undefined) {
+          deviceDetail.value.batteryRemainingTime = batteryTime.toString();
+        }
+        break;
+
+      case 12:
+        // 灯光主键
+        const lightModeIdA = getMainLightModeLabel(deviceState[1]);
+        if (lightModeIdA !== 'unknown') {
+          lightModes.value.forEach((mode) => {
+            const isActive = mode.id === lightModeIdA;
+            mode.active = isActive;
+            mode.switchStatus = isActive;
+          });
+        }
+        // 激光
+        const laserValue = deviceState[2];
+        // 同步激光模式状态：1=开启（true），0=关闭（false）
+        laserMode.value.active = laserValue === 1;
+        laserMode.value.switchStatus = laserValue === 1;
+        deviceDetail.value.batteryPercentage = deviceState[3]; //电量
+        deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
+        // getList(); // 重新获取设备详情
+        if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
+          centerDialogVisible.value = true;
+        }
+        break;
+      case 7:
+        deviceDetail.value.alarmStatus = deviceState[1];
+
+        break;
+      default:
+        console.log('未处理的消息类型:', deviceState[0]);
+        break;
+    }
+  } catch (e) {}
 };
 onMounted(async () => {
-    await getList();
-    // 连接mqtt
-    onConnect(async () => {
-        const deviceImei = deviceDetail.value.deviceImei;
-        if (!deviceImei) {
-            return;
-        }
-        try {
-            await subscribe(`A/${deviceImei}`, { qos: 1 });
-            console.log('订阅成功');
-        } catch (err) {
-            console.error('订阅失败（onConnect内）:', err);
-        }
+  await getList();
+  // 连接mqtt
+  onConnect(async () => {
+    const deviceImei = deviceDetail.value.deviceImei;
+    if (!deviceImei) {
+      return;
+    }
+    try {
+      await subscribe(`A/${deviceImei}`, { qos: 1 });
+      console.log('订阅成功');
+    } catch (err) {
+      console.error('订阅失败（onConnect内）:', err);
+    }
+  });
+  // 2. 注册消息接收回调（核心：处理设备发送的消息）
+  onMessage((msg) => {
+    console.log('收到新消息:', {
+      主题: msg.topic,
+      内容: msg.payload,
+      时间: msg.time,
+      QoS: msg.qos
     });
-    // 2. 注册消息接收回调（核心：处理设备发送的消息）
-    onMessage((msg) => {
-        console.log('收到新消息:', {
-            主题: msg.topic,
-            内容: msg.payload,
-            时间: msg.time,
-            QoS: msg.qos
-        });
-        // 在这里处理消息（根据实际业务逻辑）
-        handleDeviceMessage(msg);
-    });
-    onError((err) => {
-        console.error('MQTT连接失败原因:', err.message);
-    });
-    connect();
+    // 在这里处理消息（根据实际业务逻辑）
+    handleDeviceMessage(msg);
+  });
+  onError((err) => {
+    console.error('MQTT连接失败原因:', err.message);
+  });
+  connect();
 });
 onUnmounted(() => {
-    // 只有当连接已建立时，才执行断开操作（避免无效调用）
-    if (connected.value) {
-        console.log('页面离开，断开MQTT连接');
-        disconnect(); // 调用断开连接方法
-    }
+  // 只有当连接已建立时，才执行断开操作（避免无效调用）
+  if (connected.value) {
+    console.log('页面离开，断开MQTT连接');
+    disconnect(); // 调用断开连接方法
+  }
 });
-
 </script>
 <style lang="scss" scoped>
 .p-2 {
-    background: rgba(247, 248, 252, 1);
-    min-height: 100vh;
-    box-sizing: border-box;
-    padding: 15px;
+  background: rgba(247, 248, 252, 1);
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 15px;
 }
 
 .device-page {
-    .header-bar {
-        border-radius: 8px;
-        background: linear-gradient(135deg, #3400e7, #009bff);
-        color: white;
-        padding: 20px;
-        margin-bottom: 20px;
+  .header-bar {
+    border-radius: 8px;
+    background: linear-gradient(135deg, #3400e7, #009bff);
+    color: white;
+    padding: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 600;
+
+    .device-status {
+      .online {
+        color: #00ff00;
+      }
+
+      .offline {
+        color: rgb(224, 52, 52);
+      }
+    }
+  }
+
+  .content-wrapper {
+    .content-row {
+      margin-bottom: 10px;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 289px;
+      position: relative;
+    }
+
+    .content-card_gps {
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
+      background: white;
+      padding: 0px 20px 50px;
+      border: 1px solid #ebeef5;
+      height: 78%;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 20px;
+      color: #303133;
+    }
+
+    .light-mode {
+      display: flex;
+
+      justify-content: space-between;
+    }
+
+    .lacatin_gps {
+      height: 70px;
+      border-radius: 4px;
+      background: rgba(247, 248, 252, 1);
+      display: inline-block;
+      width: 400px;
+      padding: 10px;
+    }
+
+    .mode-card {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 15px;
+      border: 1px solid #dcdfe6;
+      border-radius: 8px;
+      width: 125px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &.active {
+        border-color: #409eff;
+        background-color: rgba(64, 158, 255, 0.05);
+      }
+
+      .mode-icon {
+        width: 48px;
+        margin-bottom: 10px;
+        transition: all 0.3s ease;
+        object-fit: scale-down;
+        height: 50px;
+      }
+
+      .mode-name {
+        font-size: 14px;
+        margin-bottom: 12px;
+        color: #606266;
+      }
+
+      .el-switch {
+        --el-switch-on-color: #409eff;
+        --el-switch-off-color: #dcdfe6;
+      }
+    }
+
+    .brightness-alarm {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .brightness-control {
         display: flex;
-        justify-content: space-between;
         align-items: center;
-        font-weight: 600;
+        gap: 10px;
+        border-radius: 39px;
+        box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+        background: rgba(255, 255, 255, 1);
+        width: 70%;
+        height: 54px;
+        padding: 10px 20px;
 
-        .device-status {
-            .online {
-                color: #00ff00;
-            }
-
-            .offline {
-                color: rgb(224, 52, 52);
-            }
+        .brightness-label {
+          font-size: 14px;
+          color: #606266;
+          min-width: 70px;
         }
+
+        .brightness-value {
+          font-size: 14px;
+          color: #409eff;
+          font-weight: 500;
+        }
+
+        .save-btn {
+          padding: 6px 20px;
+          border-radius: 29px;
+          background: rgba(2, 124, 251, 1);
+          border: none;
+        }
+
+        .inputTFT {
+          width: 130px;
+          height: 40px;
+        }
+      }
+
+      .alarm-btn {
+        background-color: rgba(224, 52, 52, 1);
+        border-color: rgba(224, 52, 52, 1);
+        padding: 8px 20px;
+        border-radius: 27px;
+      }
     }
 
-    .content-wrapper {
-        .content-row {
-            margin-bottom: 10px;
+    .location-info {
+      .location-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        font-size: 14px;
+        color: #606266;
+
+        .location-icon {
+          margin-right: 8px;
+          font-weight: bold;
+          color: #409eff;
         }
 
-        .content-card {
-            border-radius: 8px;
-            box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
-            background: white;
-            padding: 0px 20px 50px;
-            border: 1px solid #ebeef5;
-            height: 289px;
-            position: relative;
-        }
-
-        .content-card_gps {
-            border-radius: 8px;
-            box-shadow: 0 2px 12px rgba(0, 34, 96, 0.1);
-            background: white;
-            padding: 0px 20px 50px;
-            border: 1px solid #ebeef5;
-            height: 78%;
-
-        }
-
-        .section-title {
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 20px;
-            color: #303133;
-        }
-
-        .light-mode {
-            display: flex;
-
-            justify-content: space-between;
-        }
-
-        .lacatin_gps {
-            height: 70px;
-            border-radius: 4px;
-            background: rgba(247, 248, 252, 1);
-            display: inline-block;
-            width: 400px;
-            padding: 10px;
-        }
-
-        .mode-card {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 15px;
-            border: 1px solid #dcdfe6;
-            border-radius: 8px;
-            width: 125px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-
-            &.active {
-                border-color: #409eff;
-                background-color: rgba(64, 158, 255, 0.05);
-            }
-
-            .mode-icon {
-                width: 48px;
-                margin-bottom: 10px;
-                transition: all 0.3s ease;
-                object-fit: scale-down;
-                height: 50px;
-            }
-
-            .mode-name {
-                font-size: 14px;
-                margin-bottom: 12px;
-                color: #606266;
-            }
-
-            .el-switch {
-                --el-switch-on-color: #409eff;
-                --el-switch-off-color: #dcdfe6;
-            }
-
-
-        }
-
-        .brightness-alarm {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-
-            .brightness-control {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-                border-radius: 39px;
-                box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
-                background: rgba(255, 255, 255, 1);
-                width: 70%;
-                height: 54px;
-                padding: 10px 20px;
-
-                .brightness-label {
-                    font-size: 14px;
-                    color: #606266;
-                    min-width: 70px;
-                }
-
-                .brightness-value {
-                    font-size: 14px;
-                    color: #409eff;
-                    font-weight: 500;
-                }
-
-                .save-btn {
-                    padding: 6px 20px;
-                    border-radius: 29px;
-                    background: rgba(2, 124, 251, 1);
-                    border: none
-                }
-
-                .inputTFT {
-                    width: 130px;
-                    height: 40px;
-                }
-            }
-
-            .alarm-btn {
-                background-color: rgba(224, 52, 52, 1);
-                border-color: rgba(224, 52, 52, 1);
-                padding: 8px 20px;
-                border-radius: 27px;
-            }
-        }
-
-        .location-info {
-            .location-item {
-                display: flex;
-                align-items: center;
-                margin-bottom: 15px;
-                font-size: 14px;
-                color: #606266;
-
-                .location-icon {
-                    margin-right: 8px;
-                    font-weight: bold;
-                    color: #409eff;
-                }
-
-                .view-btn {
-                    margin: 0 8px;
-                    padding: 0;
-                    font-size: 13px;
-                }
-            }
-        }
-
-        .form-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-bottom: 15px;
-            text-align: right;
-
-            .form-item {
-                display: flex;
-                align-items: center;
-
-                .form-label {
-                    min-width: 35px;
-                    font-size: 14px;
-                    color: #606266;
-                    margin-right: 10px;
-                }
-
-                .el-input {
-                    flex: 1;
-                }
-            }
-
-            .register-btn {
-                grid-column: 1 / 3;
-                justify-self: start;
-                padding: 6px 20px;
-                position: absolute;
-                right: 19px;
-                bottom: 30px;
-                border-radius: 29px;
-                background: rgba(2, 124, 251, 1);
-                border: none
-            }
-        }
-
-        .message-content {
-            // display: flex;
-            // flex-direction: column;
-            // gap: 10px;
-
-            .el-textarea {
-                border: 1px solid rgba(29, 111, 255, 1);
-                border-radius: 4px;
-                background: rgba(247, 248, 252, 1);
-                border-radius: 6px;
-                padding: 10px;
-            }
-
-            .el-textarea__inner {
-                background: rgba(247, 248, 252, 1);
-            }
-
-            .send-btn {
-                align-self: flex-end;
-                padding: 10px 20px;
-                border-radius: 29px;
-                background: rgba(2, 124, 251, 1);
-                border: none;
-                margin: 20px 0px 30px 0;
-
-            }
-        }
-
-        .upload-area {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100px;
-            border: 1px dashed #dcdfe6;
-            border-radius: 6px;
-            cursor: pointer;
-        }
-
-        .video-input {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-
-            .el-input {
-                flex: 1;
-            }
-
-            .save-video-btn {
-                padding: 6px 12px;
-            }
+        .view-btn {
+          margin: 0 8px;
+          padding: 0;
+          font-size: 13px;
         }
+      }
     }
 
-    // 响应式调整
-    @media (max-width: 768px) {
-        .header-bar {
-            flex-direction: column;
-            align-items: flex-start;
-            gap: 16px;
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 15px;
+      margin-bottom: 15px;
+      text-align: right;
+
+      .form-item {
+        display: flex;
+        align-items: center;
+
+        .form-label {
+          min-width: 35px;
+          font-size: 14px;
+          color: #606266;
+          margin-right: 10px;
         }
 
-        .form-grid {
-            grid-template-columns: 1fr;
+        .el-input {
+          flex: 1;
         }
+      }
 
-        .form-grid .register-btn {
-            grid-column: 1;
-        }
-
-        .light-mode .mode-group {
-            gap: 10px;
-        }
-
-        .light-mode .mode-item {
-            width: 60px;
-        }
-
-        .light-mode .mode-icon {
-            width: 30px;
-            height: 30px;
-        }
+      .register-btn {
+        grid-column: 1 / 3;
+        justify-self: start;
+        padding: 6px 20px;
+        position: absolute;
+        right: 19px;
+        bottom: 30px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+      }
     }
+
+    .message-content {
+      // display: flex;
+      // flex-direction: column;
+      // gap: 10px;
+
+      .el-textarea {
+        border: 1px solid rgba(29, 111, 255, 1);
+        border-radius: 4px;
+        background: rgba(247, 248, 252, 1);
+        border-radius: 6px;
+        padding: 10px;
+      }
+
+      .el-textarea__inner {
+        background: rgba(247, 248, 252, 1);
+      }
+
+      .send-btn {
+        align-self: flex-end;
+        padding: 10px 20px;
+        border-radius: 29px;
+        background: rgba(2, 124, 251, 1);
+        border: none;
+        margin: 20px 0px 30px 0;
+      }
+    }
+
+    .upload-area {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100px;
+      border: 1px dashed #dcdfe6;
+      border-radius: 6px;
+      cursor: pointer;
+    }
+
+    .video-input {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+
+      .el-input {
+        flex: 1;
+      }
+
+      .save-video-btn {
+        padding: 6px 12px;
+      }
+    }
+  }
+
+  // 响应式调整
+  @media (max-width: 768px) {
+    .header-bar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 16px;
+    }
+
+    .form-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .form-grid .register-btn {
+      grid-column: 1;
+    }
+
+    .light-mode .mode-group {
+      gap: 10px;
+    }
+
+    .light-mode .mode-item {
+      width: 60px;
+    }
+
+    .light-mode .mode-icon {
+      width: 30px;
+      height: 30px;
+    }
+  }
 }
 
 .path-img {
-    width: 52px;
-    height: 28px;
+  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;
+  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;
+  display: none !important;
 }
 </style>
diff --git a/src/views/equipmentManagement/devices/index.vue b/src/views/equipmentManagement/devices/index.vue
index 4463138..1a998eb 100644
--- a/src/views/equipmentManagement/devices/index.vue
+++ b/src/views/equipmentManagement/devices/index.vue
@@ -481,7 +481,11 @@ const { queryParams, form, rules } = toRefs<PageData<deviceForm, deviceQuery>>(d
 /** 查询设备列表 */
 const getList = async () => {
   loading.value = true;
-  const res = await api.deviceList(proxy?.addDateRange(queryParams.value, dateRange.value));
+  let paras=Object.assign({},queryParams.value);
+
+  paras.deviceMac=paras.deviceMac.replace(/:/g,'').replace(/：/g,'').replace(/(.{2})/g, '$1:').slice(0, -1);
+
+  const res = await api.deviceList(proxy?.addDateRange(paras, dateRange.value));
   loading.value = false;
   deviceDist.value = res.rows;
   total.value = res.total;
@@ -501,6 +505,7 @@ const resetQuery = () => {
 
 /** 删除按钮操作 */
 const handleDelete = async (row?: deviceVO) => {
+  debugger;
   // 批量删除逻辑
   let arrey = ids.value.map((item) => item.id);
   if (!row) {