Commit 6a97b1d3630ce58dc18c03d1b0d82639e7c111e9
Committed by
xp.Huang
1 parent
0fc2341a
perf: 流媒体配置新增萤石平台
Showing
7 changed files
with
117 additions
and
16 deletions
src/assets/images/sn-step4.png
0 → 100644
197 KB
| ... | ... | @@ -12,7 +12,16 @@ |
| 12 | 12 | <a-select |
| 13 | 13 | placeholder="请选择流媒体配置" |
| 14 | 14 | v-model:value="model[field]" |
| 15 | - :options="streamConfigOptions.map((item) => ({ value: item.value, label: item.label }))" | |
| 15 | + :options=" | |
| 16 | + streamConfigOptions | |
| 17 | + .filter((item) => item.type === model.videoType) | |
| 18 | + .map((item) => ({ | |
| 19 | + value: item.value, | |
| 20 | + label: item.label, | |
| 21 | + type: item.type, | |
| 22 | + })) | |
| 23 | + " | |
| 24 | + @change="handleChange" | |
| 16 | 25 | > |
| 17 | 26 | <template #dropdownRender="{ menuNode: menu }"> |
| 18 | 27 | <v-nodes :vnodes="menu" /> |
| ... | ... | @@ -70,6 +79,7 @@ |
| 70 | 79 | return { |
| 71 | 80 | label: m.host, |
| 72 | 81 | value: m.id, |
| 82 | + type: m.type, | |
| 73 | 83 | }; |
| 74 | 84 | }); |
| 75 | 85 | }); |
| ... | ... | @@ -103,7 +113,7 @@ |
| 103 | 113 | }); |
| 104 | 114 | } |
| 105 | 115 | const { ...params } = data.record; |
| 106 | - await setFieldsValue({ ...params }); | |
| 116 | + await setFieldsValue({ ...params, videoType: params.videoPlatformDTO?.type }); | |
| 107 | 117 | } else { |
| 108 | 118 | editId.value = ''; |
| 109 | 119 | } |
| ... | ... | @@ -139,6 +149,11 @@ |
| 139 | 149 | } |
| 140 | 150 | } |
| 141 | 151 | |
| 152 | + const handleChange = (e, options) => { | |
| 153 | + //流媒体配置 | |
| 154 | + setFieldsValue({ videoType: e ? options.type : null }); | |
| 155 | + }; | |
| 156 | + | |
| 142 | 157 | return { |
| 143 | 158 | getTitle, |
| 144 | 159 | registerDrawer, |
| ... | ... | @@ -149,6 +164,7 @@ |
| 149 | 164 | registerSteramingDrawer, |
| 150 | 165 | handleOpenStreamConfig, |
| 151 | 166 | handleSuccess, |
| 167 | + handleChange, | |
| 152 | 168 | }; |
| 153 | 169 | }, |
| 154 | 170 | }); | ... | ... |
src/views/camera/manage/SnHelpMessage1.vue
0 → 100644
| 1 | +<script lang="ts" setup> | |
| 2 | + import { BasicHelp } from '/@/components/Basic'; | |
| 3 | + import { createImgPreview } from '/@/components/Preview/index'; | |
| 4 | + import snStep4 from '/@/assets/images/sn-step4.png'; | |
| 5 | + const imgList: string[] = [snStep4]; | |
| 6 | + function handlePreview() { | |
| 7 | + createImgPreview({ imageList: imgList, defaultWidth: 1000 }); | |
| 8 | + } | |
| 9 | +</script> | |
| 10 | + | |
| 11 | +<template> | |
| 12 | + <div>监控点编号</div> | |
| 13 | + <BasicHelp | |
| 14 | + placement="top" | |
| 15 | + @click="handlePreview" | |
| 16 | + class="mx-1" | |
| 17 | + text='点击查看如何获取"监控点编号"' | |
| 18 | + /> | |
| 19 | +</template> | ... | ... |
| ... | ... | @@ -4,10 +4,13 @@ import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/F |
| 4 | 4 | import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules'; |
| 5 | 5 | import { h } from 'vue'; |
| 6 | 6 | import SnHelpMessage from './SnHelpMessage.vue'; |
| 7 | +import SnHelpMessage1 from './SnHelpMessage1.vue'; | |
| 7 | 8 | import { OrgTreeSelect } from '../../common/OrgTreeSelect'; |
| 8 | 9 | import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue'; |
| 9 | 10 | import { createImgPreview } from '/@/components/Preview'; |
| 10 | 11 | import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter'; |
| 12 | +import { findDictItemByCode } from '/@/api/system/dict'; | |
| 13 | +import { DictEnum } from '/@/enums/dictEnum'; | |
| 11 | 14 | |
| 12 | 15 | useComponentRegister('OrgTreeSelect', OrgTreeSelect); |
| 13 | 16 | |
| ... | ... | @@ -100,6 +103,11 @@ export const searchFormSchema: FormSchema[] = [ |
| 100 | 103 | }, |
| 101 | 104 | ]; |
| 102 | 105 | |
| 106 | +const videTypeNum = { | |
| 107 | + SCI: 0, | |
| 108 | + FLUORITE: 1, | |
| 109 | +}; | |
| 110 | + | |
| 103 | 111 | // 弹框配置项 |
| 104 | 112 | export const formSchema: QFormSchema[] = [ |
| 105 | 113 | { |
| ... | ... | @@ -215,7 +223,25 @@ export const formSchema: QFormSchema[] = [ |
| 215 | 223 | }, |
| 216 | 224 | rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl], |
| 217 | 225 | }, |
| 218 | - | |
| 226 | + { | |
| 227 | + field: 'videoType', | |
| 228 | + label: '流媒体平台', | |
| 229 | + component: 'ApiRadioGroup', | |
| 230 | + required: true, | |
| 231 | + defaultValue: videTypeNum.SCI, | |
| 232 | + ifShow: ({ values }) => values.accessMode === AccessMode.Streaming, | |
| 233 | + componentProps: { | |
| 234 | + api: async (params) => { | |
| 235 | + const values = await findDictItemByCode(params); | |
| 236 | + return values.map((item) => ({ label: item.itemText, value: Number(item.itemValue) })); | |
| 237 | + }, | |
| 238 | + params: { | |
| 239 | + dictCode: DictEnum.STREAMING_MEDIA_TYPE, | |
| 240 | + }, | |
| 241 | + getPopupContainer: () => document.body, | |
| 242 | + placeholder: `请选择平台类型`, | |
| 243 | + }, | |
| 244 | + }, | |
| 219 | 245 | { |
| 220 | 246 | field: 'videoPlatformId', |
| 221 | 247 | label: '流媒体配置', |
| ... | ... | @@ -234,7 +260,9 @@ export const formSchema: QFormSchema[] = [ |
| 234 | 260 | component: 'RadioGroup', |
| 235 | 261 | defaultValue: StreamType.MASTER, |
| 236 | 262 | ifShow({ values }) { |
| 237 | - return values.accessMode === AccessMode.Streaming; | |
| 263 | + return ( | |
| 264 | + values.accessMode === AccessMode.Streaming && values.videoType !== videTypeNum.FLUORITE | |
| 265 | + ); | |
| 238 | 266 | }, |
| 239 | 267 | componentProps: { |
| 240 | 268 | placeholder: '请选择码流', |
| ... | ... | @@ -252,7 +280,9 @@ export const formSchema: QFormSchema[] = [ |
| 252 | 280 | component: 'RadioGroup', |
| 253 | 281 | defaultValue: PlayProtocol.HTTP, |
| 254 | 282 | ifShow({ values }) { |
| 255 | - return values.accessMode === AccessMode.Streaming; | |
| 283 | + return ( | |
| 284 | + values.accessMode === AccessMode.Streaming && values.videoType !== videTypeNum.FLUORITE | |
| 285 | + ); | |
| 256 | 286 | }, |
| 257 | 287 | helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'], |
| 258 | 288 | componentProps: { |
| ... | ... | @@ -270,7 +300,23 @@ export const formSchema: QFormSchema[] = [ |
| 270 | 300 | component: 'Input', |
| 271 | 301 | rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }], |
| 272 | 302 | ifShow({ values }) { |
| 273 | - return values.accessMode === AccessMode.Streaming; | |
| 303 | + return ( | |
| 304 | + values.accessMode === AccessMode.Streaming && values.videoType !== videTypeNum.FLUORITE | |
| 305 | + ); | |
| 306 | + }, | |
| 307 | + componentProps: { | |
| 308 | + placeholder: '请输入监控点编号', | |
| 309 | + }, | |
| 310 | + }, | |
| 311 | + { | |
| 312 | + field: 'sn', | |
| 313 | + label: h(SnHelpMessage1) as any, | |
| 314 | + component: 'Input', | |
| 315 | + rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }], | |
| 316 | + ifShow({ values }) { | |
| 317 | + return ( | |
| 318 | + values.accessMode === AccessMode.Streaming && values.videoType === videTypeNum.FLUORITE | |
| 319 | + ); | |
| 274 | 320 | }, |
| 275 | 321 | componentProps: { |
| 276 | 322 | placeholder: '请输入监控点编号', | ... | ... |
| 1 | 1 | import { PlayProtocol } from '../manage/config.data'; |
| 2 | 2 | import type { StreamingMediaModel } from '/@/api/camera/model/cameraModel'; |
| 3 | +import { findDictItemByCode } from '/@/api/system/dict'; | |
| 4 | +import { DictEnum } from '/@/enums/dictEnum'; | |
| 3 | 5 | import { BasicColumn, FormSchema } from '/@/components/Table'; |
| 4 | 6 | |
| 5 | 7 | export interface DrawerParams { |
| ... | ... | @@ -9,6 +11,7 @@ export interface DrawerParams { |
| 9 | 11 | |
| 10 | 12 | export const streamingMediaTypeMapping = { |
| 11 | 13 | 0: '海康ISC平台', |
| 14 | + 1: '萤石平台', | |
| 12 | 15 | }; |
| 13 | 16 | |
| 14 | 17 | export const streamingMediaSSLMapping = { |
| ... | ... | @@ -37,6 +40,9 @@ export const columnSchema: BasicColumn[] = [ |
| 37 | 40 | title: '用户Key', |
| 38 | 41 | dataIndex: 'appKey', |
| 39 | 42 | width: 80, |
| 43 | + format(text) { | |
| 44 | + return formatSecret(text); | |
| 45 | + }, | |
| 40 | 46 | }, |
| 41 | 47 | { |
| 42 | 48 | title: '用户密钥', |
| ... | ... | @@ -69,21 +75,34 @@ export const formSchema: FormSchema[] = [ |
| 69 | 75 | }, |
| 70 | 76 | ]; |
| 71 | 77 | |
| 78 | +const videTypeNum = { | |
| 79 | + ISC: 0, | |
| 80 | + Fluorite: 1, | |
| 81 | +}; | |
| 82 | + | |
| 72 | 83 | export const formDetailSchema: FormSchema[] = [ |
| 73 | 84 | { |
| 74 | 85 | label: '平台类型', |
| 75 | 86 | field: 'type', |
| 76 | - component: 'Select', | |
| 77 | - rules: [{ required: true, message: '平台类型为必填项', type: 'number' }], | |
| 87 | + component: 'ApiSelect', | |
| 88 | + required: true, | |
| 78 | 89 | componentProps: { |
| 79 | - options: [{ label: '海康ISC平台', value: 0 }], | |
| 80 | - placeholder: '请输入选择平台类型', | |
| 90 | + api: async (params) => { | |
| 91 | + const values = await findDictItemByCode(params); | |
| 92 | + return values.map((item) => ({ label: item.itemText, value: Number(item.itemValue) })); | |
| 93 | + }, | |
| 94 | + params: { | |
| 95 | + dictCode: DictEnum.STREAMING_MEDIA_TYPE, | |
| 96 | + }, | |
| 97 | + getPopupContainer: () => document.body, | |
| 98 | + placeholder: `请选择平台类型`, | |
| 81 | 99 | }, |
| 82 | 100 | }, |
| 83 | 101 | { |
| 84 | 102 | label: '部署环境', |
| 85 | 103 | field: 'ssl', |
| 86 | 104 | component: 'RadioGroup', |
| 105 | + ifShow: ({ model }) => model.type !== videTypeNum.Fluorite, | |
| 87 | 106 | rules: [{ required: true, message: '流媒体部署环境为必填项', type: 'number' }], |
| 88 | 107 | defaultValue: PlayProtocol.HTTP, |
| 89 | 108 | componentProps: { |
| ... | ... | @@ -108,7 +127,7 @@ export const formDetailSchema: FormSchema[] = [ |
| 108 | 127 | { |
| 109 | 128 | label: '用户Key', |
| 110 | 129 | field: 'appKey', |
| 111 | - component: 'Input', | |
| 130 | + component: 'InputPassword', | |
| 112 | 131 | rules: [{ required: true, message: '用户Key为必填项' }], |
| 113 | 132 | componentProps: { |
| 114 | 133 | maxLength: 36, |
| ... | ... | @@ -118,7 +137,7 @@ export const formDetailSchema: FormSchema[] = [ |
| 118 | 137 | { |
| 119 | 138 | label: '用户密钥', |
| 120 | 139 | field: 'appSecret', |
| 121 | - component: 'Input', | |
| 140 | + component: 'InputPassword', | |
| 122 | 141 | rules: [ |
| 123 | 142 | { required: true, message: '用户密钥为必填项' }, |
| 124 | 143 | { required: true, min: 20, message: '用户密钥不能少于20位字符' }, | ... | ... |
| 1 | 1 | <script lang="ts" setup> |
| 2 | 2 | import { BasicModal, useModalInner } from '/@/components/Modal'; |
| 3 | 3 | import { BasicForm, useForm } from '/@/components/Form'; |
| 4 | - import { formSchema, PlatformType } from '../config/panelDetail'; | |
| 4 | + import { formSchema } from '../config/panelDetail'; | |
| 5 | 5 | import { addDataBoard, updateDataBoard } from '/@/api/dataBoard'; |
| 6 | 6 | import { AddDataBoardParams } from '/@/api/dataBoard/model'; |
| 7 | 7 | import { useMessage } from '/@/hooks/web/useMessage'; |
| ... | ... | @@ -34,9 +34,7 @@ |
| 34 | 34 | if (!Reflect.get(value, 'accessCredentials')) { |
| 35 | 35 | Reflect.deleteProperty(value, 'accessCredentials'); |
| 36 | 36 | } |
| 37 | - if (value.platform === PlatformType.PC) { | |
| 38 | - Reflect.deleteProperty(value, 'phoneModel'); | |
| 39 | - } | |
| 37 | + | |
| 40 | 38 | return value as any; |
| 41 | 39 | }; |
| 42 | 40 | ... | ... |