Merge branch 'ww' into 'main'

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

See merge request huang/yun-teng-iot-front!343

@@ -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({
@@ -131,7 +145,41 @@
         showIndexColumn: false,
         useSearchForm: true,
         pagination: {
-          showSizeChanger: false,
+          showQuickJumper: false,
+          showSizeChanger: true,
+        },
+        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;
         },
       });
 
@@ -141,43 +189,32 @@
         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 deviceRowClick = async (record) => {
+
+      const createDeviceInfoWindow = async (record: DeviceInfo) => {
+        const BMap = (window as any).BMap;
         entityId = record.tbDeviceId;
         globalRecord = record;
-        const BMap = (window as any).BMap;
-        const wrapEl = unref(wrapRef);
-        const map = new BMap.Map(wrapEl);
-        // if (record.deviceInfo.address) {
-        // keys = await getDeviceDataKeys(entityId);
         try {
           deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];
         } catch (error) {}
 
-        const { name, organizationDTO, deviceState, deviceProfile } = record;
-        const { longitude, latitude, address } = record.deviceInfo;
-        //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝
-        const point = new BMap.Point(
-          longitude == '' ? 104.04666605565338 : longitude,
-          latitude == '' ? 30.543516387560476 : latitude
-        );
-        let options = {
+        const options = {
           width: 330, // 信息窗口宽度
           height: 0, // 信息窗口高度
         };
-        map.centerAndZoom(point, 15);
-        map.enableScrollWheelZoom(true);
+        const { name, organizationDTO, deviceState, deviceProfile } = record;
+        const { address, longitude, latitude } = record.deviceInfo;
         // 创建信息窗口对象
         const res = await getDeviceActiveTime(entityId);
 
@@ -185,61 +222,48 @@
         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;">${
+          <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>
+            }时间：${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
         );
 
-        map.openInfoWindow(infoWindow, map.getCenter());
-        let preMarker = null;
+        const point = new BMap.Point(
+          longitude || 104.04666605565338,
+          latitude || 30.543516387560476
+        );
 
-        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);
-        }
-        map.addOverlay(marker);
-        //标注监听事件
-        marker.addEventListener('click', function (e) {
-          const point = e.point;
-          map.openInfoWindow(infoWindow, point);
-        });
-        //标注监听事件
-        // } else {
-        //   const point = new BMap.Point(106.63028229687498, 36.06735821600903);
-        //   let options = {
-        //     width: 100, // 信息窗口宽度
-        //     height: 100, // 信息窗口高度
-        //     title: '提示', // 信息窗口标题
-        //   };
-        //   map.centerAndZoom(point, 5);
-        //   map.enableScrollWheelZoom(true);
-        //   let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
-        //   map.openInfoWindow(infoWindow, map.getCenter());
-        // }
+        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);
       };
 
       // 设备信息
@@ -428,3 +452,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>