设备控制提交

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_model">{{ device.model }}</div>
-                <div class="device_status" :class="{ online: device.status === '在线', offline: device.status === '离线' }">
-                  {{ device.status }}
+                <div class="device_name">{{ device.deviceName }}</div>
+                <div class="device_model">{{ device.typeName }}</div>
+                <div class="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
   });
-
-  // 设备标记点
-  deviceList.value.forEach(device => {
-    new AMap.Marker({
-      position: [device.lng, device.lat],
-      title: device.name,
-      map: mapInstance
+  // 后续的设备打点逻辑不变...
+  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
+        });
+      }
     });
-  });
+  }
 };
+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{
-background-color: rgba(247, 248, 252, 1);
+.device_page {
+  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>