fix: 组态增加视频及视频组件修改

packages/base-components/VmsVideo/src/index.jsx

@@ -36,6 +36,7 @@ import style from './index.less';
 const Video = (props, ref) => {
   const _video = useRef(null);
   const Players = useRef(null);
+  let PlayersA = '';
   const { VideoInfo, JessibucaObj, gateway } = props;
   let baseUrl = `ws://${window.location.host}/jessica`;
   let keyID = VideoInfo.id;
@@ -48,7 +49,6 @@ const Video = (props, ref) => {
   };
 
   const getToken = async () => {
-    let PlayersA = '';
     axios
       .post(
         `https://open.ys7.com/api/lapp/token/get?appKey=${VideoInfo.username}&appSecret=${VideoInfo.password}`,
@@ -73,31 +73,19 @@ const Video = (props, ref) => {
         });
 
         PlayersA.pause = PlayersA.stop;
-        ref.current = PlayersA;
+        if (ref) ref.current = PlayersA;
       })
-
       .catch(function (error) {
         console.log(error);
-      //  PlayersA.stop();
+        try {
+          PlayersA && PlayersA.stop();
+        } catch (e) {}
       });
   };
 
-  if (VideoInfo.protocol != '萤石EZOPEN') {
-    useImperativeHandle(ref, () => {
-      // changeVal 就是暴露给父组件的方法, newVal是父组件传递的参数
-      return _video.current.jessibuca; // _video&& _video.current&&_video.current.jessibuca
-    });
-  } else {
-    getToken();
-  }
   const CommonPath =
     VideoInfo.gateway || window?.globalConfig?.hasGateWay ? 'PandaCore/GateWay/Video/' : ''; // 配置了gateway或者pc端web配置中有gateway
-  VideoInfo.url = VideoInfo.useFullUrl
-    ? VideoInfo.fullUrl
-    : (VideoInfo.pandavmsHost || 'ws://' + location.host + '/') +
-      (VideoInfo.gateway ? CommonPath : '') +
-      'jessica/' +
-      VideoInfo.id;
+
   let operateBtns = {
     fullscreen: true,
     screenshot: true,
@@ -105,14 +93,42 @@ const Video = (props, ref) => {
     record: true,
     audio: true,
   };
-  _VideoInfo = { ..._VideoInfo, ...VideoInfo };
-  if (JessibucaObj && JessibucaObj.operateBtns) {
-    JessibucaObj.operateBtns = {
-      ...operateBtns,
-      ...JessibucaObj.operateBtns,
+
+  useEffect(() => {
+    if (VideoInfo.protocol != '萤石EZOPEN') {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useImperativeHandle(ref, () => {
+        // changeVal 就是暴露给父组件的方法, newVal是父组件传递的参数
+        return _video.current.jessibuca; // _video&& _video.current&&_video.current.jessibuca
+      });
+    } else {
+      getToken();
+    }
+
+    VideoInfo.url = VideoInfo.useFullUrl
+      ? VideoInfo.fullUrl
+      : (VideoInfo.pandavmsHost || 'ws://' + location.host + '/') +
+        (VideoInfo.gateway ? CommonPath : '') +
+        'jessica/' +
+        VideoInfo.id;
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    _VideoInfo = { ..._VideoInfo, ...VideoInfo };
+
+    if (JessibucaObj && JessibucaObj.operateBtns) {
+      JessibucaObj.operateBtns = {
+        ...operateBtns,
+        ...JessibucaObj.operateBtns,
+      };
+    }
+
+    return () => {
+      try {
+        PlayersA && PlayersA.stop();
+      } catch (e) {}
     };
-  }
-  // console.log(_video)
+  }, []);
+
   return (
     <div className={style.app}>
       {VideoInfo.protocol == '萤石EZOPEN' ? (

packages/extend-components/EC_ConfigurationView/src/RealModel.js

@@ -1296,34 +1296,39 @@ const ConfigurationView = (props) => {
   const videoScanMethod = async (data) => {
     try {
       const opRule = JSON.parse(data.opRule);
-      const video = opRule && opRule.video ? opRule.video : '';
-      if (!video) return false;
+      const { vdCode, vdList } = opRule;
+      if (!vdCode || !vdList) return setVideoData([]);
       const detail = await getVideoDetail({
-        id: video,
+        UserID: 1,
+        DeviceCode: vdCode,
         _site:
           globalConfig.userInfo && globalConfig.userInfo.LocalSite
             ? globalConfig.userInfo.LocalSite
             : '',
       });
       const dataList = detail?.data;
+      const videoList = vdList.split(',');
       if (!dataList) return setVideoData([]);
-      const videoChannels = detail?.data?.videoChannels || [];
       const detailList = [];
-      videoChannels.forEach((item, index) => {
-        detailList.push({
-          id: item.id,
-          name: item.channelName,
-          protocol: item.protocol,
-          username: item.username,
-          password: item.password,
-          dataRate: 'Sub',
-          pandavmsHost: getVideoUrl(),
-          address: item.address,
+      videoList.forEach((item, index) => {
+        const list = dataList.find((obj) => {
+          return item === obj.vmS_DeviceID;
         });
+        if (list)
+          detailList.push({
+            id: list.vmS_DeviceID,
+            name: list.channelName,
+            protocol: list.protocol,
+            username: list.username,
+            password: list.password,
+            dataRate: 'Sub',
+            pandavmsHost: getVideoUrl(),
+            address: list.address,
+          });
       });
       setVideoTitle(dataList?.deviceName || '视频查看');
       setVideoData(detailList);
-      setIsVideoVisible(true);
+      detailList.length && setIsVideoVisible(true);
     } catch (e) {
       // console.log(e)
     }

packages/extend-components/EC_ConfigurationView/src/apis/index.js

@@ -59,19 +59,10 @@ export function getHistoryInfo(data) {
   });
 }
 
-// 获取视频列表
-export function getVideoSourceList(params) {
-  return request({
-    url: `${baseURI}/PandaMonitor/Monitor/Video/GetVideoSourceList`,
-    method: REQUEST_METHOD_GET,
-    params,
-  });
-}
-
 // 获取视频通道详情
 export function getVideoDetail(params) {
   return request({
-    url: `${baseURI}/PandaMonitor/Monitor/Video/GetVideoSourceDetail`,
+    url: `${baseURI}/PandaMonitor/Monitor/Video/GetVideoPlayListByDeviceCode`,
     method: REQUEST_METHOD_GET,
     params,
   });

packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx

@@ -3,7 +3,7 @@ import { Button } from 'antd';
 import PandaConfiguration from '../index';
 // import PandaConfigurationView from '../../es/index';
 const Demo = () => {
-  const [name, setName] = useState('水厂工艺流程段');
+  const [name, setName] = useState('邳州调度总览');
   const [devices, setDevices] = useState(
     'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004,SC00000003',
   );
@@ -47,15 +47,15 @@ const globalConfig = {
   mqtt_iotIP: 'emqttd10.panda-water.cn:443',
   mqtt_path: '/mqtt',
   mqtt_IsSSL: true,
-  mqtt_site_code: 'site_dc8302ni',
+  mqtt_site_code: 'site_lh5544og',
   mqtt_mess: {
     MessageLevel: '1.0',
     TcpIP: 'emqttd10.panda-water.cn',
     TcpPort: 443,
-    site_code: 'site_dc8302ni',
+    site_code: 'site_lh5544og',
   },
   userInfo: {
-    LocalSite: 'site_dc8302ni',
+    LocalSite: 'site_lh5544og',
     site: '',
   },
 };