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 | 22 | VIDEO_CONTROL_STOP = '/video/control/stop/', |
| 23 | 23 | CAMERA_ADDGPT_API_URL = '/video/add/gbt28181', |
| 24 | 24 | VIDEO_CONTROL_SYNC = '/video/control/sync/', |
| 25 | + VIDEO_CHANNEL_LIST = '/video/channel/list', | |
| 25 | 26 | } |
| 26 | 27 | |
| 27 | 28 | export const cameraPage = (params: CameraQueryParam) => { |
| ... | ... | @@ -152,3 +153,10 @@ export const syncVideoApiGet = (deviceId: string) => { |
| 152 | 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 | 26 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 27 | 27 | import { getStreamingMediaList, createGPTPostApi } from '/@/api/camera/cameraManager'; |
| 28 | 28 | import SelectDevice from './SelectDevice.vue'; |
| 29 | - import { formGBTSchema, StreamInterface } from '../config.data'; | |
| 29 | + import { formGBTSchema, GBT28181DeviceSelectMethod, StreamInterface } from '../config.data'; | |
| 30 | 30 | import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; |
| 31 | 31 | import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const'; |
| 32 | + import { isArray } from '/@/utils/is'; | |
| 32 | 33 | |
| 33 | 34 | const emits = defineEmits(['success', 'register']); |
| 34 | 35 | |
| ... | ... | @@ -99,14 +100,20 @@ |
| 99 | 100 | return record; |
| 100 | 101 | }); |
| 101 | 102 | |
| 103 | + const errorMessage = (errorText) => { | |
| 104 | + createMessage.error(errorText); | |
| 105 | + throw Error(errorText); | |
| 106 | + }; | |
| 107 | + | |
| 102 | 108 | //验证视频通道号 |
| 103 | 109 | const validateChannelNos = (gptDeviceDTOS) => { |
| 110 | + if (isArray(gptDeviceDTOS) && gptDeviceDTOS.length == 0) { | |
| 111 | + errorMessage('请选择设备通道号'); | |
| 112 | + } | |
| 104 | 113 | gptDeviceDTOS.some((deviceDTO) => { |
| 105 | 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 | 123 | setDrawerProps({ confirmLoading: true }); |
| 117 | 124 | const values = await validate(); |
| 118 | 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 | 131 | const mergeValues = { |
| 124 | 132 | ...values, |
| 125 | 133 | accessMode: 2, | ... | ... |
| 1 | 1 | <template> |
| 2 | 2 | <div v-for="(param, index) in dynamicInput.params" :key="index" class="mt-4 flex gap-2"> |
| 3 | 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 | 15 | </div> |
| 6 | 16 | </template> |
| 7 | 17 | <script lang="ts"> |
| ... | ... | @@ -10,9 +20,14 @@ |
| 10 | 20 | }; |
| 11 | 21 | </script> |
| 12 | 22 | <script lang="ts" setup name="SelectAttributes"> |
| 13 | - import { reactive, UnwrapRef, watchEffect } from 'vue'; | |
| 23 | + import { reactive, UnwrapRef, watchEffect, ref } from 'vue'; | |
| 14 | 24 | import { propTypes } from '/@/utils/propTypes'; |
| 15 | 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 | 32 | const props = defineProps({ |
| 18 | 33 | value: propTypes.object.def({}), |
| ... | ... | @@ -22,10 +37,25 @@ |
| 22 | 37 | }, |
| 23 | 38 | }); |
| 24 | 39 | |
| 40 | + const selectOptions = ref<LabelValueOptions>([]); | |
| 41 | + | |
| 25 | 42 | //动态数据 |
| 26 | 43 | const dynamicInput: UnwrapRef<{ params: DeviceChannelInterface[] }> = reactive({ params: [] }); |
| 27 | 44 | |
| 28 | 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 | 59 | if (props.value) { |
| 30 | 60 | dynamicInput.params.push({ |
| 31 | 61 | deviceName: props.value.label, |
| ... | ... | @@ -42,9 +72,40 @@ |
| 42 | 72 | |
| 43 | 73 | valEffect(); |
| 44 | 74 | |
| 75 | + const selectValues = ref<string[]>([]); // 保存选择的值 | |
| 76 | + | |
| 77 | + const saveSelectValues = ref<Recordable>({}); | |
| 78 | + | |
| 45 | 79 | //chang改变 |
| 46 | 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 | 111 | defineExpose({ | ... | ... |
| ... | ... | @@ -8,11 +8,12 @@ |
| 8 | 8 | @change="handleDeviceChange" |
| 9 | 9 | :disabled="disabled" |
| 10 | 10 | mode="multiple" |
| 11 | + :max-tag-count="selectChannelMaxCount" | |
| 11 | 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 | 15 | <InputChannel |
| 15 | - :ref="bindDeviceRef.deviceAttrRef" | |
| 16 | + :ref="bindDeviceRef.deviceChannelRef" | |
| 16 | 17 | :value="item" |
| 17 | 18 | :index="index" |
| 18 | 19 | :disabled="disabled" |
| ... | ... | @@ -25,6 +26,7 @@ |
| 25 | 26 | import { createPickerSearch } from '/@/utils/pickerSearch'; |
| 26 | 27 | import { StreamInterface } from '../config.data'; |
| 27 | 28 | import InputChannel from './InputChannel.vue'; |
| 29 | + import { useMessage } from '/@/hooks/web/useMessage'; | |
| 28 | 30 | |
| 29 | 31 | defineProps({ |
| 30 | 32 | selectOptions: { |
| ... | ... | @@ -37,19 +39,25 @@ |
| 37 | 39 | }, |
| 38 | 40 | }); |
| 39 | 41 | |
| 42 | + const { createMessage } = useMessage(); | |
| 43 | + | |
| 40 | 44 | const selectValue = ref([]); |
| 41 | 45 | |
| 42 | 46 | const bindDeviceRef = { |
| 43 | - deviceAttrRef: ref([]), | |
| 47 | + deviceChannelRef: ref([]), | |
| 44 | 48 | }; |
| 45 | 49 | |
| 46 | 50 | const deviceList: Ref<StreamInterface[]> = ref([]); |
| 47 | 51 | |
| 52 | + const selectChannelMaxCount = ref(50); // 限制通道数为50 | |
| 53 | + | |
| 48 | 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 | 58 | const handleDeviceChange = (_, options) => { |
| 59 | + if (options.length > selectChannelMaxCount.value) | |
| 60 | + return createMessage.warn('通道数需要小于50个'); | |
| 53 | 61 | deviceList.value = options; |
| 54 | 62 | }; |
| 55 | 63 | ... | ... |
| 1 | 1 | import { BasicColumn, FormSchema } from '/@/components/Table'; |
| 2 | 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 | 5 | import { h } from 'vue'; |
| 6 | 6 | import SnHelpMessage from './SnHelpMessage.vue'; |
| 7 | 7 | import SnHelpMessage1 from './SnHelpMessage1.vue'; |
| ... | ... | @@ -15,6 +15,7 @@ import { DataSourceField } from '../../visual/packages/config/common.config'; |
| 15 | 15 | import { getMeetTheConditionsDevice } from '/@/api/dataBoard'; |
| 16 | 16 | import { useMessage } from '/@/hooks/web/useMessage'; |
| 17 | 17 | import { TransportTypeEnum } from '../../device/profiles/components/TransportDescript/const'; |
| 18 | +import { getDeviceChannelList } from '/@/api/camera/cameraManager'; | |
| 18 | 19 | |
| 19 | 20 | useComponentRegister('OrgTreeSelect', OrgTreeSelect); |
| 20 | 21 | |
| ... | ... | @@ -36,6 +37,12 @@ export enum CameraPermission { |
| 36 | 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 | 46 | export enum AccessMode { |
| 40 | 47 | ManuallyEnter = 0, |
| 41 | 48 | Streaming = 1, |
| ... | ... | @@ -265,7 +272,7 @@ export const formSchema: QFormSchema[] = [ |
| 265 | 272 | placeholder: '请选择设备', |
| 266 | 273 | onChange() { |
| 267 | 274 | setFieldsValue({ |
| 268 | - channelNo: '', | |
| 275 | + channelNo: [], | |
| 269 | 276 | }); |
| 270 | 277 | }, |
| 271 | 278 | onFocus() { |
| ... | ... | @@ -282,15 +289,30 @@ export const formSchema: QFormSchema[] = [ |
| 282 | 289 | field: 'channelNo', |
| 283 | 290 | label: '通道号', |
| 284 | 291 | required: true, |
| 285 | - component: 'Input', | |
| 292 | + component: 'ApiSelect', | |
| 286 | 293 | ifShow({ values }) { |
| 287 | 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 | 318 | field: 'brand', |
| ... | ... | @@ -537,10 +559,30 @@ export const formGBTSchema: QFormSchema[] = [ |
| 537 | 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 | 580 | field: 'deviceChannels', |
| 541 | 581 | label: '设备和通道号', |
| 542 | 582 | component: 'Input', |
| 543 | 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 | ]; | ... | ... |