feat: 旧视频平台编辑弹窗增加自动获取视频链接的功能

src/pages/platformCenter/videoManager/AddModal.jsx

 /* eslint-disable default-case */
-import React, { useEffect, useState } from 'react';
-import { Form, Modal, Row, Col, Input, Select, notification } from 'antd';
-import { addInsertVideoConfig, editInsertVideoConfig } from '@/services/videoManger/videoManger';
+import React, {useEffect, useState} from 'react';
+import {Form, Modal, Row, Col, Input, Select, notification, Button, message, Tooltip} from 'antd';
+import {addInsertVideoConfig, editInsertVideoConfig} from '@/services/videoManger/videoManger';
 import CryptoJS from 'crypto-js';
+import {getYSYVideoSource} from "../../../services/videoManger/videoManger";
 
 const AddModal = props => {
-  const { callBackSubmit = () => {}, visible, onCancel, type, type1, kind, obj } = props;
+  const {
+    callBackSubmit = () => {
+    }, visible, onCancel, type, type1, kind, obj
+  } = props;
 
   const [form] = Form.useForm();
-  const { Item } = Form;
-  const { TextArea } = Input;
+  const {Item} = Form;
+  const {TextArea} = Input;
 
   const [selectChange, setSelectChange] = useState('轻应用');
   const [selectChange1, setSelectChange1] = useState('否');
   const [selectChange2, setSelectChange2] = useState('主码流');
   const [load, setLoad] = useState(false); // 提交加载
+  const [btnLoading, setBtnLoading] = useState(false);
 
   const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); // 十六位十六进制数作为密钥
   const iv = CryptoJS.enc.Utf8.parse('1234567890000000');
