Merge branch 'ww' into 'main'

model of matter

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

@@ -14,7 +14,7 @@ VITE_PUBLIC_PATH = /
 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
 # 线上测试环境
 # 线上测试环境
 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
-VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]]
+VITE_PROXY = [["/api","http://222.180.200.114:48080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://192.168.10.136:8080/api"],["/thingskit-drawio","http://192.168.10.136:8080/api"]]
 # VITE_PROXY = [["/api","http://192.168.10.136:8080/api"],["/thingskit-drawio","http://192.168.10.136:8080/api"]]
 
 
@@ -43,7 +43,7 @@ VITE_GLOB_CONFIGURATION = /thingskit-drawio
 VITE_CONTENT_SECURITY_POLICY = false
 VITE_CONTENT_SECURITY_POLICY = false
 
 
 # Alarm Notify Polling Interval Time
 # Alarm Notify Polling Interval Time
-VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 5000
+VITE_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000
 
 
 # Alarm Notify Auto Close Time Unit is Second
 # Alarm Notify Auto Close Time Unit is Second
 VITE_ALARM_NOTIFY_DURATION = 5
 VITE_ALARM_NOTIFY_DURATION = 5

 {
 {
-  "i18n-ally.localesPaths": ["src/locales", "src/locales/lang", "public/resource/tinymce/langs"]
+  "i18n-ally.localesPaths": [
+    "src/locales",
+    "src/locales/lang",
+    "public/resource/tinymce/langs"
+  ],
+  "cSpell.words": [
+    "unref",
+    "VITE"
+  ]
 }
 }

@@ -48,3 +48,40 @@ export interface DeviceProfileModel {
 export type ChildDeviceParams = BasicPageParams & {
 export type ChildDeviceParams = BasicPageParams & {
   formId: string;
   formId: string;
 };
 };
+
+export interface Configuration {
+  type: string;
+}
+
+export interface TransportConfiguration {
+  type: string;
+}
+
+export interface ProvisionConfiguration {
+  type: string;
+  provisionDeviceSecret?: any;
+}
+
+export interface ProfileData {
+  configuration: Configuration;
+  transportConfiguration: TransportConfiguration;
+  provisionConfiguration: ProvisionConfiguration;
+  alarms?: any;
+}
+
+export interface DeviceRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  name: string;
+  tenantId: string;
+  transportType: string;
+  provisionType: string;
+  deviceType: string;
+  tbProfileId: string;
+  profileData: ProfileData;
+  defaultQueueName: string;
+  image: string;
+  type: string;
+  default: boolean;
+}

+import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+
+export interface Specs {
+  min: string;
+  max: string;
+  unit: string;
+  unitName: string;
+  step: string;
+  length: string;
+  boolOpen: string;
+  boolClose: string;
+  valueRange?: {
+    min: string;
+    max: string;
+  };
+}
+
+export interface FunctionJson {
+  type: string;
+  specs?: Partial<Specs> | ModelOfMatterParams[];
+}
+
+export interface ModelOfMatterParams {
+  deviceProfileId: string;
+  functionJson: FunctionJson;
+  functionName: string;
+  functionType: FunctionType;
+  identifier: string;
+  remark: string;
+  id?: string;
+}
+
+export interface GetModelTslParams {
+  functionType: FunctionType;
+  deviceProfileId: string;
+}

+import { BasicPageParams } from '../model/baseModel';
+import { GetModelTslParams, ModelOfMatterParams } from './model/modelOfMatterModel';
+import { defHttp } from '/@/utils/http/axios';
+
+enum ModelOfMatter {
+  CREATE = '/things_model',
+  UPDATE = '/things_model',
+  DELETE = '/things_model',
+  TSL = '/things_model',
+  LIST = '/things_model/page',
+}
+
+export const getModelList = (params: BasicPageParams) => {
+  return defHttp.get({
+    url: `${ModelOfMatter.LIST}`,
+    params,
+  });
+};
+
+export const getModelTsl = (params: GetModelTslParams) => {
+  const { functionType, deviceProfileId } = params;
+  return defHttp.get({
+    url: `${ModelOfMatter.TSL}/${functionType}/${deviceProfileId}`,
+  });
+};
+
+export const createModel = (params: Partial<ModelOfMatterParams>) => {
+  return defHttp.post({
+    url: ModelOfMatter.CREATE,
+    params,
+  });
+};
+
+export const updateModel = (params: Partial<ModelOfMatterParams>) => {
+  return defHttp.put({
+    url: ModelOfMatter.UPDATE,
+    params,
+  });
+};
+
+export const deleteModel = (params: string[]) => {
+  return defHttp.delete({
+    url: ModelOfMatter.DELETE,
+    params: {
+      ids: params,
+    },
+  });
+};

