feat: 新增GBT协议相关修改和新增

@@ -4,7 +4,9 @@ import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/F
 import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import { findDictItemByCode } from '/@/api/system/dict';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -42,6 +44,16 @@ export enum MediaType {
   M3U8 = 'm3u8',
 }
 
+const streamingTypeList = [
+  { label: 'GBT-28181', value: 'GBT-28181' },
+  { label: '其他', value: 'other' },
+];
+
+export enum streamingType {
+  GBT = 'GBT-28181',
+  OTHER = 'other',
+}
+
 // 表格列数据
 export const columns: BasicColumn[] = [
   {
@@ -148,6 +160,44 @@ export const formSchema: QFormSchema[] = [
     },
   },
   {
+    field: 'streamingType',
+    label: '流媒体类型',
+    component: 'Select',
+    ifShow({ values }) {
+      return values.accessMode == AccessMode.Streaming;
+    },
+    componentProps() {
+      return {
+        placeholder: '请选择流媒体类型',
+        defaultValue: streamingType.OTHER,
+        options: streamingTypeList,
+      };
+    },
+  },
+  {
+    field: 'device',
+    label: '设备选择',
+    ifShow({ values }) {
+      return values.streamingType == streamingType.GBT;
+    },
+    component: 'ApiSelect',
+    componentProps() {
+      return {
+        api: findDictItemByCode,
+        params: {
+          dictCode: 'device_type',
+        },
+        valueField: 'itemValue',
+        labelField: 'itemText',
+        placeholder: '请选择设备类型',
+        onChange: (value: DeviceTypeEnum) => {
+          console.log(value, 'value');
+        },
+        getPopupContainer: () => document.body,
+      };
+    },
+  },
+  {
     field: 'brand',
     label: '视频厂家',
     component: 'Input',
@@ -193,7 +243,9 @@ export const formSchema: QFormSchema[] = [
     label: '流媒体配置',
     component: 'Select',
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming && values.streamingType != streamingType.GBT
+      );
     },
     slot: 'videoPlatformIdSlot',
     componentProps: {
@@ -206,7 +258,9 @@ export const formSchema: QFormSchema[] = [
     component: 'RadioGroup',
     defaultValue: StreamType.MASTER,
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming && values.streamingType != streamingType.GBT
+      );
     },
     componentProps: {
       placeholder: '请选择码流',
@@ -224,7 +278,9 @@ export const formSchema: QFormSchema[] = [
     component: 'RadioGroup',
     defaultValue: PlayProtocol.HTTP,
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming && values.streamingType != streamingType.GBT
+      );
     },
     helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
     componentProps: {
@@ -242,7 +298,9 @@ export const formSchema: QFormSchema[] = [
     component: 'Input',
     rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming && values.streamingType != streamingType.GBT
+      );
     },
     componentProps: {
       placeholder: '请输入监控点编号',

@@ -16,7 +16,7 @@
           @open-gateway-device="handleOpenGatewayDevice"
         />
       </TabPane>
-      <TabPane key="modelOfMatter" tab="物模型数据">
+      <TabPane v-if="!isTransportType" key="modelOfMatter" tab="物模型数据">
         <ModelOfMatter :deviceDetail="deviceDetail" />
       </TabPane>
       <!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">
@@ -28,32 +28,43 @@
       <!-- <TabPane key="5" tab="命令下发" v-if="deviceDetail?.deviceType !== 'SENSOR'">
         <CommandIssuance :deviceDetail="deviceDetail" />
       </TabPane> -->
-      <TabPane key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
-      <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
+      <TabPane v-if="!isTransportType" key="3" tab="告警"><Alarm :id="deviceDetail.id" /></TabPane>
+      <TabPane
+        key="4"
+        tab="子设备"
+        v-if="deviceDetail?.deviceType === 'GATEWAY' && !isTransportType"
+      >
         <ChildDevice
           :fromId="deviceDetail?.tbDeviceId"
           @openTbDeviceDetail="handleOpenTbDeviceDetail"
         />
       </TabPane>
-      <TabPane key="7" tab="命令下发记录">
+      <TabPane v-if="!isTransportType" key="7" tab="命令下发记录">
         <CommandRecord :deviceDetail="deviceDetail" :fromId="deviceDetail?.tbDeviceId" />
       </TabPane>
       <!-- 网关设备并且场家是TBox -->
       <TabPane
         key="6"
         tab="TBox"
-        v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
+        v-if="
+          deviceDetail?.deviceType === 'GATEWAY' &&
+          deviceDetail?.brand == 'TBox' &&
+          !isTransportType
+        "
       >
         <TBoxDetail :deviceDetail="deviceDetail" />
       </TabPane>
       <!-- 网关设备并且是TBox -->
 
-      <TabPane key="eventManage" tab="事件管理">
+      <TabPane v-if="!isTransportType" key="eventManage" tab="事件管理">
         <EventManage :tbDeviceId="deviceDetail.tbDeviceId" />
       </TabPane>
-      <TabPane key="task" tab="任务">
+      <TabPane v-if="!isTransportType" key="task" tab="任务">
         <Task :tbDeviceId="deviceDetail.tbDeviceId" />
       </TabPane>
+      <TabPane key="videoChannel" tab="视频通道">
+        <VideoChannel :deviceDetail="deviceDetail" :fromId="deviceDetail?.tbDeviceId" />
+      </TabPane>
     </Tabs>
   </BasicDrawer>
 </template>
@@ -74,6 +85,7 @@
   import EventManage from '../tabs/EventManage/index.vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import Task from '../tabs/Task.vue';
+  import { VideoChannel } from '../tabs/VideoChannel/index';
 
   export default defineComponent({
     name: 'DeviceModal',
@@ -91,6 +103,7 @@
       CommandRecord,
       EventManage,
       Task,
+      VideoChannel,
     },
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {
@@ -99,9 +112,12 @@
       const deviceDetailRef = ref();
       const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);
       const tbDeviceId = ref('');
+
+      const isTransportType = ref<Boolean>(false); //获取产品是不是GB/T 28181
       // 详情回显
       const [register] = useDrawerInner(async (data) => {
-        const { id } = data;
+        const { id, transportType } = data;
+        isTransportType.value = transportType == 'GB/T28181' ? true : false;
         // 设备详情
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;
@@ -132,6 +148,7 @@
         tbDeviceId,
         handleOpenTbDeviceDetail,
         handleOpenGatewayDevice,
+        isTransportType,
       };
     },
   });

+import { h } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { Tag } from 'ant-design-vue';
+
+export const configColumns: BasicColumn[] = [
+  {
+    title: '通道编号',
+    dataIndex: 'channellNumber',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'deviceName',
+  },
+  {
+    title: '通道名称',
+    dataIndex: 'channelName',
+  },
+  {
+    title: '厂家',
+    dataIndex: 'manufacturer',
+  },
+  {
+    title: '开启音频',
+    dataIndex: 'turnOnAudio',
+    slots: { customRender: 'turnOnAudio' },
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    format: (text) => {
+      return h(
+        Tag,
+        {
+          color: Number(text) === 1 ? 'green' : 'blue',
+        },
+        () => (Number(text) === 1 ? '在线' : '离线')
+      );
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+  },
+];
+
+export const searchFormSchema: FormSchema[] | any = [{}];

+import VideoChannel from './index.vue';
+export { VideoChannel };

+<template>
+  <BasicTable
+    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 p-4"
+    @register="registerTable"
+  >
+    <template #turnOnAudio="{ record }">
+      <Switch
+        :checked="record.status === 1"
+        :loading="record.pendingStatus"
+        checkedChildren="开启"
+        unCheckedChildren="关闭"
+        @change="(checked:boolean)=>handleTurnVideo(checked,record)"
+      />
+    </template>
+    <template #action="{ record }">
+      <TableAction
+        :actions="[
+          {
+            label: '播放',
+            auth: 'api:yt:sceneLinkage:get',
+            icon: 'ant-design:playCircle-outlined',
+            onClick: handlePlay.bind(null, record),
+          },
+        ]"
+    /></template>
+  </BasicTable>
+</template>
+
+<script lang="ts" setup>
+  import { configColumns, searchFormSchema } from './config';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Switch } from 'ant-design-vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { watch } from 'vue';
+
+  const props = defineProps({
+    fromId: {
+      type: String,
+      default: '',
+    },
+    deviceDetail: {
+      type: Object as PropType<DeviceRecord>,
+      required: true,
+    },
+  });
+
+  watch(
+    () => props,
+    () => {
+      console.log(props, 'props');
+    }
+  );
+
+  const [registerTable] = useTable({
+    // api: deviceCommandRecordGetQuery,
+    columns: configColumns,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    beforeFetch: (params) => {
+      console.log(params);
+    },
+    useSearchForm: true,
+  });
+
+  const handleTurnVideo = (checked: Boolean, record: Recordable) => {
+    console.log(checked, record, 'record');
+  };
+
+  const handlePlay = (record: Recordable) => {
+    console.log(record);
+  };
+</script>

