feat: basic implement data board map component

@@ -33,3 +33,4 @@ pnpm-debug.log*
 *.sw?
 
 yarn.lock
+.vscode

@@ -5,6 +5,7 @@
     "public/resource/tinymce/langs"
   ],
   "cSpell.words": [
+    "inited",
     "unref",
     "VITE"
   ]

+import { HistoryData } from './model';
 import { defHttp } from '/@/utils/http/axios';
 
 // 获取设备配置
@@ -9,7 +10,7 @@ export const getDeviceProfile = () => {
 
 // 获取历史数据
 export const getDeviceHistoryInfo = (params) => {
-  return defHttp.get(
+  return defHttp.get<HistoryData>(
     {
       url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
       params: { ...params, entityId: null, orderBy: 'ASC' },

+export interface HistoryData {
+  [key: string]: { ts: number; value: string }[];
+}

@@ -4,8 +4,9 @@ import {
   ComponentInfoDetail,
   DataBoardList,
   DataComponentRecord,
+  DeviceAttributeParams,
+  DeviceAttributeRecord,
   GetDataBoardParams,
-  Layout,
   MasterDeviceList,
   UpdateDataBoardLayoutParams,
   UpdateDataBoardParams,
@@ -35,7 +36,7 @@ enum DataBoardShareUrl {
 enum DeviceUrl {
   GET_DEVICE = '/device/list/master',
   GET_SLAVE_DEVICE = '/device/list/slave',
-  GET_DEVICE_ATTRIBUTE = '/plugins/telemetry',
+  GET_DEVICE_ATTRIBUTE = '/device/attributes',
 }
 
 /**
@@ -184,14 +185,12 @@ export const getGatewaySlaveDevice = (params: { organizationId: string; masterId
  * @param params
  * @returns
  */
-export const getDeviceAttributes = (params: { entityType?: string; deviceId: string }) => {
-  const { entityType = 'DEVICE', deviceId } = params;
-  return defHttp.get<string[]>(
-    {
-      url: `${DeviceUrl.GET_DEVICE_ATTRIBUTE}/${entityType}/${deviceId}/keys/timeseries`,
+export const getDeviceAttributes = (params: DeviceAttributeParams) => {
+  const { deviceProfileId, dataType } = params;
+  return defHttp.get<DeviceAttributeRecord[]>({
+    url: `${DeviceUrl.GET_DEVICE_ATTRIBUTE}/${deviceProfileId}`,
+    params: {
+      dataType,
     },
-    {
-      joinPrefix: false,
-    }
-  );
+  });
 };

@@ -133,10 +133,26 @@ export interface UpdateDataComponentParams {
 
 export interface MasterDeviceList {
   deviceType: 'DIRECT_CONNECTION' | 'GATEWAY';
+  deviceProfileId: string;
   id: string;
   name: string;
+  label?: string;
+  value?: string;
 }
 
 export interface ComponentInfoDetail {
   data: { componentData: DataComponentRecord[]; componentLayout: Layout[] };
 }
+
+export type DataType = 'BOOL' | 'DOUBLE' | 'INT' | 'STRUCT' | 'TExT';
+
+export interface DeviceAttributeParams {
+  deviceProfileId: string;
+  dataType?: DataType;
+}
+
+export interface DeviceAttributeRecord {
+  name: string;
+  identifier: string;
+  detail: DataType;
+}

@@ -479,7 +479,7 @@ export const selectDeviceAttrSchema: FormSchema[] = [
   },
 ];
 
-export const eChartOptions = (series, keys): EChartsOption => {
+export const eChartOptions = (series: EChartsOption['series'], keys: string[]): EChartsOption => {
   return {
     tooltip: {
       trigger: 'axis',

+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import {
+    formSchema,
+    getHistorySearchParams,
+    SchemaFiled,
+  } from '../../../board/detail/config/historyTrend.config';
+  import { HistoryModalOkEmitParams, HistoryModalParams } from './type';
+  import { DataSource } from '/@/api/dataBoard/model';
+  import { ref } from 'vue';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { getDeviceHistoryInfo } from '/@/api/alarm/position';
+
+  const emit = defineEmits(['register', 'ok']);
+
+  const [registerForm, { updateSchema, setFieldsValue, validate, getFieldsValue }] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    fieldMapToTime: [
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'],
+    ],
+  });
+
+  const [registerModal, { closeModal }] = useModalInner(async (params: HistoryModalParams) => {
+    try {
+      const { dataSource = [] } = params;
+      const deviceRecord = dataSource?.at(0) || ({} as DataSource);
+      if (!deviceRecord.organizationId) return;
+      const deviceList = await getAllDeviceByOrg(deviceRecord.organizationId);
+      const options = deviceList
+        .filter((item) => item.id === deviceRecord.deviceId)
+        .map((item) => ({ ...item, label: item.name, value: item.id }));
+      const attKey = dataSource.map((item) => ({
+        ...item,
+        label: item.attribute,
+        value: item.attribute,
+      }));
+      updateSchema([
+        {
+          field: SchemaFiled.DEVICE_ID,
+          componentProps: {
+            options,
+          },
+        },
+        {
+          field: SchemaFiled.KEYS,
+          component: 'Select',
+          defaultValue: attKey.map((item) => item.value),
+          componentProps: {
+            options: attKey,
+            mode: 'multiple',
+            disabled: true,
+          },
+        },
+      ]);
+
+      setFieldsValue({
+        [SchemaFiled.DEVICE_ID]: deviceRecord.deviceId,
+        [SchemaFiled.KEYS]: attKey.map((item) => item.value),
+      });
+    } catch (error) {
+      throw error;
+    }
+  });
+
+  const loading = ref(false);
+  const handleOk = async () => {
+    try {
+      await validate();
+      let value = getFieldsValue();
+
+      value = getHistorySearchParams(value);
+
+      loading.value = true;
+
+      const res = await getDeviceHistoryInfo({
+        ...value,
+        [SchemaFiled.KEYS]: value[SchemaFiled.KEYS].join(','),
+      });
+
+      let timespanList = Object.keys(res).reduce((prev, next) => {
+        const ts = res[next].map((item) => item.ts);
+        return [...prev, ...ts];
+      }, [] as number[]);
+      timespanList = [...new Set(timespanList)];
+
+      const track: Record<'lng' | 'lat', number>[] = [];
+      const keys = Object.keys(res);
+
+      for (const ts of timespanList) {
+        const list: { ts: number; value: number }[] = [];
+        for (const key of keys) {
+          const record = res[key].find((item) => ts === item.ts);
+          list.push(record as any);
+        }
+        if (list.every(Boolean)) {
+          const lng = list.at(0)?.value;
+          const lat = list.at(1)?.value;
+          if (lng && lat) track.push({ lng, lat });
+        }
+      }
+      emit('ok', { track, value } as HistoryModalOkEmitParams);
+      closeModal();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal @register="registerModal" @ok="handleOk" :ok-button-props="{ loading }">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>

@@ -4,7 +4,7 @@
   };
 </script>
 <script lang="ts" setup>
-  import { computed, onMounted, ref, unref } from 'vue';
+  import { computed, onMounted, reactive, ref, unref, watchEffect } from 'vue';
   import { RadioRecord } from '../../detail/config/util';
   import { MapComponentLayout, MapComponentValue } from './map.config';
   import {
@@ -15,8 +15,14 @@
   import { Button, Tooltip } from 'ant-design-vue';
   import { FrontComponent } from '../../const/const';
   import { buildUUID } from '/@/utils/uuid';
+  import { useModal } from '/@/components/Modal';
+  import HistoryDataModel from './HistoryDataModel.vue';
+  import { HistoryModalOkEmitParams, HistoryModalParams } from './type';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { isEqual } from 'lodash-es';
 
   // useVisualBoardContext();
+  type TrackRecord = Record<'lng' | 'lat' | 'ts', number>;
 
   const startMethodName = `trackPlayMethod_${buildUUID()}`;
 
@@ -44,19 +50,51 @@
   const trackAni = ref<Nullable<any>>(null);
   let mapInstance: Nullable<Recordable> = null;
 
+  const trackList = ref<TrackRecord[]>([]);
+
+  watchEffect(() => {
+    if (
+      props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_REAL &&
+      props.value?.track?.length
+    ) {
+      const lng = props.value.track.at(0)!;
+      const lat = props.value.track.at(1)!;
+      const record = {
+        lng: lng.value,
+        lat: lat.value,
+        ts: lng.ts,
+      };
+      if (unref(trackList).length && isEqual(unref(trackList).at(-1), record)) return;
+      trackList.value.push(record);
+
+      randomAnimation(unref(trackList));
+      // marketPoint(record);
+    }
+  });
+
+  // function marketPoint(params: Record<'lng' | 'lat', number>) {
+  //   const { lng, lat } = params;
+  //   const BMap = (window as any).BMapGL;
+  //   const marker = new BMap.Marker(new BMap.Point(lng, lat));
+  //   unref(mapInstance)?.centerAndZoom(new BMap.Point(lng, lat));
+  //   unref(mapInstance)?.addOverlay(marker);
+  // }
+
   async function initMap() {
     const wrapEl = unref(wrapRef);
     if (!wrapEl) return;
     const BMapGL = (window as any).BMapGL;
     mapInstance = new BMapGL.Map(wrapId);
-    const point = new BMapGL.Point(116.404, 39.915);
+    const point = new BMapGL.Point(104.09457, 30.53189);
     mapInstance!.centerAndZoom(point, 15);
     mapInstance!.enableScrollWheelZoom(true);
-    props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY && randomAnimation();
+    props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY &&
+      props.random &&
+      randomAnimation();
   }
 
-  const randomAnimation = () => {
-    const path = [
+  const randomAnimation = (path?: Record<'lng' | 'lat', number>[], clearOverlays = true) => {
+    path = path || [
       {
         lng: 116.297611,
         lat: 40.047363,
@@ -90,6 +128,8 @@
     const point: any[] = [];
     const BMapGL = (window as any).BMapGL;
 
+    clearOverlays && unref(mapInstance)?.clearOverlays();
+
     for (const { lng, lat } of path) {
       point.push(new BMapGL.Point(lng, lat));
     }
@@ -99,10 +139,10 @@
 
     const dynamicPlayMethod = {
       [startMethodName]() {
-        trackAni.value = new BMapGLLib.TrackAnimation(mapInstance, pl, {
+        trackAni.value = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, {
           overallView: true,
           tilt: 30,
-          duration: 20000,
+          duration: 5000,
           delay: 300,
         });
         trackAni.value!.start();
@@ -118,11 +158,26 @@
     initMap();
   });
 
+  const timeRange = reactive<Record<'start' | 'end', Nullable<number>>>({
+    start: null,
+    end: null,
+  });
   const getTimeRange = computed(() => {
-    return ` - 从 ${'2020-10-20 10:10:10'} 到 ${'2020-10-20 10:10:10'}`;
+    const { start, end } = timeRange;
+    if (!start || !end) return `- 请选择`;
+    return ` - 从 ${formatToDateTime(start, 'YYYY-MM-DD HH:mm:ss')} 到 ${formatToDateTime(
+      end,
+      'YYYY-MM-DD HH:mm:ss'
+    )}`;
   });
 
-  const handleTrackSwitch = () => {};
+  const [register, { openModal }] = useModal();
+
+  const handleTrackSwitch = () => {
+    openModal(true, {
+      dataSource: props.value?.dataSource || [],
+    } as HistoryModalParams);
+  };
 
   const getTrackPlayStatus = computed(() => {
     return (trackAni.value || {})._status;
@@ -133,10 +188,17 @@
     else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PLAY) unref(trackAni).pause();
     else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PAUSE) unref(trackAni).continue();
   };
+
+  const handleRenderHistroyData = (params: HistoryModalOkEmitParams) => {
+    const { track, value } = params;
+    track.length && randomAnimation(track as unknown as Record<'lng' | 'lat', number>[]);
+    timeRange.start = value.startTs as number;
+    timeRange.end = value.endTs as number;
+  };
 </script>
 
 <template>
-  <div class="w-full h-full flex justify-center items-center flex-col">
+  <div class="w-full h-full flex justify-center items-center flex-col p-2">
     <div
       class="w-full flex"
       v-if="props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY"
@@ -144,7 +206,7 @@
       <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>
+          <span class="mx-1">历史</span>
           <Tooltip :title="getTimeRange.replace('-', '')">
             <span class="truncate">
               {{ getTimeRange }}
@@ -154,12 +216,16 @@
       </Button>
       <Button type="text" class="!px-2 !text-gray-500" @click="handlePlay">
         <PlayCircleOutlined v-show="getTrackPlayStatus !== TrackAnimationStatus.PLAY" />
-        <PauseCircleOutlined v-show="getTrackPlayStatus === TrackAnimationStatus.PLAY" />
+        <PauseCircleOutlined
+          class="!ml-0"
+          v-show="getTrackPlayStatus === TrackAnimationStatus.PLAY"
+        />
         <span>
           {{ getTrackPlayStatus !== TrackAnimationStatus.PLAY ? '播放轨迹' : '暂停播放' }}
         </span>
       </Button>
     </div>
     <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
+    <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
   </div>
 </template>

 import { FrontComponent } from '../../const/const';
 import { ComponentConfig } from '../../types/type';
+import { DataSource } from '/@/api/dataBoard/model';
 
 export interface MapComponentLayout {
   componentType?: FrontComponent;
@@ -7,7 +8,8 @@ export interface MapComponentLayout {
 
 export interface MapComponentValue {
   icon?: string;
-  track?: Recordable[];
+  track?: Record<'ts' | 'value', number>[];
+  dataSource?: DataSource[];
 }
 
 interface Config {
@@ -22,14 +24,36 @@ export const MapRealTrackConfig: Config = {
   componentType: FrontComponent.MAP_COMPONENT_TRACK_REAL,
 };
 
+const getTrack = (dataSource: DataSource[]) => {
+  if (dataSource.length >= 2) {
+    const trackRecord = dataSource.slice(0, 2);
+    if (!trackRecord.every((item) => item.componentInfo.value))
+      return { track: [], dataSource: [] };
+
+    const track = trackRecord.map((item) => {
+      return {
+        ts: item.componentInfo.updateTime,
+        value: item.componentInfo.value || 0,
+      };
+    });
+    return { track, dataSource };
+  }
+  return { track: [], dataSource: [] };
+};
+
 export const transfromMapComponentConfig: ComponentConfig['transformConfig'] = (
   componentConfig: Config,
   _record,
-  _dataSourceRecord
+  dataSourceRecord
 ) => {
+  const { track, dataSource } = getTrack(dataSourceRecord as DataSource[]);
   return {
     layout: {
       ...componentConfig,
-    },
+    } as MapComponentLayout,
+    value: {
+      track,
+      dataSource,
+    } as MapComponentValue,
   };
 };

+import { SchemaFiled } from '../../detail/config/historyTrend.config';
+import { DataSource } from '/@/api/dataBoard/model';
+
+export interface HistoryModalParams {
+  dataSource?: DataSource[];
+}
+
+export interface HistoryModalOkEmitParams {
+  track: {
+    lng: number | string;
+    lat: number | string;
+  }[];
+  value: Record<SchemaFiled, string | number>;
+}

@@ -2,11 +2,22 @@
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
   import { FrontDataSourceRecord } from '../../types/type';
   import { createVisualBoardContext } from '../../hook/useVisualBoardContext';
+  import { DataComponentRecord } from '/@/api/dataBoard/model';
+  import { computed } from 'vue';
+  import { frontComponentMap } from '../help';
+  import { FrontComponent } from '../../const/const';
 
   const props = defineProps<{
+    record: DataComponentRecord;
     dataSource: FrontDataSourceRecord[];
   }>();
 
+  const isMultipleDataSource = computed(() => {
+    const { record } = props;
+    const componentInfo = frontComponentMap.get(record.frontId as FrontComponent);
+    return componentInfo?.isMultipleDataSource;
+  });
+
   const { update, add, remove } = useUpdateCenter();
 
   createVisualBoardContext({ update, add, remove });
@@ -19,24 +30,41 @@
     <slot name="header"></slot>
 
     <div class="widget-content">
-      <div
-        v-for="item in props.dataSource"
-        :key="item.id"
-        :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }"
-        class="widget-item"
-      >
-        <div class="widget-box">
-          <div class="widget-controls-container">
-            <slot
-              name="controls"
-              :record="item"
-              :add="add"
-              :remove="remove"
-              :update="update"
-            ></slot>
+      <template v-if="!isMultipleDataSource">
+        <div
+          v-for="item in props.dataSource"
+          :key="item.id"
+          :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }"
+          class="widget-item"
+        >
+          <div class="widget-box">
+            <div class="widget-controls-container">
+              <slot
+                name="controls"
+                :record="item"
+                :add="add"
+                :remove="remove"
+                :update="update"
+              ></slot>
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-if="isMultipleDataSource">
+        <div :style="{ width: `${100}%`, height: `${100}%` }" class="widget-item">
+          <div class="widget-box">
+            <div class="widget-controls-container">
+              <slot
+                name="controls"
+                :record="props.dataSource"
+                :add="add"
+                :remove="remove"
+                :update="update"
+              ></slot>
+            </div>
           </div>
         </div>
-      </div>
+      </template>
     </div>
     <slot name="footer"></slot>
   </section>

@@ -45,6 +45,9 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
   ComponentKey: FrontComponent.TEXT_COMPONENT_1,
   ComponentConfig: TextComponent1Config,
   ComponentCategory: FrontComponentCategory.TEXT,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: true,
   transformConfig: transformTextComponentConfig,
 });
 
@@ -54,6 +57,9 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
   ComponentKey: FrontComponent.TEXT_COMPONENT_3,
   ComponentConfig: TextComponent3Config,
   ComponentCategory: FrontComponentCategory.TEXT,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: true,
   transformConfig: transformTextComponentConfig,
 });
 
@@ -63,6 +69,9 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
   ComponentKey: FrontComponent.TEXT_COMPONENT_4,
   ComponentConfig: TextComponent4Config,
   ComponentCategory: FrontComponentCategory.TEXT,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: true,
   transformConfig: transformTextComponentConfig,
 });
 
@@ -72,6 +81,9 @@ frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
   ComponentKey: FrontComponent.TEXT_COMPONENT_5,
   ComponentConfig: TextComponent5Config,
   ComponentCategory: FrontComponentCategory.TEXT,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: true,
   transformConfig: transformTextComponentConfig,
 });
 
@@ -84,6 +96,9 @@ frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
     componentType: FrontComponent.INSTRUMENT_COMPONENT_1,
   } as DashboardComponentLayout,
   ComponentCategory: FrontComponentCategory.INSTRUMENT,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: true,
   transformConfig: transformDashboardComponentConfig,
 });
 
@@ -96,6 +111,9 @@ frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
     componentType: FrontComponent.INSTRUMENT_COMPONENT_2,
   } as DashboardComponentLayout,
   ComponentCategory: FrontComponentCategory.INSTRUMENT,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: true,
   transformConfig: transformDashboardComponentConfig,
 });
 
@@ -104,6 +122,9 @@ frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
   ComponentName: '数字仪表盘',
   ComponentKey: FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
   ComponentCategory: FrontComponentCategory.INSTRUMENT,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: true,
   transformConfig: transformDashboardComponentConfig,
 });
 
@@ -112,6 +133,9 @@ frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
   ComponentName: '图片组件',
   ComponentKey: FrontComponent.PICTURE_COMPONENT_1,
   ComponentCategory: FrontComponentCategory.PICTURE,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: false,
   transformConfig: transformPictureConfig,
 });
 
