Commit b3689ee166ed5b150c7226d3e4edc359e4cfc039

Authored by ww
1 parent b2f7584e

fix: baidu map dynamic import script slow

@@ -101,6 +101,7 @@ @@ -101,6 +101,7 @@
101 import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config'; 101 import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
102 import { dateUtil } from '/@/utils/dateUtil'; 102 import { dateUtil } from '/@/utils/dateUtil';
103 import { Spin } from 'ant-design-vue'; 103 import { Spin } from 'ant-design-vue';
  104 + import { useAsyncQueue } from './useAsyncQueue';
104 105
105 interface DeviceInfo { 106 interface DeviceInfo {
106 alarmStatus: 0 | 1; 107 alarmStatus: 0 | 1;
@@ -168,14 +169,30 @@ @@ -168,14 +169,30 @@
168 showSizeChanger: true, 169 showSizeChanger: true,
169 }, 170 },
170 afterFetch: async (data: DeviceInfo[]) => { 171 afterFetch: async (data: DeviceInfo[]) => {
  172 + if (!(window as any).BMap) {
  173 + clearTask();
  174 + setTask(createMarket.bind(null, data));
  175 + return data;
  176 + }
171 createMarket(data); 177 createMarket(data);
172 return data; 178 return data;
173 }, 179 },
174 }); 180 });
  181 + const { setTask, clearTask, executeFlag } = useAsyncQueue();
  182 +
  183 + let interval: Nullable<NodeJS.Timer> = setInterval(() => {
  184 + if ((window as any).BMap) {
  185 + executeFlag.value = true;
  186 + clearInterval(interval!);
  187 + interval = null;
  188 + }
  189 + }, 1000);
