Merge branch 'ww' into 'main'

feat: implement model of matter in product detail

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

@@ -21,7 +21,7 @@ VITE_PROXY = [["/api","http://222.180.200.114:48080/api"],["/thingskit-drawio","
 # 实时数据的ws地址
 # 实时数据的ws地址
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://44.99.141.212:8080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://44.99.141.212:8080/api/ws/plugins/telemetry?token=
-VITE_WEB_SOCKET = ws://dev.thingskit.com/api/ws/plugins/telemetry?token=
+VITE_WEB_SOCKET = ws://222.180.200.114:48080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://121.37.251.8:8080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://121.37.251.8:8080/api/ws/plugins/telemetry?token=
 
 
 # Delete console
 # Delete console

@@ -31,3 +31,5 @@ pnpm-debug.log*
 *.njsproj
 *.njsproj
 *.sln
 *.sln
 *.sw?
 *.sw?
+
+yarn.lock

 import { defHttp } from '/@/utils/http/axios';
 import { defHttp } from '/@/utils/http/axios';
 import {
 import {
   DeviceModel,
   DeviceModel,
+  DeviceModelOfMatterAttrs,
   DeviceProfileModel,
   DeviceProfileModel,
   DeviceProfileQueryParam,
   DeviceProfileQueryParam,
   DeviceQueryParam,
   DeviceQueryParam,
@@ -24,6 +25,8 @@ enum DeviceManagerApi {
 
 
   DEVICE_CREDENTIALS = '/device/credentials',
   DEVICE_CREDENTIALS = '/device/credentials',
   COMMAND_ISSUANCE = '/rpc',
   COMMAND_ISSUANCE = '/rpc',
+
+  DEVICE_ATTR = '/device/attributes',
 }
 }
 
 
 export const devicePage = (params: DeviceQueryParam) => {
 export const devicePage = (params: DeviceQueryParam) => {
@@ -224,3 +227,9 @@ export const commandIssuanceApi = (type, tbDeviceId, data) => {
     }
     }
   );
   );
 };
 };
+
+export const getDeviceAttrs = (profileId: string, id: string) => {
+  return defHttp.get<DeviceModelOfMatterAttrs[]>({
+    url: `${DeviceManagerApi.DEVICE_ATTR}/${profileId}/${id}`,
+  });
+};

+import { StructJSON } from './modelOfMatterModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
 import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
 import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
 export enum DeviceState {
 export enum DeviceState {
@@ -85,3 +86,9 @@ export interface DeviceRecord {
   type: string;
   type: string;
   default: boolean;
   default: boolean;
 }
 }
+
+export interface DeviceModelOfMatterAttrs {
+  name: string;
+  identifier: string;
+  detail: StructJSON;
+}

@@ -15,9 +15,23 @@ export interface Specs {
   };
   };
 }
 }
 
 
