Merge branch 'ww' into 'main'

feat: device profile transport protocol panel modify Description component

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

@@ -5,7 +5,14 @@
     "public/resource/tinymce/langs"
   ],
   "cSpell.words": [
+    "COAP",
+    "edrx",
+    "EFENTO",
     "inited",
+    "MQTT",
+    "notif",
+    "PROTOBUF",
+    "SNMP",
     "unref",
     "VITE"
   ]

@@ -3,6 +3,7 @@ import {
   TDeviceConfigParams,
   IDeviceConfigAddOrEditModel,
   ProfileRecord,
+  RuleChainRecord,
 } from '/@/api/device/model/deviceConfigModel';
 import { PaginationResult } from '/#/axios';
 
@@ -36,7 +37,7 @@ export const deviceConfigGetDetail = (id: string) => {
  * 获取规则链
  */
 export const deviceConfigGetRuleChain = () => {
-  return defHttp.get({
+  return defHttp.get<RuleChainRecord[]>({
     url: EDeviceConfigApi.DEVICE_CONFIG_GET_RULECHAIN,
   });
 };

@@ -241,3 +241,21 @@ export interface ProfileRecord {
 
   checked?: boolean;
 }
+
+export interface IDRecord {
+  entityType: string;
+  id: string;
+}
+
+export interface RuleChainRecord {
+  id: IDRecord;
+  createdTime: number;
+  additionalInfo?: any;
+  tenantId: IDRecord;
+  name: string;
+  type: string;
+  firstRuleNodeId: IDRecord;
+  root: boolean;
+  debugMode: boolean;
+  configuration?: any;
+}

@@ -54,8 +54,84 @@ export interface Configuration {
   type: string;
 }
 
+export interface TransportPayloadTypeConfiguration {
+  transportPayloadType: string;
+  deviceTelemetryProtoSchema: string;
+  deviceAttributesProtoSchema: string;
+  deviceRpcRequestProtoSchema: string;
+  deviceRpcResponseProtoSchema: string;
+  enableCompatibilityWithJsonPayloadFormat: boolean;
+  useJsonPayloadFormatForDefaultDownlinkTopics: boolean;
+}
+
+export interface ClientSettings {
+  edrxCycle: string;
+  pagingTransmissionWindow: string;
+  powerMode: string;
+  psmActivityTimer: number;
+
+  clientOnlyObserveAfterConnect: string;
+  fwUpdateResource: string;
+  fwUpdateStrategy: number;
+  swUpdateResource: string;
+  swUpdateStrategy: number;
+}
+
+export interface Bootstrap {
+  securityMode: string;
+  shortServerId: number;
+  bootstrapServerIs: boolean;
+  host: string;
+  port: number;
+  clientHoldOffTime: number;
+  serverPublicKey?: any;
+  serverCertificate?: any;
+  bootstrapServerAccountTimeout: number;
+  lifetime: number;
+  defaultMinPeriod: number;
+  notifIfDisabled: boolean;
+  binding: string;
+}
+
+export interface Mapping {
+  dataType: string;
+  key: string;
+  oid: string;
+}
+
+export interface CommunicationConfigs {
+  spec: string;
+  mappings: Mapping[];
+  queryingFrequencyMs: number;
+}
+
 export interface TransportConfiguration {
   type: string;
+  deviceTelemetryTopic: string;
+  deviceAttributesTopic: string;
+
+  // MQTT
+  transportPayloadTypeConfiguration: TransportPayloadTypeConfiguration;
+
+  // COAP
+  clientSettings: ClientSettings;
+  coapDeviceTypeConfiguration: {
+    coapDeviceType: string;
+    transportPayloadTypeConfiguration: TransportPayloadTypeConfiguration;
+  };
+
+  // LWM2M
+  bootstrapServerUpdateEnable: boolean;
+  bootstrap: Bootstrap[];
+  clientLwM2mSettings: ClientSettings;
+
+  // SNMP
+  retries: number;
+  timeoutMs: number;
+  communicationConfigs: CommunicationConfigs[];
+
+  // TCP
+  scriptId: string;
 }
 
 export interface ProvisionConfiguration {
@@ -85,6 +161,7 @@ export interface DeviceRecord {
   image: string;
   type: string;
   default: boolean;
+  defaultRuleChainId: string;
 }
 
 export interface DeviceModelOfMatterAttrs {

+import { ProfileRecord } from '../device/model/deviceConfigModel';
 import {
   CreateOtaPackageParams,
   DefaultDeviceProfileInfo,
@@ -129,7 +130,7 @@ export const getDeviceProfileInfos = (params: GetDeviceProfileInfosParams) => {
 };
 
 export const getDeviceProfileInfoById = (id: string) => {
-  return defHttp.get<DeviceProfileRecord>(
+  return defHttp.get<ProfileRecord>(
     {
       url: `${Api.GET_DEVICE_PROFILE_INFO_BY_ID}/${id}`,
     },

@@ -24,12 +24,11 @@ export interface ScriptRecord {
   id: string;
   creator: string;
   createTime: string;
-  updater: string;
-  updateTime: string;
   name: string;
-  convertJs: string;
-  enabled: boolean;
   tenantId: string;
   description: string;
-  status: boolean;
+  convertJs: string;
+  status: number;
+  dataType: string;
+  saveOriginalData: boolean;
 }

@@ -54,7 +54,7 @@ export const getScriptManageDetail = (id: string) => {
 
 // 获取脚本选项列表
 export const getScriptManageMeList = () => {
-  return defHttp.get({
+  return defHttp.get<ScriptRecord[]>({
     url: ScriptManagerApi.SCRIPT_MELIST_URL,
   });
 };

+<script lang="ts" setup></script>
+
+<template> <div></div></template>

@@ -619,6 +619,7 @@ export const TokenSchemas: FormSchema[] = [
     field: 'clientId',
     required: true,
     ifShow: false,
+    slot: 'clientId',
     componentProps: {
       maxLength: 36,
       placeholder: '请输入客户端ID',

@@ -8,7 +8,14 @@
     centered
     :canFullscreen="false"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #clientId="{ field, model }">
+        <div class="flex items-center">
+          <Input v-model:value="model[field]" placeholder="请输入客户端ID" />
+          <ReloadOutlined class="ml-3 !text-blue-600" @click="handleCreateUUID" />
+        </div>
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
 
@@ -19,10 +26,15 @@
   import { TokenSchemas, credentialTypeEnum } from '../../config/data';
   import { saveDeviceToken } from '/@/api/device/deviceManager';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { Input } from 'ant-design-vue';
+  import { buildUUID } from '/@/utils/uuid';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
   export default defineComponent({
     components: {
       BasicModal,
       BasicForm,
+      Input,
+      ReloadOutlined,
     },
     emits: ['register'],
     setup() {
@@ -36,7 +48,7 @@
         showSubmitButton: false,
         showResetButton: false,
         wrapperCol: {
-          span: 12,
+          span: 16,
         },
       });
       const [registerModal, { closeModal }] = useModalInner(async (data) => {
@@ -208,12 +220,17 @@
           })
           .catch(() => {});
       };
+
+      const handleCreateUUID = () => {
+        setFieldsValue({ clientId: buildUUID() });
+      };
       return {
         registerModal,
         registerForm,
         checkedChange,
         handleCancel,
         handleOk,
+        handleCreateUUID,
       };
     },
   });

@@ -27,6 +27,7 @@
   import { useDrawer } from '/@/components/Drawer';
   import productDefault from '/@/assets/icons/product-default.svg';
   import { usePermission } from '/@/hooks/web/usePermission';
+  import { useRoute } from 'vue-router';
 
   defineProps<{
     mode: EnumTableCardMode;
@@ -43,7 +44,7 @@
   const { createMessage } = useMessage();
   const { createSyncConfirm } = useSyncConfirm();
 
-  const [register, { getFieldsValue }] = useForm({
+  const [register, { getFieldsValue, setFieldsValue }] = useForm({
     showAdvancedButton: true,
     labelWidth: 100,
     compact: true,
@@ -83,14 +84,18 @@
       .map((item) => item.id);
   });
 
-  const getDataSource = async () => {
+  const getDataSource = async (otherParams: Recordable = {}) => {
     try {
       loading.value = true;
+      if (otherParams) {
+        setFieldsValue(otherParams);
+      }
       const params = getFieldsValue();
       const { items, total } = await deviceConfigGetQuery({
         page: pagination.current,
         pageSize: unref(colNumber) * 2,
         ...params,
+        ...otherParams,
       });
       pagination.total = total;
       dataSource.value = items.map((item) => ({ ...item, checked: false }));
@@ -192,9 +197,9 @@
       throw error;
     }
   };
-
+  const { query: routeParams } = useRoute();
   onMounted(() => {
-    getDataSource();
+    getDataSource(routeParams);
   });
 </script>
 
@@ -255,7 +260,7 @@
                   <Image
                     @click.stop
                     :height="144"
-                    :src="item.image"
+                    :src="item.image || IMAGE_FALLBACK"
                     placeholder
                     :fallback="IMAGE_FALLBACK"
                   />

@@ -3,14 +3,13 @@
     <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>
+          <ProductDescription ref="DevConStRef" :record="record" />
         </div>
       </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>
+          <TransportDescription :record="record" />
+          <!-- <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" /> -->
         </div>
       </Tabs.TabPane>
       <Tabs.TabPane key="topic" tab="Topic">
@@ -25,13 +24,14 @@
 <script lang="ts" setup>
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { Tabs } from 'ant-design-vue';
-  import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
   import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
   import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
   import { nextTick, ref, unref } from 'vue';
   import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import TopicPanel from './step/TopicPanel.vue';
+  import ProductDescription from './components/ProductDescription.vue';
+  import { TransportDescription } from './components/TransportDescript';
 
   defineEmits(['register']);
 
@@ -41,12 +41,11 @@
 
   const record = ref<DeviceRecord>({} as unknown as DeviceRecord);
 
-  const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
+  const DevConStRef = ref<InstanceType<typeof ProductDescription>>();
   const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
-  // const PhysicalModManRef = ref<InstanceType<typeof PhysicalModelManagementStep>>();
 
-  const setDeviceConfFormData = async (res: Recordable) => {
-    unref(DevConStRef)?.setFormData(res);
+  const setDeviceConfFormData = async () => {
+    unref(DevConStRef)?.renderProductInfo();
   };
   const setTransConfFormData = async (res: Recordable) => {
     await nextTick();
@@ -57,7 +56,7 @@
     activeKey.value = 'product';
     record.value = data.record;
     record.value = await deviceConfigGetDetail(data.record.id);
-    setDeviceConfFormData(unref(record));
+    setDeviceConfFormData();
   });
 
   const handlePanelChange = (activeKey: ActiveKey) => {

+<script lang="ts" setup>
+  import { Spin, Image } from 'ant-design-vue';
+  import { ref, unref, h } from 'vue';
+  import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
+  import { RuleChainRecord } from '/@/api/device/model/deviceConfigModel';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { SysDictItemResult } from '/@/api/system/model/dictModel';
+  import { Description, useDescription } from '/@/components/Description';
+  import { to } from '/@/utils/to';
+  import productDefaultImage from '/@/assets/icons/product-default.svg';
+
+  const loading = ref(false);
+
+  const props = defineProps<{
+    record: DeviceRecord;
+  }>();
+
+  const data = ref<DeviceRecord>({} as unknown as DeviceRecord);
+
+  const [register, { setDescProps }] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    schema: [
+      {
+        field: 'image',
+        label: '图片',
+        span: 2,
+        render: (val) => {
+          return h(Image, { src: val || productDefaultImage, height: 200 });
+        },
+      },
+      {
+        field: 'deviceType',
+        label: '设备类型',
+      },
+      {
+        field: 'name',
+        label: '产品名称',
+      },
+      {
+        field: 'ruleChain',
+        label: '规则链',
+      },
+      {
+        field: 'queueName',
+        label: '处理队列',
+      },
+      {
+        field: 'description',
+        label: '描述',
+        render(val) {
+          return h('div', { class: 'min-h-6' }, val);
+        },
+      },
+    ],
+  });
+
+  const findDeviceType = async (deviceType: string) => {
+    const [error, data] = await to<SysDictItemResult[]>(
+      findDictItemByCode({ dictCode: 'device_type' })
+    );
+    if (!error) {
+      const record = data.find((item) => item.itemValue === deviceType);
+      return { deviceType: record?.itemText };
+    }
+    return {};
+  };
+
+  const findHandleQueue = async (defaultQueueName: string) => {
+    const [error, data] = await to<SysDictItemResult[]>(
+      findDictItemByCode({ dictCode: 'queen_execute_sequence' })
+    );
+    if (!error) {
+      const record = data.find((item) => item.itemValue === defaultQueueName);
+      return { queueName: record?.itemText };
+    }
+    return {};
+  };
+
+  const findRuleChain = async (ruleChain: string) => {
+    const [error, data] = await to<RuleChainRecord[]>(deviceConfigGetRuleChain());
+    if (!error) {
+      const record = data.find((item) => item.id.id === ruleChain);
+      return { ruleChain: record?.name };
+    }
+    return {};
+  };
+
+  const renderProductInfo = async () => {
+    try {
+      data.value = {} as unknown as DeviceRecord;
+      loading.value = true;
+      const { defaultRuleChainId, deviceType, defaultQueueName } = props.record;
+      data.value = props.record;
+      const values = await Promise.all([
+        findDeviceType(deviceType),
+        findHandleQueue(defaultQueueName),
+        findRuleChain(defaultRuleChainId),
+      ]);
+      const value = values.reduce((prev, next) => ({ ...prev, ...next }), {});
+      data.value = Object.assign(unref(data), value);
+      setDescProps({ data: unref(data) });
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  defineExpose({
+    renderProductInfo,
+  });
+</script>
+
+<template>
+  <Spin :spinning="loading">
+    <Description class="product-description" @register="register" />
+  </Spin>
+</template>
+
+<style lang="less" scoped>
+  .product-description:deep(.ant-image-img) {
+    height: 200px !important;
+  }
+</style>

+<script lang="ts" setup>
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { useDescription, Description } from '/@/components/Description';
+  import { Input } from 'ant-design-vue';
+  import { h } from 'vue';
+  import {
+    COAPDeviceTypeEnum,
+    PowerModeEnum,
+    PowerModeNameEnum,
+    TransportPayloadTypeEnum,
+  } from './const';
+
+  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
+  const props = defineProps<{
+    record: TransportConfiguration;
+  }>();
+
+  const showProtoSchema = (data: TransportConfiguration) => {
+    return (
+      data.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.transportPayloadType ===
+        TransportPayloadTypeEnum.PROTOBUF &&
+      data.coapDeviceTypeConfiguration.coapDeviceType === COAPDeviceTypeEnum.DEFAULT
+    );
+  };
+
+  const showPowerModeIsPSM = (data: TransportConfiguration) => {
+    return data.clientSettings.powerMode === PowerModeNameEnum.PSM;
+  };
+
+  const showPowerModeIsEDRX = (data: TransportConfiguration) => {
+    return data.clientSettings.powerMode === PowerModeEnum.E_DRX;
+  };
+
+  const [register] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        field: 'type',
+        label: '接入协议',
+      },
+      {
+        field: 'coapDeviceType',
+        label: 'COAP设备类型',
+        render: (_, data: TransportConfiguration) =>
+          data.coapDeviceTypeConfiguration.coapDeviceType,
+      },
+      {
+        field: 'coapDeviceType',
+        label: 'COAP设备消息Payload',
+        render: (_, data: TransportConfiguration) =>
+          data.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration.transportPayloadType,
+      },
+      {
+        field: 'powerMode',
+        label: '节能模式',
+        render: (_, data: TransportConfiguration) =>
+          PowerModeNameEnum[data.clientSettings.powerMode],
+      },
+      {
+        field: 'psmActivityTimer',
+        label: 'PSM活动计时器',
+        show: showPowerModeIsPSM,
+        render: (_, data: TransportConfiguration) => data.clientSettings.psmActivityTimer,
+      },
+      {
+        field: 'edrxCycle',
+        label: 'eDRX循环',
+        show: showPowerModeIsEDRX,
+        render: (_, data: TransportConfiguration) => data.clientSettings.edrxCycle,
+      },
+      {
+        field: 'edrxCycleTime',
+        label: 'eDRX循环时间单位',
+        show: showPowerModeIsEDRX,
+        render: () => '秒',
+      },
+      {
+        field: 'pagingTransmissionWindow',
+        label: '寻呼传输窗口',
+        show: showPowerModeIsEDRX,
+        render: (_, data: TransportConfiguration) => data.clientSettings.pagingTransmissionWindow,
+      },
+      {
+        field: 'pagingTransmissionWindowTime',
+        label: '寻呼传输窗口时间单位',
+        show: showPowerModeIsEDRX,
+        render: () => '秒',
+      },
+      {
+        field: 'unit',
+        label: '时间单位',
+        show: showPowerModeIsPSM,
+        render: () => '秒',
+      },
+      {
+        field: 'deviceTelemetryProtoSchema',
+        label: '遥测数据 proto schema',
+        span: 2,
+        show: showProtoSchema,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value:
+              data.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration
+                .deviceTelemetryProtoSchema,
+          });
+        },
+      },
+      {
+        field: 'deviceAttributesProtoSchema',
+        label: 'Attributes proto schema',
+        span: 2,
+        show: showProtoSchema,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value:
+              data.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration
+                .deviceAttributesProtoSchema,
+          });
+        },
+      },
+      {
+        field: 'deviceRpcRequestProtoSchema',
+        label: 'RPC 请求 proto schema',
+        span: 2,
+        show: showProtoSchema,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value:
+              data.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration
+                .deviceRpcRequestProtoSchema,
+          });
+        },
+      },
+      {
+        field: 'deviceRpcResponseProtoSchema',
+        label: 'RPC 响应 proto schema',
+        span: 2,
+        show: showProtoSchema,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value:
+              data.coapDeviceTypeConfiguration.transportPayloadTypeConfiguration
+                .deviceRpcResponseProtoSchema,
+          });
+        },
+      },
+    ],
+  });
+</script>
+
+<template>
+  <Description @register="register" />
+</template>