@@ -120,6 +144,9 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, {
   ComponentName: '控制按钮1',
   ComponentKey: FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON,
   ComponentCategory: FrontComponentCategory.CONTROL,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: false,
   transformConfig: transformControlConfig,
 });
 
@@ -128,6 +155,9 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, {
   ComponentName: '控制按钮2',
   ComponentKey: FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH,
   ComponentCategory: FrontComponentCategory.CONTROL,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: false,
   transformConfig: transformControlConfig,
 });
 
@@ -136,6 +166,9 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
   ComponentName: '控制按钮3',
   ComponentKey: FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,
   ComponentCategory: FrontComponentCategory.CONTROL,
+  isMultipleDataSource: false,
+  hasHistoryTrend: true,
+  hasSetting: false,
   transformConfig: transformControlConfig,
 });
 
@@ -145,6 +178,9 @@ frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK_REAL, {
   ComponentKey: FrontComponent.MAP_COMPONENT_TRACK_REAL,
   ComponentConfig: MapRealTrackConfig,
   ComponentCategory: FrontComponentCategory.MAP,
+  isMultipleDataSource: true,
+  hasHistoryTrend: false,
+  hasSetting: false,
   transformConfig: transfromMapComponentConfig,
 });
 
@@ -154,6 +190,9 @@ frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK_HISTORY, {
   ComponentKey: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
   ComponentConfig: MaphistoryTrackConfig,
   ComponentCategory: FrontComponentCategory.MAP,
+  isMultipleDataSource: true,
+  hasHistoryTrend: false,
+  hasSetting: false,
   transformConfig: transfromMapComponentConfig,
 });
 

 <script lang="ts" setup>
