报警列表卡片，模式页面布局修改，估计播放，优化体验

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

@@ -47,23 +47,15 @@ const props = defineProps({
   }
 });
 console.log(props.deviceList);
-
 const router = useRouter();
 // 声明高德地图全局类型
 declare var AMap: any;
-
-// 高德Key与安全密钥
-const AMAP_KEY = '90bc158992feb8ccd0145e168cab1307';
-const AMAP_SECURITY_CODE = '5ed9004cb461cd463580b02a775c8d91';
-
 // 地图实例
 const mapRef = ref<HTMLDivElement | null>(null);
 let mapInstance: any = null;
-
 // 复选框状态管理
 const checkedDeviceIds = ref(); // 存储选中的设备ID
 const checkAll = ref(false); // 全选状态
-
 // 全选/取消全选
 const handleCheckAllChange = (val: boolean) => {
   checkedDeviceIds.value = val
@@ -133,9 +125,8 @@ watch(
     // 1. 清除地图上已有的所有标记（避免重复打点）
     mapInstance.clearMap();
     // 2. 重新添加新的设备标记
-    newDeviceList.forEach((device) => {
+    newDeviceList.forEach((device:any) => {
       console.log(device, 'device');
-
       // 确保设备有经纬度（lng和lat），避免无效打点
       if (device.longitude && device.latitude) {
         new AMap.Marker({
@@ -150,15 +141,7 @@ watch(
 );
 
 onMounted(() => {
-  window._AMapSecurityConfig = { securityJsCode: AMAP_SECURITY_CODE };
-  if (window.AMap) {
     initMap();
-  } else {
-    const script = document.createElement('script');
-    script.src = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
-    script.onload = initMap;
-    document.head.appendChild(script);
-  }
 });
 
 onUnmounted(() => {

src/views/controlCenter/controlPanel/index.vue

@@ -27,8 +27,8 @@
                   :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-input v-model="queryParams.content" placeholder="MAC/IMEI" clearable
+                    style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
                   <el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
                 </div>
 
@@ -171,6 +171,7 @@ const deviceTypeOptions = ref([]); //设备类型
 const enabledDeptOptions = ref();
 const forceAlarmLoading = ref(false)  //强制报警
 const sendTextLoading = ref(false)
+const debounceTimer = ref(null)   // 用于防抖的定时器
 const form = ref({
   messageToSend: ''
 })
@@ -186,7 +187,8 @@ const initData: PageData<'', deviceQuery> = {
     personnelBy: '',
     communicationMode: '',
     groupId: '',
-    deviceType: ''
+    deviceType: '',
+    content: ''
   },
   rules: undefined,
   form: ''
@@ -258,7 +260,15 @@ const handleNodeClick = (data: any) => {
   queryParams.value.groupId = data.id;
   handleQuery();
 };
-
+const handleInput = () => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  // 300ms后执行查询（避免输入过程中频繁调用接口）
+  debounceTimer.value = setTimeout(() => {
+    handleQuery()  // 调用查询接口的方法
+  }, 300)
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -363,10 +373,11 @@ const submitForm = async () => {
       return
     }
     // 4. 获取设备状态
+    // 获取实时状态类型:FunctionAccessBatchstatusRule 批量 ,FunctionAccessStatusRule 单个
     const statusRes = await getDeviceStatus({
       functionMode: 2,
       batchId,
-      typeName,
+      typeName: 'FunctionAccessBatchStatusRule',
       deviceImeiList,
       deviceIds,
       interval: 500
@@ -423,7 +434,7 @@ const forceAlarm = async () => {
     const statusRes = await getDeviceStatus({
       functionMode: 2,
       batchId,
-      typeName,
+      typeName: 'FunctionAccessBatchStatusRule',
       deviceImeiList,
       deviceIds,
       interval: 500