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

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

.env.development

@@ -5,9 +5,9 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-#  VITE_APP_BASE_API = 'http://139.224.253.23:8000'
+VITE_APP_BASE_API = 'http://192.168.2.34:8000'
 #VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
-VITE_APP_BASE_API = 'http://192.168.110.57:8000'   
+# VITE_APP_BASE_API = 'http://192.168.110.57:8000'   
 #代永飞接口
 # VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'   
 

.env.production

@@ -2,13 +2,13 @@
 VITE_APP_TITLE = 云平台管理系统
 
 # 生产环境配置 晶全1
-VITE_APP_ENV = 'https://www.cnxhyc.com'
+VITE_APP_ENV = 'production'
 
 # 生产环境配置 富源晟2
 # VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'
 
 # 应用访问路径 晶全1
-VITE_APP_CONTEXT_PATH = '/'
+VITE_APP_CONTEXT_PATH = '/PC/'
 
 # 高德地图Key
 VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
@@ -25,6 +25,8 @@ VITE_APP_SNAILJOB_ADMIN = '/snail-job'
 # 生产环境 晶全3 代理访问
 VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
 
+# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
+
 # 生产环境 富源晟3
 #VITE_APP_BASE_API = '/backend-fys'
 

package.json

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

src/api/controlCenter/controlPanel/100J.ts

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

src/api/controlCenter/controlPanel/types.ts

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

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']),
+  fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4','ttf']),
   // 是否显示提示
   isShowTip: propTypes.bool.def(true),
   // 禁用组件（仅查看文件）

src/directive/common/copyText.ts

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

src/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;

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-col :lg="24" :xs="24">
-                    <div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'"
-                        @click="showClose()">
-                        设备强制报警中!
-                    </div>
+          <div class="staticRwo" :class="deviceDetail.alarmStatus == 1 ? '' : 'displayNone'" @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 }"
-                                @click.stop="handleModeClick(mode.id)" v-for="mode in lightModes" :key="mode.id">
-                                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
-                                    class="mode-icon" />
+              <div
+                class="mode-card"
+                :class="{ 'active': mode.active }"
+                @click.stop="handleModeClick(mode.id)"
+                v-for="mode in lightModes"
+                :key="mode.id"
+              >
+                <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name" class="mode-icon" />
                 <div class="mode-name">{{ mode.name }}</div>
                 <el-switch v-model="mode.switchStatus" />
               </div>
               <!-- 激光模式（单独处理） -->
               <div class="mode-card" :class="{ 'active': laserMode.active }" @click="handleLaserClick">
-                                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon"
-                                    :alt="laserMode.name" class="mode-icon" />
+                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon" :alt="laserMode.name" class="mode-icon" />
                 <div class="mode-name">{{ laserMode.name }}</div>
                 <el-switch v-model="laserMode.switchStatus" />
               </div>
@@ -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"
-                                :step="1" size="small" />
+              <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100" :step="1" size="small" />
               <span class="brightness-value">%</span>
-                            <el-button type="primary" class="save-btn" @click="saveBtn" :loading="lightModesLoading"
-                                :loading-text="lightModesLoading ? '保存中...' : '保存'"> {{
-                                    lightModesLoading ? '保存中' : '保存' }}</el-button>
+              <el-button
+                type="primary"
+                class="save-btn"
+                @click="saveBtn"
+                :loading="lightModesLoading"
+                :loading-text="lightModesLoading ? '保存中...' : '保存'"
+              >
+                {{ lightModesLoading ? '保存中' : '保存' }}</el-button
+              >
             </div>
-                        <el-button type="danger" class="alarm-btn" @click="forceAlarm" :loading="forceAlarmLoading" v-if="deviceDetail.alarmStatus === 0 || deviceDetail.alarmStatus === null"
-                            :loading-text="forceAlarmLoading ? '报警中...' : '强制报警'" > {{
-                                forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
+            <el-button
+              type="danger"
+              class="alarm-btn"
+              @click="forceAlarm"
+              :loading="forceAlarmLoading"
+              :loading-text="forceAlarmLoading ? '解除报警' : '强制报警'"
+            >
+              {{ forceAlarmLoading ? '解除报警' : '强制报警' }}</el-button
+            >
           </div>
           <div class="content-card_gps">
             <h4 class="section-title">位置信息</h4>
             <div class="location-info">
               <div class="location-item">
                 <span class="location-icon"></span>
-                                <span>经纬度 {{ deviceDetail && deviceDetail.longitude ?
-                                    Number(deviceDetail.longitude).toFixed(4) : '无' }}
-                                    {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4)
-                                        : '无' }} </span>
+                <span
+                  >经纬度 {{ deviceDetail && deviceDetail.longitude ? Number(deviceDetail.longitude).toFixed(4) : '无' }}
+                  {{ deviceDetail && deviceDetail.latitude ? Number(deviceDetail.latitude).toFixed(4) : '无' }}
+                </span>
               </div>
               <div class="location-item">
-
-                                <div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
-                                <el-button link type="primary" class="view-btn"
-                                    @click="lookMap(deviceDetail)">查看</el-button>
+                <div>
+                  地址 <span class="lacatin_gps">{{ deviceDetail.address || '未获取到地址' }}</span>
+                </div>
+                <el-button link type="primary" class="view-btn" @click="lookMap(deviceDetail)">查看</el-button>
               </div>
             </div>
           </div>
@@ -91,27 +103,29 @@
             <div class="form-grid">
               <div class="form-item">
                 <span class="form-label">单位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入单位名称"
-                                    v-model="deviceDetail.personnelInfo.unitName" />
+                <el-input v-if="deviceDetail" placeholder="请输入单位名称" v-model="deviceDetail.personnelInfo.unitName" />
               </div>
               <div class="form-item">
                 <span class="form-label">职位:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位名称"
-                                    v-model="deviceDetail.personnelInfo.position" />
+                <el-input v-if="deviceDetail" placeholder="请输入职位名称" v-model="deviceDetail.personnelInfo.position" />
               </div>
               <div class="form-item">
                 <span class="form-label">姓名</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入职位姓名"
-                                    v-model="deviceDetail.personnelInfo.name" />
+                <el-input v-if="deviceDetail" placeholder="请输入职位姓名" v-model="deviceDetail.personnelInfo.name" />
               </div>
               <div class="form-item">
                 <span class="form-label">ID:</span>
