Commit 2475deea519a09c9194ae4fa63c15e46362b4338
Committed by
xp.Huang
1 parent
087e8308
perf: 调整视频管理GBT28181,联调通道号接口,和修改为用户选择
Showing
6 changed files
with
152 additions
and
25 deletions
| @@ -22,6 +22,7 @@ enum CameraManagerApi { | @@ -22,6 +22,7 @@ enum CameraManagerApi { | ||
| 22 | VIDEO_CONTROL_STOP = '/video/control/stop/', | 22 | VIDEO_CONTROL_STOP = '/video/control/stop/', |
| 23 | CAMERA_ADDGPT_API_URL = '/video/add/gbt28181', | 23 | CAMERA_ADDGPT_API_URL = '/video/add/gbt28181', |
| 24 | VIDEO_CONTROL_SYNC = '/video/control/sync/', | 24 | VIDEO_CONTROL_SYNC = '/video/control/sync/', |
| 25 | + VIDEO_CHANNEL_LIST = '/video/channel/list', | ||
| 25 | } | 26 | } |
| 26 | 27 | ||
| 27 | export const cameraPage = (params: CameraQueryParam) => { | 28 | export const cameraPage = (params: CameraQueryParam) => { |
| @@ -152,3 +153,10 @@ export const syncVideoApiGet = (deviceId: string) => { | @@ -152,3 +153,10 @@ export const syncVideoApiGet = (deviceId: string) => { | ||
| 152 | url: `${CameraManagerApi.VIDEO_CONTROL_SYNC}${deviceId}`, | 153 | url: `${CameraManagerApi.VIDEO_CONTROL_SYNC}${deviceId}`, |
| 153 | }); | 154 | }); |
| 154 | }; | 155 | }; |
| 156 | + | ||
| 157 | +//获取设备通道列表 | ||
| 158 | +export const getDeviceChannelList = (deviceId: string) => { | ||
| 159 | + return defHttp.get({ | ||
| 160 | + url: `${CameraManagerApi.VIDEO_CHANNEL_LIST}?deviceId=${deviceId}`, | ||
| 161 | + }); | ||
| 162 | +}; |
| @@ -26,9 +26,10 @@ | @@ -26,9 +26,10 @@ | ||
| 26 | import { useMessage } from '/@/hooks/web/useMessage'; | 26 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 27 | import { getStreamingMediaList, createGPTPostApi } from '/@/api/camera/cameraManager'; | 27 | import { getStreamingMediaList, createGPTPostApi } from '/@/api/camera/cameraManager'; |
| 28 | import SelectDevice from './SelectDevice.vue'; | 28 | import SelectDevice from './SelectDevice.vue'; |
| 29 | - import { formGBTSchema, StreamInterface } from '../config.data'; | 29 | + import { formGBTSchema, GBT28181DeviceSelectMethod, StreamInterface } from '../config.data'; |
| 30 | import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; | 30 | import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; |
| 31 | import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const'; | 31 | import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const'; |
| 32 | + import { isArray } from '/@/utils/is'; | ||
| 32 | 33 | ||
| 33 | const emits = defineEmits(['success', 'register']); | 34 | const emits = defineEmits(['success', 'register']); |
| 34 | 35 | ||
| @@ -99,14 +100,20 @@ | @@ -99,14 +100,20 @@ | ||
| 99 | return record; | 100 | return record; |
| 100 | }); | 101 | }); |
| 101 | 102 | ||
| 103 | + const errorMessage = (errorText) => { | ||
| 104 | + createMessage.error(errorText); | ||
| 105 | + throw Error(errorText); | ||
| 106 | + }; | ||
| 107 | + | ||
| 102 | //验证视频通道号 | 108 | //验证视频通道号 |
| 103 | const validateChannelNos = (gptDeviceDTOS) => { | 109 | const validateChannelNos = (gptDeviceDTOS) => { |
| 110 | + if (isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0) { | ||
| 111 | + errorMessage('请选择设备通道号'); | ||
| 112 | + } | ||
| 104 | gptDeviceDTOS.some((deviceDTO) => { | 113 | gptDeviceDTOS.some((deviceDTO) => { |
| 105 | const channelNo = deviceDTO['channelNos']; | 114 | const channelNo = deviceDTO['channelNos']; |
| 106 | - const ChannelNoRegexp = /^\d{1,20}$/; | ||
| 107 | - if (!ChannelNoRegexp.test(channelNo)) { | ||
| 108 | - createMessage.error('输入内容只能是数字,且不能超过20位'); | ||
| 109 | - throw Error('输入内容只能是数字,且不能超过20位'); | 115 | + if (!channelNo || (isArray(channelNo) && channelNo.length == 0)) { |
| 116 | + errorMessage('请选择通道号'); | ||
| 110 | } | 117 | } |
| 111 | }); | 118 | }); |
| 112 | }; | 119 | }; |
| @@ -116,10 +123,11 @@ | @@ -116,10 +123,11 @@ | ||
| 116 | setDrawerProps({ confirmLoading: true }); | 123 | setDrawerProps({ confirmLoading: true }); |
| 117 | const values = await validate(); | 124 | const values = await validate(); |
| 118 | if (!values) return; | 125 | if (!values) return; |
| 119 | - const gptDeviceDTOS = selectDeviceRef.value?.getDeviceChannels(); | ||
| 120 | - if (Array.isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0) | ||
| 121 | - return createMessage.error('请填写设备通道号'); | ||
| 122 | - validateChannelNos(gptDeviceDTOS); | 126 | + let gptDeviceDTOS: Recordable[] | null = null; |
| 127 | + if (values.allDevice === GBT28181DeviceSelectMethod.PARTIAL) { | ||
| 128 | + gptDeviceDTOS = selectDeviceRef.value?.getDeviceChannels() as any as Recordable[]; | ||
| 129 | + validateChannelNos(gptDeviceDTOS); | ||
| 130 | + } | ||
| 123 | const mergeValues = { | 131 | const mergeValues = { |
| 124 | ...values, | 132 | ...values, |
| 125 | accessMode: 2, | 133 | accessMode: 2, |
| 1 | <template> | 1 | <template> |
| 2 | <div v-for="(param, index) in dynamicInput.params" :key="index" class="mt-4 flex gap-2"> | 2 | <div v-for="(param, index) in dynamicInput.params" :key="index" class="mt-4 flex gap-2"> |
| 3 | <a-input disabled v-model:value="param.deviceName" class="w-1/2 flex-1" /> | 3 | <a-input disabled v-model:value="param.deviceName" class="w-1/2 flex-1" /> |
| 4 | - <a-input v-model:value="param.channelNos" class="w-1/2 flex-1" placeholder="请输入通道号" /> | 4 | + <Select |
| 5 | + placeholder="请选择通道号" | ||
| 6 | + v-model:value="param.channelNos" | ||
| 7 | + class="!w-1/2" | ||
| 8 | + :options="selectOptions" | ||
| 9 | + v-bind="createPickerSearch()" | ||
| 10 | + :disabled="disabled" | ||
| 11 | + @change="handleChange" | ||
| 12 | + mode="multiple" | ||
| 13 | + allowClear | ||
| 14 | + /> | ||
| 5 | </div> | 15 | </div> |
| 6 | </template> | 16 | </template> |
| 7 | <script lang="ts"> | 17 | <script lang="ts"> |
| @@ -10,9 +20,14 @@ | @@ -10,9 +20,14 @@ | ||
| 10 | }; | 20 | }; |
| 11 | </script> | 21 | </script> |
| 12 | <script lang="ts" setup name="SelectAttributes"> | 22 | <script lang="ts" setup name="SelectAttributes"> |
| 13 | - import { reactive, UnwrapRef, watchEffect } from 'vue'; | 23 | + import { reactive, UnwrapRef, watchEffect, ref } from 'vue'; |
| 14 | import { propTypes } from '/@/utils/propTypes'; | 24 | import { propTypes } from '/@/utils/propTypes'; |
| 15 | import { DeviceChannelInterface } from '../config.data'; | 25 | import { DeviceChannelInterface } from '../config.data'; |
| 26 | + import { createPickerSearch } from '/@/utils/pickerSearch'; | ||
| 27 | + import { Select } from 'ant-design-vue'; | ||
| 28 | + import { getDeviceChannelList } from '/@/api/camera/cameraManager'; | ||
| 29 | + import { isArray } from '/@/utils/is'; | ||
| 30 | + import cloneDeep from 'lodash-es/cloneDeep'; | ||
| 16 | 31 | ||
| 17 | const props = defineProps({ | 32 | const props = defineProps({ |
| 18 | value: propTypes.object.def({}), | 33 | value: propTypes.object.def({}), |
| @@ -22,10 +37,25 @@ | @@ -22,10 +37,25 @@ | ||
| 22 | }, | 37 | }, |
| 23 | }); | 38 | }); |
| 24 | 39 | ||
| 40 | + const selectOptions = ref<LabelValueOptions>([]); | ||
| 41 | + | ||
| 25 | //动态数据 | 42 | //动态数据 |
| 26 | const dynamicInput: UnwrapRef<{ params: DeviceChannelInterface[] }> = reactive({ params: [] }); | 43 | const dynamicInput: UnwrapRef<{ params: DeviceChannelInterface[] }> = reactive({ params: [] }); |
| 27 | 44 | ||
| 28 | const initVal = async () => { | 45 | const initVal = async () => { |
| 46 | + if (props.value?.value) { | ||
| 47 | + const res = await getDeviceChannelList(props.value?.value); | ||
| 48 | + if (isArray(res) && res.length !== 0) { | ||
| 49 | + selectOptions.value = res.map((channelItem) => ({ | ||
| 50 | + label: channelItem.name, | ||
| 51 | + value: channelItem.channelId, | ||
| 52 | + })); | ||
| 53 | + selectOptions.value.unshift({ | ||
| 54 | + label: '全选', | ||
| 55 | + value: 'all', | ||
| 56 | + }); | ||
| 57 | + } | ||
| 58 | + } | ||
| 29 | if (props.value) { | 59 | if (props.value) { |
| 30 | dynamicInput.params.push({ | 60 | dynamicInput.params.push({ |
| 31 | deviceName: props.value.label, | 61 | deviceName: props.value.label, |
| @@ -42,9 +72,40 @@ | @@ -42,9 +72,40 @@ | ||
| 42 | 72 | ||
| 43 | valEffect(); | 73 | valEffect(); |
| 44 | 74 | ||
| 75 | + const selectValues = ref<string[]>([]); // 保存选择的值 | ||
| 76 | + | ||
| 77 | + const saveSelectValues = ref<Recordable>({}); | ||
| 78 | + | ||
| 45 | //chang改变 | 79 | //chang改变 |
| 46 | const emitChange = () => { | 80 | const emitChange = () => { |
| 47 | - return { ...dynamicInput.params[0], channelNos: [dynamicInput.params[0].channelNos] }; | 81 | + return saveSelectValues.value; |
| 82 | + }; | ||
| 83 | + | ||
| 84 | + const excludeKeyAllValue = (value: LabelValueOptions) => { | ||
| 85 | + return value?.filter((selectItem) => selectItem.value !== 'all'); | ||
| 86 | + }; | ||
| 87 | + | ||
| 88 | + const handleChange = (_, options) => { | ||
| 89 | + // 全选 | ||
| 90 | + const findSelectAll = options?.find((optionItem) => optionItem.value === 'all')?.value; | ||
| 91 | + if (findSelectAll) { | ||
| 92 | + dynamicInput.params[0].channelNos = ['all']; //全选 | ||
| 93 | + excludeKeyAllValue(selectOptions.value)?.forEach( | ||
| 94 | + (disabledItem) => (disabledItem.disabled = true) | ||
| 95 | + ); | ||
| 96 | + selectValues.value = cloneDeep(selectOptions.value) | ||
| 97 | + ?.filter((selectItem) => selectItem.value !== 'all') | ||
| 98 | + ?.map((mapItem) => mapItem.value); | ||
| 99 | + } else { | ||
| 100 | + excludeKeyAllValue(selectOptions.value)?.forEach( | ||
| 101 | + (disabledItem) => (disabledItem.disabled = false) | ||
| 102 | + ); | ||
| 103 | + } | ||
| 104 | + const data = cloneDeep(options)?.map((mapItem) => mapItem.value); | ||
| 105 | + saveSelectValues.value = { | ||
| 106 | + ...dynamicInput.params[0], | ||
| 107 | + channelNos: findSelectAll ? selectValues.value : data, | ||
| 108 | + }; | ||
| 48 | }; | 109 | }; |
| 49 | 110 | ||
| 50 | defineExpose({ | 111 | defineExpose({ |
| @@ -8,11 +8,12 @@ | @@ -8,11 +8,12 @@ | ||
| 8 | @change="handleDeviceChange" | 8 | @change="handleDeviceChange" |
| 9 | :disabled="disabled" | 9 | :disabled="disabled" |
| 10 | mode="multiple" | 10 | mode="multiple" |
| 11 | + :max-tag-count="selectChannelMaxCount" | ||
| 11 | labelInValue | 12 | labelInValue |
| 12 | /> | 13 | /> |
| 13 | - <template v-for="(item, index) in deviceList" :key="index"> | 14 | + <template v-for="(item, index) in deviceList" :key="item.value"> |
| 14 | <InputChannel | 15 | <InputChannel |
| 15 | - :ref="bindDeviceRef.deviceAttrRef" | 16 | + :ref="bindDeviceRef.deviceChannelRef" |
| 16 | :value="item" | 17 | :value="item" |
| 17 | :index="index" | 18 | :index="index" |
| 18 | :disabled="disabled" | 19 | :disabled="disabled" |
| @@ -25,6 +26,7 @@ | @@ -25,6 +26,7 @@ | ||
| 25 | import { createPickerSearch } from '/@/utils/pickerSearch'; | 26 | import { createPickerSearch } from '/@/utils/pickerSearch'; |
| 26 | import { StreamInterface } from '../config.data'; | 27 | import { StreamInterface } from '../config.data'; |
| 27 | import InputChannel from './InputChannel.vue'; | 28 | import InputChannel from './InputChannel.vue'; |
| 29 | + import { useMessage } from '/@/hooks/web/useMessage'; | ||
| 28 | 30 | ||
| 29 | defineProps({ | 31 | defineProps({ |
| 30 | selectOptions: { | 32 | selectOptions: { |
| @@ -37,19 +39,25 @@ | @@ -37,19 +39,25 @@ | ||
| 37 | }, | 39 | }, |
| 38 | }); | 40 | }); |
| 39 | 41 | ||
| 42 | + const { createMessage } = useMessage(); | ||
| 43 | + | ||
| 40 | const selectValue = ref([]); | 44 | const selectValue = ref([]); |
| 41 | 45 | ||
| 42 | const bindDeviceRef = { | 46 | const bindDeviceRef = { |
| 43 | - deviceAttrRef: ref([]), | 47 | + deviceChannelRef: ref([]), |
| 44 | }; | 48 | }; |
| 45 | 49 | ||
| 46 | const deviceList: Ref<StreamInterface[]> = ref([]); | 50 | const deviceList: Ref<StreamInterface[]> = ref([]); |
| 47 | 51 | ||
| 52 | + const selectChannelMaxCount = ref(50); // 限制通道数为50 | ||
| 53 | + | ||
| 48 | const getDeviceChannels = () => { | 54 | const getDeviceChannels = () => { |
| 49 | - return unref(bindDeviceRef.deviceAttrRef)?.map((item: any) => item.emitChange()); | 55 | + return unref(bindDeviceRef.deviceChannelRef)?.map((item: any) => item.emitChange()); |
| 50 | }; | 56 | }; |
| 51 | 57 | ||
| 52 | const handleDeviceChange = (_, options) => { | 58 | const handleDeviceChange = (_, options) => { |
| 59 | + if (options.length > selectChannelMaxCount.value) | ||
| 60 | + return createMessage.warn('通道数需要小于50个'); | ||
| 53 | deviceList.value = options; | 61 | deviceList.value = options; |
| 54 | }; | 62 | }; |
| 55 | 63 |
| 1 | import { BasicColumn, FormSchema } from '/@/components/Table'; | 1 | import { BasicColumn, FormSchema } from '/@/components/Table'; |
| 2 | import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/Form/index'; | 2 | import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/Form/index'; |
| 3 | 3 | ||
| 4 | -import { CameraVideoUrl, CameraMaxLength, CameraChannelNoRule } from '/@/utils/rules'; | 4 | +import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules'; |
| 5 | import { h } from 'vue'; | 5 | import { h } from 'vue'; |
| 6 | import SnHelpMessage from './SnHelpMessage.vue'; | 6 | import SnHelpMessage from './SnHelpMessage.vue'; |
| 7 | import SnHelpMessage1 from './SnHelpMessage1.vue'; | 7 | import SnHelpMessage1 from './SnHelpMessage1.vue'; |
| @@ -15,6 +15,7 @@ import { DataSourceField } from '../../visual/packages/config/common.config'; | @@ -15,6 +15,7 @@ import { DataSourceField } from '../../visual/packages/config/common.config'; | ||
| 15 | import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; | 15 | import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; |
| 16 | import { useMessage } from '/@/hooks/web/useMessage'; | 16 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 17 | import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const'; | 17 | import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const'; |
| 18 | +import { getDeviceChannelList } from '/@/api/camera/cameraManager'; | ||
| 18 | 19 | ||
| 19 | useComponentRegister('OrgTreeSelect', OrgTreeSelect); | 20 | useComponentRegister('OrgTreeSelect', OrgTreeSelect); |
| 20 | 21 | ||
| @@ -36,6 +37,12 @@ export enum CameraPermission { | @@ -36,6 +37,12 @@ export enum CameraPermission { | ||
| 36 | DELETE = 'api:yt:video:delete', | 37 | DELETE = 'api:yt:video:delete', |
| 37 | } | 38 | } |
| 38 | 39 | ||
| 40 | +// GBT28181设备选择全选或者部分 | ||
| 41 | +export enum GBT28181DeviceSelectMethod { | ||
| 42 | + ALL = 1, //全部 | ||
| 43 | + PARTIAL = 0, //部分 | ||
| 44 | +} | ||
| 45 | + | ||
| 39 | export enum AccessMode { | 46 | export enum AccessMode { |
| 40 | ManuallyEnter = 0, | 47 | ManuallyEnter = 0, |
| 41 | Streaming = 1, | 48 | Streaming = 1, |
| @@ -265,7 +272,7 @@ export const formSchema: QFormSchema[] = [ | @@ -265,7 +272,7 @@ export const formSchema: QFormSchema[] = [ | ||
| 265 | placeholder: '请选择设备', | 272 | placeholder: '请选择设备', |
| 266 | onChange() { | 273 | onChange() { |
| 267 | setFieldsValue({ | 274 | setFieldsValue({ |
| 268 | - channelNo: '', | 275 | + channelNo: [], |
| 269 | }); | 276 | }); |
| 270 | }, | 277 | }, |
| 271 | onFocus() { | 278 | onFocus() { |
| @@ -282,15 +289,30 @@ export const formSchema: QFormSchema[] = [ | @@ -282,15 +289,30 @@ export const formSchema: QFormSchema[] = [ | ||
| 282 | field: 'channelNo', | 289 | field: 'channelNo', |
| 283 | label: '通道号', | 290 | label: '通道号', |
| 284 | required: true, | 291 | required: true, |
| 285 | - component: 'Input', | 292 | + component: 'ApiSelect', |
| 286 | ifShow({ values }) { | 293 | ifShow({ values }) { |
| 287 | return values.accessMode === AccessMode.GBT28181; | 294 | return values.accessMode === AccessMode.GBT28181; |
| 288 | }, | 295 | }, |
| 289 | - componentProps: { | ||
| 290 | - maxLength: 20, | ||
| 291 | - placeholder: '请输入通道号', | 296 | + componentProps({ formModel }) { |
| 297 | + const deviceId = formModel[DataSourceField.DEVICE_ID]; | ||
| 298 | + return { | ||
| 299 | + api: async () => { | ||
| 300 | + if (deviceId) { | ||
| 301 | + try { | ||
| 302 | + const data = await getDeviceChannelList(deviceId); | ||
| 303 | + if (data) | ||
| 304 | + return data.map((item) => ({ | ||
| 305 | + ...item, | ||
| 306 | + label: item.name, | ||
| 307 | + value: item.channelId, | ||
| 308 | + })); | ||
| 309 | + } catch (error) {} | ||
| 310 | + } | ||
| 311 | + return []; | ||
| 312 | + }, | ||
| 313 | + placeholder: '请选择通道号', | ||
| 314 | + }; | ||
| 292 | }, | 315 | }, |
| 293 | - rules: [{ required: true, message: '通道号是必填项' }, ...CameraChannelNoRule], | ||
| 294 | }, | 316 | }, |
| 295 | { | 317 | { |
| 296 | field: 'brand', | 318 | field: 'brand', |
| @@ -537,10 +559,30 @@ export const formGBTSchema: QFormSchema[] = [ | @@ -537,10 +559,30 @@ export const formGBTSchema: QFormSchema[] = [ | ||
| 537 | ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181, | 559 | ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181, |
| 538 | }, | 560 | }, |
| 539 | { | 561 | { |
| 562 | + label: '设备选择方式', | ||
| 563 | + field: 'allDevice', | ||
| 564 | + component: 'RadioGroup', | ||
| 565 | + rules: [{ required: true, message: '设备选择方式为必选项', type: 'number' }], | ||
| 566 | + defaultValue: GBT28181DeviceSelectMethod.ALL, | ||
| 567 | + componentProps() { | ||
| 568 | + return { | ||
| 569 | + defaultValue: GBT28181DeviceSelectMethod.ALL, | ||
| 570 | + placeholder: '请选择设备选择方式', | ||
| 571 | + options: [ | ||
| 572 | + { label: '全部', value: GBT28181DeviceSelectMethod.ALL }, | ||
| 573 | + { label: '部分', value: GBT28181DeviceSelectMethod.PARTIAL }, | ||
| 574 | + ], | ||
| 575 | + }; | ||
| 576 | + }, | ||
| 577 | + ifShow: ({ values }) => !!values.organizationId, | ||
| 578 | + }, | ||
| 579 | + { | ||
| 540 | field: 'deviceChannels', | 580 | field: 'deviceChannels', |
| 541 | label: '设备和通道号', | 581 | label: '设备和通道号', |
| 542 | component: 'Input', | 582 | component: 'Input', |
| 543 | slot: 'deviceChannelsSlot', | 583 | slot: 'deviceChannelsSlot', |
| 544 | - ifShow: ({ values }) => values.accessMode === AccessMode.GBT28181, | 584 | + ifShow: ({ values }) => |
| 585 | + values.accessMode === AccessMode.GBT28181 && | ||
| 586 | + values.allDevice === GBT28181DeviceSelectMethod.PARTIAL, | ||
| 545 | }, | 587 | }, |
| 546 | ]; | 588 | ]; |
| @@ -88,7 +88,7 @@ export const descSchema = (emit: EmitType): DescItem[] => { | @@ -88,7 +88,7 @@ export const descSchema = (emit: EmitType): DescItem[] => { | ||
| 88 | label: '设备编号', | 88 | label: '设备编号', |
| 89 | }, | 89 | }, |
| 90 | { | 90 | { |
| 91 | - field: 'deviceInfo.sip.localIp', | 91 | + field: 'deviceInfo.sip.hostAddress', |
| 92 | label: '地址', | 92 | label: '地址', |
| 93 | }, | 93 | }, |
| 94 | { | 94 | { |