Merge branch 'perf_video_channel' into 'main_dev'

perf: 调整视频管理GBT28181，联调通道号接口，和修改为用户选择

See merge request yunteng/thingskit-front!1222

@@ -22,6 +22,7 @@ enum CameraManagerApi {
   VIDEO_CONTROL_STOP = '/video/control/stop/',
   CAMERA_ADDGPT_API_URL = '/video/add/gbt28181',
   VIDEO_CONTROL_SYNC = '/video/control/sync/',
+  VIDEO_CHANNEL_LIST = '/video/channel/list',
 }
 
 export const cameraPage = (params: CameraQueryParam) => {
@@ -152,3 +153,10 @@ export const syncVideoApiGet = (deviceId: string) => {
     url: `${CameraManagerApi.VIDEO_CONTROL_SYNC}${deviceId}`,
   });
 };
+
+//获取设备通道列表
+export const getDeviceChannelList = (deviceId: string) => {
+  return defHttp.get({
+    url: `${CameraManagerApi.VIDEO_CHANNEL_LIST}?deviceId=${deviceId}`,
+  });
+};

@@ -26,9 +26,10 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { getStreamingMediaList, createGPTPostApi } from '/@/api/camera/cameraManager';
   import SelectDevice from './SelectDevice.vue';
-  import { formGBTSchema, StreamInterface } from '../config.data';
+  import { formGBTSchema, GBT28181DeviceSelectMethod, StreamInterface } from '../config.data';
   import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
   import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+  import { isArray } from '/@/utils/is';
 
   const emits = defineEmits(['success', 'register']);
 
@@ -99,14 +100,20 @@
     return record;
   });
 
+  const errorMessage = (errorText) => {
+    createMessage.error(errorText);
+    throw Error(errorText);
+  };
+
   //验证视频通道号
   const validateChannelNos = (gptDeviceDTOS) => {
+    if (isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0) {
+      errorMessage('请选择设备通道号');
+    }
     gptDeviceDTOS.some((deviceDTO) => {
       const channelNo = deviceDTO['channelNos'];
-      const ChannelNoRegexp = /^\d{1,20}$/;
-      if (!ChannelNoRegexp.test(channelNo)) {
-        createMessage.error('输入内容只能是数字，且不能超过20位');
-        throw Error('输入内容只能是数字，且不能超过20位');
+      if (!channelNo || (isArray(channelNo) && channelNo.length == 0)) {
+        errorMessage('请选择通道号');
       }
     });
   };
@@ -116,10 +123,11 @@
       setDrawerProps({ confirmLoading: true });
       const values = await validate();
       if (!values) return;
-      const gptDeviceDTOS = selectDeviceRef.value?.getDeviceChannels();
-      if (Array.isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0)
-        return createMessage.error('请填写设备通道号');
-      validateChannelNos(gptDeviceDTOS);
+      let gptDeviceDTOS: Recordable[] | null = null;
+      if (values.allDevice === GBT28181DeviceSelectMethod.PARTIAL) {
+        gptDeviceDTOS = selectDeviceRef.value?.getDeviceChannels() as any as Recordable[];
+        validateChannelNos(gptDeviceDTOS);
+      }
       const mergeValues = {
         ...values,
         accessMode: 2,

 <template>
   <div v-for="(param, index) in dynamicInput.params" :key="index" class="mt-4 flex gap-2">
     <a-input disabled v-model:value="param.deviceName" class="w-1/2 flex-1" />
-    <a-input v-model:value="param.channelNos" class="w-1/2 flex-1" placeholder="请输入通道号" />
+    <Select
+      placeholder="请选择通道号"
+      v-model:value="param.channelNos"
+      class="!w-1/2"
+      :options="selectOptions"
+      v-bind="createPickerSearch()"
+      :disabled="disabled"
+      @change="handleChange"
+      mode="multiple"
+      allowClear
+    />
   </div>
 </template>
 <script lang="ts">
@@ -10,9 +20,14 @@
   };
 </script>
 <script lang="ts" setup name="SelectAttributes">
-  import { reactive, UnwrapRef, watchEffect } from 'vue';
+  import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
   import { propTypes } from '/@/utils/propTypes';
   import { DeviceChannelInterface } from '../config.data';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+  import { Select } from 'ant-design-vue';
+  import { getDeviceChannelList } from '/@/api/camera/cameraManager';
+  import { isArray } from '/@/utils/is';
+  import cloneDeep from 'lodash-es/cloneDeep';
 
   const props = defineProps({
     value: propTypes.object.def({}),
@@ -22,10 +37,25 @@
     },
   });
 
