feat: implement visual baord MapComponent

@@ -37,11 +37,22 @@ export const copyTransTreeFun = (arr: any[]) => {
 };
 
 // 百度地图url
+const ak = '7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa';
+
 const register_BAI_DU_MAP_URL = (ak: string) => {
   return `https://api.map.baidu.com/getscript?v=3.0&ak=${ak}`;
 };
 
-export const BAI_DU_MAP_URL = register_BAI_DU_MAP_URL('7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa');
+const registerBaiDuMapGlLib = (ak: string) => {
+  return `//api.map.baidu.com/getscript?type=webgl&v=1.0&ak=${ak}&services=&t=${Date.now()}`;
+};
+
+export const BAI_DU_MAP_TRACK_ANIMATION =
+  '//mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js';
+
+export const BAI_DU_MAP_GL_LIB = registerBaiDuMapGlLib(ak);
+
+export const BAI_DU_MAP_URL = register_BAI_DU_MAP_URL(ak);
 
 // 数字加上每三位加上逗号
 export function toThousands(num) {

@@ -4,10 +4,8 @@
   };
 </script>
 <script lang="ts" setup>
-  import { computed, nextTick, onMounted, ref, unref } from 'vue';
+  import { computed, onMounted, ref, unref } from 'vue';
   import { RadioRecord } from '../../detail/config/util';
-  import { useScript } from '/@/hooks/web/useScript';
-  import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { MapComponentLayout, MapComponentValue } from './map.config';
   import {
     ClockCircleOutlined,
@@ -15,31 +13,107 @@
     PauseCircleOutlined,
   } from '@ant-design/icons-vue';
   import { Button, Tooltip } from 'ant-design-vue';
+  import { FrontComponent } from '../../const/const';
+  import { buildUUID } from '/@/utils/uuid';
 
-  withDefaults(
+  // useVisualBoardContext();
+
+  const startMethodName = `trackPlayMethod_${buildUUID()}`;
+
+  const wrapId = `bai-map-${buildUUID()}`;
+
+  enum TrackAnimationStatus {
+    PLAY = 1,
+    DONE = 2,
+    PAUSE = 3,
+  }
+
+  const props = withDefaults(
     defineProps<{
       value?: MapComponentValue;
       layout?: MapComponentLayout;
       radio?: RadioRecord;
+      random?: boolean;
     }>(),
-    {}
+    {
+      random: true,
+    }
   );
 
   const wrapRef = ref<HTMLDivElement | null>(null);
-  const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
+  const trackAni = ref<Nullable<any>>(null);
+  let mapInstance: Nullable<Recordable> = null;
 
   async function initMap() {
-    await toPromise();
-    await nextTick();
     const wrapEl = unref(wrapRef);
     if (!wrapEl) return;
-    const BMap = (window as any).BMap;
-    const map = new BMap.Map(wrapEl);
-    const point = new BMap.Point(116.404, 39.915);
-    map.centerAndZoom(point, 15);
-    map.enableScrollWheelZoom(true);
+    const BMapGL = (window as any).BMapGL;
+    mapInstance = new BMapGL.Map(wrapId);
+    const point = new BMapGL.Point(116.404, 39.915);
+    mapInstance!.centerAndZoom(point, 15);
+    mapInstance!.enableScrollWheelZoom(true);
+    props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY && randomAnimation();
   }
 
+  const randomAnimation = () => {
+    const path = [
+      {
+        lng: 116.297611,
+        lat: 40.047363,
+      },
+      {
+        lng: 116.302839,
+        lat: 40.048219,
+      },
+      {
+        lng: 116.308301,
+        lat: 40.050566,
+      },
+      {
+        lng: 116.305732,
+        lat: 40.054957,
+      },
+      {
+        lng: 116.304754,
+        lat: 40.057953,
+      },
+      {
+        lng: 116.306487,
+        lat: 40.058312,
+      },
+      {
+        lng: 116.307223,
+        lat: 40.056379,
+      },
+    ];
+
+    const point: any[] = [];
+    const BMapGL = (window as any).BMapGL;
+
+    for (const { lng, lat } of path) {
+      point.push(new BMapGL.Point(lng, lat));
+    }
+
+    const pl = new BMapGL.Polyline(point);
+    const BMapGLLib = (window as any).BMapGLLib;
+
+    const dynamicPlayMethod = {
+      [startMethodName]() {
+        trackAni.value = new BMapGLLib.TrackAnimation(mapInstance, pl, {
+          overallView: true,
+          tilt: 30,
+          duration: 20000,
+          delay: 300,
+        });
+        trackAni.value!.start();
+      },
+    };
+
+    (window as any)[startMethodName] = dynamicPlayMethod[startMethodName];
+
+    setTimeout(`${startMethodName}()`);
+  };
+
   onMounted(() => {
     initMap();
   });
@@ -50,20 +124,23 @@
 
   const handleTrackSwitch = () => {};
 
-  const pauseFlag = ref(true);
+  const getTrackPlayStatus = computed(() => {
+    return (trackAni.value || {})._status;
+  });
 
   const handlePlay = () => {
-    pauseFlag.value = false;
-  };
-
-  const handlePause = () => {
-    pauseFlag.value = true;
+    if (unref(getTrackPlayStatus) === TrackAnimationStatus.DONE) unref(trackAni).start();
+    else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PLAY) unref(trackAni).pause();
+    else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PAUSE) unref(trackAni).continue();
   };
 </script>
 
 <template>
   <div class="w-full h-full flex justify-center items-center flex-col">
