| 
1
 | 
1
 | 
 <template>
 | 
| 
2
 | 
2
 | 
   <div class="wrapper">
 | 
| 
3
 | 
 
 | 
-    <div ref="wrapRef" :style="{ height, width }"> </div>
 | 
| 
 
 | 
3
 | 
+    <Spin :spinning="spinning">
 | 
| 
 
 | 
4
 | 
+      <div ref="wrapRef" :style="{ height, width }"> </div>
 | 
| 
 
 | 
5
 | 
+    </Spin>
 | 
| 
4
 | 
6
 | 
     <div class="right-wrap !dark:bg-dark-900">
 | 
| 
5
 | 
7
 | 
       <BasicTable
 | 
| 
6
 | 
8
 | 
         style="cursor: pointer"
 | 
| 
...
 | 
...
 | 
@@ -91,6 +93,7 @@ | 
| 
91
 | 
93
 | 
   import { defaultSchemas } from './cpns/TimePeriodForm/config';
 | 
| 
92
 | 
94
 | 
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
 | 
| 
93
 | 
95
 | 
   import { dateUtil } from '/@/utils/dateUtil';
 | 
| 
 
 | 
96
 | 
+  import { Spin } from 'ant-design-vue';
 | 
| 
94
 | 
97
 | 
 
 | 
| 
95
 | 
98
 | 
   interface DeviceInfo {
 | 
| 
96
 | 
99
 | 
     alarmStatus: 0 | 1;
 | 
| 
...
 | 
...
 | 
@@ -114,6 +117,7 @@ | 
| 
114
 | 
117
 | 
       DeviceDetailDrawer,
 | 
| 
115
 | 
118
 | 
       Loading,
 | 
| 
116
 | 
119
 | 
       TimePeriodForm,
 | 
| 
 
 | 
120
 | 
+      Spin,
 | 
| 
117
 | 
121
 | 
     },
 | 
| 
118
 | 
122
 | 
     props: {
 | 
| 
119
 | 
123
 | 
       width: {
 | 
| 
...
 | 
...
 | 
@@ -155,54 +159,56 @@ | 
| 
155
 | 
159
 | 
           showSizeChanger: true,
 | 
| 
156
 | 
160
 | 
         },
 | 
| 
157
 | 
161
 | 
         afterFetch: async (data: DeviceInfo[]) => {
 | 
| 
158
 | 
 
 | 
-          Promise.resolve().then(() => {
 | 
| 
159
 | 
 
 | 
-            const BMap = (window as any).BMap;
 | 
| 
160
 | 
 
 | 
-            unref(BMapInstance).clearOverlays();
 | 
| 
161
 | 
 
 | 
-            const markerList: MarkerList[] = [];
 | 
| 
162
 | 
 
 | 
-            data.forEach((item) => {
 | 
| 
163
 | 
 
 | 
-              const {
 | 
| 
164
 | 
 
 | 
-                name,
 | 
| 
165
 | 
 
 | 
-                deviceState,
 | 
| 
166
 | 
 
 | 
-                deviceInfo: { longitude, latitude },
 | 
| 
167
 | 
 
 | 
-              } = item;
 | 
| 
168
 | 
 
 | 
-              const point = new BMap.Point(longitude, latitude);
 | 
| 
169
 | 
 
 | 
-              const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
 | 
| 
170
 | 
 
 | 
-              const myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
 | 
| 
171
 | 
 
 | 
-              const marker = new BMap.Marker(point, { icon: myIcon });
 | 
| 
172
 | 
 
 | 
-              const label = new BMap.Label(name, {
 | 
| 
173
 | 
 
 | 
-                position: point,
 | 
| 
174
 | 
 
 | 
-                offset: new BMap.Size(-15, -45),
 | 
| 
175
 | 
 
 | 
-              });
 | 
| 
176
 | 
 
 | 
-              label.setStyle({
 | 
| 
177
 | 
 
 | 
-                color: '#000',
 | 
| 
178
 | 
 
 | 
-                borderRadius: '5px',
 | 
| 
179
 | 
 
 | 
-                borderColor: '#ccc',
 | 
| 
180
 | 
 
 | 
-                padding: '5px',
 | 
| 
181
 | 
 
 | 
-              });
 | 
| 
182
 | 
 
 | 
-              markerList.push({ ...item, marker, label });
 | 
| 
183
 | 
 
 | 
-            });
 | 
| 
184
 | 
 
 | 
-
 | 
| 
185
 | 
 
 | 
-            markerList.forEach((record) => {
 | 
| 
186
 | 
 
 | 
-              unref(BMapInstance).addOverlay(record.marker);
 | 
| 
187
 | 
 
 | 
-              unref(BMapInstance).addOverlay(record.label);
 | 
| 
188
 | 
 
 | 
-              const isAlarmStatus = !!record.alarmStatus;
 | 
| 
189
 | 
 
 | 
-              if (isAlarmStatus) {
 | 
| 
190
 | 
 
 | 
-                const alarmStatusClassName = 'device-status__alarm';
 | 
| 
191
 | 
 
 | 
-                const className = record.marker.Ec.getAttribute('class');
 | 
| 
192
 | 
 
 | 
-                record.marker.Ec.setAttribute('class', `${className} ${alarmStatusClassName}`);
 | 
| 
193
 | 
 
 | 
-              }
 | 
| 
194
 | 
 
 | 
-
 | 
| 
195
 | 
 
 | 
-              //标注监听事件
 | 
| 
196
 | 
 
 | 
-              record.marker.addEventListener('click', function () {
 | 
| 
197
 | 
 
 | 
-                createDeviceInfoWindow(record);
 | 
| 
198
 | 
 
 | 
-              });
 | 
| 
199
 | 
 
 | 
-            });
 | 
| 
200
 | 
 
 | 
-          });
 | 
| 
201
 | 
 
 | 
-
 | 
| 
 
 | 
162
 | 
+          createMarket(data);
 | 
| 
202
 | 
163
 | 
           return data;
 | 
| 
203
 | 
164
 | 
         },
 | 
| 
204
 | 
165
 | 
       });
 | 