+  const selectOptions = ref<LabelValueOptions>([]);
+
   //动态数据
   const dynamicInput: UnwrapRef<{ params: DeviceChannelInterface[] }> = reactive({ params: [] });
 
   const initVal = async () => {
+    if (props.value?.value) {
+      const res = await getDeviceChannelList(props.value?.value);
+      if (isArray(res) && res.length !== 0) {
+        selectOptions.value = res.map((channelItem) => ({
+          label: channelItem.name,
+          value: channelItem.channelId,
+        }));
+        selectOptions.value.unshift({
+          label: '全选',
+          value: 'all',
+        });
+      }
+    }
     if (props.value) {
       dynamicInput.params.push({
         deviceName: props.value.label,
@@ -42,9 +72,40 @@
 
   valEffect();
 
+  const selectValues = ref<string[]>([]); // 保存选择的值
+
+  const saveSelectValues = ref<Recordable>({});
+
   //chang改变
   const emitChange = () => {
-    return { ...dynamicInput.params[0], channelNos: [dynamicInput.params[0].channelNos] };
+    return saveSelectValues.value;
+  };
+
+  const excludeKeyAllValue = (value: LabelValueOptions) => {
+    return value?.filter((selectItem) => selectItem.value !== 'all');
+  };
+
+  const handleChange = (_, options) => {
+    // 全选
+    const findSelectAll = options?.find((optionItem) => optionItem.value === 'all')?.value;
+    if (findSelectAll) {
+      dynamicInput.params[0].channelNos = ['all']; //全选
+      excludeKeyAllValue(selectOptions.value)?.forEach(
+        (disabledItem) => (disabledItem.disabled = true)
+      );
+      selectValues.value = cloneDeep(selectOptions.value)
+        ?.filter((selectItem) => selectItem.value !== 'all')
+        ?.map((mapItem) => mapItem.value);
+    } else {
+      excludeKeyAllValue(selectOptions.value)?.forEach(
+        (disabledItem) => (disabledItem.disabled = false)
+      );
+    }
+    const data = cloneDeep(options)?.map((mapItem) => mapItem.value);
+    saveSelectValues.value = {
+      ...dynamicInput.params[0],
+      channelNos: findSelectAll ? selectValues.value : data,
+    };
   };
 
   defineExpose({

@@ -8,11 +8,12 @@
     @change="handleDeviceChange"
     :disabled="disabled"
     mode="multiple"
+    :max-tag-count="selectChannelMaxCount"
     labelInValue
   />
-  <template v-for="(item, index) in deviceList" :key="index">
+  <template v-for="(item, index) in deviceList" :key="item.value">
     <InputChannel
-      :ref="bindDeviceRef.deviceAttrRef"
+      :ref="bindDeviceRef.deviceChannelRef"
       :value="item"
       :index="index"
       :disabled="disabled"
@@ -25,6 +26,7 @@
   import { createPickerSearch } from '/@/utils/pickerSearch';
   import { StreamInterface } from '../config.data';
   import InputChannel from './InputChannel.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   defineProps({
     selectOptions: {
@@ -37,19 +39,25 @@
     },
   });
 
+  const { createMessage } = useMessage();
+
   const selectValue = ref([]);
 
   const bindDeviceRef = {
-    deviceAttrRef: ref([]),
+    deviceChannelRef: ref([]),
   };
 
   const deviceList: Ref<StreamInterface[]> = ref([]);
 
+  const selectChannelMaxCount = ref(50); // 限制通道数为50
+
   const getDeviceChannels = () => {
-    return unref(bindDeviceRef.deviceAttrRef)?.map((item: any) => item.emitChange());
+    return unref(bindDeviceRef.deviceChannelRef)?.map((item: any) => item.emitChange());
   };
 
   const handleDeviceChange = (_, options) => {
+    if (options.length > selectChannelMaxCount.value)
+      return createMessage.warn('通道数需要小于50个');
     deviceList.value = options;
   };
 

 import { BasicColumn, FormSchema } from '/@/components/Table';
 import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/Form/index';
 
-import { CameraVideoUrl, CameraMaxLength, CameraChannelNoRule } from '/@/utils/rules';
+import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import SnHelpMessage1 from './SnHelpMessage1.vue';
@@ -15,6 +15,7 @@ import { DataSourceField } from '../../visual/packages/config/common.config';
 import { getMeetTheConditionsDevice } from '/@/api/dataBoard';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const';
+import { getDeviceChannelList } from '/@/api/camera/cameraManager';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
@@ -36,6 +37,12 @@ export enum CameraPermission {
   DELETE = 'api:yt:video:delete',
 }
 
+// GBT28181设备选择全选或者部分
+export enum GBT28181DeviceSelectMethod {
+  ALL = 1, //全部
+  PARTIAL = 0, //部分
+}
+
 export enum AccessMode {
   ManuallyEnter = 0,
   Streaming = 1,
@@ -265,7 +272,7 @@ export const formSchema: QFormSchema[] = [
         placeholder: '请选择设备',
         onChange() {
           setFieldsValue({
-            channelNo: '',
+            channelNo: [],
           });
         },
         onFocus() {
@@ -282,15 +289,30 @@ export const formSchema: QFormSchema[] = [
     field: 'channelNo',
     label: '通道号',
     required: true,
-    component: 'Input',
+    component: 'ApiSelect',
     ifShow({ values }) {
       return values.accessMode === AccessMode.GBT28181;
     },
-    componentProps: {
-      maxLength: 20,
-      placeholder: '请输入通道号',
+    componentProps({ formModel }) {
+      const deviceId = formModel[DataSourceField.DEVICE_ID];
+      return {
+        api: async () => {
+          if (deviceId) {
+            try {
+              const data = await getDeviceChannelList(deviceId);
+              if (data)
+                return data.map((item) => ({
+                  ...item,
+                  label: item.name,
+                  value: item.channelId,
+                }));
+            } catch (error) {}
+          }
+          return [];
+        },
+        placeholder: '请选择通道号',
+      };
     },
-    rules: [{ required: true, message: '通道号是必填项' }, ...CameraChannelNoRule],
   },
   {
     field: 'brand',
@@ -537,10 +559,30 @@ export const formGBTSchema: QFormSchema[] = [
     ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181,
   },
   {
+    label: '设备选择方式',
+    field: 'allDevice',
+    component: 'RadioGroup',
+    rules: [{ required: true, message: '设备选择方式为必选项', type: 'number' }],
+    defaultValue: GBT28181DeviceSelectMethod.ALL,
+    componentProps() {
+      return {
+        defaultValue: GBT28181DeviceSelectMethod.ALL,
+        placeholder: '请选择设备选择方式',
+        options: [
+          { label: '全部', value: GBT28181DeviceSelectMethod.ALL },
+          { label: '部分', value: GBT28181DeviceSelectMethod.PARTIAL },
+        ],
+      };
+    },
+    ifShow: ({ values }) => !!values.organizationId,
+  },
+  {
     field: 'deviceChannels',
     label: '设备和通道号',
     component: 'Input',
     slot: 'deviceChannelsSlot',
-    ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181,
+    ifShow: ({ values }) =>
+      values.accessMode === AccessMode.GBT28181 &&
+      values.allDevice === GBT28181DeviceSelectMethod.PARTIAL,
   },
 ];

@@ -88,7 +88,7 @@ export const descSchema = (emit: EmitType): DescItem[] => {
       label: '设备编号',
     },
     {
-      field: 'deviceInfo.sip.localIp',
+      field: 'deviceInfo.sip.hostAddress',
       label: '地址',
     },
     {