wip: product profile detail update to description

@@ -5,7 +5,13 @@
     "public/resource/tinymce/langs"
   ],
   "cSpell.words": [
+    "COAP",
+    "edrx",
+    "EFENTO",
     "inited",
+    "MQTT",
+    "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,33 @@ 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;
+}
+
 export interface TransportConfiguration {
   type: string;
+  deviceTelemetryTopic: string;
+  deviceAttributesTopic: string;
+  transportPayloadTypeConfiguration: TransportPayloadTypeConfiguration;
+  clientSettings: ClientSettings;
+  coapDeviceTypeConfiguration: {
+    coapDeviceType: string;
+    transportPayloadTypeConfiguration: TransportPayloadTypeConfiguration;
+  };
 }
 
 export interface ProvisionConfiguration {
@@ -85,6 +110,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}`,
     },

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

@@ -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, 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 === PowerModeNameEnum.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 { 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 { computed } from 'vue';
+  import COAPDescription from './COAPDescription.vue';
+  import { TransportTypeEnum } from './const';
+  import DefaultConfiguration from './DefaultConfiguration.vue';
+  import MQTTConfiguration from './MQTTConfiguration.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"
+    />
+  </section>
+</template>

+export enum TransportTypeEnum {
+  DEFAULT = 'DEFAULT',
+  MQTT = 'MQTT',
+  COAP = 'COAP',
+  LWM2M = 'LWM2M',
+  SNMP = 'SNMP',
+}
+
+export enum TransportPayloadTypeEnum {
+  PROTOBUF = 'PROTOBUF',
+  JSON = 'JSON',
+}
+
+export enum COAPDeviceTypeEnum {
+  DEFAULT = 'DEFAULT',
+  EFENTO = 'EFENTO',
+}
+
+export enum COAPDeviceTypeNameEnum {
+  DEFAULT = '默认',
+  EFENTO = 'Efento NB-IoT',
+}
+
+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 { default as TransportDescription } from './TransportDescription.vue';