-  import { CopyOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
+  import {
+    CopyOutlined,
+    DeleteOutlined,
+    SettingOutlined,
+    SwapOutlined,
+  } from '@ant-design/icons-vue';
   import { Tooltip, Button } from 'ant-design-vue';
   import { FormActionType, useForm } from '/@/components/Form';
-  import { basicSchema } from '../config/basicConfiguration';
+  import { basicSchema, DataSourceField } from '../config/basicConfiguration';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  import { ref, shallowReactive, unref, nextTick, watch, computed } from 'vue';
+  import { ref, shallowReactive, unref, nextTick, watch, computed, onMounted } from 'vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
   import { useModal } from '/@/components/Modal';
   import { buildUUID } from '/@/utils/uuid';
@@ -13,6 +18,10 @@
   import { DataBoardLayoutInfo } from '../../types/type';
   import { getDataSourceComponent } from './DataSourceForm/help';
   import { FrontComponent } from '../../const/const';
+  import { isNullAndUnDef } from '/@/utils/is';
+  import { useSortable } from '/@/hooks/web/useSortable';
+  import { cloneDeep } from 'lodash-es';
+  import { frontComponentMap } from '../../components/help';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
@@ -61,27 +70,55 @@
 
   const validateDataSourceField = async () => {
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
-    const _dataSource: boolean[] = [];
+    const _dataSource: Record<DataSourceField, string>[] = [];
     for (const id of hasExistEl) {
-      const flag = (await (dataSourceEl[id] as FormActionType).validate()) as boolean;
-      _dataSource.push(flag);
+      const flag = (await (dataSourceEl[id] as FormActionType).validate()) as Record<
+        DataSourceField,
+        string
+      >;
+      flag && _dataSource.push(flag);
+    }
+
+    if (
+      [
+        FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
+        FrontComponent.MAP_COMPONENT_TRACK_REAL,
+      ].includes(props.frontId!)
+    ) {
+      await validateMapComponent(_dataSource);
     }
     return _dataSource;
   };
 
+  const validateMapComponent = async (dataSource: Record<DataSourceField, string>[]) => {
+    if (dataSource.length) {
+      const firstRecord = dataSource.at(0)!;
+      const { deviceId, slaveDeviceId } = firstRecord;
+      const flag = dataSource.every(
+        (item) => item.deviceId === deviceId && item.slaveDeviceId === slaveDeviceId
+      );
+      if (!flag) {
+        createMessage.warning('地图组件绑定的数据源应该一致');
+        return Promise.reject(false);
+      }
+    }
+  };
+
   const getDataSourceField = () => {
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
     const _dataSource: DataSource[] = [];
+
     for (const id of hasExistEl) {
       const index = unref(dataSource).findIndex((item) => item.id === id);
       const value = (dataSourceEl[id] as FormActionType).getFieldsValue() as DataSource;
       if (!~index) continue;
       const componentInfo = unref(dataSource)[index].componentInfo || {};
-      _dataSource.unshift({
+      _dataSource[index] = {
         ...value,
         componentInfo: { ...(props.defaultConfig || {}), ...componentInfo },
-      });
+      };
     }
+
     return _dataSource;
   };
 
@@ -160,7 +197,8 @@
   };
 
   const showSettingButton = computed(() => {
-    return props.frontId !== FrontComponent.PICTURE_COMPONENT_1;
+    const flag = frontComponentMap.get(props.frontId!)?.hasSetting;
+    return flag;
   });
 
   watch(
@@ -179,6 +217,41 @@
     return getDataSourceComponent(props.frontId as FrontComponent);
   });
 
