控制面板，不同的设备控制，跳转到不同的控制页

.env.development

@@ -5,8 +5,8 @@ VITE_APP_TITLE = 云平台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
+ VITE_APP_BASE_API = 'http://47.120.79.150/backend'
-VITE_APP_BASE_API = 'http://192.168.2.23:8000'
+#VITE_APP_BASE_API = 'http://192.168.2.23:8000'
 # VITE_APP_BASE_API = 'http://localhost:8000'
 
 

src/api/controlCenter/controlPanel/types.ts

@@ -3,7 +3,7 @@ export interface deviceQuery {
   pageNum: number;
   deviceId: string;
   deviceName: string;
-  deviceStatus: string;
+  onlineStatus: string;
   deviceMac: string;
   deviceImei: string;
   personnelBy: string;

src/views/controlCenter/210/index.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="device-page p-2">
+        这是210控制页面
+    </div>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped></style>

src/views/controlCenter/6170/index.vue

@@ -113,10 +113,13 @@
                         <div class="message-content">
                             <el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
                                 v-model="deviceDetail.sendMsg" resize="none" />
-                            <el-button type="primary" class="send-btn" @click="sendTextMessage"
+                            <div style="text-align: end;clear: both;">
-                                :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
+                                <el-button type="primary" class="send-btn" @click="sendTextMessage"
-                                    sendTextLoading ? '发送中' : '发送' }}</el-button>
+                                    :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
+                                        sendTextLoading ? '发送中' : '发送' }}</el-button>
+                            </div>
                         </div>
+
                     </div>
                 </el-col>
             </el-row>
@@ -310,9 +313,12 @@ const getList = async () => {
             targetModeId = matchedMode.id;
         }
         setActiveLightMode(targetModeId);
-        const laserStatus = res.data.laserLightMode;
+        const laserStatus = Number(res.data.laserLightMode);
         laserMode.value.active = laserStatus === 1;
         laserMode.value.switchStatus = laserStatus === 1;
+        setTimeout(() => {
+            console.log('延迟检查激光状态:', laserMode.value.active, laserMode.value.switchStatus);
+        }, 1000);
     } catch (error) {
         console.error("获取设备详情失败：", error);
         setActiveLightMode("strong"); // 异常时默认强光
@@ -614,11 +620,11 @@ onMounted(async () => {
     connect();
 });
 onUnmounted(() => {
-  // 只有当连接已建立时，才执行断开操作（避免无效调用）
+    // 只有当连接已建立时，才执行断开操作（避免无效调用）
-  if (connected.value) {
+    if (connected.value) {
-    console.log('页面离开，断开MQTT连接');
+        console.log('页面离开，断开MQTT连接');
-    disconnect(); // 调用断开连接方法
+        disconnect(); // 调用断开连接方法
-  }
+    }
 });
 
 </script>
@@ -657,7 +663,7 @@ onUnmounted(() => {
             background: white;
             padding: 0px 20px 50px;
             border: 1px solid #ebeef5;
-            height: 100%;
+            height: 250px;
             position: relative;
         }
 
@@ -730,7 +736,6 @@ onUnmounted(() => {
 
 
         }
-
         .brightness-alarm {
             display: flex;
             justify-content: space-between;
@@ -840,9 +845,9 @@ onUnmounted(() => {
         }
 
         .message-content {
-            display: flex;
+            // display: flex;
-            flex-direction: column;
+            // flex-direction: column;
-            gap: 10px;
+            // gap: 10px;
 
             .el-textarea {
                 border: 1px solid rgba(29, 111, 255, 1);
@@ -861,7 +866,9 @@ onUnmounted(() => {
                 padding: 10px 20px;
                 border-radius: 29px;
                 background: rgba(2, 124, 251, 1);
-                border: none
+                border: none;
+                margin: 20px 0px 30px 0;
+
             }
         }
 

src/views/controlCenter/controlPanel/index.vue

@@ -45,8 +45,8 @@
                     <el-form-item label="设备名称" prop="deviceName">
                       <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
                     </el-form-item>
-                    <el-form-item label="设备状态" prop="deviceStatus">
+                    <el-form-item label="设备状态" prop="onlineStatus">
-                      <el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
+                      <el-select v-model="queryParams.onlineStatus" placeholder="设备状态" clearable>
                         <el-option label="在线" value="1"></el-option>
                         <el-option label="离线" value="0"></el-option>
                       </el-select>
@@ -192,7 +192,7 @@ const initData: PageData<'', deviceQuery> = {
     pageSize: 10,
     deviceId: '',
     deviceName: '',
-    deviceStatus: '',
+    onlineStatus: '',
     deviceMac: '',
     deviceImei: '',
     personnelBy: '',
@@ -299,10 +299,13 @@ const resetQuery = () => {
 };
 
 
-/** 设备控制跳转 */
+/** 设备控制跳转动态取detailPageUrl字段值，跳转 */
 const handleControl = (row: any) => {
   const deviceId = row.id;
-  router.push('/controlCenter/6170/' + deviceId);
+  const detailPageUrl = row.detailPageUrl;
+  const basePath = detailPageUrl.replace(/\/index$/, '');
+  const dynamicPath = `/${basePath}/${deviceId}`;
+  router.push(dynamicPath); // 跳转路由
 };
 
 /** 选择条数  */
@@ -354,12 +357,12 @@ const getDeptTree = async () => {
 const sendTextMessage = () => {
   // 防重复提交
   if (!queryParams.value.deviceType) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选择设备类型');
     return;
   }
   if (ids.value.length == 0) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选中一条设备');
     return;
   }
@@ -368,7 +371,7 @@ const sendTextMessage = () => {
 // 发送文本消息确认
 const submitForm = async () => {
   if (!form.value.messageToSend) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('发送消息不能为空');
     return
   }
@@ -424,12 +427,12 @@ const cancel = () => {
 // 强制报警
 const forceAlarm = async () => {
   if (!queryParams.value.deviceType) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选择设备类型');
     return;
   }
   if (ids.value.length == 0) {
-      ElMessage.closeAll();
+    ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选中一条设备');
     return;
   }