+<script lang="ts" setup>
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { useDescription, Description } from '/@/components/Description';
+
+  const props = defineProps<{
+    record: DeviceRecord['profileData']['transportConfiguration'];
+  }>();
+
+  const [register] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    schema: [
+      {
+        field: 'type',
+        label: '接入协议',
+      },
+    ],
+    data: props.record,
+  });
+</script>
+
+<template>
+  <Description @register="register" />
+</template>

+<script lang="ts" setup>
+  import { Input, Tabs } from 'ant-design-vue';
+  import { computed, h, unref } from 'vue';
+  import {
+    BindingNameEnum,
+    FirmwareUpdateStrategyNameEnum,
+    PowerModeNameEnum,
+    SecurityModeNameEnum,
+  } from './const';
+  import { Bootstrap, ClientSettings, DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { CollapseContainer } from '/@/components/Container';
+  import { useDescription, Description, DescItem } from '/@/components/Description';
+
+  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
+  const props = defineProps<{
+    record: TransportConfiguration;
+  }>();
+
+  enum TabKeyEnum {
+    LWM2M_MODEL = 'LWM2M Model',
+    BOOTSTRAP = 'Bootstrap',
+    OTHER_SETTINGS = 'Other settings',
+    JSON_CONFIG_PROFILE_DEVICE = 'JSON Config Profile Device',
+  }
+
+  const getBootstrapSetting = computed(() => {
+    const { record } = props;
+    return record.bootstrap;
+  });
+
+  const getOtherSetting = computed(() => {
+    const { record } = props;
+    return record.clientLwM2mSettings;
+  });
+
+  const [registerLWM2MModel] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: {},
+    schema: [
+      {
+        field: 'objectList',
+        label: '对象列表',
+        render: () => h('div', { class: 'min-h-6' }),
+      },
+    ],
+  });
+
+  const getCollapseTitle = (item: Bootstrap) => {
+    return `LwM2M Server        Short server ID: ${item.shortServerId}        Security config mode: ${item.securityMode}`;
+  };
+
+  const bootstrapDescriptionSchema: DescItem[] = [
+    {
+      label: '安全配置',
+      field: 'securityMode',
+      render: (_, data: Bootstrap) => SecurityModeNameEnum[data.securityMode],
+    },
+    {
+      label: '短服务器ID',
+      field: 'shortServerId',
+    },
+    {
+      label: '主机',
+      field: 'host',
+    },
+    {
+      label: '端口',
+      field: 'port',
+    },
+    {
+      label: '延迟时间',
+      field: 'clientHoldOffTime',
+    },
+    {
+      label: '超时后的账户',
+      field: 'bootstrapServerAccountTimeout',
+    },
+    {
+      label: '注册生存期',
+      field: 'lifetime',
+    },
+    {
+      label: '两次通知之间的最小周期',
+      field: 'defaultMinPeriod',
+    },
+    {
+      label: 'Binding',
+      field: 'binding',
+      span: 2,
+      render: (_, data: Bootstrap) => BindingNameEnum[data.binding],
+    },
+    {
+      label: '禁用或脱机时的通知存储',
+      field: 'notifIfDisabled',
+      render: (_, data: Bootstrap) => (data.notifIfDisabled ? '启用' : '禁用'),
+    },
+  ];
+  console.log(unref(getOtherSetting));
+  const [registerOtherSettings] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: unref(getOtherSetting),
+    schema: [
+      {
+        label: '固件更新策略',
+        field: 'fwUpdateStrategy',
+        span: 2,
+        render: (_, data: ClientSettings) => FirmwareUpdateStrategyNameEnum[data.fwUpdateStrategy],
+      },
+      {
+        label: '固件更新COAP资源',
+        field: 'fwUpdateResource',
+        span: 2,
+      },
+      {
+        label: '软件更新策略',
+        field: 'swUpdateStrategy',
+        span: 2,
+        render: (_, data: ClientSettings) => FirmwareUpdateStrategyNameEnum[data.swUpdateStrategy],
+      },
+      {
+        label: '软件更新COAP资源',
+        field: 'swUpdateResource',
+        span: 2,
+      },
+      {
+        label: '节能模式',
+        field: 'powerMode',
+        render: (_, data: ClientSettings) => PowerModeNameEnum[data.powerMode],
+      },
+      {
+        label: 'PSM活动计时器',
+        field: 'edrxCycle',
+      },
+      {
+        label: 'PSM活动计时器单位',
+        field: 'edrxCycleTimeUnit',
+        render: () => '秒',
+      },
+      {
+        label: '支持复合读/写观察操作',
+        field: '',
+        render: () => '禁用',
+      },
+    ],
+  });
+
+  const [registerJSONConfig] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        field: 'json',
+        label: 'LWM2M',
+        render: (_, data: TransportConfiguration) => {
+          return h(Input.TextArea, { value: JSON.stringify(data, null, 2), autoSize: true });
+        },
+      },
+    ],
+  });
+</script>
+
+<template>
+  <Tabs>
+    <Tabs.TabPane :tab="TabKeyEnum.LWM2M_MODEL" :key="TabKeyEnum.LWM2M_MODEL">
+      <Description @register="registerLWM2MModel" />
+    </Tabs.TabPane>
+    <Tabs.TabPane :tab="TabKeyEnum.BOOTSTRAP" :key="TabKeyEnum.BOOTSTRAP">
+      <CollapseContainer
+        v-for="(item, index) in getBootstrapSetting"
+        :key="index"
+        :title="getCollapseTitle(item)"
+        class="mt-4"
+      >
+        <Description
+          layout="vertical"
+          :column="2"
+          :schema="bootstrapDescriptionSchema"
+          :data="item"
+        />
+      </CollapseContainer>
+    </Tabs.TabPane>
+    <Tabs.TabPane :tab="TabKeyEnum.OTHER_SETTINGS" :key="TabKeyEnum.OTHER_SETTINGS">
+      <Description @register="registerOtherSettings" />
+    </Tabs.TabPane>
+    <Tabs.TabPane
+      :tab="TabKeyEnum.JSON_CONFIG_PROFILE_DEVICE"
+      :key="TabKeyEnum.JSON_CONFIG_PROFILE_DEVICE"
+    >
+      <Description @register="registerJSONConfig" />
+    </Tabs.TabPane>
+  </Tabs>
+</template>