@@ -336,10 +336,12 @@
       }
 
       function handleDetail(record: Recordable) {
-        const { id, tbDeviceId } = record;
+        const { id, tbDeviceId, deviceProfile } = record;
+        const { transportType } = deviceProfile || {};
         openDrawer(true, {
           id,
           tbDeviceId,
+          transportType,
         });
       }
 

@@ -127,11 +127,12 @@
     }
   };
   const handleStepNext = (e, data) => {
+    const { deviceType } = unref(DevConStRef)?.getFieldsValue() || {};
     if (e) {
       current.value++;
       unref(isUpdate)
-        ? unref(TransConStRef)?.editOrAddTransportTypeStatus(true)
-        : unref(TransConStRef)?.editOrAddTransportTypeStatus(false);
+        ? unref(TransConStRef)?.editOrAddTransportTypeStatus(true, deviceType)
+        : unref(TransConStRef)?.editOrAddTransportTypeStatus(false, deviceType);
     } else {
       setTransConfEditFormData(data);
     }

@@ -45,19 +45,20 @@
     ifShowBtn: { type: Boolean, default: true },
   });
 
-  const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
-    labelWidth: 100,
-    schemas: step1Schemas,
-    actionColOptions: {
-      span: 14,
-    },
-    showResetButton: false,
-    showActionButtonGroup: props.ifShowBtn ? true : false,
-    submitButtonOptions: {
-      text: '下一步',
-    },
-    submitFunc: customSubmitFunc,
-  });
+  const [register, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
+    useForm({
+      labelWidth: 100,
+      schemas: step1Schemas,
+      actionColOptions: {
+        span: 14,
+      },
+      showResetButton: false,
+      showActionButtonGroup: props.ifShowBtn ? true : false,
+      submitButtonOptions: {
+        text: '下一步',
+      },
+      submitFunc: customSubmitFunc,
+    });
   const editOrAddNameStatus = (nameStatus) =>
     updateSchema({
       field: 'name',
@@ -129,6 +130,7 @@
     resetFormData,
     getFormData,
     editOrAddDeviceTypeStatus,
+    getFieldsValue,
   });
 </script>
 <style lang="less" scoped>

 <template>
   <div
     class="step2-style"
-    :style="[isMqttType == 'DEFAULT' ? { minHeight: 0 + 'px' } : { minHeight: 800 + 'px' }]"
+    :style="[
+      isMqttType == 'DEFAULT' || isMqttType == 'GB/T28181'
+        ? { minHeight: 0 + 'px' }
+        : { minHeight: 800 + 'px' },
+    ]"
   >
     <div
       :style="[
