Merge branch 'ww' into 'main'

fix: BUG in teambition && implement data component map comoponent && implement data component control comoponent

See merge request huang/yun-teng-iot-front!407

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

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

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

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

@@ -4,9 +4,11 @@ import {
   ComponentInfoDetail,
   ComponentInfoDetail,
   DataBoardList,
   DataBoardList,
   DataComponentRecord,
   DataComponentRecord,
+  DeviceAttributeParams,
+  DeviceAttributeRecord,
   GetDataBoardParams,
   GetDataBoardParams,
-  Layout,
   MasterDeviceList,
   MasterDeviceList,
+  SendCommandParams,
   UpdateDataBoardLayoutParams,
   UpdateDataBoardLayoutParams,
   UpdateDataBoardParams,
   UpdateDataBoardParams,
   UpdateDataComponentParams,
   UpdateDataComponentParams,
@@ -32,10 +34,14 @@ enum DataBoardShareUrl {
   GET_DATA_COMPONENT = '/noauth/share/data_board',
   GET_DATA_COMPONENT = '/noauth/share/data_board',
 }
 }
 
 
+enum SendCommand {
+  ONEWAY = '/plugins/rpc/oneway',
+}
+
 enum DeviceUrl {
 enum DeviceUrl {
   GET_DEVICE = '/device/list/master',
   GET_DEVICE = '/device/list/master',
   GET_SLAVE_DEVICE = '/device/list/slave',
   GET_SLAVE_DEVICE = '/device/list/slave',
-  GET_DEVICE_ATTRIBUTE = '/plugins/telemetry',
+  GET_DEVICE_ATTRIBUTE = '/device/attributes',
 }
 }
 
 
 /**
 /**
@@ -184,14 +190,22 @@ export const getGatewaySlaveDevice = (params: { organizationId: string; masterId
  * @param params
  * @param params
  * @returns
  * @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,
     },
     },
+  });
+};
+
+export const sendCommandOneway = (params: SendCommandParams) => {
+  return defHttp.post(
     {
     {
-      joinPrefix: false,
-    }
+      url: `${SendCommand.ONEWAY}/${params.deviceId}`,
+      params: params.value,
+    },
+    { joinPrefix: false }
   );
   );
 };
 };

@@ -133,10 +133,31 @@ export interface UpdateDataComponentParams {
 
 
 export interface MasterDeviceList {
 export interface MasterDeviceList {
   deviceType: 'DIRECT_CONNECTION' | 'GATEWAY';
   deviceType: 'DIRECT_CONNECTION' | 'GATEWAY';
+  deviceProfileId: string;
   id: string;
   id: string;
   name: string;
   name: string;
+  label?: string;
+  value?: string;
 }
 }
 
 
 export interface ComponentInfoDetail {
 export interface ComponentInfoDetail {
   data: { componentData: DataComponentRecord[]; componentLayout: Layout[] };
   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;
+}
+
+export interface SendCommandParams {
+  deviceId: string;
+  value: any;
+}

@@ -34,6 +34,7 @@
     let { width = 300, height = 150 } = unref(getOptions);
     let { width = 300, height = 150 } = unref(getOptions);
     width = isNumber(width) ? (`${width}px` as unknown as number) : width;
     width = isNumber(width) ? (`${width}px` as unknown as number) : width;
     height = isNumber(height) ? (`${height}px` as unknown as number) : height;
     height = isNumber(height) ? (`${height}px` as unknown as number) : height;
+    console.log({ getOptions });
     return { width, height } as CSSProperties;
     return { width, height } as CSSProperties;
   });
   });
 
 

@@ -10,7 +10,9 @@
       :showOkBtn="false"
       :showOkBtn="false"
       @cancel="handleCancel"
       @cancel="handleCancel"
     >
     >
-      <div class="flex items-center justify-center bg-dark-900 w-full h-full min-h-52">
+      <div
+        class="flex items-center justify-center bg-dark-900 w-full h-full min-h-52 video-container"
+      >
         <BasicVideoPlay v-if="showVideo" :options="options" />
         <BasicVideoPlay v-if="showVideo" :options="options" />
       </div>
       </div>
     </BasicModal>
     </BasicModal>
@@ -63,3 +65,13 @@
     showVideo.value = false;
     showVideo.value = false;
   };
   };
 </script>
 </script>
+
+<style lang="less" scoped>
+  .video-container:deep(.vben-basic-video-play) {
+    min-height: 13rem;
+  }
+
+  .video-container:deep(.video-js) {
+    min-height: 13rem;
+  }
+</style>

@@ -61,6 +61,9 @@
 
 
       for (const item of items) {
       for (const item of items) {
         (item as CameraRecordItem).isTransform = false;
         (item as CameraRecordItem).isTransform = false;
+        (item as CameraRecordItem).videoPlayerOptions = {
+          ...basicVideoPlayOptions,
+        };
         beforeVideoPlay(item);
         beforeVideoPlay(item);
       }
       }
       if (items.length < pagination.pageSize) {
       if (items.length < pagination.pageSize) {
@@ -117,6 +120,7 @@
         const index = unref(cameraList).findIndex((item) => item.id === record.id);
         const index = unref(cameraList).findIndex((item) => item.id === record.id);
         if (~index) unref(cameraList)[index].isTransform = true;
         if (~index) unref(cameraList)[index].isTransform = true;
       }
       }
+      console.log(unref(cameraList));
     }
     }
   };
   };
 
 

@@ -162,7 +162,7 @@
     } else {
     } else {
       isNull.value = true;
       isNull.value = true;
     }
     }
-    setChartOptions(res);
+    setChartOptions(res, props.attr);
   };
   };
 
 
   onMounted(async () => {
   onMounted(async () => {

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

@@ -57,7 +57,14 @@
         v-show="!isNull"
         v-show="!isNull"
       />
       />
     </BasicModal>
     </BasicModal>
-    <DeviceDetailDrawer @register="registerDetailDrawer" />
+    <DeviceDetailDrawer
+      @register="registerDetailDrawer"
+      @open-tb-device-detail="handleOpenTbDeviceDetail"
+      @open-gateway-device-detail="handleOpenGatewayDetail"
+    />
+    <DeviceDetailDrawer @register="registerTbDetailDrawer" />
+
+    <DeviceDetailDrawer @register="registerGatewayDetailDrawer" />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
@@ -94,6 +101,7 @@
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
   import { dateUtil } from '/@/utils/dateUtil';
   import { dateUtil } from '/@/utils/dateUtil';
   import { Spin } from 'ant-design-vue';
   import { Spin } from 'ant-design-vue';
+  import { useAsyncQueue } from './useAsyncQueue';
 
 
   interface DeviceInfo {
   interface DeviceInfo {
     alarmStatus: 0 | 1;
     alarmStatus: 0 | 1;
@@ -139,6 +147,8 @@
       const isNull = ref(true);
       const isNull = ref(true);
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerDetailDrawer, { openDrawer }] = useDrawer();
+      const [registerTbDetailDrawer, { openDrawer: openTbDeviceDrawer }] = useDrawer();
+      const [registerGatewayDetailDrawer, { openDrawer: openGatewayDetailDrawer }] = useDrawer();
       const [registerModal, { openModal }] = useModal();
       const [registerModal, { openModal }] = useModal();
       const BMapInstance = ref<Nullable<any>>(null);
       const BMapInstance = ref<Nullable<any>>(null);
 
 
@@ -159,15 +169,31 @@
           showSizeChanger: true,
           showSizeChanger: true,
         },
         },
         afterFetch: async (data: DeviceInfo[]) => {
         afterFetch: async (data: DeviceInfo[]) => {
+          if (!(window as any).BMap) {
+            clearTask();
+            setTask(createMarket.bind(null, data));
+            return data;
+          }
           createMarket(data);
           createMarket(data);
           return 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[]) {
       async function createMarket(data: DeviceInfo[]) {
         const BMap = (window as any).BMap;
         const BMap = (window as any).BMap;
-        if (!BMap) return;
-        unref(BMapInstance).clearOverlays();
+        if (!BMap) {
+          return;
+        }
+        unref(BMapInstance)?.clearOverlays();
         const markerList: MarkerList[] = [];
         const markerList: MarkerList[] = [];
         data.forEach((item) => {
         data.forEach((item) => {
           const {
           const {
@@ -242,6 +268,7 @@
         };
         };
         const { name, organizationDTO, deviceState, deviceProfile, deviceType } = record;
         const { name, organizationDTO, deviceState, deviceProfile, deviceType } = record;
         const { address, longitude, latitude } = record.deviceInfo;
         const { address, longitude, latitude } = record.deviceInfo;
+
         // 创建信息窗口对象
         // 创建信息窗口对象
         const res = await getDeviceActiveTime(entityId);
         const res = await getDeviceActiveTime(entityId);
 
 
@@ -454,6 +481,14 @@
         (window as any).openHistoryModal = null;
         (window as any).openHistoryModal = null;
       });
       });
 
 
+      const handleOpenTbDeviceDetail = (data: { id: string; tbDeviceId: string }) => {
+        openTbDeviceDrawer(true, data);
+      };
+
+      const handleOpenGatewayDetail = (data: { id: string; tbDeviceId: string }) => {
+        openGatewayDetailDrawer(true, data);
+      };
+
       return {
       return {
         wrapRef,
         wrapRef,
         registerTable,
         registerTable,
@@ -467,6 +502,10 @@
         spinning,
         spinning,
         timePeriodRegister,
         timePeriodRegister,
         handleCancelModal,
         handleCancelModal,
+        registerTbDetailDrawer,
+        registerGatewayDetailDrawer,
+        handleOpenTbDeviceDetail,
+        handleOpenGatewayDetail,
       };
       };
     },
     },
   });
   });

+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 };
+}

@@ -28,7 +28,7 @@
   import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
   import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
   import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
   import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
   import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
   import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
-  import { ref, unref } from 'vue';
+  import { nextTick, ref, unref } from 'vue';
   import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
   import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import TopicPanel from './step/TopicPanel.vue';
   import TopicPanel from './step/TopicPanel.vue';
@@ -49,6 +49,7 @@
     unref(DevConStRef)?.setFormData(res);
     unref(DevConStRef)?.setFormData(res);
   };
   };
   const setTransConfFormData = async (res: Recordable) => {
   const setTransConfFormData = async (res: Recordable) => {
+    await nextTick();
     unref(TransConStRef)?.setFormData(res);
     unref(TransConStRef)?.setFormData(res);
   };
   };
 
 

@@ -9,6 +9,13 @@ import { FormField, FunctionType } from './step/cpns/physical/cpns/config';
 import { h } from 'vue';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import { Tag } from 'ant-design-vue';
 
 
+export enum ModelOfMatterPermission {
+  CREATE = 'api:yt:things_model:post',
+  UPDATE = 'api:yt:things_model:put',
+  DELETE = 'api:yt:things_model:delete',
+  RELEASE = 'api:yt:things_model:release',
+}
+
 export const steps = [
 export const steps = [
   {
   {
     title: '产品',
     title: '产品',

@@ -27,18 +27,16 @@
           </div>
           </div>
           <div class="flex justify-between items-end">
           <div class="flex justify-between items-end">
             <div class="flex gap-2">
             <div class="flex gap-2">
-              <Authority value="">
+              <Authority :value="ModelOfMatterPermission.CREATE">
                 <Button v-if="isShowBtn" type="primary" @click="handleCreateOrEdit()">
                 <Button v-if="isShowBtn" type="primary" @click="handleCreateOrEdit()">
                   新增物模型
                   新增物模型
                 </Button>
                 </Button>
-                <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button>
-                <Button v-if="isShowBtn" type="primary" @click="handleImportModel"
-                  >导入物模型</Button
-                >
               </Authority>
               </Authority>
+              <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button>
+              <Button v-if="isShowBtn" type="primary" @click="handleImportModel">导入物模型</Button>
             </div>
             </div>
             <div class="flex gap-2">
             <div class="flex gap-2">
-              <Authority value="">
+              <Authority :value="ModelOfMatterPermission.RELEASE">
                 <Popconfirm
                 <Popconfirm
                   title="是否需要发布上线？"
                   title="是否需要发布上线？"
                   ok-text="确定"
                   ok-text="确定"
@@ -49,9 +47,12 @@
                     发布上线
                     发布上线
                   </Button>
                   </Button>
                 </Popconfirm>
                 </Popconfirm>
-                <Button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn">
-                  返回
-                </Button>
+              </Authority>
+
+              <Button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn">
+                返回
+              </Button>
+              <Authority :value="ModelOfMatterPermission.DELETE">
                 <Popconfirm
                 <Popconfirm
                   title="您确定要批量删除数据"
                   title="您确定要批量删除数据"
                   ok-text="确定"
                   ok-text="确定"
@@ -84,14 +85,14 @@
             {
             {
               label: '编辑',
               label: '编辑',
               icon: 'clarity:note-edit-line',
               icon: 'clarity:note-edit-line',
-              auth: '',
+              auth: ModelOfMatterPermission.UPDATE,
               onClick: handleCreateOrEdit.bind(null, record),
               onClick: handleCreateOrEdit.bind(null, record),
               ifShow: !isShowBtn ? false : true,
               ifShow: !isShowBtn ? false : true,
             },
             },
             {
             {
               label: '删除',
               label: '删除',
               icon: 'ant-design:delete-outlined',
               icon: 'ant-design:delete-outlined',
-              auth: '',
+              auth: ModelOfMatterPermission.DELETE,
               color: 'error',
               color: 'error',
               ifShow: !isShowBtn ? false : true,
               ifShow: !isShowBtn ? false : true,
               popConfirm: {
               popConfirm: {
@@ -114,7 +115,11 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
-  import { modelOfMatterForm, physicalColumn } from '../device.profile.data';
+  import {
+    modelOfMatterForm,
+    ModelOfMatterPermission,
+    physicalColumn,
+  } from '../device.profile.data';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
   import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
   import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';

@@ -78,11 +78,12 @@
     submitOnReset: false,
     submitOnReset: false,
     showActionButtonGroup: props.ifShowBtn ? true : false,
     showActionButtonGroup: props.ifShowBtn ? true : false,
   });
   });
-  const setFormData = (v) => {
+  const setFormData = async (v) => {
     setFieldsValue({
     setFieldsValue({
       transportType: v?.profileData?.transportConfiguration?.type,
       transportType: v?.profileData?.transportConfiguration?.type,
     });
     });
     isMqttType.value = v?.profileData?.transportConfiguration?.type;
     isMqttType.value = v?.profileData?.transportConfiguration?.type;
+    await nextTick();
     mqttRef.value?.setFormData(v?.profileData?.transportConfiguration);
     mqttRef.value?.setFormData(v?.profileData?.transportConfiguration);
     coapRef.value?.setFormData(v?.profileData?.transportConfiguration);
     coapRef.value?.setFormData(v?.profileData?.transportConfiguration);
     lwm2mRef.value?.setFormData(v?.profileData?.transportConfiguration);
     lwm2mRef.value?.setFormData(v?.profileData?.transportConfiguration);

@@ -5,8 +5,10 @@
 </script>
 </script>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { RadioRecord } from '../../detail/config/util';
   import { RadioRecord } from '../../detail/config/util';
+  import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
+  import { useSendCommand } from './useSendCommand';
 
 
-  interface VisualComponentProps<Layout = Recordable, Value = Recordable> {
+  interface VisualComponentProps<Layout = Recordable, Value = ControlComponentValue> {
     value?: Value;
     value?: Value;
     layout?: Layout;
     layout?: Layout;
     radio?: RadioRecord;
     radio?: RadioRecord;
@@ -15,29 +17,40 @@
     update?: () => void;
     update?: () => void;
     remove?: (key: string) => void;
     remove?: (key: string) => void;
   }
   }
+
   const props = defineProps<VisualComponentProps>();
   const props = defineProps<VisualComponentProps>();
 
 
   const emit = defineEmits(['update:value', 'change']);
   const emit = defineEmits(['update:value', 'change']);
 
 
+  const { sendCommand } = useSendCommand();
   const handleChange = (event: Event) => {
   const handleChange = (event: Event) => {
     const _value = (event.target as HTMLInputElement).checked;
     const _value = (event.target as HTMLInputElement).checked;
     emit('update:value', _value);
     emit('update:value', _value);
     emit('change', _value);
     emit('change', _value);
+    sendCommand(props.value?.slaveDeviceId || props.value?.deviceId, _value);
   };
   };
 </script>
 </script>
 
 
 <template>
 <template>
-  <label class="sliding-switch">
-    <input
-      :value="props.value?.value"
-      type="checkbox"
-      :checked="props.value?.value"
-      @change="handleChange"
-    />
-    <span class="slider"></span>
-    <span class="on">ON</span>
-    <span class="off">OFF</span>
-  </label>
+  <div class="flex flex-col justify-center">
+    <label class="sliding-switch">
+      <input
+        :value="props.value?.value"
+        type="checkbox"
+        :checked="props.value?.value"
+        @change="handleChange"
+      />
+      <span class="slider"></span>
+      <span class="on">ON</span>
+      <span class="off">OFF</span>
+    </label>
+    <div
+      class="text-center mt-2 text-gray-700"
+      :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
+    >
+      {{ props.value?.attributeRename || props.value?.attribute }}</div
+    >
+  </div>
 </template>
 </template>
 
 
 <style scoped lang="less">
 <style scoped lang="less">

@@ -5,7 +5,7 @@
 </script>
 </script>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { Switch } from 'ant-design-vue';
   import { Switch } from 'ant-design-vue';
-  import { computed } from 'vue';
+  import { computed, ref, watchEffect } from 'vue';
   import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
   import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
   import {
   import {
@@ -13,6 +13,7 @@
     ControlComponentValue,
     ControlComponentValue,
     ControlComponentLayout,
     ControlComponentLayout,
   } from './control.config';
   } from './control.config';
+  import { useSendCommand } from './useSendCommand';
   const props = withDefaults(
   const props = withDefaults(
     defineProps<{
     defineProps<{
       layout?: ControlComponentLayout;
       layout?: ControlComponentLayout;
@@ -26,6 +27,18 @@
   const getRadio = computed(() => {
   const getRadio = computed(() => {
     return props.radio || DEFAULT_RADIO_RECORD;
     return props.radio || DEFAULT_RADIO_RECORD;
   });
   });
+
+  const checked = ref(!!Number(props.value.value));
+
+  const { sendCommand } = useSendCommand();
+  const handleChange = (value: boolean) => {
+    console.log(props.value);
+    sendCommand(props.value.slaveDeviceId! || props.value.deviceId!, value);
+  };
+
+  watchEffect(() => {
+    checked.value = !!Number(props.value.value);
+  });
 </script>
 </script>
 
 
 <template>
 <template>
@@ -40,8 +53,13 @@
           height: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
           height: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
         }"
         }"
       />
       />
-      <span class="flex-auto mx-4 flex items-center truncate inline-block">属性名</span>
+      <span
+        class="flex-auto mx-4 flex items-center truncate inline-block text-gray-700"
+        :style="{ color: props.value.fontColor || ControlComponentDefaultConfig.fontColor }"
+      >
+        {{ props.value.attributeRename || props.value.attribute }}
+      </span>
     </div>
     </div>
-    <Switch />
+    <Switch v-model:checked="checked" @change="handleChange" />
   </div>
   </div>
 </template>
 </template>

@@ -6,7 +6,8 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { computed } from '@vue/reactivity';
   import { computed } from '@vue/reactivity';
   import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
   import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
-  import { ControlComponentValue } from './control.config';
+  import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
+  import { useSendCommand } from './useSendCommand';
 
 
   const props = defineProps<{
   const props = defineProps<{
     value?: ControlComponentValue;
     value?: ControlComponentValue;
@@ -16,10 +17,12 @@
 
 
   const emit = defineEmits(['update:value', 'change']);
   const emit = defineEmits(['update:value', 'change']);
 
 
+  const { sendCommand } = useSendCommand();
   const handleChange = (event: Event) => {
   const handleChange = (event: Event) => {
     const _value = (event.target as HTMLInputElement).checked;
     const _value = (event.target as HTMLInputElement).checked;
     emit('update:value', _value);
     emit('update:value', _value);
     emit('change', _value);
     emit('change', _value);
+    sendCommand(props.value?.slaveDeviceId || props.value?.deviceId, _value);
   };
   };
 
 
   const getRadio = computed(() => {
   const getRadio = computed(() => {
@@ -28,28 +31,36 @@
 </script>
 </script>
 
 
 <template>
 <template>
-  <div
-    class="toggle-switch"
-    :style="{
-      width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
-      height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
-    }"
-  >
-    <label class="switch">
-      <input
-        :value="props.value?.value"
-        type="checkbox"
-        :checked="props.value?.value"
-        @change="handleChange"
-      />
-      <div class="button">
-        <div class="light"></div>
-        <div class="dots"></div>
-        <div class="characters"></div>
-        <div class="shine"></div>
-        <div class="shadow"></div>
-      </div>
-    </label>
+  <div class="flex flex-col">
+    <div
+      class="toggle-switch"
+      :style="{
+        width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
+        height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
+      }"
+    >
+      <label class="switch">
+        <input
+          :value="props.value?.value"
+          type="checkbox"
+          :checked="props.value?.value"
+          @change="handleChange"
+        />
+        <div class="button">
+          <div class="light"></div>
+          <div class="dots"></div>
+          <div class="characters"></div>
+          <div class="shine"></div>
+          <div class="shadow"></div>
+        </div>
+      </label>
+    </div>
+    <div
+      class="text-center mt-2 text-gray-700"
+      :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
+    >
+      {{ props.value?.attributeRename || props.value?.attribute }}</div
+    >
   </div>
   </div>
 </template>
 </template>
 
 

@@ -6,14 +6,19 @@ export interface ControlComponentLayout {
 
 
 export interface ControlComponentValue {
 export interface ControlComponentValue {
   value?: boolean;
   value?: boolean;
-  name?: string;
+  attribute?: string;
+  attributeRename?: string;
   icon?: string;
   icon?: string;
   iconColor?: string;
   iconColor?: string;
+  deviceId?: string;
+  fontColor?: string;
+  slaveDeviceId?: string;
 }
 }
 
 
 export const ControlComponentDefaultConfig: ControlComponentValue = {
 export const ControlComponentDefaultConfig: ControlComponentValue = {
   icon: 'shuiwen',
   icon: 'shuiwen',
   iconColor: '#367BFF',
   iconColor: '#367BFF',
+  fontColor: '#000',
 };
 };
 
 
 export const transformControlConfig = (
 export const transformControlConfig = (
@@ -23,8 +28,11 @@ export const transformControlConfig = (
 ) => {
 ) => {
   return {
   return {
     value: {
     value: {
-      value: dataSourceRecord.componentInfo.value,
-      icon: dataSourceRecord.componentInfo.icon,
+      ...dataSourceRecord.componentInfo,
+      attribute: dataSourceRecord.attribute,
+      attributeRename: dataSourceRecord.attributeRename,
+      deviceId: dataSourceRecord.deviceId,
+      slaveDeviceId: dataSourceRecord.slaveDeviceId,
     } as ControlComponentValue,
     } as ControlComponentValue,
   };
   };
 };
 };

+import { sendCommandOneway } from '/@/api/dataBoard';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+const { createMessage } = useMessage();
+export function useSendCommand() {
+  const sendCommand = async (deviceId: string, value: any) => {
+    if (!deviceId) return;
+    try {
+      await sendCommandOneway({
+        deviceId,
+        value: {
+          params: Number(value),
+          persistent: true,
+          additionalInfo: {
+            cmdType: 'API',
+          },
+          method: 'methodThingskit',
+        },
+      });
+      createMessage.success('命令下发成功');
+    } catch (error) {}
+  };
+  return {
+    sendCommand,
+  };
+}

+<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
+    title="历史轨迹"
+    @register="registerModal"
+    @ok="handleOk"
+    :ok-button-props="{ loading }"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>

 <script lang="ts">
 <script lang="ts">
   export default {
   export default {
+    components: { Spin },
     inheritAttrs: false,
     inheritAttrs: false,
   };
   };
 </script>
 </script>
 <script lang="ts" setup>
 <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 { RadioRecord } from '../../detail/config/util';
   import { MapComponentLayout, MapComponentValue } from './map.config';
   import { MapComponentLayout, MapComponentValue } from './map.config';
   import {
   import {
@@ -12,11 +13,18 @@
     PlayCircleOutlined,
     PlayCircleOutlined,
     PauseCircleOutlined,
     PauseCircleOutlined,
   } from '@ant-design/icons-vue';
   } 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 { FrontComponent } from '../../const/const';
   import { buildUUID } from '/@/utils/uuid';
   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';
+  import { useAsyncQueue } from '/@/views/device/localtion/useAsyncQueue';
 
 
   // useVisualBoardContext();
   // useVisualBoardContext();
+  type TrackRecord = Record<'lng' | 'lat' | 'ts', number>;
 
 
   const startMethodName = `trackPlayMethod_${buildUUID()}`;
   const startMethodName = `trackPlayMethod_${buildUUID()}`;
 
 
@@ -44,19 +52,52 @@
   const trackAni = ref<Nullable<any>>(null);
   const trackAni = ref<Nullable<any>>(null);
   let mapInstance: Nullable<Recordable> = 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);
+  // }
+
+  const prepare = ref(false);
   async function initMap() {
   async function initMap() {
     const wrapEl = unref(wrapRef);
     const wrapEl = unref(wrapRef);
     if (!wrapEl) return;
     if (!wrapEl) return;
     const BMapGL = (window as any).BMapGL;
     const BMapGL = (window as any).BMapGL;
     mapInstance = new BMapGL.Map(wrapId);
     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!.centerAndZoom(point, 15);
     mapInstance!.enableScrollWheelZoom(true);
     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,
         lng: 116.297611,
         lat: 40.047363,
         lat: 40.047363,
@@ -90,6 +131,8 @@
     const point: any[] = [];
     const point: any[] = [];
     const BMapGL = (window as any).BMapGL;
     const BMapGL = (window as any).BMapGL;
 
 
+    clearOverlays && unref(mapInstance)?.clearOverlays();
+
     for (const { lng, lat } of path) {
     for (const { lng, lat } of path) {
       point.push(new BMapGL.Point(lng, lat));
       point.push(new BMapGL.Point(lng, lat));
     }
     }
@@ -99,10 +142,10 @@
 
 
     const dynamicPlayMethod = {
     const dynamicPlayMethod = {
       [startMethodName]() {
       [startMethodName]() {
-        trackAni.value = new BMapGLLib.TrackAnimation(mapInstance, pl, {
+        trackAni.value = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, {
           overallView: true,
           overallView: true,
           tilt: 30,
           tilt: 30,
-          duration: 20000,
+          duration: 5000,
           delay: 300,
           delay: 300,
         });
         });
         trackAni.value!.start();
         trackAni.value!.start();
@@ -114,15 +157,43 @@
     setTimeout(`${startMethodName}()`);
     setTimeout(`${startMethodName}()`);
   };
   };
 
 
+  const { setTask, executeFlag } = useAsyncQueue();
   onMounted(() => {
   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();
     initMap();
   });
   });
 
 
+  const timeRange = reactive<Record<'start' | 'end', Nullable<number>>>({
+    start: null,
+    end: null,
+  });
   const getTimeRange = computed(() => {
   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(() => {
   const getTrackPlayStatus = computed(() => {
     return (trackAni.value || {})._status;
     return (trackAni.value || {})._status;
@@ -133,10 +204,17 @@
     else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PLAY) unref(trackAni).pause();
     else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PLAY) unref(trackAni).pause();
     else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PAUSE) unref(trackAni).continue();
     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>
 </script>
 
 
 <template>
 <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 no-drag">
     <div
     <div
       class="w-full flex"
       class="w-full flex"
       v-if="props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY"
       v-if="props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY"
@@ -144,7 +222,7 @@
       <Button type="text" class="!px-2 flex-auto !text-left truncate" @click="handleTrackSwitch">
       <Button type="text" class="!px-2 flex-auto !text-left truncate" @click="handleTrackSwitch">
         <div class="w-full truncate text-gray-500 flex items-center">
         <div class="w-full truncate text-gray-500 flex items-center">
           <ClockCircleOutlined />
           <ClockCircleOutlined />
-          <span class="mx-1">实时</span>
+          <span class="mx-1">历史</span>
           <Tooltip :title="getTimeRange.replace('-', '')">
           <Tooltip :title="getTimeRange.replace('-', '')">
             <span class="truncate">
             <span class="truncate">
               {{ getTimeRange }}
               {{ getTimeRange }}
@@ -154,12 +232,17 @@
       </Button>
       </Button>
       <Button type="text" class="!px-2 !text-gray-500" @click="handlePlay">
       <Button type="text" class="!px-2 !text-gray-500" @click="handlePlay">
         <PlayCircleOutlined v-show="getTrackPlayStatus !== TrackAnimationStatus.PLAY" />
         <PlayCircleOutlined v-show="getTrackPlayStatus !== TrackAnimationStatus.PLAY" />
-        <PauseCircleOutlined v-show="getTrackPlayStatus === TrackAnimationStatus.PLAY" />
+        <PauseCircleOutlined
+          class="!ml-0"
+          v-show="getTrackPlayStatus === TrackAnimationStatus.PLAY"
+        />
         <span>
         <span>
           {{ getTrackPlayStatus !== TrackAnimationStatus.PLAY ? '播放轨迹' : '暂停播放' }}
           {{ getTrackPlayStatus !== TrackAnimationStatus.PLAY ? '播放轨迹' : '暂停播放' }}
         </span>
         </span>
       </Button>
       </Button>
     </div>
     </div>
+    <Spin class="w-full h-full" :spinning="!prepare" tip="Loading..." />
     <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
     <div ref="wrapRef" :id="wrapId" class="w-full h-full"></div>
+    <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
   </div>
   </div>
 </template>
 </template>

 import { FrontComponent } from '../../const/const';
 import { FrontComponent } from '../../const/const';
 import { ComponentConfig } from '../../types/type';
 import { ComponentConfig } from '../../types/type';
+import { DataSource } from '/@/api/dataBoard/model';
 
 
 export interface MapComponentLayout {
 export interface MapComponentLayout {
   componentType?: FrontComponent;
   componentType?: FrontComponent;
@@ -7,7 +8,8 @@ export interface MapComponentLayout {
 
 
 export interface MapComponentValue {
 export interface MapComponentValue {
   icon?: string;
   icon?: string;
-  track?: Recordable[];
+  track?: Record<'ts' | 'value', number>[];
+  dataSource?: DataSource[];
 }
 }
 
 
 interface Config {
 interface Config {
@@ -22,14 +24,39 @@ export const MapRealTrackConfig: Config = {
   componentType: FrontComponent.MAP_COMPONENT_TRACK_REAL,
   componentType: FrontComponent.MAP_COMPONENT_TRACK_REAL,
 };
 };
 
 
+const getTrack = (dataSource: DataSource[], config: Config) => {
+  if (dataSource.length >= 2) {
+    const trackRecord = dataSource.slice(0, 2);
+    if (
+      !trackRecord.every((item) => item.componentInfo.value) &&
+      config.componentType === FrontComponent.MAP_COMPONENT_TRACK_REAL
+    )
+      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'] = (
 export const transfromMapComponentConfig: ComponentConfig['transformConfig'] = (
   componentConfig: Config,
   componentConfig: Config,
   _record,
   _record,
-  _dataSourceRecord
+  dataSourceRecord
 ) => {
 ) => {
+  const { track, dataSource } = getTrack(dataSourceRecord as DataSource[], componentConfig);
   return {
   return {
     layout: {
     layout: {
       ...componentConfig,
       ...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 { useUpdateCenter } from '../../hook/useUpdateCenter';
   import { FrontDataSourceRecord } from '../../types/type';
   import { FrontDataSourceRecord } from '../../types/type';
   import { createVisualBoardContext } from '../../hook/useVisualBoardContext';
   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<{
   const props = defineProps<{
+    record: DataComponentRecord;
     dataSource: FrontDataSourceRecord[];
     dataSource: FrontDataSourceRecord[];
   }>();
   }>();
 
 
+  const isMultipleDataSource = computed(() => {
+    const { record } = props;
+    const componentInfo = frontComponentMap.get(record.frontId as FrontComponent);
+    return componentInfo?.isMultipleDataSource;
+  });
+
   const { update, add, remove } = useUpdateCenter();
   const { update, add, remove } = useUpdateCenter();
 
 
   createVisualBoardContext({ update, add, remove });
   createVisualBoardContext({ update, add, remove });
@@ -19,24 +30,41 @@
     <slot name="header"></slot>
     <slot name="header"></slot>
 
 
     <div class="widget-content">
     <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>
         </div>
-      </div>
+      </template>
     </div>
     </div>
     <slot name="footer"></slot>
     <slot name="footer"></slot>
   </section>
   </section>

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

 <script lang="ts" setup>
 <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 { Tooltip, Button } from 'ant-design-vue';
   import { FormActionType, useForm } from '/@/components/Form';
   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 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 VisualOptionsModal from './VisualOptionsModal.vue';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { buildUUID } from '/@/utils/uuid';
   import { buildUUID } from '/@/utils/uuid';
@@ -13,6 +18,10 @@
   import { DataBoardLayoutInfo } from '../../types/type';
   import { DataBoardLayoutInfo } from '../../types/type';
   import { getDataSourceComponent } from './DataSourceForm/help';
   import { getDataSourceComponent } from './DataSourceForm/help';
   import { FrontComponent } from '../../const/const';
   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> };
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
 
@@ -61,27 +70,55 @@
 
 
   const validateDataSourceField = async () => {
   const validateDataSourceField = async () => {
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
-    const _dataSource: boolean[] = [];
+    const _dataSource: Record<DataSourceField, string>[] = [];
     for (const id of hasExistEl) {
     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;
     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 getDataSourceField = () => {
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
     const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
     const _dataSource: DataSource[] = [];
     const _dataSource: DataSource[] = [];
+
     for (const id of hasExistEl) {
     for (const id of hasExistEl) {
       const index = unref(dataSource).findIndex((item) => item.id === id);
       const index = unref(dataSource).findIndex((item) => item.id === id);
       const value = (dataSourceEl[id] as FormActionType).getFieldsValue() as DataSource;
       const value = (dataSourceEl[id] as FormActionType).getFieldsValue() as DataSource;
       if (!~index) continue;
       if (!~index) continue;
       const componentInfo = unref(dataSource)[index].componentInfo || {};
       const componentInfo = unref(dataSource)[index].componentInfo || {};
-      _dataSource.unshift({
+      _dataSource[index] = {
         ...value,
         ...value,
         componentInfo: { ...(props.defaultConfig || {}), ...componentInfo },
         componentInfo: { ...(props.defaultConfig || {}), ...componentInfo },
-      });
+      };
     }
     }
+
     return _dataSource;
     return _dataSource;
   };
   };
 
 
@@ -160,7 +197,8 @@
   };
   };
 
 
   const showSettingButton = computed(() => {
   const showSettingButton = computed(() => {
-    return props.frontId !== FrontComponent.PICTURE_COMPONENT_1;
+    const flag = frontComponentMap.get(props.frontId!)?.hasSetting;
+    return flag;
   });
   });
 
 
   watch(
   watch(
@@ -179,6 +217,41 @@
     return getDataSourceComponent(props.frontId as FrontComponent);
     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({
   defineExpose({
     getAllDataSourceFieldValue,
     getAllDataSourceFieldValue,
     validate,
     validate,
@@ -192,36 +265,47 @@
       <BasicForm @register="basicRegister" class="w-full" />
       <BasicForm @register="basicRegister" class="w-full" />
     </div>
     </div>
     <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
     <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"
-      >
-        选择设备
-      </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"
+    <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
+            :frontId="$props.frontId"
+            :is="dataSourceComponent"
+            :ref="(el) => setFormEl(el, item.id)"
           />
           />
-        </Tooltip>
+        </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>
-    </div>
+    </section>
+
     <div class="text-center">
     <div class="text-center">
       <Button type="primary" @click="handleAdd">添加数据源</Button>
       <Button type="primary" @click="handleAdd">添加数据源</Button>
     </div>
     </div>

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

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { ref } from 'vue';
+  import { FrontComponent } from '../../../const/const';
   import { dataSourceSchema } from '../../config/basicConfiguration';
   import { dataSourceSchema } from '../../config/basicConfiguration';
   import { FormActionType } from '/@/components/Form';
   import { FormActionType } from '/@/components/Form';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
   const formEl = ref<Nullable<FormActionType>>(null);
   const formEl = ref<Nullable<FormActionType>>(null);
 
 
+  defineProps<{
+    frontId?: FrontComponent;
+  }>();
+
   defineExpose({ formActionType: formEl });
   defineExpose({ formActionType: formEl });
 </script>
 </script>
 
 
 <template>
 <template>
   <BasicForm
   <BasicForm
     ref="formEl"
     ref="formEl"
-    :schemas="dataSourceSchema"
+    :schemas="dataSourceSchema($props.frontId)"
     class="w-full flex-1 data-source-form"
     class="w-full flex-1 data-source-form"
     :show-action-button-group="false"
     :show-action-button-group="false"
     :row-props="{
     :row-props="{

 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ref, unref } from 'vue';
   import { ref, unref } from 'vue';
   import { BasicForm, FormActionType } from '/@/components/Form';
   import { BasicForm, FormActionType } from '/@/components/Form';
-  import { controlFormSchema } from '../../config/basicConfiguration';
+  import { dataSourceSchema } from '../../config/basicConfiguration';
+  import { FrontComponent } from '../../../const/const';
+
+  defineProps<{
+    frontId?: FrontComponent;
+  }>();
 
 
   const formEl = ref<Nullable<FormActionType>>();
   const formEl = ref<Nullable<FormActionType>>();
 
 
@@ -33,7 +38,7 @@
   <div class="w-full flex-1">
   <div class="w-full flex-1">
     <BasicForm
     <BasicForm
       :ref="(el) => setFormEl(el)"
       :ref="(el) => setFormEl(el)"
-      :schemas="controlFormSchema"
+      :schemas="dataSourceSchema($props.frontId)"
       class="w-full flex-1 data-source-form"
       class="w-full flex-1 data-source-form"
       :show-action-button-group="false"
       :show-action-button-group="false"
       :row-props="{
       :row-props="{

-<script lang="ts" setup>
-  import { ref, unref } from 'vue';
-  import { BasicForm, FormActionType } from '/@/components/Form';
-  import { mapFormSchema } from '../../config/basicConfiguration';
-
-  const formEl = ref<Nullable<FormActionType>>();
-
-  const setFormEl = (el: any) => {
-    formEl.value = el;
-  };
-
-  const getFieldsValue = () => {
-    return unref(formEl)!.getFieldsValue();
-  };
-
-  const validate = async () => {
-    await unref(formEl)!.validate();
-  };
-
-  const setFieldsValue = async (record: Recordable) => {
-    await unref(formEl)!.setFieldsValue(record);
-  };
-
-  const clearValidate = async (name?: string | string[]) => {
-    await unref(formEl)!.clearValidate(name);
-  };
-  defineExpose({
-    formActionType: { getFieldsValue, validate, setFieldsValue, clearValidate },
-  });
-</script>
-
-<template>
-  <div class="w-full flex-1">
-    <BasicForm
-      :ref="(el) => setFormEl(el)"
-      :schemas="mapFormSchema"
-      class="w-full flex-1 data-source-form"
-      :show-action-button-group="false"
-      :row-props="{
-        gutter: 10,
-      }"
-      layout="horizontal"
-      :label-col="{ span: 0 }"
-    />
-  </div>
-</template>

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

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

@@ -2,18 +2,18 @@ import { getAllDeviceByOrg, getDeviceAttributes, getGatewaySlaveDevice } from '/
 import { getOrganizationList } from '/@/api/system/system';
 import { getOrganizationList } from '/@/api/system/system';
 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { copyTransFun } from '/@/utils/fnUtils';
 import { copyTransFun } from '/@/utils/fnUtils';
-import { OnChangeHookParams } from '/@/components/Form/src/components/ApiSearchSelect.vue';
-import { unref } from 'vue';
+import { DeviceAttributeParams, MasterDeviceList } from '/@/api/dataBoard/model';
+import { FrontComponent } from '../../const/const';
 
 
 export enum BasicConfigField {
 export enum BasicConfigField {
   NAME = 'name',
   NAME = 'name',
   REMARK = 'remark',
   REMARK = 'remark',
 }
 }
 
 
-const getDeviceAttribute = async (deviceId: string) => {
+const getDeviceAttribute = async (params: DeviceAttributeParams) => {
   try {
   try {
-    const data = await getDeviceAttributes({ deviceId });
-    if (data) return data.map((item) => ({ label: item, value: item }));
+    const data = await getDeviceAttributes(params);
+    if (data) return data.map((item) => ({ label: item.name, value: item.identifier }));
   } catch (error) {}
   } catch (error) {}
   return [];
   return [];
 };
 };
@@ -23,6 +23,8 @@ export enum DataSourceField {
   ORIGINATION_ID = 'organizationId',
   ORIGINATION_ID = 'organizationId',
   DEVICE_ID = 'deviceId',
   DEVICE_ID = 'deviceId',
   SLAVE_DEVICE_ID = 'slaveDeviceId',
   SLAVE_DEVICE_ID = 'slaveDeviceId',
+  DEVICE_PROFILE_ID = 'deviceProfileId',
+  SLAVE_DEVICE_PROFILE_ID = 'slaveDeviceProfileId',
   ATTRIBUTE = 'attribute',
   ATTRIBUTE = 'attribute',
   ATTRIBUTE_RENAME = 'attributeRename',
   ATTRIBUTE_RENAME = 'attributeRename',
   DEVICE_NAME = 'deviceName',
   DEVICE_NAME = 'deviceName',
@@ -31,6 +33,18 @@ export enum DataSourceField {
   LATITUDE_ATTRIBUTE = 'latitudeAttribute',
   LATITUDE_ATTRIBUTE = 'latitudeAttribute',
 }
 }
 
 
+const isControlComponent = (frontId: FrontComponent) => {
+  const list = [
+    FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH,
+    FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON,
+    FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,
+  ];
+  if (list.includes(frontId)) {
+    return true;
+  }
+  return false;
+};
+
 export const basicSchema: FormSchema[] = [
 export const basicSchema: FormSchema[] = [
   {
   {
     field: BasicConfigField.NAME,
     field: BasicConfigField.NAME,
@@ -52,388 +66,214 @@ export const basicSchema: FormSchema[] = [
   },
   },
 ];
 ];
 
 
-export const dataSourceSchema: FormSchema[] = [
-  {
-    field: DataSourceField.IS_GATEWAY_DEVICE,
-    component: 'Switch',
-    label: '是否是网关设备',
-    show: false,
-  },
-  {
-    field: DataSourceField.DEVICE_NAME,
-    component: 'Input',
-    label: '设备名',
-    show: false,
-  },
-  {
-    field: DataSourceField.ORIGINATION_ID,
-    component: 'ApiTreeSelect',
-    label: '组织',
-    colProps: { span: 8 },
-    rules: [{ required: true, message: '组织为必填项' }],
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      return {
-        placeholder: '请选择组织',
-        api: async () => {
-          const data = await getOrganizationList();
-          copyTransFun(data as any as any[]);
-          return data;
-        },
-        onChange() {
-          setFieldsValue({
-            [DataSourceField.DEVICE_ID]: null,
-            [DataSourceField.ATTRIBUTE]: null,
-            [DataSourceField.SLAVE_DEVICE_ID]: null,
-            [DataSourceField.IS_GATEWAY_DEVICE]: false,
-          });
-        },
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-  {
-    field: DataSourceField.DEVICE_ID,
-    component: 'ApiSelect',
-    label: '设备',
-    colProps: { span: 8 },
-    rules: [{ required: true, message: '设备名称为必填项' }],
-    componentProps({ formModel, formActionType }) {
-      const { setFieldsValue } = formActionType;
-      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
-      return {
-        api: async () => {
-          if (organizationId) {
-            try {
-              const data = await getAllDeviceByOrg(organizationId);
-              if (data)
-                return data.map((item) => ({
-                  label: item.name,
-                  value: item.id,
-                  deviceType: item.deviceType,
-                }));
-            } catch (error) {}
-          }
-          return [];
-        },
-        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
-          setFieldsValue({
-            [DataSourceField.ATTRIBUTE]: null,
-            [DataSourceField.IS_GATEWAY_DEVICE]: record?.deviceType === 'GATEWAY',
-            [DataSourceField.SLAVE_DEVICE_ID]: null,
-            [DataSourceField.DEVICE_NAME]: record?.label,
-          });
-        },
-        placeholder: '请选择设备',
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-  {
-    field: DataSourceField.SLAVE_DEVICE_ID,
-    label: '网关子设备',
-    component: 'ApiSelect',
-    colProps: { span: 8 },
-    rules: [{ required: true, message: '网关子设备为必填项' }],
-    ifShow({ model }) {
-      return model[DataSourceField.IS_GATEWAY_DEVICE];
-    },
-    dynamicRules({ model }) {
-      return [{ required: model[DataSourceField.IS_GATEWAY_DEVICE], message: '请选择网关子设备' }];
+export const dataSourceSchema = (frontId?: FrontComponent): FormSchema[] => {
+  return [
+    {
+      field: DataSourceField.IS_GATEWAY_DEVICE,
+      component: 'Switch',
+      label: '是否是网关设备',
+      show: false,
     },
     },
-    componentProps({ formModel, formActionType }) {
-      const { setFieldsValue } = formActionType;
-      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
-      const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
-      const deviceId = formModel[DataSourceField.DEVICE_ID];
-      return {
-        api: async () => {
-          if (organizationId && isGatewayDevice) {
-            try {
-              const data = await getGatewaySlaveDevice({ organizationId, masterId: deviceId });
-              if (data)
-                return data.map((item) => ({
-                  label: item.name,
-                  value: item.id,
-                  deviceType: item.deviceType,
-                }));
-            } catch (error) {}
-          }
-          return [];
-        },
-        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
-          setFieldsValue({
-            [DataSourceField.ATTRIBUTE]: null,
-            [DataSourceField.DEVICE_NAME]: record?.label,
-          });
-        },
-        placeholder: '请选择网关子设备',
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: DataSourceField.DEVICE_NAME,
+      component: 'Input',
+      label: '设备名',
+      show: false,
     },
     },
-  },
-  {
-    field: DataSourceField.ATTRIBUTE,
-    component: 'ApiSelect',
-    label: '属性',
-    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 slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
-      return {
-        api: async () => {
-          if (organizationId && deviceId) {
-            try {
-              if (isGatewayDevice && slaveDeviceId) {
-                return await getDeviceAttribute(slaveDeviceId);
-              }
-              if (!isGatewayDevice) {
-                return await getDeviceAttribute(deviceId);
-              }
-            } catch (error) {}
-          }
-          return [];
-        },
-        placeholder: '请选择属性',
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: DataSourceField.ORIGINATION_ID,
+      component: 'ApiTreeSelect',
+      label: '组织',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '组织为必填项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          placeholder: '请选择组织',
+          api: async () => {
+            const data = await getOrganizationList();
+            copyTransFun(data as any as any[]);
+            return data;
+          },
+          onChange() {
+            setFieldsValue({
+              [DataSourceField.DEVICE_ID]: null,
+              [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,
+        };
+      },
     },
     },
-  },
-  {
-    field: DataSourceField.DEVICE_RENAME,
-    component: 'Input',
-    label: '设备',
-    colProps: { span: 8 },
-    componentProps: {
-      placeholder: '设备重命名',
+    {
+      field: DataSourceField.DEVICE_PROFILE_ID,
+      component: 'Input',
+      label: '',
+      show: false,
     },
     },
-  },
-  {
-    field: DataSourceField.ATTRIBUTE_RENAME,
-    component: 'Input',
-    label: '属性',
-    colProps: { span: 8 },
-    componentProps: {
-      placeholder: '属性重命名',
-    },
-  },
-];
+    {
+      field: DataSourceField.DEVICE_ID,
+      component: 'ApiSelect',
+      label: '设备',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '设备名称为必填项' }],
+      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,
+                  }));
+              } catch (error) {}
+            }
+            return [];
+          },
 
 
-export const controlFormSchema: FormSchema[] = [
-  {
-    field: DataSourceField.DEVICE_RENAME,
-    component: 'Input',
-    label: '设备',
-    colProps: { span: 8 },
-    componentProps: {
-      placeholder: '设备重命名',
+          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,
+            });
+          },
+          placeholder: '请选择设备',
+          getPopupContainer: () => document.body,
+        };
+      },
     },
     },
-  },
-  {
-    field: DataSourceField.ATTRIBUTE_RENAME,
-    component: 'Input',
-    label: '属性',
-    colProps: { span: 8 },
-    componentProps: {
-      placeholder: '属性重命名',
+    {
+      field: DataSourceField.SLAVE_DEVICE_PROFILE_ID,
+      component: 'Input',
+      label: '',
+      show: false,
     },
     },
-  },
-];
-
-export const mapFormSchema: FormSchema[] = [
-  {
-    field: DataSourceField.IS_GATEWAY_DEVICE,
-    component: 'Switch',
-    label: '是否是网关设备',
-    show: false,
-  },
-  {
-    field: DataSourceField.DEVICE_NAME,
-    component: 'Input',
-    label: '设备名',
-    show: false,
-  },
-  {
-    field: DataSourceField.ORIGINATION_ID,
-    component: 'ApiTreeSelect',
-    label: '组织',
-    colProps: { span: 8 },
-    rules: [{ required: true, message: '组织为必填项' }],
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      return {
-        placeholder: '请选择组织',
-        api: async () => {
-          const data = await getOrganizationList();
-          copyTransFun(data as any as any[]);
-          return data;
-        },
-        onChange() {
-          setFieldsValue({
-            [DataSourceField.DEVICE_ID]: null,
-            [DataSourceField.LATITUDE_ATTRIBUTE]: null,
-            [DataSourceField.LONGITUDE_ATTRIBUTE]: null,
-            [DataSourceField.SLAVE_DEVICE_ID]: null,
-            [DataSourceField.IS_GATEWAY_DEVICE]: false,
-          });
-        },
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: DataSourceField.SLAVE_DEVICE_ID,
+      label: '网关子设备',
+      component: 'ApiSelect',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '网关子设备为必填项' }],
+      ifShow({ model }) {
+        return model[DataSourceField.IS_GATEWAY_DEVICE];
+      },
+      dynamicRules({ model }) {
+        return [
+          { required: model[DataSourceField.IS_GATEWAY_DEVICE], message: '请选择网关子设备' },
+        ];
+      },
+      componentProps({ formModel, formActionType }) {
+        const { setFieldsValue } = formActionType;
+        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,
+                  }));
+              } catch (error) {}
+            }
+            return [];
+          },
+          onChange(_value, record: MasterDeviceList) {
+            setFieldsValue({
+              [DataSourceField.ATTRIBUTE]: null,
+              [DataSourceField.SLAVE_DEVICE_PROFILE_ID]: record.deviceProfileId,
+              [DataSourceField.DEVICE_NAME]: record?.label,
+            });
+          },
+          placeholder: '请选择网关子设备',
+          getPopupContainer: () => document.body,
+        };
+      },
     },
     },
-  },
-  {
-    field: DataSourceField.DEVICE_ID,
-    component: 'ApiSelect',
-    label: '设备',
-    colProps: { span: 8 },
-    rules: [{ required: true, message: '设备名称为必填项' }],
-    componentProps({ formModel, formActionType }) {
-      const { setFieldsValue } = formActionType;
-      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
-      return {
-        api: async () => {
-          if (organizationId) {
-            try {
-              const data = await getAllDeviceByOrg(organizationId);
-              if (data)
-                return data.map((item) => ({
-                  label: item.name,
-                  value: item.id,
-                  deviceType: item.deviceType,
-                }));
-            } catch (error) {}
-          }
-          return [];
-        },
-        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
-          setFieldsValue({
-            [DataSourceField.LONGITUDE_ATTRIBUTE]: null,
-            [DataSourceField.LATITUDE_ATTRIBUTE]: null,
-            [DataSourceField.IS_GATEWAY_DEVICE]: record?.deviceType === 'GATEWAY',
-            [DataSourceField.SLAVE_DEVICE_ID]: null,
-            [DataSourceField.DEVICE_NAME]: record?.label,
-          });
-        },
-        placeholder: '请选择设备',
-        getPopupContainer: () => document.body,
-      };
-    },
-  },
-  {
-    field: DataSourceField.SLAVE_DEVICE_ID,
-    label: '网关子设备',
-    component: 'ApiSelect',
-    colProps: { span: 8 },
-    rules: [{ required: true, message: '网关子设备为必填项' }],
-    ifShow({ model }) {
-      return model[DataSourceField.IS_GATEWAY_DEVICE];
-    },
-    dynamicRules({ model }) {
-      return [{ required: model[DataSourceField.IS_GATEWAY_DEVICE], message: '请选择网关子设备' }];
-    },
-    componentProps({ formModel, formActionType }) {
-      const { setFieldsValue } = formActionType;
-      const organizationId = formModel[DataSourceField.ORIGINATION_ID];
-      const isGatewayDevice = formModel[DataSourceField.IS_GATEWAY_DEVICE];
-      const deviceId = formModel[DataSourceField.DEVICE_ID];
-      return {
-        api: async () => {
-          if (organizationId && isGatewayDevice) {
-            try {
-              const data = await getGatewaySlaveDevice({ organizationId, masterId: deviceId });
-              if (data)
-                return data.map((item) => ({
-                  label: item.name,
-                  value: item.id,
-                  deviceType: item.deviceType,
-                }));
-            } catch (error) {}
-          }
-          return [];
-        },
-        onChange(_value, record: Record<'value' | 'label' | 'deviceType', string>) {
-          setFieldsValue({
-            [DataSourceField.LATITUDE_ATTRIBUTE]: null,
-            [DataSourceField.LONGITUDE_ATTRIBUTE]: null,
-            [DataSourceField.DEVICE_NAME]: record?.label,
-          });
-        },
-        placeholder: '请选择网关子设备',
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: DataSourceField.ATTRIBUTE,
+      component: 'ApiSelect',
+      label: '属性',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '属性为必填项' }],
+      componentProps({ formModel }) {
+        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 (deviceId) {
+              try {
+                if (isGatewayDevice && slaveDeviceId && slaveDeviceProfileId) {
+                  return await getDeviceAttribute({
+                    deviceProfileId: slaveDeviceProfileId,
+                    dataType: isControlComponent(frontId!) ? 'BOOL' : undefined,
+                  });
+                }
+                if (!isGatewayDevice && deviceProfileId) {
+                  return await getDeviceAttribute({
+                    deviceProfileId,
+                    dataType: isControlComponent(frontId!) ? 'BOOL' : undefined,
+                  });
+                }
+              } catch (error) {}
+            }
+            return [];
+          },
+          placeholder: '请选择属性',
+          getPopupContainer: () => document.body,
+        };
+      },
     },
     },
-  },
-  {
-    field: DataSourceField.LONGITUDE_ATTRIBUTE,
-    component: 'ApiSearchSelect',
-    label: '经度属性',
-    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 slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
-      return {
-        api: async () => {
-          if (organizationId && deviceId) {
-            try {
-              if (isGatewayDevice && slaveDeviceId) {
-                return await getDeviceAttribute(slaveDeviceId);
-              }
-              if (!isGatewayDevice) {
-                return await getDeviceAttribute(deviceId);
-              }
-            } catch (error) {}
-          }
-          return [];
-        },
-        placeholder: '请选择经度属性',
-        dropdownVisibleChangeHook: ({ options }: OnChangeHookParams) => {
-          options.value = unref(options).filter(
-            (item) => item.value !== formModel[DataSourceField.LATITUDE_ATTRIBUTE]
-          );
-        },
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: DataSourceField.DEVICE_RENAME,
+      component: 'Input',
+      label: '设备',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: '设备重命名',
+      },
     },
     },
-  },
-  {
-    field: DataSourceField.LATITUDE_ATTRIBUTE,
-    component: 'ApiSearchSelect',
-    label: '纬度属性',
-    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 slaveDeviceId = formModel[DataSourceField.SLAVE_DEVICE_ID];
-      return {
-        api: async () => {
-          if (organizationId && deviceId) {
-            try {
-              if (isGatewayDevice && slaveDeviceId) {
-                return getDeviceAttribute(slaveDeviceId);
-              }
-              if (!isGatewayDevice) {
-                return await getDeviceAttribute(deviceId);
-              }
-            } catch (error) {}
-          }
-          return [];
-        },
-        dropdownVisibleChangeHook: ({ options }: OnChangeHookParams) => {
-          options.value = unref(options).filter(
-            (item) => item.value !== formModel[DataSourceField.LONGITUDE_ATTRIBUTE]
-          );
-        },
-        placeholder: '请选择纬度属性',
-        getPopupContainer: () => document.body,
-      };
+    {
+      field: DataSourceField.ATTRIBUTE_RENAME,
+      component: 'Input',
+      label: '属性',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: '属性重命名',
+      },
     },
     },
-  },
-];
+  ];
+};

 import moment from 'moment';
 import moment from 'moment';
 import { Moment } from 'moment';
 import { Moment } from 'moment';
-import { getDeviceAttributes } from '/@/api/dataBoard';
 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { ColEx } from '/@/components/Form/src/types';
 import { ColEx } from '/@/components/Form/src/types';
 import { useGridLayout } from '/@/hooks/component/useGridLayout';
 import { useGridLayout } from '/@/hooks/component/useGridLayout';
@@ -134,7 +133,6 @@ export const formSchema: FormSchema[] = [
     field: SchemaFiled.AGG,
     field: SchemaFiled.AGG,
     label: '数据聚合功能',
     label: '数据聚合功能',
     component: 'Select',
     component: 'Select',
-    // defaultValue: AggregateDataEnum.NONE,
     componentProps: {
     componentProps: {
       getPopupContainer: () => document.body,
       getPopupContainer: () => document.body,
       options: [
       options: [
@@ -181,7 +179,6 @@ export const formSchema: FormSchema[] = [
     field: SchemaFiled.LIMIT,
     field: SchemaFiled.LIMIT,
     label: '最大条数',
     label: '最大条数',
     component: 'InputNumber',
     component: 'InputNumber',
-    // defaultValue: 7,
     ifShow({ values }) {
     ifShow({ values }) {
       return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
       return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
     },
     },
@@ -201,34 +198,30 @@ export const formSchema: FormSchema[] = [
     componentProps: {
     componentProps: {
       getPopupContainer: () => document.body,
       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,
+    };
+  }
+}

@@ -178,6 +178,39 @@ export const modeFour: FormSchema[] = [
   },
   },
 ];
 ];
 
 
+export const modeFive: FormSchema[] = [
+  {
+    field: visualOptionField.FONT_COLOR,
+    label: '数值字体颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: '#000',
+    },
+  },
+  {
+    field: visualOptionField.ICON_COLOR,
+    label: '图标颜色',
+    component: 'ColorPicker',
+    changeEvent: 'update:value',
+    componentProps: {
+      defaultValue: '#367BFF',
+    },
+  },
+  {
+    field: visualOptionField.ICON,
+    label: '图标',
+    component: 'IconDrawer',
+    changeEvent: 'update:value',
+    componentProps({ formModel }) {
+      const color = formModel[visualOptionField.ICON_COLOR];
+      return {
+        color,
+      };
+    },
+  },
+];
+
 export const schemasMap = new Map<FrontComponent, FormSchema[]>();
 export const schemasMap = new Map<FrontComponent, FormSchema[]>();
 
 
 schemasMap.set(FrontComponent.TEXT_COMPONENT_1, modeOne);
 schemasMap.set(FrontComponent.TEXT_COMPONENT_1, modeOne);
@@ -188,3 +221,6 @@ schemasMap.set(FrontComponent.TEXT_COMPONENT_5, modeTwo);
 schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, modeOne);
 schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, modeOne);
 schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, modeThree);
 schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, modeThree);
 schemasMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, modeFour);
 schemasMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, modeFour);
+schemasMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, modeFive);
+schemasMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, modeOne);
+schemasMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, modeOne);

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

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