@@ -56,12 +61,11 @@ const AddModal = props => {
   };
 
   useEffect(() => {
-    console.log(obj.LoginPwd);
     setLoad(false);
     if (kind === 'add') {
       form.resetFields();
     } else {
-      form.setFieldsValue({ ...obj, LoginPwd: obj.LoginPwd ? Decrypt(obj.LoginPwd) : '' });
+      form.setFieldsValue({...obj, LoginPwd: obj.LoginPwd ? Decrypt(obj.LoginPwd) : ''});
     }
   }, [visible]);
   const onSubmit = () => {
@@ -69,7 +73,6 @@ const AddModal = props => {
       if (validate) {
         setLoad(true);
         let getValue = form.getFieldsValue();
-        console.log(getValue);
         if (getValue.PlayModel === undefined) {
           getValue.PlayModel = '轻应用';
         }
@@ -81,7 +84,7 @@ const AddModal = props => {
         }
         getValue.VideoManufacturer = type;
         if (kind === 'add') {
-          addInsertVideoConfig({ ...getValue, LoginPwd: Encrypt(getValue.LoginPwd) }).then(res => {
+          addInsertVideoConfig({...getValue, LoginPwd: Encrypt(getValue.LoginPwd)}).then(res => {
             if (res.msg === 'Ok') {
               onCancel();
               setLoad(false);
@@ -131,16 +134,58 @@ const AddModal = props => {
       }
     });
   };
-
+  const returnVideoListArr = (str, serialNum, numStr) => {
+    let _arr = numStr.split(',');
+    return _arr.map((item, index) => {
+      return str.replace(new RegExp(`\/${serialNum}_\\d_\\d\\.((flv)|(m3u8))`), (match) => {
+        return match.replace(/_\d_/, `_${item}_`);
+      })
+    })
+  }
+  const getVideoUrl = () => {
+    let _values = form.getFieldsValue();
+    const {EquipmentNumber, LoginName, LoginPwd, PassageId} = _values;
+    const msg = ['设备序列号', '登录名(AppKey)', '登录密码(AppSecret)', '通道号'];
+    const arr = [];
+    [EquipmentNumber, LoginName, LoginPwd, PassageId].forEach((item, index) => {
+      if (!item) arr.push(msg[index]);
+    });
+    if (arr.length) return message.warning(`${arr.join('，')}必填！`)
+    let _NO = _values?.PassageId?.split(',')?.[0];
+    setBtnLoading(true);
+    getYSYVideoSource({
+      deviceSerial: _values.EquipmentNumber, // 设备序列号
+      appKey: _values.LoginName,
+      appSecret: _values.LoginPwd,
+      channelNo: _NO,
+      protocol: '2,4' // 2是hls，直播流；4是flv，是轻应用
+    }).then(res => {
+      if (!res?.getMe?.length) return message.warning('无法获取视频链接，请前往萤石云确认设备是否在线、配置是否正确有效！')
+      let flvStr = '';
+      let hlsStr = '';
+      res.getMe.forEach((item) => {
+        if (item.protocol === 2) hlsStr = item?.liveAddress?.[0];
+        if (item.protocol === 4) flvStr = item?.liveAddress?.[0];
+      });
+      let _flv = returnVideoListArr(flvStr, EquipmentNumber, PassageId);
+      let _hls = returnVideoListArr(hlsStr, EquipmentNumber, PassageId);
+      form.setFieldsValue({...obj, 'VideoPath': _flv.join(','), 'HLSPath': _hls.join(',')});
+    }).catch(err => {
+      if (err.message.includes('Request failed with status code 404')) return message.warning('当前平台无法自动获取萤石云视频，如有需要，请联系管理员！');
+      message.warning('萤石云网络波动，获取失败。请重试或前往萤石云平台手动获取！')
+    }).finally(() => {
+      setBtnLoading(false);
+    })
+  };
   if (type1 == 'aa') {
     return (
       <Modal
         visible={visible}
         title={
           kind === 'add' ? (
-            <span style={{ fontSize: '18px' }}>新增配置</span>
+            <span style={{fontSize: '18px'}}>新增配置</span>
           ) : (
-            <span style={{ fontSize: '18px' }}>编辑配置</span>
+            <span style={{fontSize: '18px'}}>编辑配置</span>
           )
         }
         width="1000px"
@@ -149,12 +194,13 @@ const AddModal = props => {
         onCancel={onCancel}
         confirmLoading={load}
         onOk={onSubmit}
+        footer={null}
       >
-        <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
+        <p style={{fontSize: '16px', marginLeft: '16px'}}>基本信息</p>
         <Form
           form={form}
-          labelCol={{ span: 7 }}
-          style={{ height: '25rem', overflowY: 'scroll' }}
+          labelCol={{span: 7}}
+          style={{height: '25rem', overflowY: 'scroll'}}
           autocomplete="off"
         >
           <Row>
@@ -169,7 +215,7 @@ const AddModal = props => {
                   },
                 ]}
               >
-                <Input placeholder="请输入名称" maxlength="20px" />
+                <Input placeholder="请输入名称" maxlength="20px"/>
               </Item>
             </Col>
             {(() => {
@@ -190,7 +236,7 @@ const AddModal = props => {
                           *
                         </span>
                         <Item label="视频厂商" name="VideoManufacturer">
-                          <Input placeholder="海康1.2" disabled />
+                          <Input placeholder="海康1.2" disabled/>
                         </Item>
                       </Col>
                     </>
@@ -211,7 +257,7 @@ const AddModal = props => {
                           *
                         </span>
                         <Item label="视频厂商" name="VideoManufacturer">
-                          <Input placeholder="海康NVR" disabled />
+                          <Input placeholder="海康NVR" disabled/>
                         </Item>
                       </Col>
                     </>
@@ -229,7 +275,7 @@ const AddModal = props => {
                   },
                 ]}
               >
-                <Input placeholder="设备台账对应设备编码字段" />
+                <Input placeholder="设备台账对应设备编码字段"/>
               </Item>
             </Col>
             <Col span={12}>
@@ -243,11 +289,11 @@ const AddModal = props => {
                   },
                 ]}
               >
-                <TextArea placeholder="视频监控点ID，请用英文逗好分隔" />
+                <TextArea placeholder="视频监控点ID，请用英文逗好分隔"/>
               </Item>
             </Col>
             <Col span={24}>
-              <p style={{ fontSize: '16px', marginLeft: '16px' }}>{type}</p>
+              <p style={{fontSize: '16px', marginLeft: '16px'}}>{type}</p>
             </Col>
             {(() => {
               switch (type) {
@@ -265,7 +311,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <Input placeholder="视频设备序列号" />
+                          <Input placeholder="视频设备序列号"/>
                         </Item>
                       </Col>
                     </>
@@ -284,7 +330,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <TextArea placeholder="视频流地址" />
+                          <TextArea placeholder="视频流地址"/>
                         </Item>
                       </Col>
                     </>
@@ -294,7 +340,7 @@ const AddModal = props => {
 
             <Col span={12}>
               <Item label="刻录机名称" name="RecorderName">
-                <Input placeholder="刻录机名称" />
+                <Input placeholder="刻录机名称"/>
               </Item>
             </Col>
             <Col span={11}>
@@ -308,12 +354,12 @@ const AddModal = props => {
                   },
                 ]}
               >
-                <Input placeholder="视频监控点名称" />
+                <Input placeholder="视频监控点名称"/>
               </Item>
             </Col>
             <Col span={12}>
               <Item label="默认通道ID" name="DefaultPassageId">
-                <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔" />
+                <TextArea placeholder="默认视频监控点ID，请用英文逗好分隔"/>
               </Item>
             </Col>
             <Col span={11}>
@@ -327,7 +373,7 @@ const AddModal = props => {
                   },
                 ]}
               >
-                <Input placeholder="视频服务地址" />
+                <Input placeholder="视频服务地址"/>
               </Item>
             </Col>
           </Row>
@@ -340,9 +386,9 @@ const AddModal = props => {
       visible={visible}
       title={
         kind === 'add' ? (
-          <span style={{ fontSize: '18px' }}>新增配置</span>
+          <span style={{fontSize: '18px'}}>新增配置</span>
         ) : (
-          <span style={{ fontSize: '18px' }}>编辑配置</span>
+          <span style={{fontSize: '18px'}}>编辑配置</span>
         )
       }
       width="1000px"
@@ -351,12 +397,19 @@ const AddModal = props => {
       maskClosable={false}
       onCancel={onCancel}
       onOk={onSubmit}
-    >
-      <p style={{ fontSize: '16px', marginLeft: '16px' }}>基本信息</p>
+      footer={type === '萤石云' ? <div style={{display: 'flex', justifyContent: 'flex-end', gap: '10px'}}>
+        <Tooltip title={<span>提示：此功能仅做辅助修改。<br/>1. 此功能接口由萤石云提供，会因诸多因素获取失败。<br/>2.接口调用有次数、频率限制，请勿频繁点击！</span>}>
+          <Button onClick={getVideoUrl} loading={btnLoading} type={'primary'}>修正视频路径</Button>
+        </Tooltip>
+        <Button onClick={onCancel}>取消</Button>
+        <Button onClick={onSubmit} type={'primary'}>确定</Button>
+      </div> : ''}
+    >
+      <p style={{fontSize: '16px', marginLeft: '16px'}}>基本信息</p>
       <Form
         form={form}
-        labelCol={{ span: 7 }}
-        style={{ height: '27rem', overflowY: 'scroll' }}
+        labelCol={{span: 7}}
+        style={{height: '27rem', overflowY: 'scroll'}}
         autocomplete="off"
       >
         <Row>
@@ -371,7 +424,7 @@ const AddModal = props => {
                 },
               ]}
             >
-              <Input placeholder="请输入名称" />
+              <Input placeholder="请输入名称"/>
             </Item>
           </Col>
           {(() => {
@@ -392,7 +445,7 @@ const AddModal = props => {
                         *
                       </span>
                       <Item label="视频厂商" name="VideoManufacturer">
-                        <Input placeholder="萤石云" disabled />
+                        <Input placeholder="萤石云" disabled/>
                       </Item>
                     </Col>
                   </>
@@ -413,7 +466,7 @@ const AddModal = props => {
                         *
                       </span>
                       <Item label="视频厂商" name="VideoManufacturer">
-                        <Input placeholder="海康" disabled />
+                        <Input placeholder="海康" disabled/>
                       </Item>
                     </Col>
                   </>
@@ -432,7 +485,7 @@ const AddModal = props => {
                 },
               ]}
             >
-              <Input placeholder="账户登录名" maxlength="100px" />
+              <Input placeholder="账户登录名" maxlength="100px"/>
             </Item>
           </Col>
           <Col span={12}>
@@ -446,7 +499,7 @@ const AddModal = props => {
                 },
               ]}
             >
-              <Input.Password placeholder="请输入登录密码" />
+              <Input.Password placeholder="请输入登录密码"/>
             </Item>
           </Col>
           <Col span={11}>
@@ -460,7 +513,7 @@ const AddModal = props => {
                 },
               ]}
             >
-              <Input placeholder="设备台账对应设备编码字段" />
+              <Input placeholder="设备台账对应设备编码字段"/>
             </Item>
           </Col>
           <Col span={12}>
@@ -474,11 +527,11 @@ const AddModal = props => {
                 },
               ]}
             >
-              <Input placeholder="视频设备通道ID" />
+              <Input placeholder="视频设备通道ID"/>
             </Item>
           </Col>
           <Col span={24}>
-            <p style={{ fontSize: '16px', marginLeft: '16px' }}>{type}</p>
+            <p style={{fontSize: '16px', marginLeft: '16px'}}>{type}</p>
           </Col>
           {(() => {
             switch (type) {
@@ -497,7 +550,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <TextArea placeholder="视频Rtmp路径，请使用英文逗号分隔" />
+                          <TextArea placeholder="视频Rtmp路径，请使用英文逗号分隔"/>
                         </Item>
                       </Col>
                       <Col span={12}>
@@ -511,7 +564,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <TextArea placeholder="视频HLS路径，请使用英文逗号分隔" />
+                          <TextArea placeholder="视频HLS路径，请使用英文逗号分隔"/>
                         </Item>
                       </Col>
                       <Col span={11}>
@@ -525,12 +578,12 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <Input placeholder="视频设备序列号" />
+                          <Input placeholder="视频设备序列号"/>
                         </Item>
                       </Col>
                       <Col span={12}>
                         <Item label="刻录机名称" name="RecorderName">
-                          <Input placeholder="刻录机名称" />
+                          <Input placeholder="刻录机名称"/>
                         </Item>
                       </Col>
                       <Col span={11}>
@@ -543,7 +596,7 @@ const AddModal = props => {
                       </Col>
                       <Col span={12}>
                         <Item label="默认通道ID" name="DefaultPassageId">
-                          <Input placeholder="默认通道ID" />
+                          <Input placeholder="默认通道ID"/>
                         </Item>
                       </Col>
                     </Row>
@@ -564,7 +617,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <Input placeholder="登录ID" />
+                          <Input placeholder="登录ID"/>
                         </Item>
                       </Col>
                       <Col span={12}>
@@ -610,7 +663,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <Input placeholder="设备端口" />
+                          <Input placeholder="设备端口"/>
                         </Item>
                       </Col>
                       <Col span={12}>
@@ -624,7 +677,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <Input placeholder="视频端口" />
+                          <Input placeholder="视频端口"/>
                         </Item>
                       </Col>
                       <Col span={11}>
@@ -638,7 +691,7 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <Input placeholder="媒体流端口" />
+                          <Input placeholder="媒体流端口"/>
                         </Item>
                       </Col>
                       <Col span={12}>
@@ -684,17 +737,17 @@ const AddModal = props => {
                             },
                           ]}
                         >
-                          <Input placeholder="视频名称" />
+                          <Input placeholder="视频名称"/>
                         </Item>
                       </Col>
                       <Col span={12}>
                         <Item label="刻录机名称" name="RecorderName">
-                          <Input placeholder="刻录机名称" />
+                          <Input placeholder="刻录机名称"/>
                         </Item>
                       </Col>
                       <Col span={11}>
                         <Item label="默认通道ID" name="DefaultPassageId">
-                          <Input placeholder="默认通道ID" />
+                          <Input placeholder="默认通道ID"/>
                         </Item>
                       </Col>
                     </Row>

src/services/videoManger/videoManger.js

 import { get, post, PUBLISH_SERVICE, CITY_SERVICE } from '@/services/index';
+import {param} from "express/lib/router";
 
 // 获取视频配置列表
 export const GetVideoConfigList = param =>
@@ -19,3 +20,6 @@ export const deleteInsertVideoConfig = data =>
 // 导入配置
 export const ImportVideoConfig = data =>
   post(`${PUBLISH_SERVICE}/VideoManager/ImportVideoConfig`, data);
+// 获取萤石云视频地址
+export const getYSYVideoSource = param =>
+  get('/CityInterface/rest/services/VideoPlatform.svc/VideoManage/RefreshVideoLiveAddress', param);