-    <div class="w-[95%] flex">
+    <div
+      class="w-full flex"
+      v-if="props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY"
+    >
       <Button type="text" class="!px-2 flex-auto !text-left truncate" @click="handleTrackSwitch">
         <div class="w-full truncate text-gray-500 flex items-center">
           <ClockCircleOutlined />
@@ -75,15 +152,14 @@
           </Tooltip>
         </div>
       </Button>
-      <Button v-show="pauseFlag" type="text" class="!px-2 !text-gray-500" @click="handlePlay">
-        <PlayCircleOutlined />
-        <span>播放轨迹</span>
-      </Button>
-      <Button v-show="!pauseFlag" type="text" class="!px-2 !text-gray-500" @click="handlePause">
-        <PauseCircleOutlined />
-        <span>暂停播放</span>
+      <Button type="text" class="!px-2 !text-gray-500" @click="handlePlay">
+        <PlayCircleOutlined v-show="getTrackPlayStatus !== TrackAnimationStatus.PLAY" />
+        <PauseCircleOutlined v-show="getTrackPlayStatus === TrackAnimationStatus.PLAY" />
+        <span>
+          {{ getTrackPlayStatus !== TrackAnimationStatus.PLAY ? '播放轨迹' : '暂停播放' }}
+        </span>
       </Button>
     </div>
-    <div ref="wrapRef" class="w-[95%] h-[95%]"></div>
+    <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
   </div>
 </template>

@@ -11,26 +11,25 @@ export interface MapComponentValue {
 }
 
 interface Config {
-  layout?: MapComponentLayout;
-  value?: MapComponentValue;
+  componentType?: FrontComponent;
 }
 
 export const MaphistoryTrackConfig: Config = {
-  layout: {
-    componentType: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
-  },
+  componentType: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
 };
 
 export const MapRealTrackConfig: Config = {
-  layout: {
-    componentType: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
-  },
+  componentType: FrontComponent.MAP_COMPONENT_TRACK_REAL,
 };
 
 export const transfromMapComponentConfig: ComponentConfig['transformConfig'] = (
-  _componentConfig,
+  componentConfig: Config,
   _record,
   _dataSourceRecord
 ) => {
-  return {};
+  return {
+    layout: {
+      ...componentConfig,
+    },
+  };
 };

@@ -45,12 +45,17 @@
   import backIcon from '/@/assets/images/back.png';
   import { useCalcGridLayout } from '../hook/useCalcGridLayout';
   import { FrontComponent } from '../const/const';
+  import { useScript } from '/@/hooks/web/useScript';
+  import { BAI_DU_MAP_GL_LIB, BAI_DU_MAP_TRACK_ANIMATION } from '/@/utils/fnUtils';
 
   const ROUTE = useRoute();
 
   const ROUTER = useRouter();
 
-  // unref(ROUTE).name = unref(ROUTE).fullPath;
+  const { toPromise: injectBaiDuMapLib } = useScript({ src: BAI_DU_MAP_GL_LIB });
+  const { toPromise: injectBaiDuMapTrackAniMationLib } = useScript({
+    src: BAI_DU_MAP_TRACK_ANIMATION,
+  });
 
   const { createMessage, createConfirm } = useMessage();
 
@@ -370,7 +375,9 @@
     historyDataModalMethod.openModal(true, record);
   };
 
-  onMounted(() => {
+  onMounted(async () => {
+    await injectBaiDuMapLib();
+    await injectBaiDuMapTrackAniMationLib();
     getDataBoardComponent();
   });
 </script>
@@ -566,4 +573,8 @@
   .board-detail:deep(.ant-page-header-content) {
     padding-top: 20px;
   }
+
+  :deep(.vue-resizable-handle) {
+    z-index: 99;
+  }
 </style>