+<script lang="ts" setup>
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { useDescription, Description } from '/@/components/Description';
+  import { Input } from 'ant-design-vue';
+  import { h } from 'vue';
+  import { TransportPayloadTypeEnum } from './const';
+
+  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
+  const props = defineProps<{
+    record: TransportConfiguration;
+  }>();
+
+  const [register] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        field: 'type',
+        label: '接入协议',
+        span: 2,
+      },
+      {
+        field: 'deviceTelemetryTopic',
+        label: '遥测数据主题筛选器',
+      },
+      {
+        field: 'deviceAttributesTopic',
+        label: '属性主题过滤器',
+      },
+      {
+        field: 'transportPayloadType',
+        label: 'MQTT设备Payload',
+        render(_, data: TransportConfiguration) {
+          return data.transportPayloadTypeConfiguration.transportPayloadType;
+        },
+      },
+      {
+        field: 'enableCompatibilityWithJsonPayloadFormat',
+        label: '启用与其他有效负载格式的兼容性',
+        render(_, data: TransportConfiguration) {
+          return data.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat
+            ? '启用'
+            : '关闭';
+        },
+      },
+      {
+        field: 'deviceTelemetryProtoSchema',
+        label: '遥测数据 proto schema',
+        span: 2,
+        show: (data: TransportConfiguration) =>
+          data.transportPayloadTypeConfiguration.transportPayloadType ===
+          TransportPayloadTypeEnum.PROTOBUF,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value: data.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema,
+          });
+        },
+      },
+      {
+        field: 'deviceAttributesProtoSchema',
+        label: 'Attributes proto schema',
+        span: 2,
+        show: (data: TransportConfiguration) =>
+          data.transportPayloadTypeConfiguration.transportPayloadType ===
+          TransportPayloadTypeEnum.PROTOBUF,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value: data.transportPayloadTypeConfiguration.deviceAttributesProtoSchema,
+          });
+        },
+      },
+      {
+        field: 'deviceRpcRequestProtoSchema',
+        label: 'RPC 请求 proto schema',
+        span: 2,
+        show: (data: TransportConfiguration) =>
+          data.transportPayloadTypeConfiguration.transportPayloadType ===
+          TransportPayloadTypeEnum.PROTOBUF,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value: data.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema,
+          });
+        },
+      },
+      {
+        field: 'deviceRpcResponseProtoSchema',
+        label: 'RPC 响应 proto schema',
+        span: 2,
+        show: (data: TransportConfiguration) =>
+          data.transportPayloadTypeConfiguration.transportPayloadType ===
+          TransportPayloadTypeEnum.PROTOBUF,
+        render(_, data: TransportConfiguration) {
+          return h(Input.TextArea, {
+            autoSize: true,
+            value: data.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema,
+          });
+        },
+      },
+    ],
+  });
+</script>
+
+<template>
+  <Description @register="register" />
+</template>