| 
205
 | 
166
 | 
 
 | 
| 
 
 | 
167
 | 
+      async function createMarket(data: DeviceInfo[]) {
 | 
| 
 
 | 
168
 | 
+        const BMap = (window as any).BMap;
 | 
| 
 
 | 
169
 | 
+        if (!BMap) return;
 | 
| 
 
 | 
170
 | 
+        unref(BMapInstance).clearOverlays();
 | 
| 
 
 | 
171
 | 
+        const markerList: MarkerList[] = [];
 | 
| 
 
 | 
172
 | 
+        data.forEach((item) => {
 | 
| 
 
 | 
173
 | 
+          const {
 | 
| 
 
 | 
174
 | 
+            name,
 | 
| 
 
 | 
175
 | 
+            deviceState,
 | 
| 
 
 | 
176
 | 
+            deviceInfo: { longitude, latitude },
 | 
| 
 
 | 
177
 | 
+          } = item;
 | 
| 
 
 | 
178
 | 
+          const point = new BMap.Point(longitude, latitude);
 | 
| 
 
 | 
179
 | 
+          const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
 | 
| 
 
 | 
180
 | 
+          const myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
 | 
| 
 
 | 
181
 | 
+          const marker = new BMap.Marker(point, { icon: myIcon });
 | 
| 
 
 | 
182
 | 
+          const label = new BMap.Label(name, {
 | 
| 
 
 | 
183
 | 
+            position: point,
 | 
| 
 
 | 
184
 | 
+            offset: new BMap.Size(-15, -45),
 | 
| 
 
 | 
185
 | 
+          });
 | 
| 
 
 | 
186
 | 
+          label.setStyle({
 | 
| 
 
 | 
187
 | 
+            color: '#000',
 | 
| 
 
 | 
188
 | 
+            borderRadius: '5px',
 | 
| 
 
 | 
189
 | 
+            borderColor: '#ccc',
 | 
| 
 
 | 
190
 | 
+            padding: '5px',
 | 
| 
 
 | 
191
 | 
+          });
 | 
| 
 
 | 
192
 | 
+          markerList.push({ ...item, marker, label });
 | 
| 
 
 | 
193
 | 
+        });
 | 
| 
 
 | 
194
 | 
+
 | 
| 
 
 | 
195
 | 
+        markerList.forEach((record) => {
 | 
| 
 
 | 
196
 | 
+          unref(BMapInstance).addOverlay(record.marker);
 | 
| 
 
 | 
197
 | 
+          unref(BMapInstance).addOverlay(record.label);
 | 
| 
 
 | 
198
 | 
+          const isAlarmStatus = !!record.alarmStatus;
 | 
| 
 
 | 
199
 | 
+          if (isAlarmStatus) {
 | 
| 
 
 | 
200
 | 
+            const alarmStatusClassName = 'device-status__alarm';
 | 
| 
 
 | 
201
 | 
+            const className = record.marker.Ec.getAttribute('class');
 | 
| 
 
 | 
202
 | 
+            record.marker.Ec.setAttribute('class', `${className} ${alarmStatusClassName}`);
 | 
| 
 
 | 
203
 | 
+          }
 | 
| 
 
 | 
204
 | 
+
 | 
| 
 
 | 
205
 | 
+          //标注监听事件
 | 
| 
 
 | 
206
 | 
+          record.marker.addEventListener('click', function () {
 | 
| 
 
 | 
207
 | 
+            createDeviceInfoWindow(record);
 | 
| 
 
 | 
208
 | 
+          });
 | 
| 
 
 | 
209
 | 
+        });
 | 
| 
 
 | 
210
 | 
+      }
 | 