-                                <el-input v-if="deviceDetail" placeholder="请输入ID"
-                                    v-model="deviceDetail.personnelInfo.code" />
+                <el-input v-if="deviceDetail" placeholder="请输入ID" v-model="deviceDetail.personnelInfo.code" />
               </div>
-                            <el-button type="primary" class="register-btn" @click="registerPostInit"
-                                :loading="fullscreenLoading" :loading-text="fullscreenLoading ? '登记中...' : '登记'"> {{
-                                    fullscreenLoading ? '登记中' : '登记' }}</el-button>
+              <el-button
+                type="primary"
+                class="register-btn"
+                @click="registerPostInit"
+                :loading="fullscreenLoading"
+                :loading-text="fullscreenLoading ? '登记中...' : '登记'"
+              >
+                {{ fullscreenLoading ? '登记中' : '登记' }}</el-button
+              >
             </div>
           </div>
         </el-col>
@@ -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="现场危险，停止救援！紧急撤离至安全区域！"
-                                v-model="deviceDetail.sendMsg" resize="none" />
-                            <div style="text-align: end;clear: both;">
-                                <el-button type="primary" class="send-btn" @click="sendTextMessage"
-                                    :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
-                                        sendTextLoading ? '发送中' : '发送' }}</el-button>
+              <el-input
+                type="textarea"
+                class="textareaTFT"
+                :rows="4"
+                placeholder="现场危险，停止救援！紧急撤离至安全区域！"
+                v-model="deviceDetail.sendMsg"
+                resize="none"
+              />
+              <div style="text-align: end; clear: both">
+                <el-button
+                  type="primary"
+                  class="send-btn"
+                  @click="sendTextMessage"
+                  :loading="sendTextLoading"
+                  :loading-text="sendTextLoading ? '发送中...' : '发送'"
+                >
+                  {{ sendTextLoading ? '发送中' : '发送' }}</el-button
+                >
               </div>
             </div>
-
           </div>
         </el-col>
       </el-row>
     </div>
     <!-- ===========充电提示框====== -->
     <el-dialog title="充电提示" v-model="centerDialogVisible" width="15%">
-            <div style="display: flex; align-items: center;">
+      <div style="display: flex; align-items: center">
         <h3 style="color: rgba(224, 52, 52, 1)">设备电量低于20%</h3>
       </div>
       <div>请及时充电</div>
-            <span slot="footer" class="dialog-footer" style="text-align: right;display: block;">
+      <span slot="footer" class="dialog-footer" style="text-align: right; display: block">
         <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
       </span>
     </el-dialog>
