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> |