-export interface FunctionJson {
+export interface DataType {
   type: string;
   type: string;
-  specs?: Partial<Specs> | ModelOfMatterParams[];
+  specs?: Partial<Specs> | StructJSON[];
+}
+
+export interface StructJSON {
+  functionName?: string;
+  identifier?: string;
+  remark?: string;
+  dataType?: DataType;
+}
+
+export interface FunctionJson {
+  dataType?: DataType | DataType[];
+  inputData?: DataType[];
+  outputData?: DataType[];
+  serviceCommand?: string;
 }
 }
 
 
 export interface ModelOfMatterParams {
 export interface ModelOfMatterParams {
@@ -28,6 +42,7 @@ export interface ModelOfMatterParams {
   identifier: string;
   identifier: string;
   remark: string;
   remark: string;
   id?: string;
   id?: string;
+  // callType
 }
 }
 
 
 export interface GetModelTslParams {
 export interface GetModelTslParams {

@@ -7,10 +7,12 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { formSchemas } from './config';
   import { formSchemas } from './config';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { OpenModalMode, OpenModalParams, StructRecord } from './type';
+  import { OpenModalMode, OpenModalParams } from './type';
   import { ref, unref } from 'vue';
   import { ref, unref } from 'vue';
-  import { transformFormValue } from './util';
+  import { transfromToStructJSON } from './util';
   import { cloneDeep } from 'lodash-es';
   import { cloneDeep } from 'lodash-es';
+  import { DataType, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+  import { isArray } from '/@/utils/is';
 
 
   const modalReceiveRecord = ref<OpenModalParams>({
   const modalReceiveRecord = ref<OpenModalParams>({
     mode: OpenModalMode.CREATE,
     mode: OpenModalMode.CREATE,
@@ -32,17 +34,14 @@
   const [registerModal, { closeModal }] = useModalInner((record: OpenModalParams) => {
   const [registerModal, { closeModal }] = useModalInner((record: OpenModalParams) => {
     modalReceiveRecord.value = record;
     modalReceiveRecord.value = record;
     const data = record.record || {};
     const data = record.record || {};
-    const { functionJson = {} } = data! as StructRecord;
-    const { specs = {} } = functionJson as StructRecord['functionJson'];
+    const { dataType = {} } = data! as StructJSON;
+    const { specs = {}, type } = dataType as DataType;
+
     if (record.record) {
     if (record.record) {
       const value = {
       const value = {
+        type,
         ...data,
         ...data,
-        ...functionJson,
-        ...specs,
-        valueRange: {
-          min: specs.min,
-          max: specs.max,
-        },
+        ...(isArray(specs) ? { specs } : { ...specs }),
       };
       };
 
 
       setFieldsValue(value);
       setFieldsValue(value);
@@ -52,9 +51,9 @@
   const handleSubmit = async () => {
   const handleSubmit = async () => {
     try {
     try {
       const _value = await validate();
       const _value = await validate();
-      let value = transformFormValue(_value);
-      value = {
-        ...value,
+      let structJSON = transfromToStructJSON(_value);
+      const value = {
+        ...structJSON,
         ...(unref(modalReceiveRecord)?.record?.id
         ...(unref(modalReceiveRecord)?.record?.id
           ? { id: unref(modalReceiveRecord)?.record?.id }
           ? { id: unref(modalReceiveRecord)?.record?.id }
           : {}),
           : {}),

 import { h } from 'vue';
 import { h } from 'vue';
+import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { FormSchema } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
@@ -11,6 +12,23 @@ export enum DateTypeEnum {
   IS_BOOL = 'BOOL',
   IS_BOOL = 'BOOL',
 }
 }
 
 
+const validateValueRange = (_rule, value: Record<'min' | 'max', number>, _callback) => {
+  value = value || {};
+  const { min, max } = value;
+  if (min >= max) {
+    return Promise.reject('最大值小于最小值');
+  }
+  return Promise.resolve();
+};
+
+const validateJSON = (_rule, value: ModelOfMatterParams[], _callback) => {
+  console.log('validate json', value);
+  if (value.length) {
+    return Promise.resolve();
+  }
+  return Promise.reject('JSON对象不能为空');
+};
+
 export const formSchemas: FormSchema[] = [
 export const formSchemas: FormSchema[] = [
   {
   {
     field: FormField.FUNCTION_NAME,
     field: FormField.FUNCTION_NAME,
@@ -70,6 +88,7 @@ export const formSchemas: FormSchema[] = [
     ifShow: ({ values }) =>
     ifShow: ({ values }) =>
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+    rules: [{ validator: validateValueRange }],
   },
   },
   {
   {
     field: FormField.STEP,
     field: FormField.STEP,
@@ -81,10 +100,29 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
     componentProps: {
       maxLength: 255,
       maxLength: 255,
       placeholder: '请输入步长',
       placeholder: '请输入步长',
+      min: 1,
+      formatter: (value: number | string) => {
+        return value ? Math.floor(Number(value)) : value;
+      },
     },
     },
     ifShow: ({ values }) =>
     ifShow: ({ values }) =>
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_INT ||
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
       values[FormField.TYPE] === DateTypeEnum.IS_NUMBER_DOUBLE,
+    dynamicRules: ({ model }) => {
+      const valueRange = model[FormField.VALUE_RANGE] || {};
+      const { min = 0, max = 0 } = valueRange;
+      const step = model[FormField.STEP];
+      return [
+        {
+          validator: () => {
+            if (step > max - min) {
+              return Promise.reject('步长不能大于取值范围的差值');
+            }
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
   },
   },
   {
   {
     field: FormField.UNIT_NAME,
     field: FormField.UNIT_NAME,
@@ -140,6 +178,18 @@ export const formSchemas: FormSchema[] = [
       placeholder: '如：关',
       placeholder: '如：关',
     },
     },
     ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
     ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
+    dynamicRules: ({ model }) => {
+      const close = model[FormField.BOOL_CLOSE];
+      const open = model[FormField.BOOL_OPEN];
+      return [
+        {
+          validator() {
+            if (open === close) return Promise.reject('布尔值不能相同');
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
   },
   },
   {
   {
     field: FormField.BOOL_OPEN,
     field: FormField.BOOL_OPEN,
@@ -153,6 +203,18 @@ export const formSchemas: FormSchema[] = [
       placeholder: '如：开',
       placeholder: '如：开',
     },
     },
     ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
     ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_BOOL,
+    dynamicRules: ({ model }) => {
+      const close = model[FormField.BOOL_CLOSE];
+      const open = model[FormField.BOOL_OPEN];
+      return [
+        {
+          validator() {
+            if (open === close) return Promise.reject('布尔值不能相同');
+            return Promise.resolve();
+          },
+        },
+      ];
+    },
   },
   },
   {
   {
     field: FormField.LENGTH,
     field: FormField.LENGTH,
@@ -200,15 +262,7 @@ export const formSchemas: FormSchema[] = [
     changeEvent: 'update:value',
     changeEvent: 'update:value',
     colProps: { span: 24 },
     colProps: { span: 24 },
     ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_STRUCT,
     ifShow: ({ values }) => values[FormField.TYPE] === DateTypeEnum.IS_STRUCT,
-    rules: [
-      {
-        required: true,
-        validator(_rule, value, _callback) {
-          console.log(value);
-          return Promise.resolve();
-        },
-      },
-    ],
+    rules: [{ required: true, validator: validateJSON }],
   },
   },
   {
   {
     field: FormField.REFARK,
     field: FormField.REFARK,

 import { DateTypeEnum } from './config';
 import { DateTypeEnum } from './config';
-import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+import { StructJSON } from '/@/api/device/model/modelOfMatterModel';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 import { FormField } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 
 
 export enum OpenModalMode {
 export enum OpenModalMode {
@@ -22,6 +22,6 @@ export interface StructFormValue
   [FormField.STRUCT]: StructRecord[];
   [FormField.STRUCT]: StructRecord[];
 }
 }
 
 
-export interface StructRecord extends ModelOfMatterParams {
+export interface StructRecord extends StructJSON {
   id: string;
   id: string;
 }
 }

 import { DateTypeEnum } from './config';
 import { DateTypeEnum } from './config';
 import { StructFormValue } from './type';
 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';
+import { DataType, ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
 
 
-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> {
+export function transfromToStructJSON(value: StructFormValue): StructJSON {
   const {
   const {
     type,
     type,
     valueRange,
     valueRange,
@@ -50,31 +17,26 @@ export function transformFormValue(value: StructFormValue): Partial<ModelOfMatte
     remark,
     remark,
     specs,
     specs,
   } = value;
   } = value;
-  const { min, max } = valueRange! || {};
   const basic = { functionName, identifier, remark };
   const basic = { functionName, identifier, remark };
-  let functionJson = {} as unknown as ModelOfMatterParams['functionJson'];
+  let dataType = {} as unknown as DataType;
 
 
-  console.log(value);
   switch (type) {
   switch (type) {
     case DateTypeEnum.IS_NUMBER_INT:
     case DateTypeEnum.IS_NUMBER_INT:
-      validateValueRangeAndStep(Number(min), Number(step), Number(max));
-      functionJson = {
+      dataType = {
         type,
         type,
-        specs: { max, min, valueRange, step, unit, unitName },
+        specs: { valueRange, step, unit, unitName },
       };
       };
       break;
       break;
 
 
     case DateTypeEnum.IS_NUMBER_DOUBLE:
     case DateTypeEnum.IS_NUMBER_DOUBLE:
-      validateValueRangeAndStep(Number(min), Number(step), Number(max));
-      functionJson = {
+      dataType = {
         type,
         type,
-        specs: { max, min, valueRange, step, unit, unitName },
+        specs: { valueRange, step, unit, unitName },
       };
       };
       break;
       break;
 
 
     case DateTypeEnum.IS_BOOL:
     case DateTypeEnum.IS_BOOL:
-      validateValueBool(Number(boolClose), Number(boolOpen));
-      functionJson = {
+      dataType = {
         type,
         type,
         specs: {
         specs: {
           boolOpen: boolOpen,
           boolOpen: boolOpen,
@@ -84,22 +46,18 @@ export function transformFormValue(value: StructFormValue): Partial<ModelOfMatte
       break;
       break;
 
 
     case DateTypeEnum.IS_STRING:
     case DateTypeEnum.IS_STRING:
-      functionJson = {
+      dataType = {
         type,
         type,
         specs: { length },
         specs: { length },
       };
       };
       break;
       break;
 
 
     case DateTypeEnum.IS_STRUCT:
     case DateTypeEnum.IS_STRUCT:
-      functionJson = {
+      dataType = {
         type,
         type,
         specs: specs! as unknown as ModelOfMatterParams[],
         specs: specs! as unknown as ModelOfMatterParams[],
       };
       };
       break;
       break;
   }
   }
-  return {
-    ...basic,
-    functionType: FunctionType.PROPERTIES,
-    functionJson,
-  };
+  return { ...basic, dataType };
 }
 }

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { nextTick, reactive, ref, unref } from 'vue';
+  import { nextTick, onUnmounted, reactive, ref, unref } from 'vue';
   import { List, Button, Tooltip, Card } from 'ant-design-vue';
   import { List, Button, Tooltip, Card } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { PageWrapper } from '/@/components/Page';
   import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue';
   import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue';
@@ -13,6 +13,11 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import HistoryData from './HistoryData.vue';
   import HistoryData from './HistoryData.vue';
   import { BasicModal, useModal } from '/@/components/Modal';
   import { BasicModal, useModal } from '/@/components/Modal';
+  import { getDeviceAttrs } from '/@/api/device/deviceManager';
+  import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
+  import { computed } from '@vue/reactivity';
+  import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+  import { isObject } from '/@/utils/is';
 
 
   interface ReceiveMessage {
   interface ReceiveMessage {
     data: {
     data: {
@@ -27,7 +32,7 @@
   }
   }
 
 
   const props = defineProps<{
   const props = defineProps<{
-    deviceDetail: Record<'tbDeviceId', string>;
+    deviceDetail: Record<'tbDeviceId' | 'profileId' | 'id', string>;
   }>();
   }>();
 
 
   const grid = {
   const grid = {
@@ -43,16 +48,21 @@
     originData: [] as DataSource[],
     originData: [] as DataSource[],
     dataSource: [] as DataSource[],
     dataSource: [] as DataSource[],
     message: {} as ReceiveMessage['data'],
     message: {} as ReceiveMessage['data'],
-    sendValue: {
+    attrKeys: [] as DeviceModelOfMatterAttrs[],
+  });
+
+  const getSendValue = computed(() => {
+    return {
       tsSubCmds: [
       tsSubCmds: [
         {
         {
           entityType: 'DEVICE',
           entityType: 'DEVICE',
-          entityId: props.deviceDetail!.tbDeviceId || 'd2526c70-60a9-11ed-ba9c-6b98bfcc8255',
+          entityId: props.deviceDetail!.tbDeviceId,
           scope: 'LATEST_TELEMETRY',
           scope: 'LATEST_TELEMETRY',
           cmdId: 1,
           cmdId: 1,
+          keys: socketInfo.attrKeys.map((item) => item.identifier).join(','),
         },
         },
       ],
       ],
-    },
+    };
   });
   });
 
 
   const [registerForm, { getFieldsValue }] = useForm({
   const [registerForm, { getFieldsValue }] = useForm({
@@ -114,9 +124,23 @@
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
 
 
+  const getUnit = (record: StructJSON) => {
+    const { dataType } = record;
+    const { specs } = dataType! || {};
+
+    return isObject(specs)
+      ? (specs as Specs).unitName && (specs as Specs).unit
+        ? `${(specs as Specs).unitName}/${(specs as Specs).unit}`
+        : ''
+      : '';
+  };
+
   const { send, close, data } = useWebSocket(socketInfo.origin, {
   const { send, close, data } = useWebSocket(socketInfo.origin, {
-    onConnected() {
-      send(JSON.stringify(socketInfo.sendValue));
+    async onConnected() {
+      const { id, profileId } = props.deviceDetail;
+      const value = await getDeviceAttrs(profileId, id);
+      socketInfo.attrKeys = value;
+      send(JSON.stringify(unref(getSendValue)));
     },
     },
     async onMessage() {
     async onMessage() {
       try {
       try {
@@ -128,11 +152,11 @@
             socketInfo.message[key] = value.data[key];
             socketInfo.message[key] = value.data[key];
           });
           });
 
 
-          const allKeys = Object.keys(socketInfo.message);
-
-          socketInfo.originData = socketInfo.dataSource = allKeys.map((key) => {
+          socketInfo.originData = socketInfo.dataSource = socketInfo.attrKeys.map((item) => {
+            const { identifier: key, name, detail } = item;
+            const unit = getUnit(detail);
             const [time, value] = socketInfo.message[key].at(0) || [];
             const [time, value] = socketInfo.message[key].at(0) || [];
-            return { key, value, time };
+            return { key, value, time, name, unit };
           });
           });
 
 
           await nextTick();
           await nextTick();
@@ -141,7 +165,6 @@
       } catch (error) {}
       } catch (error) {}
     },
     },
     onDisconnected() {
     onDisconnected() {
-      console.log('断开连接了');
       close();
       close();
     },
     },
     onError() {
     onError() {
@@ -154,6 +177,8 @@
     socketInfo.attr = key;
     socketInfo.attr = key;
     openModal(true);
     openModal(true);
   };
   };
+
+  onUnmounted(() => close());
 </script>
 </script>
 
 
 <template>
 <template>
@@ -198,16 +223,17 @@
           <List.Item>
           <List.Item>
             <Card class="shadow-md">
             <Card class="shadow-md">
               <template #title>
               <template #title>
-                <span class="text-base font-normal">{{ item.key }}</span>
+                <span class="text-base font-normal">{{ item.name }}</span>
               </template>
               </template>
               <template #extra>
               <template #extra>
                 <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
                 <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
               </template>
               </template>
-              <section>
-                <div class="flex font-bold text-lg mb-4">
-                  <div>{{ item.value }}</div>
+              <section class="min-h-16 flex flex-col justify-between">
+                <div class="flex font-bold text-lg mb-4 gap-2">
+                  <div>{{ item.value || '--' }}</div>
+                  <div>{{ item.unit }}</div>
                 </div>
                 </div>
-                <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) }}</div>
+                <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) || '--' }}</div>
               </section>
               </section>
             </Card>
             </Card>
           </List.Item>
           </List.Item>

@@ -32,7 +32,11 @@
           />
           />
         </Tabs>
         </Tabs>
         <Attribute v-show="activeKey === FunctionType.PROPERTIES" ref="AttrRef" />
         <Attribute v-show="activeKey === FunctionType.PROPERTIES" ref="AttrRef" />
-        <Service v-show="activeKey === FunctionType.SERVICE" ref="ServiceRef" />
+        <Service
+          v-show="activeKey === FunctionType.SERVICE"
+          :record="$props.record"
+          ref="ServiceRef"
+        />
         <Events v-show="activeKey === FunctionType.EVENTS" ref="EventsRef" />
         <Events v-show="activeKey === FunctionType.EVENTS" ref="EventsRef" />
       </div>
       </div>
     </BasicModal>
     </BasicModal>
@@ -51,7 +55,6 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { OpenModelMode, OpenModelOfMatterModelParams } from './types/index';
   import { OpenModelMode, OpenModelOfMatterModelParams } from './types/index';
   import { FunctionType } from './cpns/config';
   import { FunctionType } from './cpns/config';
-  import { StructRecord } from '/@/components/Form/src/externalCompns/components/StructForm/type';
 
 
   const emit = defineEmits(['register', 'success']);
   const emit = defineEmits(['register', 'success']);
 
 
@@ -75,9 +78,9 @@
   const functionType = ref<FunctionType>();
   const functionType = ref<FunctionType>();
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
 
 
-  const setAttrFormData = (data: StructRecord) => AttrRef.value?.setFormData(data);
-  const setServiceFormData = (data) => ServiceRef.value?.setFormData(data);
-  const setEventsFormData = (data) => EventsRef.value?.setFormData(data);
+  const setAttrFormData = (data: ModelOfMatterParams) => AttrRef.value?.setFormData(data);
+  const setServiceFormData = (data: ModelOfMatterParams) => ServiceRef.value?.setFormData(data);
+  const setEventsFormData = (data: ModelOfMatterParams) => EventsRef.value?.setFormData(data);
 
 
   const enums = {
   const enums = {
     [FunctionType.PROPERTIES]: setAttrFormData,
     [FunctionType.PROPERTIES]: setAttrFormData,
@@ -85,7 +88,7 @@
     [FunctionType.EVENTS]: setEventsFormData,
     [FunctionType.EVENTS]: setEventsFormData,
   };
   };
 
 
-  function setFormData(type: FunctionType, value: StructRecord) {
+  function setFormData(type: FunctionType, value: ModelOfMatterParams) {
     const setFn = enums[type];
     const setFn = enums[type];
     setFn(value);
     setFn(value);
   }
   }
@@ -98,7 +101,7 @@
       if (record) {
       if (record) {
         functionType.value = data.record.functionType;
         functionType.value = data.record.functionType;
         activeKey.value = data.record.functionType;
         activeKey.value = data.record.functionType;
-        setFormData(record.functionType, record as unknown as StructRecord);
+        setFormData(record.functionType, record as unknown as ModelOfMatterParams);
       }
       }
       if (unref(openModalMode) === OpenModelMode.VIEW) {
       if (unref(openModalMode) === OpenModelMode.VIEW) {
         setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看物模型' });
         setModalProps({ showOkBtn: false, showCancelBtn: false, title: '查看物模型' });
@@ -133,7 +136,7 @@
       } else if (activeKey.value == FunctionType.SERVICE) {
       } else if (activeKey.value == FunctionType.SERVICE) {
         params = (await ServiceRef.value?.getFormData()) || {};
         params = (await ServiceRef.value?.getFormData()) || {};
       } else {
       } else {
-        params = await EventsRef.value?.getFormData();
+        params = (await EventsRef.value?.getFormData()) || {};
       }
       }
       params.deviceProfileId = props.record.id;
       params.deviceProfileId = props.record.id;
       if (unref(openModalMode) === OpenModelMode.CREATE) {
       if (unref(openModalMode) === OpenModelMode.CREATE) {

 <template>
 <template>
-  <div>
-    <BasicModal
-      title="物模型TSL"
-      :maskClosable="false"
-      v-bind="$attrs"
-      width="55rem"
-      @register="register"
-      @ok="handleSubmit"
-      @cancel="handleCancel"
-    >
-      <TslContent ref="TslConRef" />
-    </BasicModal>
-  </div>
+  <BasicModal
+    title="物模型TSL"
+    :maskClosable="false"
+    v-bind="$attrs"
+    width="55rem"
+    @register="register"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <TslContent :record="$props.record" ref="TslConRef" />
+  </BasicModal>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
-  // import { useMessage } from '/@/hooks/web/useMessage';
   import TslContent from './cpns/TslContent.vue';
   import TslContent from './cpns/TslContent.vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
 
 
   defineEmits(['register']);
   defineEmits(['register']);
-  // const { createMessage } = useMessage();
+
+  defineProps<{
+    record: DeviceRecord;
+  }>();
+
   const TslConRef = ref<InstanceType<typeof TslContent>>();
   const TslConRef = ref<InstanceType<typeof TslContent>>();
   const isUpdate = ref(false);
   const isUpdate = ref(false);
 
 
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
   const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
+    // const record = await getModelTsl({
+    //   functionType: FunctionType.PROPERTIES,
+    //   deviceProfileId: props.record.id,
+    // });
     setModalProps({ confirmLoading: true });
     setModalProps({ confirmLoading: true });
     isUpdate.value = data.isUpdate;
     isUpdate.value = data.isUpdate;
     setModalProps({ confirmLoading: false });
     setModalProps({ confirmLoading: false });
     // const jsCode = TslConRef?.value.aceEditor.getValue();
     // const jsCode = TslConRef?.value.aceEditor.getValue();
     // TslConRef?.value.aceEditor.setValue(jsCode);
     // TslConRef?.value.aceEditor.setValue(jsCode);
   });
   });
+
   const handleCancel = () => {
   const handleCancel = () => {
     TslConRef.value?.resetFormData();
     TslConRef.value?.resetFormData();
     closeModal();
     closeModal();

@@ -3,14 +3,12 @@
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { DataType, ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
   import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   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';
+  import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
+  import { transfromToStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util';
+  import { FunctionType } from './config';
+  import { isArray } from 'lodash';
 
 
   const [register, { validate, resetFields, setFieldsValue }] = useForm({
   const [register, { validate, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
     labelWidth: 100,
@@ -26,7 +24,17 @@
   async function getFormData(): Promise<Partial<ModelOfMatterParams>> {
   async function getFormData(): Promise<Partial<ModelOfMatterParams>> {
     const _values = (await validate()) as StructFormValue;
     const _values = (await validate()) as StructFormValue;
     if (!_values) return {};
     if (!_values) return {};
-    let value = transformFormValue(_values);
+    const { functionName, remark, identifier } = _values;
+    const structJSON = transfromToStructJSON(_values);
+    const value = {
+      functionName,
+      functionType: FunctionType.PROPERTIES,
+      remark,
+      identifier,
+      functionJson: {
+        dataType: structJSON.dataType,
+      },
+    } as ModelOfMatterParams;
     return value;
     return value;
   }
   }
 
 
@@ -34,14 +42,17 @@
     resetFields();
     resetFields();
   };
   };
 
 
-  const setFormData = (record: StructRecord) => {
-    const { functionJson } = record as StructRecord;
-    const { specs = {} } = functionJson || ({} as StructRecord['functionJson']);
+  const setFormData = (record: ModelOfMatterParams) => {
+    const { functionJson } = record;
+    const { dataType = {} } = functionJson!;
+
+    const { specs } = dataType! as DataType;
 
 
     const value = {
     const value = {
       ...record,
       ...record,
       ...functionJson,
       ...functionJson,
-      ...(isObject(specs) ? specs : {}),
+      ...dataType,
+      ...(isArray(specs) ? specs : { ...specs }),
     };
     };
 
 
     setFieldsValue(value);
     setFieldsValue(value);

@@ -3,10 +3,11 @@
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { eventSchemas } from './config';
+  import { eventSchemas, FunctionType } from './config';
   import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
   import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
 
 
-  const [register, { validate, resetFields }] = useForm({
+  const [register, { validate, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
     labelWidth: 100,
     schemas: eventSchemas,
     schemas: eventSchemas,
     actionColOptions: {
     actionColOptions: {
@@ -18,12 +19,35 @@
   });
   });
 
 
   //回显数据
   //回显数据
-  const setFormData = () => {};
+  const setFormData = (record: ModelOfMatterParams) => {
+    const { functionJson = {}, functionName, identifier, remark } = record;
+    const { outputData } = functionJson;
+    const value = {
+      functionName,
+      identifier,
+      remark,
+      outputData,
+    };
+    setFieldsValue(value);
+  };
 
 
   async function getFormData() {
   async function getFormData() {
-    const values = (await validate()) as ModelOfMatterParams;
-    if (!values) return;
-    console.log(values);
+    const _values = (await validate()) as StructFormValue;
+    const { functionName, remark, identifier, outputData } = _values;
+    if (!_values) return {} as unknown as ModelOfMatterParams;
+    const value = {
+      functionName,
+      identifier,
+      remark,
+      functionType: FunctionType.EVENTS,
+      // callType,
+      // eventType,
+      functionJson: {
+        outputData,
+      },
+    } as ModelOfMatterParams;
+
+    return value;
   }
   }
 
 
   //清空数据
   //清空数据

@@ -4,11 +4,18 @@
 <script lang="ts" setup>
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { serviceSchemas } from './config';
   import { serviceSchemas } from './config';
-  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
   import { FunctionType } from './config';
   import { FunctionType } from './config';
-  const [register, { validate, resetFields }] = useForm({
+  import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
+  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+
+  const props = defineProps<{
+    record: DeviceRecord;
+  }>();
+
+  const [register, { validate, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
     labelWidth: 100,
-    schemas: serviceSchemas,
+    schemas: serviceSchemas(props.record.transportType === 'TCP'),
     actionColOptions: {
     actionColOptions: {
       span: 14,
       span: 14,
     },
     },
@@ -18,15 +25,39 @@
   });
   });
 
 
   //回显数据
   //回显数据
-  const setFormData = () => {};
+  const setFormData = (record: ModelOfMatterParams) => {
+    const { functionJson = {}, functionName, identifier, remark } = record;
+    const { inputData, outputData, serviceCommand } = functionJson;
+    const value = {
+      functionName,
+      identifier,
+      remark,
+      inputData,
+      outputData,
+      serviceCommand,
+    };
+    setFieldsValue(value);
+  };
 
 
   //获取数据
   //获取数据
   async function getFormData() {
   async function getFormData() {
-    const values = (await validate()) as ModelOfMatterParams;
-    if (!values) return;
-    values.functionType = FunctionType.SERVICE;
-    console.log(values);
-    return values;
+    const _values = (await validate()) as StructFormValue;
+    const { functionName, remark, identifier, inputData, outputData, serviceCommand } = _values;
+    if (!_values) return {};
+    const value = {
+      functionName,
+      identifier,
+      remark,
+      functionType: FunctionType.SERVICE,
+      // callType,
+      functionJson: {
+        inputData,
+        outputData,
+        serviceCommand,
+      },
+    } as ModelOfMatterParams;
+
+    return value;
   }
   }
 
 
   //清空数据
   //清空数据

@@ -3,11 +3,11 @@
     <div>
     <div>
       <Typography>
       <Typography>
         <TypographyParagraph>
         <TypographyParagraph>
-          <blockquote style="background: #f2f2f2">{{ useBlockContent }}</blockquote>
+          <blockquote class="bg-gray-50">{{ useBlockContent }}</blockquote>
         </TypographyParagraph>
         </TypographyParagraph>
       </Typography>
       </Typography>
     </div>
     </div>
-    <div style="display: flex; justify-content: space-between; align-items: center">
+    <div class="flex justify-between items-center">
       <div>模型内容</div>
       <div>模型内容</div>
       <div>
       <div>
         <Button @click="handlePremitter">
         <Button @click="handlePremitter">

@@ -23,6 +23,7 @@ export enum FormField {
   INPUT_PARAM = 'inputData',
   INPUT_PARAM = 'inputData',
   OUTPUT_PARAM = 'outputData',
   OUTPUT_PARAM = 'outputData',
   EVENT_TYPE = 'eventType',
   EVENT_TYPE = 'eventType',
+  SERVICE_COMMAND = 'serviceCommand',
 
 
   STRUCT = 'struct',
   STRUCT = 'struct',
 }
 }
@@ -82,79 +83,92 @@ export const defaultTslContent = {
   ],
   ],
 };
 };
 
 
-export const serviceSchemas: FormSchema[] = [
-  {
-    field: FormField.FUNCTION_NAME,
-    label: '功能名称',
-    required: true,
-    component: 'Input',
-    colProps: {
-      span: 18,
+export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
+  return [
+    {
+      field: FormField.FUNCTION_NAME,
+      label: '功能名称',
+      required: true,
+      component: 'Input',
+      colProps: {
+        span: 18,
+      },
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入功能名称',
+      },
     },
     },
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入功能名称',
+    {
+      field: FormField.IDENTIFIER,
+      label: '标识符',
+      required: true,
+      component: 'Input',
+      colProps: {
+        span: 18,
+      },
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入标识符',
+      },
     },
     },
-  },
-  {
-    field: FormField.IDENTIFIER,
-    label: '标识符',
-    required: true,
-    component: 'Input',
-    colProps: {
-      span: 18,
+    {
+      field: FormField.CALL_TYPE,
+      component: 'ApiRadioGroup',
+      label: '调用方式',
+      required: true,
+      colProps: {
+        span: 24,
+      },
+      defaultValue: 'ASYNC',
+      componentProps: {
+        placeholder: '请选择调用方式',
+        api: findDictItemByCode,
+        params: {
+          dictCode: 'call_mode',
+        },
+        labelField: 'itemText',
+        valueField: 'itemValue',
+      },
     },
     },
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入标识符',
+    {
+      field: FormField.INPUT_PARAM,
+      label: '输入参数',
+      component: 'StructForm',
+      valueField: 'value',
+      changeEvent: 'update:value',
+      ifShow: !tcpDeviceFlag,
+      colProps: { span: 24 },
     },
     },
-  },
-  {
-    field: FormField.CALL_TYPE,
-    component: 'ApiRadioGroup',
-    label: '调用方式',
-    required: true,
-    colProps: {
-      span: 24,
+    {
+      field: FormField.OUTPUT_PARAM,
+      label: '输出参数',
+      component: 'StructForm',
+      valueField: 'value',
+      changeEvent: 'update:value',
+      ifShow: !tcpDeviceFlag,
+      colProps: { span: 24 },
     },
     },
-    defaultValue: 'ASYNC',
-    componentProps: {
-      placeholder: '请选择调用方式',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'call_mode',
+    {
+      field: FormField.SERVICE_COMMAND,
+      label: '服务命令',
+      component: 'Input',
+      ifShow: tcpDeviceFlag,
+      componentProps: {
+        placeholder: '请输入服务命令',
       },
       },
-      labelField: 'itemText',
-      valueField: 'itemValue',
     },
     },
-  },
-  {
-    field: FormField.INPUT_PARAM,
-    label: '输入参数',
-    component: 'StructForm',
-    valueField: 'value',
-    changeEvent: 'update:value',
-    colProps: { span: 24 },
-  },
-  {
-    field: FormField.OUTPUT_PARAM,
-    label: '输出参数',
-    component: 'StructForm',
-    valueField: 'value',
-    changeEvent: 'update:value',
-    colProps: { span: 24 },
-  },
-  {
-    field: FormField.REFARK,
-    label: '备注',
-    component: 'InputTextArea',
-    componentProps: {
-      rows: 6,
-      maxLength: 100,
-      placeholder: '请输入描述',
+    {
+      field: FormField.REFARK,
+      label: '备注',
+      component: 'InputTextArea',
+      componentProps: {
+        rows: 6,
+        maxLength: 100,
+        placeholder: '请输入描述',
+      },
     },
     },
-  },
-];
+  ];
+};
 
 
 export const eventSchemas: FormSchema[] = [
 export const eventSchemas: FormSchema[] = [
   {
   {

@@ -18,6 +18,7 @@
   const [register, { reload, getSelectRowKeys, getRowSelection, setSelectedRowKeys }] = useTable({
   const [register, { reload, getSelectRowKeys, getRowSelection, setSelectedRowKeys }] = useTable({
     columns,
     columns,
     title: '包仓库',
     title: '包仓库',
+    bordered: true,
     api: async (params: GetOtaPackagesParams) => {
     api: async (params: GetOtaPackagesParams) => {
       const data = await getOtaPackagesList({
       const data = await getOtaPackagesList({
         ...params,
         ...params,