Merge branch 'perf/data-board' into 'main_dev'

perf: 优化数据看板控制组件&&数据源绑定

See merge request yunteng/thingskit-front!1179

@@ -6,6 +6,7 @@
   ],
   "cSpell.words": [
     "ACKS",
+    "Cascader",
     "clazz",
     "Cmds",
     "COAP",

@@ -137,7 +137,7 @@ export const createOrEditDevice = (data) => {
 
 // 查询设备详情
 export const getDeviceDetail = (id: string) => {
-  return defHttp.get({
+  return defHttp.get<DeviceRecord>({
     url: DeviceManagerApi.DEVICE_URL + `/${id}`,
   });
 };

 import { DataTypeEnum } from '/@/enums/objectModelEnum';
-import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
 
 export interface Specs {
   min: string;
@@ -9,7 +9,7 @@ export interface Specs {
 
   dataType?: string;
   name?: string;
-  value?: string;
+  value?: string | number;
   step: string;
   length: string;
   boolOpen: string;
@@ -26,6 +26,13 @@ export interface DataType {
   specsList?: Specs[];
 }
 
+export interface ExtensionDesc {
+  zoomFactor?: number;
+  actionType?: string;
+  dataType: string;
+  registerAddress: number;
+}
+
 export interface StructJSON {
   functionName?: string;
   identifier: string;
@@ -46,7 +53,7 @@ export interface ModelOfMatterParams {
   deviceProfileId?: string;
   functionJson: FunctionJson;
   functionName: string;
-  functionType: FunctionType;
+  functionType: FunctionTypeEnum;
   identifier: string;
   remark: string;
   id?: string;
@@ -54,11 +61,11 @@ export interface ModelOfMatterParams {
   callType?: string;
   eventType?: string;
   accessMode?: string;
-  extensionDesc?: Recordable;
+  extensionDesc?: ExtensionDesc;
 }
 
 export interface GetModelTslParams {
-  functionType: FunctionType;
+  functionType: FunctionTypeEnum;
   deviceProfileId: string;
   ifShowClass?: string | Boolean;
 }
@@ -85,3 +92,26 @@ export interface ModelOfMatterItemRecordType {
   status: number;
   deviceProfileId: string;
 }
+
+export interface BatchGetObjectModelItemType {
+  id: string;
+  name: string;
+  transportType: string;
+  deviceType: string;
+  tsl: Tsl[];
+}
+
+export interface Tsl {
+  functionName: string;
+  identifier: string;
+  functionType: string;
+  accessMode?: string;
+  specs?: {
+    dataType: DataType;
+  };
+  extensionDesc: ExtensionDesc;
+  eventType?: string;
+  outputData?: StructJSON[];
+  callType?: string;
+  inputData?: StructJSON[];
+}

 import { BasicPageParams } from '../model/baseModel';
 import {
+  BatchGetObjectModelItemType,
   GetModelTslParams,
   ImportModelOfMatterType,
   ModelOfMatterItemRecordType,
   ModelOfMatterParams,
 } from './model/modelOfMatterModel';
+import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
 import { defHttp } from '/@/utils/http/axios';
-import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 
 enum ModelOfMatter {
   CREATE = '/things_model',
@@ -26,12 +27,14 @@ enum ModelOfMatter {
 
   IMPORT_CSV = '/things_model/csvImport',
   EXCEL_EXPORT = '/things_model/downloadTemplate',
+
+  BATCH_GET_TSL_BY_DEVICE_PROFILES = '/things_model/batch/get_tsl',
 }
 
 export const getModelList = (
   params: BasicPageParams & {
     deviceProfileId?: string;
-    functionTyp?: FunctionType;
+    functionTyp?: FunctionTypeEnum;
     nameOrIdentifier?: string;
     selectType?: string | undefined;
     id?: string;
@@ -181,3 +184,16 @@ export const excelExport = () => {
     responseType: 'blob',
   });
 };
+
+export const batchGetObjectModel = ({
+  deviceProfileIds,
+  functionTypeEnum = 'all',
+}: {
+  deviceProfileIds: string[];
+  functionTypeEnum?: FunctionTypeEnum | 'all';
+}) => {
+  return defHttp.post<BatchGetObjectModelItemType[]>({
+    url: ModelOfMatter.BATCH_GET_TSL_BY_DEVICE_PROFILES,
+    data: { deviceProfileIds, functionTypeEnum },
+  });
+};

@@ -59,7 +59,7 @@ export interface GenModbusCommandType {
   crc: string;
   deviceCode: string;
   method: string;
-  registerAddress: string;
+  registerAddress: number;
   registerNumber?: number;
   registerValues?: number[];
 }

@@ -11,6 +11,7 @@ export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.v
 export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as ApiUpload } from './src/components/ApiUpload.vue';
+export { default as ApiCascader } from './src/components/ApiCascader.vue';
 
 export { default as StructForm } from './src/components/StructForm/StructForm.vue';
 export { default as JavaScriptFunctionEditor } from './src/components/JavaScriptFunctionEditor.vue';

+<script setup lang="ts">
+  import { Cascader } from 'ant-design-vue';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  import { CascaderOptionType } from 'ant-design-vue/lib/cascader';
+  import { get } from 'lodash';
+  import { ref, unref, watch, watchEffect } from 'vue';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { isFunction } from '/@/utils/is';
+
+  const { t } = useI18n();
+
+  const props = withDefaults(
+    defineProps<{
+      value?: (string | number)[];
+      immediate?: boolean;
+      params?: any;
+      api?: Fn<any, Promise<any>>;
+      options?: CascaderOptionType[];
+      resultField?: string;
+      fieldNames?: Record<'label' | 'value' | 'children', string>;
+    }>(),
+    {
+      value: () => [],
+      immediate: true,
+      fieldNames: () => ({ label: 'label', value: 'value', children: 'children' }),
+    }
+  );
+
+  const emit = defineEmits(['change', 'options-change', 'update:value']);
+
+  const options = ref<CascaderOptionType[]>([]);
+  const loading = ref(false);
+  const isFirstLoad = ref(true);
+  const emitData = ref<any[]>([]);
+
+  // Embedded in the form, just use the hook binding to perform form verification
+  const [state] = useRuleFormItem(props, 'value', 'update:value', emitData);
+
+  watchEffect(() => {
+    props.immediate && fetch();
+  });
+
+  watch(
+    () => props.params,
+    () => {
+      !unref(isFirstLoad) && fetch();
+    },
+    { deep: true }
+  );
+
+  async function fetch() {
+    const api = props.api;
+    if (!api || !isFunction(api)) return;
+    options.value = [];
+    try {
+      loading.value = true;
+      const res = await api(props.params);
+      if (Array.isArray(res)) {
+        options.value = res;
+        emitChange();
+        return;
+      }
+      if (props.resultField) {
+        options.value = get(res, props.resultField) || [];
+      }
+      emitChange();
+    } catch (error) {
+      console.warn(error);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function handleFetch(open) {
+    if (open) {
+      await fetch();
+    }
+  }
+
+  function emitChange() {
+    emit('options-change', options);
+  }
+
+  function handleChange(_, ...args) {
+    emitData.value = args;
+  }
+</script>
+
+<template>
+  <Cascader
+    v-bind="$attrs"
+    @change="handleChange"
+    :fieldNames="fieldNames"
+    :options="options"
+    v-model:value="state"
+    @popupVisibleChange="handleFetch"
+  >
+    <template #notFoundContent v-if="loading">
+      <span>
+        <LoadingOutlined spin class="mr-1" />
+        {{ t('component.form.apiSelectNotFound') }}
+      </span>
+    </template>
+  </Cascader>
+</template>

@@ -117,6 +117,7 @@ export type ComponentType =
   | 'ColorPicker'
   | 'IconDrawer'
   | 'ApiUpload'
+  | 'ApiCascader'
   | 'ApiSearchSelect'
   | 'StructForm'
   | 'ApiSelectScrollLoad'

@@ -7,6 +7,12 @@ export enum DataTypeEnum {
   ENUM = 'ENUM',
 }
 
+export enum FunctionTypeEnum {
+  PROPERTIES = 'properties',
+  EVENTS = 'events',
+  SERVICE = 'services',
+}
+
 export enum RegisterDataTypeEnum {
   UN_SHORT = 'unshort',
 }
@@ -26,3 +32,7 @@ export enum RegisterActionTypeNameEnum {
   INT = '06写入单个保持寄存器',
   DOUBLE = '16写入多个保持寄存器',
 }
+
+export enum ModbusCRCEnum {
+  CRC_16_LOWER = 'CRC_16_LOWER',
+}

@@ -2,8 +2,7 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { h, unref } from 'vue';
 import { Tooltip } from 'ant-design-vue';
-
-import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useClipboard } from '@vueuse/core';
 import { DictEnum } from '/@/enums/dictEnum';
@@ -26,10 +25,10 @@ export const columns: BasicColumn[] = [
   },
 ];
 
-export const formatFunctionType: Record<FunctionType, string> = {
-  [FunctionType.PROPERTIES]: '属性',
-  [FunctionType.EVENTS]: '事件',
-  [FunctionType.SERVICE]: '服务',
+export const formatFunctionType: Record<FunctionTypeEnum, string> = {
+  [FunctionTypeEnum.PROPERTIES]: '属性',
+  [FunctionTypeEnum.EVENTS]: '事件',
+  [FunctionTypeEnum.SERVICE]: '服务',
 };
 
 const handleCopy = async (value: string) => {
@@ -45,7 +44,7 @@ export const columnsDrawer: BasicColumn[] = [
     title: '功能类型',
     dataIndex: 'functionType',
     width: 90,
-    format: (text: FunctionType) => {
+    format: (text: FunctionTypeEnum) => {
       return formatFunctionType[text];
     },
   },

@@ -5,7 +5,8 @@ import { MessageEnum } from '/@/enums/messageEnum';
 import { numberRule } from '/@/utils/rules';
 
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
-import { FormField, FunctionType } from './step/cpns/physical/cpns/config';
+import { FormField } from './step/cpns/physical/cpns/config';
+import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
 import { h, unref } from 'vue';
 import { Tag, Tooltip } from 'ant-design-vue';
 import { EventType, EventTypeColor, EventTypeName } from '../list/cpns/tabs/EventManage/config';
@@ -68,10 +69,10 @@ export const steps = [
   },
 ];
 
-export const formatFunctionType: Record<FunctionType, string> = {
-  [FunctionType.PROPERTIES]: '属性',
-  [FunctionType.EVENTS]: '事件',
-  [FunctionType.SERVICE]: '服务',
+export const formatFunctionType: Record<FunctionTypeEnum, string> = {
+  [FunctionTypeEnum.PROPERTIES]: '属性',
+  [FunctionTypeEnum.EVENTS]: '事件',
+  [FunctionTypeEnum.SERVICE]: '服务',
 };
 
 export const physicalColumn: BasicColumn[] = [
@@ -79,7 +80,7 @@ export const physicalColumn: BasicColumn[] = [
     title: '功能类型',
     dataIndex: FormField.FUNCTION_TYPE,
     width: 90,
-    format: (text: FunctionType) => {
+    format: (text: FunctionTypeEnum) => {
       return formatFunctionType[text];
     },
   },
@@ -153,9 +154,12 @@ export const modelOfMatterForm: FormSchema[] = [
     colProps: { span: 8 },
     componentProps: {
       options: [
-        { label: formatFunctionType[FunctionType.PROPERTIES], value: FunctionType.PROPERTIES },
-        { label: formatFunctionType[FunctionType.EVENTS], value: FunctionType.EVENTS },
-        { label: formatFunctionType[FunctionType.SERVICE], value: FunctionType.SERVICE },
+        {
+          label: formatFunctionType[FunctionTypeEnum.PROPERTIES],
+          value: FunctionTypeEnum.PROPERTIES,
+        },
+        { label: formatFunctionType[FunctionTypeEnum.EVENTS], value: FunctionTypeEnum.EVENTS },
+        { label: formatFunctionType[FunctionTypeEnum.SERVICE], value: FunctionTypeEnum.SERVICE },
       ],
     },
   },

@@ -156,7 +156,7 @@
   import { isObject } from '/@/utils/is';
   import { useRole } from '/@/hooks/business/useRole';
   import { ExportModelCategory } from '/@/api/device/modelOfMatter';
-  import { FunctionType } from './cpns/physical/cpns/config';
+  import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
   import SelectImport from '../components/SelectImport.vue';
 
   const { isPlatformAdmin, isSysadmin } = useRole();
@@ -287,15 +287,15 @@
     return Promise.all([
       ExportModelCategory({
         deviceProfileId,
-        functionType: FunctionType.EVENTS,
+        functionType: FunctionTypeEnum.EVENTS,
       }),
       ExportModelCategory({
         deviceProfileId,
-        functionType: FunctionType.PROPERTIES,
+        functionType: FunctionTypeEnum.PROPERTIES,
       }),
       ExportModelCategory({
         deviceProfileId,
-        functionType: FunctionType.SERVICE,
+        functionType: FunctionTypeEnum.SERVICE,
       }),
     ]);
   };

@@ -23,24 +23,24 @@
           v-model:activeKey="activeKey"
           :size="size"
         >
-          <TabPane :key="FunctionType.PROPERTIES" tab="属性" />
-          <TabPane :key="FunctionType.SERVICE" :disabled="isTCPGatewaySubDevice" tab="服务" />
-          <TabPane :key="FunctionType.EVENTS" tab="事件" :disabled="isTCPGatewaySubDevice" />
+          <TabPane :key="FunctionTypeEnum.PROPERTIES" tab="属性" />
+          <TabPane :key="FunctionTypeEnum.SERVICE" :disabled="isTCPGatewaySubDevice" tab="服务" />
+          <TabPane :key="FunctionTypeEnum.EVENTS" tab="事件" :disabled="isTCPGatewaySubDevice" />
         </Tabs>
         <Attribute
-          v-if="activeKey === FunctionType.PROPERTIES"
+          v-if="activeKey === FunctionTypeEnum.PROPERTIES"
           :openModalMode="openModalMode"
           :transportType="record?.transportType"
           ref="AttrRef"
         />
         <Service
-          v-if="activeKey === FunctionType.SERVICE"
+          v-if="activeKey === FunctionTypeEnum.SERVICE"
           :record="$props.record"
           :openModalMode="openModalMode"
           ref="ServiceRef"
         />
         <Events
-          v-if="activeKey === FunctionType.EVENTS"
+          v-if="activeKey === FunctionTypeEnum.EVENTS"
           :openModalMode="openModalMode"
           ref="EventsRef"
         />
@@ -69,7 +69,7 @@
   import { DeviceRecord, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { OpenModelMode, OpenModelOfMatterModelParams } from './types/index';
-  import { FunctionType } from './cpns/config';
+  import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
   import { useRole } from '/@/hooks/business/useRole';
 
   const { isPlatformAdmin, isSysadmin } = useRole();
@@ -87,7 +87,7 @@
   });
 
   const blockContent = `属性一般是指设备的运行状态，如当前温度等；服务是指设备可被调用的方法，支持定义参数，如执行某项任务；事件则是指设备上报的通知，如告警，需要被及时处理。`;
-  const activeKey = ref<FunctionType>(FunctionType.PROPERTIES);
+  const activeKey = ref<FunctionTypeEnum>(FunctionTypeEnum.PROPERTIES);
   const size = ref('small');
 
   const AttrRef = ref<InstanceType<typeof Attribute>>();
@@ -98,7 +98,7 @@
   const openModalMode = ref<OpenModelMode>(OpenModelMode.CREATE);
   const openModalParams = ref<OpenModelOfMatterModelParams>();
 
-  const functionType = ref<FunctionType>();
+  const functionType = ref<FunctionTypeEnum>();
   const { createMessage } = useMessage();
 
   const setAttrFormData = (data: ModelOfMatterParams) => AttrRef.value?.setFormData(data);
@@ -106,12 +106,12 @@
   const setEventsFormData = (data: ModelOfMatterParams) => EventsRef.value?.setFormData(data);
 
   const enums = {
-    [FunctionType.PROPERTIES]: setAttrFormData,
-    [FunctionType.SERVICE]: setServiceFormData,
-    [FunctionType.EVENTS]: setEventsFormData,
+    [FunctionTypeEnum.PROPERTIES]: setAttrFormData,
+    [FunctionTypeEnum.SERVICE]: setServiceFormData,
+    [FunctionTypeEnum.EVENTS]: setEventsFormData,
   };
 
-  function setFormData(type: FunctionType, value: ModelOfMatterParams) {
+  function setFormData(type: FunctionTypeEnum, value: ModelOfMatterParams) {
     const setFn = enums[type];
     setFn(value);
   }
@@ -147,7 +147,7 @@
     AttrRef.value?.resetFormData();
     ServiceRef.value?.resetFormData();
     EventsRef.value?.resetFormData();
-    activeKey.value = FunctionType.PROPERTIES;
+    activeKey.value = FunctionTypeEnum.PROPERTIES;
     if (flag) {
       closeModal();
     }
@@ -158,9 +158,9 @@
       setModalProps({ loading: false, okButtonProps: { loading: true } });
 
       let params: Partial<ModelOfMatterParams>;
-      if (activeKey.value == FunctionType.PROPERTIES) {
+      if (activeKey.value == FunctionTypeEnum.PROPERTIES) {
         params = (await AttrRef.value?.getFormData()) || {};
-      } else if (activeKey.value == FunctionType.SERVICE) {
+      } else if (activeKey.value == FunctionTypeEnum.SERVICE) {
         params = (await ServiceRef.value?.getFormData()) || {};
       } else {
         params = (await EventsRef.value?.getFormData()) || {};

@@ -24,7 +24,7 @@
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { Button } from 'ant-design-vue';
   import { getModelTsl } from '/@/api/device/modelOfMatter';
-  import { FunctionType } from './cpns/config';
+  import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
   import { isObject } from '/@/utils/is';
 
   defineEmits(['register']);
@@ -75,15 +75,15 @@
     return Promise.all([
       getModelTsl({
         deviceProfileId,
-        functionType: FunctionType.EVENTS,
+        functionType: FunctionTypeEnum.EVENTS,
       }),
       getModelTsl({
         deviceProfileId,
-        functionType: FunctionType.PROPERTIES,
+        functionType: FunctionTypeEnum.PROPERTIES,
       }),
       getModelTsl({
         deviceProfileId,
-        functionType: FunctionType.SERVICE,
+        functionType: FunctionTypeEnum.SERVICE,
       }),
     ]);
   };

@@ -6,7 +6,7 @@
     transfromToStructJSON,
     excludeIdInStructJSON,
   } from '/@/components/Form/src/components/StructForm/util';
-  import { FunctionType } from './config';
+  import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
   import { isArray } from 'lodash';
   import { OpenModelMode } from '../types';
   import { formSchemas } from '/@/components/Form/src/components/StructForm/config';
@@ -46,7 +46,7 @@
 
     const value = {
       functionName,
-      functionType: FunctionType.PROPERTIES,
+      functionType: FunctionTypeEnum.PROPERTIES,
       remark,
       identifier,
       accessMode,

@@ -3,7 +3,8 @@
 </template>
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
-  import { eventSchemas, FunctionType } from './config';
+  import { eventSchemas } from './config';
+  import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
   import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { StructFormValue } from '/@/components/Form/src/components/StructForm/type';
   import { excludeIdInStructJSON } from '/@/components/Form/src/components/StructForm/util';
@@ -57,7 +58,7 @@
       functionName,
       identifier,
       remark,
-      functionType: FunctionType.EVENTS,
+      functionType: FunctionTypeEnum.EVENTS,
       eventType,
       functionJson: {
         outputData,

@@ -4,7 +4,7 @@
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { FormField, serviceSchemas } from './config';
-  import { FunctionType } from './config';
+  import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
   import { StructFormValue } from '/@/components/Form/src/components/StructForm/type';
   import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
@@ -94,7 +94,7 @@
       functionName,
       identifier,
       remark,
-      functionType: FunctionType.SERVICE,
+      functionType: FunctionTypeEnum.SERVICE,
       callType,
       functionJson: {
         inputData,

@@ -9,9 +9,9 @@
     </div>
     <div>
       <Tabs type="card" v-model:active-key="activeKey" @change="handleSwitchTsl">
-        <Tabs.TabPane :key="FunctionType.PROPERTIES" tab="属性" />
-        <Tabs.TabPane :key="FunctionType.SERVICE" tab="服务" />
-        <Tabs.TabPane :key="FunctionType.EVENTS" tab="事件" />
+        <Tabs.TabPane :key="FunctionTypeEnum.PROPERTIES" tab="属性" />
+        <Tabs.TabPane :key="FunctionTypeEnum.SERVICE" tab="服务" />
+        <Tabs.TabPane :key="FunctionTypeEnum.EVENTS" tab="事件" />
         <template #tabBarExtraContent>
           <Button class="ml-2" @click="handleCopy">
             <template #icon>
@@ -38,7 +38,7 @@
   import { CopyOutlined } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Button, Typography, TypographyParagraph, Tabs, Spin, Input } from 'ant-design-vue';
-  import { FunctionType } from './config';
+  import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
   import useCommon from '../hook/useCommon';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { getModelTsl } from '/@/api/device/modelOfMatter';
@@ -56,7 +56,7 @@
 
   const jsonValue = ref();
 
-  const activeKey = ref(FunctionType.PROPERTIES);
+  const activeKey = ref(FunctionTypeEnum.PROPERTIES);
 
   const { copied, copy } = useClipboard({ legacy: true });
   const handleCopy = async () => {
@@ -81,7 +81,7 @@
     jsonValue.value = null;
   };
 
-  const handleSwitchTsl = async (functionType: FunctionType) => {
+  const handleSwitchTsl = async (functionType: FunctionTypeEnum) => {
     try {
       loading.value = true;
       const record = await getModelTsl({
@@ -102,8 +102,8 @@
   };
 
   onMounted(() => {
-    activeKey.value = FunctionType.PROPERTIES;
-    handleSwitchTsl(FunctionType.PROPERTIES);
+    activeKey.value = FunctionTypeEnum.PROPERTIES;
+    handleSwitchTsl(FunctionTypeEnum.PROPERTIES);
   });
 
   defineExpose({

@@ -33,17 +33,6 @@ export enum FormField {
   HAS_STRUCT_FROM = 'hasStructForm',
 }
 
-export enum FunctionType {
-  PROPERTIES = 'properties',
-  EVENTS = 'events',
-  SERVICE = 'services',
-}
-
-export enum AssessMode {
-  READ = 'r',
-  WRITE = 'w',
-}
-
 const isNumber = (type: string) => {
   return type === DataTypeEnum.NUMBER_INT || type === DataTypeEnum.NUMBER_DOUBLE;
 };

@@ -27,7 +27,7 @@ import { DeviceModelOfMatterAttrs, DeviceProfileModel } from '/@/api/device/mode
 import TriggerDurationInput from './TriggerDurationInput.vue';
 import { DataTypeEnum } from '/@/enums/objectModelEnum';
 import { getModelTsl } from '/@/api/device/modelOfMatter';
-import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+import { FunctionTypeEnum } from '/@/enums/objectModelEnum';
 import { GetModelTslParams } from '/@/api/device/model/modelOfMatterModel';
 import { FlipFlopComponentTypeEnum } from './types';
 import { OptionsType } from 'ant-design-vue/es/vc-select/interface';
@@ -405,7 +405,7 @@ export const getFormSchemas = (
           labelField: 'functionName',
           valueField: 'identifier',
           params: {
-            functionType: FunctionType.EVENTS,
+            functionType: FunctionTypeEnum.EVENTS,
             deviceProfileId: formModel[FormFieldEnum.DEVICE_PROFILE_ID],
           },
           placeholder: `请选择${FormFieldNameEnum.DEVICE_EVENT_TRIGGER_KEY}`,

@@ -37,5 +37,15 @@
 </script>
 
 <template>
-  <BasicForm @register="register" />
+  <BasicForm @register="register" class="data-board-source-form" />
 </template>
+
+<style lang="less" scoped>
+  .data-board-source-form {
+    :deep(.ant-form-item-control-input-content) {
+      > div > div {
+        width: 100%;
+      }
+    }
+  }
+</style>

@@ -197,8 +197,7 @@
         <label class="w-24 text-right pr-2">数据源{{ index + 1 }}</label>
         <component
           :ref="(event) => setDataSourceFormsEl(item.uuid, event, index)"
-          class="flex-1 bg-light-50 dark:bg-dark-400"
-          style="max-width: calc(100% - 216px)"
+          class="flex-1 bg-light-50 dark:bg-dark-400 data-board-source-form"
           :is="getComponent"
           :component-config="componentConfig"
           :values="item"
@@ -238,9 +237,11 @@
 </template>
 
 <style scoped lang="less">
-  :deep(#deviceId) {
-    div {
-      width: 100%;
+  .data-board-source-form {
+    :deep(.ant-form-item-control-input-content) {
+      > div > div {
+        width: 100%;
+      }
     }
   }
 </style>

 <script lang="ts" setup>
   import { computed } from 'vue';
-  import { PackagesCategoryEnum } from '../../../packages/index.type';
   import { SelectedWidgetKeys } from '../../index.type';
   import { Alert } from 'ant-design-vue';
 
@@ -9,10 +8,10 @@
   }>();
 
   const alert = {
-    [PackagesCategoryEnum.MAP]: [
-      '1、绑定数据源为结构体时，可以自行选择结构体里的属性作为经纬度',
-      '2、绑定数据源为非结构体时，第一数据源为经度，第二数据源为纬度，且数据源为同一设备，并同时上报。否则地图组件不能正常显示。',
-    ],
+    // [PackagesCategoryEnum.MAP]: [
+    //   '1、绑定数据源为结构体时，可以自行选择结构体里的属性作为经纬度',
+    //   '2、绑定数据源为非结构体时，第一数据源为经度，第二数据源为纬度，且数据源为同一设备，并同时上报。否则地图组件不能正常显示。',
+    // ],
   };
 
   const getMessage = computed(() => {

 <script lang="ts" setup>
-  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { Spin } from 'ant-design-vue';
   import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
-  import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
-  import { getSendValues } from '../config';
   import { useModal } from '/@/components/Modal';
   import PasswordModal from '../component/PasswordModal.vue';
+  import { useCommandDelivery } from '../../../hook/useCommandDelivery';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -20,48 +20,31 @@
 
   const currentValue = ref(false);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const {
-      attribute,
-      attributeRename,
-      attributeName,
-      componentInfo,
-      commandType,
-      extensionDesc,
-      codeType,
-      deviceCode,
-      customCommand,
-    } = option;
+    const { attribute, attributeRename, componentInfo, commandType, deviceProfileId } = option;
 
     const { fontSize: persetFontSize, password: persetPassword } = persetOption || {};
     const { fontSize, password } = componentInfo || {};
+
+    const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
     return {
-      attribute: attributeRename || attributeName || attribute,
+      attribute: attributeRename || tsl?.functionName || attribute,
       fontSize: fontSize || persetFontSize || 14,
       password: password || persetPassword,
-      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
       commandType,
-      codeType,
-      deviceCode,
-      customCommand,
     };
   });
 
-  const { sendCommand, loading } = useSendCommand();
+  const { doCommandDeliver, loading } = useCommandDelivery();
 
-  const handleSendCommand = async (data) => {
-    const { control: event } = data || {};
-    const target = event.target as HTMLInputElement;
-    const value = !target.checked;
+  const handleSendCommand = async () => {
+    if (props.config.option.mode === ComponentMode.SELECT_PREVIEW) return;
     const { option } = props.config || {};
-
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(option, unref(getDesign), value)) || {};
-
-    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
-    if (flag) currentValue.value = value;
-    flag ? (currentValue.value = value) : (target.checked = !value);
+    const result = await doCommandDeliver(option, Number(!unref(currentValue)));
+    currentValue.value = result ? !unref(currentValue) : unref(currentValue);
   };
 
   const handleChange = async (event: Event) => {
@@ -74,16 +57,7 @@
       return;
     }
 
-    const target = event.target as HTMLInputElement;
-    const value = target.checked;
-    const { option } = props.config || {};
-
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(option, unref(getDesign), value)) || {};
-
-    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
-    if (flag) currentValue.value = value;
-    flag ? (currentValue.value = value) : (target.checked = !value);
+    handleSendCommand();
   };
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {

 <script lang="ts" setup>
-  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { SvgIcon } from '/@/components/Icon';
   import { Switch } from 'ant-design-vue';
   import { computed, ref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
-  import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
-  import { getSendValues } from '../config';
   import { useModal } from '/@/components/Modal';
   import PasswordModal from '../component/PasswordModal.vue';
+  import { useCommandDelivery } from '../../../hook/useCommandDelivery';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -20,19 +20,11 @@
 
   const checked = ref(false);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const {
-      componentInfo,
-      attribute,
-      attributeRename,
-      attributeName,
-      commandType,
-      extensionDesc,
-      codeType,
-      deviceCode,
-      customCommand,
-    } = option;
+    const { componentInfo, attribute, deviceProfileId, attributeRename, commandType } = option;
     const {
       icon: presetIcon,
       iconColor: presetIconColor,
@@ -41,21 +33,18 @@
     } = persetOption || {};
     const { icon, iconColor, fontSize, password } = componentInfo || {};
 
+    const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
     return {
       icon: icon ?? presetIcon,
       iconColor: iconColor || presetIconColor,
-      attribute: attributeRename || attributeName || attribute,
-      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      attribute: attributeRename || tsl?.functionName || attribute,
       fontSize: fontSize || persetFontSize || 14,
       password: password || persetPassword,
       commandType,
-      codeType,
-      deviceCode,
-      customCommand,
     };
   });
 
-  const { sendCommand, loading } = useSendCommand();
+  const { loading, doCommandDeliver } = useCommandDelivery();
 
   const handleChange = async () => {
     if (unref(getDesign).password) {
@@ -63,32 +52,14 @@
       checked.value = !unref(checked);
       return;
     }
-    const { option } = props.config || {};
-
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(option, unref(getDesign), unref(checked))) || {};
-
-    const flag = await sendCommand(
-      values,
-      isModbusCommand ? sendValue : unref(checked),
-      isModbusCommand
-    );
-    if (!flag) checked.value = !unref(checked);
+    handleSendCommand();
   };
 
   const handleSendCommand = async () => {
+    if (props.config.option.mode === ComponentMode.SELECT_PREVIEW) return;
     const { option } = props.config || {};
-    checked.value = !unref(checked);
-
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(option, unref(getDesign), unref(checked))) || {};
-
-    const flag = await sendCommand(
-      values,
-      isModbusCommand ? sendValue : unref(checked),
-      isModbusCommand
-    );
-    if (!flag) checked.value = !unref(checked);
+    const result = await doCommandDeliver(option, Number(unref(checked)));
+    if (!result) checked.value = !unref(checked);
   };
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {

 <script lang="ts" setup>
-  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { Spin } from 'ant-design-vue';
   import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
-  import { useSendCommand } from '../../../hook/useSendCommand';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
-  import { getSendValues } from '../config';
   import PasswordModal from '../component/PasswordModal.vue';
   import { useModal } from '/@/components/Modal';
+  import { useCommandDelivery } from '../../../hook/useCommandDelivery';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -20,34 +20,31 @@
 
   const currentValue = ref(false);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const {
-      attribute,
-      attributeRename,
-      attributeName,
-      commandType,
-      extensionDesc,
-      codeType,
-      deviceCode,
-      customCommand,
-      componentInfo,
-    } = option;
+    const { attribute, deviceProfileId, attributeRename, commandType, componentInfo } = option;
     const { fontSize: persetFontSize, password: persetPassword } = persetOption || {};
     const { fontSize, password } = componentInfo || {};
+
+    const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+
     return {
-      attribute: attributeRename || attributeName || attribute,
-      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
+      attribute: attributeRename || tsl?.functionName || attribute,
       password: password || persetPassword,
       commandType,
-      codeType,
-      deviceCode,
-      customCommand,
       fontSize: fontSize || persetFontSize || 14,
     };
   });
+  const { doCommandDeliver, loading } = useCommandDelivery();
 
-  const { loading, sendCommand } = useSendCommand();
+  const handleSendCommand = async () => {
+    if (props.config.option.mode === ComponentMode.SELECT_PREVIEW) return;
+    const { option } = props.config || {};
+    const result = await doCommandDeliver(option, Number(!unref(currentValue)));
+    currentValue.value = result ? !unref(currentValue) : unref(currentValue);
+  };
   const handleChange = async (event: Event) => {
     if (unref(getDesign).password) {
       const target = event.target as HTMLInputElement;
@@ -57,29 +54,7 @@
       openModal(true, { password: unref(getDesign).password, control: event });
       return;
     }
-
-    const target = event.target as HTMLInputElement;
-    const value = target.checked;
-    const { option } = props.config || {};
-
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(option, unref(getDesign), value)) || {};
-
-    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
-    flag ? (currentValue.value = value) : (target.checked = !value);
-  };
-
-  const handleSendCommand = async (data) => {
-    const { control: event } = data || {};
-    const target = event.target as HTMLInputElement;
-    const value = !target.checked;
-    const { option } = props.config || {};
-
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(option, unref(getDesign), value)) || {};
-
-    const flag = await sendCommand(values, isModbusCommand ? sendValue : value, isModbusCommand);
-    flag ? (currentValue.value = value) : (target.checked = !value);
+    handleSendCommand();
   };
 
   const updateFn: DataFetchUpdateFn = (message, attribute) => {

 <script lang="ts" setup>
-  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { Slider, Spin } from 'ant-design-vue';
   import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
-  import { useSendCommand } from '../../../hook/useSendCommand';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useDataFetch } from '../../../hook/socket/useSocket';
-  import { TaskTypeEnum } from '/@/views/task/center/config';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { SingleToHex } from '/@/views/device/list/cpns/tabs/ObjectModelCommandDeliveryModal/config';
-  import { genModbusCommand } from '/@/api/task';
   import PasswordModal from '../component/PasswordModal.vue';
   import { useModal } from '/@/components/Modal';
+  import { useCommandDelivery } from '../../../hook/useCommandDelivery';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
   const sliderValue = ref<number>(33);
-  const oldSliderValue = ref<number>(33);
-  const noSendValue = ref<number>(0);
-  const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null);
+  const sliderElRef = ref<InstanceType<typeof Slider>>();
 
-  const { loading, sendCommand } = useSendCommand();
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
 
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
-    const {
-      componentInfo,
-      attribute,
-      attributeRename,
-      attributeName,
-      commandType,
-      extensionDesc,
-      codeType,
-      deviceCode,
-      customCommand,
-    } = option;
+    const { componentInfo, attribute, deviceProfileId, attributeRename, commandType } = option;
+
     const {
       controlBarColor: persetControlBarColor,
       fonColor: persetFontColor,
@@ -50,6 +36,8 @@
       fontSize: persetFontSize,
       password: persetPassword,
     } = persetOption || {};
+
+    const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
     const {
       controlBarColor,
       password,
@@ -61,16 +49,12 @@
       fontSize,
     } = componentInfo || {};
     return {
-      attribute: attributeRename || attributeName || attribute,
+      attribute: attributeRename || tsl?.functionName || attribute,
       controlBarColor: controlBarColor ?? persetControlBarColor,
       fontColor: fontColor ?? persetFontColor,
       minNumber: minNumber ?? persetMinNumber,
       maxNumber: maxNumber ?? persetMaxNumber,
-      extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
       commandType,
-      codeType,
-      deviceCode,
-      customCommand,
       textColor: textColor || persetTextColor,
       valueSize: valueSize || persetValueSize || 20,
       fontSize: fontSize || persetFontSize || 14,
@@ -78,153 +62,28 @@
     };
   });
 
-  const index = ref<number>(0);
-  const afterValue = ref<number>(0); //点击Slider获取的值
-
-  const handleChange = async (e) => {
-    index.value++;
-    afterValue.value = e;
-    if (index.value == 1) {
-      oldSliderValue.value = unref(sliderValue);
-      return; //这个是因为设置了最大值时，当sliderValue的值大于最大值时只会显示设置的最大值，会执行一次change
-    }
-    sliderValue.value = e;
-  };
-
-  const handleAfterChange = async () => {
-    unref(sliderEl)?.blur();
-    if (unref(sliderValue) == unref(afterValue)) return;
-    if (unref(getDesign).password) return;
-    sliderValue.value = afterValue.value; //这一步是因为当我们是点击不是拖动时候，会让值更新不了，所以需要赋值一次
-  };
-
-  const { createMessage } = useMessage();
-
-  // 获取小数
-  const getFloatPart = (number: string | number) => {
-    const isLessZero = Number(number) < 0;
-    number = number.toString();
-    const floatPartStartIndex = number.indexOf('.');
-    const value = ~floatPartStartIndex
-      ? `${isLessZero ? '-' : ''}0.${number.substring(floatPartStartIndex + 1)}`
-      : '0';
-    return Number(value);
+  const sendValue = ref(0);
+  const handleChange = async (value: number) => {
+    sendValue.value = value;
   };
 
-  const getArray = (values) => {
-    const str = values.replace(/\s+/g, '');
-    const array: any = [];
+  const { loading, doCommandDeliver } = useCommandDelivery();
 
-    for (let i = 0; i < str.length; i += 4) {
-      const chunk = parseInt(str.substring(i, i + 4), 16);
-      array.push(chunk);
-    }
-    return array;
-  };
-
-  const getSendValue = async (value: number) => {
-    const { extensionDesc, codeType, deviceCode, customCommand } = unref(getDesign) || {};
-    const { transportType } = customCommand || {};
-    const { registerAddress, actionType, zoomFactor } = extensionDesc || {};
-    const newZoomValue = zoomFactor ? Number(zoomFactor) : 1;
-    if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
-      if (!deviceCode) {
-        createMessage.warning('当前设备没有设置地址码');
-        return;
-      }
-      const modbusForm = ref({
-        crc: 'CRC_16_LOWER',
-        deviceCode: deviceCode,
-        method: actionType == '16' ? '10' : actionType,
-        registerAddress,
-        registerNumber: 1,
-        registerValues: [value],
-      }) as any;
-      if (!actionType) {
-        createMessage.warning('当前物模型扩展描述没有填写');
-        return;
-      }
-      if (actionType == '06') {
-        const newValue = Math.trunc(value) * newZoomValue + getFloatPart(value) * newZoomValue;
-        if (newValue % 1 != 0) {
-          createMessage.warning(`值必须是整数,缩放因子为${unref(newZoomValue)}`);
-          return;
-        }
-
-        if (newValue > 65535) {
-          createMessage.warning(`值不能超过65535,缩放因子是${unref(newZoomValue)}`);
-          return;
-        }
-        modbusForm.value.registerValues = [newValue];
-      }
-      if (actionType == '05') {
-        if (Number(value) != 0 || Number(value) != 1) {
-          createMessage.warning(`当前物模型仅支持值为0和1`);
-          return;
-        }
-      }
-      if (actionType == '16' || actionType == '10') {
-        const regex = /^-?\d+(\.\d{0,2})?$/;
-        const values =
-          Math.trunc(value) * unref(newZoomValue) + getFloatPart(value) * unref(newZoomValue);
-        if (!regex.test(values as any)) {
-          createMessage.warning(`值精确到两位小数,缩放因子是${unref(newZoomValue)}`);
-          return;
-        }
-        const newValue = values == 0 ? [0, 0] : getArray(SingleToHex(values));
-        modbusForm.value.registerValues = newValue;
-        modbusForm.value.registerNumber = 2;
-        modbusForm.value.method = '10';
-      }
-      const sendValue = await genModbusCommand(unref(modbusForm));
-      return sendValue;
-    }
-  };
-
-  const handleBlur = async () => {
+  const handleAfterChange = () => {
     if (unref(getDesign).password) {
-      sliderValue.value = oldSliderValue.value;
-      openModal(true, { password: unref(getDesign).password, value: afterValue.value });
+      openModal(true, { password: unref(getDesign).password });
       return;
     }
-
-    if (unref(oldSliderValue) !== unref(sliderValue)) {
-      const { codeType, customCommand } = unref(getDesign) || {};
-      const { transportType } = customCommand || {};
-      const sendValue = ref<any>(unref(sliderValue));
-      const isModbusCommand = ref<boolean>(false);
-      if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
-        sendValue.value = await getSendValue(unref(sliderValue));
-        isModbusCommand.value = true;
-      }
-      const flag = await sendCommand(props.config.option, unref(sendValue), unref(isModbusCommand));
-      flag
-        ? ((sliderValue.value = unref(sliderValue)),
-          (oldSliderValue.value = sliderValue.value),
-          (index.value = 0))
-        : (sliderValue.value = unref(oldSliderValue));
-    }
+    handleSendCommand();
   };
 
-  const handleSendCommand = async (data) => {
-    const { value } = data || {};
-    sliderValue.value = value;
-    if (unref(oldSliderValue) !== unref(sliderValue)) {
-      const { codeType, customCommand } = unref(getDesign) || {};
-      const { transportType } = customCommand || {};
-      const sendValue = ref<any>(unref(sliderValue));
-      const isModbusCommand = ref<boolean>(false);
-      if (transportType == 'TCP' && codeType == TaskTypeEnum.MODBUS_RTU) {
-        sendValue.value = await getSendValue(unref(sliderValue));
-        isModbusCommand.value = true;
-      }
-      const flag = await sendCommand(props.config.option, unref(sendValue), unref(isModbusCommand));
-      flag
-        ? ((sliderValue.value = unref(sliderValue)),
-          (oldSliderValue.value = sliderValue.value),
-          (index.value = 0))
-        : (sliderValue.value = unref(oldSliderValue));
-    }
+  const handleSendCommand = async () => {
+    if (props.config.option.mode === ComponentMode.SELECT_PREVIEW) return;
+    const value = unref(sendValue);
+    const { option } = props.config || {};
+    const result = await doCommandDeliver(option, value);
+    unref(sliderElRef)?.blur();
+    sliderValue.value = result ? value : unref(sliderValue);
   };
 
   const { getNumberValue } = useReceiveValue();
@@ -233,7 +92,6 @@
     const [latest] = data[attribute] || [];
     const [name, value] = latest;
     if (!name && !value) return;
-    noSendValue.value = getNumberValue(value);
     sliderValue.value = getNumberValue(value);
   };
 
@@ -254,10 +112,11 @@
               fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
             }"
             class="font-bold text-xl mt-3 text-center"
-            >{{ sliderValue }}</span
           >
+            {{ sliderValue }}
+          </span>
           <Slider
-            ref="sliderEl"
+            ref="sliderElRef"
             :style="{
               '--slider-color': getDesign.controlBarColor,
               '--slider-handle': (getRatio ? getRatio * 14 : 14) + 'px',
@@ -270,7 +129,6 @@
             :max="getDesign.maxNumber"
             @change="handleChange"
             @afterChange="handleAfterChange"
-            @blur="handleBlur"
           />
 
           <span

@@ -8,6 +8,47 @@ import {
 } from '/@/views/visual/packages/index.type';
 import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
 import { ComponentConfigFieldEnum } from '../../../enum';
+import { buildUUID } from '/@/utils/uuid';
+
+export interface SwitchItemType extends Recordable {
+  id: string;
+  checked: boolean;
+  deviceId?: string;
+  deviceProfileId?: string;
+  attribute?: string;
+  deviceName?: string;
+  attributeName?: string;
+  openCommand?: string;
+  closeCommand?: string;
+  openService?: string;
+  closeService?: string;
+}
+
+export const DEFAULT_VALUE: SwitchItemType[] = [
+  {
+    deviceName: '光照设备',
+    attributeName: '光照',
+    icon: 'zongfushe',
+    unit: 'kw',
+    iconColor: '#367BFF',
+    fontColor: '#357CFB',
+    checked: false,
+    fontSize: 16,
+    id: buildUUID(),
+  },
+  {
+    value: 53.7,
+    deviceName: '风机设备',
+    attributeName: '风机',
+    icon: 'guangzhaoqiangdu',
+    unit: '℃',
+    iconColor: '#FFA000',
+    fontColor: '#FFA000',
+    checked: true,
+    fontSize: 16,
+    id: buildUUID(),
+  },
+];
 
 export const option: PublicPresetOptions = {
   multipleDataSourceComponent: true,

 <script lang="ts" setup>
-  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
-  import { option } from './config';
+  import { ComponentMode, ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { DEFAULT_VALUE, option, SwitchItemType } from './config';
   import { SvgIcon } from '/@/components/Icon';
   import { Switch } from 'ant-design-vue';
-  import { computed, ref } from 'vue';
+  import { computed, ref, toRaw } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
-  import { useSendCommand } from '../../../hook/useSendCommand';
   import { unref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { useReceiveValue } from '../../../hook/useReceiveValue';
-  import { DataSource } from '/@/views/visual/palette/types';
-  import { getSendValues, CommandTypeEnumLIst } from '../config';
   import { useModal } from '/@/components/Modal';
   import PasswordModal from '../component/PasswordModal.vue';
+  import {
+    DoCommandDeliverDataSourceType,
+    useCommandDelivery,
+  } from '../../../hook/useCommandDelivery';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const svgList = ref<any>([
-    {
-      value: 26.2,
-      deviceName: '光照设备',
-      attributeName: '光照',
-      icon: 'zongfushe',
-      unit: 'kw',
-      iconColor: '#367BFF',
-      fontColor: '#357CFB',
-      checked: false,
-      id: 0,
-    },
-    {
-      value: 53.7,
-      deviceName: '风机设备',
-      attributeName: '风机',
-      icon: 'guangzhaoqiangdu',
-      unit: '℃',
-      iconColor: '#FFA000',
-      fontColor: '#FFA000',
-      checked: true,
-      id: 1,
-    },
-  ]);
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
 
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
@@ -64,90 +43,66 @@
         const {
           attribute,
           attributeRename,
-          attributeName,
           deviceId,
           deviceName,
           deviceRename,
           commandType,
-          extensionDesc,
-          codeType,
-          deviceCode,
-          customCommand,
+          deviceProfileId,
+          openCommand,
+          closeCommand,
+          openService,
+          closeService,
         } = item;
+
+        const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+
         return {
           unit: unit ?? persetUnit,
+          deviceProfileId,
+          deviceId,
           fontColor: fontColor ?? persetFontColor,
           icon: icon ?? persetIcon,
           iconColor: iconColor ?? persetIconColor,
           attribute: attribute,
-          attributeName: attributeRename || attributeName,
+          attributeName: attributeRename || tsl?.functionName || attribute,
           showDeviceName,
           deviceName: deviceRename || deviceName,
           id: deviceId,
-          extensionDesc: extensionDesc ? JSON.parse(extensionDesc) : {},
           commandType,
-          codeType,
-          deviceCode,
-          customCommand,
           fontSize: fontSize || persetFontSize || 14,
           password: password || persetPassword,
-        };
+          checked: false,
+          openCommand,
+          closeCommand,
+          openService,
+          closeService,
+        } as SwitchItemType;
       }),
     };
   });
 
-  const { loading, sendCommand } = useSendCommand();
-  const handleChange = async (index: number, checked: Boolean, item: any) => {
+  const handleChange = async (item) => {
     if (item.password) {
-      openModal(true, { password: item.password, index, checked });
-      controlList.value[index].checked = !checked;
+      openModal(true, { password: item.password });
       return;
     }
-    const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
-      props.config.option;
-    const data = {
-      ...dataSource?.[index],
-      heightPx,
-      itemHeightRatio,
-      itemWidthRatio,
-      mode,
-      widthPx,
-    } as DataSource;
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(data, unref(getDesign).dataSource[index], checked)) || {};
-
-    const flag = await sendCommand(values, isModbusCommand ? sendValue : checked, isModbusCommand);
-    if (!flag) controlList.value[index].checked = !checked;
+    handleSendCommand(item);
   };
 
   const { forEachGroupMessage } = useReceiveMessage();
   const { getNumberValue } = useReceiveValue();
 
   const controlList = ref(
-    props.config.option.dataSource
-      ? unref(getDesign).dataSource.map((item) => {
-          return { ...item, checked: false };
-        })
-      : svgList
+    props.config.option.dataSource ? unref(getDesign).dataSource : DEFAULT_VALUE
   );
-  const handleSendCommand = async (modalData) => {
-    const { index, checked } = modalData || {};
-    const { heightPx, itemHeightRatio, itemWidthRatio, mode, widthPx, dataSource } =
-      props.config.option;
-    const data = {
-      ...dataSource?.[index],
-      heightPx,
-      itemHeightRatio,
-      itemWidthRatio,
-      mode,
-      widthPx,
-    } as DataSource;
-    controlList.value[index].checked = checked;
-    const { values, isModbusCommand, sendValue } =
-      (await getSendValues(data, unref(getDesign).dataSource[index], checked)) || {};
 
-    const flag = await sendCommand(values, isModbusCommand ? sendValue : checked, isModbusCommand);
-    if (!flag) controlList.value[index].checked = !checked;
+  const { loading, doCommandDeliver } = useCommandDelivery();
+  const handleSendCommand = async (modalData: SwitchItemType) => {
+    if (props.config.option.mode === ComponentMode.SELECT_PREVIEW) return;
+    await doCommandDeliver(
+      toRaw(unref(modalData)) as DoCommandDeliverDataSourceType,
+      Number(unref(modalData).checked)
+    );
   };
 
   const updateFn: MultipleDataFetchUpdateFn = async (message, deviceId, attribute) => {
@@ -169,34 +124,26 @@
   <main class="w-full h-full flex flex-col justify-evenly items-center">
     <DeviceName :config="config" />
     <div
-      style="width: 86%"
-      v-for="(item, index) in controlList"
+      v-for="item in controlList"
       :key="item.id"
-      class="flex justify-between items-center"
+      class="flex justify-between items-center w-full px-4"
     >
-      <div class="flex items-center">
-        <SvgIcon
-          :name="item.icon!"
-          prefix="iconfont"
-          :size="getRatio ? 30 * getRatio : 30"
-          :style="{ color: item.iconColor }"
-        />
-
-        <div
-          class="text-gray-500 truncate ml-6"
-          :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
-          >{{
-            `${item.deviceName} - ${
-              item.commandType ? CommandTypeEnumLIst[item.commandType].name : item.attributeName
-            }`
-          }}</div
-        >
+      <SvgIcon
+        :name="item.icon!"
+        prefix="iconfont"
+        :size="getRatio ? 30 * getRatio : 30"
+        :style="{ color: item.iconColor }"
+      />
+      <div
+        class="text-gray-500 truncate mx-2"
+        :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
+      >
+        {{ `${item.deviceName} - ${item.attributeName}` }}
       </div>
-
       <Switch
         v-model:checked="item.checked"
         :loading="loading"
-        @change="handleChange(index, item.checked, item)"
+        @change="handleChange(item)"
         :style="{ transform: `scale(${getRatio || 1})` }"
       />
     </div>

-import { ref, unref } from 'vue';
-import { TaskTypeEnum } from '/@/views/task/center/config';
-import { genModbusCommand } from '/@/api/task';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { SingleToHex } from '/@/views/device/list/cpns/tabs/ObjectModelCommandDeliveryModal/config';
-import { CommandTypeEnum } from '/@/enums/deviceEnum';
-import { TransportTypeEnum } from '/@/enums/deviceEnum';
-
-const getArray = (values) => {
-  const str = values.replace(/\s+/g, '');
-  const array: any = [];
-
-  for (let i = 0; i < str.length; i += 4) {
-    const chunk = parseInt(str.substring(i, i + 4), 16);
-    array.push(chunk);
-  }
-  return array;
-};
-
-export const getSendValues = async (option, getDesign, checked) => {
-  const values: any = option;
-  const isModbusCommand = ref<boolean>(false); //判断是否是TCP设备-> 且设备标识符是modeBUs，切选择是下发命令类型是属性
-  const { extensionDesc, commandType, codeType, deviceCode, customCommand } = getDesign || {};
-  const { registerAddress, actionType } = extensionDesc || {};
-  const { openCommand, closeCommand, transportType } = customCommand || {};
-  const modBUS = ref<any>({});
-  const sendValue = ref();
-
-  const { createMessage } = useMessage();
-  //判断是不是TCP类型设备
-  if (transportType === TransportTypeEnum.TCP) {
-    if (
-      //判断TCP下发类型是否是自定义还是服务
-      commandType === CommandTypeEnum.CUSTOM.toString() ||
-      commandType == CommandTypeEnum.SERVICE.toString()
-    ) {
-      values.customCommand.command = checked ? openCommand : closeCommand;
-      values.customCommand.command = values.customCommand.command
-        .replaceAll(/\s/g, '')
-        .toUpperCase();
-    }
-    if (
-      //判断命令下发类型是不是属性 且是modbus
-      commandType === CommandTypeEnum.ATTRIBUTE.toString() &&
-      codeType === TaskTypeEnum.MODBUS_RTU
-    ) {
-      if (!deviceCode) {
-        createMessage.warning('当前设备没有设置地址码');
-        return;
-      }
-      if (!actionType) {
-        createMessage.warning('当前物模型扩展描述没有填写');
-        return;
-      }
-      isModbusCommand.value = true;
-      modBUS.value = {
-        crc: 'CRC_16_LOWER',
-        deviceCode: deviceCode,
-        method: actionType == '16' ? '10' : actionType,
-        registerAddress,
-        registerNumber: 1,
-        registerValues: [Number(checked)],
-      };
-
-      if (actionType == '16' || actionType == '10') {
-        const newValue = Number(checked) == 0 ? [0, 0] : getArray(SingleToHex(Number(checked)));
-        modBUS.value.registerValues = newValue;
-        modBUS.value.registerNumber = 2;
-        modBUS.value.method = '10';
-      }
-
-      sendValue.value = await genModbusCommand(unref(modBUS));
-    }
-  }
-
-  return { values, sendValue: unref(sendValue), isModbusCommand: unref(isModbusCommand) };
-};
-
-export const CommandTypeEnumLIst = {
-  '0': { CUSTOM: 0, name: '自定义' },
-  '1': { CUSTOM: 1, name: '服务' },
-  '2': { CUSTOM: 2, name: '属性' },
-};

@@ -11,3 +11,7 @@ export const ControlList = [
   LateralNumericalControlConfig,
   SwitchListConfig,
 ];
+
+export enum ControlComponentEnum {
+  LATERAL_NUMERICAL_CONTROL = 'LateralNumericalControl',
+}

@@ -3,11 +3,15 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { formSchema, getHistorySearchParams, SchemaFiled } from './history.config';
   import { HistoryModalOkEmitParams } from './type';
-  import { ref, unref } from 'vue';
+  import { computed, ref, unref } from 'vue';
   import { getAllDeviceByOrg } from '/@/api/dataBoard';
   import { getDeviceHistoryInfo } from '/@/api/alarm/position';
   import { DataSource } from '/@/views/visual/palette/types';
-  import { cloneDeep } from 'lodash-es';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
+  import { DataTypeEnum } from '/@/enums/objectModelEnum';
+  import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
+  import { HistoryData } from '/@/api/alarm/position/model';
+  import { useJsonParse } from '/@/hooks/business/useJsonParse';
 
   const emit = defineEmits(['register', 'ok']);
 
@@ -20,47 +24,44 @@
   });
 
   const loading = ref(false);
-  const getDesign = ref();
+  const dataSourceRef = ref<DataSource[]>([]);
 
-  const getTwoMap = async (dataSource) => {
-    if (dataSource.length < 2) return;
-    dataSource = dataSource.splice(0, 2);
-    const deviceRecord = dataSource?.at(0) || ({} as DataSource);
+  const getPositionRecord = computed<DataSource>(() => unref(dataSourceRef).at(0) as DataSource);
+
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
+  const handleSetForm = async () => {
+    const deviceRecord = unref(getPositionRecord) || {};
 
     if (!deviceRecord.organizationId) return;
     const deviceList = await getAllDeviceByOrg(
       deviceRecord.organizationId,
       deviceRecord.deviceProfileId
     );
+
     const options = deviceList
       .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
       .map((item) => ({ ...item, label: item.alias || item.name, value: item.tbDeviceId }));
 
-    const attKey = dataSource.map((item) => ({
-      ...item,
-      label: item.attribute,
-      value: item.attribute,
-    }));
+    const { latitudeIdentifier, longitudeIdentifier, deviceProfileId } = deviceRecord;
 
-    updateSchemaMap(options, attKey, deviceRecord);
-  };
+    const attKey = [latitudeIdentifier, longitudeIdentifier].map((item) => {
+      const [identifier, structIdentifier] = item || [];
+      const detail = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, identifier);
 
-  const getOneMap = async (dataSource) => {
-    const deviceRecord = dataSource?.[0];
-    if (!deviceRecord.organizationId) return;
-    const deviceList = await getAllDeviceByOrg(
-      deviceRecord.organizationId,
-      deviceRecord.deviceProfileId
-    );
-    const options = deviceList
-      .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
-      .map((item) => ({ ...item, label: item.alias || item.name, value: item.tbDeviceId }));
+      if (detail?.specs?.dataType.type === DataTypeEnum.STRUCT) {
+        const structIdentifierDetail = (detail.specs.dataType.specs as StructJSON[])?.find(
+          (temp) => temp.identifier === structIdentifier
+        );
+        return {
+          label: `${detail.functionName} / ${structIdentifierDetail?.functionName}`,
+          value: identifier,
+        };
+      }
+
+      return { label: detail?.functionName, value: identifier };
+    });
 
-    const attKey = dataSource?.map((item) => ({
-      ...item,
-      label: item.attributeName,
-      value: item.attribute,
-    }));
     updateSchemaMap(options, attKey, deviceRecord);
   };
 
@@ -92,81 +93,73 @@
 
   const [registerModal, { closeModal }] = useModalInner(async (dataSource: DataSource[]) => {
     try {
-      getDesign.value = dataSource;
-      dataSource = cloneDeep(dataSource);
-      //判断选择是不是结构体
-      if (dataSource.length == 1 && dataSource?.[0]?.lal) {
-        getOneMap(dataSource);
-        return;
-      }
-      getTwoMap(dataSource);
+      dataSourceRef.value = dataSource;
+      handleSetForm();
     } catch (error) {
       throw error;
     }
   });
 
-  const getMultipleDataSource = async (res) => {
+  const getPositionDataSource = async (res: HistoryData) => {
+    const keys = Object.keys(res);
+    const track: Record<'lng' | 'lat', number>[] = [];
+
+    const {
+      latitudeIdentifier = [],
+      longitudeIdentifier = [],
+      deviceProfileId,
+    } = unref(getPositionRecord);
+
+    const [latIdentifier] = latitudeIdentifier || [];
+    const [lngIdentifier] = longitudeIdentifier || [];
+
+    if (!latIdentifier || !lngIdentifier) return track;
+
+    const latDetail = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, latIdentifier);
+    const lngDetail = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, lngIdentifier);
+
+    if (!latDetail || !lngDetail) return track;
+
     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 position of [longitudeIdentifier, latitudeIdentifier]) {
+      const [attribute] = position;
+      const detail = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+      if (!detail) continue;
+      const { identifier } = detail || {};
+
+      if (detail?.specs?.dataType.type === DataTypeEnum.STRUCT) {
+        const [, structIdentifier] = position;
+        res[identifier].forEach((temp) => {
+          const structJSON = useJsonParse(temp.value).value;
+          temp.value = structJSON?.[structIdentifier];
+        });
+      }
+    }
 
     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);
-        if (!validEffective(record?.value)) {
-          continue;
-        }
         list.push(record as any);
       }
 
       if (list.length === 2 && list.every(Boolean)) {
-        const lng = list.at(0)?.value;
-        const lat = list.at(1)?.value;
-        if (lng && lat) track.push({ lng, lat });
+        let lng = list.at(0)?.value;
+        let lat = list.at(1)?.value;
+        if (lng && lat) {
+          track.push({ lng: Number(lng), lat: Number(lat) });
+        }
       }
     }
-    return track;
-  };
-
-  // 单数据源选择结构体
-  const getSingleDataSource = async (res) => {
-    const [keys] = Object.keys(res);
-    const track: Record<'lng' | 'lat', number>[] = [];
-    const dataSource = res[keys]?.map((item) => {
-      return {
-        value: item.value ? JSON.parse(item.value) : {},
-      };
-    });
-    const list: { value: number }[] = [];
-    dataSource?.forEach((item) => {
-      if (
-        //判断结构体得值是不是数字
-        Object.values(item.value).every((item1) => {
-          return validEffective(item1 as any);
-        })
-      ) {
-        list.push(item.value);
-      }
-    });
-    const { latitude, longitude } = unref(getDesign)?.[0]; //获取选择的经纬度选项
 
-    list.forEach((item) => {
-      const lng = item[longitude];
-      const lat = item[latitude];
-      if (lng && lat) track.push({ lng, lat });
-    });
     return track;
   };
 
-  const validEffective = (value = '') => {
-    return !!(value && !isNaN(value as unknown as number));
-  };
   const handleOk = async () => {
     try {
       await validate();
@@ -180,9 +173,8 @@
         ...value,
         [SchemaFiled.KEYS]: value[SchemaFiled.KEYS].join(','),
       });
-      const ifSingle = unref(getDesign)?.length === 1 && unref(getDesign)?.[0]?.lal;
 
-      const track = ifSingle ? await getSingleDataSource(res) : await getMultipleDataSource(res);
+      const track = await getPositionDataSource(res);
       emit('ok', { track, value } as HistoryModalOkEmitParams);
       closeModal();
     } catch (error) {

+import { CategoryEnum } from '../..';
 import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
 import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
 
@@ -6,5 +7,6 @@ const componentKeys = useComponentKeys('MapComponentTrackHistory');
 export const MapComponentTrackHistoryConfig: ConfigType = {
   ...componentKeys,
   title: '历史轨迹',
+  category: CategoryEnum.MAP,
   package: PackagesCategoryEnum.MAP,
 };

@@ -50,6 +50,7 @@
       endTs,
       formatType
     )}`;
+
     genTrackPlaybackAnimation(track as any[]);
   };
 

+import { CategoryEnum } from '../..';
 import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
 import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
 
@@ -6,5 +7,6 @@ const componentKeys = useComponentKeys('MapComponentTrackReal');
 export const MapComponentTrackRealConfig: ConfigType = {
   ...componentKeys,
   title: '实时轨迹',
+  category: CategoryEnum.MAP,
   package: PackagesCategoryEnum.MAP,
 };

@@ -9,6 +9,7 @@
   import { useMapTrackPlayBack } from './useMapTrackPlayback';
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import get from 'lodash-es/get';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -24,44 +25,36 @@
     return props.config.option.dataSource?.at(0)?.deviceId;
   });
 
-  const getDesign = computed(() => {
-    const { option } = props.config;
-    const { dataSource } = option || {};
-    return {
-      dataSource: dataSource,
-    };
-  });
-
   /**
    * @description 经度key
    */
   const getLngKey = computed(() => {
-    return props.config.option.dataSource?.at(0)?.attribute || '';
+    return props.config.option.dataSource?.at(0)?.longitudeIdentifier || [];
   });
 
   /**
    * @description 纬度key
    */
   const getLatKey = computed(() => {
-    return props.config.option.dataSource?.at(1)?.attribute || '';
+    return props.config.option.dataSource?.at(0)?.latitudeIdentifier || [];
   });
 
   const validEffective = (value = '') => {
     return !!(value && !isNaN(value as unknown as number));
   };
 
-  const getTwoMap = (message, deviceId) => {
+  const handleMessage = (message, deviceId) => {
     if (unref(getDeviceId) !== deviceId) return;
 
     const { data = {} } = message;
 
     const bindMessage = data[deviceId];
 
-    const lngData = bindMessage[unref(getLngKey)] || [];
+    const lngData = get(bindMessage, unref(getLngKey)) || [];
     const [lngLatest] = lngData;
     const [, lng] = lngLatest || [];
 
-    const latData = bindMessage[unref(getLatKey)] || [];
+    const latData = get(bindMessage, unref(getLatKey)) || [];
     const [latLatest] = latData;
     const [, lat] = latLatest || [];
 
@@ -70,32 +63,8 @@
     }
   };
 
-  const getOneMap = (message, deviceId) => {
-    if (unref(getDeviceId) !== deviceId) return;
-
-    const { longitude, latitude, attribute } = unref(getDesign)?.dataSource?.[0] || {};
-    const { data } = message || {};
-    const bindMessage = data[deviceId];
-    const [, values] = attribute && bindMessage?.[attribute][0];
-
-    const mapValues = values ? JSON.parse(values) : {};
-    const lng = longitude && mapValues[longitude];
-    const lat = latitude && mapValues[latitude];
-
-    if (validEffective(lng) && validEffective(lat)) {
-      drawLine({ lng: Number(lng), lat: Number(lat) });
-    }
-  };
-
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId) => {
-    const { lal } = unref(getDesign)?.dataSource?.[0] || {};
-    // 属性选择结构体类型时
-    if (lal && unref(getDesign)?.dataSource?.length == 1) {
-      getOneMap(message, deviceId);
-      return;
-    }
-    // 选择两个属性时
-    getTwoMap(message, deviceId);
+    handleMessage(message, deviceId);
   };
 
   useMultipleDataFetch(props, updateFn);

-import cloneDeep from 'lodash-es/cloneDeep';
-import { SwitchSignalLightConfig } from '.';
-import {
-  ConfigType,
-  CreateComponentType,
-  PublicComponentOptions,
-  PublicPresetOptions,
-} from '/@/views/visual/packages/index.type';
-import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
-import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
-
-export const option: PublicPresetOptions = {
-  [ComponentConfigFieldEnum.OPEN_COLOR]: '#30f230',
-  [ComponentConfigFieldEnum.CLOSE_COLOR]: '#eeeeee',
-  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: true,
-};
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key: string = SwitchSignalLightConfig.key;
-
-  public attr = { ...componentInitConfig };
-
-  public componentConfig: ConfigType = cloneDeep(SwitchSignalLightConfig);
-
-  public persetOption = cloneDeep(option);
-
-  public option: PublicComponentOptions;
-
-  constructor(option: PublicComponentOptions) {
-    super();
-    this.option = { ...option };
-  }
-}

-<script lang="ts" setup>
-  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
-  import { useForm, BasicForm } from '/@/components/Form';
-  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
-  import { option } from './config';
-
-  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
-    schemas: [
-      {
-        field: ComponentConfigFieldEnum.OPEN_COLOR,
-        label: 'ON颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        componentProps: {
-          defaultValue: option.openColor,
-        },
-      },
-      {
-        field: ComponentConfigFieldEnum.CLOSE_COLOR,
-        label: 'OFF颜色',
-        component: 'ColorPicker',
-        changeEvent: 'update:value',
-        componentProps: {
-          defaultValue: option.closeColor,
-        },
-      },
-      {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
-    ],
-    showActionButtonGroup: false,
-    labelWidth: 120,
-    baseColProps: {
-      span: 12,
-    },
-  });
-
-  const getFormValues = () => {
-    return getFieldsValue();
-  };
-
-  const setFormValues = (data: Recordable) => {
-    return setFieldsValue(data);
-  };
-
-  defineExpose({
-    getFormValues,
-    setFormValues,
-    resetFormValues: resetFields,
-  } as PublicFormInstaceType);
-</script>
-
-<template>
-  <BasicForm @register="register" />
-</template>

-<script lang="ts" setup>
-  import { commonDataSourceSchemas } from '../../../config/common.config';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
-
-  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
-    labelWidth: 0,
-    showActionButtonGroup: false,
-    layout: 'horizontal',
-    labelCol: { span: 0 },
-    schemas: commonDataSourceSchemas(),
-  });
-
-  const getFormValues = () => {
-    return getFieldsValue();
-  };
-
-  const setFormValues = (record: Recordable) => {
-    return setFieldsValue(record);
-  };
-
-  defineExpose({
-    getFormValues,
-    setFormValues,
-    validate,
-    resetFormValues: resetFields,
-  } as PublicFormInstaceType);
-</script>
-
-<template>
-  <BasicForm @register="register" />
-</template>

-// import { ComponentEnum, ComponentNameEnum } from '../index.type';
-import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
-import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
-
-const componentKeys = useComponentKeys('SwitchSignalLight');
-export const SwitchSignalLightConfig: ConfigType = {
-  ...componentKeys,
-  // title: ComponentNameEnum.TEXT_COMPONENT_1,
-  title: '开关量信号灯',
-  package: PackagesCategoryEnum.TEXT,
-};

-<script lang="ts" setup>
-  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
-  import { option } from './config';
-  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { ref, onMounted, unref } from 'vue';
-  import { useIntervalFn } from '@vueuse/core';
-  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
-  import { useReceiveValue } from '../../../hook/useReceiveValue';
-  import { useDataFetch } from '../../../hook/socket/useSocket';
-  import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
-
-  const props = defineProps<{
-    config: ComponentPropsConfigType<typeof option>;
-  }>();
-
-  const isOpenClose = ref<boolean>(true);
-
-  const randomFn = () => {
-    useIntervalFn(() => {
-      isOpenClose.value = !unref(isOpenClose);
-    }, 2000);
-  };
-  const { getNumberValue } = useReceiveValue();
-  const updateFn: DataFetchUpdateFn = (message, attribute) => {
-    const { data = {} } = message;
-    const [latest] = data[attribute] || [];
-    const [_, value] = latest;
-    isOpenClose.value = Boolean(getNumberValue(value));
-  };
-
-  onMounted(() => {
-    !props.config.option.uuid && randomFn();
-  });
-
-  useDataFetch(props, updateFn);
-
-  const { getScale } = useComponentScale(props);
-</script>
-
-<template>
-  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
-    <DeviceName :config="config" class="text-center" />
-    <div
-      style="--open-color: `${getDesign.openColor}`; --close-color: `${getDesign.closeColor}`"
-      :class="isOpenClose ? 'switch_open' : 'switch_close'"
-    >
-    </div>
-  </main>
-</template>
-<style lang="less" scoped>
-  .switch_open {
-    background: var(--open-color);
-    box-shadow: var(--open-color) 0 0 10px 3px;
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    margin: 10px 0;
-  }
-
-  .switch_close {
-    background-color: var(--close-color);
-    box-shadow: none;
-    width: 42.023px;
-    height: 42.023px;
-    border-radius: 50%;
-    margin: 10px 0;
-  }
-</style>

@@ -2,11 +2,13 @@
   import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { computed } from 'vue';
+  import { computed, unref } from 'vue';
   import { ref } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
+  import { useThingsModelValueTransform } from '/@/views/visual/palette/hooks/useThingsModelValueTransform';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -14,6 +16,15 @@
 
   const currentValue = ref<string | number>(123);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
+  const getThingModelTsl = computed(() => {
+    const { option } = props.config;
+
+    const { deviceProfileId, attribute } = option;
+    return getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+  });
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
 
@@ -23,14 +34,14 @@
       valueSize: persetValueSize,
     } = persetOption;
 
-    const { componentInfo, attribute, attributeRename, attributeName } = option;
+    const { componentInfo, attribute, attributeRename } = option;
 
     const { fontColor, fontSize, valueSize } = componentInfo || {};
     return {
       fontColor: fontColor || persetFontColor,
       fontSize: fontSize || persetFontSize || 14,
       valueSize: valueSize || persetValueSize || 20,
-      attribute: attributeRename || attributeName || attribute,
+      attribute: attributeRename || unref(getThingModelTsl)?.functionName || attribute,
     };
   });
 
@@ -39,7 +50,10 @@
     const [latest] = data[attribute] || [];
     if (!latest.length) return;
     const [_, value] = latest;
-    currentValue.value = value;
+    currentValue.value = useThingsModelValueTransform(
+      value,
+      unref(getThingModelTsl)?.specs?.dataType
+    );
   };
 
   useDataFetch(props, updateFn);
@@ -52,7 +66,7 @@
     <DeviceName :config="config" />
 
     <h1
-      class="my-4 font-bold !my-2 truncate"
+      class="my-4 font-bold !my-2 truncate w-full text-center"
       :style="{
         color: getDesign.fontColor,
         fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',
@@ -63,10 +77,8 @@
     <div
       class="text-gray-500 truncate"
       :style="{ fontSize: (getRatio ? getRatio * getDesign.fontSize : getDesign.fontSize) + 'px' }"
-      >{{ getDesign.attribute || '温度' }}</div
     >
-    <!-- <div v-if="config.option.componentInfo.showDeviceName">
-      {{ config.option.deviceRename || config.option.deviceName }}
-    </div> -->
+      {{ getDesign.attribute || '温度' }}
+    </div>
   </main>
 </template>

@@ -2,12 +2,14 @@
   import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { computed } from 'vue';
+  import { computed, unref } from 'vue';
   import { ref } from 'vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
+  import { useThingsModelValueTransform } from '/@/views/visual/palette/hooks/useThingsModelValueTransform';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -16,6 +18,15 @@
   const currentValue = ref<string | number>(123);
   const time = ref<Nullable<number>>(null);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
+  const getThingModelTsl = computed(() => {
+    const { option } = props.config;
+
+    const { deviceProfileId, attribute } = option;
+    return getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+  });
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
 
@@ -25,7 +36,7 @@
       fontSize: persetFontSize,
     } = persetOption;
 
-    const { componentInfo, attribute, attributeName, attributeRename } = option;
+    const { componentInfo, attribute, attributeRename } = option;
 
     const { fontColor, valueSize, fontSize } = componentInfo || {};
 
@@ -33,7 +44,7 @@
       fontColor: fontColor || persetFontColor,
       valueSize: valueSize || persetValueSize || 20,
       fontSize: fontSize || persetFontSize || 14,
-      attribute: attributeRename || attributeName || attribute,
+      attribute: attributeRename || unref(getThingModelTsl)?.functionName || attribute,
     };
   });
 
@@ -42,7 +53,10 @@
     const [info] = data[attribute] || [];
     if (!info.length) return;
     const [timespan, value] = info;
-    currentValue.value = value;
+    currentValue.value = useThingsModelValueTransform(
+      value,
+      unref(getThingModelTsl)?.specs?.dataType
+    );
     time.value = timespan;
   };
 
@@ -54,9 +68,9 @@
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
-    <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
+    <div class="flex-1 flex justify-center items-center flex-col w-full" :style="getScale">
       <h1
-        class="my-4 font-bold !my-2 truncate"
+        class="my-4 font-bold !my-2 truncate w-full text-center"
         :style="{
           color: getDesign.fontColor,
           fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',

@@ -2,13 +2,15 @@
   import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { ref } from 'vue';
+  import { ref, unref } from 'vue';
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { SvgIcon } from '/@/components/Icon';
   import { computed } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useThingsModelValueTransform } from '/@/views/visual/palette/hooks/useThingsModelValueTransform';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -18,6 +20,15 @@
 
   const time = ref<Nullable<number>>(null);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
+  const getThingModelTsl = computed(() => {
+    const { option } = props.config;
+
+    const { deviceProfileId, attribute } = option;
+    return getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+  });
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
 
@@ -49,7 +60,10 @@
     const [latest] = data[attribute] || [];
     if (!latest.length) return;
     const [timespan, value] = latest;
-    currentValue.value = value;
+    currentValue.value = useThingsModelValueTransform(
+      value,
+      unref(getThingModelTsl)?.specs?.dataType
+    );
     time.value = timespan;
   };
 
@@ -61,7 +75,7 @@
 <template>
   <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
-    <div class="flex-1 flex justify-center items-center flex-col">
+    <div class="flex-1 flex justify-center items-center flex-col w-full">
       <SvgIcon
         :name="getDesign.icon!"
         prefix="iconfont"
@@ -69,7 +83,7 @@
         :style="{ color: getDesign.iconColor }"
       />
       <h1
-        class="font-bold m-2 truncate"
+        class="font-bold m-2 truncate w-full text-center"
         :style="{
           color: getDesign.fontColor,
           fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',

@@ -2,12 +2,14 @@
   import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { computed } from 'vue';
+  import { computed, unref } from 'vue';
   import { ref } from 'vue';
   import { SvgIcon } from '/@/components/Icon';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useDataFetch } from '../../../hook/socket/useSocket';
   import { DataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
+  import { useThingsModelValueTransform } from '/@/views/visual/palette/hooks/useThingsModelValueTransform';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -15,6 +17,15 @@
 
   const currentValue = ref<string | number>(123);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
+  const getThingModelTsl = computed(() => {
+    const { option } = props.config;
+
+    const { deviceProfileId, attribute } = option;
+    return getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+  });
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
 
@@ -27,7 +38,7 @@
       fontSize: persetFontSize,
     } = persetOption;
 
-    const { componentInfo, attribute, attributeRename, attributeName } = option;
+    const { componentInfo, attribute, attributeRename } = option;
 
     const { icon, iconColor, fontColor, unit, valueSize, fontSize } = componentInfo || {};
     return {
@@ -35,7 +46,7 @@
       unit: unit ?? perseUnit,
       icon: icon || persetIcon,
       fontColor: fontColor || persetFontColor,
-      attribute: attributeRename || attributeName || attribute,
+      attribute: attributeRename || unref(getThingModelTsl)?.functionName || attribute,
       valueSize: valueSize || persetValueSize || 20,
       fontSize: fontSize || persetFontSize || 14,
     };
@@ -46,7 +57,10 @@
     const [info] = data[attribute] || [];
     if (!info.length) return;
     const [_, value] = info;
-    currentValue.value = value;
+    currentValue.value = useThingsModelValueTransform(
+      value,
+      unref(getThingModelTsl)?.specs?.dataType
+    );
   };
 
   useDataFetch(props, updateFn);
@@ -57,7 +71,7 @@
 <template>
   <main class="w-full h-full flex flex-col justify-center items-center">
     <DeviceName :config="config" />
-    <div :style="getScale" class="flex-1 flex justify-center items-center flex-col">
+    <div :style="getScale" class="flex-1 flex justify-center items-center flex-col w-full">
       <SvgIcon
         :name="getDesign.icon!"
         prefix="iconfont"
@@ -65,7 +79,7 @@
         :style="{ color: getDesign.iconColor }"
       />
       <h1
-        class="my-4 font-bold !my-2 truncate"
+        class="my-4 font-bold !my-2 truncate w-full text-center"
         :style="{
           color: getDesign.fontColor,
           fontSize: (getRatio ? getRatio * getDesign.valueSize : getDesign.valueSize) + 'px',

@@ -10,6 +10,7 @@
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useComponentScale } from '../../../hook/useComponentScale';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -56,6 +57,8 @@
     },
   ];
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
     const { dataSource = [] } = option || {};
@@ -71,15 +74,17 @@
       dataSource: dataSource.map((item) => {
         const { unit, fontColor, backgroundColor, maxNumber, valueSize, fontSize } =
           item.componentInfo || {};
-        const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
+        const { attribute, attributeRename, deviceProfileId, deviceName, deviceRename, deviceId } =
           item;
+
+        const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           backgroundColor: backgroundColor ?? persetBackgroundColor,
           deviceName: deviceRename || deviceName,
           attribute,
-          attributeName: attributeRename || attributeName,
+          attributeName: attributeRename || tsl?.functionName,
           maxNumber: maxNumber || persetMaxNumber,
           id: deviceId,
           valueSize: valueSize || persetValueSize || 20,

@@ -10,6 +10,8 @@
   import { useMultipleDataFetch } from '../../../hook/socket/useSocket';
   import { MultipleDataFetchUpdateFn } from '../../../hook/socket/useSocket.type';
   import { useComponentScale } from '../../../hook/useComponentScale';
+  import { useDeviceProfileQueryContext } from '/@/views/visual/palette/hooks/useDeviceProfileQueryContext';
+  import { buildUUID } from '/@/utils/uuid';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -17,6 +19,8 @@
 
   const time = ref<Nullable<number>>(null);
 
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
     const { dataSource = [] } = option || {};
@@ -28,12 +32,13 @@
       valueSize: persetValueSize,
       fontSize: persetFontSize,
     } = persetOption || {};
+
     return {
       dataSource: dataSource.map((item) => {
         const { fontColor, icon, iconColor, unit, valueSize, fontSize } = item.componentInfo;
-        const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId, deviceProfileId } =
           item;
-
+        const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
         return {
           unit: unit ?? persetUnit,
           fontColor: fontColor ?? persetFontColor,
@@ -41,7 +46,7 @@
           iconColor: iconColor ?? persetIconColor,
           attribute,
           deviceName: deviceRename || deviceName,
-          attributeName: attributeRename || attributeName,
+          attributeName: attributeRename || tsl?.functionName,
           id: deviceId,
           valueSize: valueSize || persetValueSize || 20,
           fontSize: fontSize || persetFontSize || 14,
@@ -49,8 +54,10 @@
       }),
     };
   });
-  const defaultSvgList = ref<any>([
+
+  const defaultSvgList = ref([
     {
+      id: buildUUID(),
       value: 26.2,
       deviceName: '温湿度',
       attributeName: '温度',
@@ -58,8 +65,11 @@
       unit: '℃',
       iconColor: '#367BFF',
       fontColor: '#357CFB',
+      fontSize: 16,
+      valueSize: 16,
     },
     {
+      id: buildUUID(),
       value: 53.7,
       deviceName: '温湿度',
       attributeName: '湿度',
@@ -67,6 +77,8 @@
       unit: '℃',
       iconColor: '#FFA000',
       fontColor: '#FFA000',
+      fontSize: 16,
+      valueSize: 16,
     },
   ]);
 
@@ -108,7 +120,6 @@
           :size="getRatio ? 30 * getRatio : 30"
           :style="{ color: item.iconColor }"
         />
-
         <div
           class="text-gray-500 ml-6"
           :style="{ fontSize: (getRatio ? getRatio * item.fontSize : item.fontSize) + 'px' }"
@@ -122,10 +133,9 @@
           fontSize: (getRatio ? getRatio * item.valueSize : item.valueSize) + 'px',
         }"
       >
-        <span> {{ item.value || 0 }}</span>
+        <span> {{ (item as any).value || 0 }}</span>
         <span>{{ item.unit }} </span>
       </span>
     </div>
-    <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>

+export enum CategoryEnum {
+  MAP = 'MAP',
+}

@@ -3,21 +3,25 @@ import { useSelectWidgetKeys, useSelectWidgetMode } from '../../dataSourceBindPa
 import { PackagesCategoryEnum } from '../index.type';
 import { getDeviceProfile } from '/@/api/alarm/position';
 import { getDeviceAttributes, getMeetTheConditionsDevice } from '/@/api/dataBoard';
-import { DeviceAttributeParams, MasterDeviceList } from '/@/api/dataBoard/model';
-import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
-import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+import { DeviceAttributeParams } from '/@/api/dataBoard/model';
 import { getModelServices } from '/@/api/device/modelOfMatter';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { FormSchema, useComponentRegister } from '/@/components/Form';
+import { ApiCascader, FormSchema, useComponentRegister } from '/@/components/Form';
 import { OrgTreeSelect } from '/@/views/common/OrgTreeSelect';
 import { DataActionModeEnum } from '/@/enums/toolEnum';
 import { TaskTypeEnum } from '/@/views/task/center/config';
 import { createPickerSearch } from '/@/utils/pickerSearch';
 import { DataTypeEnum } from '/@/enums/objectModelEnum';
-import { CommandTypeEnum } from '/@/enums/deviceEnum';
+import { CommandTypeEnum, CommandTypeNameEnum } from '/@/enums/deviceEnum';
 import { TransportTypeEnum } from '/@/enums/deviceEnum';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { ControlComponentEnum } from '../components/Control';
+import { isNullOrUnDef } from '/@/utils/is';
+import { validateTCPCustomCommand } from '/@/components/Form/src/components/ThingsModelForm';
+import { CategoryEnum } from '../components';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+useComponentRegister('ApiCascader', ApiCascader);
 
 export interface CommonDataSourceBindValueType extends Record<DataSourceField, string> {
   customCommand?: {
@@ -31,30 +35,51 @@ export interface CommonDataSourceBindValueType extends Record<DataSourceField, s
 }
 
 export enum DataSourceField {
-  IS_GATEWAY_DEVICE = 'gatewayDevice',
+  // IS_GATEWAY_DEVICE = 'gatewayDevice',
   DEVICE_TYPE = 'deviceType',
   TRANSPORT_TYPE = 'transportType',
   ORIGINATION_ID = 'organizationId',
   DEVICE_ID = 'deviceId',
-  DEVICE_CODE = 'deviceCode', //设备地址码
+  // DEVICE_CODE = 'deviceCode', //设备地址码
   DEVICE_PROFILE_ID = 'deviceProfileId',
   ATTRIBUTE = 'attribute',
-  ATTRIBUTE_NAME = 'attributeName',
+  // ATTRIBUTE_NAME = 'attributeName',
   ATTRIBUTE_RENAME = 'attributeRename',
   DEVICE_NAME = 'deviceName',
   DEVICE_RENAME = 'deviceRename',
-  LONGITUDE_ATTRIBUTE = 'longitudeAttribute',
-  LATITUDE_ATTRIBUTE = 'latitudeAttribute',
+
   CODE_TYPE = 'codeType',
-  COMMAND = 'command',
+  // COMMAND = 'command',
+
   OPEN_COMMAND = 'openCommand',
   CLOSE_COMMAND = 'closeCommand',
+
   COMMAND_TYPE = 'commandType',
-  SERVICE = 'service',
+
+  // SERVICE = 'service',
+
+  /**
+   * @description 关服务标识符
+   */
   OPEN_SERVICE = 'openService',
+
+  /**
+   * @description 开服务标识符
+   */
   CLOSE_SERVICE = 'closeService',
-  EXTENSION_DESC = 'extensionDesc',
-  CALL_TYPE = 'callType',
+
+  /**
+   * @description 经度标识符
+   */
+  LONGITUDE_IDENTIFIER = 'longitudeIdentifier',
+
+  /**
+   * @description 纬度标识符号
+   */
+  LATITUDE_IDENTIFIER = 'latitudeIdentifier',
+
+  // EXTENSION_DESC = 'extensionDesc',
+  // CALL_TYPE = 'callType',
 }
 
 const isTcpProfile = (transportType: string) => transportType === TransportTypeEnum.TCP;
@@ -69,15 +94,6 @@ const isBooleanComponent = (componentKeys: { categoryKey?: string; componentKey?
   );
 };
 
-const getDeviceService = async (deviceProfileId: string) => {
-  try {
-    const data = await getModelServices({ deviceProfileId });
-    if (data)
-      return data.map((item) => ({ ...item, label: item.functionName, value: item.identifier }));
-  } catch (error) {}
-  return [];
-};
-
 const getDeviceAttribute = async (params: DeviceAttributeParams) => {
   try {
     const data = await getDeviceAttributes(params);
@@ -94,24 +110,6 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
 
   return [
     {
-      field: DataSourceField.IS_GATEWAY_DEVICE,
-      component: 'Switch',
-      label: '是否是网关设备',
-      show: false,
-    },
-    {
-      field: DataSourceField.DEVICE_NAME,
-      component: 'Input',
-      label: '设备名',
-      show: false,
-    },
-    {
-      field: DataSourceField.TRANSPORT_TYPE,
-      component: 'Input',
-      label: '设备配置类型',
-      show: false,
-    },
-    {
       field: DataSourceField.DEVICE_TYPE,
       component: 'ApiSelect',
       label: '设备类型',
@@ -127,13 +125,11 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
           valueField: 'itemValue',
           labelField: 'itemText',
           placeholder: '请选择设备类型',
-          onChange: (value: DeviceTypeEnum) => {
+          onChange: () => {
             setFieldsValue({
-              [DataSourceField.IS_GATEWAY_DEVICE]: value === DeviceTypeEnum.GATEWAY,
               [DataSourceField.DEVICE_PROFILE_ID]: null,
               [DataSourceField.DEVICE_ID]: null,
               [DataSourceField.ATTRIBUTE]: null,
-              [DataSourceField.ATTRIBUTE_NAME]: null,
               [DataSourceField.TRANSPORT_TYPE]: null,
             });
           },
@@ -142,6 +138,12 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       },
     },
     {
+      field: DataSourceField.TRANSPORT_TYPE,
+      label: '传输协议',
+      component: 'Input',
+      ifShow: false,
+    },
+    {
       field: DataSourceField.DEVICE_PROFILE_ID,
       component: 'ApiSelect',
       label: '产品',
@@ -164,12 +166,11 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
           labelField: 'name',
           valueField: 'id',
           placeholder: '请选择产品',
-          onChange: (_, option = {} as Record<'transportType', string>) => {
+          onChange: (_, option: Record<'transportType', string>) => {
             setFieldsValue({
               [DataSourceField.DEVICE_ID]: null,
               [DataSourceField.ATTRIBUTE]: null,
-              [DataSourceField.ATTRIBUTE_NAME]: null,
-              [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
+              [DataSourceField.TRANSPORT_TYPE]: option?.[DataSourceField.TRANSPORT_TYPE],
               [DataSourceField.COMMAND_TYPE]: null,
             });
           },
@@ -201,10 +202,10 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       },
     },
     {
-      field: DataSourceField.DEVICE_PROFILE_ID,
+      field: DataSourceField.DEVICE_NAME,
       component: 'Input',
-      label: '',
-      show: false,
+      label: '设备名称',
+      ifShow: false,
     },
     {
       field: DataSourceField.DEVICE_ID,
@@ -238,12 +239,11 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             }
             return [];
           },
-          onChange(_value, record: MasterDeviceList) {
+          onChange(_value, options: Record<'label' | 'codeType', string>) {
             setFieldsValue({
-              [DataSourceField.DEVICE_NAME]: record?.label,
-              [DataSourceField.CODE_TYPE]: record?.codeType,
-              [DataSourceField.DEVICE_CODE]: record?.code,
               [DataSourceField.COMMAND_TYPE]: null,
+              [DataSourceField.DEVICE_NAME]: options?.label,
+              [DataSourceField.CODE_TYPE]: options?.codeType,
             });
           },
           placeholder: '请选择设备',
@@ -253,91 +253,9 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
     },
     {
       field: DataSourceField.CODE_TYPE,
+      label: '设备标识符类型',
       component: 'Input',
-      label: '设备标识符',
-      show: false,
-    },
-
-    {
-      field: DataSourceField.DEVICE_CODE,
-      component: 'Input',
-      show: false,
-      label: '设备地址码',
-    },
-
-    {
-      field: DataSourceField.ATTRIBUTE_NAME,
-      component: 'Input',
-      label: '属性名',
-      show: false,
-    },
-    {
-      field: DataSourceField.COMMAND_TYPE,
-      component: 'ApiSelect',
-      label: '命令类型',
-      defaultValue: CommandTypeEnum.CUSTOM.toString(),
-      rules: [{ required: true, message: '请选择命令类型' }],
-      colProps: { span: 8 },
-      ifShow: ({ model }) => {
-        return isControlComponent(category!) && isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]);
-      },
-      componentProps: ({ formActionType, formModel }) => {
-        const { setFieldsValue } = formActionType;
-        const { codeType, deviceType, transportType } = formModel || {};
-        return {
-          // api: findDictItemByCode,
-          api: async (params: Recordable) => {
-            try {
-              const record = await findDictItemByCode(params);
-              if (unref(selectWidgetKeys).componentKey == 'LateralNumericalControl') {
-                return record.filter(
-                  (item) => item.itemValue == CommandTypeEnum.ATTRIBUTE.toString()
-                );
-              }
-              // TCP网关子 --> 不能要服务命令类型
-              if (deviceType == 'SENSOR' && transportType == 'TCP') {
-                return codeType == 'MODBUS_RTU'
-                  ? record.filter((item) => item.itemValue == CommandTypeEnum.ATTRIBUTE.toString())
-                  : codeType == 'CUSTOM'
-                  ? record.filter((item) => item.itemValue == CommandTypeEnum.CUSTOM.toString())
-                  : [];
-              }
-
-              if (codeType == TaskTypeEnum.MODBUS_RTU) {
-                // setFieldsValue({ [DataSourceField.COMMAND_TYPE]: undefined });
-                return record.filter(
-                  (item) => item.itemValue !== CommandTypeEnum.CUSTOM.toString()
-                );
-              } else {
-                return record.filter(
-                  (item) => item.itemValue !== CommandTypeEnum.ATTRIBUTE.toString()
-                );
-              }
-            } catch (error) {
-              return [];
-            }
-          },
-          params: {
-            dictCode: 'custom_define',
-          },
-          labelField: 'itemText',
-          valueField: 'itemValue',
-          placeholder: '请选择命令类型',
-          getPopupContainer: () => document.body,
-          onChange() {
-            setFieldsValue({
-              [DataSourceField.COMMAND]: null,
-              [DataSourceField.SERVICE]: null,
-              [DataSourceField.OPEN_COMMAND]: null,
-              [DataSourceField.CLOSE_COMMAND]: null,
-              [DataSourceField.OPEN_SERVICE]: null,
-              [DataSourceField.CLOSE_SERVICE]: null,
-              [DataSourceField.CALL_TYPE]: null,
-              [DataSourceField.ATTRIBUTE]: null,
-            });
-          },
-        };
-      },
+      ifShow: false,
     },
     {
       field: DataSourceField.ATTRIBUTE,
@@ -345,9 +263,7 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       label: '属性',
       colProps: { span: 8 },
       rules: [{ required: true, message: '请选择属性' }],
-      ifShow: ({ model }) =>
-        !(isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]) && isControlComponent(category!)) ||
-        model[DataSourceField.COMMAND_TYPE] == 2,
+      ifShow: () => category !== CategoryEnum.MAP,
       componentProps({ formModel, formActionType }) {
         const { setFieldsValue } = formActionType;
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
@@ -359,20 +275,25 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
                   deviceProfileId,
                   dataType:
                     (isControlComponent(category!) &&
-                      unref(selectWidgetKeys).componentKey !== 'LateralNumericalControl') ||
+                      unref(selectWidgetKeys).componentKey !==
+                        ControlComponentEnum.LATERAL_NUMERICAL_CONTROL) ||
                     isBooleanComponent(unref(selectWidgetKeys))
                       ? DataTypeEnum.BOOL
                       : undefined,
                 });
 
                 // 选择控制组件4的时候只能选择属性且是（int double类型）
-                if (unref(selectWidgetKeys).componentKey == 'LateralNumericalControl') {
+                if (
+                  unref(selectWidgetKeys).componentKey ===
+                  ControlComponentEnum.LATERAL_NUMERICAL_CONTROL
+                ) {
                   setFieldsValue({
                     [DataSourceField.COMMAND_TYPE]: CommandTypeEnum.ATTRIBUTE.toString(),
                   });
                   return option.filter(
                     (item) =>
-                      item.detail.dataType.type == 'INT' || item.detail.dataType.type == 'DOUBLE'
+                      item.detail.dataType.type === DataTypeEnum.NUMBER_INT ||
+                      item.detail.dataType.type == DataTypeEnum.NUMBER_DOUBLE
                   );
                 }
                 return option;
@@ -381,76 +302,133 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
             return [];
           },
           placeholder: '请选择属性',
-          onChange(value: string, option: Record<'label' | 'value' | any, string>) {
-            const { detail }: any = option || {};
-            setFieldsValue({
-              [DataSourceField.ATTRIBUTE_NAME]: value ? option.label : null,
-              [DataSourceField.EXTENSION_DESC]: value ? JSON.stringify(option.extensionDesc) : '',
-              // 地图组件结构体
-              lal:
-                category === 'MAP' && value && detail?.dataType.type === 'STRUCT'
-                  ? JSON.stringify(detail?.dataType.specs)
-                  : null,
-              latitude: null,
-              longitude: null,
-            });
-          },
           ...createPickerSearch(),
         };
       },
     },
     {
-      field: 'lal',
-      label: '经纬度存储的值',
-      component: 'Input',
-      show: false,
-    },
-    {
-      field: 'longitude',
+      field: DataSourceField.LONGITUDE_IDENTIFIER,
       label: '经度',
+      component: 'ApiCascader',
+      ifShow: ({}) => category === CategoryEnum.MAP,
       colProps: { span: 8 },
-      component: 'Select',
-      required: true,
-      ifShow: ({ model }) => category === 'MAP' && model.lal,
-      componentProps({ formModel }) {
-        const { lal } = formModel || {};
+      changeEvent: 'update:value',
+      valueField: 'value',
+      componentProps: ({ formModel }) => {
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
         return {
+          api: async () => {
+            try {
+              if (deviceProfileId) {
+                const options = await getDeviceAttributes({
+                  deviceProfileId,
+                });
+
+                const _options = options.map((item) => {
+                  item = Object.assign(item, { functionName: item.name });
+                  if (item.detail.dataType.type === DataTypeEnum.STRUCT) {
+                    return Object.assign(item, { specs: item.detail.dataType.specs });
+                  }
+                  return item;
+                });
+                return _options;
+              }
+            } catch (error) {}
+            return [];
+          },
           placeholder: '请选择经度',
-          options: lal
-            ? JSON.parse(lal)?.map((item) => ({ label: item.functionName, value: item.identifier }))
-            : [],
+          getPopupContainer: () => document.body,
+          fieldNames: { label: 'functionName', value: 'identifier', children: 'specs' },
         };
       },
     },
     {
-      field: 'latitude',
+      field: DataSourceField.LATITUDE_IDENTIFIER,
       label: '纬度',
+      component: 'ApiCascader',
+      ifShow: ({}) => category === CategoryEnum.MAP,
       colProps: { span: 8 },
-      required: true,
-      component: 'Select',
-      ifShow: ({ model }) => category === 'MAP' && model.lal,
-      componentProps({ formModel }) {
-        const { lal } = formModel || {};
+      changeEvent: 'update:value',
+      valueField: 'value',
+      componentProps: ({ formModel }) => {
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+
         return {
+          api: async () => {
+            try {
+              if (deviceProfileId) {
+                const options = await getDeviceAttributes({
+                  deviceProfileId,
+                });
+
+                const _options = options.map((item) => {
+                  item = Object.assign(item, { functionName: item.name });
+
+                  if (item.detail.dataType.type === DataTypeEnum.STRUCT) {
+                    return Object.assign(item, { specs: item.detail.dataType.specs });
+                  }
+                  return item;
+                });
+
+                return _options;
+              }
+            } catch (error) {}
+            return [];
+          },
           placeholder: '请选择纬度',
-          options: lal
-            ? JSON.parse(lal)?.map((item) => ({ label: item.functionName, value: item.identifier }))
-            : [],
+          getPopupContainer: () => document.body,
+          fieldNames: { label: 'functionName', value: 'identifier', children: 'specs' },
         };
       },
     },
     {
-      field: DataSourceField.EXTENSION_DESC,
-      component: 'Input',
-      show: false,
-      label: '扩展描述符',
-    },
+      field: DataSourceField.COMMAND_TYPE,
+      component: 'Select',
+      label: '命令类型',
+      defaultValue: CommandTypeEnum.CUSTOM,
+      rules: [
+        {
+          required: true,
+          validator(_, value: number | string) {
+            if (isNullOrUnDef(value)) return Promise.reject('请选择命令类型');
+            return Promise.resolve();
+          },
+        },
+      ],
+      colProps: { span: 8 },
+      ifShow: ({ model }) => {
+        return (
+          isControlComponent(category!) &&
+          unref(selectWidgetKeys).componentKey !== ControlComponentEnum.LATERAL_NUMERICAL_CONTROL &&
+          isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]) &&
+          model[DataSourceField.CODE_TYPE] === TaskTypeEnum.CUSTOM
+        );
+      },
+      componentProps: ({ formActionType, formModel }) => {
+        const { setFieldsValue } = formActionType;
+        const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+        const options: Record<'label' | 'value', string | number>[] = [
+          { label: CommandTypeNameEnum.CUSTOM, value: CommandTypeEnum.CUSTOM },
+        ];
 
-    {
-      field: DataSourceField.CALL_TYPE,
-      component: 'Input',
-      ifShow: false,
-      label: 'callType',
+        // 网关子设备无服务
+        if (deviceType !== DeviceTypeEnum.SENSOR)
+          options.push({ label: CommandTypeNameEnum.SERVICE, value: CommandTypeEnum.SERVICE });
+
+        return {
+          options,
+          placeholder: '请选择命令类型',
+          getPopupContainer: () => document.body,
+          onChange() {
+            setFieldsValue({
+              [DataSourceField.OPEN_COMMAND]: null,
+              [DataSourceField.CLOSE_COMMAND]: null,
+              [DataSourceField.OPEN_SERVICE]: null,
+              [DataSourceField.CLOSE_SERVICE]: null,
+            });
+          },
+        };
+      },
     },
     {
       field: DataSourceField.OPEN_SERVICE,
@@ -460,40 +438,19 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       rules: [{ required: true, message: '请选择开服务' }],
       ifShow: ({ model }) =>
         isControlComponent(category!) &&
-        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.SERVICE.toString() &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.SERVICE &&
         isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
-      componentProps({ formModel, formActionType }) {
-        const { setFieldsValue } = formActionType;
+      componentProps({ formModel }) {
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
-        const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
-        if (isUpdate && ![deviceProfileId, transportType].every(Boolean))
-          return { placeholder: '请选择开服务', getPopupContainer: () => document.body };
         return {
-          api: async () => {
-            try {
-              if (deviceProfileId) {
-                const services = await getDeviceService(deviceProfileId);
-                const value = formModel[DataSourceField.SERVICE];
-                if (value) {
-                  const selected = services.find((item) => item.value === value);
-                  selected && setFieldsValue({ [DataSourceField.CALL_TYPE]: selected.callType });
-                }
-                return services;
-              }
-            } catch (error) {}
-            return [];
+          api: getModelServices,
+          params: {
+            deviceProfileId,
           },
           placeholder: '请选择开服务',
+          labelField: 'functionName',
+          valueField: 'identifier',
           getPopupContainer: () => document.body,
-          onChange(value: string, options: ModelOfMatterParams) {
-            const command = value
-              ? (options.functionJson.inputData || [])[0]?.serviceCommand
-              : null;
-            setFieldsValue({
-              [DataSourceField.OPEN_COMMAND]: command,
-              [DataSourceField.CALL_TYPE]: value ? options.callType : null,
-            });
-          },
         };
       },
     },
@@ -505,40 +462,19 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       rules: [{ required: true, message: '请选择关服务' }],
       ifShow: ({ model }) =>
         isControlComponent(category!) &&
-        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.SERVICE.toString() &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.SERVICE &&
         isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
-      componentProps({ formModel, formActionType }) {
-        const { setFieldsValue } = formActionType;
+      componentProps({ formModel }) {
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
-        const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
-        if (isUpdate && ![deviceProfileId, transportType].every(Boolean))
-          return { placeholder: '请选择关服务', getPopupContainer: () => document.body };
         return {
-          api: async () => {
-            try {
-              if (deviceProfileId) {
-                const services = await getDeviceService(deviceProfileId);
-                const value = formModel[DataSourceField.SERVICE];
-                if (value) {
-                  const selected = services.find((item) => item.value === value);
-                  selected && setFieldsValue({ [DataSourceField.CALL_TYPE]: selected.callType });
-                }
-                return services;
-              }
-            } catch (error) {}
-            return [];
+          api: getModelServices,
+          params: {
+            deviceProfileId,
           },
           placeholder: '请选择关服务',
+          labelField: 'functionName',
+          valueField: 'identifier',
           getPopupContainer: () => document.body,
-          onChange(value: string, options: ModelOfMatterParams) {
-            const command = value
-              ? (options.functionJson.inputData || [])[0]?.serviceCommand
-              : null;
-            setFieldsValue({
-              [DataSourceField.CLOSE_COMMAND]: command,
-              [DataSourceField.CALL_TYPE]: value ? options.callType : null,
-            });
-          },
         };
       },
     },
@@ -547,11 +483,11 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       component: 'Input',
       label: '命令',
       colProps: { span: 8 },
-      rules: [{ required: true, message: '请输入开下发命令' }],
+      rules: [{ validator: validateTCPCustomCommand }],
       // 是控制组件  && 自定义命令  && 传输协议为TCP
       ifShow: ({ model }) =>
         isControlComponent(category!) &&
-        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.CUSTOM.toString() &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.CUSTOM &&
         model[DataSourceField.TRANSPORT_TYPE] &&
         isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
       componentProps: {
@@ -563,11 +499,11 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
       component: 'Input',
       label: '命令',
       colProps: { span: 8 },
-      rules: [{ required: true, message: '请输入关下发命令' }],
+      rules: [{ validator: validateTCPCustomCommand }],
       // 是控制组件  && 自定义命令  && 传输协议为TCP
       ifShow: ({ model }) =>
         isControlComponent(category!) &&
-        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.CUSTOM.toString() &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.CUSTOM &&
         model[DataSourceField.TRANSPORT_TYPE] &&
         isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
       componentProps: {

@@ -24,6 +24,7 @@ import {
 } from './useSocket.type';
 import { ComponentPropsConfigType } from '../../index.type';
 import { isNullOrUnDef } from '/@/utils/is';
+import { CategoryEnum } from '../../components';
 
 interface DeviceGroupMapType {
   subscriptionId: number;
@@ -410,8 +411,20 @@ export const useMultipleDataFetch = (
       Object.keys(unref(getDataSourceGroup)).forEach((key) => {
         const item = unref(getDataSourceGroup)[key];
         const attributes = [...new Set(item.map((item) => item.attribute))];
+
+        if (props.config.componentConfig.category === CategoryEnum.MAP) {
+          const positionIdentifier = item.reduce((prev, next) => {
+            const [lat] = next.latitudeIdentifier || [];
+            const [lng] = next.longitudeIdentifier || [];
+
+            return [...prev, lat, lng];
+          }, []);
+
+          attributes.push(...new Set(positionIdentifier));
+        }
+
         subscriber.trackUpdateGroup(key, {
-          attributes,
+          attributes: attributes.filter(Boolean),
           fn: updateFn,
         });
       });

+import { ref } from 'vue';
+import { getDeviceDetail } from '/@/api/device/deviceManager';
+import { useDeviceProfileQueryContext } from '../../palette/hooks/useDeviceProfileQueryContext';
+import {
+  CommandTypeEnum,
+  RPCCommandMethodEnum,
+  ServiceCallTypeEnum,
+  TransportTypeEnum,
+} from '/@/enums/deviceEnum';
+import { RpcCommandType } from '/@/api/device/model/deviceConfigModel';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useGetModbusCommand } from './useGetModbusCommand';
+import { TaskTypeEnum } from '/@/views/task/center/config';
+import { DataTypeEnum } from '/@/enums/objectModelEnum';
+import { sendCommandOneway, sendCommandTwoway } from '/@/api/dataBoard';
+import { isNullOrUnDef } from '/@/utils/is';
+
+export interface DoCommandDeliverDataSourceType {
+  deviceId: string;
+  deviceProfileId: string;
+  attribute: string;
+  commandType?: CommandTypeEnum;
+  openCommand?: string;
+  closeCommand?: string;
+  openService?: string;
+  closeService?: string;
+}
+
+export function useCommandDelivery() {
+  const loading = ref(false);
+
+  const { createMessage } = useMessage();
+
+  const { getDeviceProfileTslByIdWithIdentifier } = useDeviceProfileQueryContext();
+
+  const doGetDeviceId = async (deviceId: string) => {
+    return await getDeviceDetail(deviceId);
+  };
+
+  const { validateCanGetCommand, getModbusCommand } = useGetModbusCommand();
+
+  const doCommandDeliver = async (
+    dataSource: DoCommandDeliverDataSourceType,
+    value: any
+  ): Promise<boolean> => {
+    try {
+      const { deviceId, deviceProfileId, attribute, commandType } = dataSource;
+
+      loading.value = true;
+      const tsl = getDeviceProfileTslByIdWithIdentifier?.(deviceProfileId, attribute);
+      const deviceDetail = await doGetDeviceId(deviceId);
+
+      let sendCommandFn = sendCommandOneway;
+
+      let params: string | Recordable | undefined = {
+        [attribute]: value,
+      };
+
+      if (deviceDetail.transportType === TransportTypeEnum.TCP) {
+        if (deviceDetail.codeType === TaskTypeEnum.MODBUS_RTU) {
+          if (!validateCanGetCommand(tsl?.extensionDesc, deviceDetail.code)) return false;
+          params = await getModbusCommand(value, tsl!.extensionDesc, deviceDetail.code!);
+        } else if (deviceDetail.codeType === TaskTypeEnum.CUSTOM) {
+          params = value;
+          if (commandType === CommandTypeEnum.CUSTOM) {
+            if (tsl?.specs?.dataType.type === DataTypeEnum.BOOL) {
+              const { openCommand, closeCommand } = dataSource;
+              params = !!Number(value) ? openCommand : closeCommand;
+            }
+          } else if (commandType === CommandTypeEnum.SERVICE) {
+            if (tsl?.specs?.dataType.type === DataTypeEnum.BOOL) {
+              const { openService, closeService } = dataSource;
+              const serviceIdentifier = !!Number(value) ? openService : closeService;
+              const serviceTsl = getDeviceProfileTslByIdWithIdentifier?.(
+                deviceProfileId,
+                serviceIdentifier!
+              );
+              params = serviceTsl?.inputData?.[0].serviceCommand;
+              sendCommandFn =
+                serviceTsl?.callType === ServiceCallTypeEnum.SYNC
+                  ? sendCommandTwoway
+                  : sendCommandOneway;
+            }
+          }
+        }
+      }
+
+      if (isNullOrUnDef(params)) return false;
+
+      const rpcCommand: RpcCommandType = {
+        additionalInfo: {
+          cmdType: CommandTypeEnum.API,
+        },
+        params,
+        method: RPCCommandMethodEnum.THINGSKIT,
+        persistent: true,
+      };
+
+      await sendCommandFn({ deviceId: deviceId, value: rpcCommand });
+
+      createMessage.success('命令下发成功');
+
+      return true;
+    } catch (e) {
+      return false;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  return {
+    loading,
+    doCommandDeliver,
+  };
+}

+import { ExtensionDesc } from '/@/api/device/model/modelOfMatterModel';
+import { genModbusCommand } from '/@/api/task';
+import { GenModbusCommandType } from '/@/api/task/model';
+import { ModbusCRCEnum, RegisterActionTypeEnum } from '/@/enums/objectModelEnum';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export const InsertString = (t: any, c: any, n: any) => {
+  const r: string | number[] = [];
+
+  for (let i = 0; i * 2 < t.length; i++) r.push(t.substr(i * 2, n));
+
+  return r.join(c);
+};
+
+export const FillString = (t: any, c: any, n: any, b: any) => {
+  if (t === '' || c.length !== 1 || n <= t.length) return t;
+
+  const l = t.length;
+
+  for (let i = 0; i < n - l; i++) {
+    if (b === true) t = c + t;
+    else t += c;
+  }
+  return t;
+};
+
+export const SingleToHex = (t: any) => {
+  if (t === '') return '';
+
+  t = parseFloat(t);
+
+  if (isNaN(t) === true) return 'Error';
+
+  if (t === 0) return '00000000';
+
+  let s, e, m;
+
+  if (t > 0) {
+    s = 0;
+  } else {
+    s = 1;
+
+    t = 0 - t;
+  }
+  m = t.toString(2);
+
+  if (m >= 1) {
+    if (m.indexOf('.') === -1) m = `${m}.0`;
+
+    e = m.indexOf('.') - 1;
+  } else {
+    e = 1 - m.indexOf('1');
+  }
+  if (e >= 0) m = m.replace('.', '');
+  else m = m.substring(m.indexOf('1'));
+
+  if (m.length > 24) m = m.substr(0, 24);
+  else m = FillString(m, '0', 24, false);
+
+  m = m.substring(1);
+
+  e = (e + 127).toString(2);
+
+  e = FillString(e, '0', 8, true);
+
+  let r = parseInt(s + e + m, 2).toString(16);
+
+  r = FillString(r, '0', 8, true);
+
+  return InsertString(r, ' ', 2).toUpperCase();
+};
+
+export const FormatHex = (t: any, n: any, ie: any) => {
+  const r: string[] = [];
+
+  let s = '';
+
+  let c = 0;
+
+  for (let i = 0; i < t.length; i++) {
+    if (t.charAt(i) !== ' ') {
+      s += t.charAt(i);
+
+      c += 1;
+
+      if (c === n) {
+        r.push(s);
+
+        s = '';
+
+        c = 0;
+      }
+    }
+    if (ie === false) {
+      if (i === t.length - 1 && s !== '') r.push(s);
+    }
+  }
+  return r.join('\n');
+};
+
+export const FormatHexBatch = (t: any, n: any, ie: any) => {
+  const a = t.split('\n');
+
+  const r: string[] = [];
+
+  for (let i = 0; i < a.length; i++) r[i] = FormatHex(a[i], n, ie);
+
+  return r.join('\n');
+};
+
+export const SingleToHexBatch = (t: any) => {
+  const a = t.split('\n');
+
+  const r: string[] = [];
+
+  for (let i = 0; i < a.length; i++) r[i] = SingleToHex(a[i]);
+
+  return r.join('\r\n');
+};
+
+const getArray = (values: any) => {
+  const str = values.replace(/\s+/g, '');
+  const array: any = [];
+
+  for (let i = 0; i < str.length; i += 4) {
+    const chunk = parseInt(str.substring(i, i + 4), 16);
+    array.push(chunk);
+  }
+  return array;
+};
+
+const getFloatPart = (number: string | number) => {
+  const isLessZero = Number(number) < 0;
+  number = number.toString();
+  const floatPartStartIndex = number.indexOf('.');
+  const value = ~floatPartStartIndex
+    ? `${isLessZero ? '-' : ''}0.${number.substring(floatPartStartIndex + 1)}`
+    : '0';
+  return Number(value);
+};
+
+const REGISTER_MAX_VALUE = Number(0xffff);
+
+export function useGetModbusCommand() {
+  const { createMessage } = useMessage();
+
+  const getModbusCommand = async (
+    value: number,
+    extensionDesc: ExtensionDesc,
+    deviceAddressCode: string
+  ) => {
+    const { registerAddress, actionType, zoomFactor } = extensionDesc as Required<ExtensionDesc>;
+
+    const params: GenModbusCommandType = {
+      crc: ModbusCRCEnum.CRC_16_LOWER,
+      registerNumber: 1,
+      deviceCode: deviceAddressCode,
+      registerAddress,
+      method: actionType,
+      registerValues: [value],
+    };
+
+    if (actionType === RegisterActionTypeEnum.INT) {
+      const newValue = Math.trunc(value) * zoomFactor + getFloatPart(value) * zoomFactor;
+
+      if (newValue % 1 !== 0) {
+        createMessage.warning(`属性下发类型必须是整数,缩放因子为${zoomFactor}`);
+        return;
+      }
+
+      if (value * zoomFactor > REGISTER_MAX_VALUE) {
+        createMessage.warning(`属性下发值不能超过${REGISTER_MAX_VALUE},缩放因子为${zoomFactor}`);
+        return;
+      }
+
+      params.registerValues = [newValue];
+    } else if (actionType === RegisterActionTypeEnum.DOUBLE) {
+      const regex = /^-?\d+(\.\d{0,2})?$/;
+      const values = Math.trunc(value) * zoomFactor + getFloatPart(value) * zoomFactor;
+
+      if (!regex.test(values.toString())) {
+        createMessage.warning(`属性下发值精确到两位小数,缩放因子为${zoomFactor}`);
+        return;
+      }
+
+      const newValue = values === 0 ? [0, 0] : getArray(SingleToHex(values));
+      params.registerValues = newValue;
+      params.registerNumber = 2;
+      params.method = '10';
+    }
+
+    return await genModbusCommand(params);
+  };
+
+  /**
+   *
+   * @param extensionDesc 物模型拓展描述符
+   * @param deviceAddressCode 设备地址码
+   */
+  const validateCanGetCommand = (
+    extensionDesc?: ExtensionDesc,
+    deviceAddressCode?: string,
+    createValidateMessage = true
+  ) => {
+    const result = { flag: true, message: '' };
+    if (!extensionDesc) {
+      result.flag = false;
+      result.message = '当前物模型扩展描述没有填写';
+    }
+
+    if (!deviceAddressCode) {
+      result.flag = false;
+      result.message = '当前设备未绑定设备地址码';
+    }
+
+    if (result.message && createValidateMessage) createMessage.warning(result.message);
+
+    return result;
+  };
+
+  return {
+    getModbusCommand,
+    validateCanGetCommand,
+  };
+}

-import { ref } from 'vue';
-import { DataSource } from '../../palette/types';
-import { sendCommandOneway, sendCommandTwoway } from '/@/api/dataBoard';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { TransportTypeEnum, ServiceCallTypeEnum } from '/@/enums/deviceEnum';
-
-const { createMessage } = useMessage();
-export function useSendCommand() {
-  const loading = ref(false);
-
-  const error = () => {
-    // createMessage.error('下发指令失败');
-    return false;
-  };
-
-  const sendCommand = async (record: DataSource, value: any, isModbusCommand = false) => {
-    if (!record) return false;
-    const { customCommand, attribute } = record || {};
-    const { deviceId } = record;
-    if (!deviceId) return false;
-
-    try {
-      loading.value = true;
-      let params: string | Recordable = {
-        [attribute!]: Number(value),
-      };
-      if (isModbusCommand) {
-        params = value;
-      }
-
-      let sendCommandFn = sendCommandOneway;
-      // 如果是TCP设备从物模型中获取下发命令(TCP网关子设备无物模型服务与事件)
-      if (customCommand?.transportType === TransportTypeEnum.TCP && !isModbusCommand) {
-        params = customCommand.command!;
-        if (customCommand.callType === ServiceCallTypeEnum.SYNC) {
-          sendCommandFn = sendCommandTwoway;
-        }
-      }
-      // 控制按钮下发命令为0 或 1
-      await sendCommandFn({
-        deviceId,
-        value: {
-          params: params || null,
-          persistent: true,
-          additionalInfo: {
-            cmdType: customCommand.commandType || 'API',
-          },
-          method: 'methodThingskit',
-        },
-      });
-      createMessage.success('命令下发成功');
-      return true;
-    } catch (msg) {
-      console.error(msg);
-      return error();
-    } finally {
-      loading.value = false;
-    }
-  };
-  return {
-    loading,
-    sendCommand,
-  };
-}

@@ -9,7 +9,7 @@ export const useApp = () => {
 
   const isPhone = () => {
     const values = location?.pathname.split('/') || [];
-    return values[values?.length - 2] === 'phone' ? true : false;
+    return values[values?.length - 2] === 'phone';
   };
 
   return { getIsAppPage, isPhone };

@@ -11,6 +11,8 @@ import {
 } from '../types';
 import { buildUUID } from '/@/utils/uuid';
 import { PublicComponentOptions } from '../../packages/index.type';
+import { batchGetObjectModel } from '/@/api/device/modelOfMatter';
+import { BatchGetObjectModelItemType } from '/@/api/device/model/modelOfMatterModel';
 
 export interface WidgetDataType extends Layout, ComponentDataType, PublicComponentOptions {}
 
@@ -23,6 +25,17 @@ export const useDataSource = (propsRef: ComputedRef<Recordable>) => {
 
   const dataSource = ref<WidgetDataType[]>([]);
 
+  const deviceProfilesMapRef = ref<Map<string, BatchGetObjectModelItemType>>();
+
+  const getAllDeviceProfileIdsByDataSource = computed(() => {
+    const result = unref(rawDataSource)?.componentData?.reduce((prev, next) => {
+      const ids = next.dataSource.map((temp) => temp.deviceProfileId);
+      return [...prev, ...ids];
+    }, []);
+
+    return [...new Set(result)];
+  });
+
   const getSharePageData = computed(() => {
     return unref(propsRef).value!;
   });
@@ -64,19 +77,8 @@ export const useDataSource = (propsRef: ComputedRef<Recordable>) => {
       loading.value = true;
       const { data } = await getDataBoradDetail();
       rawDataSource.value = data;
-      // const result: WidgetDataType[] = (data.componentData || []).map((item) => {
-      //   const { id } = item;
-
-      //   const layout =
-      //     (data.componentLayout || []).find((item) => item.id === id) ||
-      //     ({} as ComponentLayoutType);
-
-      //   return {
-      //     i: buildUUID(),
-      //     ...layout,
-      //     ...item,
-      //   } as WidgetDataType;
-      // });
+      await getAllDeviceProfiles();
+
       const result: WidgetDataType[] = data.componentLayout.map((item) => {
         const { id } = item;
         const dataSource =
@@ -129,8 +131,35 @@ export const useDataSource = (propsRef: ComputedRef<Recordable>) => {
     } catch (error) {}
   };
 
-  onMounted(() => {
-    getDataSource();
+  const getAllDeviceProfiles = async () => {
+    if (!unref(getAllDeviceProfileIdsByDataSource).length) return;
+    const result = await batchGetObjectModel({
+      deviceProfileIds: unref(getAllDeviceProfileIdsByDataSource),
+    });
+
+    const map = new Map();
+
+    result.forEach((item) => {
+      map.set(item.id, item);
+    });
+
+    deviceProfilesMapRef.value = map;
+  };
+
+  function getDeviceProfileDetailById(id: string) {
+    return unref(deviceProfilesMapRef)?.get(id);
+  }
+
+  function getDeviceProfileTslByIdWithIdentifier(id: string, identifier: string) {
+    const detail = getDeviceProfileDetailById(id);
+    if (!detail) return;
+    for (const item of detail.tsl) {
+      if (item.identifier === identifier) return item;
+    }
+  }
+
+  onMounted(async () => {
+    await getDataSource();
   });
 
   return {
@@ -138,8 +167,11 @@ export const useDataSource = (propsRef: ComputedRef<Recordable>) => {
     draggable: !unref(getIsSharePage) && !unref(getIsAppPage),
     resizable: !unref(getIsSharePage) && !unref(getIsAppPage),
     dataSource,
+    deviceProfilesMapRef,
     rawDataSource,
     getDataSource,
     setLayoutInfo,
+    getDeviceProfileDetailById,
+    getDeviceProfileTslByIdWithIdentifier,
   };
 };

+import { inject, provide } from 'vue';
+import { BatchGetObjectModelItemType, Tsl } from '/@/api/device/model/modelOfMatterModel';
+
+const SymbolKey = Symbol('data-board');
+
+export interface ContextOptionsType {
+  getDeviceProfileDetailById: (id: string) => BatchGetObjectModelItemType | undefined;
+  getDeviceProfileTslByIdWithIdentifier: (id: string, identifier?: string) => Tsl | undefined;
+}
+
+export const createDeviceProfileQueryContext = (options: ContextOptionsType) => {
+  provide(SymbolKey, options);
+};
+
+export const useDeviceProfileQueryContext = () => {
+  return inject<ContextOptionsType>(SymbolKey) || ({} as Partial<ContextOptionsType>);
+};

+import { DataType, Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+import { DataTypeEnum } from '/@/enums/objectModelEnum';
+import { useJsonParse } from '/@/hooks/business/useJsonParse';
+function getBoolTypeValue(value: number, Specs: Specs) {
+  const { boolOpen, boolClose } = Specs;
+
+  return Number(value) ? boolOpen : boolClose;
+}
+
+function getEnumTypeValue(value: number, specsList: Specs[]) {
+  const res = specsList.find((item) => item.value === Number(value));
+
+  return res?.name;
+}
+
+function getStructTypeValue(value: string, specs: StructJSON[]): string {
+  const res = useJsonParse(value).value;
+
+  function generateStruct(specs: StructJSON[], value: Recordable) {
+    if (!value) return {};
+
+    return specs.reduce((prev, next) => {
+      return {
+        ...prev,
+        [next.functionName!]: getValueByType(
+          next.dataType!.type,
+          value[next.identifier],
+          next.dataType!
+        ),
+      };
+    }, {});
+  }
+
+  return JSON.stringify(generateStruct(specs, res));
+}
+
+function getValueByType(type: string, value: any, dataType: DataType) {
+  switch (type) {
+    case DataTypeEnum.BOOL:
+      return getBoolTypeValue(value, dataType.specs as Specs);
+    case DataTypeEnum.STRUCT:
+      return getStructTypeValue(value, dataType.specs as StructJSON[]);
+    case DataTypeEnum.ENUM:
+      return getEnumTypeValue(value, dataType.specsList as Specs[]);
+    default:
+      return value;
+  }
+}
+export function useThingsModelValueTransform(value: any, thingsModelDataType?: DataType) {
+  if (!thingsModelDataType) return value;
+
+  const { type } = thingsModelDataType;
+  return getValueByType(type, value, thingsModelDataType);
+}

@@ -40,6 +40,7 @@
   import SIGNALSVG from '/@/assets/svg/signal.svg';
   import BATTERYSVG from '/@/assets/svg/battery.svg';
   import { useRoute } from 'vue-router';
+  import { createDeviceProfileQueryContext } from './hooks/useDeviceProfileQueryContext';
 
   const props = defineProps<{
     value?: Recordable;
@@ -53,8 +54,17 @@
 
   const ROUTE = useRoute();
 
-  const { loading, draggable, resizable, dataSource, rawDataSource, setLayoutInfo, getDataSource } =
-    useDataSource(getProps);
+  const {
+    loading,
+    draggable,
+    resizable,
+    dataSource,
+    rawDataSource,
+    setLayoutInfo,
+    getDataSource,
+    getDeviceProfileDetailById,
+    getDeviceProfileTslByIdWithIdentifier,
+  } = useDataSource(getProps);
 
   const { resize, resized, moved, containerResized } = useDragGridLayout(dataSource, setLayoutInfo);
 
@@ -157,6 +167,11 @@
 
   createDataBoardContext({ send, close });
 
+  createDeviceProfileQueryContext({
+    getDeviceProfileDetailById,
+    getDeviceProfileTslByIdWithIdentifier,
+  });
+
   const { getDarkMode } = useRootSetting();
   watch(
     getIsSharePage,

 import { PublicComponentOptions } from '../../packages/index.type';
+import { CommandTypeEnum } from '/@/enums/deviceEnum';
 
 export interface ComponentDataType<T = ExtraDataSource> {
   id: string;
@@ -19,19 +20,26 @@ export interface DataSource {
   deviceId: string;
   deviceType: string;
   attribute: string;
-  attributeName: string;
-  deviceName: string;
-  gatewayDevice: boolean;
-  slaveDeviceId: string;
+  commandType?: CommandTypeEnum;
+  openCommand?: string;
+  closeCommand?: string;
+  openService?: string;
+  closeService?: string;
+  // attributeName: string;
+  // deviceName: string;
+  // gatewayDevice: boolean;
+  // slaveDeviceId: string;
   deviceRename: string;
   attributeRename: string;
   componentInfo: ComponentInfo;
-  customCommand: CustomCommand;
   videoConfig?: VideoConfigType;
   [key: string]: any;
-  lal?: string;
-  latitude?: string | number;
-  longitude?: string | number;
+
+  latitudeIdentifier?: string[];
+  longitudeIdentifier?: string[];
+  // lal?: string;
+  // latitude?: string | number;
+  // longitude?: string | number;
 }
 
 export interface ExtraDataSource extends DataSource, PublicComponentOptions {