+<script lang="ts" setup>
+  import { Table } from 'ant-design-vue';
+  import { computed, h } from 'vue';
+  import { SNMPDataTypeEnum, SNMPRangeNameEnum } from './const';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { CollapseContainer } from '/@/components/Container';
+  import { DescItem, Description, useDescription } from '/@/components/Description';
+
+  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
+
+  const props = defineProps<{
+    record: TransportConfiguration;
+  }>();
+
+  const getSNMPList = computed(() => {
+    const { record } = props;
+    return record.communicationConfigs;
+  });
+
+  const [register] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        label: '接入协议',
+        field: 'type',
+        span: 2,
+      },
+      {
+        label: '超时毫秒',
+        field: 'timeoutMs',
+      },
+      {
+        label: '重试次数',
+        field: 'retries',
+      },
+    ],
+  });
+
+  const schema: DescItem[] = [
+    {
+      label: '范围',
+      field: 'spec',
+      render: (val: string) => getTitle(val),
+    },
+    {
+      label: '查询频率(毫秒)',
+      field: 'queryingFrequencyMs',
+    },
+    {
+      label: 'Mapping',
+      field: 'mappings',
+      render: (val) => {
+        return h(Table, {
+          size: 'small',
+          bordered: true,
+          pagination: false,
+          columns: [
+            {
+              title: '数据类型',
+              dataIndex: 'dataType',
+              customRender: ({ text }) => SNMPDataTypeEnum[text],
+            },
+            {
+              title: 'DataKey',
+              dataIndex: 'key',
+            },
+            {
+              title: 'OID',
+              dataIndex: 'oid',
+            },
+          ],
+          dataSource: val,
+        });
+      },
+    },
+  ];
+
+  const getTitle = (range: string) => {
+    return SNMPRangeNameEnum[range];
+  };
+</script>
+
+<template>
+  <Description @register="register" />
+  <CollapseContainer
+    v-for="(item, index) in getSNMPList"
+    :key="index"
+    class="mt-4"
+    :title="getTitle(item.spec)"
+  >
+    <Description :data="item" layout="vertical" :column="2" :schema="schema" />
+  </CollapseContainer>
+</template>

