perf: 流媒体配置新增萤石平台

张峰林 · xp.Huang
1 parent 0fc2341a
Showing 7 changed files with 117 additions and 16 deletions
src/assets/images/sn-step4.png
src/enums/dictEnum.ts
src/views/camera/manage/CameraDrawer.vue
src/views/camera/manage/SnHelpMessage1.vue
src/views/camera/manage/config.data.ts
src/views/camera/streaming/config.data.ts
src/views/visual/board/components/PanelDetailModal.vue
--- a/src/assets/images/sn-step4.png 0 → 100644
View file @6a97b1d
+++ b/src/assets/images/sn-step4.png 0 → 100644
View file @6a97b1d
--- a/src/enums/dictEnum.ts
View file @6a97b1d
+++ b/src/enums/dictEnum.ts
View file @6a97b1d
@@ -24,6 +24,9 @@ export enum DictEnum {
   // 实体类型 规则节点 Filter originator types switch
   ORIGINATOR_TYPES = 'originator_types',
+  // 流媒体平台
+  STREAMING_MEDIA_TYPE = 'streaming_media_type',
+
   // 产品品类领域
   CATEGORY_FIELD = 'category_field',
 }
--- a/src/views/camera/manage/CameraDrawer.vue
View file @6a97b1d
+++ b/src/views/camera/manage/CameraDrawer.vue
View file @6a97b1d
@@ -12,7 +12,16 @@
         <a-select
           placeholder="请选择流媒体配置"
           v-model:value="model[field]"
-          :options="streamConfigOptions.map((item) => ({ value: item.value, label: item.label }))"
+          :options="
+            streamConfigOptions
+              .filter((item) => item.type === model.videoType)
+              .map((item) => ({
+                value: item.value,
+                label: item.label,
+                type: item.type,
+              }))
+          "
+          @change="handleChange"
         >
           <template #dropdownRender="{ menuNode: menu }">
             <v-nodes :vnodes="menu" />
@@ -70,6 +79,7 @@
           return {
             label: m.host,
             value: m.id,
+            type: m.type,
           };
         });
       });
@@ -103,7 +113,7 @@
             });
           }
           const { ...params } = data.record;
-          await setFieldsValue({ ...params });
+          await setFieldsValue({ ...params, videoType: params.videoPlatformDTO?.type });
         } else {
           editId.value = '';
         }
@@ -139,6 +149,11 @@
         }
       }
+      const handleChange = (e, options) => {
+        //流媒体配置
+        setFieldsValue({ videoType: e ? options.type : null });
+      };
+
       return {
         getTitle,
         registerDrawer,
@@ -149,6 +164,7 @@
         registerSteramingDrawer,
         handleOpenStreamConfig,
         handleSuccess,
+        handleChange,
       };
     },
   });
--- a/src/views/camera/manage/SnHelpMessage1.vue 0 → 100644
View file @6a97b1d
+++ b/src/views/camera/manage/SnHelpMessage1.vue 0 → 100644
View file @6a97b1d
+<script lang="ts" setup>
+  import { BasicHelp } from '/@/components/Basic';
+  import { createImgPreview } from '/@/components/Preview/index';
+  import snStep4 from '/@/assets/images/sn-step4.png';
+  const imgList: string[] = [snStep4];
+  function handlePreview() {
+    createImgPreview({ imageList: imgList, defaultWidth: 1000 });
+  }
+</script>
+
+<template>
+  <div>监控点编号</div>
+  <BasicHelp
+    placement="top"
+    @click="handlePreview"
+    class="mx-1"
+    text='点击查看如何获取"监控点编号"'
+  />
+</template>
--- a/src/views/camera/manage/config.data.ts
View file @6a97b1d
+++ b/src/views/camera/manage/config.data.ts
View file @6a97b1d
@@ -4,10 +4,13 @@ import { FormSchema as QFormSchema, useComponentRegister } from '/@/components/F
 import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
