fix: baidu map dynamic import script slow

@@ -101,6 +101,7 @@
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { dateUtil } from '/@/utils/dateUtil';
   import { Spin } from 'ant-design-vue';
+  import { useAsyncQueue } from './useAsyncQueue';
 
   interface DeviceInfo {
     alarmStatus: 0 | 1;
@@ -168,14 +169,30 @@
           showSizeChanger: true,
         },
         afterFetch: async (data: DeviceInfo[]) => {
+          if (!(window as any).BMap) {
+            clearTask();
+            setTask(createMarket.bind(null, data));
+            return data;
+          }
           createMarket(data);
           return data;
         },
       });
+      const { setTask, clearTask, executeFlag } = useAsyncQueue();
+
+      let interval: Nullable<NodeJS.Timer> = setInterval(() => {
+        if ((window as any).BMap) {
+          executeFlag.value = true;
+          clearInterval(interval!);
+          interval = null;
+        }
+      }, 1000);
 
       async function createMarket(data: DeviceInfo[]) {
         const BMap = (window as any).BMap;
-        if (!BMap) return;
+        if (!BMap) {
+          return;
+        }
         unref(BMapInstance)?.clearOverlays();
         const markerList: MarkerList[] = [];
         data.forEach((item) => {
@@ -252,7 +269,6 @@
         const { name, organizationDTO, deviceState, deviceProfile, deviceType } = record;
         const { address, longitude, latitude } = record.deviceInfo;
 
-        console.log(record);
         // 创建信息窗口对象
         const res = await getDeviceActiveTime(entityId);
 

+import { ref, watchEffect } from 'vue';
+
+export function useAsyncQueue() {
+  const queue: Fn<any, Promise<any>>[] = [];
+
+  const executeFlag = ref(false);
+
+  const setTask = (fn: Fn<any, Promise<any>>) => {
+    queue.push(fn);
+  };
+
+  const removeTask = (fn: Fn<any, Promise<any>>) => {
+    const index = queue.findIndex((item) => item === fn);
+    ~index && queue.splice(index, 1);
+  };
+
+  const clearTask = () => {
+    queue.length = 0;
+  };
+
+  watchEffect(() => {
+    if (executeFlag.value) {
+      queue.forEach((item) => item());
+      executeFlag.value = false;
+    }
+  });
+
+  return { setTask, removeTask, clearTask, executeFlag };
+}

 <script lang="ts">
   export default {
+    components: { Spin },
     inheritAttrs: false,
   };
 </script>
@@ -12,7 +13,7 @@
     PlayCircleOutlined,
     PauseCircleOutlined,
   } from '@ant-design/icons-vue';
-  import { Button, Tooltip } from 'ant-design-vue';
+  import { Button, Spin, Tooltip } from 'ant-design-vue';
   import { FrontComponent } from '../../const/const';
   import { buildUUID } from '/@/utils/uuid';
   import { useModal } from '/@/components/Modal';
@@ -20,6 +21,7 @@
   import { HistoryModalOkEmitParams, HistoryModalParams } from './type';
   import { formatToDateTime } from '/@/utils/dateUtil';
   import { isEqual } from 'lodash-es';
+  import { useAsyncQueue } from '/@/views/device/localtion/useAsyncQueue';
 
   // useVisualBoardContext();
   type TrackRecord = Record<'lng' | 'lat' | 'ts', number>;
@@ -80,6 +82,7 @@
   //   unref(mapInstance)?.addOverlay(marker);
   // }
 
+  const prepare = ref(false);
   async function initMap() {
     const wrapEl = unref(wrapRef);
     if (!wrapEl) return;
@@ -154,7 +157,20 @@
     setTimeout(`${startMethodName}()`);
   };
 
+  const { setTask, executeFlag } = useAsyncQueue();
   onMounted(() => {
+    let interval: Nullable<NodeJS.Timer> = setInterval(() => {
+      if ((window as any).BMapGL) {
+        prepare.value = true;
+        executeFlag.value = true;
+        clearInterval(interval!);
+        interval = null;
+      }
+    }, 1000);
+    if (!(window as any).BMapGL) {
+      setTask(initMap);
+      return;
+    }
     initMap();
   });
 
@@ -225,6 +241,7 @@
         </span>
       </Button>
     </div>
+    <Spin class="w-full h-full" :spinning="!prepare" tip="Loading..." />
     <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
     <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
   </div>

@@ -380,8 +380,8 @@
   };
 
   onMounted(async () => {
-    await injectBaiDuMapLib();
-    await injectBaiDuMapTrackAniMationLib();
+    injectBaiDuMapLib();
+    injectBaiDuMapTrackAniMationLib();
     getDataBoardComponent();
   });
 </script>