| 
 
 | 
211
 | 
+
 | 
| 
206
 | 
212
 | 
       async function initMap() {
 | 
| 
207
 | 
213
 | 
         await toPromise();
 | 
| 
208
 | 
214
 | 
         await nextTick();
 | 
| 
...
 | 
...
 | 
@@ -221,6 +227,7 @@ | 
| 
221
 | 
227
 | 
         myCity.get(myFun);
 | 
| 
222
 | 
228
 | 
       }
 | 
| 
223
 | 
229
 | 
 
 | 
| 
 
 | 
230
 | 
+      const spinning = ref(false);
 | 
| 
224
 | 
231
 | 
       const createDeviceInfoWindow = async (record: DeviceInfo) => {
 | 
| 
225
 | 
232
 | 
         const BMap = (window as any).BMap;
 | 
| 
226
 | 
233
 | 
         entityId = record.tbDeviceId;
 | 
| 
...
 | 
...
 | 
@@ -287,7 +294,13 @@ | 
| 
287
 | 
294
 | 
       };
 | 
| 
288
 | 
295
 | 
       // 点击表格某一行触发
 | 
| 
289
 | 
296
 | 
       const deviceRowClick = async (record) => {
 | 
| 
290
 | 
 
 | 
-        createDeviceInfoWindow(record);
 | 
| 
 
 | 
297
 | 
+        try {
 | 
| 
 
 | 
298
 | 
+          spinning.value = true;
 | 
| 
 
 | 
299
 | 
+          await createDeviceInfoWindow(record);
 | 
| 
 
 | 
300
 | 
+        } catch (err) {
 | 
| 
 
 | 
301
 | 
+        } finally {
 | 
| 
 
 | 
302
 | 
+          spinning.value = false;
 | 
| 
 
 | 
303
 | 
+        }
 | 
| 
291
 | 
304
 | 
       };
 | 
| 
292
 | 
305
 | 
 
 | 
| 
293
 | 
306
 | 
       // 设备信息
 | 
| 
...
 | 
...
 | 
@@ -451,6 +464,7 @@ | 
| 
451
 | 
464
 | 
         isNull,
 | 
| 
452
 | 
465
 | 
         registerDetailDrawer,
 | 
| 
453
 | 
466
 | 
         loading,
 | 
| 
 
 | 
467
 | 
+        spinning,
 | 
| 
454
 | 
468
 | 
         timePeriodRegister,
 | 
| 
455
 | 
469
 | 
         handleCancelModal,
 | 
| 
456
 | 
470
 | 
       };
 | 
...
 | 
...
 | 
 |