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

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),
   // 禁用组件（仅查看文件）

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(
+      const message = new Paho.Message(payload);
-        typeof payload === 'string' ? payload : payload.toString()
-      );
 
       message.destinationName = topic;
       message.qos = options.qos;

src/views/controlCenter/6075J/TextToHex.vue

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

src/views/controlCenter/6170/index.vue

@@ -4,23 +4,21 @@
     <div class="header-bar">
       <div>设备名称：{{ deviceDetail.deviceName }}</div>
       <div>设备型号：{{ deviceDetail.deviceImei }}</div>
-            <div class="device-status">设备状态：
+      <div class="device-status">
+        设备状态：
         <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
-                    {{ deviceDetail.onlineStatus === 1 ? '在线' : (deviceDetail.onlineStatus === 2 ? '故障' : '离线') }}
+          {{ deviceDetail.onlineStatus === 1 ? '在线' : deviceDetail.onlineStatus === 2 ? '故障' : '离线' }}
         </span>
       </div>
       <div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
-            <div>续航：{{ deviceDetail.batteryRemainingTime || "0" }} 分钟</div>
+      <div>续航：{{ deviceDetail.batteryRemainingTime || '0' }} 分钟</div>
     </div>
 
     <!-- 主体内容区域 -->
     <div class="content-wrapper">
-            <el-row :gutter="20" class="content-row" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'" >
+      <el-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'"
+          <div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'" @click="showClose()">设备强制报警中!</div>
-                        @click="showClose()">
-                        设备强制报警中!
-                    </div>
         </el-col>
       </el-row>
       <!-- 第一行：灯光模式 + 灯光亮度、强制报警、位置信息 -->
@@ -30,17 +28,20 @@
             <h4 class="section-title">灯光模式</h4>
             <div class="light-mode">
               <!-- 使用v-for循环渲染灯光模式卡片 -->
-                            <div class="mode-card" :class="{ 'active': mode.active }"
+              <div
-                                @click.stop="handleModeClick(mode.id)" v-for="mode in lightModes" :key="mode.id">
+                class="mode-card"
-                                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
+                :class="{ 'active': mode.active }"
-                                    class="mode-icon" />
+                @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"
+                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon" :alt="laserMode.name" class="mode-icon" />
-                                    :alt="laserMode.name" class="mode-icon" />
                 <div class="mode-name">{{ laserMode.name }}</div>
                 <el-switch v-model="laserMode.switchStatus" />
               </div>
@@ -51,32 +52,43 @@
           <div class="brightness-alarm">
             <div class="brightness-control">
               <span class="brightness-label">灯光亮度</span>
-                            <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100"
+              <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100" :step="1" size="small" />
-                                :step="1" size="small" />
               <span class="brightness-value">%</span>
-                            <el-button type="primary" class="save-btn" @click="saveBtn" :loading="lightModesLoading"
+              <el-button
-                                :loading-text="lightModesLoading ? '保存中...' : '保存'"> {{
+                type="primary"
-                                    lightModesLoading ? '保存中' : '保存' }}</el-button>
+                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"
+            <el-button
-                            :loading-text="forceAlarmLoading ? '报警中...' : '强制报警'" > {{
+              type="danger"
-                                forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
+              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 ?
+                <span
-                                    Number(deviceDetail.longitude).toFixed(4) : '无' }}
+                  >经纬度 {{ deviceDetail && deviceDetail.longitude ? Number(deviceDetail.longitude).toFixed(4) : '无' }}
-                                    {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
+                  {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4) : '无' }}
-                                        : '无' }} </span>
+                </span>
               </div>
               <div class="location-item">
-
+                <div>
-                                <div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
+                  地址 <span class="lacatin_gps">{{ deviceDetail.address || '未获取到地址' }}</span>
-                                <el-button link type="primary" class="view-btn"
+                </div>
-                                    @click="lookMap(deviceDetail)">查看</el-button>
+                <el-button link type="primary" class="view-btn" @click="lookMap(deviceDetail)">查看</el-button>
               </div>
             </div>
           </div>
@@ -91,27 +103,29 @@
             <div class="form-grid">
               <div class="form-item">
                 <span class="form-label">单位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入单位名称"
+                <el-input v-if="deviceDetail" placeholder="请输入单位名称" v-model="deviceDetail.personnelInfo.unitName" />
-                                    v-model="deviceDetail.personnelInfo.unitName" />
               </div>
               <div class="form-item">
                 <span class="form-label">职位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位名称"
