Commit b3689ee166ed5b150c7226d3e4edc359e4cfc039
1 parent
b2f7584e
fix: baidu map dynamic import script slow
Showing
4 changed files
with
67 additions
and
5 deletions
@@ -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 |
src/views/device/localtion/useAsyncQueue.ts
0 → 100644
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> |