MQTTConfiguration.vue 3.5 KB
<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>