From f17e878e0c0d9a38d5f54821fce17fc260fac8f4 Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Tue, 2 Sep 2025 16:33:45 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E8=AE=BE=E5=A4=87=E5=AE=9A=E4=BD=8D?=
 =?UTF-8?q?=E5=9C=B0=E5=9B=BE=EF=BC=8C=E6=89=93=E7=82=B9=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/position_ico.png            | Bin 0 -> 2789 bytes
 src/assets/styles/index.scss                  |   3 +-
 src/views/controlCenter/6170/index.vue        |   4 +
 .../controlPanel/components/map.vue           | 279 +++++++++++-------
 .../controlCenter/controlPanel/index.vue      |  54 +++-
 .../historyjectory/trackplayback.vue          |  30 +-
 src/views/equipmentAlarmRecord/index.vue      | 138 ++++++---
 7 files changed, 338 insertions(+), 170 deletions(-)
 create mode 100644 src/assets/images/position_ico.png

diff --git a/src/assets/images/position_ico.png b/src/assets/images/position_ico.png
new file mode 100644
index 0000000000000000000000000000000000000000..ecf3df5519548c82fc97828ec944bd23d2221e5d
GIT binary patch
literal 2789
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
T16`l4lP{*JAskkvkHY>3{QM_t

literal 0
HcmV?d00001

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 7844fa4..ea354cf 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -163,6 +163,7 @@ aside {
   }
 }
 
+
 .components-container {
   margin: 30px 50px;
   position: relative;
@@ -214,4 +215,4 @@ aside {
     vertical-align: middle;
     margin-bottom: 10px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/views/controlCenter/6170/index.vue b/src/views/controlCenter/6170/index.vue
index 25193f1..6b831d9 100644
--- a/src/views/controlCenter/6170/index.vue
+++ b/src/views/controlCenter/6170/index.vue
@@ -397,6 +397,7 @@ const saveBtn = () => {
 // 强制报警
 const forceAlarm = async () => {
     try {
+        await proxy?.$modal.confirm('确定要对该设备开启强制报警？','');
         forceAlarmLoading.value = true
         // 2. 准备请求数据
         const batchId = generateShortId();
@@ -513,6 +514,9 @@ onMounted(() => {
             .online {
                 color: #00ff00;
             }
+            .offline{
+                color: rgb(224, 52, 52);
+            }
         }
     }
 
diff --git a/src/views/controlCenter/controlPanel/components/map.vue b/src/views/controlCenter/controlPanel/components/map.vue
index 317c849..5bb9843 100644
--- a/src/views/controlCenter/controlPanel/components/map.vue
+++ b/src/views/controlCenter/controlPanel/components/map.vue
@@ -2,20 +2,17 @@
   <div class="amap_page">
     <div ref="mapRef" class="amap-container"></div>
     <div class="content_top">
+      <!-- 左侧列表内容保持不变 -->
       <div class="content_layout">
-        <!-- 左侧设备列表（带复选框） -->
         <div class="device_list">
-          <!-- 全选复选框 -->
-          <div class="list_header">
+          <div class="list_header" v-if="!isSingleDevice">
             <el-checkbox v-model="checkAll" @change="handleCheckAllChange" label="全选"></el-checkbox>
           </div>
+          <div class="device_item" v-for="(device, index) in effectiveDeviceList" :key="device.id">
+            <el-checkbox :value="device.id" :model-value="checkedDeviceIds.includes(device.id)"
+              @update:model-value="(checked: boolean) => handleCheckboxChange(checked, device.id)"
+              class="device_checkbox" :hidden="isSingleDevice"></el-checkbox>
 
-          <!-- 设备项（带复选框） -->
-          <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.deviceName }}</div>
@@ -25,124 +22,192 @@
                   {{ device.onlineStatus === 1 ? '在线' : '离线' }}
                 </div>
               </div>
-
-              <!-- 控制按钮 -->
               <el-button class="control_btn" @click="handleControl(device)">控制</el-button>
             </div>
           </div>
+          <div v-if="effectiveDeviceList.length === 0" class="nodata">
+            <img src="@/assets/images/nodata.png" alt="" class="nodataImg">
+            <div class="title">暂无数据</div>
+          </div>
         </div>
       </div>
-
-
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import {deviceVO } from '@/api/controlCenter/controlPanel/types';
+import { deviceVO } from '@/api/controlCenter/controlPanel/types';
+import { defineProps, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 const props = defineProps({
   deviceList: {
-   type: Array as PropType<deviceVO[]>, // 用PropType指定数组元素为DeviceItem
+    type: Array as PropType<deviceVO[]>,
     required: false,
-    default: () => [] // 数组/对象类型的默认值必须用函数返回，避免引用共享
+    default: () => []
   }
 });
-console.log(props.deviceList);
 const router = useRouter();
-// 声明高德地图全局类型
+const route = useRoute();
 declare var AMap: any;
-// 地图实例
+// 核心状态
 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
-    ? props.deviceList.map(device => device.id)  // 全选：选中所有设备ID
-    : [];  // 取消全选：清空
+let infoWindow: any = null; // 信息窗口实例
+const singleDeviceId = ref<string | null>(null);
+const effectiveDeviceList = ref<deviceVO[]>([]);
+const checkedDeviceIds = ref<string[]>([]); // 明确为字符串数组
+const checkAll = ref(false);
+const isSingleDevice = ref(false);
+const activeDeviceName = ref(); // 当前激活的设备名称
+// 初始化设备ID
+const initSingleDeviceId = () => {
+  const idFromParams = route.params.deviceId as string;
+  const idFromQuery = route.query.deviceId as string;
+  singleDeviceId.value = idFromParams || idFromQuery || null;
+  isSingleDevice.value = !!singleDeviceId.value;
+  console.log('单设备模式:', isSingleDevice.value, '设备ID:', singleDeviceId.value);
 };
+const initDeviceList = () => {
+  if (!props.deviceList || !props.deviceList.length) {
+    effectiveDeviceList.value = [];
+    console.log('设备列表为空');
+    return;
+  }
 
-// 监听单个复选框变化，更新全选状态
-watch(checkedDeviceIds, (newVal) => {
-  checkAll.value = newVal.length === props.deviceList.length && props.deviceList.length > 0;
-});
-
-// 设备控制事件
-const handleControl = (device: any) => {
-  console.log('控制设备：', device);
-  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)]; // 转数字防字符串坐标
+  if (isSingleDevice.value && singleDeviceId.value) {
+    const targetDevice = props.deviceList.find(
+      device => String(device.id) === String(singleDeviceId.value)
+    );
+    if (targetDevice) {
+      effectiveDeviceList.value = [targetDevice]; // 只显示匹配的单个设备
+      checkedDeviceIds.value = [targetDevice.id];
+      activeDeviceName.value = targetDevice.deviceName;
+    } else {
+      effectiveDeviceList.value = []; // 未找到匹配设备
+    }
   } else {
-    return [114.4074, 30.5928]; // 默认中心坐标
+    // 多设备模式：显示所有设备
+    effectiveDeviceList.value = props.deviceList;
   }
 };
-// 地图初始化（修改center配置）
-const initMap = () => {
-  if (!window.AMap || !mapRef.value) return;
-  // 2. 调用函数获取中心坐标（不再用固定值）
-  const centerCoord = getCenterCoord();
+// 初始化地图（重点修复部分）
+const initMap = async () => {
+  await nextTick();
+  if (!window.AMap || !mapRef.value) {
+    return;
+  }
+  // 销毁旧实例
+  if (mapInstance) mapInstance.destroy();
+  // 创建地图实例（确保容器DOM已渲染）
   mapInstance = new AMap.Map(mapRef.value, {
-    center: centerCoord, // 改用动态获取的坐标
-    zoom: 15,
+    center: getCenterCoord(),
+    zoom: isSingleDevice.value ? 5 : 5,
     resizeEnable: true
   });
-  // 后续的设备打点逻辑不变...
-  if (Array.isArray(props.deviceList)) {
-    props.deviceList.forEach(device => {
-      console.log(device, 'devicedevice');
-      if (device.longitude && device.latitude) {
-        new AMap.Marker({
-          position: [device.longitude, device.latitude],
-          title: device.deviceName,
-          map: mapInstance
-        });
-      }
+
+  // 初始化信息窗口（用于显示设备名称）
+  infoWindow = new AMap.InfoWindow({
+    offset: new AMap.Pixel(0, -30) // 偏移量，避免遮挡标记
+  });
+
+  // 渲染标记
+  renderMarkers();
+};
+
+// 获取中心坐标（确保数字类型）
+const getCenterCoord = () => {
+  if (!effectiveDeviceList.value.length) {
+    return [114.4074, 30.5928];
+  }
+  // 遍历找第一个有效坐标
+  const validDevice = effectiveDeviceList.value.find(device => {
+    const lng = Number(device.longitude);
+    const lat = Number(device.latitude);
+    return !isNaN(lng) && !isNaN(lat) && lng !== 0 && lat !== 0;
+  });
+  if (validDevice) {
+    const lng = Number(validDevice.longitude);
+    const lat = Number(validDevice.latitude);
+    return [lng, lat];
+  }
+  // 无有效坐标时用默认
+  return [114.4074, 30.5928];
+};
+
+// 渲染标记（核心修复点）
+const renderMarkers = () => {
+  if (!mapInstance || !effectiveDeviceList.value.length) return;
+  mapInstance.clearMap();
+  effectiveDeviceList.value.forEach(device => {
+    const lng = device.longitude !== null && device.longitude !== undefined ? Number(device.longitude) : NaN;
+    const lat = device.latitude !== null && device.latitude !== undefined ? Number(device.latitude) : NaN;
+    if (isNaN(lng) || isNaN(lat) || lng === 0 || lat === 0) {
+      return;
+    }
+    // 3. 创建标记（确保绑定到地图实例）
+    const marker = new AMap.Marker({
+      position: [lng, lat], 
+      title: device.deviceName,
+      map: mapInstance, 
+      icon: new AMap.Icon({
+        size: new AMap.Size(32, 32), // Marker显示尺寸
+        image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 
+        imageSize: new AMap.Size(32, 32)
+      })
     });
+
+    // 4. 标记点击事件
+    marker.on('click', () => {
+      activeDeviceName.value = device.deviceName;
+      infoWindow.setContent(`<div style="padding:8px">${device.deviceName}</div>`);
+      infoWindow.open(mapInstance, [lng, lat]);
+    });
+  });
+};
+
+// 全选处理
+const handleCheckAllChange = (val: boolean) => {
+  if (isSingleDevice.value) return;
+  checkedDeviceIds.value = val ? effectiveDeviceList.value.map(d => d.id) : [];
+};
+
+// 处理单个复选框变更
+const handleCheckboxChange = (checked: boolean, deviceId: string) => {
+  if (isSingleDevice.value) return;
+  if (checked) {
+    if (!checkedDeviceIds.value.includes(deviceId)) {
+      checkedDeviceIds.value.push(deviceId);
+    }
+  } else {
+    const index = checkedDeviceIds.value.indexOf(deviceId);
+    if (index > -1) {
+      checkedDeviceIds.value.splice(index, 1);
+    }
   }
 };
-watch(
-  () => props.deviceList, // 监听props中的deviceList
-  (newDeviceList) => {
-    if (!mapInstance || !Array.isArray(newDeviceList)) return;
-    // 1. 清除地图上已有的所有标记（避免重复打点）
-    mapInstance.clearMap();
-    // 2. 重新添加新的设备标记
-    newDeviceList.forEach((device:any) => {
-      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 } // 深度监听（如果设备列表里的子对象变化也能触发）
-);
 
+// 控制按钮点击
+const handleControl = (device: deviceVO) => {
+  router.push(`/controlCenter/6170/${device.id}`);
+};
+
+// 监听路由和设备列表变化
+watch(() => [route.params, route.query], () => {
+  initSingleDeviceId();
+  initDeviceList();
+  initMap();
+}, { deep: true });
+
+watch(() => props.deviceList, () => {
+  initDeviceList();
+  renderMarkers();
+}, { deep: true });
+
+// 初始化
 onMounted(() => {
-    initMap();
+  initSingleDeviceId();
+  initDeviceList();
+  initMap();
 });
 
 onUnmounted(() => {
@@ -151,7 +216,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-/* 地图容器 */
+/* 原有样式保持不变 */
 .amap_page {
   position: relative;
 }
@@ -163,6 +228,7 @@ onUnmounted(() => {
   width: 100%;
 }
 
+/* 设备名称提示框 */
 .content_top {
   width: 210px;
   border-radius: 4px;
@@ -175,31 +241,25 @@ onUnmounted(() => {
   left: 10px
 }
 
-/* 全选行样式 */
+/* 其他样式保持不变... */
 .list_header {
   padding: 12px;
   border-bottom: 1px solid #eee;
   font-weight: 600;
 }
 
-/* 设备项样式 */
 .device_item {
   padding: 0px 12px;
   display: flex;
   align-items: center;
-
-  /* 复选框与内容间距 */
   cursor: default;
   transition: background 0.2s;
 }
 
-/* 复选框样式 */
 .device_checkbox {
   flex-shrink: 0;
-  /* 复选框不压缩 */
 }
 
-/* 设备信息区域 */
 .device_page {
   background-color: rgba(247, 248, 252, 1);
   margin-bottom: 5px;
@@ -235,7 +295,6 @@ onUnmounted(() => {
   color: #f53f3f;
 }
 
-/* 控制按钮 */
 .control_btn {
   font-size: 12px;
   padding: 0px 15px;
@@ -247,4 +306,16 @@ onUnmounted(() => {
   color: rgba(2, 124, 251, 1);
   border: none;
 }
+.nodata{
+     transform: translate(-1%,100%);
+     left:50%;
+     height: 30vh;
+}
+.nodataImg{
+    width: 130px;
+}
+.title{
+    color: #666;
+    padding-top: 20px;
+}
 </style>
diff --git a/src/views/controlCenter/controlPanel/index.vue b/src/views/controlCenter/controlPanel/index.vue
index 19d1ee6..0f2c930 100644
--- a/src/views/controlCenter/controlPanel/index.vue
+++ b/src/views/controlCenter/controlPanel/index.vue
@@ -81,7 +81,7 @@
         <el-card class="Maplist">
           <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 type="selection" width="50" align="center" :selectable="isSelectable" />
               <el-table-column label="设备名称" align="center" prop="deviceName" />
               <el-table-column label="设备图片" align="center" prop="devicePic">
                 <template #default="scope">
@@ -104,13 +104,24 @@
               </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="电量" align="center" prop="battery">
+                <template #default="scope">
+                  <div :class="{
+                    'battery-red': Number(scope.row.battery) < 20,
+                    'battery-yellow': Number(scope.row.battery) >= 20 && Number(scope.row.battery) < 80,
+                    'battery-green': Number(scope.row.battery) >= 80 && Number(scope.row.battery) <= 100
+                  }">
+                    {{ scope.row.battery }}%
+                  </div>
+                </template>
+              </el-table-column>
+
               <el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
                 <template #default="scope">
                   <el-button link type="primary" @click="handleControl(scope.row)">控制面板</el-button>
@@ -127,11 +138,11 @@
       </el-col>
     </el-row>
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
+      <div class="title_ps">{{ `对${arrayDeviceName.join('、')}设备发送消息` }}</div>
       <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-input type="textarea" v-model="form.messageToSend" placeholder="请输入消息内容" />
       </el-form>
+
       <template #footer>
         <div class="dialog-footer">
           <el-button type="primary" @click="submitForm" :loading="sendTextLoading"
@@ -207,8 +218,12 @@ const switchView = (view: 'list' | 'map') => {
 };
 const dialog = reactive<DialogOption>({
   visible: false,
-  title: ''
+  title: '发送信息'
 });
+const isSelectable = (row: any) => {
+  // 仅当在线状态（onlineStatus == 1）时允许选中
+  return row.onlineStatus === 1;
+}
 /** 通过条件过滤节点  */
 const filterNode = (value: string, data: any) => {
   if (!value) return true;
@@ -286,12 +301,17 @@ const resetQuery = () => {
 
 /** 设备控制跳转 */
 const handleControl = (row: any) => {
+  console.log(row,'row1111');
+  
   const deviceId = row.id;
   router.push('/controlCenter/6170/' + deviceId);
 };
 
 /** 选择条数  */
+const arrayDeviceName = ref([])
 const handleSelectionChange = (selection: deviceVO[]) => {
+  console.log(selection, 'selectionselection');
+  arrayDeviceName.value = selection.map(item => item.deviceName);
   ids.value = selection;
   single.value = selection.length != 1;
   multiple.value = !selection.length;
@@ -397,7 +417,7 @@ const submitForm = async () => {
 };
 // 取消
 const cancel = () => {
-  dialog.visible = true;
+  dialog.visible = false;
   form.value.messageToSend = ''
 }
 // 强制报警
@@ -411,6 +431,7 @@ const forceAlarm = async () => {
     return;
   }
   try {
+    await proxy?.$modal.confirm('确定要对所选设备开启强制报警？', '强制报警');
     forceAlarmLoading.value = true
     // 2. 准备请求数据
     const batchId = generateShortId();
@@ -465,6 +486,25 @@ const forceAlarm = async () => {
   background: transparent;
 }
 
+.battery-red {
+  color: rgba(224, 52, 52, 1);
+}
+
+/* 20%~80% 黄色（或橙色，根据设计图调整） */
+.battery-yellow {
+  color: rgba(234, 152, 0, 1);
+}
+
+/* 80%~100% 绿色 */
+.battery-green {
+  color: rgba(234, 152, 0, 1);
+}
+
+.title_ps {
+  color: rgba(224, 52, 52, 1);
+  padding: 0px 0 20px 0;
+}
+
 .main-tree {
   border-radius: 4px;
   box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
diff --git a/src/views/controlCenter/historyjectory/trackplayback.vue b/src/views/controlCenter/historyjectory/trackplayback.vue
index 55b9b70..a369559 100644
--- a/src/views/controlCenter/historyjectory/trackplayback.vue
+++ b/src/views/controlCenter/historyjectory/trackplayback.vue
@@ -50,14 +50,26 @@
 <script setup lang="ts">
 import api from "@/api/controlCenter/historyjectory/index"
 import { formatTimestampToHM } from "@/utils/function"
+import { useRoute } from "vue-router"
+import { ref, onMounted, onUnmounted, watch } from "vue"
+import { ElMessage } from "element-plus"
+
+// 添加AMap类型声明
+declare global {
+  interface Window {
+    AMap: any;
+  }
+}
+
+declare var AMap: any;
 const route = useRoute();
 // -------------------------- 状态管理 --------------------------
 // 地图实例
-const mapRef = ref<AMap.Map | null>(null);
+const mapRef = ref<any>(null);
 // 轨迹线实例
-const polylineRef = ref<AMap.Polyline | null>(null);
+const polylineRef = ref<any>(null);
 // 移动标记点实例
-const markerRef = ref<AMap.Marker | null>(null);
+const markerRef = ref<any>(null);
 // 轨迹数据（初始为空，从设备列表动态获取）
 const trackPoints = ref<[number, number][]>([]); // 移除硬编码默认值
 // 设备分组数据（包含各设备的轨迹点）
@@ -92,21 +104,19 @@ const initMap = () => {
         polylineRef.value = polyline;
         // 创建标记点（初始位置临时设为 [0, 0]，播放时会覆盖）
         const marker = new AMap.Marker({
-            position: [0, 0],
+            position: [20, 20],
             icon: new AMap.Icon({
                 size: new AMap.Size(40, 40),
-                image: 'https://webapi.amap.com/images/car.png',
+                image: '/src/assets/images/position_ico.png',
                 imageSize: new AMap.Size(40, 40),
             }),
             anchor: 'center',
         });
         map.add(marker);
         markerRef.value = marker;
-
         isLoading.value = false;
         fetchTrackData(); // 数据请求移到地图初始化后
     } catch (error) {
-        console.error('地图初始化失败：', error);
         isLoading.value = false;
     }
 };
@@ -254,11 +264,11 @@ watch(trackPoints, (newPoints) => {
 
 <style scoped>
 /* 样式保持不变 */
-:deep .el-timeline-item__tail {
+:deep(.el-timeline-item__tail) {
     border-left: 1px solid rgba(0, 198, 250, 0.2);
 }
 
-:deep .el-timeline-item__timestamp {
+:deep(.el-timeline-item__timestamp) {
     color: rgba(2, 124, 251, 1);
     font-size: 16px;
 }
@@ -446,4 +456,4 @@ watch(trackPoints, (newPoints) => {
     color: #666;
     padding-top: 20px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/views/equipmentAlarmRecord/index.vue b/src/views/equipmentAlarmRecord/index.vue
index f64eef0..a0d4755 100644
--- a/src/views/equipmentAlarmRecord/index.vue
+++ b/src/views/equipmentAlarmRecord/index.vue
@@ -3,48 +3,60 @@
     <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
       :leave-active-class="proxy?.animate.searchAnimate.leave">
       <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-button :type="isListView ? 'primary' : ''" @click="switchView('card')">
+        <el-card shadow="hover" class="btn_wev">
+          <el-button :type="isListView ? 'primary' : ''" @click="switchView('card')" class="btn_list">
             {{ isListView ? '卡片显示' : '卡片显示' }}
           </el-button>
-          <el-button :type="!isListView ? 'primary' : ''" @click="switchView('list')">
+          <el-button :type="!isListView ? 'primary' : ''" @click="switchView('list')" class="btn_list">
             {{ !isListView ? '列表显示' : '列表显示' }}
           </el-button>
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true" style="margin-top: 20px;">
-            <el-form-item label="设备名称" prop="deviceName">
-              <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <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="deviceAction">
-              <el-select v-model="queryParams.deviceAction">
-                <el-option value="0" label="强制报警"></el-option>
-                <el-option value="1" label="撞击闯入"></el-option>
-                <el-option value="2" label="手动报警"></el-option>
-                <el-option value="3" label="电子围栏告警"></el-option>
-                <el-option value="4" label="强制告警"></el-option>
-              </el-select>
-            </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 label="报警状态" prop="treatmentState">
-              <el-select v-model="queryParams.treatmentState">
-                <el-option value="0" label="已处理"></el-option>
-                <el-option value="1" label="未处理"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
+          <div class="btn_search">
+            <div style="position: absolute; right:30px; top:30px">
+              <el-input v-model="queryParams.content" placeholder="报警信息" clearable
+                style="width: 200px; margin-right: 20px;" @keyup.enter="handleQuery" @input="handleInput" />
+              <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" style="margin-top: 20px;">
+                <el-form-item label="设备名称" prop="deviceName">
+                  <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable
+                    @keyup.enter="handleQuery" />
+                </el-form-item>
+                <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="deviceAction">
+                  <el-select v-model="queryParams.deviceAction">
+                    <el-option value="0" label="强制报警"></el-option>
+                    <el-option value="1" label="撞击闯入"></el-option>
+                    <el-option value="2" label="手动报警"></el-option>
+                    <el-option value="3" label="电子围栏告警"></el-option>
+                    <el-option value="4" label="强制告警"></el-option>
+                  </el-select>
+                </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 label="报警状态" prop="treatmentState">
+                  <el-select v-model="queryParams.treatmentState">
+                    <el-option value="0" label="已处理"></el-option>
+                    <el-option value="1" label="未处理"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+                  <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-collapse-item>
+          </el-collapse>
         </el-card>
       </div>
     </transition>
@@ -158,7 +170,8 @@ const showSearch = ref(true);
 const total = ref(0);
 const deviceTypeOptions = ref([]); //设备类型
 const queryFormRef = ref<ElFormInstance>();
-const alarmFormRef = ref<ElFormInstance>();
+const activeNames = ref([]);
+const debounceTimer = ref(null)   // 用于防抖的定时器
 const initFormData: AlarmForm = {
   id: undefined,
   deviceId: undefined,
@@ -225,14 +238,23 @@ const getDeviceType = () => {
 
   })
 };
+const toggleFilter = () => {
+  if (activeNames.value.length > 0) {
+    activeNames.value = [];
+  } else {
+    activeNames.value = ['1'];
+  }
+};
 
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  alarmFormRef.value?.resetFields();
-}
-
+const handleInput = () => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  // 300ms后执行查询（避免输入过程中频繁调用接口）
+  debounceTimer.value = setTimeout(() => {
+    handleQuery()  // 调用查询接口的方法
+  }, 300)
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -250,8 +272,25 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
+:deep .el-collapse-item__header {
+  display: none;
+}
+
+:deep .el-collapse-item__wrap {
+  border-top: none;
+}
+
+.btn_wev {
+  padding: 5px 0;
+}
+
+.btn_list {
+  margin-top: -5px;
+  margin-bottom: 10px;
+}
+
 .custom-alarm-card {
-  height: 298px;
+  height: 270px;
   display: flex;
   flex-direction: column;
   box-shadow: 0px 0px 6px 0px rgba(0, 27, 74, 0.1);
@@ -320,7 +359,8 @@ onMounted(() => {
 .label {
   font-weight: 500;
   margin-right: 4px;
-  margin: 12px 0;
+  margin: 4px 0;
+  font-size: 14px;
 }
 
 .value {
@@ -334,6 +374,7 @@ onMounted(() => {
   margin: 10px 0 10px 0;
   position: relative;
   color: rgb(224, 52, 52);
+  font-size: 13px;
 }
 
 .alearm::before {
@@ -354,6 +395,7 @@ onMounted(() => {
   margin: 10px 0 10px 0;
   position: relative;
   color: rgba(56, 64, 79, 1);
+  font-size: 13px;
 }
 
 .alearmADD::before {

From 78771e9551cb38f611352cbfab505f9995b77a00 Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Tue, 2 Sep 2025 17:48:02 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/controlCenter/6170/index.vue                 | 10 ++++++++--
 .../controlCenter/controlPanel/components/map.vue      |  2 +-
 src/views/controlCenter/controlPanel/index.vue         |  5 +++++
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/views/controlCenter/6170/index.vue b/src/views/controlCenter/6170/index.vue
index 6b831d9..f7b4e72 100644
--- a/src/views/controlCenter/6170/index.vue
+++ b/src/views/controlCenter/6170/index.vue
@@ -339,18 +339,22 @@ const handleLaserClick = async () => {
 // 人员信息发送
 const registerPostInit = () => {
     if (!deviceDetail.value.personnelInfo.unitName) {
+        ElMessage.closeAll();
         proxy?.$modal.msgWarning('单位名称不能为空');
         return
     }
     if (!deviceDetail.value.personnelInfo.name) {
+        ElMessage.closeAll();
         proxy?.$modal.msgWarning('姓名不能为空');
         return
     }
     if (!deviceDetail.value.personnelInfo.position) {
+        ElMessage.closeAll();
         proxy?.$modal.msgWarning('职位不能为空');
         return
     }
     if (!deviceDetail.value.personnelInfo.code) {
+        ElMessage.closeAll();
         proxy?.$modal.msgWarning('ID不能为空');
         return
     }
@@ -397,7 +401,7 @@ const saveBtn = () => {
 // 强制报警
 const forceAlarm = async () => {
     try {
-        await proxy?.$modal.confirm('确定要对该设备开启强制报警？','');
+        await proxy?.$modal.confirm('确定要对该设备开启强制报警？', '');
         forceAlarmLoading.value = true
         // 2. 准备请求数据
         const batchId = generateShortId();
@@ -440,6 +444,7 @@ const forceAlarm = async () => {
 const sendTextMessage = async () => {
     // 防重复提交
     if (!deviceDetail.value.sendMsg) {
+        ElMessage.closeAll();
         proxy?.$modal.msgWarning('发送信息不能为空');
         return;
     }
@@ -514,7 +519,8 @@ onMounted(() => {
             .online {
                 color: #00ff00;
             }
-            .offline{
+
+            .offline {
                 color: rgb(224, 52, 52);
             }
         }
diff --git a/src/views/controlCenter/controlPanel/components/map.vue b/src/views/controlCenter/controlPanel/components/map.vue
index 5bb9843..ff8d72e 100644
--- a/src/views/controlCenter/controlPanel/components/map.vue
+++ b/src/views/controlCenter/controlPanel/components/map.vue
@@ -151,7 +151,7 @@ const renderMarkers = () => {
       map: mapInstance, 
       icon: new AMap.Icon({
         size: new AMap.Size(32, 32), // Marker显示尺寸
-        image: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', 
+        image: '/src/assets/images/position_ico.png',
         imageSize: new AMap.Size(32, 32)
       })
     });
diff --git a/src/views/controlCenter/controlPanel/index.vue b/src/views/controlCenter/controlPanel/index.vue
index 0f2c930..fd94f1e 100644
--- a/src/views/controlCenter/controlPanel/index.vue
+++ b/src/views/controlCenter/controlPanel/index.vue
@@ -356,10 +356,12 @@ const getDeptTree = async () => {
 const sendTextMessage = () => {
   // 防重复提交
   if (!queryParams.value.deviceType) {
+      ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选择设备类型');
     return;
   }
   if (ids.value.length == 0) {
+      ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选中一条设备');
     return;
   }
@@ -368,6 +370,7 @@ const sendTextMessage = () => {
 // 发送文本消息确认
 const submitForm = async () => {
   if (!form.value.messageToSend) {
+      ElMessage.closeAll();
     proxy?.$modal.msgWarning('发送消息不能为空');
     return
   }
@@ -423,10 +426,12 @@ const cancel = () => {
 // 强制报警
 const forceAlarm = async () => {
   if (!queryParams.value.deviceType) {
+      ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选择设备类型');
     return;
   }
   if (ids.value.length == 0) {
+      ElMessage.closeAll();
     proxy?.$modal.msgWarning('请先选中一条设备');
     return;
   }

From 6557b79f0c9afbf88de56dc087f323c2f7a60476 Mon Sep 17 00:00:00 2001
From: fengerli <528575642@qq.com>
Date: Tue, 2 Sep 2025 18:34:53 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=9B=BE=E6=A0=87?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/controlCenter/controlPanel/components/map.vue  | 4 ++--
 src/views/controlCenter/historyjectory/trackplayback.vue | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/views/controlCenter/controlPanel/components/map.vue b/src/views/controlCenter/controlPanel/components/map.vue
index ff8d72e..679b5d4 100644
--- a/src/views/controlCenter/controlPanel/components/map.vue
+++ b/src/views/controlCenter/controlPanel/components/map.vue
@@ -37,8 +37,8 @@
 
 <script setup lang="ts">
 import { deviceVO } from '@/api/controlCenter/controlPanel/types';
-import { defineProps, ref, watch, onMounted, onUnmounted, nextTick } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
+import strongLightDefault from '@/assets/images/position_ico.png';
 const props = defineProps({
   deviceList: {
     type: Array as PropType<deviceVO[]>,
@@ -151,7 +151,7 @@ const renderMarkers = () => {
       map: mapInstance, 
       icon: new AMap.Icon({
         size: new AMap.Size(32, 32), // Marker显示尺寸
-        image: '/src/assets/images/position_ico.png',
+        image: strongLightDefault,
         imageSize: new AMap.Size(32, 32)
       })
     });
diff --git a/src/views/controlCenter/historyjectory/trackplayback.vue b/src/views/controlCenter/historyjectory/trackplayback.vue
index a369559..c0317aa 100644
--- a/src/views/controlCenter/historyjectory/trackplayback.vue
+++ b/src/views/controlCenter/historyjectory/trackplayback.vue
@@ -51,9 +51,7 @@
 import api from "@/api/controlCenter/historyjectory/index"
 import { formatTimestampToHM } from "@/utils/function"
 import { useRoute } from "vue-router"
-import { ref, onMounted, onUnmounted, watch } from "vue"
-import { ElMessage } from "element-plus"
-
+import strongLightDefault from '@/assets/images/position_ico.png';
 // 添加AMap类型声明
 declare global {
   interface Window {
@@ -107,7 +105,7 @@ const initMap = () => {
             position: [20, 20],
             icon: new AMap.Icon({
                 size: new AMap.Size(40, 40),
-                image: '/src/assets/images/position_ico.png',
+                image: strongLightDefault,
                 imageSize: new AMap.Size(40, 40),
             }),
             anchor: 'center',