wip: visual board map component

@@ -5,7 +5,7 @@
 </script>
 <script lang="ts" setup>
   import type { ECharts, EChartsOption } from 'echarts';
-  import { PropType, watch } from 'vue';
+  import { watch } from 'vue';
   import { nextTick, onMounted, onUnmounted, ref, unref, computed } from 'vue';
   import { init } from 'echarts';
   import {
@@ -26,29 +26,23 @@
   import { Tooltip } from 'ant-design-vue';
   import { useThrottleFn } from '@vueuse/shared';
   import { buildUUID } from '/@/utils/uuid';
-  import { FrontComponent } from '../help';
-
-  const props = defineProps({
-    add: {
-      type: Function,
-    },
-    layout: {
-      type: Object as PropType<DashboardComponentLayout>,
-      default: () => ({}),
-    },
-    value: {
-      type: Object as PropType<DashBoardValue>,
-      default: () => ({ id: buildUUID() }),
-    },
-    radio: {
-      type: Object as PropType<RadioRecord>,
-      default: () => DEFAULT_RADIO_RECORD,
-    },
-    random: {
-      type: Boolean,
-      default: true,
-    },
-  });
+  import { FrontComponent } from '../../const/const';
+
+  const props = withDefaults(
+    defineProps<{
+      add?: Function;
+      layout?: DashboardComponentLayout;
+      value?: DashBoardValue;
+      radio?: RadioRecord;
+      random?: boolean;
+    }>(),
+    {
+      layout: () => ({} as unknown as DashboardComponentLayout),
+      value: () => ({ id: buildUUID() }),
+      radio: () => DEFAULT_RADIO_RECORD,
+      random: true,
+    }
+  );
 
   const getControlsWidgetId = () => `widget-chart-${props.value.id}`;
 

@@ -4,9 +4,29 @@
   };
 </script>
 <script lang="ts" setup>
-  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { computed, nextTick, 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,
+    PlayCircleOutlined,
+    PauseCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { Button, Tooltip } from 'ant-design-vue';
+  import { useVisualBoardContext } from '../../hook/useVisualBoardContext';
+
+  const {} = useVisualBoardContext();
+
+  withDefaults(
+    defineProps<{
+      value?: MapComponentValue;
+      layout?: MapComponentLayout;
+      radio?: RadioRecord;
+    }>(),
+    {}
+  );
 
   const wrapRef = ref<HTMLDivElement | null>(null);
   const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
@@ -26,10 +46,47 @@
   onMounted(() => {
     initMap();
   });
+
+  const getTimeRange = computed(() => {
+    return ` - 从 ${'2020-10-20 10:10:10'} 到 ${'2020-10-20 10:10:10'}`;
+  });
+
+  const handleTrackSwitch = () => {};
+
+  const pauseFlag = ref(true);
+
+  const handlePlay = () => {
+    pauseFlag.value = false;
+  };
+
+  const handlePause = () => {
+    pauseFlag.value = true;
+  };
 </script>
 
 <template>
-  <div class="w-full h-full flex justify-center items-center">
+  <div class="w-full h-full flex justify-center items-center flex-col">
+    <div class="w-[95%] flex">
+      <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 />
+          <span class="mx-1">实时</span>
+          <Tooltip :title="getTimeRange.replace('-', '')">
+            <span class="truncate">
+              {{ getTimeRange }}
+            </span>
+          </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>
+    </div>
     <div ref="wrapRef" class="w-[95%] h-[95%]"></div>
   </div>
 </template>

-import { ComponentConfig } from '../help';
+import { FrontComponent } from '../../const/const';
+import { ComponentConfig } from '../../types/type';
+
+export interface MapComponentLayout {
+  componentType?: FrontComponent;
+}
+
+export interface MapComponentValue {
+  icon?: string;
+  track?: Recordable[];
+}
+
+interface Config {
+  layout?: MapComponentLayout;
+  value?: MapComponentValue;
+}
+
+export const MaphistoryTrackConfig: Config = {
+  layout: {
+    componentType: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
+  },
+};
+
+export const MapRealTrackConfig: Config = {
+  layout: {
+    componentType: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
+  },
+};
 
 export const transfromMapComponentConfig: ComponentConfig['transformConfig'] = (
   _componentConfig,

 <script lang="ts" setup>
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
   import { FrontDataSourceRecord } from '../../types/type';
+  import { createVisualBoardContext } from '../../hook/useVisualBoardContext';
 
   const props = defineProps<{
     dataSource: FrontDataSourceRecord[];
@@ -8,6 +9,8 @@
 
   const { update, add, remove } = useUpdateCenter();
 
+  createVisualBoardContext({ update, add, remove });
+
   defineExpose({ update });
 </script>
 

@@ -27,7 +27,11 @@ import ToggleSwitch from './ControlComponent/ToggleSwitch.vue';
 import SlidingSwitch from './ControlComponent/SlidingSwitch.vue';
 import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue';
 import MapComponent from './MapComponent/MapComponent.vue';
-import { transfromMapComponentConfig } from './MapComponent/map.config';
+import {
+  MaphistoryTrackConfig,
+  MapRealTrackConfig,
+  transfromMapComponentConfig,
+} from './MapComponent/map.config';
 import { ComponentConfig } from '../types/type';
 import { FrontComponent, FrontComponentCategory } from '../const/const';
 
@@ -135,10 +139,20 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
   transformConfig: transformControlConfig,
 });
 
-frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK, {
+frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK_REAL, {
   Component: MapComponent,
   ComponentName: '实时轨迹',
-  ComponentKey: FrontComponent.MAP_COMPONENT_TRACK,
+  ComponentKey: FrontComponent.MAP_COMPONENT_TRACK_REAL,
+  ComponentConfig: MapRealTrackConfig,
+  ComponentCategory: FrontComponentCategory.MAP,
+  transformConfig: transfromMapComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK_HISTORY, {
+  Component: MapComponent,
+  ComponentName: '历史轨迹',
+  ComponentKey: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
+  ComponentConfig: MaphistoryTrackConfig,
   ComponentCategory: FrontComponentCategory.MAP,
   transformConfig: transfromMapComponentConfig,
 });

@@ -27,7 +27,8 @@ export enum FrontComponent {
   CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
   CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
   CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
-  MAP_COMPONENT_TRACK = 'map-component-track',
+  MAP_COMPONENT_TRACK_REAL = 'map-component-track-real',
+  MAP_COMPONENT_TRACK_HISTORY = 'map-component-track-history',
 }
 
 export enum Gradient {

@@ -7,7 +7,8 @@ import MapDataSourceForm from './MapDataSourceForm.vue';
 const dataSourceComponentMap = new Map<FrontComponent, Component>();
 
 dataSourceComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, ControlDataSourceForm);
-dataSourceComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK, MapDataSourceForm);
+dataSourceComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK_REAL, MapDataSourceForm);
+dataSourceComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK_HISTORY, MapDataSourceForm);
 
 export const getDataSourceComponent = (frontId: FrontComponent) => {
   if (dataSourceComponentMap.has(frontId)) return dataSourceComponentMap.get(frontId)!;

+export type UpdateCenter = ReturnType<typeof useUpdateCenter>;
+
 export function useUpdateCenter() {
   const eventCenter = new Map<string, Fn>();
 

+import { inject, provide } from 'vue';
+import { UpdateCenter } from './useUpdateCenter';
+
+const key = Symbol('visual-board-content');
+
+type Instance = UpdateCenter;
+
+export function createVisualBoardContext(instance: Instance) {
+  provide(key, instance);
+}
+
+export function useVisualBoardContext() {
+  return inject(key) as Instance;
+}