@@ -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 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[]>([
   {
@@ -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";
-        const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
-        const matchedMode = lightModes.value.find(
-            mode => mode.instructValue === mainLightMode
-        );
+    let targetModeId = 'strong';
+    const mainLightMode = String(res.data.mainLightMode || '1'); // 接口值转字符串，“强光”
+    const matchedMode = lightModes.value.find((mode) => mode.instructValue === mainLightMode);
     if (matchedMode) {
       targetModeId = matchedMode.id;
     }
@@ -339,8 +354,8 @@ const getList = async () => {
     laserMode.value.active = laserStatus === 1;
     laserMode.value.switchStatus = laserStatus === 1;
   } catch (error) {
-        console.error("获取设备详情失败：", error);
-        setActiveLightMode("strong"); // 异常时默认强光
+    console.error('获取设备详情失败：', error);
+    setActiveLightMode('strong'); // 异常时默认强光
   }
 };
 // 激光接口调用
@@ -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
-        }
-        const registerRes = await api.sendAlarmMessage(data);
+      instructValue: '0' //强制报警1，解除报警0
+    };
+    let mqsend = () => {
+      let msg = JSON.stringify({ 'instruct': [7, data.instructValue, 0, 0, 0, 0] });
+      publish('B/' + deviceDetail.value.deviceImei, msg, { qos: 0, retained: false });
+      deviceDetail.value.alarmStatus = parseInt(data.instructValue);
+      proxy?.$modal.msgSuccess('操作成功');
+    };
+    await api
+      .sendAlarmMessage(data)
+      .then(async (registerRes) => {
         if (registerRes.code !== 200) {
-            proxy?.$modal.msgWarning(registerRes.msg)
-            return
+          mqsend();
+          return;
         }
+
         // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
-        const statusRes = await getDeviceStatus({
+        let deviceImei = deviceDetail.value.deviceImei;
+        const statusRes = await getDeviceStatus(
+          {
             functionMode: 2,
             batchId,
             typeName: 'FunctionAccessBatchStatusRule',
@@ -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('确定要对该设备开启强制报警？', '提示');
-        forceAlarmLoading.value = true
+    let msg = deviceDetail.value.alarmStatus == 1 ? '确定要对该设备解除强制报警？' : '确定要对该设备开启强制报警？';
+    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
-        }
-        const registerRes = await api.sendAlarmMessage(data);
+      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',
@@ -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)
-            return
+      proxy?.$modal.msgWarning(registerRes.msg);
+      return;
     }
     // 4. 获取设备状态
-        let deviceImei = deviceDetail.value.deviceImei
-        const statusRes = await getDeviceStatus({
+    let deviceImei = deviceDetail.value.deviceImei;
+    const statusRes = await getDeviceStatus(
+      {
         functionMode: 2,
         batchId,
         typeName: 'FunctionAccessBatchStatusRule',
@@ -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/controlCenter/controlPanel/index.vue

@@ -37,7 +37,7 @@
                 <el-collapse-item name="1">
                   <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
                     <el-form-item label="设备类型" prop="deviceType">
-                      <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
+                      <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
                         <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                           :value="item.deviceTypeId" />
                       </el-select>

src/views/debugCenter/debugPanel/index.vue

@@ -25,7 +25,7 @@
           <el-collapse-item name="1">
             <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
               <el-form-item label="设备类型" prop="deviceType">
-                <el-select v-model="queryParams.deviceType" placeholder="设备类型">
+                <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
                   <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
                 </el-select>
               </el-form-item>
@@ -207,7 +207,14 @@
           <div class="title">操作说明</div>
           <div class="imgs">
             <div class="Preview">
-              <img onerror="this.style.display='none'" v-for="(item, index) in cEdit.fileOprat" class="img" :src="item.src" />
+              <div class="imgContent" v-for="(item, index) in cEdit.fileOprat">
+                <img class="img" :src="item.src" />
+                <div class="opt" @click.stop="DelImg(item, index, 'fileOprat')">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </div>
+              </div>
             </div>
           </div>
           <div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
@@ -231,8 +238,8 @@
 
     <!-- 提示框 -->
     <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
-      <span>
-        {{ Status.confirm.text }}
+      <span v-html="Status.confirm.text">
+        
       </span>
       <template #footer>
         <div class="dialog-footer">
@@ -340,8 +347,7 @@ function handleQuery() {
 const isSelectable = (row: any) => {
   // 仅当在线状态（onlineStatus == 1）时允许选中
   return row.onlineStatus === 1;
-}
-
+};
 
 function getList() {
   Status.loading = true;
@@ -425,6 +431,7 @@ function ShowMultiEdit(type: MideaType) {
 
   setTimeout(dragImgAddEvt, 500);
 }
+
 function ShowSingleEdit(item) {
   Status.ShowEditPop = true;
   //期待接口返回以下4个字段
@@ -591,7 +598,7 @@ function SaveItemData() {
   var formData = new FormData();
   formData.append('deviceId', cEdit.deviceId);
   formData.append('deviceImei', cEdit.deviceImei);
-  formData.append("fileIds",cEdit.fileIds);
+  formData.append('fileIds', cEdit.fileIds);
 
   cEdit.fileParam.forEach((v) => {
     if (v.file) {
@@ -615,11 +622,20 @@ function SaveItemData() {
       if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
         if (res[0].value.code == 200 && res[1].value.code == 200) {
           CloseSingleEdit();
-          alert('操作成功');
+          alert('<span class="green">操作成功</span>');
           return;
         }
       }
-      alert('全部失败或部分失败');
+      if(res[0].status == 'fulfilled' && res[0].value.code == 200){
+        alert('<span class="green">产品参数、操作说明、操作视频保存成功</span>，<span class="red">开机画面保存失败</span>');
+        return;
+      }
+
+      if(res[1].status == 'fulfilled' && res[1].value.code == 200){
+        alert('<span class="red">产品参数、操作说明、操作视频保存失败</span>，<span class="green">开机画面保存成功</span>');
+        return;
+      }
+      alert('<span class="red">操作失败</span>');
     })
     .finally(() => {
       Status.fullLoading = false;
@@ -823,12 +839,10 @@ var hideConfirm = function () {
 
 //删除某个图片
 function DelImg(item, index, type) {
-  
   if (item.id) {
     confirm('您确认删除吗?', () => {
       cEdit.fileIds.push(item.id);
       cEdit[type].splice(index, 1);
-
     });
   } else {
     cEdit[type].splice(index, 1);
@@ -1093,5 +1107,4 @@ onMounted(() => {
 .red {
   color: rgba(224, 52, 52, 1);
 }
-
 </style>

src/views/equipmentManagement/deviceType/index.vue

@@ -38,10 +38,13 @@
           <template #default="scope">
             <el-popover placement="right" trigger="click">
               <template #reference>
-                  <img v-if="scope.row.devicePic" :src="scope.row.devicePic"
+                <img
+                  v-if="scope.row.devicePic"
+                  :src="scope.row.devicePic"
                   style="width: 50px; height: 50px; cursor: pointer; object-fit: contain"
-                    class="hover:opacity-80 transition-opacity" />
-                  <img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px;">
+                  class="hover:opacity-80 transition-opacity"
+                />
+                <img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px" />
               </template>
               <img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
             </el-popover>
@@ -85,6 +88,9 @@
             <el-tooltip v-if="scope.row.id !== 1" content="删除" placement="top">
               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
             </el-tooltip>
+            <el-tooltip content="更多" placement="top">
+              <el-button link type="primary" icon="More" @click="ShowSingleEdit(scope.row)"></el-button>
+            </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
@@ -173,6 +179,74 @@
         </div>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
+      <div class="SingEditContent" v-loading="Status.fullLoading">
+        <div class="Param item">
+          <div class="title">产品参数</div>
+          <div class="imgs">
+            <div class="Preview">
+              <div class="imgContent" v-for="(item, index) in cEdit.fileParam">
+                <img class="img" :src="item.src" />
+                <div class="opt" @click.stop="DelImg(item, index, 'fileParam')">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </div>
+              </div>
+              <div class="clear"></div>
+            </div>
+          </div>
+          <div class="option center" @click.stop="showCheckFile('fileParam')">添加</div>
+          <div class="clear">
+            <input type="file" accept="image/*" id="fileParam" class="displayNone" />
+          </div>
+        </div>
+        <div class="Oprat item">
+          <div class="title">操作说明</div>
+          <div class="imgs">
+            <div class="Preview">
+              <div class="imgContent" v-for="(item, index) in cEdit.fileOprat">
+                <img class="img" :src="item.src" />
+                <div class="opt" @click.stop="DelImg(item, index, 'fileOprat')">
+                  <el-icon>
+                    <Delete />
+                  </el-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
+          <div class="clear">
+            <input type="file" accept="image/*" id="fileOprat" class="displayNone" />
+          </div>
+        </div>
+        <div class="Video item">
+          <div class="title">操作视频</div>
+          <div class="img fleft" style="width: calc(100% - 80px)">
+            <el-input v-model="cEdit.Video" placeholder="输入网址" />
+          </div>
+          <div class="clear"></div>
+        </div>
+      </div>
+      <div class="center" style="margin-top: 20px">
+        <el-button type="primary" @click="SaveItemData"> 确定 </el-button>
+        <el-button type="primary" plain @click="CloseSingleEdit"> 取消 </el-button>
+      </div>
+    </el-dialog>
+
+    <!-- 提示框 -->
+    <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
+      <span>
+        {{ Status.confirm.text }}
+      </span>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="Status.confirm.OkCallback"> 确定 </el-button>
+          <el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">取消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -181,6 +255,8 @@ import api from '@/api/equipmentManagement/deviceType/index';
 import { deviceTypeQuery } from '@/api/equipmentManagement/deviceType/types';
 import { getDicts } from '@/api/system/dict/data';
 import { to } from 'await-to-js';
+import debug from '@/api/debugCenter/debugCenter';
+import common from '@/utils/common';
 import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
 import {
   ElDialog,
@@ -229,6 +305,36 @@ const appmodelDictionaryOptions = ref<any[]>([]);
 const pcmodelDictionaryOptions = ref<any[]>([]);
 var fileC = null;
 var uploadFile = false;
+
+const Status = reactive<any>({
+  ShowEditPop: false,
+  fullLoading: false,
+  confirm: {
+    //弹出框的配置
+    Visible: false,
+    title: '',
+    text: '',
+    cancelCallback: null,
+    OkCallback: null,
+    showCancel: true
+  }
+});
+
+var cEdit = reactive({
+  deviceId: '',
+  deviceImei: '',
+  fileBoot: { name: '', type: '', size: '', src: '', file: null },
+  fileParam: [],
+  fileOprat: [],
+  Video: '',
+  fileIds: []
+});
+var fileInput = document.getElementById('fileInput');
+var fileInputs = {
+  fileParam: null,
+  fileOprat: null
+};
+
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -385,17 +491,14 @@ const submitForm = () => {
           communicationMode: Number(form.value.communicationMode)
         };
 
-         
-
         let formData = new FormData();
         let keys = Object.keys(payload);
 
-         keys.forEach(key=>{
+        keys.forEach((key) => {
           if (key !== 'devicePic') {
             if (payload[key] !== null && payload[key] !== undefined) {
               formData.append(key, payload[key]);
             }
-                
           }
         });
 
@@ -421,7 +524,8 @@ function DropImg(item) {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
     type: 'warning'
-  }).then(() => {
+  })
+    .then(() => {
       form.value.devicePic = null;
     })
     .catch(() => {});
@@ -432,7 +536,6 @@ function AddImg(item) {
   uploadFile = false;
   initControl();
   fileC.click();
-  
 }
 /**
  * 关闭用户弹窗
@@ -453,7 +556,7 @@ const resetForm = () => {
 
 function initControl() {
   if (fileC) {
-    fileC.value="";
+    fileC.value = '';
     return;
   }
 
@@ -462,7 +565,6 @@ function initControl() {
     if (this.files.length) {
       let file = this.files[0];
       if (file.type.indexOf('image/') === 0) {
-        
         let reader = new FileReader();
 
         reader.onload = function (e) {
@@ -484,6 +586,233 @@ function initControl() {
   });
 }
 
+function ShowSingleEdit(item) {
+  debugger;
+  Status.ShowEditPop = true;
+  //期待接口返回以下4个字段
+
+  cEdit.deviceId = item.deviceTypeId;
+
+  // cEdit.fileBoot.src=item.fileBoot;
+
+  // cEdit.fileOprat.src = item.fileOprat;
+  // cEdit.fileParam.src =item.fileParam;
+
+  debug.getDeviceInfoById(item.deviceTypeId).then((res) => {
+    if (res.code == 200) {
+      let video = res.data.appOperationVideoVoList.find((v) => {
+        return v.videoUrl;
+      });
+
+      if (video) {
+        cEdit.Video = video.videoUrl;
+      }
+
+      let arr = res.data.appBusinessFileVoList;
+
+      cEdit.fileOprat = arr
+        .filter((v) => {
+          return v.fileType == 1;
+        })
+        .map((v) => {
+          return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+        });
+
+      cEdit.fileParam = arr
+        .filter((v) => {
+          return v.fileType == 2;
+        })
+        .map((v) => {
+          return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
+        });
+    }
+  });
+
+  setTimeout(addFileEvt, 500);
+}
+
+function addFileEvt() {
+  var checkImgOver = function (res, type) {
+    cEdit[type].push(res);
+  };
+  if (!fileInputs.fileOprat || !fileInputs.fileParam) {
+    fileInputs.fileOprat = document.getElementById('fileOprat');
+    fileInputs.fileParam = document.getElementById('fileParam');
+
+    let keys = Object.keys(fileInputs);
+    keys.forEach((k) => {
+      fileInputs[k].addEventListener('change', () => {
+        handleFiles(fileInputs[k].files).then((res) => {
+          checkImgOver(res, k);
+        });
+      });
+    });
+  }
+}
+
+// 处理选择的文件
+function handleFiles(files) {
+  return new Promise((resolve, reject) => {
+    try {
+      if (files.length === 0) {
+        reject();
+        return;
+      }
+
+      let file = files[0];
+      if (file.size > 10485760) {
+        alert('请选择10M以内的文件');
+        reject();
+        return;
+      }
+      if (file.type.indexOf('image/') == -1) {
+        alert('只能选择图片文件');
+        reject();
+        return;
+      }
+      let json = { file: '', name: '', type: '', size: '', src: null };
+      json.file = file;
+      json.name = file.name;
+      json.type = file.type.replace('image/', '');
+      json.size = common.formatBytes(file.size);
+
+      const reader = new FileReader();
+
+      // 读取完成后设置图片源
+      reader.onload = function (e) {
+        json.src = e.target.result; // 结果是DataURL
+        resolve(json);
+      };
+      reader.onerror = function (ex) {
+        resolve(json);
+      };
+
+      // 读取图片文件
+      reader.readAsDataURL(file);
+    } catch (ex) {
+      reject();
+    }
+  });
+}
+
+function DelImg(item, index, type) {
+  
+  confirm('您确认删除吗?', () => {
+    if (item.id) {
+      cEdit.fileIds.push(item.id);
+      cEdit[type].splice(index, 1);
+    } else {
+      cEdit[type].splice(index, 1);
+    }
+  });
+}
+
+function showCheckFile(type) {
+  if (!type) {
+    fileInput.click();
+  } else {
+    let dom = fileInputs[type];
+    if (!dom) {
+      dom = document.getElementById(type);
+    }
+    dom.click();
+  }
+}
+
+//保存单个设备的数据
+function SaveItemData() {
+  // if (!cEdit.fileBoot.file && !cEdit.fileParam.length && !cEdit.fileOprat.length && !cEdit.Video) {
+  //   alert('开机画面、产品参数、操作说明、操作视频四个项至少填写一项。');
+  //   return;
+  // }
+  Status.fullLoading = true;
+  var formData = new FormData();
+  formData.append('deviceId', cEdit.deviceId);
+  formData.append('deviceImei', cEdit.deviceImei);
+  formData.append('fileIds', cEdit.fileIds);
+
+  cEdit.fileParam.forEach((v) => {
+    if (v.file) {
+      formData.append('parameterFiles', v.file); //产品参数
+    }
+  });
+
+  cEdit.fileOprat.forEach((v) => {
+    if (v.file) {
+      formData.append('explanationFiles', v.file); //操作说明
+    }
+  });
+
+  formData.append('videoUrl', cEdit.Video); //操作视频
+
+  let promise1 = debug.updateItem(formData);
+
+  Promise.allSettled([promise1])
+    .then((res) => {
+      if (res[0].status == 'fulfilled') {
+        if (res[0].value.code == 200) {
+          CloseSingleEdit();
+          alert('操作成功');
+          return;
+        }
+      }
+      alert('全部失败或部分失败');
+    })
+    .finally(() => {
+      Status.fullLoading = false;
+    });
+}
+
+function CloseSingleEdit() {
+  Status.ShowEditPop = false;
+  cEdit.Video = '';
+  cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
+  cEdit.fileOprat = [];
+  cEdit.fileParam = [];
+  cEdit.fileIds = [];
+}
+
+window.confirm = function (text, OK, cancel, title) {
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: text ? text : '此操作不可逆，您确定这样做吗？',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: true,
+    cancelCallback: () => {
+      Status.confirm.Visible = false;
+      if (cancel) {
+        cancel();
+      }
+    }
+  };
+
+  Status.confirm = Cfg;
+};
+
+window.alert = function (text, OK, title) {
+  let Cfg = {
+    Visible: true,
+    title: title ? title : '提示',
+    text: text ? text : '不符合规则',
+    OkCallback: () => {
+      Status.confirm.Visible = false;
+      if (OK) {
+        OK();
+      }
+    },
+    showCancel: false,
+    cancelCallback: null
+  };
+
+  Status.confirm = Cfg;
+};
+
 onMounted(() => {
   getList(); // 初始化列表数据
   getDict();
@@ -504,7 +833,6 @@ onMounted(() => {
   background-color: #ffffff;
   border: 1px solid rgb(220, 223, 230);
   position: relative;
-
 }
 
 .typeImgContent .img {
@@ -553,4 +881,256 @@ onMounted(() => {
   width: 100%;
   height: 100%;
 }
+
+.fleft {
+  float: left;
+}
+
+.fright {
+  float: right;
+}
+
+.clear {
+  clear: both;
+}
+
+.center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.displayNone {
+  display: none !important;
+}
+
+.content {
+  width: 100%;
+  min-height: calc(100vh - 84px);
+  height: calc(100vh - 84px);
+  background: rgba(247, 248, 252, 1);
+  font-size: 16px;
+  box-sizing: border-box;
+  padding: 8px 20px;
+  font-family: 'Microsoft YaHei';
+}
+
+.topTool {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-content: center;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+  border-bottom: 1px solid #e1e2e5f2;
+  margin-bottom: 15px;
+}
+.percent100 {
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+  background: rgba(255, 255, 255, 1);
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+:deep .el-collapse-item__header {
+  display: none !important;
+}
+:deep .el-collapse,
+:deep .el-collapse-item__wrap {
+  border: none !important;
+}
+
+.MultiEditContent {
+  height: 230px;
+  width: 100%;
+  box-sizing: border-box;
+  box-sizing: border-box;
+  border: 1px dashed rgba(56, 64, 79, 0.4);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+}
+
+#MultiEditContent.active {
+  border-color: #3498db;
+  background-color: #f0f7ff;
+}
+
+.txt1 {
+  color: rgba(56, 64, 79, 1);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.txt2 {
+  color: rgba(56, 64, 79, 0.6);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.txt3 {
+  color: rgba(2, 124, 251, 1);
+  cursor: pointer;
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.SingEditContent .item {
+  width: 100%;
+  min-height: 90px;
+  height: auto;
+  border-bottom: 1px dashed #e7e7e7;
+
+  padding: 12px 0px;
+}
+
+.Multi .item {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 0px !important;
+}
+
+.SingEditContent .item.Video {
+  height: 32px;
+  border: none;
+}
+
+.SingEditContent .item .title {
+  width: 80px;
+  float: left;
+  color: rgba(56, 64, 79, 1);
+
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.SingEditContent .item .imgs {
+  width: calc(100% - 110px);
+  float: left;
+  min-height: 90px;
+  height: auto;
+}
+
+.SingEditContent .item .option {
+  width: 30px;
+  float: left;
+  height: 100%;
+  color: rgba(2, 124, 251, 1);
+  cursor: pointer;
+  font-family: Microsoft YaHei;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+#dropArea.active {
+  border-color: #3498db;
+  background-color: #f0f7ff;
+}
+.imgPreview {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+  padding-left: 100px;
+  box-sizing: border-box;
+}
+.imgPreview .img {
+  width: 60px;
+  height: 60px;
+  object-fit: contain;
+}
+.imgPreview .txt {
+  padding-left: 10px;
+  width: calc(100% - 60px);
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.SingEditContent .Preview {
+  width: 100%;
+  height: 100%;
+}
+
+.SingEditContent .Preview .img {
+  height: 90px;
+  width: 160px;
+  object-fit: contain;
+  border-radius: 4px;
+  border: 1px solid #d3d5d7;
+}
+
+.SingEditContent .item .imgContent {
+  height: 90px;
+  width: 160px;
+  float: left;
+  margin-right: 8px;
+  position: relative;
+}
+
+.SingEditContent .item .imgContent .opt {
+  position: absolute;
+  z-index: 1;
+  background-color: #00000091;
+  display: none;
+  top: 0px;
+  left: 0px;
+  height: 90px;
+  width: 160px;
+  cursor: pointer;
+  color: #bd2b2b;
+  font-size: 30px;
+  text-align: center;
+  line-height: 90px;
+}
+.SingEditContent .item .imgContent:hover .opt {
+  display: block !important;
+}
+
+.green {
+  color: rgba(0, 165, 82, 1);
+}
+
+.red {
+  color: rgba(224, 52, 52, 1);
+}
 </style>

src/views/equipmentManagement/devices/index.vue

@@ -227,7 +227,7 @@
           <el-col :span="24">
             <el-form-item label="设备类型" prop="deviceType">
               <el-select v-model="form.deviceType"  placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
-                >
+                clearable filterable>
                 <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
                   :value="item.id" />
               </el-select>
@@ -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) {
@@ -622,6 +627,7 @@ const handleAdd = async () => {
 };
 /** 修改按钮操作 */
 const handleUpdate = async (row?: deviceForm) => {
+  debugger;
   reset();
   dialog.visible = true;
   dialog.title = '修改设备';
@@ -663,29 +669,29 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
   showImeiField.value = false;
   communicationModeInfo.value = null;
   // 编辑时如果有值，根据已有值确定显示哪个字段
-  if (form.value.id) {
-    console.log('zheshi me1 ');
-    // 1. 先判断：Mac 和 Imei 都有值（新增的关键分支）
-    const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
-    const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
-    if (hasMac && hasImei) {
-      //两个都有值：显示两个字段 + 都加校验
-      showMacField.value = true;
-      showImeiField.value = true;
-      console.log('两个字段都有值');
-    } else if (hasMac) {
-      showMacField.value = true;
-      showImeiField.value = false;
-      rules.value.deviceImei = [];
-      console.log('只有 Mac 有值');
-    } else if (hasImei) {
-      showImeiField.value = true;
-      showMacField.value = false;
-      rules.value.deviceMac = [];
-      console.log('只有 Imei 有值');
-    }
-    return;
-  }
+  // if (form.value.id) {
+  //   console.log('zheshi me1 ');
+  //   // 1. 先判断：Mac 和 Imei 都有值（新增的关键分支）
+  //   const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
+  //   const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
+  //   if (hasMac && hasImei) {
+  //     //两个都有值：显示两个字段 + 都加校验
+  //     showMacField.value = true;
+  //     showImeiField.value = true;
+  //     console.log('两个字段都有值');
+  //   } else if (hasMac) {
+  //     showMacField.value = true;
+  //     showImeiField.value = false;
+  //     rules.value.deviceImei = [];
+  //     console.log('只有 Mac 有值');
+  //   } else if (hasImei) {
+  //     showImeiField.value = true;
+  //     showMacField.value = false;
+  //     rules.value.deviceMac = [];
+  //     console.log('只有 Imei 有值');
+  //   }
+  //   return;
+  // } 
   if (isProcessing) return;
   isProcessing = true;
   // 新增或编辑时没有值，根据设备类型获取通讯方式

src/views/equipmentManagement/devices/shareManage.vue

@@ -141,6 +141,7 @@
 import request from '@/utils/request';
 import common from '@/utils/common';
 import api from '@/api/equipmentManagement/device/shareManage';
+import { dataURLtoImage } from 'image-conversion';
 const props = defineProps({
   data: {
     type: Object,
@@ -211,18 +212,172 @@ var dic = reactive({
 });
 
 
-var power = computed(() => {
-  let arr = [];
-  let keys = Object.keys(dic);
-  keys.forEach((key) => {
-    arr.push({ label: dic[key], value: key });
-  });
-  return arr;
-});
+var power =ref([]); 
+
+function calcPower() {
+  
+
+  let array = [{
+				value: "1",
+				label: "灯光模式",
+				checked: false,
+				type: ['BJQ6170', 'HBY670','HBY102','BJQ6155','HBY650','BJQ7305','61XH55']
+			},
+			{
+				value: "2",
+				label: "激光模式",
+				checked: false,
+				type: ['BJQ6170']
+			},
+			{
+				value: "3",
+				label: "开机画面",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
+			},
+			{
+				value: "4",
+				label: "人员信息登记",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
+			},
+			{
+				value: "5",
+				label: "发送信息",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670']
+			},
+			{
+				value: "6",
+				label: "产品信息",
+				checked: false,
+				type: ['HBY210', 'BJQ6170', 'HBY670']
+			}, {
+				value: "41",
+				label: "静电探测",
+				checked: false,
+				type: ['HBY670','HBY650']
+			}, {
+				value: "42",
+				label: "SOS",
+				checked: false,
+				type: ['HBY670','BJQ4877']
+			},
+			{
+				value: "43",
+				label: "联机设备",
+				checked: false,
+				type: ['HBY210']
+			},
+				{
+				value: "44",
+				label: "报警声音",
+				checked: false,
+				type: ['HBY210']
+			},
+				{
+				value: "45",
+				label: "自动报警",
+				checked: false,
+				type: ['HBY210']
+			},
+				{
+				value: "46",
+				label: "手动报警",
+				checked: false,
+				type: ['HBY210','HBY102']
+			},
+				{
+				value: "47",
+				label: "报警时长",
+				checked: false,
+				type: ['HBY210']
+			},
+			{
+				value: "48",
+				label: "物体感应",
+				checked: false,
+				type: ['HBY102']
+			},
+			{
+				value: "49",
+				label: "联机模式",
+				checked: false,
+				type: ['HBY102']
+			},
+			
+			{
+				value: "50",
+				label: "报警模式",
+				checked: false,
+				type: ['HBY100','HBY100-J']
+			},
+			
+			{
+				value: "51",
+				label: "警示灯",
+				checked: false,
+				type: ['HBY100','HBY100-J']
+			},
+			
+			{
+				value: "52",
+				label: "语音管理",
+				checked: false,
+				type: ['HBY100','HBY100-J']
+			},
+			
+			{
+				value: "53",
+				label: "箭头模式",
+				checked: false,
+				type: ['BJQ4877']
+			},
+			{
+				value: "54",
+				label: "配组设置",
+				checked: false,
+				type: ['BJQ4877']
+			},
+			{
+				value: "55",
+				label: "修改信道",
+				checked: false,
+				type: ['BJQ4877']
+			},
+			{
+				value: "56",
+				label: "灯光类型设置",
+				checked: false,
+				type: ['HBY100-J']
+			}
+		];
+
+     
+let f=array.filter(v=>{
+ if(v.type.indexOf(data.value.typeName)>-1){
+  return true;
+ }
+ return false;
+})
+
+power.value=f;
+
+  // let arr = [];
+  // let keys = Object.keys(dic);
+
+  // keys.forEach((key) => {
+  //   arr.push({ label: dic[key], value: key });
+  // });
+  // return arr;
+};
+
+
 //打开编辑
 function ShowEdit() {
   Status.ShowEditPop = true;
   getUsrs();
+  calcPower();
 }
 //关闭编辑
 function CloseEdit() {
@@ -276,6 +431,7 @@ function SaveFormData(type) {
 }
 
 function getPower(item) {
+  
   let str = [];
   if (item && item.permission) {
     let arr = item.permission.split(',');

src/views/index.vue

@@ -4,20 +4,28 @@
     <div>
       <h2>数据总览</h2>
       <div class="data-item">
-        <div class="data_bck">
-          <div class="number"><span>{{ DataOverview.devicesNumber }}</span> 个</div>
+        <div class="data_bck data">
+          <div class="number">
+            <span>{{ DataOverview.devicesNumber }}</span> 个
+          </div>
           <div class="title_number">设备数量</div>
         </div>
-        <div class="data_green">
-          <div class="number"><span>{{ DataOverview.equipmentOnline }}</span> 个</div>
+        <div class="data_green data">
+          <div class="number">
+            <span>{{ DataOverview.equipmentOnline }}</span> 个
+          </div>
           <div class="title_number">在线设备</div>
         </div>
-        <div class="data_orgine">
-          <div class="number"><span>{{ DataOverview.binding }}</span> 个</div>
+        <div class="data_orgine data">
+          <div class="number">
+            <span>{{ DataOverview.binding }}</span> 个
+          </div>
           <div class="title_number">已绑定设备</div>
         </div>
-        <div class="data_red">
-          <div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
+        <div class="data_red data">
+          <div class="number">
+            <span>{{ DataOverview.equipmentAbnormal }}</span> 个
+          </div>
           <div class="title_number">异常设备</div>
         </div>
       </div>
@@ -28,10 +36,8 @@
           <div class="content-row">
             <h2>设备分类</h2>
             <div class="card-header">
-              <div v-for="(item, index) in deviceList" :key="index" class="progress-item"
-                style="display: inline-block; margin-right: 40px;">
-                <el-progress :stroke-width="7" type="circle" :width="100"
-                  :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
+              <div v-for="(item, index) in deviceList" :key="index" class="progress-item" style="display: inline-block; margin-right: 40px">
+                <el-progress :stroke-width="7" type="circle" :width="100" :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
                   <template #default>
                     <div class="progress-text">
                       <span class="current">{{ item.current }}</span>
@@ -77,20 +83,12 @@
             <div class="card-header">
               <h2>设备使用频次</h2>
               <div class="chart-controls">
-                <el-select v-model="deviceType" placeholder="设备类型" style="width: 150px;"
-                  @change="handleDeviceTypeChange">
-                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
-                    :value="item.deviceTypeId" />
+                <el-select v-model="deviceType" placeholder="设备类型" style="width: 150px" @change="handleDeviceTypeChange">
+                  <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
                 </el-select>
                 <div class="tab-group">
-                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '1' }"
-                    @click="updateFrequencyChart('1')">
-                    近半年
-                  </div>
-                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '2' }"
-                    @click="updateFrequencyChart('2')">
-                    近一年
-                  </div>
+                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '1' }" @click="updateFrequencyChart('1')">近半年</div>
+                  <div class="tab-item" :class="{ 'tab-item--active': activeTab === '2' }" @click="updateFrequencyChart('2')">近一年</div>
                 </div>
               </div>
             </div>
@@ -141,8 +139,8 @@
 </template>
 
 <script setup name="Index" lang="ts">
-import api from '@/api/home/index'
-import { DataOverviewType } from '@/api/home/types'
+import api from '@/api/home/index';
+import { DataOverviewType } from '@/api/home/types';
 import router from '@/router';
 import * as echarts from 'echarts'; // 引入ECharts核心库
 import apiTypeAll from '@/api/equipmentManagement/device/index';
@@ -153,15 +151,15 @@ const DataOverview = ref<DataOverviewType>({
   equipmentAbnormal: 0
 });
 const deviceTypeOptions = ref([]); //设备类型
-const deviceType = ref()
+const deviceType = ref();
 const activeTab = ref('1');
-const alarmsData = ref()
+const alarmsData = ref();
 // ---------------------- 基础数据 ----------------------
 // 设备分类数据
 const deviceList = ref([
-  { name: "4G设备", current: 0, total: 0 },
-  { name: "蓝牙设备", current: 0, total: 0 },
-  { name: "4G&蓝牙设备", current: 0, total: 0 },
+  { name: '4G设备', current: 0, total: 0 },
+  { name: '蓝牙设备', current: 0, total: 0 },
+  { name: '4G&蓝牙设备', current: 0, total: 0 }
 ]);
 // ---------------------- 图表Ref（用于挂载图表实例） ----------------------
 const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
@@ -193,7 +191,7 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
   try {
     let data = {
       deviceTypeId: deviceTypeId
-    }
+    };
     const res = await api.getEquipmentUsageData(range, data);
     const monthData = res.data[0] || {};
     const monthKeys = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12'];
@@ -202,23 +200,24 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
     let filteredKeys, filteredNames, yAxisData;
     const today = new Date();
     const currentMonth = today.getMonth();
-    if (range === '1') {
+
+    let mm = 6;
+    if (range === '2') {
+      mm = 12;
+    }
     const result = [];
-      for (let i = 0; i < 6; i++) {
+    for (let i = 0; i < mm; i++) {
       const targetMonth = (currentMonth - i + 12) % 12;
       result.push(targetMonth);
     }
-      const recent6Months = result.reverse();
+    const recentMonths = result.reverse();
+
+
     // 匹配接口字段和名称
-      filteredKeys = recent6Months.map(monthIndex => monthKeys[monthIndex]);
-      filteredNames = recent6Months.map(monthIndex => monthNames[monthIndex]);
-      yAxisData = filteredKeys.map(key => monthData[key] || 0);
-    } else {
-      // 近一年：全部12个月（1月→12月）
-      filteredKeys = monthKeys;
-      filteredNames = monthNames;
-      yAxisData = filteredKeys.map(key => monthData[key] || 0);
-    }
+    filteredKeys = recentMonths.map((monthIndex) => monthKeys[monthIndex]);
+    filteredNames = recentMonths.map((monthIndex) => monthNames[monthIndex]);
+    yAxisData = filteredKeys.map((key) => monthData[key] || 0);
+
     const chartData = {
       xAxis: filteredNames,
       yAxis: yAxisData,
@@ -258,7 +257,10 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
           areaStyle: {
             color: {
               type: 'linear',
-              x: 0, y: 0, x2: 0, y2: 1,
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
               colorStops: [
                 { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                 { offset: 1, color: 'rgba(64, 158, 255, 0)' }
@@ -267,21 +269,22 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
           },
           markPoint: {
             data: chartData.peak.value
-              ? [{
+              ? [
+                  {
                     name: chartData.peak.name,
                     value: chartData.peak.value,
                     xAxis: chartData.xAxis.indexOf(chartData.peak.month),
                     yAxis: chartData.peak.value,
                     itemStyle: { color: '#409eff' }
-              }]
+                  }
+                ]
               : []
           }
         }
       ]
     };
     frequencyChartInstance.setOption(option);
-  } catch (error) {
-  }
+  } catch (error) {}
 };
 /**
  * 2. 报警环形图（今日报警处理占比）
@@ -292,7 +295,7 @@ const initAlarmRingChart = async () => {
   try {
     const res = await api.getAlarmInformation({});
     const { alarmsTotalToday = 0, processingAlarmToday = 0 } = res.data || {};
-    alarmsData.value = res.data || '0'
+    alarmsData.value = res.data || '0';
     alarmRingChartInstance = echarts.init(alarmRingChartRef.value);
     const option = {
       tooltip: {
@@ -312,10 +315,7 @@ const initAlarmRingChart = async () => {
           label: {
             show: true,
             position: 'center',
-            formatter: [
-              '{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}',
-              '{textStyle|今日报警/处理}'
-            ].join('\n'), // 换行
+            formatter: ['{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}', '{textStyle|今日报警/处理}'].join('\n'), // 换行
             // 关键：配置 rich 定义样式
             rich: {
               valueStyle: {
@@ -338,7 +338,6 @@ const initAlarmRingChart = async () => {
             show: false // 隐藏标签连接线
           },
           data: [
-         
             {
               value: processingAlarmToday,
               name: '已处理',
@@ -348,17 +347,15 @@ const initAlarmRingChart = async () => {
               value: alarmsTotalToday,
               name: '报警',
               itemStyle: { color: '#F65757' }
-            },
-
+            }
           ]
         }
       ]
     };
     alarmRingChartInstance.setOption(option);
     // 报警柱状图
-    initAlarmBarChart()
-  } catch (error) {
-  }
+    initAlarmBarChart();
+  } catch (error) {}
 };
 
 /**
@@ -373,8 +370,8 @@ const initAlarmBarChart = () => {
     { name: '电子围栏', field: 'fenceElectronic' } // fenceElectronic
   ];
 
-  const alarmTypes = alarmTypeMap.map(item => item.name);
-  const alarmCounts = alarmTypeMap.map(item => {
+  const alarmTypes = alarmTypeMap.map((item) => item.name);
+  const alarmCounts = alarmTypeMap.map((item) => {
     const value = alarmsData.value[item.field]; // 提取对应字段值
     console.log(`${item.name}数值:`, value); // 打印每个类型的数值
     return value;
@@ -429,19 +426,18 @@ const updateFrequencyChart = (tabValue: any) => {
   if (frequencyChartInstance) {
     frequencyChartInstance.dispose();
   }
-  deviceType.value=''
+  deviceType.value = '';
   initFrequencyChart(tabValue, '');
 };
 const handleDeviceTypeChange = (all) => {
   initFrequencyChart(activeTab.value, all);
-
 };
 // 首页统计接口
 const getData = async () => {
   //  设备总览
-  api.getDataOverview({}).then(res => {
-    DataOverview.value = res.data
-  })
+  api.getDataOverview({}).then((res) => {
+    DataOverview.value = res.data;
+  });
   // 设备分类
   try {
     const res = await api.getEquipmentClassification({});
@@ -450,48 +446,42 @@ const getData = async () => {
     // 映射数据：current 为各类型设备数量，total 为总设备数（6）
     deviceList.value = [
       {
-        name: "4G设备",
+        name: '4G设备',
         current: equipment4G,
         total: total
       },
       {
-        name: "蓝牙设备",
+        name: '蓝牙设备',
         current: deviceBluetooth,
         total: total
       },
       {
-        name: "4G&蓝牙设备",
+        name: '4G&蓝牙设备',
         current: devices4GAndBluetooth,
         total: total
-      },
+      }
     ];
   } catch (error) {
     console.log('获取设备分类数据失败：', error);
   }
   // 设备类型
-  apiTypeAll.deviceTypeAll().then(res => {
+  apiTypeAll
+    .deviceTypeAll()
+    .then((res) => {
       if (res.code == 200) {
         const originalData = Array.isArray(res.data) ? res.data : [];
         deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: '' }].concat(originalData);
       }
-  }).catch(err => {
-
     })
+    .catch((err) => {});
 };
 
-
-
-
-
-
-
-
 // ---------------------- 生命周期钩子（初始化/销毁图表） ----------------------
 onMounted(() => {
   // 页面加载时初始化所有图表
   initFrequencyChart('1', '');
   initAlarmRingChart();
-  getData()
+  getData();
 
   // 监听窗口 resize，自动调整图表大小
   window.addEventListener('resize', () => {
@@ -511,6 +501,10 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+
+.data,.content-row,.region-chart-card{
+  box-shadow: 0px 0px 12px 0px #3c3c3c2b;
+}
 .home {
   padding: 10px 20px 10px 20px;
   background-color: #f5f7fa;
@@ -675,7 +669,6 @@ onUnmounted(() => {
     padding: 16px;
     height: 360px; // 固定图表卡片高度，避免布局错乱
 
-
     .card-body {
       height: calc(100% - 40px); // 卡片内容区高度（减去header高度）
     }
@@ -713,7 +706,7 @@ onUnmounted(() => {
         }
 
         .stat.green {
-          color: #07BE75;
+          color: #07be75;
         }
 
         .label {

vite/plugins/icons.ts

@@ -6,3 +6,4 @@ export default () => {
     autoInstall: true
   });
 };
+