+  let inited = false;
+  const formListEl = ref<HTMLElement>();
+  async function handleSort() {
+    if (inited) return;
+    await nextTick();
+    const formList = unref(formListEl);
+    if (!formList) return;
+
+    const { initSortable } = useSortable(unref(formList), {
+      handle: '.sort-icon',
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+        if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
+          return;
+        }
+
+        const _dataSource = cloneDeep(unref(dataSource));
+
+        if (oldIndex > newIndex) {
+          _dataSource.splice(newIndex, 0, _dataSource[oldIndex]);
+          _dataSource.splice(oldIndex + 1, 1);
+        } else {
+          _dataSource.splice(newIndex + 1, 0, _dataSource[oldIndex]);
+          _dataSource.splice(oldIndex, 1);
+        }
+
+        dataSource.value = _dataSource;
+      },
+    });
+    initSortable();
+    inited = true;
+  }
+
+  onMounted(() => handleSort());
+
   defineExpose({
     getAllDataSourceFieldValue,
     validate,
@@ -192,36 +265,43 @@
       <BasicForm @register="basicRegister" class="w-full" />
     </div>
     <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
-    <div v-for="item in dataSource" :key="item.id" class="flex">
-      <div
-        class="w-24 text-right leading-30px pr-8px flex right"
-        style="flex: 0 0 96px; justify-content: right"
-      >
-        选择设备
+    <section ref="formListEl">
+      <div v-for="item in dataSource" :data-id="item.id" :key="item.id" class="flex bg-light-50">
+        <div
+          class="w-24 text-right leading-30px pr-8px flex right"
+          style="flex: 0 0 96px; justify-content: right"
+        >
+          选择设备
+        </div>
+        <div class="pl-2 flex-auto">
+          <component :is="dataSourceComponent" :ref="(el) => setFormEl(el, item.id)" />
+        </div>
+        <div class="flex justify-center gap-3 w-28">
+          <Tooltip title="复制">
+            <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg !leading-32px" />
+          </Tooltip>
+          <Tooltip title="设置">
+            <SettingOutlined
+              v-show="showSettingButton"
+              @click="handleSetting(item)"
+              class="cursor-pointer text-lg !leading-32px"
+            />
+          </Tooltip>
+          <Tooltip title="拖拽排序">
+            <SwapOutlined
+              class="cursor-pointer text-lg !leading-32px svg:transform svg:rotate-90 sort-icon"
+            />
+          </Tooltip>
+          <Tooltip title="删除">
+            <DeleteOutlined
+              @click="handleDelete(item)"
+              class="cursor-pointer text-lg !leading-32px"
+            />
+          </Tooltip>
+        </div>
       </div>
-      <div class="pl-2 flex-auto">
-        <!-- <BasicDataSourceForm /> -->
-        <component :is="dataSourceComponent" :ref="(el) => setFormEl(el, item.id)" />
-      </div>
-      <div class="flex justify-center gap-3 w-24">
-        <Tooltip title="复制">
-          <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg !leading-32px" />
-        </Tooltip>
-        <Tooltip title="设置">
-          <SettingOutlined
-            v-show="showSettingButton"
-            @click="handleSetting(item)"
-            class="cursor-pointer text-lg !leading-32px"
-          />
-        </Tooltip>
-        <Tooltip title="删除">
-          <DeleteOutlined
-            @click="handleDelete(item)"
-            class="cursor-pointer text-lg !leading-32px"
-          />
-        </Tooltip>
-      </div>
-    </div>
+    </section>
+
     <div class="text-center">
       <Button type="primary" @click="handleAdd">添加数据源</Button>
     </div>

@@ -66,6 +66,7 @@
       const { getAllDataSourceFieldValue, validate } = unref(basicConfigurationEl)!;
       await validate();
       const value = getAllDataSourceFieldValue();
+
       unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
       resetForm();
     } catch (error: unknown) {

@@ -2,14 +2,10 @@ import { Component } from 'vue';
 import { FrontComponent } from '../../../const/const';
 import BasicDataSourceForm from './BasicDataSourceForm.vue';
 import ControlDataSourceForm from './ControlDataSourceForm.vue';
-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_REAL, MapDataSourceForm);
-dataSourceComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK_HISTORY, MapDataSourceForm);
-
 export const getDataSourceComponent = (frontId: FrontComponent) => {
   if (dataSourceComponentMap.has(frontId)) return dataSourceComponentMap.get(frontId)!;
   return BasicDataSourceForm;

@@ -8,20 +8,24 @@
   import { AggregateDataEnum, eChartOptions } from '/@/views/device/localtion/config.data';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { ColEx } from '/@/components/Form/src/types';
-  import { DataSource } from '/@/api/dataBoard/model';
+  import { DataSource, DeviceAttributeRecord } from '/@/api/dataBoard/model';
   import { useForm, BasicForm } from '/@/components/Form';
   import { formSchema, QueryWay, SchemaFiled } from '../config/historyTrend.config';
   import { DEFAULT_DATE_FORMAT } from '../config/util';
   import { Loading } from '/@/components/Loading';
   import BasicModal from '/@/components/Modal/src/BasicModal.vue';
   import { useModalInner } from '/@/components/Modal';
-  import { getDeviceAttributes } from '/@/api/dataBoard';
+  import { getAllDeviceByOrg, getDeviceAttributes } from '/@/api/dataBoard';
+  import { HistoryData } from '/@/api/alarm/position/model';
+  import { EChartsOption } from 'echarts';
+
+  type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
 
   defineEmits(['register']);
 
   const chartRef = ref();
 
-  const deviceAttrs = ref<string[]>([]);
+  const deviceAttrs = ref<DeviceAttributeRecord[]>([]);
 
   const loading = ref(false);
 
@@ -29,26 +33,27 @@
 
   function getSearchParams(value: Recordable) {
     const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value;
+    const basicRecord = {
+      entityId: deviceId,
+      keys: keys
+        ? keys
+        : unref(deviceAttrs)
+            .map((item) => item.identifier)
+            .join(),
+      interval,
+      agg,
+      limit,
+    };
     if (way === QueryWay.LATEST) {
-      return {
-        entityId: deviceId,
-        keys: keys ? keys : unref(deviceAttrs).join(),
+      return Object.assign(basicRecord, {
         startTs: moment().subtract(startTs, 'ms').valueOf(),
         endTs: Date.now(),
-        interval,
-        agg,
-        limit,
-      };
+      });
     } else {
-      return {
-        entityId: deviceId,
-        keys: keys ? keys : unref(deviceAttrs).join(),
+      return Object.assign(basicRecord, {
         startTs: moment(startTs).valueOf(),
         endTs: moment(endTs).valueOf(),
-        interval,
-        agg,
-        limit,
-      };
+      });
     }
   }
 
@@ -60,24 +65,24 @@
     }
   }
 