175 190
176 async function createMarket(data: DeviceInfo[]) { 191 async function createMarket(data: DeviceInfo[]) {
177 const BMap = (window as any).BMap; 192 const BMap = (window as any).BMap;
178 - if (!BMap) return; 193 + if (!BMap) {
  194 + return;
  195 + }
179 unref(BMapInstance)?.clearOverlays(); 196 unref(BMapInstance)?.clearOverlays();
180 const markerList: MarkerList[] = []; 197 const markerList: MarkerList[] = [];
181 data.forEach((item) => { 198 data.forEach((item) => {
@@ -252,7 +269,6 @@ @@ -252,7 +269,6 @@
252 const { name, organizationDTO, deviceState, deviceProfile, deviceType } = record; 269 const { name, organizationDTO, deviceState, deviceProfile, deviceType } = record;
253 const { address, longitude, latitude } = record.deviceInfo; 270 const { address, longitude, latitude } = record.deviceInfo;
254 271
255 - console.log(record);  
256 // 创建信息窗口对象 272 // 创建信息窗口对象
257 const res = await getDeviceActiveTime(entityId); 273 const res = await getDeviceActiveTime(entityId);
258 274
  1 +import { ref, watchEffect } from 'vue';
  2 +
  3 +export function useAsyncQueue() {
  4 + const queue: Fn<any, Promise<any>>[] = [];
  5 +
  6 + const executeFlag = ref(false);
  7 +
  8 + const setTask = (fn: Fn<any, Promise<any>>) => {
  9 + queue.push(fn);
  10 + };
  11 +
  12 + const removeTask = (fn: Fn<any, Promise<any>>) => {
  13 + const index = queue.findIndex((item) => item === fn);
  14 + ~index && queue.splice(index, 1);
  15 + };
  16 +
  17 + const clearTask = () => {
  18 + queue.length = 0;
  19 + };
  20 +
  21 + watchEffect(() => {
  22 + if (executeFlag.value) {
  23 + queue.forEach((item) => item());
  24 + executeFlag.value = false;
  25 + }
  26 + });
  27 +
  28 + return { setTask, removeTask, clearTask, executeFlag };
  29 +}
1 <script lang="ts"> 1 <script lang="ts">
2 export default { 2 export default {
  3 + components: { Spin },
3 inheritAttrs: false, 4 inheritAttrs: false,
4 }; 5 };
5 </script> 6 </script>
@@ -12,7 +13,7 @@ @@ -12,7 +13,7 @@
12 PlayCircleOutlined, 13 PlayCircleOutlined,
13 PauseCircleOutlined, 14 PauseCircleOutlined,
14 } from '@ant-design/icons-vue'; 15 } from '@ant-design/icons-vue';
15 - import { Button, Tooltip } from 'ant-design-vue'; 16 + import { Button, Spin, Tooltip } from 'ant-design-vue';
16 import { FrontComponent } from '../../const/const'; 17 import { FrontComponent } from '../../const/const';
17 import { buildUUID } from '/@/utils/uuid'; 18 import { buildUUID } from '/@/utils/uuid';
18 import { useModal } from '/@/components/Modal'; 19 import { useModal } from '/@/components/Modal';
@@ -20,6 +21,7 @@ @@ -20,6 +21,7 @@
20 import { HistoryModalOkEmitParams, HistoryModalParams } from './type'; 21 import { HistoryModalOkEmitParams, HistoryModalParams } from './type';
21 import { formatToDateTime } from '/@/utils/dateUtil'; 22 import { formatToDateTime } from '/@/utils/dateUtil';
22 import { isEqual } from 'lodash-es'; 23 import { isEqual } from 'lodash-es';
  24 + import { useAsyncQueue } from '/@/views/device/localtion/useAsyncQueue';
23 25
24 // useVisualBoardContext(); 26 // useVisualBoardContext();
25 type TrackRecord = Record<'lng' | 'lat' | 'ts', number>; 27 type TrackRecord = Record<'lng' | 'lat' | 'ts', number>;
@@ -80,6 +82,7 @@ @@ -80,6 +82,7 @@
80 // unref(mapInstance)?.addOverlay(marker); 82 // unref(mapInstance)?.addOverlay(marker);
81 // } 83 // }
82 84
  85 + const prepare = ref(false);
83 async function initMap() { 86 async function initMap() {
84 const wrapEl = unref(wrapRef); 87 const wrapEl = unref(wrapRef);
85 if (!wrapEl) return; 88 if (!wrapEl) return;
@@ -154,7 +157,20 @@ @@ -154,7 +157,20 @@
154 setTimeout(`${startMethodName}()`); 157 setTimeout(`${startMethodName}()`);
155 }; 158 };
156 159
  160 + const { setTask, executeFlag } = useAsyncQueue();
157 onMounted(() => { 161 onMounted(() => {
  162 + let interval: Nullable<NodeJS.Timer> = setInterval(() => {
  163 + if ((window as any).BMapGL) {
  164 + prepare.value = true;
  165 + executeFlag.value = true;
  166 + clearInterval(interval!);
  167 + interval = null;
  168 + }
  169 + }, 1000);
  170 + if (!(window as any).BMapGL) {
  171 + setTask(initMap);
  172 + return;
  173 + }
158 initMap(); 174 initMap();
159 }); 175 });
160 176
@@ -225,6 +241,7 @@ @@ -225,6 +241,7 @@
225 </span> 241 </span>
226 </Button> 242 </Button>
227 </div> 243 </div>
  244 + <Spin class="w-full h-full" :spinning="!prepare" tip="Loading..." />
228 <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div> 245 <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
229 <HistoryDataModel @register="register" @ok="handleRenderHistroyData" /> 246 <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
230 </div> 247 </div>
@@ -380,8 +380,8 @@ @@ -380,8 +380,8 @@
380 }; 380 };
381 381
382 onMounted(async () => { 382 onMounted(async () => {
383 - await injectBaiDuMapLib();  
384 - await injectBaiDuMapTrackAniMationLib(); 383 + injectBaiDuMapLib();
  384 + injectBaiDuMapTrackAniMationLib();
385 getDataBoardComponent(); 385 getDataBoardComponent();
386 }); 386 });
387 </script> 387 </script>