perf: device location show all devcie marker point && add alarm effect

ww
1 parent 83f72c07
Showing 1 changed file with 146 additions and 13 deletions
src/views/device/localtion/index.vue
--- a/src/views/device/localtion/index.vue
View file @451a739
+++ b/src/views/device/localtion/index.vue
View file @451a739
@@ -86,6 +86,18 @@
   import { defaultSchemas } from './cpns/TimePeriodForm/config';
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { dateUtil } from '/@/utils/dateUtil';
+
+  interface DeviceInfo {
+    alarmStatus: 0 | 1;
+    deviceState: string;
+    tbDeviceId: string;
+    name: string;
+    organizationDTO: { name: string };
+    deviceProfile: { default: boolean; enabled: boolean; name: string; transportType: string };
+    deviceInfo: { longitude: string; latitude: string; address: string };
+  }
+  type MarkerList = DeviceInfo & { marker: any };
+
   export default defineComponent({
     name: 'BaiduMap',
     components: {
@@ -118,6 +130,8 @@
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerModal, { openModal }] = useModal();
+      const BMapInstance = ref<Nullable<any>>(null);
+
       const loading = ref(false);
       const [registerTable] = useTable({
@@ -133,6 +147,39 @@
         pagination: {
           showSizeChanger: false,
         },
+        afterFetch: async (data: DeviceInfo[]) => {
+          const BMap = (window as any).BMap;
+          unref(BMapInstance).clearOverlays();
+          const markerList: MarkerList[] = [];
+          data.forEach((item) => {
+            const {
+              deviceState,
+              deviceInfo: { longitude, latitude },
+            } = item;
+            const point = new BMap.Point(longitude, latitude);
+            const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
+            const myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
+            const marker = new BMap.Marker(point, { icon: myIcon });
+            markerList.push({ ...item, marker });
+          });
+
+          markerList.forEach((record) => {
+            unref(BMapInstance).addOverlay(record.marker);
+            const isAlarmStatus = !!record.alarmStatus;
+            if (isAlarmStatus) {
+              const alarmStatusClassName = 'device-status__alarm';
+              const className = record.marker.Ec.getAttribute('class');
+              record.marker.Ec.setAttribute('class', `${className} ${alarmStatusClassName}`);
+            }
+
+            //标注监听事件
+            record.marker.addEventListener('click', function () {
+              createDeviceInfoWindow(record);
+            });
+          });
+
+          return data;
+        },
       });
       async function initMap() {
@@ -141,24 +188,87 @@
         const wrapEl = unref(wrapRef);
         const BMap = (window as any).BMap;
         if (!wrapEl) return;
-        const map = new BMap.Map(wrapEl);
+        BMapInstance.value = new BMap.Map(wrapEl);
         function myFun(result) {
           let mk = new BMap.Marker(result.center);
-          map.addOverlay(mk);
-          map.panTo(result.center);
-          map.centerAndZoom(result.center, 15);
-          map.enableScrollWheelZoom(true);
+          unref(BMapInstance).addOverlay(mk);
+          unref(BMapInstance).panTo(result.center);
+          unref(BMapInstance).centerAndZoom(result.center, 15);
+          unref(BMapInstance).enableScrollWheelZoom(true);
         }
         let myCity = new BMap.LocalCity();
         myCity.get(myFun);
       }
+
+      const createDeviceInfoWindow = async (record: DeviceInfo) => {
+        const BMap = (window as any).BMap;
+        entityId = record.tbDeviceId;
+        globalRecord = record;
+        try {
+          deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];
+        } catch (error) {}
+
+        const options = {
+          width: 330, // 信息窗口宽度
+          height: 0, // 信息窗口高度
+        };
+        const { name, organizationDTO, deviceState, deviceProfile } = record;
+        const { address, longitude, latitude } = record.deviceInfo;
+        // 创建信息窗口对象
+        const res = await getDeviceActiveTime(entityId);
+
+        let { lastUpdateTs } = res[0];
+        lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
+        let infoWindow = new BMap.InfoWindow(
+          `
+          <div style="display:flex;justify-content:space-between; margin:20px 0px;">
+            <div style="font-size:16px;font-weight:bold">${name}</div>
+            ${
+              deviceState === 'INACTIVE'
+                ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`
+                : deviceState === 'ONLINE'
+                ? `<div style="display:flex;align-items:center; ">
+                <img style="width:15px;height:15px" src="${online}" class="mr-1">在线</div>`
+                : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`
+            }
+          </div>
+          <div>所属组织：${organizationDTO.name}</div>
+          <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
+          <div style="margin-top:6px;">
+            设备位置：${address == '' ? '该设备暂无地理位置' : address}
+          </div>
+          <div style="margin-top:6px;">
+            ${
+              deviceState === 'ONLINE' ? '在线' : deviceState === 'INACTIVE' ? '创建' : '离线'
+            }时间：${lastUpdateTs}
+            </div>
+          <div style="display:flex;justify-content:end; margin-top:10px">
+            <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
+            <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
+          </div>
+          `,
+          options
+        );
+
+        const point = new BMap.Point(
+          longitude || 104.04666605565338,
+          latitude || 30.543516387560476
+        );
+
+        if (!longitude || !latitude)
+          infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
+        unref(BMapInstance).centerAndZoom(point, 15);
+        unref(BMapInstance).openInfoWindow(infoWindow, unref(BMapInstance).getCenter());
+      };
       // 点击表格某一行触发
       const deviceRowClick = async (record) => {
+        createDeviceInfoWindow(record);
+        return;
         entityId = record.tbDeviceId;
         globalRecord = record;
         const BMap = (window as any).BMap;
-        const wrapEl = unref(wrapRef);
-        const map = new BMap.Map(wrapEl);
+        // const wrapEl = unref(wrapRef);
+        // const map = new BMap.Map(wrapEl);
         // if (record.deviceInfo.address) {
         // keys = await getDeviceDataKeys(entityId);
         try {
@@ -176,8 +286,8 @@
           width: 330, // 信息窗口宽度
           height: 0, // 信息窗口高度
         };
-        map.centerAndZoom(point, 15);
-        map.enableScrollWheelZoom(true);
+        unref(BMapInstance).centerAndZoom(point, 15);
+        unref(BMapInstance).enableScrollWheelZoom(true);
         // 创建信息窗口对象
         const res = await getDeviceActiveTime(entityId);
@@ -212,20 +322,20 @@
           options
         );
-        map.openInfoWindow(infoWindow, map.getCenter());
+        unref(BMapInstance).openInfoWindow(infoWindow, unref(BMapInstance).getCenter());
         let preMarker = null;
         const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
         let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
         let marker = new BMap.Marker(point, { icon: myIcon });
         if (marker) {
-          map.removeOverlay(preMarker);
+          unref(BMapInstance).removeOverlay(preMarker);
         }
-        map.addOverlay(marker);
+        unref(BMapInstance).addOverlay(marker);
         //标注监听事件
         marker.addEventListener('click', function (e) {
           const point = e.point;
-          map.openInfoWindow(infoWindow, point);
+          unref(BMapInstance).openInfoWindow(infoWindow, point);
         });
         //标注监听事件
         // } else {
@@ -428,3 +538,26 @@
     background-color: #fff;
   }
 </style>
+<style>
+  .device-status__alarm {
+    transform-origin: 10px 15px;
+    animation: 0.5s linear 0s infinite alternate Scale;
+  }
+
+  @keyframes Scale {
+    0% {
+      /* transform: translateY(0px); */
+      transform: scale(1);
+    }
+
+    50% {
+      /* transform: translateY(5px); */
+      transform: scale(1.5);
+    }
+
+    100% {
+      /* transform: translateY(10px); */
+      transform: scale(2);
+    }
+  }
+</style>