+                <el-input v-if="deviceDetail" placeholder="请输入职位名称" v-model="deviceDetail.personnelInfo.position" />
-                                    v-model="deviceDetail.personnelInfo.position" />
               </div>
               <div class="form-item">
                 <span class="form-label">姓名</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位姓名"
+                <el-input v-if="deviceDetail" placeholder="请输入职位姓名" v-model="deviceDetail.personnelInfo.name" />
-                                    v-model="deviceDetail.personnelInfo.name" />
               </div>
               <div class="form-item">
                 <span class="form-label">ID:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入ID"
+                <el-input v-if="deviceDetail" placeholder="请输入ID" v-model="deviceDetail.personnelInfo.code" />
-                                    v-model="deviceDetail.personnelInfo.code" />
               </div>
-                            <el-button type="primary" class="register-btn" @click="registerPostInit"
+              <el-button
-                                :loading="fullscreenLoading" :loading-text="fullscreenLoading ? '登记中...' : '登记'"> {{
+                type="primary"
-                                    fullscreenLoading ? '登记中' : '登记' }}</el-button>
+                class="register-btn"
+                @click="registerPostInit"
+                :loading="fullscreenLoading"
+                :loading-text="fullscreenLoading ? '登记中...' : '登记'"
+              >
+                {{ fullscreenLoading ? '登记中' : '登记' }}</el-button
+              >
             </div>
           </div>
         </el-col>
@@ -119,26 +133,37 @@
           <div class="content-card">
             <h4 class="section-title">发送信息</h4>
             <div class="message-content">
-                            <el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
+              <el-input
-                                v-model="deviceDetail.sendMsg" resize="none" />
+                type="textarea"
-                            <div style="text-align: end;clear: both;">
+                class="textareaTFT"
-                                <el-button type="primary" class="send-btn" @click="sendTextMessage"
+                :rows="4"
-                                    :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
+                placeholder="现场危险，停止救援！紧急撤离至安全区域！"
-                                        sendTextLoading ? '发送中' : '发送' }}</el-button>
+                v-model="deviceDetail.sendMsg"
+                resize="none"
+              />
+              <div style="text-align: end; clear: both">
+                <el-button
+                  type="primary"
+                  class="send-btn"
+                  @click="sendTextMessage"
+                  :loading="sendTextLoading"
+                  :loading-text="sendTextLoading ? '发送中...' : '发送'"
+                >
+                  {{ sendTextLoading ? '发送中' : '发送' }}</el-button
+                >
               </div>
             </div>
-
           </div>
         </el-col>
       </el-row>
     </div>
     <!-- ===========充电提示框====== -->
     <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
-            <div style="display: flex; align-items: center;">
+      <div style="display: flex; align-items: center">
         <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
       </div>
       <div>请及时充电</div>
-            <span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
+      <span slot="footer" class="dialog-footer" style="text-align: right; display: block">
         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>
@@ -147,7 +172,7 @@
 <script setup name="DeviceControl" lang="ts">
 const route = useRoute();
 import { useMqtt } from '@/utils/mqtt';
-import api from '@/api/controlCenter/controlPanel/index'
+import api from '@/api/controlCenter/controlPanel/index';
 import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
 import { generateShortId, getDeviceStatus } from '@/utils/function';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -165,20 +190,12 @@ import laserLightDefault from '@/assets/images/laser-light.png';
 import laserLightActive from '@/assets/images/laser-light_HL.png';
 import closeDefault from '@/assets/images/close.png';
 import closeActive from '@/assets/images/close_HL.png';