-  function setChartOptions(data, keys?) {
+  function setChartOptions(data: HistoryData, keys?: string | string[]) {
     const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-    const dataArray: any[] = [];
+    const dataArray: [string, string, string][] = [];
     for (const key in data) {
       for (const item1 of data[key]) {
         let { ts, value } = item1;
         const time = dateUtil(ts).format(DEFAULT_DATE_FORMAT);
         value = Number(value).toFixed(2);
-        dataArray.push([time, value, key]);
+        dataArray.push([time, value, key as string]);
       }
     }
-    keys = keys ? [keys] : unref(deviceAttrs);
-    const series: any = keys.map((item) => {
+    keys = keys ? [keys as string] : unref(deviceAttrs).map((item) => item.identifier);
+    const series: EChartsOption['series'] = (keys as string[]).map((item) => {
       return {
         name: item,
         type: 'line',
-        data: dataArray.filter((item1) => item1[2] === item),
+        data: dataArray.filter((temp) => temp[2] === item),
       };
     });
     // 设置数据
@@ -118,18 +123,23 @@
     },
   });
 
-  const getDeviceDataKey = async (deviceId: string) => {
-    if (!deviceId) return;
+  const getDeviceDataKey = async (record: DeviceOption) => {
+    const { organizationId, value } = record;
     try {
-      deviceAttrs.value = (await getDeviceAttributes({ deviceId })) || [];
+      const options = await getAllDeviceByOrg(organizationId);
+      const record = options.find((item) => item.id === value);
+      const { deviceProfileId } = record!;
+      deviceAttrs.value = (await getDeviceAttributes({ deviceProfileId })) || [];
       await nextTick();
       method.updateSchema({
         field: SchemaFiled.KEYS,
         componentProps: {
-          options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
+          options: unref(deviceAttrs).map((item) => ({ label: item.name, value: item.identifier })),
         },
       });
-    } catch (error) {}
+    } catch (error) {
+      throw error;
+    }
   };
 
   const handleModalOpen = async () => {
@@ -147,7 +157,9 @@
 
     const res = await getDeviceHistoryInfo({
       entityId: deviceId,
-      keys: unref(deviceAttrs).join(),
+      keys: unref(deviceAttrs)
+        .map((item) => item.identifier)
+        .join(),
       startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
       endTs: Date.now(),
       agg: AggregateDataEnum.NONE,
@@ -166,9 +178,10 @@
 
   const generateDeviceOptions = (dataSource: DataSource[]) => {
     const record: { [key: string]: boolean } = {};
-    const options: Record<'label' | 'value', string>[] = [];
+
+    const options: DeviceOption[] = [];
     for (const item of dataSource) {
-      const { deviceName, gatewayDevice, slaveDeviceId } = item;
+      const { deviceName, gatewayDevice, slaveDeviceId, organizationId } = item;
       let { deviceId } = item;
       if (gatewayDevice) {
         deviceId = slaveDeviceId;
@@ -177,6 +190,7 @@
       options.push({
         label: deviceName,
         value: deviceId,
+        organizationId,
       });
       record[deviceId] = true;
     }
@@ -195,8 +209,8 @@
         const { setFieldsValue } = formActionType;
         return {
           options,
-          onChange(value: string) {
-            getDeviceDataKey(value);
+          onChange(_, record: DeviceOption) {
+            getDeviceDataKey(record);
             setFieldsValue({ [SchemaFiled.KEYS]: null });
           },
         };
@@ -204,17 +218,10 @@
     });
 
     if (options.length && options.at(0)?.value) {
-      const value = options.at(0)!.value;
-      getDeviceDataKey(value);
+      const record = options.at(0)!;
+      await getDeviceDataKey(record);
       try {
-        deviceAttrs.value = (await getDeviceAttributes({ deviceId: value })) || [];
-        method.updateSchema({
-          field: SchemaFiled.KEYS,
-          componentProps: {
-            options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
-          },
-        });
-        await method.setFieldsValue({ [SchemaFiled.DEVICE_ID]: value });
+        await method.setFieldsValue({ [SchemaFiled.DEVICE_ID]: record.value });
       } catch (error) {}
     }
 
@@ -231,7 +238,7 @@
       <section class="bg-white my-3 p-2">
         <BasicForm @register="register" />
       </section>
-      <section class="bg-white p-3" style="min-hight: 350px">
+      <section class="bg-white p-3" style="min-height: 350px">
         <div v-show="isNull" ref="chartRef" :style="{ height: '350px', width: '100%' }">
           <Loading :loading="loading" :absolute="true" />
         </div>

@@ -4,16 +4,17 @@ import { FormSchema } from '/@/components/Form';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { OnChangeHookParams } from '/@/components/Form/src/components/ApiSearchSelect.vue';
 import { unref } from 'vue';
+import { MasterDeviceList } from '/@/api/dataBoard/model';
 
 export enum BasicConfigField {
   NAME = 'name',
   REMARK = 'remark',
 }
 
-const getDeviceAttribute = async (deviceId: string) => {
+const getDeviceAttribute = async (deviceProfileId: string) => {
   try {
-    const data = await getDeviceAttributes({ deviceId });
-    if (data) return data.map((item) => ({ label: item, value: item }));
+    const data = await getDeviceAttributes({ deviceProfileId });
+    if (data) return data.map((item) => ({ label: item.name, value: item.identifier }));
   } catch (error) {}
   return [];
 };
@@ -23,6 +24,8 @@ export enum DataSourceField {
   ORIGINATION_ID = 'organizationId',
   DEVICE_ID = 'deviceId',
   SLAVE_DEVICE_ID = 'slaveDeviceId',
+  DEVICE_PROFILE_ID = 'deviceProfileId',
+  SLAVE_DEVICE_PROFILE_ID = 'slaveDeviceProfileId',
   ATTRIBUTE = 'attribute',
   ATTRIBUTE_RENAME = 'attributeRename',
   DEVICE_NAME = 'deviceName',
@@ -86,6 +89,8 @@ export const dataSourceSchema: FormSchema[] = [
             [DataSourceField.ATTRIBUTE]: null,
             [DataSourceField.SLAVE_DEVICE_ID]: null,
             [DataSourceField.IS_GATEWAY_DEVICE]: false,
+            [DataSourceField.DEVICE_PROFILE_ID]: null,
+            [DataSourceField.SLAVE_DEVICE_PROFILE_ID]: null,
           });
         },
         getPopupContainer: () => document.body,
@@ -93,6 +98,12 @@ export const dataSourceSchema: FormSchema[] = [
     },
   },
   {
+    field: DataSourceField.DEVICE_PROFILE_ID,
+    component: 'Input',
+    label: '',
+    show: false,
+  },
+  {
     field: DataSourceField.DEVICE_ID,
     component: 'ApiSelect',
     label: '设备',
@@ -101,13 +112,19 @@ export const dataSourceSchema: FormSchema[] = [
     componentProps({ formModel, formActionType }) {
       const { setFieldsValue } = formActionType;
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+      const deviceId = formModel[DataSourceField.DEVICE_ID];
       return {
         api: async () => {
           if (organizationId) {
             try {
               const data = await getAllDeviceByOrg(organizationId);
+              if (deviceId) {
+                const record = data.find((item) => item.id === deviceId);
+                setFieldsValue({ [DataSourceField.DEVICE_PROFILE_ID]: record?.deviceProfileId });
+              }
               if (data)
                 return data.map((item) => ({
+                  ...item,
                   label: item.name,
                   value: item.id,
                   deviceType: item.deviceType,
@@ -116,11 +133,14 @@ export const dataSourceSchema: FormSchema[] = [
           }
           return [];
         },
-        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
+
+        onChange(_value, record: MasterDeviceList) {
           setFieldsValue({
             [DataSourceField.ATTRIBUTE]: null,
             [DataSourceField.IS_GATEWAY_DEVICE]: record?.deviceType === 'GATEWAY',
+            [DataSourceField.DEVICE_PROFILE_ID]: record?.deviceProfileId,
             [DataSourceField.SLAVE_DEVICE_ID]: null,
+            [DataSourceField.SLAVE_DEVICE_PROFILE_ID]: null,
             [DataSourceField.DEVICE_NAME]: record?.label,
           });
         },
@@ -130,6 +150,12 @@ export const dataSourceSchema: FormSchema[] = [
     },
   },
   {
+    field: DataSourceField.SLAVE_DEVICE_PROFILE_ID,
+    component: 'Input',
+    label: '',
+    show: false,
+  },
+  {
     field: DataSourceField.SLAVE_DEVICE_ID,
     label: '网关子设备',
     component: 'ApiSelect',
@@ -146,13 +172,19 @@ export const dataSourceSchema: FormSchema[] = [
       const organizationId = formModel[DataSourceField.ORIGINATION_ID];
       const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
       const deviceId = formModel[DataSourceField.DEVICE_ID];
+      const slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
       return {
         api: async () => {
           if (organizationId && isGatewayDevice) {
             try {
               const data = await getGatewaySlaveDevice({ organizationId, masterId: deviceId });
+              if (slaveDeviceId) {
+                const record = data.find((item) => item.id === slaveDeviceId);
+                setFieldsValue({ [DataSourceField.DEVICE_PROFILE_ID]: record?.deviceProfileId });
+              }
               if (data)
                 return data.map((item) => ({
+                  ...item,
                   label: item.name,
                   value: item.id,
                   deviceType: item.deviceType,
@@ -161,9 +193,10 @@ export const dataSourceSchema: FormSchema[] = [
           }
           return [];
         },
-        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
+        onChange(_value, record: MasterDeviceList) {
           setFieldsValue({
             [DataSourceField.ATTRIBUTE]: null,
+            [DataSourceField.SLAVE_DEVICE_PROFILE_ID]: record.deviceProfileId,
             [DataSourceField.DEVICE_NAME]: record?.label,
           });
         },
@@ -179,19 +212,21 @@ export const dataSourceSchema: FormSchema[] = [
     colProps: { span: 8 },
     rules: [{ required: true, message: '属性为必填项' }],
     componentProps({ formModel }) {
-      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
       const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
       const deviceId = formModel[DataSourceField.DEVICE_ID];
+      const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
       const slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
+      const slaveDeviceProfileId = formModel[DataSourceField.SLAVE_DEVICE_PROFILE_ID];
+
       return {
         api: async () => {
-          if (organizationId && deviceId) {
+          if (deviceId) {
             try {
-              if (isGatewayDevice && slaveDeviceId) {
-                return await getDeviceAttribute(slaveDeviceId);
+              if (isGatewayDevice && slaveDeviceId && slaveDeviceProfileId) {
+                return await getDeviceAttribute(slaveDeviceProfileId);
               }
-              if (!isGatewayDevice) {
-                return await getDeviceAttribute(deviceId);
+              if (!isGatewayDevice && deviceProfileId) {
+                return await getDeviceAttribute(deviceProfileId);
               }
             } catch (error) {}
           }

 import moment from 'moment';
 import { Moment } from 'moment';
-import { getDeviceAttributes } from '/@/api/dataBoard';
 import { FormSchema } from '/@/components/Form';
 import { ColEx } from '/@/components/Form/src/types';
 import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -134,7 +133,6 @@ export const formSchema: FormSchema[] = [
     field: SchemaFiled.AGG,
     label: '数据聚合功能',
     component: 'Select',
-    // defaultValue: AggregateDataEnum.NONE,
     componentProps: {
       getPopupContainer: () => document.body,
       options: [
@@ -181,7 +179,6 @@ export const formSchema: FormSchema[] = [
     field: SchemaFiled.LIMIT,
     label: '最大条数',
     component: 'InputNumber',
-    // defaultValue: 7,
     ifShow({ values }) {
       return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
     },
@@ -201,34 +198,30 @@ export const formSchema: FormSchema[] = [
     componentProps: {
       getPopupContainer: () => document.body,
     },
-    // componentProps({ formModel }) {
-    //   const deviceId = formModel[SchemaFiled.DEVICE_ID];
-    //   return {
-    //     api: async () => {
-    //       if (deviceId) {
-    //         try {
-    //           try {
-    //             const data = await getDeviceAttributes({ deviceId });
-    //             if (data) return data.map((item) => ({ label: item, value: item }));
-    //           } catch (error) {}
-    //           return [];
-    //         } catch (error) {}
-    //       }
-    //       return [];
-    //     },
-    //     getPopupContainer: () => document.body,
-    //   };
-    // },
   },
 ];
 
-// export const selectDeviceAttrSchema: FormSchema[] = [
-//   {
-//     field: 'keys',
-//     label: '设备属性',
-//     component: 'Select',
-//     componentProps: {
-//       getPopupContainer: () => document.body,
-//     },
-//   },
-// ];
+export function getHistorySearchParams(value: Recordable) {
+  const { startTs, endTs, interval, agg, limit, way, keys, deviceId } = value;
+  if (way === QueryWay.LATEST) {
+    return {
+      keys,
+      entityId: deviceId,
+      startTs: moment().subtract(startTs, 'ms').valueOf(),
+      endTs: Date.now(),
+      interval,
+      agg,
+      limit,
+    };
+  } else {
+    return {
+      keys,
+      entityId: deviceId,
+      startTs: moment(startTs).valueOf(),
+      endTs: moment(endTs).valueOf(),
+      interval,
+      agg,
+      limit,
+    };
+  }
+}

@@ -119,7 +119,7 @@
     data.width = newWPx;
     data.height = newHPx;
 
-    data.record.dataSource = data?.record.dataSource.map((item) => {
+    data.record.dataSource = data.record.dataSource.map((item) => {
       if (!item.uuid) item.uuid = buildUUID();
       return {
         ...item,
@@ -265,9 +265,9 @@
           record: item,
         };
       });
-
       beginSendMessage();
     } catch (error) {
+      throw error;
     } finally {
       loading.value = false;
     }
@@ -310,7 +310,7 @@
 
   const getComponentConfig = (
     record: DataBoardLayoutInfo['record'],
-    dataSourceRecord: DataSource
+    dataSourceRecord: DataSource | DataSource[]
   ) => {
     const frontComponent = record.frontId;
     const component = frontComponentMap.get(frontComponent as FrontComponent);
@@ -375,6 +375,10 @@
     historyDataModalMethod.openModal(true, record);
   };
 
+  const hasHistoryTrend = (item: DataBoardLayoutInfo) => {
+    return frontComponentMap.get(item.record.frontId as FrontComponent)?.hasHistoryTrend;
+  };
+
   onMounted(async () => {
     await injectBaiDuMapLib();
     await injectBaiDuMapTrackAniMationLib();
@@ -442,6 +446,7 @@
             <WidgetWrapper
               :key="item.i"
               :ref="(el: Element) => setComponentRef(el, item)"
+              :record="item.record"
               :data-source="item.record.dataSource"
             >
               <template #header>
@@ -455,7 +460,7 @@
                     <Tooltip title="趋势">
                       <img
                         :src="trendIcon"
-                        v-if="!getIsSharePage"
+                        v-if="!getIsSharePage && hasHistoryTrend(item)"
                         class="cursor-pointer w-4.5 h-4.5"
                         @click="handleOpenHistroyDataModal(item.record.dataSource)"
                       />

@@ -18,10 +18,13 @@ export interface ComponentConfig {
   ComponentKey: FrontComponent;
   ComponentConfig?: Recordable;
   ComponentCategory: FrontComponentCategory;
+  isMultipleDataSource?: boolean;
+  hasHistoryTrend?: boolean;
+  hasSetting?: boolean;
   transformConfig: (
     componentConfig: Recordable,
     record: DataComponentRecord,
-    dataSourceRecord: DataSource
+    dataSourceRecord: DataSource | DataSource[]
   ) => Recordable;
 }