设备控制提交

src/api/controlCenter/controlPanel/index.ts

@@ -12,13 +12,76 @@ export const devicegroupList = (params) => {
 // 设备列表
 export const deviceControlCenterList = (params) => {
     return request({
-        url: '/api/device/controlCenter/list',
+        url: '/api/device/list',
         method: 'get',
         params: params
     });
 };
 
-export default {
+// 设备详情
-devicegroupList,
+export const deviceDeatil = (id) => {
-deviceControlCenterList
+    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 = (data: any) => {
+    return request({
+        url: `/api/device/realTimeStatus`,
+        method: 'post',
+        data: data
+    });
+};
+
+export default {
+    devicegroupList,
+    deviceControlCenterList,
+    deviceDeatil,
+    registerPersonInfo,
+    lightBrightnessSettings,
+    lightModeSettings,
+    laserModeSettings,
+    sendAlarmMessage,
+    deviceRealTimeStatus
 };

src/api/controlCenter/controlPanel/types.ts

@@ -4,16 +4,52 @@ export interface deviceQuery {
   deviceId: string;
   deviceName: string;
   deviceStatus: string;
-  deviceMac:string;
+  deviceMac: string;
-  deviceImei:string;
+  deviceImei: string;
-  currentOwnerId:string;
+  currentOwnerId: string;
-  communicationMode:string;
+  communicationMode: string;
-  queryParams: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/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,23 +43,26 @@
                     <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">保存</el-button>
                         </div>
-                        <el-button type="danger" class="alarm-btn">强制报警</el-button>
+                        <el-button type="danger" class="alarm-btn" @click="forceAlarm">强制报警</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>
                             </div>
                         </div>
@@ -64,21 +78,25 @@
                         <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">登记</el-button>
                         </div>
                     </div>
                 </el-col>
@@ -86,9 +104,9 @@
                     <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="send">发送</el-button>
                         </div>
                     </div>
                 </el-col>
@@ -97,18 +115,11 @@
     </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;
-    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 +131,9 @@ 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';
+import { send } from 'vite';
 // 灯光模式数据（引用导入的图片）
 const lightModes = ref<LightMode[]>([
     {
@@ -129,71 +141,269 @@ 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: 'close',
+        name: '关闭',
+        icon: closeDefault,
+        activeIcon: closeActive,
+        switchStatus: false,
+        instructValue: '0',
+        active: false
+    },
+]);
+const laserMode = ref<LightMode>({
     id: 'laser',
     name: '激光',
     icon: laserLightDefault,
     activeIcon: laserLightActive,
-        active: false,
+    switchStatus: false,
-        switchStatus: false
+    instructValue: '1',
-    }
+    active: false
-]);
-// 当前选中的模式
-const currentMode = computed(() => {
-    return lightModes.value.find(mode => mode.active);
 });
-// 处理模式点击事件
+
-const handleModeClick = (modeId: string) => {
+const deviceDetail = ref<DeviceDetail>({
-    // 重置所有模式状态
+    // 重点：personnelInfo 初始化为空对象，避免 undefined
-    lightModes.value.forEach(mode => {
+    personnelInfo: {
-        const isTargetMode = mode.id === modeId;
+        unitName: '',
-        mode.active = isTargetMode;
+        position: '',
-        mode.switchStatus = isTargetMode;
+        name: '',
+        code: ''
+    },
+    lightBrightness: '',
+    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);
-    console.log(`切换到${lightModes.value.find(m => m.id === modeId)?.name}模式`);
+            setActiveLightMode(modeId);
-};
+            await getList();
-
-// 监听开关状态变化
-lightModes.value.forEach(mode => {
-    watch(() => mode.switchStatus, (newVal) => {
-        if (newVal) {
-            // 如果打开当前开关，关闭其他所有开关
-            handleModeClick(mode.id);
         } 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
+    }
+    api.registerPersonInfo(data).then((res) => {
+        console.log(res, 'res');
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess(res.msg);
+            getList();
+        } else {
+            proxy?.$modal.msgError(res.msg);
+        }
+    })
+}
+// 灯光亮度
+const saveBtn = () => {
+    let data = {
+        deviceId: route.params.deviceId,
+        instructValue: deviceDetail.value.lightBrightness + '.00',
+        deviceImei: deviceDetail.value.deviceImei,
+    }
+    api.lightBrightnessSettings(data).then((res) => {
+        if (res.code === 200) {
+            proxy?.$modal.msgSuccess(res.msg);
+            getList();
+        } else {
+            proxy?.$modal.msgError(res.msg);
+        }
+
+    })
+}
+// 强制报警
+const forceAlarm = async () => {
+    try {
+        // 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.msgSuccess(registerRes.msg);
+        }
+
+    } catch (error:any) {
+        proxy?.$modal.msgError(error.msg);
+
+    } finally {}
+}
+
+onMounted(() => {
+    getList();
 });
+
 </script>
 <style lang="scss" scoped>
 .device-page {
@@ -252,6 +462,7 @@ lightModes.value.forEach(mode => {
 
             justify-content: space-between;
         }
+
         .lacatin_gps {
             height: 70px;
             border-radius: 4px;
@@ -282,6 +493,7 @@ lightModes.value.forEach(mode => {
                 margin-bottom: 10px;
                 transition: all 0.3s ease;
                 object-fit: scale-down;
+                height: 50px;
             }
 
             .mode-name {

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,28 +60,20 @@ 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;
 });
 
 // 设备控制事件
@@ -80,26 +82,72 @@ const handleControl = (device: any) => {
   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 => {
+      console.log(device, 'devicedevice');
+      if (device.longitude && device.latitude) {
         new AMap.Marker({
-      position: [device.lng, device.lat],
+          position: [device.longitude, device.latitude],
-      title: device.name,
+          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

@@ -24,15 +24,20 @@
                 <el-button type="primary" plain>发送消息</el-button>
                 <el-button type="primary" plain>电子围栏</el-button>
                 <el-button type="danger" plain>强制报警</el-button>
-                <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>
-              <el-collapse accordion>
+
-                <el-collapse-item title="高级筛选">
+              </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="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.id" />
                       </el-select>
                     </el-form-item>
                     <el-form-item label="设备名称" prop="deviceName">
@@ -93,8 +98,8 @@
               <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 green" v-if="scope.row.onlineStatus == 1">在线</div>
-                  <div class="normal red" v-if="scope.row.onlineStatus==0">离线</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">
@@ -106,8 +111,8 @@
             <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
               :total="total" @pagination="getList" />
           </div>
-          <div v-else key="map">
+          <div v-else key="map" v-if="deviceList.length > 0">
-            <Amap />
+            <Amap :deviceList="deviceList"></Amap>
           </div>
         </el-card>
       </el-col>
@@ -117,9 +122,9 @@
 
 <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 { UserVO } from '@/api/system/user/types';
 const router = useRouter();
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -133,12 +138,13 @@ 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 initData: PageData<'', deviceQuery> = {
   queryParams: {
     pageNum: 1,
@@ -151,21 +157,32 @@ const initData: PageData<'', deviceQuery> = {
     currentOwnerId: '',
     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) => {
   isListView.value = (view === 'list');
 };
 /** 通过条件过滤节点  */
 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,7 +193,13 @@ watchEffect(
     flush: 'post' // watchEffect会在DOM挂载或者更新之前就会触发，此属性控制在DOM元素更新后运行
   }
 );
-
+const toggleFilter = () => {
+  if (activeNames.value.length > 0) {
+    activeNames.value = [];
+  } else {
+    activeNames.value = ['1'];
+  }
+};
 /** 查询用户列表 */
 const getList = async () => {
   loading.value = false;
@@ -191,7 +214,7 @@ const getDeptTree = async () => {
   const res = await api.devicegroupList('');
 
   deptOptions.value = res.data;
-  //enabledDeptOptions.value = filterDisabledDept(res.data);
+  enabledDeptOptions.value = filterDisabledDept(res.data);
 };
 
 /** 过滤禁用的部门 */
@@ -236,7 +259,7 @@ const handleControl = (row: any) => {
 
 /** 选择条数  */
 const handleSelectionChange = (selection: UserVO[]) => {
-  ids.value = selection.map((item:any) => item.id);
+  ids.value = selection.map((item: any) => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 };
@@ -248,15 +271,15 @@ const reset = () => {
 onMounted(() => {
   getDeptTree(); // 初始化部门数据
   getList(); // 初始化列表数据
+  getDeviceType() //设备类型
 });
 
-// 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;
+}
+
 .main-tree {
   border-radius: 4px;
   box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
@@ -280,8 +303,6 @@ onMounted(() => {
   margin-top: 20px;
 }
 
-.normal {}
-
 .green {
   color: rgba(0, 165, 82, 1);
 }

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>