-const fullscreenLoading = ref(false)
+const fullscreenLoading = ref(false);
-const forceAlarmLoading = ref(false)  //强制报警
+const forceAlarmLoading = ref(false); //强制报警
-const sendTextLoading = ref(false)
+const sendTextLoading = ref(false);
-const lightModesLoading = ref(false)
+const lightModesLoading = ref(false);
-const centerDialogVisible = ref(false)
+const centerDialogVisible = ref(false);
-const {
+const { connected, connect, subscribe, onConnect, onError, onMessage, disconnect, publish } = useMqtt();
-    connected,
-    connect,
-    subscribe,
-    onConnect,
-    onError,
-    onMessage,
-    disconnect
-} = useMqtt();
 // 灯光模式数据（引用导入的图片）
 const lightModes = ref<LightMode[]>([
   {
@@ -188,7 +205,7 @@ const lightModes = ref<LightMode[]>([
     activeIcon: strongLightActive,
     switchStatus: true,
     instructValue: '1',
-        active: true,
+    active: true
   },
   {
     id: 'weak',
@@ -197,7 +214,7 @@ const lightModes = ref<LightMode[]>([
     activeIcon: weakLightActive,
     switchStatus: false,
     instructValue: '2',
-        active: false,
+    active: false
   },
   {
     id: 'strobe',
@@ -225,7 +242,7 @@ const lightModes = ref<LightMode[]>([
     switchStatus: false,
     instructValue: '0',
     active: false
-    },
+  }
 ]);
 const laserMode = ref<LightMode>({
   id: 'laser',
@@ -266,7 +283,7 @@ const handleModeClick = async (modeId: string) => {
   try {
     const deviceId = route.params.deviceId as string;
     if (!deviceId) return;
-        const targetMode = lightModes.value.find(m => m.id === modeId);
+    const targetMode = lightModes.value.find((m) => m.id === modeId);
     if (!targetMode || !targetMode.instructValue) return;
     // 标记为用户操作中的更新
     isUpdatingStatus.value = true;
@@ -275,7 +292,7 @@ const handleModeClick = async (modeId: string) => {
       deviceId,
       instructValue: targetMode.instructValue,
       deviceImei: deviceDetail.value.deviceImei,
-            typeName: deviceDetail.value.typeName,
+      typeName: deviceDetail.value.typeName
     });
     if (res.code === 200) {
       ElMessage.closeAll();
@@ -283,7 +300,7 @@ const handleModeClick = async (modeId: string) => {
       setActiveLightMode(modeId);
     } else {
       proxy?.$modal.msgError(res.msg);
-            const prevActiveMode = lightModes.value.find(m => m.active);
+      const prevActiveMode = lightModes.value.find((m) => m.active);
       if (prevActiveMode) {
         setActiveLightMode(prevActiveMode.id);
       }
@@ -291,7 +308,7 @@ const handleModeClick = async (modeId: string) => {
   } catch (error) {
     // proxy?.$modal.msgError("操作失败，请稍后重试");
     // 异常时恢复状态
-        const prevActiveMode = lightModes.value.find(m => m.active);
+    const prevActiveMode = lightModes.value.find((m) => m.active);
     if (prevActiveMode) {
       setActiveLightMode(prevActiveMode.id);
     }
@@ -303,7 +320,7 @@ const handleModeClick = async (modeId: string) => {
 const isSyncingStatus = ref(false);
 const setActiveLightMode = (targetModeId: string) => {
   isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
-    lightModes.value.forEach(mode => {
+  lightModes.value.forEach((mode) => {
     const isActive = mode.id === targetModeId;
     mode.active = isActive;
     mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
@@ -326,11 +343,9 @@ const getList = async () => {
       };
     }
     // 1. 匹配接口返回的灯光模式
-        let targetModeId = "strong";
+    let targetModeId = 'strong';
-        const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
+    const mainLightMode = String(res.data.mainLightMode || '1'); // 接口值转字符串，“强光”
-        const matchedMode = lightModes.value.find(
+    const matchedMode = lightModes.value.find((mode) => mode.instructValue === mainLightMode);
-            mode => mode.instructValue === mainLightMode
-        );
     if (matchedMode) {
       targetModeId = matchedMode.id;
     }
@@ -339,8 +354,8 @@ const getList = async () => {
     laserMode.value.active = laserStatus === 1;
     laserMode.value.switchStatus = laserStatus === 1;
   } catch (error) {
-        console.error("获取设备详情失败：", error);
+    console.error('获取设备详情失败：', error);
-        setActiveLightMode("strong"); // 异常时默认强光
+    setActiveLightMode('strong'); // 异常时默认强光
   }
 };
 // 激光接口调用
@@ -369,30 +384,31 @@ const handleLaserClick = async () => {
     // proxy?.$modal.msgError(error.msg);
     // 恢复之前的状态
     laserMode.value.switchStatus = !laserMode.value.switchStatus;
-    } finally { }
+  } finally {
-}
+  }
+};
 
 // 人员信息发送
 const registerPostInit = () => {
   if (!deviceDetail.value.personnelInfo.unitName) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('单位名称不能为空');
-        return
+    return;
   }
   if (!deviceDetail.value.personnelInfo.name) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('姓名不能为空');
-        return
+    return;
   }
   if (!deviceDetail.value.personnelInfo.position) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('职位不能为空');
-        return
+    return;
   }
   if (!deviceDetail.value.personnelInfo.code) {
     ElMessage.closeAll();
     proxy?.$modal.msgWarning('ID不能为空');
-        return
+    return;
   }
   let data = {
     code: deviceDetail.value.personnelInfo.code,
@@ -401,39 +417,37 @@ const registerPostInit = () => {
     unitName: deviceDetail.value.personnelInfo.unitName,
     deviceId: route.params.deviceId,
     deviceImei: deviceDetail.value.deviceImei
-    }
+  };
-    fullscreenLoading.value = true
+  fullscreenLoading.value = true;
   api.registerPersonInfo(data).then((res) => {
     console.log(res, 'res');
     if (res.code === 200) {
-            fullscreenLoading.value = false
+      fullscreenLoading.value = false;
       proxy?.$modal.msgSuccess(res.msg);
     } else {
-            fullscreenLoading.value = false
+      fullscreenLoading.value = false;
       proxy?.$modal.msgError(res.msg);
     }
-    })
+  });
-}
+};
 // 灯光亮度
 const saveBtn = () => {
-    lightModesLoading.value = true
+  lightModesLoading.value = true;
   let data = {
     deviceId: route.params.deviceId,
     instructValue: deviceDetail.value.lightBrightness + '.00',
-        deviceImei: deviceDetail.value.deviceImei,
+    deviceImei: deviceDetail.value.deviceImei
-    }
+  };
   api.lightBrightnessSettings(data).then((res) => {
     if (res.code === 200) {
-            lightModesLoading.value = false
+      lightModesLoading.value = false;
       proxy?.$modal.msgSuccess(res.msg);
-
     } else {
-            lightModesLoading.value = false
+      lightModesLoading.value = false;
       //proxy?.$modal.msgError(res.msg);
     }
-
+  });
-    })
+};
-}
 // 解除报警
 const showClose = async () => {
   try {
@@ -445,16 +459,26 @@ const showClose = async () => {
       typeName: deviceDetail.value.typeName,
       deviceImeiList: [deviceDetail.value.deviceImei],
       batchId: batchId,
-            instructValue: '0', //强制报警1，解除报警0
+      instructValue: '0' //强制报警1，解除报警0
-        }
+    };
-        const registerRes = await api.sendAlarmMessage(data);
+    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)
+          mqsend();
-            return
+          return;
         }
+
         // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
+        let deviceImei = deviceDetail.value.deviceImei;
-        const statusRes = await getDeviceStatus({
+        const statusRes = await getDeviceStatus(
+          {
             functionMode: 2,
             batchId,
             typeName: 'FunctionAccessBatchStatusRule',
@@ -468,22 +492,19 @@ const showClose = async () => {
           proxy?.$modal.msgSuccess(statusRes.msg);
           await getList();
         }
-
+      })
-    } catch (error: any) {
+      .catch((ex) => {
-    }
+        mqsend();
-
+      });
-
+  } catch (error: any) {}
-}
+};
-
-
-
-
 
 // 强制报警
 const forceAlarm = async () => {
   try {
-        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '提示');
+    let msg = deviceDetail.value.alarmStatus == 1 ? '确定要对该设备解除强制报警？' : '确定要对该设备开启强制报警？';
-        forceAlarmLoading.value = true
+    await proxy?.$modal.confirm(msg, '提示');
+    forceAlarmLoading.value = true;
     // 2. 准备请求数据
     const batchId = generateShortId();
     let data = {
@@ -491,16 +512,27 @@ const forceAlarm = async () => {
       typeName: deviceDetail.value.typeName,
       deviceImeiList: [deviceDetail.value.deviceImei],
       batchId: batchId,
-            instructValue: '1', //强制报警1，解除报警0
+      instructValue: deviceDetail.value.alarmStatus == 1 ? '0' : '1' //强制报警1，解除报警0
-        }
+    };
-        const registerRes = await api.sendAlarmMessage(data);
+
+    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)
+          // proxy?.$modal.msgWarning(registerRes.msg)
-            return
+          mqsend();
+          return;
         }
         // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