+<script lang="ts" setup>
+  import { Button, Tag } from 'ant-design-vue';
+  import { h, onMounted, ref, unref } from 'vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { ScriptRecord } from '/@/api/scriptmanage/model/scriptModel';
+  import { getScriptManageMeList } from '/@/api/scriptmanage/scriptManager';
+  import { Description, useDescription } from '/@/components/Description';
+  import { useModal } from '/@/components/Modal';
+  import CoverScriptModal from '/@/views/scriptmanage/converscript/ConverScriptModal.vue';
+
+  const props = defineProps<{
+    record: DeviceRecord['profileData']['transportConfiguration'];
+  }>();
+
+  const scriptInfo = ref<ScriptRecord>({} as unknown as ScriptRecord);
+
+  const [register, { setDescProps }] = useDescription({
+    layout: 'vertical',
+    column: 2,
+    data: props.record,
+    schema: [
+      {
+        field: 'type',
+        label: '接入协议',
+        span: 2,
+      },
+      {
+        field: 'scriptName',
+        label: '转换脚本',
+        render: (value: string) => {
+          return h('div', [
+            h(Tag, { color: 'blue' }, () => value),
+            h(Button, { type: 'link', onClick: handleTestScript }, () => '测试脚本'),
+          ]);
+        },
+      },
+    ],
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleTestScript = () => {
+    openModal(true, {
+      isUpdate: false,
+      isTest: true,
+      record: unref(scriptInfo).id,
+      isText: 'test',
+      isTitle: 'test',
+    });
+  };
+
+  onMounted(() => {
+    getTransforScriptInfo();
+  });
+
+  const getTransforScriptInfo = async () => {
+    try {
+      const list = await getScriptManageMeList();
+      const record = list.find((item) => item.id === props.record.scriptId);
+      scriptInfo.value = record!;
+      setDescProps({
+        data: Object.assign(props.record, record, { scriptName: record?.name || '' }),
+      });
+    } catch (error) {}
+  };
+</script>
+
+<template>
+  <section>
+    <Description @register="register" />
+    <CoverScriptModal @register="registerModal" />
+  </section>
+</template>

+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import COAPDescription from './COAPDescription.vue';
+  import { TransportTypeEnum } from './const';
+  import DefaultConfiguration from './DefaultConfiguration.vue';
+  import LWM2MDescription from './LWM2MDescription.vue';
+  import MQTTConfiguration from './MQTTConfiguration.vue';
+  import SNMPDescription from './SNMPDescription.vue';
+  import TCPDescription from './TCPDescription.vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+
+  const props = defineProps<{
+    record: DeviceRecord;
+  }>();
+
+  const getTransportInfo = computed(() => {
+    const { record } = props;
+    return record.profileData.transportConfiguration;
+  });
+</script>
+
+<template>
+  <section>
+    <DefaultConfiguration
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.DEFAULT"
+    />
+
+    <MQTTConfiguration
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.MQTT"
+    />
+
+    <COAPDescription
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.COAP"
+    />
+
+    <LWM2MDescription
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.LWM2M"
+    />
+
+    <SNMPDescription
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.SNMP"
+    />
+
+    <TCPDescription
+      :record="getTransportInfo"
+      v-if="getTransportInfo.type === TransportTypeEnum.TCP"
+    />
+  </section>
+</template>

+export enum TransportTypeEnum {
+  DEFAULT = 'DEFAULT',
+  MQTT = 'MQTT',
+  COAP = 'COAP',
+  LWM2M = 'LWM2M',
+  SNMP = 'SNMP',
+  TCP = 'TCP',
+}
+
+export enum TransportPayloadTypeEnum {
+  PROTOBUF = 'PROTOBUF',
+  JSON = 'JSON',
+}
+
+export enum COAPDeviceTypeEnum {
+  DEFAULT = 'DEFAULT',
+  EFENTO = 'EFENTO',
+}
+
+export enum COAPDeviceTypeNameEnum {
+  DEFAULT = '默认',
+  EFENTO = 'Efento NB-IoT',
+}
+
+export enum PowerModeEnum {
+  PSM = 'PSM',
+  DRX = 'DRX',
+  E_DRX = 'E_DRX',
+}
+
+export enum PowerModeNameEnum {
+  PSM = 'Power Saving Mode (PSM)',
+  DRX = 'Discontinuous Reception (DRX)',
+  E_DRX = 'Extended Discontinuous Reception (eDRX)',
+}
+
+export enum TimeUnitEnum {
+  MILLISECONDS = 'milliseconds',
+  SECOND = 'second',
+  MINUTE = 'minute',
+  HOUR = 'hour',
+}
+
+export enum SecurityModeNameEnum {
+  NO_SEC = 'No Security',
+  PSK = 'Pre-Shared Key',
+  RPK = 'Raw Public Key',
+  X509 = 'X.509 Certificate',
+}
+
+export enum BindingNameEnum {
+  U = 'U: Client is reachable via the UDP binding at any time.',
+  M = 'M: Client is reachable via the MQTT binding at any time.',
+  H = 'H: Client is reachable via the HTTP binding at any time.',
+  T = 'T: Client is reachable via the TCP binding at any time.',
+  S = 'S: Client is reachable via the SMS binding at any time.',
+  N = 'N: Client MUST send the response to such a request over the Non-IP binding (is supported since LWM',
+  UQ = 'UQ: UDP connection in queue mode (is not supported since LWM2M 1.1)',
+  UQS = 'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)',
+  TQ = 'TQ: TCP connection in queue mode (is not supported since LWM2M 1.1)',
+  TQS = 'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode (is not supported since LWM2M 1.1)\t',
+  SQ = 'SQ: SMS connection in queue mode (is not supported since LWM2M 1.1)',
+}
+
+export const FirmwareUpdateStrategyNameEnum = {
+  1: 'Push firmware update as binary file using Object 5 and Resource 0 (Package)',
+  2: 'Auto-generate unique CoAP URL to download the package and push firmware update as Object 5 and',
+  3: 'Push firmware update as binary file using Object 19 and Resource 0 (Data)',
+};
+
+export const SoftwareUpdateStrategyNameEnum = {
+  1: 'Push binary file using Object 9 and Resource 2 (Package)',
+  2: 'Auto-generate unique CoAP URL to download the package and push software update using Object 9 and',
+};
+
+export enum SNMPRangeNameEnum {
+  TELEMETRY_QUERYING = 'Telemetry',
+  CLIENT_ATTRIBUTES_QUERYING = 'Client attributes',
+  SHARED_ATTRIBUTES_SETTING = 'Shared attributes',
+  TO_DEVICE_RPC_REQUEST = 'RPC request',
+}
+
+export enum SNMPDataTypeEnum {
+  STRING = '字符串',
+  LONG = '数字',
+  BOOLEAN = '布尔值',
+  DOUBLE = '双精度小数',
+  JSON = 'JSON',
+}

+export { default as TransportDescription } from './TransportDescription.vue';

@@ -9,17 +9,33 @@
     </div>
     <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
       <div style="margin-left: 1vw">
-        <h3 v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'" style="color: gray">
-          查询频率（毫秒*）</h3>
-        <InputNumber v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
-          v-model:value="queryingFrequencyMs" :min="0" :max="99999999999999999999" style="margin-top: 0.25vh" />
+        <h3
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          style="color: gray"
+        >
+          查询频率（毫秒*）</h3
+        >
+        <InputNumber
+          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
+          v-model:value="queryingFrequencyMs"
+          :min="0"
+          :max="99999999999999999999"
+          style="margin-top: 0.25vh"
+        />
         <div style="margin-top: 0.65vh"></div>
-        <MappingsForm :value="item.mappings" @change="handleMappingsChange" @dynamicAddHeight="dynamicHeight += 4"
-          @dynamicReduceHeight="dynamicHeight -= 4" />
+        <MappingsForm
+          :value="item.mappings"
+          @change="handleMappingsChange"
+          @dynamicAddHeight="dynamicHeight += 4"
+          @dynamicReduceHeight="dynamicHeight -= 4"
+        />
       </div>
     </div>
     <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }">
-      <div style="text-align: center; line-height: 20vh" :style="{ lineHeight: dynamicHeight + 'vh' }">
+      <div
+        style="text-align: center; line-height: 20vh"
+        :style="{ lineHeight: dynamicHeight + 'vh' }"
+      >
         <Button size="small" type="default" @click="handleRemove(item, index)">
           <template #icon>
             <MinusCircleOutlined />
@@ -30,105 +46,105 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Button, InputNumber } from 'ant-design-vue';
-import { MinusCircleOutlined } from '@ant-design/icons-vue';
-import MappingsForm from './MappingsForm.vue';
-import { useMessage } from '/@/hooks/web/useMessage';
+  import { ref } from 'vue';
+  import { Button, InputNumber } from 'ant-design-vue';
+  import { MinusCircleOutlined } from '@ant-design/icons-vue';
+  import MappingsForm from './MappingsForm.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
-const props = defineProps({
-  item: {
-    type: Object,
-    default: () => { },
-  },
-  index: {
-    type: Number,
-  },
-});
-const emit = defineEmits(['removeItem']);
-const dynamicHeight = ref(25);
-const queryingFrequencyMs = ref(5000);
-const { createMessage } = useMessage();
-const handleMappingsChange = (e) => {
-  // eslint-disable-next-line vue/no-mutating-props
-  props.item.mappings = e;
-};
-const handleRemove = (item, index) => {
-  emit('removeItem', item, index);
-};
-//设置回显的高度
-const setFieldsValueFunc = () => {
-  dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
-  queryingFrequencyMs.value = props.item.queryingFrequencyMs;
-};
-//获取表单的值
-const getSnmpFormFunc = () => {
-  if (!props.item.spec || props.item.spec == '' || props.item.spec == undefined) {
-    return createMessage.error('请选择范围');
-  }
-  if (
-    props.item.spec == 'TELEMETRY_QUERYING' ||
-    props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
-  ) {
-    if (queryingFrequencyMs.value == null) {
-      return createMessage.error('请填写查询频率');
-    }
-  }
-  let obj: any = {};
-  obj = {
-    ...{ spec: props.item.spec },
-    ...{ mappings: props.item.mappings },
-    ...{
-      queryingFrequencyMs:
-        props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
-          ? queryingFrequencyMs.value
-          : null,
+  const props = defineProps({
+    item: {
+      type: Object,
+      default: () => {},
     },
+    index: {
+      type: Number,
+    },
+  });
+  const emit = defineEmits(['removeItem']);
+  const dynamicHeight = ref(25);
+  const queryingFrequencyMs = ref(5000);
+  const { createMessage } = useMessage();
+  const handleMappingsChange = (e) => {
+    // eslint-disable-next-line vue/no-mutating-props
+    props.item.mappings = e;
+  };
+  const handleRemove = (item, index) => {
+    emit('removeItem', item, index);
+  };
+  //设置回显的高度
+  const setFieldsValueFunc = () => {
+    dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
+    queryingFrequencyMs.value = props.item.queryingFrequencyMs;
   };
-  return obj;
-};
-defineExpose({
-  getSnmpFormFunc,
-  setFieldsValueFunc,
-  handleMappingsChange,
-});
+  //获取表单的值
+  const getSnmpFormFunc = () => {
+    if (!props.item.spec || props.item.spec == '' || props.item.spec == undefined) {
+      return createMessage.error('请选择范围');
+    }
+    if (
+      props.item.spec == 'TELEMETRY_QUERYING' ||
+      props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
+    ) {
+      if (queryingFrequencyMs.value == null) {
+        return createMessage.error('请填写查询频率');
+      }
+    }
+    let obj: any = {};
+    obj = {
+      ...{ spec: props.item.spec },
+      ...{ mappings: props.item.mappings },
+      ...{
+        queryingFrequencyMs:
+          props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
+            ? queryingFrequencyMs.value
+            : null,
+      },
+    };
+    return obj;
+  };
+  defineExpose({
+    getSnmpFormFunc,
+    setFieldsValueFunc,
+    handleMappingsChange,
+  });
 </script>
 <style lang="less" scoped>
-::-webkit-scrollbar {
-  display: none;
-  width: 0 !important;
-  height: 0 !important;
-  -webkit-appearance: none;
-  background: transparent;
-}
-
-.snmp-form {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 40vw;
-  height: 20vh;
-  border: 0.1px solid #bfbfbf;
-  margin-top: 2vh;
-
-  .form-item1 {
-    width: 9vw;
-    height: 20vh;
-    border: 0.1px solid #bfbfbf;
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
   }
 
-  .form-item2 {
-    width: 28vw;
+  .snmp-form {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 40vw;
     height: 20vh;
     border: 0.1px solid #bfbfbf;
-    overflow: hidden;
-    overflow-y: scroll;
-  }
+    margin-top: 2vh;
 
-  .form-item3 {
-    width: 2vw;
-    height: 20vh;
-    border: 0.1px solid #bfbfbf;
+    .form-item1 {
+      width: 9vw;
+      height: 20vh;
+      border: 0.1px solid #bfbfbf;
+    }
+
+    .form-item2 {
+      width: 28vw;
+      height: 20vh;
+      border: 0.1px solid #bfbfbf;
+      overflow: hidden;
+      overflow-y: scroll;
+    }
+
+    .form-item3 {
+      width: 2vw;
+      height: 20vh;
+      border: 0.1px solid #bfbfbf;
+    }
   }
-}
 </style>

@@ -86,6 +86,7 @@
         isTitle: 'add',
       });
     } else {
+      console.log(selectScript);
       openModal(true, {
         isUpdate: false,
         isTest: true,