@@ -5,6 +5,8 @@ export interface GetOtaPackagesParams {
   page: number;
   page: number;
   textSearch?: string;
   textSearch?: string;
   title?: string;
   title?: string;
+  sortOrder?: string;
+  sortProperty?: string;
 }
 }
 
 
 export interface CreateOtaPackagesParams {
 export interface CreateOtaPackagesParams {

@@ -20,7 +20,7 @@ enum SysDictApi {
  * @param code
  * @param code
  */
  */
 export const findDictItemByCode = (params?: DictCodeParams) => {
 export const findDictItemByCode = (params?: DictCodeParams) => {
-  return defHttp.post<SysDictItemResult>({
+  return defHttp.post<SysDictItemResult[]>({
     url: SysDictApi.CONFIG_ITEM_URL + '/find',
     url: SysDictApi.CONFIG_ITEM_URL + '/find',
     params,
     params,
   });
   });

@@ -12,6 +12,8 @@ export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
 export { default as ApiUpload } from './src/components/ApiUpload.vue';
 export { default as ApiUpload } from './src/components/ApiUpload.vue';
 
 
+export { default as StructForm } from './src/externalCompns/components/StructForm/StructForm.vue';
+
 //注册自定义组件
 //注册自定义组件
 export {
 export {
   JEasyCron,
   JEasyCron,

@@ -35,7 +35,8 @@ import ColorPicker from './components/ColorPicker.vue';
 import IconDrawer from './components/IconDrawer.vue';
 import IconDrawer from './components/IconDrawer.vue';
 import ApiUpload from './components/ApiUpload.vue';
 import ApiUpload from './components/ApiUpload.vue';
 import ApiSearchSelect from './components/ApiSearchSelect.vue';
 import ApiSearchSelect from './components/ApiSearchSelect.vue';
-import CustomeMinMaxInput from './externalCompns/components/CustomeMinMaxInput.vue';
+import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue';
+import StructForm from './externalCompns/components/StructForm/StructForm.vue';
 
 
 const componentMap = new Map<ComponentType, Component>();
 const componentMap = new Map<ComponentType, Component>();
 
 
@@ -78,7 +79,8 @@ componentMap.set('ColorPicker', ColorPicker);
 componentMap.set('IconDrawer', IconDrawer);
 componentMap.set('IconDrawer', IconDrawer);
 componentMap.set('ApiUpload', ApiUpload);
 componentMap.set('ApiUpload', ApiUpload);
 componentMap.set('ApiSearchSelect', ApiSearchSelect);
 componentMap.set('ApiSearchSelect', ApiSearchSelect);
-componentMap.set('CustomeMinMaxInput', CustomeMinMaxInput);
+componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
+componentMap.set('StructForm', StructForm);
 
 
 export function add(compName: ComponentType, component: Component) {
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);
   componentMap.set(compName, component);

+<template>
+  <div class="flex">
+    <InputNumber
+      placeholder="最小值"
+      :value="getValue.min"
+      style="width: 38%"
+      @change="(value) => emitChange(value, 'min')"
+    />
+    <span style="width: 8px"></span>
+    <span>~</span>
+    <span style="width: 8px"></span>
+    <InputNumber
+      placeholder="最大值"
+      :value="getValue.max"
+      style="width: 38%"
+      @change="(value) => emitChange(value, 'max')"
+    />
+  </div>
+</template>
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { InputNumber } from 'ant-design-vue';
+
+  const emit = defineEmits(['change', 'update:value']);
+  const props = withDefaults(
+    defineProps<{
+      value?: {
+        min: Nullable<number>;
+        max: Nullable<number>;
+      };
+    }>(),
+    {
+      value: () => ({ min: null, max: null }),
+    }
+  );
+
+  const getValue = computed(() => {
+    const { value } = props;
+    return value;
+  });
+
+  function emitChange(value: number, key: 'min' | 'max') {
+    const _value = { ...props.value, [key]: value };
+    emit('update:value', _value);
+  }
+</script>
+<style scoped></style>

-<template>
-  <div style="display: flex">
-    <a-input
-      placeholder="最小值"
-      v-model:value="param.min"
-      style="width: 38%"
-      @input="emitChange"
-    />
-    <span style="width: 8px"></span>
-    <span>~</span>
-    <span style="width: 8px"></span>
-    <a-input
-      placeholder="最大值"
-      v-model:value="param.max"
-      style="width: 38%"
-      @input="emitChange"
-    />
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, reactive, watchEffect } from 'vue';
-  import { propTypes } from '/@/utils/propTypes';
-  import { isEmpty } from '/@/utils/is';
-
-  export default defineComponent({
-    name: 'JAddInput',
-    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
-    inheritAttrs: false,
-    props: {
-      value: propTypes.object.def({}),
-    },
-    emits: ['change', 'update:value'],
-    setup(props, { emit }) {
-      const param = reactive({
-        min: '',
-        max: '',
-      });
-      watchEffect(() => {
-        initVal();
-      });
-      function initVal() {
-        if (props.value) {
-          param.min = props.value.min;
-          param.max = props.value.max;
-        }
-      }
-      function emitChange() {
-        emit('change', isEmpty(param) ? '' : param);
-        emit('update:value', isEmpty(param) ? '' : param);
-      }
-      return {
-        emitChange,
-        param,
-      };
-    },
-  });
-</script>
-<style scoped></style>

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import StructFormModel from './StructFormModel.vue';
+  import { useModal } from '/@/components/Modal';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { computed, unref } from 'vue';
+  import { buildUUID } from '/@/utils/uuid';
+  import { Divider, Button } from 'ant-design-vue';
+  import { OpenModalMode, OpenModalParams, StructRecord } from './type';
+  import { cloneDeep } from 'lodash-es';
+
+  const emit = defineEmits(['update:value']);
+
+  const props = withDefaults(
+    defineProps<{
+      value: ModelOfMatterParams[];
+    }>(),
+    {
+      value: () => [],
+    }
+  );
+
+  const getValue = computed<StructRecord[]>(() => {
+    const { value } = props;
+    return value.map((item) => {
+      return {
+        ...(item as StructRecord),
+        ...((item as StructRecord).id ? {} : { id: buildUUID() }),
+      };
+    });
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleCreateParams = () => {
+    openModal(true, {
+      mode: OpenModalMode.CREATE,
+    } as OpenModalParams);
+  };
+
+  const handleUpdate = (value: StructRecord) => {
+    openModal(true, {
+      mode: OpenModalMode.UPDATE,
+      record: value,
+    } as OpenModalParams);
+  };
+
+  const handleDelete = (value: StructRecord) => {
+    const index = unref(getValue).findIndex((item) => item.id === value.id);
+    const _value = cloneDeep(unref(getValue));
+    _value.splice(index, 1);
+    emit('update:value', _value);
+  };
+
+  const handleSaveStruct = (mode: OpenModalMode, value: StructRecord) => {
+    const _value = cloneDeep(unref(getValue));
+
+    if (mode === OpenModalMode.UPDATE) {
+      const index = unref(getValue).findIndex((item) => item.id === value.id);
+      ~index && _value.splice(index, 1, value);
+    } else {
+      _value.push(value);
+    }
+
+    emit('update:value', _value);
+  };
+</script>
+
+<template>
+  <section>
+    <div class="text-blue-500 cursor-pointer">
+      <section>
+        <div
+          class="flex bg-blue-50 mb-2 p-2 text-gray-500 justify-between items-center"
+          v-for="item in getValue"
+          :key="item.id"
+        >
+          <div>参数名称: {{ item.functionName }}</div>
+          <div class="flex">
+            <Button class="!p-0" type="link" @click="handleUpdate(item)">编辑</Button>
+            <Divider type="vertical" />
+            <Button class="!p-0" type="link" @click="handleDelete(item)">删除</Button>
+          </div>
+        </div>
+      </section>
+      <div>
+        <span class="mr-2">
+          <PlusOutlined />
+        </span>
+        <span @click="handleCreateParams">增加参数</span>
+      </div>
+    </div>
+    <StructFormModel @register="registerModal" @submit="handleSaveStruct" />
+  </section>
+</template>
+
+<style lang="less" scoped></style>

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchemas } from './config';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { OpenModalMode, OpenModalParams, StructRecord } from './type';
+  import { ref, unref } from 'vue';
+  import { transformFormValue } from './util';
+  import { cloneDeep } from 'lodash-es';
+
+  const modalReceiveRecord = ref<OpenModalParams>({
+    mode: OpenModalMode.CREATE,
+  });
+
+  const emit = defineEmits(['register', 'submit']);
+
+  const [register, { validate, setFieldsValue }] = useForm({
+    labelWidth: 100,
+    schemas: formSchemas,
+    actionColOptions: {
+      span: 14,
+    },
+    showResetButton: false,
+    submitOnReset: false,
+    showActionButtonGroup: false,
+  });
+
+  const [registerModal, { closeModal }] = useModalInner((record: OpenModalParams) => {
+    modalReceiveRecord.value = record;
+    const data = record.record || {};
+    const { functionJson = {} } = data! as StructRecord;
+    const { specs = {} } = functionJson as StructRecord['functionJson'];
+    if (record.record) {
+      const value = {
+        ...data,
+        ...functionJson,
+        ...specs,
+        valueRange: {
+          min: specs.min,
+          max: specs.max,
+        },
+      };
+
+      setFieldsValue(value);
+    }
+  });
+
+  const handleSubmit = async () => {
+    try {
+      const _value = await validate();
+      let value = transformFormValue(_value);
+      value = {
+        ...value,
+        ...(unref(modalReceiveRecord)?.record?.id
+          ? { id: unref(modalReceiveRecord)?.record?.id }
+          : {}),
+      };
+      emit('submit', unref(modalReceiveRecord).mode, cloneDeep(value));
+      closeModal();
+    } catch (error) {}
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    :title="modalReceiveRecord.mode === OpenModalMode.CREATE ? '创建参数' : '编辑参数'"
+    :width="800"
+    @ok="handleSubmit"
+    destroy-on-close
+  >
+    <BasicForm @register="register" />
+  </BasicModal>
+</template>
+
+<style lang="less" scoped></style>

+import { h } from 'vue';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { FormSchema } from '/@/components/Table';
+import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+
+export enum DateTypeEnum {
+  IS_NUMBER_INT = 'INT',
+  IS_NUMBER_DOUBLE = 'DOUBLE',
+  IS_STRING = 'TEXT',
+  IS_STRUCT = 'STRUCT',
+  IS_BOOL = 'BOOL',
+}
+
+export const formSchemas: FormSchema[] = [
+  {
+    field: FormField.FUNCTION_NAME,
+    label: '功能名称',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入功能名称',
+    },
+  },
+  {
+    field: FormField.IDENTIFIER,
+    label: '标识符',
+    required: true,
+    component: 'Input',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入标识符',
+    },
+  },
+  {
+    field: FormField.TYPE,
+    label: '数据类型',
+    required: true,
+    component: 'ApiSelect',
+    colProps: {
+      span: 9,
+    },
+    defaultValue: 'INT',
+    componentProps: {
+      placeholder: '请选择数据类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'data_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: FormField.VALUE_RANGE,
+    label: '取值范围',
+    component: 'CustomMinMaxInput',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    colProps: {
+      span: 18,
+    },
+    ifShow: ({ values }) =>
+      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+  },
+  {
+    field: FormField.STEP,
+    label: '步长',
+    component: 'InputNumber',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入步长',
+    },
+    ifShow: ({ values }) =>
+      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+  },
+  {
+    field: FormField.UNIT_NAME,
+    label: '单位名称',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: FormField.UNIT,
+    label: '单位',
+    component: 'ApiSelect',
+    colProps: {
+      span: 9,
+    },
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请选择单位',
+        api: findDictItemByCode,
+        params: {
+          dictCode: 'attribute_unit',
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+        onChange(_, record: Record<'label' | 'value', string>) {
+          const { label } = record;
+          setFieldsValue({ [FormField.UNIT_NAME]: label });
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+    ifShow: ({ values }) =>
+      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
+      values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+    renderComponentContent: () => {
+      return {
+        option: (params: Record<'label' | 'value', string>) => {
+          const { label, value } = params;
+          return h('span', `${label} / ${value}`);
+        },
+      };
+    },
+  },
+  {
+    field: FormField.BOOL_CLOSE,
+    component: 'Input',
+    required: true,
+    label: '0 -',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      placeholder: '如：关',
+    },
+    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
+  },
+  {
+    field: FormField.BOOL_OPEN,
+    component: 'Input',
+    required: true,
+    label: '1 -',
+    colProps: {
+      span: 18,
+    },
+    componentProps: {
+      placeholder: '如：开',
+    },
+    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
+  },
+  {
+    field: FormField.LENGTH,
+    component: 'Input',
+    required: true,
+    label: '数据长度',
+    defaultValue: '10240',
+    colProps: {
+      span: 8,
+    },
+    componentProps: {
+      placeholder: '请输入数据长度',
+    },
+    renderComponentContent: () => {
+      return {
+        suffix: () => '字节',
+      };
+    },
+    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_STRING,
+  },
+  {
+    field: FormField.R_W_FLAG,
+    component: 'ApiRadioGroup',
+    label: '读写类型',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    defaultValue: 'READ_ONLY',
+    componentProps: {
+      placeholder: '请选择读写类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'read_write_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+  {
+    field: FormField.SPECS_LIST,
+    label: 'JSON对象',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_STRUCT,
+    rules: [
+      {
+        required: true,
+        validator(_rule, value, _callback) {
+          console.log(value);
+          return Promise.resolve();
+        },
+      },
+    ],
+  },
+  {
+    field: FormField.REFARK,
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+      maxLength: 100,
+      placeholder: '请输入描述',
+    },
+  },
+];

+import { DateTypeEnum } from './config';
+import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+
+export enum OpenModalMode {
+  CREATE = 'create',
+  UPDATE = 'update',
+}
+
+export interface OpenModalParams {
+  mode: OpenModalMode;
+  record?: StructRecord;
+}
+
+export interface StructFormValue
+  extends Partial<Record<Exclude<FormField, FormField.VALUE_RANGE | FormField.STRUCT>, string>> {
+  [FormField.TYPE]: DateTypeEnum;
+  [FormField.VALUE_RANGE]?: {
+    [FormField.MIN]: string;
+    [FormField.MAX]: string;
+  };
+  [FormField.STRUCT]: StructRecord[];
+}
+
+export interface StructRecord extends ModelOfMatterParams {
+  id: string;
+}

+import { DateTypeEnum } from './config';
+import { StructFormValue } from './type';
+import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
+
+export const validateValueRangeAndStep = (min: number, step: number, max: number) => {
+  const { createMessage } = useMessage();
+  if (min > max) {
+    createMessage.error('最大值必须大于最小值,整数型不能有小数位,单精度有效位为7,双精度为16');
+    throw '最大值必须大于最小值,整数型不能有小数位,单精度有效位为7,双精度为16';
+  }
+
+  if (step > max - min) {
+    createMessage.error('步长不能大于取值范围的差值');
+    throw '步长不能大于取值范围的差值';
+  }
+};
+
+export const validateValueBool = (boolClose, boolOpen) => {
+  const { createMessage } = useMessage();
+
+  if (boolClose == boolOpen) {
+    createMessage.error('布尔值不能相同');
+    throw '布尔值不能相同';
+  }
+};
+
+export const validateValueStruct = (data: []) => {
+  const { createMessage } = useMessage();
+
+  if (data.length === 0) {
+    createMessage.error('struct不能为空');
+    throw 'struct不能为空';
+  }
+};
+
+export function transformFormValue(value: StructFormValue): Partial<ModelOfMatterParams> {
+  const {
+    type,
+    valueRange,
+    step,
+    length = '',
+    boolClose,
+    boolOpen,
+    unit,
+    unitName,
+    functionName,
+    identifier,
+    remark,
+    specs,
+  } = value;
+  const { min, max } = valueRange! || {};
+  const basic = { functionName, identifier, remark };
+  let functionJson = {} as unknown as ModelOfMatterParams['functionJson'];
+
+  console.log(value);
+  switch (type) {
+    case DateTypeEnum.IS_NUMBER_INT:
+      validateValueRangeAndStep(Number(min), Number(step), Number(max));
+      functionJson = {
+        type,
+        specs: { max, min, valueRange, step, unit, unitName },
+      };
+      break;
+
+    case DateTypeEnum.IS_NUMBER_DOUBLE:
+      validateValueRangeAndStep(Number(min), Number(step), Number(max));
+      functionJson = {
+        type,
+        specs: { max, min, valueRange, step, unit, unitName },
+      };
+      break;
+
+    case DateTypeEnum.IS_BOOL:
+      validateValueBool(Number(boolClose), Number(boolOpen));
+      functionJson = {
+        type,
+        specs: {
+          boolOpen: boolOpen,
+          boolClose: boolClose,
+        },
+      };
+      break;
+
+    case DateTypeEnum.IS_STRING:
+      functionJson = {
+        type,
+        specs: { length },
+      };
+      break;
+
+    case DateTypeEnum.IS_STRUCT:
+      functionJson = {
+        type,
+        specs: specs! as unknown as ModelOfMatterParams[],
+      };
+      break;
+  }
+  return {
+    ...basic,
+    functionType: FunctionType.PROPERTIES,
+    functionJson,
+  };
+}

@@ -112,9 +112,10 @@ export type ComponentType =
   | 'Render'
   | 'Render'
   | 'Slider'
   | 'Slider'
   | 'JAddInput'
   | 'JAddInput'
-  | 'CustomeMinMaxInput'
+  | 'CustomMinMaxInput'
   | 'Rate'
   | 'Rate'
   | 'ColorPicker'
   | 'ColorPicker'
   | 'IconDrawer'
   | 'IconDrawer'
   | 'ApiUpload'
   | 'ApiUpload'
-  | 'ApiSearchSelect';
+  | 'ApiSearchSelect'
+  | 'StructForm';

@@ -3,8 +3,9 @@
     <div
     <div
       class="cursor-pointer flex py-4 fold-icon absolute rounded svg:fill-gray-400 hover:bg-gray-200"
       class="cursor-pointer flex py-4 fold-icon absolute rounded svg:fill-gray-400 hover:bg-gray-200"
       :class="foldFlag ? '' : '-right-4'"
       :class="foldFlag ? '' : '-right-4'"
+      @click="handleFold"
     >
     >
-      <div @click="handleFold">
+      <div>
         <CaretRightOutlined
         <CaretRightOutlined
           :class="[foldFlag ? '' : 'rotate-180']"
           :class="[foldFlag ? '' : 'rotate-180']"
           class="transform fill-gray-100"
           class="transform fill-gray-100"

@@ -16,12 +16,15 @@
           @open-gateway-device="handleOpenGatewayDevice"
           @open-gateway-device="handleOpenGatewayDevice"
         />
         />
       </TabPane>
       </TabPane>
-      <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
+      <TabPane v-if="deviceDetail?.deviceType !== 'GATEWAY'" key="modelOfMatter" tab="物模型">
+        <ModelOfMatter :deviceDetail="deviceDetail" />
+      </TabPane>
+      <!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
         <RealTimeData :deviceDetail="deviceDetail" />
         <RealTimeData :deviceDetail="deviceDetail" />
       </TabPane>
       </TabPane>
       <TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
       <TabPane key="7" tab="历史数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
         <HistoryData :deviceDetail="deviceDetail" />
         <HistoryData :deviceDetail="deviceDetail" />
-      </TabPane>
+      </TabPane> -->
       <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
       <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
         <CommandIssuance :deviceDetail="deviceDetail" />
         <CommandIssuance :deviceDetail="deviceDetail" />
       </TabPane>
       </TabPane>
@@ -50,13 +53,14 @@
 
 
   import { Tabs } from 'ant-design-vue';
   import { Tabs } from 'ant-design-vue';
   import Detail from '../tabs/Detail.vue';
   import Detail from '../tabs/Detail.vue';
-  import RealTimeData from '../tabs/RealTimeData.vue';
+  // import RealTimeData from '../tabs/RealTimeData.vue';
   import Alarm from '../tabs/Alarm.vue';
   import Alarm from '../tabs/Alarm.vue';
   import ChildDevice from '../tabs/ChildDevice.vue';
   import ChildDevice from '../tabs/ChildDevice.vue';
   import TBoxDetail from '../tabs/TBoxDetail.vue';
   import TBoxDetail from '../tabs/TBoxDetail.vue';
   import CommandIssuance from '../tabs/CommandIssuance.vue';
   import CommandIssuance from '../tabs/CommandIssuance.vue';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
-  import HistoryData from '../tabs/HistoryData.vue';
+  // import HistoryData from '../tabs/HistoryData.vue';
+  import ModelOfMatter from '../tabs/ModelOfMatter.vue';
   export default defineComponent({
   export default defineComponent({
     name: 'DeviceModal',
     name: 'DeviceModal',
     components: {
     components: {
@@ -64,12 +68,13 @@
       Tabs,
       Tabs,
       TabPane: Tabs.TabPane,
       TabPane: Tabs.TabPane,
       Detail,
       Detail,
-      RealTimeData,
+      // RealTimeData,
       Alarm,
       Alarm,
       ChildDevice,
       ChildDevice,
       CommandIssuance,
       CommandIssuance,
       TBoxDetail,
       TBoxDetail,
-      HistoryData,
+      // HistoryData,
+      ModelOfMatter,
     },
     },
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {
     setup(_props, { emit }) {

@@ -23,6 +23,7 @@
 
 
   const props = defineProps<{
   const props = defineProps<{
     deviceDetail: DeviceDetail;
     deviceDetail: DeviceDetail;
+    attr?: string;
   }>();
   }>();
 
 
   const chartRef = ref();
   const chartRef = ref();
@@ -119,6 +120,10 @@
     const { tbDeviceId } = props.deviceDetail || {};
     const { tbDeviceId } = props.deviceDetail || {};
     try {
     try {
       deviceAttrs.value = (await getDeviceDataKeys(tbDeviceId)) || [];
       deviceAttrs.value = (await getDeviceDataKeys(tbDeviceId)) || [];
+
+      if (props.attr) {
+        method.setFieldsValue({ keys: props.attr });
+      }
     } catch (error) {}
     } catch (error) {}
   };
   };
 
 
@@ -139,9 +144,11 @@
 
 
     if (!hasDeviceAttr()) return;
     if (!hasDeviceAttr()) return;
 
 
+    const keys = props.attr ? props.attr : unref(deviceAttrs).join();
+
     const res = await getDeviceHistoryInfo({
     const res = await getDeviceHistoryInfo({
       entityId: props.deviceDetail.tbDeviceId,
       entityId: props.deviceDetail.tbDeviceId,
-      keys: unref(deviceAttrs).join(),
+      keys,
       startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
       startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
       endTs: Date.now(),
       endTs: Date.now(),
       agg: AggregateDataEnum.NONE,
       agg: AggregateDataEnum.NONE,
@@ -169,12 +176,12 @@
 </script>
 </script>
 
 
 <template>
 <template>
-  <section class="flex flex-col p-4 h-full" style="color: #f0f2f5">
-    <section class="bg-white p-3">
+  <section class="flex flex-col p-4 h-full" style="background-color: #f0f2f5">
+    <section class="bg-white p-3 mb-4">
       <TimePeriodForm @register="register" />
       <TimePeriodForm @register="register" />
     </section>
     </section>
     <section class="bg-white p-3">
     <section class="bg-white p-3">
-      <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width: '100%' }">
+      <div v-show="isNull" ref="chartRef" :style="{ height: '400px', width: '100%' }">
         <Spin :spinning="loading" :absolute="true" />
         <Spin :spinning="loading" :absolute="true" />
       </div>
       </div>
       <Empty v-show="!isNull" />
       <Empty v-show="!isNull" />

+<script lang="ts" setup>
+  import { nextTick, reactive, ref, unref } from 'vue';
+  import { List, Button, Tooltip, Card } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { realTimeDataColumns } from '../../config/detail.config';
+  import { useWebSocket } from '@vueuse/core';
+  import { getAuthCache } from '/@/utils/auth';
+  import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import HistoryData from './HistoryData.vue';
+  import { BasicModal, useModal } from '/@/components/Modal';
+
+  interface ReceiveMessage {
+    data: {
+      [key: string]: [number, string][];
+    };
+  }
+
+  interface DataSource {
+    key?: string;
+    value?: string;
+    time?: number;
+  }
+
+  const props = defineProps<{
+    deviceDetail: Record<'tbDeviceId', string>;
+  }>();
+
+  const grid = {
+    gutter: 8,
+    column: 3,
+  };
+
+  const token = getAuthCache(JWT_TOKEN_KEY);
+
+  const socketInfo = reactive({
+    origin: `${import.meta.env.VITE_WEB_SOCKET}${token}`,
+    attr: undefined as string | undefined,
+    originData: [] as DataSource[],
+    dataSource: [] as DataSource[],
+    message: {} as ReceiveMessage['data'],
+    sendValue: {
+      tsSubCmds: [
+        {
+          entityType: 'DEVICE',
+          entityId: props.deviceDetail!.tbDeviceId || 'd2526c70-60a9-11ed-ba9c-6b98bfcc8255',
+          scope: 'LATEST_TELEMETRY',
+          cmdId: 1,
+        },
+      ],
+    },
+  });
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: [
+      {
+        field: 'value',
+        label: '键/值',
+        component: 'Input',
+        colProps: { span: 8 },
+        componentProps: {
+          placeholder: '请输入键/值',
+        },
+      },
+    ],
+    labelWidth: 100,
+    compact: true,
+    showAdvancedButton: true,
+    submitFunc: async () => {
+      try {
+        const { value } = getFieldsValue() || {};
+        if (!value) setTableData(socketInfo.originData);
+        const data = unref(socketInfo.originData).filter(
+          (item) => item.key?.includes(value) || item.value?.includes(value)
+        );
+        await nextTick();
+        socketInfo.dataSource = data;
+        setTableData(data);
+      } catch (error) {}
+    },
+    resetFunc: async () => {
+      try {
+        socketInfo.dataSource = socketInfo.originData;
+        setTableData(socketInfo.originData);
+      } catch (error) {}
+    },
+  });
+
+  const [registerTable, { setTableData }] = useTable({
+    columns: realTimeDataColumns,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  enum Mode {
+    TABLE = 'table',
+    CARD = 'card',
+  }
+
+  const mode = ref<Mode>(Mode.CARD);
+
+  const switchMode = async (value: Mode) => {
+    mode.value = value;
+    await nextTick();
+    setTableData(socketInfo.dataSource);
+  };
+
+  const { createMessage } = useMessage();
+
+  const { send, close, data } = useWebSocket(socketInfo.origin, {
+    onConnected() {
+      send(JSON.stringify(socketInfo.sendValue));
+    },
+    async onMessage() {
+      try {
+        const value = JSON.parse(unref(data)) as ReceiveMessage;
+        if (value) {
+          const { data } = value;
+          const keys = Object.keys(data);
+          keys.forEach((key) => {
+            socketInfo.message[key] = value.data[key];
+          });
+
+          const allKeys = Object.keys(socketInfo.message);
+
+          socketInfo.originData = socketInfo.dataSource = allKeys.map((key) => {
+            const [time, value] = socketInfo.message[key].at(0) || [];
+            return { key, value, time };
+          });
+
+          await nextTick();
+          setTableData(socketInfo.dataSource);
+        }
+      } catch (error) {}
+    },
+    onDisconnected() {
+      console.log('断开连接了');
+      close();
+    },
+    onError() {
+      createMessage.error('webSocket连接超时,请联系管理员');
+    },
+  });
+
+  const handleShowDetail = (record: DataSource) => {
+    const { key } = record;
+    socketInfo.attr = key;
+    openModal(true);
+  };
+</script>
+
+<template>
+  <PageWrapper
+    dense
+    content-class="flex flex-col bg-transparent p-4"
+    :content-style="{ backgroundColor: '#F0F2F5' }"
+  >
+    <section class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4">
+      <div class="flex-auto">
+        <BasicForm @register="registerForm" />
+      </div>
+    </section>
+    <section class="bg-light-50">
+      <div v-show="mode === Mode.CARD" class="flex h-70px items-center justify-end p-2">
+        <Tooltip title="卡片模式">
+          <Button
+            :class="[mode === Mode.CARD && '!bg-blue-500 svg:text-light-50']"
+            class="!p-2 !children:flex flex justify-center items-center border-r-0"
+            @click="switchMode(Mode.CARD)"
+          >
+            <AppstoreOutlined />
+          </Button>
+        </Tooltip>
+
+        <Tooltip title="列表模式">
+          <Button
+            class="!p-2 !children:flex flex justify-center items-center"
+            @click="switchMode(Mode.TABLE)"
+          >
+            <BarsOutlined />
+          </Button>
+        </Tooltip>
+      </div>
+      <List
+        v-if="mode === Mode.CARD"
+        class="list-mode !px-2"
+        :data-source="socketInfo.dataSource"
+        :grid="grid"
+      >
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card class="shadow-md">
+              <template #title>
+                <span class="text-base font-normal">{{ item.key }}</span>
+              </template>
+              <template #extra>
+                <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
+              </template>
+              <section>
+                <div class="flex font-bold text-lg mb-4">
+                  <div>{{ item.value }}</div>
+                </div>
+                <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) }}</div>
+              </section>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+
+    <BasicTable v-if="mode === Mode.TABLE" @register="registerTable">
+      <template #toolbar>
+        <div v-show="mode === Mode.TABLE" class="flex h-70px items-center justify-end p-2">
+          <Tooltip title="卡片模式">
+            <Button
+              class="!p-2 !children:flex flex justify-center items-center border-r-0"
+              @click="switchMode(Mode.CARD)"
+            >
+              <AppstoreOutlined />
+            </Button>
+          </Tooltip>
+
+          <Tooltip title="列表模式">
+            <Button
+              :class="[mode === Mode.TABLE && '!bg-blue-500 svg:text-light-50']"
+              class="!p-2 !children:flex flex justify-center items-center"
+              @click="switchMode(Mode.TABLE)"
+            >
+              <BarsOutlined />
+            </Button>
+          </Tooltip>
+        </div>
+      </template>
+    </BasicTable>
+    <BasicModal
+      @register="registerModal"
+      title="历史数据"
+      width="50%"
+      destroy-on-close
+      dialogClass="history-modal"
+    >
+      <HistoryData :deviceDetail="props.deviceDetail" :attr="socketInfo.attr" />
+    </BasicModal>
+  </PageWrapper>
+</template>
+
+<style scoped lang="less">
+  .list-mode:deep(.ant-card-head) {
+    border-bottom: 0;
+  }
+
+  .list-mode:deep(.ant-card-body) {
+    padding-top: 0;
+  }
+</style>
+
+<style>
+  .history-modal .ant-input-number {
+    min-width: 0 !important;
+  }
+</style>

 <template>
 <template>
   <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="60%">
   <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="60%">
     <Tabs :animated="true" v-model:activeKey="activeKey" @change="handlePanelChange">
     <Tabs :animated="true" v-model:activeKey="activeKey" @change="handlePanelChange">
-      <TabPane forceRender key="product" tab="产品">
+      <TabPane key="product" tab="产品">
         <div class="relative">
         <div class="relative">
           <DeviceConfigurationStep :ifShowBtn="false" ref="DevConStRef" />
           <DeviceConfigurationStep :ifShowBtn="false" ref="DevConStRef" />
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
         </div>
         </div>
       </TabPane>
       </TabPane>
-      <TabPane forceRender key="transport" tab="传输配置">
+      <TabPane key="transport" tab="传输配置">
         <div class="relative">
         <div class="relative">
           <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" />
           <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" />
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
         </div>
         </div>
       </TabPane>
       </TabPane>
-      <TabPane forceRender key="modelOfMatter" tab="物模型管理">
-        <PhysicalModelManagementStep />
+      <TabPane key="modelOfMatter" tab="物模型管理">
+        <PhysicalModelManagementStep :record="record" />
       </TabPane>
       </TabPane>
     </Tabs>
     </Tabs>
   </BasicDrawer>
   </BasicDrawer>
@@ -27,14 +27,15 @@
   import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
   import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
   import { ref, unref } from 'vue';
   import { ref, unref } from 'vue';
   import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
   import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
 
 
   defineEmits(['register']);
   defineEmits(['register']);
 
 
   type ActiveKey = 'product' | 'transport' | 'modelOfMatter';
   type ActiveKey = 'product' | 'transport' | 'modelOfMatter';
 
 
-  const activeKey = ref<ActiveKey>('product');
+  const activeKey = ref<ActiveKey>('modelOfMatter');
 
 
-  const record = ref<Recordable>({});
+  const record = ref<DeviceRecord>({} as unknown as DeviceRecord);
 
 
   const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
   const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
@@ -47,7 +48,7 @@
     unref(TransConStRef)?.setFormData(res);
     unref(TransConStRef)?.setFormData(res);
   };
   };
 
 
-  const [register, {}] = useDrawerInner(async (data: Recordable) => {
+  const [register, {}] = useDrawerInner(async (data: { record: DeviceRecord }) => {
     activeKey.value = 'product';
     activeKey.value = 'product';
     record.value = await deviceConfigGetDetail(data.record.id);
     record.value = await deviceConfigGetDetail(data.record.id);
     setDeviceConfFormData(unref(record));
     setDeviceConfFormData(unref(record));

@@ -3,10 +3,9 @@ import { FormSchema } from '/@/components/Table';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { MessageEnum } from '/@/enums/messageEnum';
 import { MessageEnum } from '/@/enums/messageEnum';
 import { numberRule } from '/@/utils/rules';
 import { numberRule } from '/@/utils/rules';
-import { Tag } from 'ant-design-vue';
-import { h } from 'vue';
 
 
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
+import { FormField, FunctionType } from './step/cpns/physical/cpns/config';
 
 
 export const steps = [
 export const steps = [
   {
   {
@@ -19,50 +18,37 @@ export const steps = [
   },
   },
 ];
 ];
 
 
+export const formatFunctionType: Record<FunctionType, string> = {
+  [FunctionType.PROPERTIES]: '属性',
+  [FunctionType.EVENTS]: '事件',
+  [FunctionType.SERVICE]: '事件',
+};
+
 export const physicalColumn: BasicColumn[] = [
 export const physicalColumn: BasicColumn[] = [
   {
   {
     title: '功能类型',
     title: '功能类型',
-    dataIndex: 'dType',
+    dataIndex: FormField.FUNCTION_TYPE,
     width: 90,
     width: 90,
+    format: (text: FunctionType) => {
+      return formatFunctionType[text];
+    },
   },
   },
   {
   {
     title: '功能名称',
     title: '功能名称',
-    dataIndex: 'name',
+    dataIndex: FormField.FUNCTION_NAME,
     width: 90,
     width: 90,
   },
   },
   {
   {
     title: '标识符',
     title: '标识符',
-    dataIndex: 'type',
+    dataIndex: FormField.IDENTIFIER,
     width: 90,
     width: 90,
   },
   },
   {
   {
     title: '数据类型',
     title: '数据类型',
-    dataIndex: 'transportType',
+    dataIndex: 'functionJson.type',
     width: 100,
     width: 100,
   },
   },
   {
   {
-    title: '单位',
-    dataIndex: 'description1',
-    width: 90,
-  },
-  {
-    title: '读写类型',
-    dataIndex: 'default',
-    width: 60,
-    customRender: ({ record }) => {
-      const status = record.actionStatus;
-      const enable = status === 'SUCCESS' ? '读写' : '只读';
-      const color = enable === '读写' ? 'blue' : 'green';
-      const text = enable === '读写' ? '读写' : '只读';
-      return h(Tag, { color }, () => text);
-    },
-  },
-  {
-    title: '创建人',
-    dataIndex: 'description',
-    width: 80,
-  },
-  {
     title: '创建时间',
     title: '创建时间',
     dataIndex: 'createTime',
     dataIndex: 'createTime',
     width: 150,
     width: 150,
@@ -411,130 +397,3 @@ export const formSchema: FormSchema[] = [
     },
     },
   },
   },
 ];
 ];
-
-export const mockData: any = async () => {
-  const res = await [
-    {
-      dType: 'events',
-      name: '亮度百分比',
-      type: 'Brightness',
-      transportType: 'int32(整数型)',
-      description1: '饱和度/aw',
-      default: '1',
-      actionStatus: 'SUCCESS',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'service',
-      name: '运行状态',
-      type: 'RunningState',
-      transportType: 'bool(布尔型)',
-      description1: '',
-      default: '1',
-      actionStatus: 'FA',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'attr',
-      name: '设备运行状态',
-      type: 'E_Status_UP',
-      transportType: 'text(字符串)',
-      description1: '',
-      default: '1',
-      actionStatus: 'D',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'attr',
-      name: '过流告警使能',
-      type: 'OverCurrentEnable',
-      transportType: 'struct(结构体)',
-      description1: '',
-      default: '1',
-      actionStatus: 'SUCCESS',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'events',
-      name: '变频器运行状态1',
-      type: 'Brightness',
-      transportType: 'int32(整数型)',
-      description1: '转每分钟/turn/m',
-      default: '1',
-      actionStatus: 'Fa',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'service',
-      name: '产品序列号',
-      type: 'SerialNo',
-      transportType: 'text(字符串)',
-      description1: '',
-      default: '1',
-      actionStatus: 'FA',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'service',
-      name: '音量百分比',
-      type: 'Volume',
-      transportType: 'int32(整数型)',
-      description1: '分贝/db',
-      default: '1',
-      actionStatus: 'SUCCESS',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'attr',
-      name: '易释放氰化物',
-      type: 'easy_release_cyanide',
-      transportType: 'double(双精度浮点型)',
-      description1: '毫克每升/mg/L',
-      default: '1',
-      actionStatus: 'SUCCESS',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'attr',
-      name: '湿度',
-      type: 'Humidity',
-      transportType: 'float(单精度浮点型)',
-      description1: '相对湿度/%RH',
-      default: '1',
-      actionStatus: 'SUCCESS',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'attr',
-      name: '设备固件版本',
-      type: 'FirmwareVersion',
-      transportType: 'text(字符串)',
-      description1: '',
-      default: '1',
-      actionStatus: 'SUCCESS',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-    {
-      dType: 'events',
-      name: '用电量',
-      type: 'PowerConsumption',
-      transportType: 'float(单精度浮点型)',
-      description1: '千瓦时/kW.h',
-      default: '1',
-      actionStatus: 'F',
-      description: 'cheche',
-      createTime: '2022-10-20 10:24:22',
-    },
-  ];
-  return res;
-};

@@ -8,28 +8,29 @@
       <template #toolbar>
       <template #toolbar>
         <div class="flex-auto">
         <div class="flex-auto">
           <div class="mb-2">
           <div class="mb-2">
-            <a-alert v-if="!isShowBtn" type="info" show-icon>
+            <Alert type="info" show-icon>
               <template #message>
               <template #message>
-                <span>
-                  当前展示的是已发布到线上的功能定义，如需修改，请点击
+                <span v-if="!isShowBtn">
+                  当前展示的是已发布到线上的功能定义,如需修改,请点击
                   <span
                   <span
                     @click="handleEditPhysicalModel"
                     @click="handleEditPhysicalModel"
                     class="cursor-pointer text-blue-400"
                     class="cursor-pointer text-blue-400"
                     size="small"
                     size="small"
                   >
                   >
-                    “编辑物模型”
+                    "编辑物模型"
                   </span>
                   </span>
                 </span>
                 </span>
+                <span v-if="isShowBtn"> 您正在编辑的是草稿,需点击发布后,物模型才会正式生效. </span>
               </template>
               </template>
-            </a-alert>
+            </Alert>
           </div>
           </div>
           <div class="flex justify-between items-end">
           <div class="flex justify-between items-end">
             <div class="flex gap-2">
             <div class="flex gap-2">
               <Authority value="">
               <Authority value="">
-                <a-button v-if="isShowBtn" type="primary" @click="handleCreateOrEdit(null)">
+                <Button v-if="isShowBtn" type="primary" @click="handleCreateOrEdit()">
                   新增物模型
                   新增物模型
-                </a-button>
-                <a-button type="primary" @click="handleOpenTsl"> 物模型TSL </a-button>
+                </Button>
+                <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button>
               </Authority>
               </Authority>
             </div>
             </div>
             <div class="flex gap-2">
             <div class="flex gap-2">
@@ -40,25 +41,25 @@
                   cancel-text="取消"
                   cancel-text="取消"
                   @confirm="handleEmit"
                   @confirm="handleEmit"
                 >
                 >
-                  <a-button v-if="isShowBtn" type="primary"> 发布上线 </a-button>
+                  <Button v-if="isShowBtn" type="primary"> 发布上线 </Button>
                 </Popconfirm>
                 </Popconfirm>
-                <a-button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn">
+                <Button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn">
                   返回
                   返回
-                </a-button>
+                </Button>
                 <Popconfirm
                 <Popconfirm
                   title="您确定要批量删除数据"
                   title="您确定要批量删除数据"
                   ok-text="确定"
                   ok-text="确定"
                   cancel-text="取消"
                   cancel-text="取消"
                   @confirm="handleDeleteOrBatchDelete(null)"
                   @confirm="handleDeleteOrBatchDelete(null)"
                 >
                 >
-                  <a-button
+                  <Button
                     style="display: none"
                     style="display: none"
                     type="primary"
                     type="primary"
                     color="error"
                     color="error"
                     :disabled="hasBatchDelete"
                     :disabled="hasBatchDelete"
                   >
                   >
                     批量删除
                     批量删除
-                  </a-button>
+                  </Button>
                 </Popconfirm>
                 </Popconfirm>
               </Authority>
               </Authority>
             </div>
             </div>
@@ -96,39 +97,46 @@
         />
         />
       </template>
       </template>
     </BasicTable>
     </BasicTable>
-    <PhysicalModelModal @register="registerModal" @success="handleSuccess" />
-    <PhysicalModelTsl @register="registerModalTsl" />
+    <PhysicalModelModal
+      :record="$props.record"
+      @register="registerModal"
+      @success="handleSuccess"
+    />
+    <PhysicalModelTsl :record="$props.record" @register="registerModalTsl" />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { physicalColumn } from '../device.profile.data';
   import { physicalColumn } from '../device.profile.data';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-  import { deleteReportManage } from '/@/api/report/reportManager';
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
-  // import { mockData } from '/@/api/device/deviceConfigApi';
   import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
   import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
   import PhysicalModelTsl from './cpns/physical/PhysicalModelTsl.vue';
   import PhysicalModelTsl from './cpns/physical/PhysicalModelTsl.vue';
-  import { Popconfirm } from 'ant-design-vue';
+  import { Popconfirm, Button, Alert } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { mockData } from '../device.profile.data';
-
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { deleteModel, getModelList } from '/@/api/device/modelOfMatter';
+  import { OpenModelOfMatterModelParams, OpenModelMode } from './cpns/physical/types';
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { ref } from 'vue';
   defineEmits(['register']);
   defineEmits(['register']);
+
+  defineProps<{
+    record: DeviceRecord;
+  }>();
+
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
   const isShowBtn = ref(false);
   const isShowBtn = ref(false);
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
   const [registerModalTsl, { openModal: openModalTsl }] = useModal();
   const [registerModalTsl, { openModal: openModalTsl }] = useModal();
 
 
   const [registerTable, { reload, setProps }] = useTable({
   const [registerTable, { reload, setProps }] = useTable({
-    // api: deviceConfigGetQuery,
-    api: mockData,
+    api: getModelList,
     columns: physicalColumn,
     columns: physicalColumn,
     showIndexColumn: false,
     showIndexColumn: false,
     clickToRowSelect: false,
     clickToRowSelect: false,
     useSearchForm: false,
     useSearchForm: false,
-    // rowKey: 'id',
     showTableSetting: true,
     showTableSetting: true,
     bordered: true,
     bordered: true,
     actionColumn: {
     actionColumn: {
@@ -139,16 +147,18 @@
       fixed: 'right',
       fixed: 'right',
     },
     },
   });
   });
+
   // 刷新
   // 刷新
   const handleSuccess = () => {
   const handleSuccess = () => {
     reload();
     reload();
   };
   };
 
 
   const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
   const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
-    deleteReportManage,
+    deleteModel,
     handleSuccess,
     handleSuccess,
     setProps
     setProps
   );
   );
+
   selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
   selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
     // Demo:status为1的选择框禁用
     // Demo:status为1的选择框禁用
     if (record.status === 1) {
     if (record.status === 1) {
@@ -157,38 +167,36 @@
       return { disabled: false };
       return { disabled: false };
     }
     }
   };
   };
-  const handleViewDetail = (record: Recordable | null) => {
+
+  const handleViewDetail = (record: ModelOfMatterParams) => {
     if (record) {
     if (record) {
       openModal(true, {
       openModal(true, {
-        isUpdate: true,
         record,
         record,
-        isView: true,
-        isText: 'view',
-      });
+        mode: OpenModelMode.VIEW,
+      } as OpenModelOfMatterModelParams);
     }
     }
   };
   };
+
   // 新增或编辑
   // 新增或编辑
-  const handleCreateOrEdit = (record: Recordable | null) => {
+  const handleCreateOrEdit = (record?: ModelOfMatterParams) => {
     if (record) {
     if (record) {
       openModal(true, {
       openModal(true, {
-        isUpdate: false,
+        mode: OpenModelMode.UPDATE,
         record,
         record,
-        isView: false,
-        isText: 'edit',
-      });
+      } as OpenModelOfMatterModelParams);
     } else {
     } else {
       openModal(true, {
       openModal(true, {
-        isUpdate: true,
-        isView: false,
-        isText: 'add',
-      });
+        mode: OpenModelMode.CREATE,
+      } as OpenModelOfMatterModelParams);
     }
     }
   };
   };
+
   const handleOpenTsl = () => {
   const handleOpenTsl = () => {
     openModalTsl(true, {
     openModalTsl(true, {
       isUpdate: true,
       isUpdate: true,
     });
     });
   };
   };
+
   const handleEditPhysicalModel = () => (isShowBtn.value = true);
   const handleEditPhysicalModel = () => (isShowBtn.value = true);
 
 
   const handleReturn = () => (isShowBtn.value = false);
   const handleReturn = () => (isShowBtn.value = false);

@@ -2,69 +2,66 @@
   <div>
   <div>
     <BasicModal
     <BasicModal
       :maskClosable="false"
       :maskClosable="false"
+      destroy-on-close
       v-bind="$attrs"
       v-bind="$attrs"
       width="55rem"
       width="55rem"
       @register="register"
       @register="register"
       @ok="handleSubmit"
       @ok="handleSubmit"
       @cancel="handleCancel"
       @cancel="handleCancel"
     >
     >
-      <div v-if="isViewDetail">
-        <Attribute v-show="activeKey === '1'" ref="AttrRef" />
-        <Service v-show="activeKey === '2'" ref="ServiceRef" />
-        <Events v-show="activeKey === '3'" ref="EventsRef" />
-      </div>
-      <div v-if="!isViewDetail">
-        <div>
+      <div>
+        <div v-if="openModalMode === OpenModelMode.CREATE">
           <Typography>
           <Typography>
             <TypographyParagraph>
             <TypographyParagraph>
-              <blockquote style="background: #f2f2f2">{{ useBlockPhysicalContent }}</blockquote>
+              <blockquote class="bg-gray-100">{{ blockContent }}</blockquote>
             </TypographyParagraph>
             </TypographyParagraph>
           </Typography>
           </Typography>
         </div>
         </div>
-        <Tabs type="card" v-model:activeKey="activeKey" :size="size">
-          <TabPane :disabled="attrDisable" forceRender key="1" tab="属性">
-            <Attribute v-show="activeKey === '1'" ref="AttrRef" />
-          </TabPane>
-          <TabPane :disabled="serveiceDisable" forceRender key="2" tab="服务">
-            <Service v-show="activeKey === '2'" ref="ServiceRef" />
-          </TabPane>
+        <Tabs
+          v-if="openModalMode === OpenModelMode.CREATE"
+          type="card"
+          v-model:activeKey="activeKey"
+          :size="size"
+        >
+          <TabPane :key="FunctionType.PROPERTIES" tab="属性" />
+          <TabPane :key="FunctionType.SERVICE" tab="服务" />
           <TabPane
           <TabPane
-            :disabled="eventDisable"
-            forceRender
-            key="3"
-            v-show="activeKey === '3'"
+            :key="FunctionType.EVENTS"
             tab="事件"
             tab="事件"
-          >
-            <Events v-show="activeKey === '3'" ref="EventsRef" />
-          </TabPane>
+            :disabled="$props.record.transportType === 'TCP'"
+          />
         </Tabs>
         </Tabs>
+        <Attribute v-show="activeKey === FunctionType.PROPERTIES" ref="AttrRef" />
+        <Service v-show="activeKey === FunctionType.SERVICE" ref="ServiceRef" />
+        <Events v-show="activeKey === FunctionType.EVENTS" ref="EventsRef" />
       </div>
       </div>
     </BasicModal>
     </BasicModal>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, unref, reactive, nextTick } from 'vue';
+  import { ref, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { Tabs, TabPane, Typography, TypographyParagraph } from 'ant-design-vue';
   import { Tabs, TabPane, Typography, TypographyParagraph } from 'ant-design-vue';
   import Attribute from './cpns/Attribute.vue';
   import Attribute from './cpns/Attribute.vue';
   import Service from './cpns/Service.vue';
   import Service from './cpns/Service.vue';
   import Events from './cpns/Events.vue';
   import Events from './cpns/Events.vue';
-  import { mockData } from '../physical/cpns/components/mock';
-  import useCommon from './hook/useCommon';
-  import { IAllData } from './types';
-
-  defineEmits(['register']);
-
-  const attrDisable = ref(false);
-
-  const serveiceDisable = ref(false);
-
-  const eventDisable = ref(false);
-
-  const { useBlockPhysicalContent } = useCommon();
-
-  const activeKey = ref('1');
-
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { createModel, updateModel } from '/@/api/device/modelOfMatter';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { OpenModelMode, OpenModelOfMatterModelParams } from './types/index';
+  import { FunctionType } from './cpns/config';
+  import { StructRecord } from '/@/components/Form/src/externalCompns/components/StructForm/type';
+
+  const emit = defineEmits(['register', 'success']);
+
+  const props = defineProps<{
+    record: DeviceRecord;
+  }>();
+
+  const blockContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
+通知，如告警，需要被及时处理。`;
+  const activeKey = ref<FunctionType>(FunctionType.PROPERTIES);
   const size = ref('small');
   const size = ref('small');
 
 
   const AttrRef = ref<InstanceType<typeof Attribute>>();
   const AttrRef = ref<InstanceType<typeof Attribute>>();
@@ -72,121 +69,87 @@
   const ServiceRef = ref<InstanceType<typeof Service>>();
   const ServiceRef = ref<InstanceType<typeof Service>>();
 
 
   const EventsRef = ref<InstanceType<typeof Events>>();
   const EventsRef = ref<InstanceType<typeof Events>>();
+  const openModalMode = ref<OpenModelMode>(OpenModelMode.CREATE);
+  const openModalParams = ref<OpenModelOfMatterModelParams>();
 
 
-  const isUpdate = ref(false);
-
-  const isViewDetail = ref('');
-
-  const isText = ref('');
-
-  const dType = ref('');
-
-  const allData = reactive<IAllData>({
-    properties: [],
-    events: [],
-    services: [],
-    productKey: '',
-    _ppk: {},
-  });
-
-  const setAttrFormData = (data: {}) => AttrRef.value?.setFormData(data);
+  const functionType = ref<FunctionType>();
+  const { createMessage } = useMessage();
 
 
-  const setServiceFormData = (data: {}) => ServiceRef.value?.setFormData(data);
-
-  const setEventsFormData = (data: {}) => EventsRef.value?.setFormData(data);
+  const setAttrFormData = (data: StructRecord) => AttrRef.value?.setFormData(data);
+  const setServiceFormData = (data) => ServiceRef.value?.setFormData(data);
+  const setEventsFormData = (data) => EventsRef.value?.setFormData(data);
 
 
   const enums = {
   const enums = {
-    attr: setAttrFormData,
-    service: setServiceFormData,
-    events: setEventsFormData,
+    [FunctionType.PROPERTIES]: setAttrFormData,
+    [FunctionType.SERVICE]: setServiceFormData,
+    [FunctionType.EVENTS]: setEventsFormData,
   };
   };
 
 
-  function action(val, data) {
-    let F = enums[val];
-    F(data);
-  }
-
-  function dynamicDisable(a, s, e) {
-    attrDisable.value = a;
-    serveiceDisable.value = s;
-    eventDisable.value = e;
+  function setFormData(type: FunctionType, value: StructRecord) {
+    const setFn = enums[type];
+    setFn(value);
   }
   }
 
 
-  function dynamicActive(n, callback) {
-    activeKey.value = n;
-    callback;
-  }
-
-  const dynamicData = (t, a, s, e) => {
-    switch (t) {
-      case 'attr':
-        dynamicActive('1', action(t, a));
-        dynamicDisable(false, true, true);
-        break;
-      case 'service':
-        dynamicActive('2', action(t, s));
-        dynamicDisable(true, false, true);
-        break;
-      case 'events':
-        dynamicActive('3', action(t, e));
-        dynamicDisable(true, true, false);
-        break;
-    }
-  };
-
-  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
-    setModalProps({ loading: true });
-    handleCancel(false);
-    isUpdate.value = data.isUpdate;
-    isViewDetail.value = data.isView;
-    isText.value = data.isText;
-    dType.value = data.record?.dType;
-    if (!unref(isViewDetail)) {
-      const title = !unref(isUpdate) ? '编辑物模型' : '新增物模型';
-      if (!unref(isUpdate)) {
-        nextTick(() => {
-          dynamicData(dType.value, mockData.properties, mockData.services, mockData.events);
-        });
+  const [register, { closeModal, setModalProps }] = useModalInner(
+    async (data: OpenModelOfMatterModelParams) => {
+      openModalParams.value = data;
+      const { mode, record } = data;
+      openModalMode.value = mode;
+      if (record) {
+        functionType.value = data.record.functionType;
+        activeKey.value = data.record.functionType;
+        setFormData(record.functionType, record as unknown as StructRecord);
+      }
+      if (unref(openModalMode) === OpenModelMode.VIEW) {
+        setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看物模型' });
+        // setFormData(functionType.value, record);
+      } else {
+        const title = unref(openModalMode) === OpenModelMode.UPDATE ? '编辑物模型' : '新增物模型';
+        if (OpenModelMode.UPDATE) {
+          // setFormData(functionType.value, record);
+        }
+        setModalProps({ title, showOkBtn: true, showCancelBtn: true });
       }
       }
-      setModalProps({ title, showOkBtn: true, showCancelBtn: true });
-    } else {
-      setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看物模型' });
-      nextTick(() => {
-        dynamicData(dType.value, mockData.properties, mockData.services, mockData.events);
-      });
     }
     }
-    setModalProps({ loading: false });
-  });
+  );
 
 
   const handleCancel = (flag) => {
   const handleCancel = (flag) => {
     AttrRef.value?.resetFormData();
     AttrRef.value?.resetFormData();
     ServiceRef.value?.resetFormData();
     ServiceRef.value?.resetFormData();
     EventsRef.value?.resetFormData();
     EventsRef.value?.resetFormData();
-    activeKey.value = '1';
-    allData.properties = [];
-    allData.events = [];
-    allData.services = [];
-    attrDisable.value = false;
-    serveiceDisable.value = false;
-    eventDisable.value = false;
+    activeKey.value = FunctionType.PROPERTIES;
     if (flag) {
     if (flag) {
       closeModal();
       closeModal();
     }
     }
   };
   };
 
 
   const handleSubmit = async () => {
   const handleSubmit = async () => {
-    if (activeKey.value == '1') {
-      const valueAttr = await AttrRef.value?.getFormData();
-      allData.properties.push(valueAttr);
-    } else if (activeKey.value == '2') {
-      const valueService = await ServiceRef.value?.getFormData();
-      allData.services.push(valueService);
-    } else {
-      const valueEvents = await EventsRef.value?.getFormData();
-      allData.events.push(valueEvents);
+    try {
+      setModalProps({ loading: false, okButtonProps: { loading: true } });
+
+      let params: Partial<ModelOfMatterParams>;
+      if (activeKey.value == FunctionType.PROPERTIES) {
+        params = (await AttrRef.value?.getFormData()) || {};
+      } else if (activeKey.value == FunctionType.SERVICE) {
+        params = (await ServiceRef.value?.getFormData()) || {};
+      } else {
+        params = await EventsRef.value?.getFormData();
+      }
+      params.deviceProfileId = props.record.id;
+      if (unref(openModalMode) === OpenModelMode.CREATE) {
+        await createModel(params);
+        createMessage.success('创建成功');
+      } else {
+        params.id = unref(openModalParams)?.record.id;
+        await updateModel(params);
+        createMessage.success('修改成功');
+      }
+      closeModal();
+      emit('success');
+    } catch (error) {
+    } finally {
+      setModalProps({ loading: false, okButtonProps: { loading: false } });
     }
     }
-    console.log('搜集值', allData);
-    closeModal();
   };
   };
 </script>
 </script>
 
 

 <template>
 <template>
-  <div>
-    <BasicForm @register="register">
-      <template #outputParamSlot>
-        <CommomParam
-          ref="CommomParamInParamRef"
-          :isExcludeStruct="true"
-          :isInputParam="true"
-          :inputParamData="inputParamData"
-          @emitAddInParam="handleAddInParam"
-          @emitEditInParam="handleEditInParam"
-          @emitDeletelnParam="handleDelInParam"
-        />
-      </template>
-    </BasicForm>
-    <AddParamsModal @register="registerModal" @data="getData" />
-  </div>
+  <BasicForm @register="register" />
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { attrSchemas } from './config';
-  import { useModal } from '/@/components/Modal';
-  import useParitalValid from '../hook/useParitalValid';
-  import useCommon from '../hook/useCommon';
-  import AddParamsModal from './components/AddParamsModal.vue';
-  import CommomParam from './components/CommomParam.vue';
-  import useDefineVar from '../hook/useDefineVar';
-
-  const { useChangeTypeGetTypeForm, useGetInOrOutData } = useCommon();
-
-  const { validateValueStruct } = useParitalValid();
-
-  const { inputParamData, CommomParamInParamRef } = useDefineVar();
-
-  const [registerModal, { openModal }] = useModal();
-
-  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+  import { transformFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/util';
+  import {
+    StructFormValue,
+    StructRecord,
+  } from '/@/components/Form/src/externalCompns/components/StructForm/type';
+  import { isObject } from 'lodash';
+
+  const [register, { validate, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
     labelWidth: 100,
-    schemas: attrSchemas,
+    schemas: formSchemas,
     actionColOptions: {
     actionColOptions: {
       span: 14,
       span: 14,
     },
     },
@@ -46,84 +23,34 @@
     showActionButtonGroup: false,
     showActionButtonGroup: false,
   });
   });
 
 
-  const getData = (d, f) => useGetInOrOutData(d, f, unref(inputParamData), []);
-
-  const handleAddInParam = (b, o) => openModal(b, o);
-
-  const handleEditInParam = (b, o) => openModal(b, o);
-
-  const handleDelInParam = (i) => unref(inputParamData).splice(i, 1);
-
-  //回显不同类型数据
-  const setTypeData = (T, D) => {
-    if (T === 'INT' || T === 'DOUBLE' || T === 'TEXT') {
-      return {
-        ...D?.dataSpecs,
-        valueRange: { ...D?.dataSpecs },
-      };
-    } else if (T === 'BOOL') {
-      return {
-        boolClose: D?.dataSpecsList[0]?.name,
-        boolOpen: D?.dataSpecsList[1]?.name,
-      };
-    }
-  };
+  async function getFormData(): Promise<Partial<ModelOfMatterParams>> {
+    const _values = (await validate()) as StructFormValue;
+    if (!_values) return {};
+    let value = transformFormValue(_values);
+    return value;
+  }
 
 
-  const setFormData = (v) => {
-    try {
-      setFieldsValue({ ...v[0] });
-      setFieldsValue(setTypeData(v[0]?.dataType, v[0]));
-      //回显结构体数据
-      const { dataSpecsList } = v[0];
-      if (dataSpecsList !== undefined) {
-        inputParamData.value = [...new Array(dataSpecsList.length).keys()] && dataSpecsList;
-      }
-    } catch (e) {
-      console.log('Attribute error info', e);
-    }
+  const resetFormData = () => {
+    resetFields();
   };
   };
 
 
-  //获取结构体数据
-  const getStructList = () => CommomParamInParamRef.value?.getInputStructList();
-
-  const getBoolOrStructData = (T, S, B) => {
-    if (T === 'STRUCT') {
-      return S;
-    } else {
-      return B;
-    }
-  };
+  const setFormData = (record: StructRecord) => {
+    const { functionJson } = record as StructRecord;
+    const { specs = {} } = functionJson || ({} as StructRecord['functionJson']);
 
 
-  async function getFormData() {
-    const values = await validate();
-    if (!values) return;
-    const dataSpecsList = getStructList();
-    if (values.dataType === 'STRUCT') {
-      validateValueStruct(dataSpecsList as any);
-    }
-    const dataSpecs = useChangeTypeGetTypeForm(values.dataType, values);
-    const dataSpecsListBool = useChangeTypeGetTypeForm(values.dataType, values);
-    const { valueRange, step, unit, outputParam, ...value } = values;
-    const none = [valueRange, step, unit, outputParam]; //没用，防止eslint报未使用变量
-    console.log(none);
-    return {
-      ...value,
-      ...{ dataSpecs },
-      ...{
-        dataSpecsList: getBoolOrStructData(values.dataType, dataSpecsList, dataSpecsListBool),
-      },
+    const value = {
+      ...record,
+      ...functionJson,
+      ...(isObject(specs) ? specs : {}),
     };
     };
-  }
 
 
-  const resetFormData = () => {
-    resetFields();
-    inputParamData.value = [];
+    setFieldsValue(value);
   };
   };
 
 
   defineExpose({
   defineExpose({
-    setFormData,
     resetFormData,
     resetFormData,
     getFormData,
     getFormData,
+    setFormData,
   });
   });
 </script>
 </script>
 <style lang="less" scoped></style>
 <style lang="less" scoped></style>

 <template>
 <template>
-  <div>
-    <BasicForm @register="register">
-      <template #outputParamSlot>
-        <CommomParam
-          ref="CommomParamInParamRef"
-          :isInputParam="true"
-          :isExcludeStruct="false"
-          :inputParamData="inputParamData"
-          @emitAddInParam="handleAddInParam"
-          @emitEditInParam="handleEditInParam"
-          @emitDeletelnParam="handleDelInParam"
-        />
-      </template>
-    </BasicForm>
-    <AddParamsModal @register="registerModal" @data="getData" />
-  </div>
+  <BasicForm @register="register" />
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { eventSchemas } from './config';
   import { eventSchemas } from './config';
-  import { useModal } from '/@/components/Modal';
-  import AddParamsModal from './components/AddParamsModal.vue';
-  import CommomParam from './components/CommomParam.vue';
-  import useCommon from '../hook/useCommon';
-  import useDefineVar from '../hook/useDefineVar';
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
 
 
-  const { useGetInOrOutData } = useCommon();
-
-  const { inputParamData, CommomParamInParamRef } = useDefineVar();
-
-  const [registerModal, { openModal }] = useModal();
-
-  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+  const [register, { validate, resetFields }] = useForm({
     labelWidth: 100,
     labelWidth: 100,
     schemas: eventSchemas,
     schemas: eventSchemas,
     actionColOptions: {
     actionColOptions: {
@@ -43,43 +17,18 @@
     showActionButtonGroup: false,
     showActionButtonGroup: false,
   });
   });
 
 
-  const getData = (d, f) => useGetInOrOutData(d, f, unref(inputParamData), []);
-
-  const handleAddInParam = (b, o) => openModal(b, o);
-
-  const handleEditInParam = (b, o) => openModal(b, o);
-
-  const handleDelInParam = (i) => unref(inputParamData).splice(i, 1);
-
   //回显数据
   //回显数据
-  const setFormData = (v) => {
-    setFieldsValue(v[0]);
-    const { outputData } = v[0];
-    if (outputData !== undefined) {
-      inputParamData.value = [...new Array(outputData.length).keys()] && outputData;
-    }
-  };
-
-  //获取数据
-  const getStructList = () => CommomParamInParamRef.value?.getInputStructList();
+  const setFormData = () => {};
 
 
   async function getFormData() {
   async function getFormData() {
-    const values = await validate();
+    const values = (await validate()) as ModelOfMatterParams;
     if (!values) return;
     if (!values) return;
-    const outputData = getStructList();
-    const { outputParam, ...value } = values;
-    const none = [outputParam]; //没用，防止eslint报未使用变量
-    console.log(none);
-    return {
-      ...value,
-      ...{ outputData },
-    };
+    console.log(values);
   }
   }
 
 
   //清空数据
   //清空数据
   const resetFormData = () => {
   const resetFormData = () => {
     resetFields();
     resetFields();
-    inputParamData.value = [];
   };
   };
 
 
   defineExpose({
   defineExpose({

 <template>
 <template>
-  <div>
-    <BasicForm @register="register">
-      <template #inputParamSlot>
-        <CommomParam
-          ref="CommomParamInParamRef"
-          :isInputParam="true"
-          :isExcludeStruct="false"
-          :inputParamData="inputParamData"
-          @emitAddInParam="handleAddInParam"
-          @emitEditInParam="handleEditInParam"
-          @emitDeletelnParam="handleDelInParam"
-        />
-      </template>
-      <template #outputParamSlot>
-        <CommomParam
-          ref="CommomParamOutParamRef"
-          :isOutputParam="true"
-          :isExcludeStruct="false"
-          :outputParamData="outputParamData"
-          @emitAddOutParam="handleAddOutParam"
-          @emitEditOutParam="handleEditOutParam"
-          @emitDeleteOutParam="handleDelOutParam"
-        />
-      </template>
-    </BasicForm>
-    <AddParamsModal @register="registerModal" @data="getData" />
-  </div>
+  <BasicForm @register="register" />
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { serviceSchemas } from './config';
   import { serviceSchemas } from './config';
-  import { useModal } from '/@/components/Modal';
-  import AddParamsModal from './components/AddParamsModal.vue';
-  import CommomParam from './components/CommomParam.vue';
-  import useCommon from '../hook/useCommon';
-  import useDefineVar from '../hook/useDefineVar';
-
-  const { inputParamData, outputParamData, CommomParamInParamRef, CommomParamOutParamRef } =
-    useDefineVar();
-
-  const { useGetInOrOutData } = useCommon();
-
-  const [registerModal, { openModal }] = useModal();
-
-  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { FunctionType } from './config';
+  const [register, { validate, resetFields }] = useForm({
     labelWidth: 100,
     labelWidth: 100,
     schemas: serviceSchemas,
     schemas: serviceSchemas,
     actionColOptions: {
     actionColOptions: {
@@ -55,57 +17,21 @@
     showActionButtonGroup: false,
     showActionButtonGroup: false,
   });
   });
 
 
-  const getData = (d, f) => useGetInOrOutData(d, f, unref(inputParamData), unref(outputParamData));
-
-  const handleAddInParam = (b, o) => openModal(b, o);
-
-  const handleEditInParam = (b, o) => openModal(b, o);
-
-  const handleDelInParam = (i) => unref(inputParamData).splice(i, 1);
-
-  const handleAddOutParam = (b, o) => openModal(b, o);
-
-  const handleEditOutParam = (b, o) => openModal(b, o);
-
-  const handleDelOutParam = (i) => unref(outputParamData).splice(i, 1);
-
   //回显数据
   //回显数据
-  const setFormData = (v) => {
-    setFieldsValue(v[0]);
-    const { inputParams, outputParams } = v[0];
-    if (outputParams !== undefined) {
-      outputParamData.value = [...new Array(outputParams.length).keys()] && outputParams;
-    }
-    if (inputParams !== undefined) {
-      inputParamData.value = [...new Array(inputParams.length).keys()] && inputParams;
-    }
-  };
-
-  const getInputStructList = () => CommomParamInParamRef.value?.getInputStructList();
-
-  const getOutputStructList = () => CommomParamOutParamRef.value?.getOutputStructList();
+  const setFormData = () => {};
 
 
   //获取数据
   //获取数据
   async function getFormData() {
   async function getFormData() {
-    const values = await validate();
+    const values = (await validate()) as ModelOfMatterParams;
     if (!values) return;
     if (!values) return;
-    const inputParams = getInputStructList();
-    const outputParams = getOutputStructList();
-    const { inputParam, outputParam, ...value } = values;
-    const none = [inputParam, outputParam]; //没用，防止eslint报未使用变量
-    console.log(none);
-    return {
-      ...value,
-      ...{ inputParams },
-      ...{ outputParams },
-    };
+    values.functionType = FunctionType.SERVICE;
+    console.log(values);
+    return values;
   }
   }
 
 
   //清空数据
   //清空数据
   const resetFormData = () => {
   const resetFormData = () => {
     resetFields();
     resetFields();
-    inputParamData.value = [];
-    outputParamData.value = [];
   };
   };
 
 
   defineExpose({
   defineExpose({

@@ -34,7 +34,7 @@
 
 
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
 
 
-  const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
+  const [registerForm, { validate, resetFields, updateSchema }] = useForm({
     labelWidth: 100,
     labelWidth: 100,
     schemas: addParamsSchemas,
     schemas: addParamsSchemas,
     actionColOptions: {
     actionColOptions: {

@@ -21,7 +21,7 @@
 
 
   const emits = defineEmits(['register', 'data']);
   const emits = defineEmits(['register', 'data']);
 
 
-  const { validateValueStruct } = useParitalValid();
+  const {} = useParitalValid();
 
 
   const setEditData: any = reactive({
   const setEditData: any = reactive({
     getEditData: {},
     getEditData: {},
@@ -37,9 +37,9 @@
 
 
   const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数'));
   const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数'));
 
 
-  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+  const [register, { setModalProps }] = useModalInner(async (data) => {
     setModalProps({ loading: true });
     setModalProps({ loading: true });
-    handleCancel(false);
+
     isUpdate.value = data.isUpdate;
     isUpdate.value = data.isUpdate;
     isFlag.value = data.flag;
     isFlag.value = data.flag;
     excludeStruct.value = data.excludeStruct;
     excludeStruct.value = data.excludeStruct;
@@ -53,29 +53,15 @@
     }
     }
   });
   });
 
 
-  const handleCancel = (flag) => {
+  const handleCancel = () => {
     AddParamFormRef.value?.resetFormData();
     AddParamFormRef.value?.resetFormData();
-    if (flag) {
-      closeModal();
-    }
   };
   };
 
 
   const handleSubmit = async () => {
   const handleSubmit = async () => {
     const value = await AddParamFormRef.value?.getFormData();
     const value = await AddParamFormRef.value?.getFormData();
     if (!value) return;
     if (!value) return;
-    if (value.dataType === 'STRUCT') {
-      validateValueStruct(value.dataSpecsList as any);
-    }
-    emits(
-      'data',
-      {
-        ...value,
-        ...{ id: !isUpdate.value ? setEditData.getEditData.id : null },
-        ...{ index: !isUpdate.value ? setEditData.getEditData.index : null },
-      },
-      isFlag.value
-    );
-    handleCancel(true);
+    emits('data', value);
+    handleCancel();
   };
   };
 </script>
 </script>
 <style lang="less" scope></style>
 <style lang="less" scope></style>

 <template>
 <template>
   <div>
   <div>
-    <a-card :title="`参数名称：${title}`" style="width: 540px; margin-top: -5px">
+    <a-card :title="`参数名称：${item.id}`" style="width: 540px; margin-top: -5px">
       <template #extra>
       <template #extra>
         <div style="display: flex; align-items: center">
         <div style="display: flex; align-items: center">
-          <span style="color: #0170cc; cursor: pointer" @click="handleEdit(item, index)">编辑</span>
+          <span style="color: #0170cc; cursor: pointer" @click="handleEdit">编辑</span>
           <a-divider type="vertical" style="height: 12px; background-color: #d8d8d8" />
           <a-divider type="vertical" style="height: 12px; background-color: #d8d8d8" />
-          <span style="color: #0170cc; cursor: pointer" class="ml-1" @click="handleDelete(index)"
+          <span style="color: #0170cc; cursor: pointer" class="ml-1" @click="handleDelete"
             >删除</span
             >删除</span
           >
           >
         </div>
         </div>
@@ -14,34 +14,26 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
+  import { FunctionJson } from '/@/api/device/model/modelOfMatterModel';
+
   const emit = defineEmits(['delete', 'edit']);
   const emit = defineEmits(['delete', 'edit']);
 
 
+  type ItemRecrod = FunctionJson & { id: string };
+
   const props = defineProps({
   const props = defineProps({
-    index: {
-      type: Number,
-      required: true,
-    },
-    title: {
-      type: String,
-      default: '',
-    },
     item: {
     item: {
-      type: Object,
+      type: Object as PropType<ItemRecrod>,
       required: true,
       required: true,
       default: () => {},
       default: () => {},
     },
     },
   });
   });
 
 
-  const handleDelete = (index) => {
-    emit('delete', index);
+  const handleDelete = () => {
+    emit('delete', props.item);
   };
   };
 
 
-  const handleEdit = (item, index) => {
-    const value = {
-      ...item,
-      ...{ index },
-    };
-    emit('edit', value);
+  const handleEdit = () => {
+    emit('edit', props.item);
   };
   };
 
 
   const getFormData = () => {
   const getFormData = () => {

 import { FormSchema } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
 
 
+export enum FormField {
+  FUNCTION_NAME = 'functionName',
+  FUNCTION_TYPE = 'functionType',
+  FUNCTION_JSON = 'functionJson',
+  IDENTIFIER = 'identifier',
+  TYPE = 'type',
+  REFARK = 'remark',
+  MIN = 'min',
+  MAX = 'max',
+  UNIT = 'unit',
+  UNIT_NAME = 'unitName',
+  STEP = 'step',
+  VALUE_RANGE = 'valueRange',
+  BOOL_CLOSE = 'boolClose',
+  BOOL_OPEN = 'boolOpen',
+  LENGTH = 'length',
+  R_W_FLAG = 'rwFlag',
+  SPECS_LIST = 'specs',
+  CALL_TYPE = 'callType',
+  INPUT_PARAM = 'inputData',
+  OUTPUT_PARAM = 'outputData',
+  EVENT_TYPE = 'eventType',
+
+  STRUCT = 'struct',
+}
+
+export enum FunctionType {
+  PROPERTIES = 'properties',
+  EVENTS = 'events',
+  SERVICE = 'services',
+}
+
+/**
+ * 新增参数 动态显示表单
+ */
+export enum DateTypeEnum {
+  IS_NUMBER_INT = 'INT',
+  IS_NUMBER_DOUBLE = 'DOUBLE',
+  IS_STRING = 'TEXT',
+  IS_STRUCT = 'STRUCT',
+  IS_BOOL = 'BOOL',
+}
+
+const isNumber = (type: string) => {
+  return type === DateTypeEnum.IS_NUMBER_INT || type === DateTypeEnum.IS_NUMBER_DOUBLE;
+};
+
+const isString = (type: string) => {
+  return type === DateTypeEnum.IS_STRING;
+};
+const isStruct = (type: string) => {
+  return type === DateTypeEnum.IS_STRUCT;
+};
+
+const isBool = (type: string) => {
+  return type === DateTypeEnum.IS_BOOL;
+};
+
 export const defaultTslContent = {
 export const defaultTslContent = {
   schema: 'https://iotx-tsl.oss-ap-southeast-1.aliyuncs.com/schema.json',
   schema: 'https://iotx-tsl.oss-ap-southeast-1.aliyuncs.com/schema.json',
   profile: {
   profile: {
@@ -24,180 +82,9 @@ export const defaultTslContent = {
   ],
   ],
 };
 };
 
 
-export const attrSchemas: FormSchema[] = [
-  {
-    field: 'name',
-    label: '功能名称',
-    required: true,
-    component: 'Input',
-    colProps: {
-      span: 18,
-    },
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入功能名称',
-    },
-  },
-  {
-    field: 'identifier',
-    label: '标识符',
-    required: true,
-    component: 'Input',
-    colProps: {
-      span: 18,
-    },
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入标识符',
-    },
-  },
-  {
-    field: 'dataType',
-    label: '数据类型',
-    required: true,
-    component: 'ApiSelect',
-    colProps: {
-      span: 9,
-    },
-    defaultValue: 'INT',
-    componentProps: {
-      placeholder: '请选择数据类型',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'data_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-  },
-  {
-    field: 'valueRange',
-    label: '取值范围',
-    component: 'CustomeMinMaxInput',
-    colProps: {
-      span: 18,
-    },
-    ifShow: ({ values }) => isNumber(values.dataType),
-  },
-  {
-    field: 'step',
-    label: '步长',
-    component: 'Input',
-    colProps: {
-      span: 18,
-    },
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入步长',
-    },
-    ifShow: ({ values }) => isNumber(values.dataType),
-  },
-  {
-    field: 'unit',
-    label: '单位',
-    component: 'ApiSelect',
-    colProps: {
-      span: 9,
-    },
-    componentProps: {
-      placeholder: '请选择单位',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'attribute_unit',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-    ifShow: ({ values }) => isNumber(values.dataType),
-  },
-  {
-    field: 'boolClose',
-    component: 'Input',
-    required: true,
-    label: '0 -',
-    colProps: {
-      span: 18,
-    },
-    componentProps: {
-      placeholder: '如：关',
-    },
-    ifShow: ({ values }) => isBool(values.dataType),
-  },
-  {
-    field: 'boolOpen',
-    component: 'Input',
-    required: true,
-    label: '1 -',
-    colProps: {
-      span: 18,
-    },
-    componentProps: {
-      placeholder: '如：开',
-    },
-    ifShow: ({ values }) => isBool(values.dataType),
-  },
-  {
-    field: 'length',
-    component: 'Input',
-    required: true,
-    label: '数据长度',
-    defaultValue: '10240',
-    colProps: {
-      span: 8,
-    },
-    componentProps: {
-      placeholder: '请输入数据长度',
-    },
-    renderComponentContent: () => {
-      return {
-        suffix: () => '字节',
-      };
-    },
-    ifShow: ({ values }) => isString(values.dataType),
-  },
-  {
-    field: 'rwFlag',
-    component: 'ApiRadioGroup',
-    label: '读写类型',
-    required: true,
-    colProps: {
-      span: 24,
-    },
-    defaultValue: 'READ_ONLY',
-    componentProps: {
-      placeholder: '请选择读写类型',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'read_write_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-  },
-  {
-    field: 'outputParam',
-    label: 'JSON 对象',
-    component: 'Input',
-    // required: true,
-    slot: 'outputParamSlot',
-    colProps: { span: 24 },
-    ifShow: ({ values }) => isStruct(values.dataType),
-  },
-  {
-    label: '描述',
-    field: 'description',
-    component: 'InputTextArea',
-    componentProps: {
-      rows: 6,
-      maxLength: 100,
-      placeholder: '请输入描述',
-    },
-  },
-];
-
 export const serviceSchemas: FormSchema[] = [
 export const serviceSchemas: FormSchema[] = [
   {
   {
-    field: 'serviceName',
+    field: FormField.FUNCTION_NAME,
     label: '功能名称',
     label: '功能名称',
     required: true,
     required: true,
     component: 'Input',
     component: 'Input',
@@ -210,7 +97,7 @@ export const serviceSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'identifier',
+    field: FormField.IDENTIFIER,
     label: '标识符',
     label: '标识符',
     required: true,
     required: true,
     component: 'Input',
     component: 'Input',
@@ -223,7 +110,7 @@ export const serviceSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'callType',
+    field: FormField.CALL_TYPE,
     component: 'ApiRadioGroup',
     component: 'ApiRadioGroup',
     label: '调用方式',
     label: '调用方式',
     required: true,
     required: true,
@@ -242,22 +129,24 @@ export const serviceSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'inputParam',
+    field: FormField.INPUT_PARAM,
     label: '输入参数',
     label: '输入参数',
-    component: 'Input',
-    slot: 'inputParamSlot',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
     colProps: { span: 24 },
     colProps: { span: 24 },
   },
   },
   {
   {
-    field: 'outputParam',
+    field: FormField.OUTPUT_PARAM,
     label: '输出参数',
     label: '输出参数',
-    component: 'Input',
-    slot: 'outputParamSlot',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
     colProps: { span: 24 },
     colProps: { span: 24 },
   },
   },
   {
   {
-    label: '描述',
-    field: 'description',
+    field: FormField.REFARK,
+    label: '备注',
     component: 'InputTextArea',
     component: 'InputTextArea',
     componentProps: {
     componentProps: {
       rows: 6,
       rows: 6,
@@ -269,7 +158,7 @@ export const serviceSchemas: FormSchema[] = [
 
 
 export const eventSchemas: FormSchema[] = [
 export const eventSchemas: FormSchema[] = [
   {
   {
-    field: 'eventName',
+    field: FormField.FUNCTION_NAME,
     label: '功能名称',
     label: '功能名称',
     required: true,
     required: true,
     component: 'Input',
     component: 'Input',
@@ -282,7 +171,7 @@ export const eventSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'identifier',
+    field: FormField.IDENTIFIER,
     label: '标识符',
     label: '标识符',
     required: true,
     required: true,
     component: 'Input',
     component: 'Input',
@@ -295,7 +184,7 @@ export const eventSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'eventType',
+    field: FormField.EVENT_TYPE,
     component: 'ApiRadioGroup',
     component: 'ApiRadioGroup',
     label: '事件类型',
     label: '事件类型',
     required: true,
     required: true,
@@ -314,15 +203,16 @@ export const eventSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'outputParam',
+    field: FormField.OUTPUT_PARAM,
     label: '输出参数',
     label: '输出参数',
-    component: 'Input',
-    slot: 'outputParamSlot',
+    component: 'StructForm',
+    valueField: 'value',
+    changeEvent: 'update:value',
     colProps: { span: 24 },
     colProps: { span: 24 },
   },
   },
   {
   {
-    label: '描述',
-    field: 'description',
+    field: FormField.REFARK,
+    label: '备注',
     component: 'InputTextArea',
     component: 'InputTextArea',
     componentProps: {
     componentProps: {
       rows: 6,
       rows: 6,
@@ -332,34 +222,9 @@ export const eventSchemas: FormSchema[] = [
   },
   },
 ];
 ];
 
 
-/**
- * 新增参数 动态显示表单
- */
-enum DateTypeEnum {
-  IS_NUMBER_INT = 'INT',
-  IS_NUMBER_DOUBLE = 'DOUBLE',
-  IS_STRING = 'TEXT',
-  IS_STRUCT = 'STRUCT',
-  IS_BOOL = 'BOOL',
-}
-const isNumber = (type: string) => {
-  return type === DateTypeEnum.IS_NUMBER_INT || type === DateTypeEnum.IS_NUMBER_DOUBLE;
-};
-
-const isString = (type: string) => {
-  return type === DateTypeEnum.IS_STRING;
-};
-const isStruct = (type: string) => {
-  return type === DateTypeEnum.IS_STRUCT;
-};
-
-const isBool = (type: string) => {
-  return type === DateTypeEnum.IS_BOOL;
-};
-
 export const addParamsSchemas: FormSchema[] = [
 export const addParamsSchemas: FormSchema[] = [
   {
   {
-    field: 'name',
+    field: FormField.FUNCTION_NAME,
     label: '参数名称',
     label: '参数名称',
     required: true,
     required: true,
     component: 'Input',
     component: 'Input',
@@ -372,7 +237,7 @@ export const addParamsSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'identifier',
+    field: FormField.IDENTIFIER,
     label: '标识符',
     label: '标识符',
     required: true,
     required: true,
     component: 'Input',
     component: 'Input',
@@ -385,7 +250,7 @@ export const addParamsSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'dataType',
+    field: FormField.TYPE,
     label: '数据类型',
     label: '数据类型',
     required: true,
     required: true,
     component: 'ApiSelect',
     component: 'ApiSelect',
@@ -404,17 +269,16 @@ export const addParamsSchemas: FormSchema[] = [
     },
     },
   },
   },
   {
   {
-    field: 'structSlot',
+    field: FormField.STRUCT,
     label: 'JSON 对象',
     label: 'JSON 对象',
     component: 'Input',
     component: 'Input',
-    slot: 'structSlot',
     colProps: {
     colProps: {
       span: 23,
       span: 23,
     },
     },
-    ifShow: ({ values }) => isStruct(values.dataType),
+    ifShow: ({ values }) => isStruct(values[FormField.TYPE]),
   },
   },
   {
   {
-    field: 'boolClose',
+    field: FormField.BOOL_CLOSE,
     component: 'Input',
     component: 'Input',
     required: true,
     required: true,
     label: '0 -',
     label: '0 -',
@@ -424,10 +288,10 @@ export const addParamsSchemas: FormSchema[] = [
     componentProps: {
     componentProps: {
       placeholder: '如：关',
       placeholder: '如：关',
     },
     },
-    ifShow: ({ values }) => isBool(values.dataType),
+    ifShow: ({ values }) => isBool(values[FormField.TYPE]),
   },
   },
   {
   {
-    field: 'boolOpen',
+    field: FormField.BOOL_OPEN,
     component: 'Input',
     component: 'Input',
     required: true,
     required: true,
     label: '1 -',
     label: '1 -',
@@ -437,10 +301,10 @@ export const addParamsSchemas: FormSchema[] = [
     componentProps: {
     componentProps: {
       placeholder: '如：开',
       placeholder: '如：开',
     },
     },
-    ifShow: ({ values }) => isBool(values.dataType),
+    ifShow: ({ values }) => isBool(values[FormField.TYPE]),
   },
   },
   {
   {
-    field: 'length',
+    field: FormField.LENGTH,
     component: 'Input',
     component: 'Input',
     required: true,
     required: true,
     label: '数据长度',
     label: '数据长度',
@@ -456,19 +320,19 @@ export const addParamsSchemas: FormSchema[] = [
         suffix: () => '字节',
         suffix: () => '字节',
       };
       };
     },
     },
-    ifShow: ({ values }) => isString(values.dataType),
+    ifShow: ({ values }) => isString(values[FormField.TYPE]),
   },
   },
   {
   {
-    field: 'valueRange',
+    field: FormField.VALUE_RANGE,
     label: '取值范围',
     label: '取值范围',
-    component: 'CustomeMinMaxInput',
+    component: 'CustomMinMaxInput',
     colProps: {
     colProps: {
       span: 23,
       span: 23,
     },
     },
-    ifShow: ({ values }) => isNumber(values.dataType),
+    ifShow: ({ values }) => isNumber(values[FormField.TYPE]),
   },
   },
   {
   {
-    field: 'step',
+    field: FormField.STEP,
     label: '步长',
     label: '步长',
     component: 'Input',
     component: 'Input',
     colProps: {
     colProps: {
@@ -478,10 +342,10 @@ export const addParamsSchemas: FormSchema[] = [
       maxLength: 255,
       maxLength: 255,
       placeholder: '请输入步长',
       placeholder: '请输入步长',
     },
     },
-    ifShow: ({ values }) => isNumber(values.dataType),
+    ifShow: ({ values }) => isNumber(values[FormField.TYPE]),
   },
   },
   {
   {
-    field: 'unit',
+    field: FormField.UNIT,
     label: '单位',
     label: '单位',
     component: 'ApiSelect',
     component: 'ApiSelect',
     colProps: {
     colProps: {
@@ -496,6 +360,6 @@ export const addParamsSchemas: FormSchema[] = [
       labelField: 'itemText',
       labelField: 'itemText',
       valueField: 'itemValue',
       valueField: 'itemValue',
     },
     },
-    ifShow: ({ values }) => isNumber(values.dataType),
+    ifShow: ({ values }) => isNumber(values[FormField.TYPE]),
   },
   },
 ];
 ];

+import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+
+export enum OpenModelMode {
+  UPDATE = 'update',
+  CREATE = 'create',
+  VIEW = 'view',
+}
+
+export interface OpenModelOfMatterModelParams {
+  mode: OpenModelMode;
+  record: ModelOfMatterParams;
+}
+
 export interface IAllData {
 export interface IAllData {
   properties: string[];
   properties: string[];
   events: string[];
   events: string[];

@@ -23,31 +23,40 @@
 
 
   const loading = ref(false);
   const loading = ref(false);
 
 
+  const isUpdate = ref(false);
+
   const otaRecord = ref<OtaRecordDatum>({} as unknown as OtaRecordDatum);
   const otaRecord = ref<OtaRecordDatum>({} as unknown as OtaRecordDatum);
 
 
   const deviceProfileInfo = ref<DeviceProfileRecord>({} as unknown as DeviceProfileRecord);
   const deviceProfileInfo = ref<DeviceProfileRecord>({} as unknown as DeviceProfileRecord);
 
 
   const { createConfirm, createMessage } = useMessage();
   const { createConfirm, createMessage } = useMessage();
 
 
-  const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
+  const [registerForm, { setFieldsValue, getFieldsValue, updateSchema }] = useForm({
     schemas: formSchema,
     schemas: formSchema,
     showActionButtonGroup: false,
     showActionButtonGroup: false,
     disabled: true,
     disabled: true,
   });
   });
 
 
-  const [register, { closeDrawer, changeLoading }] = useDrawerInner(async (id: string) => {
-    try {
-      const record = await getOtaPackageInfo(id);
-      const deviceInfo = await getDeviceProfileInfoById(record.deviceProfileId.id);
-      setFieldsValue({
-        ...record,
-        [PackageField.DESCRIPTION]: record.additionalInfo.description,
-        [PackageField.DEVICE_PROFILE_INFO]: deviceInfo.name,
-      });
-      deviceProfileInfo.value = deviceInfo;
-      otaRecord.value = record;
-    } catch (error) {}
-  });
+  const [register, { closeDrawer, changeLoading }] = useDrawerInner(
+    async (params: { id: string; isUpdate: boolean }) => {
+      try {
+        const { id, isUpdate: flag } = params;
+        isUpdate.value = flag;
+        const record = await getOtaPackageInfo(id);
+        const deviceInfo = await getDeviceProfileInfoById(record.deviceProfileId.id);
+        setFieldsValue({
+          ...record,
+          [PackageField.DESCRIPTION]: record.additionalInfo.description,
+          [PackageField.DEVICE_PROFILE_INFO]: deviceInfo.name,
+        });
+        deviceProfileInfo.value = deviceInfo;
+        otaRecord.value = record;
+        if (unref(isUpdate)) {
+          updateSchema({ field: PackageField.DESCRIPTION, dynamicDisabled: false });
+        }
+      } catch (error) {}
+    }
+  );
 
 
   // const [registerTBDrawer, TBDrawerMethod] = useDrawer();
   // const [registerTBDrawer, TBDrawerMethod] = useDrawer();
 
 
@@ -146,7 +155,9 @@
       >
       >
         <Button class="mr-2" @click="closeDrawer">取消</Button>
         <Button class="mr-2" @click="closeDrawer">取消</Button>
         <Authority :value="OtaPermissionKey.UPDATE">
         <Authority :value="OtaPermissionKey.UPDATE">
-          <Button type="primary" :loading="loading" @click="handleSubmit">保存</Button>
+          <Button v-if="isUpdate" type="primary" :loading="loading" @click="handleSubmit">
+            保存
+          </Button>
         </Authority>
         </Authority>
       </div>
       </div>
     </template>
     </template>

@@ -13,6 +13,7 @@ export enum OtaPermissionKey {
   UPDATE = 'api:operation:ota:update',
   UPDATE = 'api:operation:ota:update',
   DELETE = 'api:operation:ota:delete',
   DELETE = 'api:operation:ota:delete',
   DOWNLOAD = 'api:operation:ota:download',
   DOWNLOAD = 'api:operation:ota:download',
+  DETAIL = 'api:operation:ota:detail',
 }
 }
 
 
 export const columns: BasicColumn[] = [
 export const columns: BasicColumn[] = [
@@ -22,7 +23,7 @@ export const columns: BasicColumn[] = [
     format(text) {
     format(text) {
       return dateUtil(text).format(DEFAULT_DATE_FORMAT);
       return dateUtil(text).format(DEFAULT_DATE_FORMAT);
     },
     },
-    width: 120,
+    width: 140,
   },
   },
   {
   {
     title: '标题',
     title: '标题',
@@ -80,6 +81,7 @@ export const columns: BasicColumn[] = [
     dataIndex: 'action',
     dataIndex: 'action',
     flag: 'ACTION',
     flag: 'ACTION',
     fixed: 'right',
     fixed: 'right',
+    width: 200,
     slots: {
     slots: {
       customRender: 'action',
       customRender: 'action',
     },
     },

@@ -113,6 +113,5 @@ export const formSchema: FormSchema[] = [
     field: PackageField.DESCRIPTION,
     field: PackageField.DESCRIPTION,
     label: '描述',
     label: '描述',
     component: 'Input',
     component: 'Input',
-    dynamicDisabled: false,
   },
   },
 ];
 ];

@@ -22,6 +22,8 @@
       const data = await getOtaPackagesList({
       const data = await getOtaPackagesList({
         ...params,
         ...params,
         page: params.page - 1,
         page: params.page - 1,
+        sortOrder: 'DESC',
+        sortProperty: 'createdTime',
         textSearch: params.title,
         textSearch: params.title,
       });
       });
       return { ...data, page: params.page };
       return { ...data, page: params.page };
@@ -57,8 +59,8 @@
     openModal(true, { isUpdate: false } as ModalPassRecord);
     openModal(true, { isUpdate: false } as ModalPassRecord);
   };
   };
 
 
-  const handleOpenDetailDrawer = (record: OtaRecordDatum) => {
-    openDrawer(true, record.id.id);
+  const handleOpenDetailDrawer = (record: OtaRecordDatum, isUpdate: boolean) => {
+    openDrawer(true, { id: record.id.id, isUpdate });
   };
   };
 
 
   const downloadFile = async (record: OtaRecordDatum) => {
   const downloadFile = async (record: OtaRecordDatum) => {
@@ -117,6 +119,20 @@
           @click.stop
           @click.stop
           :actions="[
           :actions="[
             {
             {
+              label: '详情',
+              icon: 'ant-design:eye-outlined',
+              auth: OtaPermissionKey.DETAIL,
+              onClick: handleOpenDetailDrawer.bind(null, record, false),
+            },
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              auth: OtaPermissionKey.UPDATE,
+              onClick: handleOpenDetailDrawer.bind(null, record, true),
+            },
+          ]"
+          :drop-down-actions="[
+            {
               label: '下载',
               label: '下载',
               icon: 'ant-design:download-outlined',
               icon: 'ant-design:download-outlined',
               auth: OtaPermissionKey.DOWNLOAD,
               auth: OtaPermissionKey.DOWNLOAD,