+        let deviceImei = deviceDetail.value.deviceImei;
-        const statusRes = await getDeviceStatus({
+        const statusRes = await getDeviceStatus(
+          {
             functionMode: 2,
             batchId,
             typeName: 'FunctionAccessBatchStatusRule',
@@ -514,15 +546,17 @@ const forceAlarm = async () => {
           proxy?.$modal.msgSuccess(statusRes.msg);
           await getList();
         }
-
+      })
+      .catch((ex) => {
+        mqsend();
+      });
   } catch (error: any) {
     // proxy?.$modal.msgWarning(error.msg)
     forceAlarmLoading.value = false;
-
   } finally {
     forceAlarmLoading.value = false;
   }
-}
+};
 // 发送文本消息
 const sendTextMessage = async () => {
   // 防重复提交
@@ -540,17 +574,18 @@ const sendTextMessage = async () => {
       deviceIds: [route.params.deviceId],
       typeName: deviceDetail.value.typeName,
       batchId: batchId,
-            deviceImeiList: [deviceDetail.value.deviceImei],
+      deviceImeiList: [deviceDetail.value.deviceImei]
     };
     // 3.人员信息
     const registerRes = await api.deviceSendMessage(data);
     if (registerRes.code !== 200) {
-            proxy?.$modal.msgWarning(registerRes.msg)
+      proxy?.$modal.msgWarning(registerRes.msg);
-            return
+      return;
     }
     // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
+    let deviceImei = deviceDetail.value.deviceImei;
-        const statusRes = await getDeviceStatus({
+    const statusRes = await getDeviceStatus(
+      {
         functionMode: 2,
         batchId,
         typeName: 'FunctionAccessBatchStatusRule',
@@ -564,11 +599,11 @@ const sendTextMessage = async () => {
       proxy?.$modal.msgSuccess(statusRes.msg);
     }
   } catch (error: any) {
-        proxy?.$modal.msgWarning(error.msg)
+    proxy?.$modal.msgWarning(error.msg);
   } finally {
     sendTextLoading.value = false;
   }
-}
+};
 const lookMap = (row: any) => {
   console.log(row, 'row');
   router.push({
@@ -578,7 +613,7 @@ const lookMap = (row: any) => {
       deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
     }
   });
-}
+};
 const getMainLightModeLabel = (mode: any) => {
   const modeMap = {
     0: 'close', // 0 → 关闭
@@ -586,13 +621,20 @@ const getMainLightModeLabel = (mode: any) => {
     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());
+    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;
@@ -606,7 +648,7 @@ const handleDeviceMessage = (msg: any) => {
         console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
         // 1. 同步灯光模式状态
         if (lightModeId !== 'unknown') {
-                    lightModes.value.forEach(mode => {
+          lightModes.value.forEach((mode) => {
             const isActive = mode.id === lightModeId;
             mode.active = isActive;
             mode.switchStatus = isActive;
@@ -621,11 +663,12 @@ const handleDeviceMessage = (msg: any) => {
           deviceDetail.value.batteryRemainingTime = batteryTime.toString();
         }
         break;
+
       case 12:
         // 灯光主键
         const lightModeIdA = getMainLightModeLabel(deviceState[1]);
         if (lightModeIdA !== 'unknown') {
-                    lightModes.value.forEach(mode => {
+          lightModes.value.forEach((mode) => {
             const isActive = mode.id === lightModeIdA;
             mode.active = isActive;
             mode.switchStatus = isActive;
@@ -640,7 +683,7 @@ const handleDeviceMessage = (msg: any) => {
         deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
         // getList(); // 重新获取设备详情
         if (deviceDetail.value.batteryPercentage < 20 && Number(deviceDetail.value.chargeState) == 0) {
-                    centerDialogVisible.value = true
+          centerDialogVisible.value = true;
         }
         break;
       case 7:
@@ -651,8 +694,7 @@ const handleDeviceMessage = (msg: any) => {
         console.log('未处理的消息类型:', deviceState[0]);
         break;
     }
-    } catch (e) {
+  } catch (e) {}
-    }
 };
 onMounted(async () => {
   await getList();
@@ -692,7 +734,6 @@ onUnmounted(() => {
     disconnect(); // 调用断开连接方法
   }
 });
-
 </script>
 <style lang="scss" scoped>
 .p-2 {
@@ -747,7 +788,6 @@ onUnmounted(() => {
       padding: 0px 20px 50px;
       border: 1px solid #ebeef5;
       height: 78%;
-
     }
 
     .section-title {
@@ -806,8 +846,6 @@ onUnmounted(() => {
         --el-switch-on-color: #409eff;
         --el-switch-off-color: #dcdfe6;
       }
-
-
     }
 
     .brightness-alarm {
@@ -843,7 +881,7 @@ onUnmounted(() => {
           padding: 6px 20px;
           border-radius: 29px;
           background: rgba(2, 124, 251, 1);
-                    border: none
+          border: none;
         }
 
         .inputTFT {
@@ -914,7 +952,7 @@ onUnmounted(() => {
         bottom: 30px;
         border-radius: 29px;
         background: rgba(2, 124, 251, 1);
-                border: none
+        border: none;
       }
     }
 
@@ -942,7 +980,6 @@ onUnmounted(() => {
         background: rgba(2, 124, 251, 1);
         border: none;
         margin: 20px 0px 30px 0;
-
       }
     }
 

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) {