fix：修改地理位置地图弹窗提示问题

fengtao
1 parent 206cacba
Showing 1 changed file with 52 additions and 46 deletions
src/views/device/localtion/index.vue
--- a/src/views/device/localtion/index.vue
View file @6f25bf5
+++ b/src/views/device/localtion/index.vue
View file @6f25bf5
@@ -2,7 +2,7 @@
   <div class="wrapper">
     <div ref="wrapRef" :style="{ height, width }"> </div>
     <div class="right-wrap">
-      <BasicTable @register="registerTable" @rowClick="deviceRowClick">
+      <BasicTable style="cursor: pointer" @register="registerTable" @rowClick="deviceRowClick">
         <template #deviceState="{ record }">
           <Tag
             :color="
@@ -230,24 +230,28 @@
         const BMap = (window as any).BMap;
         const wrapEl = unref(wrapRef);
         const map = new BMap.Map(wrapEl);
-        if (record.deviceInfo.address) {
-          keys = await getDeviceDataKeys(entityId);
-          const { name, organizationDTO, deviceState, deviceProfile } = record;
-          const { longitude, latitude, address } = record.deviceInfo;
-          const point = new BMap.Point(longitude, latitude);
-          let options = {
-            width: 330, // 信息窗口宽度
-            height: 0, // 信息窗口高度
-          };
-          map.centerAndZoom(point, 15);
-          map.enableScrollWheelZoom(true);
-          // 创建信息窗口对象
-          const res = await getDeviceActiveTime(entityId);
+        // if (record.deviceInfo.address) {
+        keys = await getDeviceDataKeys(entityId);
+        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 = {
+          width: 330, // 信息窗口宽度
+          height: 0, // 信息窗口高度
+        };
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
+        // 创建信息窗口对象
+        const res = await getDeviceActiveTime(entityId);
-          let { value: activeStatus, lastUpdateTs } = res[0];
-          lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
-          let infoWindow = new BMap.InfoWindow(
-            `
+        let { value: activeStatus, 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>
               ${
@@ -261,43 +265,45 @@
             </div>
             <div>所属组织：${organizationDTO.name}</div>
             <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
-            <div style="margin-top:6px;">设备位置：${address}</div>
+            <div style="margin-top:6px;">设备位置：${
+              address == '' ? '该设备暂无地理位置' : address
+            }</div>
             <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${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
-          );
+          options
+        );
-          map.openInfoWindow(infoWindow, map.getCenter());
-          let preMarker = null;
+        map.openInfoWindow(infoWindow, map.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);
-          }
-          map.addOverlay(marker);
-          //标注监听事件
-          marker.addEventListener('click', function () {
-            map.openInfoWindow(infoWindow, map.getCenter());
-          });
-          //标注监听事件
-        } 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());
+        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 () {
+          map.openInfoWindow(infoWindow, map.getCenter());
+        });
+        //标注监听事件
+        // } 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());
+        // }
       };
       // 设备信息