Merge branch 'ww' into 'main'

fix: BUG in teambition && optimize page

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

@@ -14,9 +14,9 @@ VITE_PUBLIC_PATH = /
 # 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://222.180.200.114:48080/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://192.168.10.136:8080/api"],["/thingskit-drawio","http://192.168.10.136:8080/api"]]
+VITE_PROXY = [["/api","http://192.168.10.103:8080/api"],["/thingskit-drawio","http://192.168.10.136:8080/api"]]
 
 # 实时数据的ws地址
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=

 import { BasicPageParams } from '../model/baseModel';
 import { GetModelTslParams, ModelOfMatterParams } from './model/modelOfMatterModel';
 import { defHttp } from '/@/utils/http/axios';
+import { FunctionType } from '/@/views/device/profiles/step/cpns/physical/cpns/config';
 
 enum ModelOfMatter {
   CREATE = '/things_model',
@@ -8,9 +9,16 @@ enum ModelOfMatter {
   DELETE = '/things_model',
   TSL = '/things_model',
   LIST = '/things_model/page',
+  RELEASE = '/things_model',
 }
 
-export const getModelList = (params: BasicPageParams) => {
+export const getModelList = (
+  params: BasicPageParams & {
+    deviceProfileId: string;
+    functionTyp?: FunctionType;
+    nameOrIdentifier?: string;
+  }
+) => {
   return defHttp.get({
     url: `${ModelOfMatter.LIST}`,
     params,
@@ -46,3 +54,9 @@ export const deleteModel = (params: string[]) => {
     },
   });
 };
+
+export const releaseModel = (deviceProfileId: string) => {
+  return defHttp.put({
+    url: `${ModelOfMatter.RELEASE}/${deviceProfileId}`,
+  });
+};

+import { cloneDeep } from 'lodash-es';
 import { DateTypeEnum } from './config';
 import { StructFormValue } from './type';
 import { DataType, ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+import { isArray } from '/@/utils/is';
 
 export function transfromToStructJSON(value: StructFormValue): StructJSON {
   const {
@@ -16,9 +18,9 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
     identifier,
     remark,
     specs,
-    assessMode,
+    accessMode,
   } = value;
-  const basic = { functionName, identifier, remark, assessMode };
+  const basic = { functionName, identifier, remark, accessMode };
   let dataType = {} as unknown as DataType;
 
   switch (type) {
@@ -62,3 +64,27 @@ export function transfromToStructJSON(value: StructFormValue): StructJSON {
   }
   return { ...basic, dataType };
 }
+
+export const excludeIdInStructJSON = (struct: DataType) => {
+  const _value = cloneDeep(struct);
+  const { specs } = _value;
+  const list = [specs];
+
+  while (list.length) {
+    for (const item of list) {
+      if (isArray(item)) {
+        (item as StructJSON[]).forEach((temp) => {
+          if (temp.dataType?.specs) {
+            list.push(temp.dataType.specs);
+          }
+          Reflect.deleteProperty(temp, 'id');
+        });
+      } else {
+        Reflect.deleteProperty(item as Recordable, 'id');
+      }
+      list.shift();
+    }
+  }
+
+  return _value;
+};

@@ -286,7 +286,7 @@
   }
 
   .split-screen-mode:deep(.ant-spin-container) {
-    height: 100%;
+    height: 100% !important;
   }
 
   .video-container {
@@ -321,4 +321,8 @@
     width: 100%;
     height: 100%;
   }
+
+  .split-mode-lis:deep(.ant-spin-container:fullscreen) {
+    height: 100% !important;
+  }
 </style>

@@ -27,6 +27,7 @@
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   import { cloneDeep } from 'lodash';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   const listColumn = ref(4);
 
@@ -112,8 +113,9 @@
   const { VITE_GLOB_CONFIGURATION } = import.meta.env;
   const isDev = isDevMode();
 
+  const { hasPermission } = usePermission();
   const handlePreview = (record: ConfigurationCenterItemsModal) => {
-    console.log(record);
+    if (!hasPermission('api:yt:configuration:center:get_configuration_info:get')) return;
     window.open(
       `${VITE_GLOB_CONFIGURATION}/${isDev ? '?dev=1&' : '?'}configurationId=${
         record!.id
@@ -206,7 +208,12 @@
             <Card hoverable>
               <template #cover>
                 <div class="h-full w-full !flex justify-center items-center text-center">
-                  <img class="w-36 h-36" alt="example" :src="item.thumbnail || configurationSrc" />
+                  <img
+                    class="w-36 h-36"
+                    alt="example"
+                    :src="item.thumbnail || configurationSrc"
+                    @click="handlePreview(item)"
+                  />
                 </div>
               </template>
               <template class="ant-card-actions" #actions>
@@ -215,18 +222,18 @@
                     <EyeOutlined key="setting" @click="handlePreview(item)" />
                   </Tooltip>
                 </Authority>
-                <Authority value="api:yt:configuration:center:update">
-                  <Tooltip title="编辑">
-                    <EditOutlined key="edit" @click="handleCreateOrUpdate(item)" />
+                <Authority value="api:yt:configuration:center:get_configuration_info:get">
+                  <Tooltip title="设计">
+                    <EditOutlined key="edit" @click="handleDesign(item)" />
                   </Tooltip>
                 </Authority>
                 <Dropdown
                   :dropMenuList="[
                     {
                       text: '设计',
-                      auth: 'api:yt:configuration:center:get_configuration_info:get',
+                      auth: 'api:yt:configuration:center:update',
                       icon: 'clarity:note-edit-line',
-                      onClick: handleDesign.bind(null, item),
+                      onClick: handleCreateOrUpdate.bind(null, item),
                     },
                     {
                       text: '删除',

 <template>
-  <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="60%">
-    <Tabs :animated="true" v-model:activeKey="activeKey" @change="handlePanelChange">
-      <TabPane key="product" tab="产品">
+  <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="60%" destroy-on-close>
+    <Tabs v-model:activeKey="activeKey" @change="handlePanelChange">
+      <Tabs.TabPane key="product" tab="产品">
         <div class="relative">
           <DeviceConfigurationStep :ifShowBtn="false" ref="DevConStRef" />
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
         </div>
-      </TabPane>
-      <TabPane key="transport" tab="传输配置">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="transport" tab="传输配置">
         <div class="relative">
           <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" />
           <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
         </div>
-      </TabPane>
-      <TabPane key="modelOfMatter" tab="物模型管理">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="modelOfMatter" tab="物模型管理">
         <PhysicalModelManagementStep :record="record" />
-      </TabPane>
+      </Tabs.TabPane>
     </Tabs>
   </BasicDrawer>
 </template>
 <script lang="ts" setup>
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { Tabs, TabPane } from 'ant-design-vue';
+  import { Tabs } from 'ant-design-vue';
   import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
   import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
   import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
@@ -50,6 +50,7 @@
 
   const [register, {}] = useDrawerInner(async (data: { record: DeviceRecord }) => {
     activeKey.value = 'product';
+    record.value = data.record;
     record.value = await deviceConfigGetDetail(data.record.id);
     setDeviceConfFormData(unref(record));
   });

@@ -6,6 +6,8 @@ import { numberRule } from '/@/utils/rules';
 
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 import { FormField, FunctionType } from './step/cpns/physical/cpns/config';
+import { h } from 'vue';
+import { Tag } from 'ant-design-vue';
 
 export const steps = [
   {
@@ -21,7 +23,7 @@ export const steps = [
 export const formatFunctionType: Record<FunctionType, string> = {
   [FunctionType.PROPERTIES]: '属性',
   [FunctionType.EVENTS]: '事件',
-  [FunctionType.SERVICE]: '事件',
+  [FunctionType.SERVICE]: '服务',
 };
 
 export const physicalColumn: BasicColumn[] = [
@@ -52,12 +54,49 @@ export const physicalColumn: BasicColumn[] = [
     },
   },
   {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+    customRender: (value: Record<'text', number>) => {
+      const { text } = value;
+      return h(
+        Tag,
+        {
+          color: text ? 'green' : 'red',
+        },
+        () => (text ? '已发布' : '待发布')
+      );
+    },
+  },
+  {
     title: '创建时间',
     dataIndex: 'createTime',
     width: 150,
   },
 ];
 
+export const modelOfMatterForm: FormSchema[] = [
+  {
+    field: 'functionType',
+    label: '功能类型',
+    component: 'Select',
+    colProps: { span: 8 },
+    componentProps: {
+      options: [
+        { label: formatFunctionType[FunctionType.PROPERTIES], value: FunctionType.PROPERTIES },
+        { label: formatFunctionType[FunctionType.EVENTS], value: FunctionType.EVENTS },
+        { label: formatFunctionType[FunctionType.SERVICE], value: FunctionType.SERVICE },
+      ],
+    },
+  },
+  {
+    field: 'nameOrIdentifier',
+    label: '功能名称/标识符',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+
 export const step1Schemas: FormSchema[] = [
   {
     field: 'image',

@@ -2,6 +2,7 @@
   <div class="p-style">
     <BasicTable
       :rowSelection="{ type: 'checkbox' }"
+      class="bg-gray-100 dark:bg-dark-900"
       :clickToRowSelect="false"
       @register="registerTable"
     >
@@ -31,6 +32,9 @@
                   新增物模型
                 </Button>
                 <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button>
+                <Button v-if="isShowBtn" type="primary" @click="handleImportModel"
+                  >导入物模型</Button
+                >
               </Authority>
             </div>
             <div class="flex gap-2">
@@ -41,7 +45,9 @@
                   cancel-text="取消"
                   @confirm="handleEmit"
                 >
-                  <Button v-if="isShowBtn" type="primary"> 发布上线 </Button>
+                  <Button v-if="isShowBtn" type="primary" :loading="releaseLoading">
+                    发布上线
+                  </Button>
                 </Popconfirm>
                 <Button v-if="isShowBtn" class="!bg-gray-200" type="text" @click="handleReturn">
                   返回
@@ -108,7 +114,7 @@
 <script lang="ts" setup>
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useModal } from '/@/components/Modal';
-  import { physicalColumn } from '../device.profile.data';
+  import { modelOfMatterForm, physicalColumn } from '../device.profile.data';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Authority } from '/@/components/Authority';
   import PhysicalModelModal from './cpns/physical/PhysicalModelModal.vue';
@@ -116,13 +122,13 @@
   import { Popconfirm, Button, Alert } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
-  import { deleteModel, getModelList } from '/@/api/device/modelOfMatter';
+  import { deleteModel, getModelList, releaseModel } from '/@/api/device/modelOfMatter';
   import { OpenModelOfMatterModelParams, OpenModelMode } from './cpns/physical/types';
   import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
   import { ref } from 'vue';
   defineEmits(['register']);
 
-  defineProps<{
+  const props = defineProps<{
     record: DeviceRecord;
   }>();
 
@@ -132,13 +138,19 @@
   const [registerModalTsl, { openModal: openModalTsl }] = useModal();
 
   const [registerTable, { reload, setProps }] = useTable({
-    api: getModelList,
+    api: async (params: Record<'page' | 'pageSize', number>) => {
+      return await getModelList({ ...params, deviceProfileId: props.record.id });
+    },
     columns: physicalColumn,
     showIndexColumn: false,
     clickToRowSelect: false,
-    useSearchForm: false,
     showTableSetting: true,
     bordered: true,
+    useSearchForm: true,
+    formConfig: {
+      schemas: modelOfMatterForm,
+      labelWidth: 120,
+    },
     actionColumn: {
       width: 200,
       title: '操作',
@@ -200,11 +212,23 @@
   const handleEditPhysicalModel = () => (isShowBtn.value = true);
 
   const handleReturn = () => (isShowBtn.value = false);
-  const handleEmit = () => {
-    isShowBtn.value = false;
-    createMessage.success('发布成功');
+
+  const releaseLoading = ref(false);
+  const handleEmit = async () => {
+    try {
+      releaseLoading.value = true;
+      await releaseModel(props.record.id);
+      handleReturn();
+      createMessage.success('发布成功');
+      reload();
+    } catch (error) {
+    } finally {
+      releaseLoading.value = false;
+    }
   };
 
+  const handleImportModel = async () => {};
+
   defineExpose({});
 </script>
 <style lang="less" scoped>

@@ -9,7 +9,7 @@
       @ok="handleSubmit"
       @cancel="handleCancel"
     >
-      <div>
+      <div class="relative">
         <div v-if="openModalMode === OpenModelMode.CREATE">
           <Typography>
             <TypographyParagraph>
@@ -24,26 +24,26 @@
           :size="size"
         >
           <TabPane :key="FunctionType.PROPERTIES" tab="属性" />
-          <TabPane :key="FunctionType.SERVICE" tab="服务" />
-          <TabPane
-            :key="FunctionType.EVENTS"
-            tab="事件"
-            :disabled="$props.record.transportType === 'TCP'"
-          />
+          <TabPane :key="FunctionType.SERVICE" :disabled="isTCPGatewaySubDevice" tab="服务" />
+          <TabPane :key="FunctionType.EVENTS" tab="事件" :disabled="isTCPGatewaySubDevice" />
         </Tabs>
-        <Attribute v-show="activeKey === FunctionType.PROPERTIES" ref="AttrRef" />
+        <Attribute v-if="activeKey === FunctionType.PROPERTIES" ref="AttrRef" />
         <Service
-          v-show="activeKey === FunctionType.SERVICE"
+          v-if="activeKey === FunctionType.SERVICE"
           :record="$props.record"
           ref="ServiceRef"
         />
-        <Events v-show="activeKey === FunctionType.EVENTS" ref="EventsRef" />
+        <Events v-if="activeKey === FunctionType.EVENTS" ref="EventsRef" />
+        <div
+          v-if="openModalMode === OpenModelMode.VIEW"
+          class="absolute w-full h-full top-0 cursor-not-allowed z-50"
+        ></div>
       </div>
     </BasicModal>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref } from 'vue';
+  import { ref, unref, nextTick, computed } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { Tabs, TabPane, Typography, TypographyParagraph } from 'ant-design-vue';
   import Attribute from './cpns/Attribute.vue';
@@ -51,7 +51,7 @@
   import Events from './cpns/Events.vue';
   import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
   import { createModel, updateModel } from '/@/api/device/modelOfMatter';
-  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { DeviceRecord, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { OpenModelMode, OpenModelOfMatterModelParams } from './types/index';
   import { FunctionType } from './cpns/config';
@@ -62,6 +62,12 @@
     record: DeviceRecord;
   }>();
 
+  const isTCPGatewaySubDevice = computed(() => {
+    const { record } = props;
+    const { deviceType, transportType } = record;
+    return deviceType === DeviceTypeEnum.SENSOR && transportType === 'TCP';
+  });
+
   const blockContent = `属性一般是设备的运行状态，如当前温度等；服务是设备可被调用的方法，支持定义参数，如执行某项任务；事件则是设备上报的
 通知，如告警，需要被及时处理。`;
   const activeKey = ref<FunctionType>(FunctionType.PROPERTIES);
@@ -101,16 +107,13 @@
       if (record) {
         functionType.value = data.record.functionType;
         activeKey.value = data.record.functionType;
+        await nextTick();
         setFormData(record.functionType, record as unknown as ModelOfMatterParams);
       }
       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 });
       }
     }
@@ -150,6 +153,7 @@
       closeModal();
       emit('success');
     } catch (error) {
+      throw Error(error);
     } finally {
       setModalProps({ loading: false, okButtonProps: { loading: false } });
     }

@@ -6,6 +6,7 @@
     width="55rem"
     @register="register"
     @ok="handleSubmit"
+    okText="导出物模型"
     @cancel="handleCancel"
   >
     <TslContent :record="$props.record" ref="TslConRef" />
@@ -19,7 +20,7 @@
 
   defineEmits(['register']);
 
-  defineProps<{
+  const props = defineProps<{
     record: DeviceRecord;
   }>();
 
@@ -42,7 +43,17 @@
   const handleSubmit = () => {
     const value = TslConRef.value?.getFormData();
     if (!value) return;
-    console.log('搜集值', value);
+
+    const blob = new Blob([JSON.stringify(value, null, 2)], { type: 'text/json' });
+    const objectURL = URL.createObjectURL(blob);
+    const element = document.createElement('a');
+    element.href = objectURL;
+    element.download = `${props.record.name}-model.json`;
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    element.remove();
+    URL.revokeObjectURL(objectURL);
   };
 </script>
 

@@ -6,7 +6,10 @@
   import { DataType, ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
   import { formSchemas } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
-  import { transfromToStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util';
+  import {
+    transfromToStructJSON,
+    excludeIdInStructJSON,
+  } from '/@/components/Form/src/externalCompns/components/StructForm/util';
   import { FunctionType } from './config';
   import { isArray } from 'lodash';
 
@@ -26,6 +29,8 @@
     if (!_values) return {};
     const { functionName, remark, identifier, accessMode } = _values;
     const structJSON = transfromToStructJSON(_values);
+    const dataType = excludeIdInStructJSON(structJSON.dataType!);
+
     const value = {
       functionName,
       functionType: FunctionType.PROPERTIES,
@@ -33,7 +38,7 @@
       identifier,
       accessMode,
       functionJson: {
-        dataType: structJSON.dataType,
+        dataType: dataType,
       },
     } as ModelOfMatterParams;
     return value;

@@ -4,8 +4,9 @@
 <script lang="ts" setup>
   import { BasicForm, useForm } from '/@/components/Form';
   import { eventSchemas, FunctionType } from './config';
-  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
+  import { excludeIdInStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util';
 
   const [register, { validate, resetFields, setFieldsValue }] = useForm({
     labelWidth: 100,
@@ -34,8 +35,13 @@
 
   async function getFormData() {
     const _values = (await validate()) as StructFormValue;
-    const { functionName, remark, identifier, outputData, eventType } = _values;
+    const { functionName, remark, identifier, outputData: _outputData, eventType } = _values;
     if (!_values) return {} as unknown as ModelOfMatterParams;
+
+    const outputData = (_outputData as unknown as StructJSON[]).map((item) =>
+      excludeIdInStructJSON(item.dataType!)
+    );
+
     const value = {
       functionName,
       identifier,

@@ -6,8 +6,9 @@
   import { serviceSchemas } from './config';
   import { FunctionType } from './config';
   import { StructFormValue } from '/@/components/Form/src/externalCompns/components/StructForm/type';
-  import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+  import { ModelOfMatterParams, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { excludeIdInStructJSON } from '/@/components/Form/src/externalCompns/components/StructForm/util';
 
   const props = defineProps<{
     record: DeviceRecord;
@@ -27,7 +28,10 @@
   //回显数据
   const setFormData = (record: ModelOfMatterParams) => {
     const { functionJson = {}, functionName, identifier, remark, callType } = record;
-    const { inputData, outputData, serviceCommand } = functionJson;
+    const { inputData = [], outputData } = functionJson;
+    const { serviceCommand } =
+      (inputData.at(0) as unknown as { serviceCommand: string }) ||
+      ({} as { serviceCommand: string });
     const value = {
       functionName,
       identifier,
@@ -43,9 +47,24 @@
   //获取数据
   async function getFormData() {
     const _values = (await validate()) as StructFormValue;
-    const { functionName, remark, identifier, inputData, outputData, serviceCommand, callType } =
-      _values;
+    const {
+      functionName,
+      remark,
+      identifier,
+      inputData: _inputData = [],
+      outputData: _outputData = [],
+      serviceCommand,
+      callType,
+    } = _values;
     if (!_values) return {};
+
+    const outputData = (_outputData as unknown as StructJSON[]).map((item) =>
+      excludeIdInStructJSON(item.dataType!)
+    );
+    const inputData = (_inputData as unknown as StructJSON[]).map((item) =>
+      excludeIdInStructJSON(item.dataType!)
+    );
+
     const value = {
       functionName,
       identifier,
@@ -55,7 +74,7 @@
       functionJson: {
         inputData,
         outputData,
-        serviceCommand,
+        ...(serviceCommand ? { inputData: [{ serviceCommand }] } : {}),
       },
     } as ModelOfMatterParams;
 

@@ -30,7 +30,7 @@
     </div>
     <div>
       <Spin :spinning="loading">
-        <div id="jsoneditor" ref="jsoneditorRef"></div>
+        <div id="jsoneditor" ref="jsoneditorEl"></div>
       </Spin>
     </div>
   </div>
@@ -60,9 +60,12 @@
 
   const jsonValue = ref();
 
-  const jsonInstance = ref();
+  const jsonInstance = ref<{
+    set: (value?: Recordable) => void;
+    get: () => Recordable;
+  }>();
 
-  const jsoneditorRef = ref<Recordable>();
+  const jsoneditorEl = ref<HTMLDivElement>();
 
   const activeKey = ref(FunctionType.PROPERTIES);
 
@@ -73,7 +76,7 @@
         mainMenuBar: false,
         statusBar: false,
       };
-      let editor = new jsoneditor(jsoneditorRef.value, options);
+      let editor = new jsoneditor(jsoneditorEl.value, options);
       editor.set(jsonValue.value);
       jsonInstance.value = editor;
     });
@@ -83,7 +86,7 @@
 
   const handleCopy = () => {
     try {
-      const valueRef = unref(jsonInstance).get();
+      const valueRef = unref(jsonInstance)?.get();
       const value = JSON.stringify(unref(valueRef));
       if (!value) {
         createMessage.warning('请输入要拷贝的内容！');
@@ -99,31 +102,36 @@
   };
 
   const getFormData = () => {
-    const value = unref(jsonInstance).get();
+    const value = unref(jsonInstance)?.get();
     if (!value) return;
     return value;
   };
 
   const resetFormData = () => {
-    unref(jsonInstance).set();
+    unref(jsonInstance)?.set();
   };
 
   const handlePremitter = () => {
-    const value = unref(jsonInstance).get();
-    return unref(jsonInstance).set(value);
+    const value = unref(jsonInstance)?.get();
+    return unref(jsonInstance)?.set(value);
   };
 
   const handleSwitchTsl = async (functionType: FunctionType) => {
     try {
       loading.value = true;
       const record = await getModelTsl({ deviceProfileId: props.record.id, functionType });
-      console.log(record);
+      jsonInstance.value?.set(record);
     } catch (error) {
     } finally {
       loading.value = false;
     }
   };
 
+  onMounted(() => {
+    activeKey.value = FunctionType.PROPERTIES;
+    handleSwitchTsl(FunctionType.PROPERTIES);
+  });
+
   defineExpose({
     getFormData,
     resetFormData,

-<template>
-  <div>
-    <BasicForm @register="registerForm">
-      <template #structSlot>
-        <CommomParam
-          ref="CommomParamInParamRef"
-          :isExcludeStruct="true"
-          :isInputParam="true"
-          :inputParamData="inputParamData"
-          @emitAddInParam="handleAddInParam"
-          @emitEditInParam="handleEditInParam"
-          @emitDeletelnParam="handleDelInParam"
-        />
-      </template>
-    </BasicForm>
-    <AddParamsModal @register="registerModal" @data="getData" />
-  </div>
-</template>
-<script lang="ts" setup>
-  import { unref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { addParamsSchemas } from '../config';
-  import { useModal } from '/@/components/Modal';
-  import useCommon from '../../hook/useCommon';
-  import AddParamsModal from './AddParamsModal.vue';
-  import CommomParam from './CommomParam.vue';
-  import useDefineVar from '../../hook/useDefineVar';
-
-  defineEmits(['register']);
-
-  const { inputParamData, CommomParamInParamRef } = useDefineVar();
-
-  const { useChangeTypeGetTypeForm, useGetInOrOutData, useUpdateFormExcludeStruct } = useCommon();
-
-  const [registerModal, { openModal }] = useModal();
-
-  const [registerForm, { validate, resetFields, updateSchema }] = useForm({
-    labelWidth: 100,
-    schemas: addParamsSchemas,
-    actionColOptions: {
-      span: 14,
-    },
-    showResetButton: false,
-    submitOnReset: 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 updateFormExcludeStruct = (flag) => useUpdateFormExcludeStruct(flag, updateSchema);
-
-  const getOutputStructList = () => CommomParamInParamRef.value?.getInputStructList();
-
-  const getBoolOrStruct = (T, S, B) => {
-    if (T === 'STRUCT') {
-      return S;
-    } else if (T === 'INT' || T === 'DOUBLE' || T === 'TEXT') {
-      return null;
-    } else {
-      return B;
-    }
-  };
-
-  const getIntOrText = (T, D) => {
-    if (T === 'STRUCT') {
-      return null;
-    } else if (T === 'INT' || T === 'DOUBLE' || T === 'TEXT') {
-      return D;
-    }
-  };
-
-  const getFormData = async () => {
-    const values = await validate();
-    if (!values) return;
-    const outputParams = getOutputStructList();
-    outputParams?.forEach((f) => {
-      f.dataType = 'STRUCT';
-      f.childSpecsDTO = getIntOrText(f.childDataType, f.dataSpecs);
-      f.childEnumSpecsDTO = getBoolOrStruct(f.childDataType, null, f.dataSpecsList);
-    });
-    const dataSpecs = useChangeTypeGetTypeForm(values.dataType, values);
-    const dataSpecsList = useChangeTypeGetTypeForm(values.dataType, values);
-    const { boolClose, boolOpen, step, unit, valueRange, length, ...value } = values;
-    const none = [valueRange, step, unit, boolOpen, boolClose, length]; //没用，防止eslint报未使用变量
-    console.log(none);
-    return {
-      ...{ childName: value.name },
-      ...{ childDataType: value.dataType },
-      ...value,
-      ...{
-        dataSpecs: getIntOrText(values.dataType, dataSpecs),
-      },
-      ...{
-        dataSpecsList: getBoolOrStruct(values.dataType, outputParams, dataSpecsList),
-      },
-    };
-  };
-
-  const setFormData = (v) => {
-    try {
-      setFieldsValue(v);
-      setFieldsValue({
-        ...v.dataSpecs,
-        valueRange: v.dataSpecs,
-      });
-      setFieldsValue({
-        boolClose: v.dataType == 'BOOL' ? v.dataSpecsList[0].name : '',
-        boolOpen: v.dataType == 'BOOL' ? v.dataSpecsList[1].name : '',
-      });
-      const { dataSpecsList, dataType, childDataType } = v;
-      if (childDataType == 'BOOL') {
-        setFieldsValue({
-          dataType: childDataType,
-          boolClose: dataSpecsList[0].name,
-          boolOpen: dataSpecsList[1].name,
-        });
-      }
-      if (dataType == 'BOOL' || dataType == 'STRUCT') {
-        inputParamData.value = [...new Array(dataSpecsList.length).keys()];
-        inputParamData.value = dataSpecsList;
-      }
-    } catch (e) {
-      console.log('AddParamForm error info', e);
-    }
-  };
-
-  const resetFormData = () => {
-    resetFields();
-    inputParamData.value = [];
-  };
-
-  defineExpose({
-    setFormData,
-    getFormData,
-    resetFormData,
-    updateFormExcludeStruct,
-  });
-</script>
-
-<style lang="less" scope>
-  .add-style {
-    color: #0170cc;
-    cursor: pointer;
-  }
-</style>

-<template>
-  <div>
-    <BasicModal
-      :title="getTitle"
-      :maskClosable="false"
-      v-bind="$attrs"
-      width="45rem"
-      @register="register"
-      @ok="handleSubmit"
-      @cancel="handleCancel"
-    >
-      <AddParamForm ref="AddParamFormRef" />
-    </BasicModal>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref, computed, reactive } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import AddParamForm from './AddParamForm.vue';
-  import useParitalValid from '../../hook/useParitalValid';
-
-  const emits = defineEmits(['register', 'data']);
-
-  const {} = useParitalValid();
-
-  const setEditData: any = reactive({
-    getEditData: {},
-  });
-
-  const AddParamFormRef = ref<InstanceType<typeof AddParamForm>>();
-
-  const isUpdate = ref(false);
-
-  const isFlag = ref('');
-
-  const excludeStruct = ref(false);
-
-  const getTitle = computed(() => (!isUpdate.value ? '编辑参数' : '新增参数'));
-
-  const [register, { setModalProps }] = useModalInner(async (data) => {
-    setModalProps({ loading: true });
-
-    isUpdate.value = data.isUpdate;
-    isFlag.value = data.flag;
-    excludeStruct.value = data.excludeStruct;
-    !isUpdate.value ? AddParamFormRef.value?.setFormData(data.record) : '';
-    setEditData.getEditData = data.record;
-    setModalProps({ loading: false });
-    if (excludeStruct.value) {
-      AddParamFormRef.value?.updateFormExcludeStruct(true);
-    } else {
-      AddParamFormRef.value?.updateFormExcludeStruct(false);
-    }
-  });
-
-  const handleCancel = () => {
-    AddParamFormRef.value?.resetFormData();
-  };
-
-  const handleSubmit = async () => {
-    const value = await AddParamFormRef.value?.getFormData();
-    if (!value) return;
-    emits('data', value);
-    handleCancel();
-  };
-</script>
-<style lang="less" scope></style>

-<template>
-  <!-- 输入参数 -->
-  <div v-if="isInputParam">
-    <template v-for="(item, index) in inputParamData" :key="item.name">
-      <span style="display: none">{{ item }}</span>
-      <InputParamItem
-        :title="item.name"
-        :item="item"
-        class="mt-4"
-        :index="index"
-        :ref="dynamicBindRef.inputParamItemRef"
-        @delete="deleteInParItem"
-        @edit="editInParItem"
-      />
-    </template>
-    <div style="display: flex" :class="{ 'mt-2': inputParamData.length > 0 }">
-      <span class="add-style">+</span>
-      <span class="add-style" @click="handleAddInParam">增加参数</span>
-    </div>
-  </div>
-  <!-- 输出参数 -->
-  <div v-if="isOutputParam">
-    <template v-for="(item, index) in outputParamData" :key="item.name">
-      <span style="display: none">{{ item + index }}</span>
-      <InputParamItem
-        :title="item.name"
-        :item="item"
-        class="mt-4"
-        :index="index"
-        :ref="dynamicBindRef.outputParamItemRef"
-        @delete="deleteOutParItem"
-        @edit="editOutParItem"
-      />
-    </template>
-    <div style="display: flex" :class="{ 'mt-2': outputParamData.length > 0 }">
-      <span class="add-style">+</span>
-      <span class="add-style" @click="handleAddOutParam">增加参数</span>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref, unref } from 'vue';
-  import InputParamItem from './InputParamItem.vue';
-
-  const props = defineProps({
-    isExcludeStruct: { type: Boolean, default: true },
-    isInputParam: { type: Boolean, default: false },
-    isOutputParam: { type: Boolean, default: false },
-    inputParamData: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-    outputParamData: {
-      type: Array as PropType<any[]>,
-      default: () => [],
-    },
-  });
-
-  const emit = defineEmits([
-    'emitAddInParam',
-    'emitEditInParam',
-    'emitDeletelnParam',
-    'emitAddOutParam',
-    'emitEditOutParam',
-    'emitDeleteOutParam',
-  ]);
-
-  const dynamicBindRef = {
-    inputParamItemRef: ref([]),
-    outputParamItemRef: ref([]),
-  };
-
-  const commomAddParamObj = {
-    isUpdate: true,
-    excludeStruct: props.isExcludeStruct ? true : false,
-  };
-
-  const commomEditParamObj = {
-    isUpdate: false,
-    excludeStruct: props.isExcludeStruct ? true : false,
-  };
-
-  const handleAddInParam = () => {
-    emit('emitAddInParam', true, {
-      ...commomAddParamObj,
-      flag: 'input',
-    });
-  };
-
-  const deleteInParItem = (index) => {
-    emit('emitDeletelnParam', index);
-  };
-
-  const editInParItem = (item) => {
-    emit('emitEditInParam', true, {
-      ...commomEditParamObj,
-      record: item,
-      flag: 'input',
-    });
-  };
-
-  const handleAddOutParam = () => {
-    emit('emitAddOutParam', true, {
-      ...commomAddParamObj,
-      flag: 'output',
-    });
-  };
-
-  const deleteOutParItem = (index) => {
-    emit('emitDeleteOutParam', index);
-  };
-
-  const editOutParItem = (item) => {
-    emit('emitEditOutParam', true, {
-      ...commomEditParamObj,
-      record: item,
-      flag: 'output',
-    });
-  };
-
-  const getInputStructList = () =>
-    unref(dynamicBindRef.inputParamItemRef)?.map((item: any) => item.getFormData());
-
-  const getOutputStructList = () =>
-    unref(dynamicBindRef.outputParamItemRef)?.map((item: any) => item.getFormData());
-
-  defineExpose({
-    getInputStructList,
-    getOutputStructList,
-  });
-</script>
-<style lang="less" scoped>
-  .add-style {
-    color: #0170cc;
-    cursor: pointer;
-  }
-</style>

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

@@ -113,6 +113,15 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
       },
     },
     {
+      field: FormField.SERVICE_COMMAND,
+      label: '输入参数',
+      component: 'Input',
+      ifShow: tcpDeviceFlag,
+      componentProps: {
+        placeholder: '请输入ASCII或HEX服务命令',
+      },
+    },
+    {
       field: FormField.INPUT_PARAM,
       label: '输入参数',
       component: 'StructForm',
@@ -127,19 +136,9 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
       component: 'StructForm',
       valueField: 'value',
       changeEvent: 'update:value',
-      ifShow: !tcpDeviceFlag,
       colProps: { span: 24 },
     },
     {
-      field: FormField.SERVICE_COMMAND,
-      label: '服务命令',
-      component: 'Input',
-      ifShow: tcpDeviceFlag,
-      componentProps: {
-        placeholder: '请输入服务命令',
-      },
-    },
-    {
       field: FormField.REFARK,
       label: '备注',
       component: 'InputTextArea',

 <template>
-  <div :class="`${prefixCls}-bottom`">
+  <div :class="[`${prefixCls}-bottom`, '!dark:bg-dark-900']">
     <Tabs>
       <template v-for="item in achieveList" :key="item.key">
         <TabPane :tab="item.name">
@@ -37,7 +37,7 @@
     &-bottom {
       padding: 10px;
       margin: 16px;
-      background-color: @component-background;
+      // background-color: @component-background;
       border-radius: 3px;
     }
   }