指令下发记录

src/api/controlCenter/controlPanel/index.ts

@@ -12,13 +12,86 @@ export const devicegroupList = (params) => {
 // 设备列表
 export const deviceControlCenterList = (params) => {
     return request({
-        url: '/api/device/controlCenter/list',
+        url: '/api/device/list',
         method: 'get',
         params: params
     });
 };
 
+// 设备详情
+export const deviceDeatil = (id) => {
+    return request({
+        url: `/api/bjq/device/${id}`,
+        method: 'get',
+    });
+};
+// 人员信息发送
+export const registerPersonInfo = (data: any) => {
+    return request({
+        url: `/api/bjq/device/registerPersonInfo`,
+        method: 'post',
+        data: data
+    });
+};
+// 灯光亮度
+export const lightBrightnessSettings = (data: any) => {
+    return request({
+        url: `/api/bjq/device/lightBrightnessSettings`,
+        method: 'post',
+        data: data
+    });
+};
+// 灯光模式
+export const lightModeSettings = (data: any) => {
+    return request({
+        url: `/api/bjq/device/lightModeSettings`,
+        method: 'post',
+        data: data
+    });
+};
+// 激光模式
+export const laserModeSettings = (data: any) => {
+    return request({
+        url: `/api/bjq/device/laserModeSettings`,
+        method: 'post',
+        data: data
+    });
+};
+// 强制报警
+export const sendAlarmMessage = (data: any) => {
+    return request({
+        url: `/api/bjq/device/sendAlarmMessage`,
+        method: 'post',
+        data: data
+    });
+};
+// 获取设备实时状态
+export const deviceRealTimeStatus = (params: any) => {
+    return request({
+        url: `/api/device/realTimeStatus`,
+        method: 'get',
+        params: params
+    });
+};
+// 发送信息
+export const deviceSendMessage = (data: any) => {
+    return request({
+        url: `/api/bjq/device/sendMessage`,
+        method: 'post',
+        data: data
+    });
+};
+
+
 export default {
-devicegroupList,
+    devicegroupList,
-deviceControlCenterList
+    deviceControlCenterList,
+    deviceDeatil,
+    registerPersonInfo,
+    lightBrightnessSettings,
+    lightModeSettings,
+    laserModeSettings,
+    sendAlarmMessage,
+    deviceRealTimeStatus,
+    deviceSendMessage
 };

src/api/controlCenter/controlPanel/types.ts

@@ -4,16 +4,51 @@ export interface deviceQuery {
   deviceId: string;
   deviceName: string;
   deviceStatus: string;
-  deviceMac:string;
+  deviceMac: string;
-  deviceImei:string;
+  deviceImei: string;
-  currentOwnerId:string;
+  personnelBy: string;
-  communicationMode:string;
+  communicationMode: string;
-  queryParams:string;
+  pageSize: Number;
-  pageSize:Number;
+  deviceType: string
 
 }
 export interface deviceVO {
-  user: UserVO;
+  id: number;          // 设备ID
-  roles: string[];
+  deviceName: string;  // 设备名称（对应子组件的device.name）
-  permissions: string[];
+  typeName: string;    // 设备类型/型号（对应子组件的device.model）
+  onlineStatus: 0 | 1; // 设备状态（0=失效/离线，1=正常/在线，对应子组件的device.status）
+  lng?: number;        // 经度（地图打点用）
+  lat?: number;        // 纬度（地图打点用）
+  // 其他字段...
 }
+// 1. 定义设备详情的类型（根据接口返回字段调整！关键：和后端返回的字段名一致）
+export interface DeviceDetail {
+  deviceName: string;       // 设备名称
+  deviceImei: string;            // 设备型号
+  onlineStatus: 0 | 1;      // 设备状态（0=离线，1=在线）
+  batteryPercentage: number;          // 电量（如80，对应80%）
+  batteryRemainingTime: string;        // 续航（如"115"表示115分钟，或直接返回"1小时55分钟"）
+  longitude: string;        // 经度
+  latitude: string;         // 纬度
+  address: string;          // 地址
+  currentLightMode?: string;// 当前选中的灯光模式（如"strong"，对应强光）
+  sendMsg: string;
+  lightBrightness: string;
+  personnelInfo: {                  // 人员信息（嵌套对象，根据接口调整）
+    unitName: string;           // 单位
+    position: string;       // 职位
+    name: string;           // 姓名
+    code: string;         // ID（身份证/工号）
+  };
+
+}
+// 定义灯光模式的类型接口
+export interface LightMode {
+  id: string;
+  name: string;
+  icon: string;
+  activeIcon: string;
+  active: boolean;
+  switchStatus: boolean;
+  instructValue: string
+}

src/api/controlCenter/delivey/index.ts

@@ -0,0 +1,23 @@
+import request from '@/utils/request';
+// 设备分组
+export const devicegroupList = (params) => {
+    return request({
+        url: '/api/device/group/list',
+        method: 'get',
+        params: params
+    });
+};
+// 指令下发记录
+export const deviceInstructionRecord = (params) => {
+    return request({
+        url: '/api/device/instructionRecord',
+        method: 'get',
+        params: params
+    });
+};
+
+
+export default {
+    devicegroupList,
+    deviceInstructionRecord,
+};

src/api/controlCenter/delivey/types.ts

@@ -0,0 +1,21 @@
+export interface deviceQuery {
+  groupId: string;
+  pageNum: number;
+  deviceName: string;
+  deviceMac: string;
+  deviceImei: string;
+  pageSize: Number;
+  deviceType: string;
+  startTime: string; // 接口要求的开始时间字段
+  endTime: string    // 接口要求的结束时间字段
+}
+export interface deviceVO {
+  id: number;          // 设备ID
+  deviceName: string;  // 设备名称（对应子组件的device.name）
+  typeName: string;    // 设备类型/型号（对应子组件的device.model）
+  onlineStatus: 0 | 1; // 设备状态（0=失效/离线，1=正常/在线，对应子组件的device.status）
+  lng?: number;        // 经度（地图打点用）
+  lat?: number;        // 纬度（地图打点用）
+  // 其他字段...
+}
+

src/utils/function.ts

@@ -0,0 +1,111 @@
+/**
+ * 生成短ID (16位字符) 类似随机数
+ */
+export const generateShortId = (): string => {
+  const crypto = window.crypto || (window as any).msCrypto;
+  if (crypto?.getRandomValues) {
+    return Array.from(crypto.getRandomValues(new Uint32Array(3)))
+      .map(n => n.toString(36))
+      .join('')
+      .slice(0, 16);
+  }
+  return Date.now().toString(36) + Math.random().toString(36).substr(2, 8);
+};
+
+export default generateShortId;
+
+// 类型定义
+export interface DeviceStatusOptions {
+  functionMode: number;
+  batchId: string;
+  typeName: string;
+  deviceImei: string;
+  interval?: number;
+}
+export interface ApiResponse<T = any> {
+  code: number;
+  msg: string;
+  data: T;
+}
+export interface DeviceStatusData {
+  functionAccess: 'OK' | 'ACTIVE' | 'FAILED' | 'TIMEOUT' | string;
+  [key: string]: any;
+}
+export type ApiClientFunction = (params: any) => Promise<ApiResponse>;
+/**
+ * 获取设备状态（带自动轮询）
+ * @param options - 配置对象
+ * @param options.functionMode - 功能模式
+ * @param options.batchId - 批次ID
+ * @param options.typeName - 类型名称
+ * @param options.deviceImei - 设备IMEI
+ * @param options.interval - 轮询间隔（毫秒），默认500
+ * @param apiClient - 接口调用函数
+ * @returns 设备状态响应
+ */
+export async function getDeviceStatus(
+  options: DeviceStatusOptions,
+  apiClient: ApiClientFunction
+): Promise<ApiResponse<DeviceStatusData>> {
+  const {
+    functionMode,
+    batchId,
+    typeName,
+    deviceImei,
+    interval = 500
+  } = options;
+  // 添加最大重试次数防止无限循环
+  const checkStatus = async (): Promise<ApiResponse<DeviceStatusData>> => {
+    try {
+      const res = await apiClient({
+        functionMode,
+        batchId,
+        typeName,
+        deviceImei
+      });
+      if (res.code !== 200) {
+        throw new Error(res.msg || '请求失败');
+      }
+      switch (res.data.functionAccess) {
+        case 'OK':
+          return res;
+        case 'ACTIVE':
+          await new Promise(resolve => setTimeout(resolve, interval));
+          return checkStatus();
+        case 'FAILED':
+          throw new Error('设备操作失败');
+        case 'TIMEOUT':
+          throw new Error('设备响应超时');
+        default:
+          throw new Error(`未知状态: ${res.data.functionAccess}`);
+      }
+    } catch (error) {
+      console.error('设备状态轮询错误:', error);
+      throw error;
+    }
+  };
+
+  return checkStatus();
+}
+
+// 使用示例
+/*
+import { getDeviceStatus } from '@/utils/deviceUtils';
+import { apiGetDeviceStatus } from '@/api/device';
+
+try {
+  const result = await getDeviceStatus(
+    {
+      functionMode: 1,
+      batchId: '12345',
+      typeName: 'sensor',
+      deviceImei: '1234567890',
+      interval: 1000
+    },
+    apiGetDeviceStatus
+  );
+  console.log('设备状态:', result.data);
+} catch (error) {
+  console.error('获取设备状态失败:', error);
+}
+*/

src/utils/request.ts

@@ -69,9 +69,9 @@ service.interceptors.request.use(
         const s_time = sessionObj.time; // 请求时间
         const interval = 500; // 间隔时间(ms)，小于此时间视为重复提交
         if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-          const message = '数据正在处理，请勿重复提交';
+          const message = '';
-          console.warn(`[${s_url}]: ` + message);
+         // console.warn(`[${s_url}]: ` + message);
-          return Promise.reject(new Error(message));
+         // return Promise.reject(new Error(message));
         } else {
           cache.session.setJSON('sessionObj', requestObj);
         }

src/views/controlCenter/6170/index.vue

@@ -2,11 +2,15 @@
     <div class="device-page p-2">
         <!-- 头部信息栏 -->
         <div class="header-bar">
-            <div>设备名称：6170零零一</div>
+            <div>设备名称：{{ deviceDetail.deviceName }}</div>
-            <div>设备型号：BJQ6170</div>
+            <div>设备型号：{{ deviceDetail.deviceImei }}</div>
-            <div class="device-status">设备状态：<span class="online">在线</span></div>
+            <div class="device-status">设备状态：
-            <div>电量：80%</div>
+                <span :class="{ online: deviceDetail.onlineStatus === 1, offline: deviceDetail?.onlineStatus === 0 }">
-            <div>续航：1小时55分钟</div>
+                    {{ deviceDetail.onlineStatus === 1 ? "在线" : "离线" }}
+                </span>
+            </div>
+            <div>电量：{{ deviceDetail.batteryPercentage || 0 }}%</div>
+            <div>续航：{{ deviceDetail.batteryRemainingTime || "0" }} 分钟</div>
         </div>
 
         <!-- 主体内容区域 -->
@@ -18,13 +22,20 @@
                         <h4 class="section-title">灯光模式</h4>
                         <div class="light-mode">
                             <!-- 使用v-for循环渲染灯光模式卡片 -->
-                            <div class="mode-card" :class="{ 'active': mode.active }" @click="handleModeClick(mode.id)"
+                            <div class="mode-card" :class="{ 'active': mode.active }"
-                                v-for="mode in lightModes" :key="mode.id">
+                                @click.stop="handleModeClick(mode.id)" v-for="mode in lightModes" :key="mode.id">
                                 <img :src="mode.active ? mode.activeIcon : mode.icon" :alt="mode.name"
                                     class="mode-icon" />
                                 <div class="mode-name">{{ mode.name }}</div>
                                 <el-switch v-model="mode.switchStatus" />
                             </div>
+                            <!-- 激光模式（单独处理） -->
+                            <div class="mode-card" :class="{ 'active': laserMode.active }" @click="handleLaserClick">
+                                <img :src="laserMode.active ? laserMode.activeIcon : laserMode.icon"
+                                    :alt="laserMode.name" class="mode-icon" />
+                                <div class="mode-name">{{ laserMode.name }}</div>
+                                <el-switch v-model="laserMode.switchStatus" />
+                            </div>
                         </div>
                     </div>
                 </el-col>
@@ -32,24 +43,32 @@
                     <div class="brightness-alarm">
                         <div class="brightness-control">
                             <span class="brightness-label">灯光亮度</span>
-                            <el-input class="inputTFT" v-model="brightness" :min="0" :max="100" :step="1"
+                            <el-input class="inputTFT" v-model="deviceDetail.lightBrightness" :min="0" :max="100"
-                                size="small" />
+                                :step="1" size="small" />
                             <span class="brightness-value">%</span>
-                            <el-button type="primary" class="save-btn">保存</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">强制报警</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>经纬度 114°7'E 30°28'N</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">ksjkjwekrnjewrnjewrnjwerjweb</span></div>
+                                <div>地址 <span class="lacatin_gps">{{ deviceDetail.address || "未获取到地址" }}</span></div>
-                                <el-button link type="primary" class="view-btn">查看</el-button>
+                                <el-button link type="primary" class="view-btn"
+                                    @click="lookMap(deviceDetail)">查看</el-button>
                             </div>
                         </div>
                     </div>
@@ -64,21 +83,27 @@
                         <div class="form-grid">
                             <div class="form-item">
                                 <span class="form-label">单位:</span>
-                                <el-input placeholder="请输入设备名称" />
+                                <el-input v-if="deviceDetail" placeholder="请输入单位名称"
+                                    v-model="deviceDetail.personnelInfo.unitName" />
                             </div>
                             <div class="form-item">
                                 <span class="form-label">职位:</span>
-                                <el-input placeholder="请输入设备名称" />
+                                <el-input v-if="deviceDetail" placeholder="请输入职位名称"
+                                    v-model="deviceDetail.personnelInfo.position" />
                             </div>
                             <div class="form-item">
                                 <span class="form-label">姓名</span>
-                                <el-input value="王平安" />
+                                <el-input v-if="deviceDetail" placeholder="请输入职位姓名"
+                                    v-model="deviceDetail.personnelInfo.name" />
                             </div>
                             <div class="form-item">
                                 <span class="form-label">ID:</span>
-                                <el-input placeholder="请输入设备名称" />
+                                <el-input v-if="deviceDetail" placeholder="请输入ID"
+                                    v-model="deviceDetail.personnelInfo.code" />
                             </div>
-                            <el-button type="primary" class="register-btn">登记</el-button>
+                            <el-button type="primary" class="register-btn" @click="registerPostInit"
+                                :loading="fullscreenLoading" :loading-text="fullscreenLoading ? '登记中...' : '登记'"> {{
+                                    fullscreenLoading ? '登记中' : '登记' }}</el-button>
                         </div>
                     </div>
                 </el-col>
@@ -86,9 +111,11 @@
                     <div class="content-card">
                         <h4 class="section-title">发送信息</h4>
                         <div class="message-content">
-                            <el-input type="textarea" class="textareaTFT" :rows="4" value="现场危险，停止救援！紧急撤离至安全区域！"
+                            <el-input type="textarea" class="textareaTFT" :rows="4" placeholder="现场危险，停止救援！紧急撤离至安全区域！"
-                                resize="none" />
+                                v-model="deviceDetail.sendMsg" resize="none" />
-                            <el-button type="primary" class="send-btn">发送</el-button>
+                            <el-button type="primary" class="send-btn" @click="sendTextMessage"
+                                :loading="sendTextLoading" :loading-text="sendTextLoading ? '发送中...' : '发送'"> {{
+                                    sendTextLoading ? '发送中' : '发送' }}</el-button>
                         </div>
                     </div>
                 </el-col>
@@ -97,18 +124,12 @@
     </div>
 </template>
 <script setup name="DeviceControl" lang="ts">
-import { ref } from 'vue';
+const route = useRoute();
-
+import api from '@/api/controlCenter/controlPanel/index'
-const brightness = ref(50);
+import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
-// 定义灯光模式的类型接口
+import { generateShortId, getDeviceStatus } from '@/utils/function';
-interface LightMode {
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-    id: string;
+const router = useRouter();
-    name: string;
-    icon: string;
-    activeIcon: string;
-    active: boolean;
-    switchStatus: boolean;
-}
 // 导入图片资源（确保路径正确）
 import strongLightDefault from '@/assets/images/strong-light.png';
 import strongLightActive from '@/assets/images/strong-light_HL.png';
@@ -120,8 +141,13 @@ import floodLightDefault from '@/assets/images/flood-light.png';
 import floodLightActive from '@/assets/images/flood-light_HL.png';
 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 lightModes = ref<LightMode[]>([
     {
@@ -129,71 +155,351 @@ const lightModes = ref<LightMode[]>([
         name: '强光',
         icon: strongLightDefault, // 直接使用导入的变量
         activeIcon: strongLightActive,
+        switchStatus: true,
+        instructValue: '1',
         active: true,
-        switchStatus: true
     },
     {
         id: 'weak',
         name: '弱光',
         icon: weakLightDefault,
         activeIcon: weakLightActive,
+        switchStatus: false,
+        instructValue: '2',
         active: false,
-        switchStatus: false
     },
     {
         id: 'strobe',
         name: '爆闪',
         icon: strobeLightDefault,
         activeIcon: strobeLightActive,
-        active: false,
+        switchStatus: false,
-        switchStatus: false
+        instructValue: '3',
+        active: false
     },
     {
         id: 'flood',
         name: '泛光',
         icon: floodLightDefault,
         activeIcon: floodLightActive,
-        active: false,
+        switchStatus: false,
-        switchStatus: false
+        instructValue: '4',
+        active: false
     },
     {
-        id: 'laser',
+        id: 'close',
-        name: '激光',
+        name: '关闭',
-        icon: laserLightDefault,
+        icon: closeDefault,
-        activeIcon: laserLightActive,
+        activeIcon: closeActive,
-        active: false,
+        switchStatus: false,
-        switchStatus: false
+        instructValue: '0',
-    }
+        active: false
+    },
 ]);
-// 当前选中的模式
+const laserMode = ref<LightMode>({
-const currentMode = computed(() => {
+    id: 'laser',
-    return lightModes.value.find(mode => mode.active);
+    name: '激光',
+    icon: laserLightDefault,
+    activeIcon: laserLightActive,
+    switchStatus: false,
+    instructValue: '1',
+    active: false
 });
-// 处理模式点击事件
-const handleModeClick = (modeId: string) => {
-    // 重置所有模式状态
-    lightModes.value.forEach(mode => {
-        const isTargetMode = mode.id === modeId;
-        mode.active = isTargetMode;
-        mode.switchStatus = isTargetMode;
-    });
 
-    // 可以在这里添加模式切换的业务逻辑
+const deviceDetail = ref<DeviceDetail>({
-    console.log(`切换到${lightModes.value.find(m => m.id === modeId)?.name}模式`);
+    // 重点：personnelInfo 初始化为空对象，避免 undefined
-};
+    personnelInfo: {
-
+        unitName: '',
-// 监听开关状态变化
+        position: '',
-lightModes.value.forEach(mode => {
+        name: '',
-    watch(() => mode.switchStatus, (newVal) => {
+        code: ''
-        if (newVal) {
+    },
-            // 如果打开当前开关，关闭其他所有开关
+    lightBrightness: '',
-            handleModeClick(mode.id);
+    deviceName: '',
+    deviceImei: '',
+    onlineStatus: 0,
+    batteryPercentage: 0,
+    batteryRemainingTime: '',
+    longitude: '',
+    latitude: '',
+    address: '',
+    sendMsg: ''
+});
+// 保留原有的操作中标志位
+const isUpdatingStatus = ref(false);
+const handleModeClick = async (modeId: string) => {
+    if (isUpdatingStatus.value || isSyncingStatus.value) return;
+    try {
+        const deviceId = route.params.deviceId as string;
+        if (!deviceId) return;
+        const targetMode = lightModes.value.find(m => m.id === modeId);
+        if (!targetMode || !targetMode.instructValue) return;
+        // 标记为用户操作中的更新
+        isUpdatingStatus.value = true;
+        // 调用接口（仅用户点击时触发一次）
+        const res = await api.lightModeSettings({
+            deviceId,
+            instructValue: targetMode.instructValue,
+            deviceImei: deviceDetail.value.deviceImei,
+            typeName: deviceDetail.value.typeName,
+        });
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess(res.msg);
+            setActiveLightMode(modeId);
+            await getList();
         } else {
-            // 如果关闭当前开关
+            proxy?.$modal.msgError(res.msg);
-            mode.active = false;
+            const prevActiveMode = lightModes.value.find(m => m.active);
+            if (prevActiveMode) {
+                setActiveLightMode(prevActiveMode.id);
+            }
+        }
+    } catch (error) {
+        proxy?.$modal.msgError("操作失败，请稍后重试");
+        // 异常时恢复状态
+        const prevActiveMode = lightModes.value.find(m => m.active);
+        if (prevActiveMode) {
+            setActiveLightMode(prevActiveMode.id);
+        }
+    } finally {
+        // 无论成功失败，最终重置用户操作标志位
+        isUpdatingStatus.value = false;
+    }
+};
+const isSyncingStatus = ref(false);
+const setActiveLightMode = (targetModeId: string) => {
+    isSyncingStatus.value = true; // 开启阻断：更新switchStatus时，watch不触发接口
+    lightModes.value.forEach(mode => {
+        const isActive = mode.id === targetModeId;
+        mode.active = isActive;
+        mode.switchStatus = isActive; // 这里更新会触发watch，但被isSyncingStatus阻断
+    });
+    isSyncingStatus.value = false; // 同步完成，重置标志位
+};
+const getList = async () => {
+    try {
+        const deviceId = route.params.deviceId;
+        if (!deviceId) return;
+        const res = await api.deviceDeatil(deviceId as string);
+        deviceDetail.value = res.data;
+        // 处理人员信息空值（原有逻辑保留）
+        if (!deviceDetail.value.personnelInfo) {
+            deviceDetail.value.personnelInfo = {
+                unitName: '',
+                position: '',
+                name: '',
+                code: ''
+            };
+        }
+        // 1. 匹配接口返回的灯光模式
+        let targetModeId = "strong";
+        const mainLightMode = String(res.data.mainLightMode || "1"); // 接口值转字符串，“强光”
+        const matchedMode = lightModes.value.find(
+            mode => mode.instructValue === mainLightMode
+        );
+        if (matchedMode) {
+            targetModeId = matchedMode.id;
+        }
+        setActiveLightMode(targetModeId);
+        const laserStatus = res.data.laserModeStatus ?? 0;
+        laserMode.value.active = laserStatus === 1;
+        laserMode.value.switchStatus = laserStatus === 1;
+    } catch (error) {
+        console.error("获取设备详情失败：", error);
+        setActiveLightMode("strong"); // 异常时默认强光
+    }
+};
+// 激光接口调用
+const handleLaserClick = async () => {
+    try {
+        const deviceId = route.params.deviceId as string;
+        if (!deviceId) return;
+        const targetStatus = !laserMode.value.active;
+        const res = await api.laserModeSettings({
+            deviceId,
+            deviceImei: deviceDetail.value.deviceImei,
+            typeName: deviceDetail.value.typeName,
+            instructValue: targetStatus ? 1 : 0
+        });
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess(res.msg);
+            laserMode.value.active = targetStatus;
+            laserMode.value.switchStatus = targetStatus;
+            getList();
+        } else {
+            proxy?.$modal.msgError(res.msg);
+            // 恢复之前的状态
+            laserMode.value.switchStatus = !targetStatus;
+        }
+    } catch (error: any) {
+        proxy?.$modal.msgError(error.msg);
+        // 恢复之前的状态
+        laserMode.value.switchStatus = !laserMode.value.switchStatus;
+    } finally { }
+}
+
+// 人员信息发送
+const registerPostInit = () => {
+    if (!deviceDetail.value.personnelInfo.unitName) {
+        proxy?.$modal.msgWarning('单位名称不能为空');
+        return
+    }
+    if (!deviceDetail.value.personnelInfo.name) {
+        proxy?.$modal.msgWarning('姓名不能为空');
+        return
+    }
+    if (!deviceDetail.value.personnelInfo.position) {
+        proxy?.$modal.msgWarning('职位不能为空');
+        return
+    }
+    if (!deviceDetail.value.personnelInfo.code) {
+        proxy?.$modal.msgWarning('ID不能为空');
+        return
+    }
+    let data = {
+        code: deviceDetail.value.personnelInfo.code,
+        name: deviceDetail.value.personnelInfo.name,
+        position: deviceDetail.value.personnelInfo.position,
+        unitName: deviceDetail.value.personnelInfo.unitName,
+        deviceId: route.params.deviceId,
+        deviceImei: deviceDetail.value.deviceImei
+    }
+    fullscreenLoading.value = true
+    api.registerPersonInfo(data).then((res) => {
+        console.log(res, 'res');
+        if (res.code === 200) {
+            fullscreenLoading.value = false
+            proxy?.$modal.msgSuccess(res.msg);
+            getList();
+        } else {
+            fullscreenLoading.value = false
+            proxy?.$modal.msgError(res.msg);
+        }
+    })
+}
+// 灯光亮度
+const saveBtn = () => {
+    lightModesLoading.value = true
+    let data = {
+        deviceId: route.params.deviceId,
+        instructValue: deviceDetail.value.lightBrightness + '.00',
+        deviceImei: deviceDetail.value.deviceImei,
+    }
+    api.lightBrightnessSettings(data).then((res) => {
+        if (res.code === 200) {
+            lightModesLoading.value = false
+            proxy?.$modal.msgSuccess(res.msg);
+            getList();
+        } else {
+            lightModesLoading.value = false
+            proxy?.$modal.msgError(res.msg);
+        }
+
+    })
+}
+// 强制报警
+const forceAlarm = async () => {
+    try {
+        forceAlarmLoading.value = true
+        // 2. 准备请求数据
+        const batchId = generateShortId();
+        let data = {
+            deviceIds: [route.params.deviceId],
+            typeName: deviceDetail.value.typeName,
+            deviceImeiList: [deviceDetail.value.deviceImei],
+            batchId: batchId,
+            instructValue: '1', //强制报警1，解除报警0
+        }
+        const registerRes = await api.sendAlarmMessage(data);
+        if (registerRes.code !== 200) {
+            proxy?.$modal.msgWarning(registerRes.msg)
+            return
+        }
+        // 4. 获取设备状态
+        let deviceImei = deviceDetail.value.deviceImei
+        let typeName = deviceDetail.value.typeName
+        const statusRes = await getDeviceStatus({
+            functionMode: 2,
+            batchId,
+            typeName,
+            deviceImei,
+            interval: 500
+        },
+            api.deviceRealTimeStatus
+        );
+        // 只有当状态为'OK'时才显示成功弹窗
+        if (statusRes.data.functionAccess === 'OK') {
+            proxy?.$modal.msgSuccess(statusRes.msg);
+        }
+
+    } catch (error: any) {
+        proxy?.$modal.msgWarning(error.msg)
+
+    } finally {
+        forceAlarmLoading.value = false;
+    }
+}
+// 发送文本消息
+const sendTextMessage = async () => {
+    // 防重复提交
+    if (!deviceDetail.value.sendMsg) {
+        proxy?.$modal.msgWarning('发送信息不能为空');
+        return;
+    }
+    try {
+        sendTextLoading.value = true;
+        // 2. 准备请求数据
+        const batchId = generateShortId();
+        const data = {
+            sendMsg: deviceDetail.value.sendMsg,
+            deviceIds: [route.params.deviceId],
+            typeName: deviceDetail.value.typeName,
+            batchId: batchId,
+            deviceImeiList: [deviceDetail.value.deviceImei],
+        };
+        // 3.人员信息
+        const registerRes = await api.deviceSendMessage(data);
+        if (registerRes.code !== 200) {
+            proxy?.$modal.msgWarning(registerRes.msg)
+            return
+        }
+        // 4. 获取设备状态
+        let deviceImei = deviceDetail.value.deviceImei
+        let typeName = deviceDetail.value.typeName
+        const statusRes = await getDeviceStatus({
+            functionMode: 2,
+            batchId,
+            typeName,
+            deviceImei,
+            interval: 500
+        },
+            api.deviceRealTimeStatus
+        );
+        // 只有当状态为'OK'时才显示成功弹窗
+        if (statusRes.data.functionAccess === 'OK') {
+            proxy?.$modal.msgSuccess(statusRes.msg);
+        }
+    } catch (error: any) {
+        proxy?.$modal.msgWarning(error.msg)
+    } finally {
+        sendTextLoading.value = false;
+    }
+}
+const lookMap = (row: any) => {
+    console.log(row, 'row');
+    router.push({
+        path: '/controlCenter/controlPanel', // 目标页面的正确路由路径（需与项目路由配置一致）
+        query: {
+            view: 'map',
+            deviceId: row.deviceId // 可选：传递当前设备ID，用于地图定位/筛选
         }
     });
+}
+
+onMounted(() => {
+    getList();
 });
+
 </script>
 <style lang="scss" scoped>
 .device-page {
@@ -252,14 +558,15 @@ lightModes.value.forEach(mode => {
 
             justify-content: space-between;
         }
-          .lacatin_gps {
+
-                height: 70px;
+        .lacatin_gps {
-                border-radius: 4px;
+            height: 70px;
-                background: rgba(247, 248, 252, 1);
+            border-radius: 4px;
-                display: inline-block;
+            background: rgba(247, 248, 252, 1);
-                width: 400px;
+            display: inline-block;
-                padding: 10px;
+            width: 400px;
-            }
+            padding: 10px;
+        }
 
         .mode-card {
             display: flex;
@@ -282,6 +589,7 @@ lightModes.value.forEach(mode => {
                 margin-bottom: 10px;
                 transition: all 0.3s ease;
                 object-fit: scale-down;
+                height: 50px;
             }
 
             .mode-name {
@@ -295,7 +603,7 @@ lightModes.value.forEach(mode => {
                 --el-switch-off-color: #dcdfe6;
             }
 
-          
+
         }
 
         .brightness-alarm {

src/views/controlCenter/controlPanel/components/map.vue

@@ -11,17 +11,18 @@
           </div>
 
           <!-- 设备项（带复选框） -->
-          <div class="device_item" v-for="device in deviceList" :key="device.id">
+          <div class="device_item" v-for="(device, index) in props.deviceList" :key="index">
             <!-- 复选框 -->
             <el-checkbox :value="device.id" v-model="checkedDeviceIds" class="device_checkbox"></el-checkbox>
 
             <!-- 设备信息 -->
             <div class="device_page">
               <div class="device_info">
-                <div class="device_name">{{ device.name }}</div>
+                <div class="device_name">{{ device.deviceName }}</div>
-                <div class="device_model">{{ device.model }}</div>
+                <div class="device_model">{{ device.typeName }}</div>
-                <div class="device_status" :class="{ online: device.status === '在线', offline: device.status === '离线' }">
+                <div class="device_status"
-                  {{ device.status }}
+                  :class="{ online: device.onlineStatus === 1, offline: device.onlineStatus === 0 }">
+                  {{ device.onlineStatus === 1 ? '在线' : '离线' }}
                 </div>
               </div>
 
@@ -38,6 +39,15 @@
 </template>
 
 <script setup lang="ts">
+const props = defineProps({
+  deviceList: {
+    type: Array,
+    required: false,
+    default: () => [] // 数组/对象类型的默认值必须用函数返回，避免引用共享
+  }
+});
+console.log(props.deviceList);
+
 const router = useRouter();
 // 声明高德地图全局类型
 declare var AMap: any;
@@ -50,56 +60,94 @@ const AMAP_SECURITY_CODE = '5ed9004cb461cd463580b02a775c8d91';
 const mapRef = ref<HTMLDivElement | null>(null);
 let mapInstance: any = null;
 
-// 模拟设备数据
-const deviceList = ref([
-  { id: 1, name: '6170一号', model: 'BJQ6170', status: '在线', lng: 114.4074, lat: 30.5928 },
-  { id: 2, name: '6170二号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.5928 },
-  { id: 3, name: '6170三号', model: 'BJQ6170', status: '离线', lng: 114.4074, lat: 30.6028 },
-  { id: 4, name: '6170四号', model: 'BJQ6170', status: '在线', lng: 114.4174, lat: 30.6028 },
-]);
-
 // 复选框状态管理
-const checkedDeviceIds = ref<number[]>([]); // 存储选中的设备ID
+const checkedDeviceIds = ref(); // 存储选中的设备ID
 const checkAll = ref(false); // 全选状态
 
 // 全选/取消全选
 const handleCheckAllChange = (val: boolean) => {
   checkedDeviceIds.value = val
-    ? deviceList.value.map(device => device.id)  // 全选：选中所有设备ID
+    ? props.deviceList.map(device => device.id)  // 全选：选中所有设备ID
     : [];  // 取消全选：清空
 };
 
 // 监听单个复选框变化，更新全选状态
 watch(checkedDeviceIds, (newVal) => {
-  checkAll.value = newVal.length === deviceList.value.length && deviceList.value.length > 0;
+  checkAll.value = newVal.length === props.deviceList.length && props.deviceList.length > 0;
 });
 
 // 设备控制事件
 const handleControl = (device: any) => {
   console.log('控制设备：', device);
-    const deviceId = device.id;
+  const deviceId = device.id;
   router.push('/controlCenter/6170/' + deviceId);
 };
+// 新增：获取地图中心坐标（优先用设备数据，无则用默认）
+const getCenterCoord = () => {
+  // 1. 遍历设备列表，找第一个有有效经纬度的设备
+  const validDevice = props.deviceList.find(
+    (device:any) =>
+      device.longitude !== undefined &&
+      device.longitude !== null &&
+      device.latitude !== undefined &&
+      device.latitude !== null &&
+      !isNaN(Number(device.longitude)) &&  // 确保是数字（避免字符串空值/非数字）
+      !isNaN(Number(device.latitude))
+  );
 
-// 地图初始化（保持不变）
+  // 2. 有有效设备则用它的坐标，否则用默认值
+  if (validDevice) {
+    return [Number(validDevice.longitude), Number(validDevice.latitude)]; // 转数字防字符串坐标
+  } else {
+    return [114.4074, 30.5928]; // 默认中心坐标
+  }
+};
+// 地图初始化（修改center配置）
 const initMap = () => {
   if (!window.AMap || !mapRef.value) return;
-
+  // 2. 调用函数获取中心坐标（不再用固定值）
+  const centerCoord = getCenterCoord();
   mapInstance = new AMap.Map(mapRef.value, {
-    center: [114.4074, 30.5928],
+    center: centerCoord, // 改用动态获取的坐标
     zoom: 15,
     resizeEnable: true
   });
-
+  // 后续的设备打点逻辑不变...
-  // 设备标记点
+  if (Array.isArray(props.deviceList)) {
-  deviceList.value.forEach(device => {
+    props.deviceList.forEach(device => {
-    new AMap.Marker({
+      console.log(device, 'devicedevice');
-      position: [device.lng, device.lat],
+      if (device.longitude && device.latitude) {
-      title: device.name,
+        new AMap.Marker({
-      map: mapInstance
+          position: [device.longitude, device.latitude],
+          title: device.deviceName,
+          map: mapInstance
+        });
+      }
     });
-  });
+  }
 };
+watch(
+  () => props.deviceList, // 监听props中的deviceList
+  (newDeviceList) => {
+    if (!mapInstance || !Array.isArray(newDeviceList)) return;
+    // 1. 清除地图上已有的所有标记（避免重复打点）
+    mapInstance.clearMap();
+    // 2. 重新添加新的设备标记
+    newDeviceList.forEach((device) => {
+      console.log(device, 'device');
+
+      // 确保设备有经纬度（lng和lat），避免无效打点
+      if (device.longitude && device.latitude) {
+        new AMap.Marker({
+          position: [device.longitude, device.latitude],
+          title: device.deviceName, // 用设备名当标题（匹配父组件字段）
+          map: mapInstance,
+        });
+      }
+    });
+  },
+  { deep: true } // 深度监听（如果设备列表里的子对象变化也能触发）
+);
 
 onMounted(() => {
   window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_CODE };
@@ -168,8 +216,8 @@ onUnmounted(() => {
 }
 
 /* 设备信息区域 */
-.device_page{
+.device_page {
-background-color: rgba(247, 248, 252, 1);
+  background-color: rgba(247, 248, 252, 1);
   margin-bottom: 5px;
   width: 84%;
   padding: 5px;
@@ -213,6 +261,6 @@ background-color: rgba(247, 248, 252, 1);
   bottom: 10px;
   background: rgba(2, 124, 251, 0.06);
   color: rgba(2, 124, 251, 1);
-  border:none;
+  border: none;
 }
 </style>

src/views/controlCenter/controlPanel/index.vue

@@ -21,18 +21,25 @@
                 <el-button :type="!isListView ? 'primary' : ''" @click="switchView('map')">
                   {{ !isListView ? '地图显示' : '地图显示' }}
                 </el-button>
-                <el-button type="primary" plain>发送消息</el-button>
+                <el-button type="primary" plain @click="sendTextMessage">发送消息</el-button>
                 <el-button type="primary" plain>电子围栏</el-button>
-                <el-button type="danger" plain>强制报警</el-button>
+                <el-button type="danger" plain @click="forceAlarm" :loading="forceAlarmLoading"
-                <el-button type="primary" plain>高级筛选</el-button>
+                  :loading-text="forceAlarmLoading ? '报警中...' : '强制报警'"> {{
+                    forceAlarmLoading ? '报警中' : '强制报警' }}</el-button>
+                <div style="position: absolute; right:30px; top:20px">
+                  <el-input v-model="queryParams.deviceMac" placeholder="MAC/IMEI" clearable
+                    style="width: 200px; margin-right: 20px;" />
+                  <el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
+                </div>
+
               </div>
-              <el-collapse accordion>
+              <el-collapse accordion v-model="activeNames">
-                <el-collapse-item title="高级筛选">
+                <el-collapse-item name="1">
                   <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
-                    <el-form-item label="设备类型" prop="deviceId">
+                    <el-form-item label="设备类型" prop="deviceType">
-                      <el-select v-model="queryParams.deviceId" placeholder="全部" clearable>
+                      <el-select v-model="queryParams.deviceType" placeholder="设备类型">
-                        <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
+                        <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
-                          :value="dict.value" />
+                          :value="item.deviceTypeId" />
                       </el-select>
                     </el-form-item>
                     <el-form-item label="设备名称" prop="deviceName">
@@ -51,8 +58,8 @@
                       <el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable
                         @keyup.enter="handleQuery" />
                     </el-form-item>
-                    <el-form-item label="使用人员" prop="currentOwnerId">
+                    <el-form-item label="使用人员" prop="personnelBy">
-                      <el-input v-model="queryParams.currentOwnerId" placeholder="请输入使用人员姓名" clearable
+                      <el-input v-model="queryParams.personnelBy" placeholder="请输入使用人员姓名" clearable
                         @keyup.enter="handleQuery" />
                     </el-form-item>
                     <el-form-item label="通信方式" prop="communicationMode">
@@ -75,8 +82,8 @@
           <div v-if="isListView" key="list">
             <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
               <el-table-column type="selection" width="50" align="center" />
-              <el-table-column  label="设备名称" align="center" prop="deviceName" />
+              <el-table-column label="设备名称" align="center" prop="deviceName" />
-              <el-table-column  label="设备图片" align="center" prop="devicePic">
+              <el-table-column label="设备图片" align="center" prop="devicePic">
                 <template #default="scope">
                   <el-popover placement="right" trigger="click">
                     <template #reference>
@@ -88,13 +95,20 @@
                   </el-popover>
                 </template>
               </el-table-column>
-              <el-table-column  label="设备类型" align="center" prop="typeName" />
+              <el-table-column label="设备类型" align="center" prop="typeName" />
-              <el-table-column  label="使用人员" align="center" prop="personnelBy" />
+              <el-table-column label="设备MAC" align="center" prop="deviceMac">
-              <el-table-column  label="电量" align="center" prop="battery" />
-              <el-table-column  label="设备状态" align="center" prop="onlineStatus">
                 <template #default="scope">
-                  <div class="normal green" v-if="scope.row.onlineStatus==1">在线</div>
+                  <div>{{ scope.row.deviceMac || '/' }}</div>
-                  <div class="normal red" v-if="scope.row.onlineStatus==0">离线</div>
+
+                </template>
+              </el-table-column>
+              <el-table-column label="设备IMEI" align="center" prop="deviceImei" />
+              <el-table-column label="使用人员" align="center" prop="personnelBy" />
+              <el-table-column label="电量" align="center" prop="battery" />
+              <el-table-column label="设备状态" align="center" prop="onlineStatus">
+                <template #default="scope">
+                  <div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
+                  <div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
                 </template>
               </el-table-column>
               <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
@@ -107,23 +121,39 @@
               :total="total" @pagination="getList" />
           </div>
           <div v-else key="map">
-            <Amap />
+            <Amap :deviceList="deviceList"></Amap>
           </div>
         </el-card>
       </el-col>
     </el-row>
+    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <el-form ref="postFormRef" :model="form" label-width="80px">
+        <el-form-item label="发送信息" prop="messageToSend">
+          <el-input type="textarea" v-model="form.messageToSend" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm" :loading="sendTextLoading"
+            :loading-text="sendTextLoading ? '发送中...' : '确 定'"> {{
+              sendTextLoading ? '发送中' : '确 定' }}</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
+
 </template>
 
 <script setup name="User" lang="ts">
 import api from '@/api/controlCenter/controlPanel/index'
+import apiTypeAll from '@/api/equipmentManagement/device/index';
 import { deviceQuery, deviceVO } from '@/api/controlCenter/controlPanel/types';
 import Amap from "./components/map.vue";
-import { optionselect } from '@/api/system/post';
+import { generateShortId, getDeviceStatus } from '@/utils/function';
-import { UserVO } from '@/api/system/user/types';
 const router = useRouter();
+const route = useRoute(); // 新增：用于获取URL中的query参数
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable', 'sys_user_sex'));
 const deviceList = ref<deviceVO[]>();
 const loading = ref(true);
 const showSearch = ref(true);
@@ -133,12 +163,17 @@ const multiple = ref(true);
 const total = ref(0);
 const deptName = ref();
 const deptOptions = ref([])
-const sys_communication = ref([])
 const deptTreeRef = ref<ElTreeInstance>();
 const queryFormRef = ref<ElFormInstance>();
-const userFormRef = ref<ElFormInstance>();
 const isListView = ref(true);
-
+const activeNames = ref([]);
+const deviceTypeOptions = ref([]); //设备类型
+const enabledDeptOptions = ref();
+const forceAlarmLoading = ref(false)  //强制报警
+const sendTextLoading = ref(false)
+const form = ref({
+  messageToSend: ''
+})
 const initData: PageData<'', deviceQuery> = {
   queryParams: {
     pageNum: 1,
@@ -148,24 +183,44 @@ const initData: PageData<'', deviceQuery> = {
     deviceStatus: '',
     deviceMac: '',
     deviceImei: '',
-    currentOwnerId: '',
+    personnelBy: '',
     communicationMode: '',
-    queryParams: '',
+    groupId: '',
-    groupId: ''
+    deviceType: ''
   },
   rules: undefined,
   form: ''
 };
 const data = reactive<PageData<'', deviceQuery>>(initData);
 
-const { queryParams, form, } = toRefs<PageData<'', deviceQuery>>(data);
+const { queryParams } = toRefs<PageData<'', deviceQuery>>(data);
-const switchView = (view) => {
+const switchView = (view: 'list' | 'map') => {
   isListView.value = (view === 'list');
+  router.push({
+    path: route.path,
+    query: {
+      ...(view == '' ? { view: '' } : { view: undefined })
+    }
+  });
 };
+const dialog = reactive<DialogOption>({
+  visible: false,
+  title: ''
+});
 /** 通过条件过滤节点  */
 const filterNode = (value: string, data: any) => {
   if (!value) return true;
-  return data.label.indexOf(value) !== -1;
+  return data.groupName.indexOf(value) !== -1;
+};
+// 设备类型
+const getDeviceType = () => {
+  apiTypeAll.deviceTypeAll().then(res => {
+    if (res.code == 200) {
+      deviceTypeOptions.value = res.data
+    }
+  }).catch(err => {
+
+  })
 };
 /** 根据名称筛选部门树 */
 watchEffect(
@@ -176,23 +231,14 @@ watchEffect(
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
 );
-
+const toggleFilter = () => {
-/** 查询用户列表 */
+  if (activeNames.value.length > 0) {
-const getList = async () => {
+    activeNames.value = [];
-  loading.value = false;
+  } else {
-  const res = await api.deviceControlCenterList(queryParams.value);
+    activeNames.value = ['1'];
-  loading.value = false;
+  }
-  deviceList.value = res.rows;
-  total.value = res.total;
 };
 
-/** 查询部门下拉树结构 */
-const getDeptTree = async () => {
-  const res = await api.devicegroupList('');
-
-  deptOptions.value = res.data;
-  //enabledDeptOptions.value = filterDisabledDept(res.data);
-};
 
 /** 过滤禁用的部门 */
 const filterDisabledDept = (deptList: any[]) => {
@@ -235,28 +281,179 @@ const handleControl = (row: any) => {
 };
 
 /** 选择条数  */
-const handleSelectionChange = (selection: UserVO[]) => {
+const handleSelectionChange = (selection: deviceVO[]) => {
-  ids.value = selection.map((item:any) => item.id);
+  ids.value = selection;
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
-/** 重置操作表单 */
+// 3. 初始化视图状态（关键：根据地址栏view参数赋值）
-const reset = () => {
+const initViewStatus = () => {
-  userFormRef.value?.resetFields();
+  // 打印参数，确认是否获取到view=map（调试用）
+  console.log('地址栏view参数：', route.query.view);
+  // 逻辑：地址栏有view=map → 地图视图（isListView=false）；否则列表视图
+  const currentView = route.query.view as string;
+  isListView.value = currentView !== 'map'; // 关键判断！
 };
-
 onMounted(() => {
   getDeptTree(); // 初始化部门数据
   getList(); // 初始化列表数据
+  getDeviceType() //设备类型
+  initViewStatus()
 });
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = false;
+  const res = await api.deviceControlCenterList(queryParams.value);
+  loading.value = false;
+  deviceList.value = res.rows;
+  total.value = res.total;
+};
+
+/** 查询部门下拉树结构 */
+const getDeptTree = async () => {
+  const res = await api.devicegroupList('');
+  const allDeviceOption = {
+    id: '',
+    groupName: '全部设备',
+    disabled: false,
+    children: []
+
+  };
+  deptOptions.value = [allDeviceOption, ...res.data]
+  enabledDeptOptions.value = filterDisabledDept(res.data);
+};
+
+const sendTextMessage = () => {
+  // 防重复提交
+  if (!queryParams.value.deviceType) {
+    proxy?.$modal.msgWarning('请先选择设备类型');
+    return;
+  }
+  if (ids.value.length == 0) {
+    proxy?.$modal.msgWarning('请先选中一条设备');
+    return;
+  }
+  dialog.visible = true
+}
+// 发送文本消息确认
+const submitForm = async () => {
+  if (!form.value.messageToSend) {
+    proxy?.$modal.msgWarning('发送消息不能为空');
+    return
+  }
+  try {
+    sendTextLoading.value = true;
+    // 2. 准备请求数据
+    const deviceIds = ids.value.map(item => item.id);
+    const deviceImeiList = ids.value.map(item => item.deviceImei);
+    const firstDevice = ids.value[0];
+    const typeName = firstDevice.typeName; // 取第一个设备的typeName，为空时给默认值
+    const batchId = generateShortId();
+    const data = {
+      deviceIds: deviceIds,
+      typeName: typeName,
+      batchId: batchId,
+      deviceImeiList: deviceImeiList,
+      sendMsg: form.value.messageToSend
+    };
+    // 3.人员信息
+    const registerRes = await api.deviceSendMessage(data);
+    if (registerRes.code !== 200) {
+      proxy?.$modal.msgWarning(registerRes.msg)
+      return
+    }
+    // 4. 获取设备状态
+    const statusRes = await getDeviceStatus({
+      functionMode: 2,
+      batchId,
+      typeName,
+      deviceImeiList,
+      deviceIds,
+      interval: 500
+    },
+      api.deviceRealTimeStatus
+    );
+    // 只有当状态为'OK'时才显示成功弹窗
+    if (statusRes.data.functionAccess === 'OK') {
+      proxy?.$modal.msgSuccess(statusRes.msg);
+      cancel()
+    }
+  } catch (error: any) {
+    proxy?.$modal.msgWarning(error.msg)
+  } finally {
+    sendTextLoading.value = false;
+  }
+};
+// 取消
+const cancel = () => {
+  dialog.visible = true;
+  form.value.messageToSend = ''
+}
+// 强制报警
+const forceAlarm = async () => {
+  if (!queryParams.value.deviceType) {
+    proxy?.$modal.msgWarning('请先选择设备类型');
+    return;
+  }
+  if (ids.value.length == 0) {
+    proxy?.$modal.msgWarning('请先选中一条设备');
+    return;
+  }
+  try {
+    forceAlarmLoading.value = true
+    // 2. 准备请求数据
+    const batchId = generateShortId();
+    const deviceIds = ids.value.map(item => item.id);
+    const deviceImeiList = ids.value.map(item => item.deviceImei);
+    const firstDevice = ids.value[0];
+    const typeName = firstDevice.typeName; // 取第一个设备的typeName，为空时给默认值
+    let data = {
+      deviceIds: deviceIds,
+      typeName: typeName,
+      batchId: batchId,
+      deviceImeiList: deviceImeiList,
+      instructValue: '1', //强制报警1，解除报警0
+    }
+    const registerRes = await api.sendAlarmMessage(data);
+    if (registerRes.code !== 200) {
+      proxy?.$modal.msgWarning(registerRes.msg)
+      return
+    }
+    // 4. 获取设备状态
+    const statusRes = await getDeviceStatus({
+      functionMode: 2,
+      batchId,
+      typeName,
+      deviceImeiList,
+      deviceIds,
+      interval: 500
+    },
+      api.deviceRealTimeStatus
+    );
+    // 只有当状态为'OK'时才显示成功弹窗
+    if (statusRes.data.functionAccess === 'OK') {
+      proxy?.$modal.msgSuccess(statusRes.msg);
+    }
+
+  } catch (error: any) {
+    proxy?.$modal.msgWarning(error.msg)
+
+  } finally {
+    forceAlarmLoading.value = false;
+  }
+}
 
-// async function handleDeptChange(value: number | string) {
-//   const response = await optionselect(value);
-//   postOptions.value = response.data;
-//   form.value.postIds = [];
-// }
 </script>
 <style lang="scss" scoped>
+:deep .el-collapse-item__header {
+  display: none;
+}
+
+:deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  color: rgba(2, 124, 251, 1);
+  background: transparent;
+}
+
 .main-tree {
   border-radius: 4px;
   box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
@@ -280,8 +477,6 @@ onMounted(() => {
   margin-top: 20px;
 }
 
-.normal {}
-
 .green {
   color: rgba(0, 165, 82, 1);
 }

src/views/controlCenter/delivery/index.vue

@@ -0,0 +1,271 @@
+<template>
+  <div class="p-2">
+    <el-row :gutter="20">
+      <!-- 部门树 -->
+      <el-col :lg="4" :xs="24" style="" class="main-tree">
+        <el-input v-model="deptName" placeholder="输入分组名称" prefix-icon="Search" clearable />
+        <el-tree ref="deptTreeRef" class="mt-2" node-key="id" :data="deptOptions"
+          :props="{ label: 'groupName', children: 'children' }" :expand-on-click-node="false"
+          :filter-node-method="filterNode" highlight-current default-expand-all @node-click="handleNodeClick"></el-tree>
+      </el-col>
+      <el-col :lg="20" :xs="24">
+        <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+          :leave-active-class="proxy?.animate.searchAnimate.leave">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-card>
+              <!-- =========搜索按钮操作======= -->
+              <div class="btn_search">
+                <el-button type="primary" plain>导出</el-button>
+                <div style="position: absolute; right:30px; top:20px">
+                  <el-input v-model="queryParams.deviceMac" placeholder="MAC/IMEI" clearable
+                    style="width: 200px; margin-right: 20px;" />
+                  <el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
+                </div>
+              </div>
+              <el-collapse accordion v-model="activeNames">
+                <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-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
+                          :value="item.deviceTypeId" />
+                      </el-select>
+                    </el-form-item>
+                    <el-form-item label="设备名称" prop="deviceName">
+                      <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备MAC" prop="deviceMac">
+                      <el-input v-model="queryParams.deviceMac" placeholder="请输入设备MAC" clearable />
+                    </el-form-item>
+                    <el-form-item label="设备IMEI" prop="deviceImei">
+                      <el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable
+                        @keyup.enter="handleQuery" />
+                    </el-form-item>
+                    <el-form-item label="操作时间" style="width: 308px">
+                      <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
+                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
+                        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-button type="primary" @click="handleQuery">查询</el-button>
+                      <el-button @click="resetQuery">重置</el-button>
+                    </el-form-item>
+                  </el-form>
+                </el-collapse-item>
+              </el-collapse>
+            </el-card>
+          </div>
+        </transition>
+        <el-card class="Maplist">
+          <div>
+            <el-table v-loading="loading" border :data="deviceList" @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="50" align="center" />
+              <el-table-column label="设备名称" align="center" prop="deviceName" />
+              <el-table-column label="设备型号" align="center" prop="deviceType" />
+              <el-table-column label="操作模块" align="center" prop="deviceAction" />
+              <el-table-column label="操作内容" align="center" prop="content" />
+              <el-table-column label="操作时间" align="center" prop="createTime" />
+            </el-table>
+            <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+              :total="total" @pagination="getList" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+
+<script setup name="User" lang="ts">
+import api from '@/api/controlCenter/delivey/index'
+import apiTypeAll from '@/api/equipmentManagement/device/index';
+import { deviceQuery, deviceVO } from '@/api/controlCenter/delivey/types';
+const dateRange = ref(['', '']);
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const deviceList = ref<deviceVO[]>();
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const deptName = ref();
+const deptOptions = ref([])
+const deptTreeRef = ref<ElTreeInstance>();
+const queryFormRef = ref<ElFormInstance>();
+const activeNames = ref([]);
+const deviceTypeOptions = ref([]); //设备类型
+const enabledDeptOptions = ref();
+
+const initData: PageData<'', deviceQuery> = {
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    deviceName: '',
+    deviceMac: '',
+    deviceImei: '',
+    groupId: '',
+    deviceType: '',
+    startTime: '',
+    endTime: ''
+  },
+  rules: undefined,
+  form: ''
+};
+const data = reactive<PageData<'', deviceQuery>>(initData);
+const { queryParams } = toRefs<PageData<'', deviceQuery>>(data);
+
+/** 通过条件过滤节点  */
+const filterNode = (value: string, data: any) => {
+  if (!value) return true;
+  return data.groupName.indexOf(value) !== -1;
+};
+// 设备类型
+const getDeviceType = () => {
+  apiTypeAll.deviceTypeAll().then(res => {
+    if (res.code == 200) {
+      deviceTypeOptions.value = res.data
+    }
+  }).catch(err => {
+
+  })
+};
+/** 根据名称筛选部门树 */
+watchEffect(
+  () => {
+    deptTreeRef.value?.filter(deptName.value);
+  },
+  {
+    flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
+  }
+);
+const toggleFilter = () => {
+  if (activeNames.value.length > 0) {
+    activeNames.value = [];
+  } else {
+    activeNames.value = ['1'];
+  }
+};
+
+
+/** 过滤禁用的部门 */
+const filterDisabledDept = (deptList: any[]) => {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+};
+
+/** 节点单击事件 */
+const handleNodeClick = (data: any) => {
+  queryParams.value.groupId = data.id;
+  handleQuery();
+};
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+};
+/** 重置按钮操作 */
+const resetQuery = () => {
+  dateRange.value = ['', ''];
+  queryFormRef.value?.resetFields();
+  queryParams.value.pageNum = 1;
+  queryParams.value.groupId = undefined;
+  deptTreeRef.value?.setCurrentKey(undefined);
+  handleQuery();
+};
+
+/** 选择条数  */
+const handleSelectionChange = (selection: deviceVO[]) => {
+  ids.value = selection;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+onMounted(() => {
+  getDeptTree(); // 初始化部门数据
+  getList(); // 初始化列表数据
+  getDeviceType() //设备类型
+});
+/** 查询用户列表 */
+const getList = async () => {
+  loading.value = false;
+  const [startTime, endTime] = dateRange.value;
+  queryParams.value = {
+    ...queryParams.value,
+    startTime: startTime,
+    endTime: endTime
+  };
+  const res = await api.deviceInstructionRecord(queryParams.value)
+  loading.value = false;
+  deviceList.value = res.rows;
+  total.value = res.total;
+};
+
+/** 查询部结构 */
+const getDeptTree = async () => {
+  const res = await api.devicegroupList('');
+   const allDeviceOption = {
+    id: '',
+    groupName: '全部设备',
+    disabled: false, 
+    children: [] 
+
+  };
+  deptOptions.value = [allDeviceOption, ...res.data]
+  enabledDeptOptions.value = filterDisabledDept(res.data);
+};
+
+
+</script>
+<style lang="scss" scoped>
+:deep .el-collapse-item__header {
+  display: none;
+}
+:deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+  color: rgba(2, 124, 251, 1);
+  background: transparent;
+}
+
+.main-tree {
+  border-radius: 4px;
+  box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
+  background: rgba(255, 255, 255, 1);
+  width: 212px;
+  border: none;
+  padding-top: 10px;
+
+}
+
+.el-card {
+  border: none
+}
+
+.btn_search {
+  padding: 0px 15px 15px 0px;
+  // border-bottom: 1px solid rgba(235, 238, 248, 1);
+}
+
+.queryFormRef {
+  margin-top: 20px;
+}
+
+.green {
+  color: rgba(0, 165, 82, 1);
+}
+
+.red {
+  color: rgba(224, 52, 52, 1);
+}
+
+.Maplist {
+  height: 680px;
+  overflow: auto;
+}
+</style>

src/views/equipmentManagement/deviceType/index.vue

@@ -40,9 +40,9 @@
       <el-table v-loading="loading" border :data="deviceTypeList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="50" align="center" />
         <el-table-column label="型号名称" align="center" prop="typeName" />
-        <el-table-column label="类型code" align="center" prop="modelDictionary">
+        <el-table-column label="类型code" align="center" prop="appModelDictionary">
           <template #default="scope">
-            {{ modelDictionaryOptions.find(item => item.dictValue === String(scope.row.modelDictionary))?.dictLabel }}
+            {{ modelDictionaryOptions.find(item => item.dictValue === String(scope.row.appModelDictionary))?.dictLabel }}
           </template>
         </el-table-column>
         <el-table-column label="是否支持蓝牙" align="center" prop="isSupportBle">
@@ -97,7 +97,7 @@
         </el-row>
         <el-row>
           <el-col :span="24">
-            <el-form-item label="类型code" prop="modelDictionary">
+            <el-form-item label="路由跳转" prop="modelDictionary">
               <el-select v-model="form.modelDictionary" placeholder="请选择">
                 <el-option v-for="item in modelDictionaryOptions" :key="item.dictValue" :label="item.dictLabel"
                   :value="item.dictValue" />
@@ -236,7 +236,11 @@ const getList = async () => {
   total.value = res.total;
 };
 const getDict = async () => {
-  const res = await getDicts('model_dictionary');
+  const res = await getDicts('app_model_dictionary');
+  modelDictionaryOptions.value = res.data;
+}
+const pcgetDict = async () => {
+  const res = await getDicts('pc_model_dictionary');
   modelDictionaryOptions.value = res.data;
 }
 /** 搜索按钮操作 */
@@ -352,6 +356,7 @@ const resetForm = () => {
 onMounted(() => {
   getList(); // 初始化列表数据
   getDict();
+  pcgetDict() //pc跳转
 });
 
 </script>

src/views/register.vue

@@ -65,10 +65,6 @@
         </div>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
-    <div class="el-register-footer">
-      <span>Copyright © 2018-2025 疯狂的狮子Li All Rights Reserved.</span>
-    </div>
   </div>
 </template>