地图

src/api/pms/device/index.ts

@@ -36,10 +36,16 @@ export interface IotDeviceVO {
   name: string // bom节点名称
   code: string // bom节点编码
   devicePersons: string // 设备责任人 逗号分隔
+  location: string
+  lat: number
+  lng: number
 }
 
 // 设备台账 API
 export const IotDeviceApi = {
+  getMapDevice: async () => {
+    return await request.get({ url: `/rq/iot-device/map`})
+  },
   // 查询设备台账分页
   getIotDevicePage: async (params: any) => {
     return await request.get({ url: `/rq/iot-device/page`, params })

src/views/pms/map/Map.vue

@@ -11,15 +11,9 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
-
-interface Device {
-  id: string;
-  name: string;
-  location: string;
-  status: number;
-  lng: number;
-  lat: number;
-}
+import {DICT_TYPE, getDictLabel} from "@/utils/dict";
+import { IotDeviceApi, IotDeviceVO } from '@/api/pms/device'
+import {aY} from "@fullcalendar/core/internal-common";
 
 interface Cluster {
   lng: number;
@@ -34,29 +28,30 @@ export default defineComponent({
     const mapContainer = ref<HTMLElement | null>(null);
     const map = ref<any>(null);
     const mapType = ref<'BMAP_NORMAL_MAP' | 'BMAP_SATELLITE_MAP'>('BMAP_NORMAL_MAP');
-    const selectedDevice = ref<Device | null>(null);
-    const hoverDevice = ref<Device | null>(null);
+    const selectedDevice = ref<IotDeviceVO | null>(null);
+    const hoverDevice = ref<IotDeviceVO | null>(null);
     const clusters = ref<Cluster[]>([]);
 
     // 设备数据示例
-    const devices = ref<Device[]>([
-      { id: 'D001', name: '设备1', location: '北京', status: 1, lng: 116.404, lat: 39.915 },
-      { id: 'D002', name: '设备2', location: '上海', status: 2, lng: 121.474, lat: 31.230 },
-      { id: 'D003', name: '设备3', location: '广州', status: 1, lng: 113.264, lat: 23.129 },
-      { id: 'D004', name: '设备4', location: '深圳', status: 3, lng: 114.058, lat: 22.543 },
-      { id: 'D005', name: '设备5', location: '成都', status: 1, lng: 104.065, lat: 30.659 },
-      { id: 'D006', name: '设备6', location: '武汉', status: 2, lng: 114.305, lat: 30.593 },
-      { id: 'D007', name: '设备7', location: '西安', status: 1, lng: 108.948, lat: 34.263 },
-      { id: 'D008', name: '设备8', location: '杭州', status: 3, lng: 120.155, lat: 30.274 },
-      { id: 'D009', name: '设备9', location: '南京', status: 1, lng: 118.797, lat: 32.060 },
-      { id: 'D010', name: '设备10', location: '重庆', status: 2, lng: 106.505, lat: 29.533 },
-    ]);
-
-    const deviceStatusMap = {
-      1: '在线',
-      2: '离线',
-      3: '异常'
-    };
+    const devices = ref<IotDeviceVO[]>();
+
+    // const devices = ref<Device[]>([
+    //   { id: 'D001', deviceName: '设备1', location: '北京', deviceStatus: 1, lng: 84.053192, lat: 41.319412 },
+      // { id: 'D002', deviceName: '设备2', location: '上海', deviceStatus: 2, lng: 121.474, lat: 31.230 },
+      // { id: 'D003', deviceName: '设备3', location: '广州', deviceStatus: 1, lng: 113.264, lat: 23.129 },
+      // { id: 'D004', deviceName: '设备4', location: '深圳', deviceStatus: 3, lng: 114.058, lat: 22.543 },
+      // { id: 'D005', deviceName: '设备5', location: '成都', deviceStatus: 1, lng: 104.065, lat: 30.659 },
+      // { id: 'D006', deviceName: '设备6', location: '武汉', deviceStatus: 2, lng: 114.305, lat: 30.593 },
+      // { id: 'D007', deviceName: '设备7', location: '西安', deviceStatus: 1, lng: 108.948, lat: 34.263 },
+      // { id: 'D008', deviceName: '设备8', location: '杭州', deviceStatus: 3, lng: 120.155, lat: 30.274 },
+      // { id: 'D009', deviceName: '设备9', location: '南京', deviceStatus: 1, lng: 118.797, lat: 32.060 },
+      // { id: 'D010', deviceName: '设备10', location: '重庆', deviceStatus: 2, lng: 106.505, lat: 29.533 },
+    // ]);
+    // const deviceStatusMap = {
+    //   1: '在线',
+    //   2: '离线',
+    //   3: '异常'
+    // };
 
     // 初始化地图
     const initMap = () => {
@@ -126,7 +121,7 @@ export default defineComponent({
       }
     };
 
-    const createDeviceMarker = (device: Device, point: any) => {
+    const createDeviceMarker = (device: IotDeviceVO, point: any) => {
       const marker = new (window as any).BMap.Marker(point, {
         icon: new (window as any).BMap.Icon('https://iot.deepoil.cc/images/ding300.svg', new (window as any).BMap.Size(28, 30),
           {
@@ -197,29 +192,30 @@ export default defineComponent({
         transform: 'scale(1)'
       };
 
-      // 添加鼠标悬停事件
-      label.addEventListener('mouseover', () => {
-        Object.assign(label.getStyle(), hoverStyle);
-        label.setStyle(label.getStyle());
-      });
-
-      // 添加鼠标移出事件
-      label.addEventListener('mouseout', () => {
-        Object.assign(label.getStyle(), normalStyle);
-        label.setStyle(label.getStyle());
-      });
+      // // 添加鼠标悬停事件
+      // label.addEventListener('mouseover', () => {
+      //   Object.assign(label.getStyle(), hoverStyle);
+      //   label.setStyle(label.getStyle());
+      // });
+      //
+      // // 添加鼠标移出事件
+      // label.addEventListener('mouseout', () => {
+      //   Object.assign(label.getStyle(), normalStyle);
+      //   label.setStyle(label.getStyle());
+      // });
 
       // 添加点击事件
       label.addEventListener('click', () => {
-        map.value?.setZoom(9.5);
+        map.value?.setZoom(10);
         map.value?.panTo(point);
       });
 
       return label;
     };
 
-    const clusterDevices = (devices: Device[], map: any): Cluster[] => {
+    const clusterDevices = (devices: IotDeviceVO[], map: any): Cluster[] => {
       const clusters: Cluster[] = [];
+      debugger
       const gridSize = getGridSize(map.getZoom());
 
       const gridMap = new Map<string, Cluster>();
@@ -246,19 +242,20 @@ export default defineComponent({
     };
 
     const getGridSize = (zoom: number): number => {
+      debugger
       if (zoom <= 5) return 2;
       if (zoom <= 8) return 1;
-      if (zoom <= 10) return 0.5;
+      if (zoom < 10) return 0.5;
       return 0.1;
     };
 
-    const showDeviceInfoWindow = (device: Device, point: any) => {
+    const showDeviceInfoWindow = (device: IotDeviceVO, point: any) => {
       const content = `
         <div>
-          <p><strong>设备ID:</strong> ${device.id}</p>
-          <p><strong>设备名称:</strong> ${device.name}</p>
+          <p><strong>设备编码:</strong> ${device.deviceCode}</p>
+          <p><strong>设备名称:</strong> ${device.deviceName}</p>
           <p><strong>位置:</strong> ${device.location}</p>
-          <p><strong>状态:</strong> ${deviceStatusMap[device.status]}</p>
+          <p><strong>状态:</strong> ${getDictLabel(DICT_TYPE.PMS_DEVICE_STATUS, device.deviceStatus)}</p>
         </div>
       `;
       const infoWindow = new (window as any).BMap.InfoWindow(content, {
@@ -289,8 +286,14 @@ export default defineComponent({
       map.value.setMapType((window as any)[mapType.value]);
     };
 
-    onMounted(() => {
-      initMap();
+    const getData = async () =>{
+      await IotDeviceApi.getMapDevice().then(res=>{
+        devices.value = res
+        initMap()
+      })
+    }
+    onMounted(async () => {
+      await getData();
     });
 
     onBeforeUnmount(() => {
@@ -303,7 +306,7 @@ export default defineComponent({
       mapContainer,
       selectedDevice,
       hoverDevice,
-      deviceStatusMap,
+      // deviceStatusMap,
       zoomIn,
       zoomOut,
       toggleMapType