@@ -138,6 +142,7 @@
     const getSnmpVal = await snmpRef.value?.getFormData();
     const getTcpVal = await tcpRef.value?.getFormData();
     step2Data.transportConfiguration = {
+      type: isMqttType.value,
       ...getMqttVal,
       ...getCoapVal,
       ...getLwm2mVal,
@@ -148,19 +153,26 @@
     return step2Data;
   };
 
-  const editOrAddTransportTypeStatus = (status: boolean) => {
+  const editOrAddTransportTypeStatus = (status: boolean, deviceType?: string) => {
+    const options = [
+      { label: '默认', value: 'DEFAULT' },
+      { label: 'MQTT', value: 'MQTT' },
+      { label: 'CoAP', value: 'COAP' },
+      // { label: 'LWM2M', value: 'LWM2M' },
+      // { label: 'SNMP', value: 'SNMP' },
+      { label: 'TCP/UDP', value: 'TCP' },
+    ];
+    if (deviceType == 'DIRECT_CONNECTION') {
+      options.push({ label: 'GB/T 28181', value: 'GB/T28181' });
+    }
+    if (deviceType != 'DIRECT_CONNECTION' && isMqttType.value == 'GB/T28181') {
+      setFieldsValue({ transportType: null });
+    }
     updateSchema({
       field: 'transportType',
       componentProps: {
         disabled: status,
-        options: [
-          { label: '默认', value: 'DEFAULT' },
-          { label: 'MQTT', value: 'MQTT' },
-          { label: 'CoAP', value: 'COAP' },
-          // { label: 'LWM2M', value: 'LWM2M' },
-          // { label: 'SNMP', value: 'SNMP' },
-          { label: 'TCP/UDP', value: 'TCP' },
-        ],
+        options,
         onChange(e) {
           isMqttType.value = e;
         },

@@ -78,6 +78,6 @@ export const getSendValues = async (option, getDesign, checked) => {
 
 export const CommandTypeEnumLIst = {
   '0': { CUSTOM: 0, name: '自定义' },
-  '1': { CUSTOM: 0, name: '服务' },
-  '2': { CUSTOM: 0, name: '属性' },
+  '1': { CUSTOM: 1, name: '服务' },
+  '2': { CUSTOM: 2, name: '属性' },
 };