+import SnHelpMessage1 from './SnHelpMessage1.vue';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
 import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
 import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { DictEnum } from '/@/enums/dictEnum';
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
@@ -100,6 +103,11 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
+const videTypeNum = {
+  SCI: 0,
+  FLUORITE: 1,
+};
+
 // 弹框配置项
 export const formSchema: QFormSchema[] = [
   {
@@ -215,7 +223,25 @@ export const formSchema: QFormSchema[] = [
     },
     rules: [{ required: true, message: '视频流是必填项' }, ...CameraVideoUrl],
   },
-
+  {
+    field: 'videoType',
+    label: '流媒体平台',
+    component: 'ApiRadioGroup',
+    required: true,
+    defaultValue: videTypeNum.SCI,
+    ifShow: ({ values }) => values.accessMode === AccessMode.Streaming,
+    componentProps: {
+      api: async (params) => {
+        const values = await findDictItemByCode(params);
+        return values.map((item) => ({ label: item.itemText, value: Number(item.itemValue) }));
+      },
+      params: {
+        dictCode: DictEnum.STREAMING_MEDIA_TYPE,
+      },
+      getPopupContainer: () => document.body,
+      placeholder: `请选择平台类型`,
+    },
+  },
   {
     field: 'videoPlatformId',
     label: '流媒体配置',
@@ -234,7 +260,9 @@ export const formSchema: QFormSchema[] = [
     component: 'RadioGroup',
     defaultValue: StreamType.MASTER,
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming && values.videoType !== videTypeNum.FLUORITE
+      );
     },
     componentProps: {
       placeholder: '请选择码流',
@@ -252,7 +280,9 @@ export const formSchema: QFormSchema[] = [
     component: 'RadioGroup',
     defaultValue: PlayProtocol.HTTP,
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming && values.videoType !== videTypeNum.FLUORITE
+      );
     },
     helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
     componentProps: {
@@ -270,7 +300,23 @@ export const formSchema: QFormSchema[] = [
     component: 'Input',
     rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
     ifShow({ values }) {
-      return values.accessMode === AccessMode.Streaming;
+      return (
+        values.accessMode === AccessMode.Streaming && values.videoType !== videTypeNum.FLUORITE
+      );
+    },
+    componentProps: {
+      placeholder: '请输入监控点编号',
+    },
+  },
+  {
+    field: 'sn',
+    label: h(SnHelpMessage1) as any,
+    component: 'Input',
+    rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    ifShow({ values }) {
+      return (
+        values.accessMode === AccessMode.Streaming && values.videoType === videTypeNum.FLUORITE
+      );
     },
     componentProps: {
       placeholder: '请输入监控点编号',
--- a/src/views/camera/streaming/config.data.ts
View file @6a97b1d
+++ b/src/views/camera/streaming/config.data.ts
View file @6a97b1d
 import { PlayProtocol } from '../manage/config.data';
 import type { StreamingMediaModel } from '/@/api/camera/model/cameraModel';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { DictEnum } from '/@/enums/dictEnum';
 import { BasicColumn, FormSchema } from '/@/components/Table';
 export interface DrawerParams {
@@ -9,6 +11,7 @@ export interface DrawerParams {
 export const streamingMediaTypeMapping = {
   0: '海康ISC平台',
+  1: '萤石平台',
 };
 export const streamingMediaSSLMapping = {
@@ -37,6 +40,9 @@ export const columnSchema: BasicColumn[] = [
     title: '用户Key',
     dataIndex: 'appKey',
     width: 80,
+    format(text) {
+      return formatSecret(text);
+    },
   },
   {
     title: '用户密钥',
@@ -69,21 +75,34 @@ export const formSchema: FormSchema[] = [
   },
 ];
+const videTypeNum = {
+  ISC: 0,
+  Fluorite: 1,
+};
+
 export const formDetailSchema: FormSchema[] = [
   {
     label: '平台类型',
     field: 'type',
-    component: 'Select',
-    rules: [{ required: true, message: '平台类型为必填项', type: 'number' }],
+    component: 'ApiSelect',
+    required: true,
     componentProps: {
-      options: [{ label: '海康ISC平台', value: 0 }],
-      placeholder: '请输入选择平台类型',
+      api: async (params) => {
+        const values = await findDictItemByCode(params);
+        return values.map((item) => ({ label: item.itemText, value: Number(item.itemValue) }));
+      },
+      params: {
+        dictCode: DictEnum.STREAMING_MEDIA_TYPE,
+      },
+      getPopupContainer: () => document.body,
+      placeholder: `请选择平台类型`,
     },
   },
   {
     label: '部署环境',
     field: 'ssl',
     component: 'RadioGroup',
+    ifShow: ({ model }) => model.type !== videTypeNum.Fluorite,
     rules: [{ required: true, message: '流媒体部署环境为必填项', type: 'number' }],
     defaultValue: PlayProtocol.HTTP,
     componentProps: {
@@ -108,7 +127,7 @@ export const formDetailSchema: FormSchema[] = [
   {
     label: '用户Key',
     field: 'appKey',
-    component: 'Input',
+    component: 'InputPassword',
     rules: [{ required: true, message: '用户Key为必填项' }],
     componentProps: {
       maxLength: 36,
@@ -118,7 +137,7 @@ export const formDetailSchema: FormSchema[] = [
   {
     label: '用户密钥',
     field: 'appSecret',
-    component: 'Input',
+    component: 'InputPassword',
     rules: [
       { required: true, message: '用户密钥为必填项' },
       { required: true, min: 20, message: '用户密钥不能少于20位字符' },
--- a/src/views/visual/board/components/PanelDetailModal.vue
View file @6a97b1d
+++ b/src/views/visual/board/components/PanelDetailModal.vue
View file @6a97b1d
 <script lang="ts" setup>
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema, PlatformType } from '../config/panelDetail';
+  import { formSchema } from '../config/panelDetail';
   import { addDataBoard, updateDataBoard } from '/@/api/dataBoard';
   import { AddDataBoardParams } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -34,9 +34,7 @@
     if (!Reflect.get(value, 'accessCredentials')) {
       Reflect.deleteProperty(value, 'accessCredentials');
     }
-    if (value.platform === PlatformType.PC) {
-      Reflect.deleteProperty(value, 'phoneModel');
-    }
+
     return value as any;
   };