fix: 组态视频查看

package.json

@@ -152,6 +152,7 @@
     "@wisdom-components/exportexcel": "^1.1.2",
     "@wisdom-components/loadbox": "1.1.4",
     "@wisdom-components/timerangepicker": "^1.3.4",
+    "@wisdom-components/videoslidermodal": "1.1.2",
     "@wisdom-components/VmsVideo": "1.1.13",
     "@wisdom-utils/utils": "0.0.46",
     "classnames": "^2.2.6",

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

@@ -5,6 +5,7 @@ import moment from 'moment';
 import sha1 from 'sha1';
 import Empty from '@wisdom-components/empty';
 import LoadBox from '@wisdom-components/loadbox';
+import VideoSliderModal from '@wisdom-components/videoslidermodal';
 import { Input, message, Modal, Form, ConfigProvider, Button } from 'antd';
 import {
   ExclamationCircleOutlined,
@@ -23,7 +24,13 @@ import BarLink from './js/BarLink';
 import WaterFlowControlView from './js/WaterFlowControlView';
 import ConfigurationDetail from './js/ConfigurationDetail';
 import DragModal from './js/DragModal';
-import { getSketchPadList, getSketchPadContent, getPointAddress, getDeviceRealInfo } from './apis';
+import {
+  getSketchPadList,
+  getSketchPadContent,
+  getPointAddress,
+  getDeviceRealInfo,
+  getVideoDetail,
+} from './apis';
 import {
   isNumber,
   createGuid,
@@ -35,6 +42,7 @@ import {
   querySkipUrl,
   isJson,
   stationData,
+  getVideoUrl,
 } from './js/utils';
 import './index.less';
 
@@ -71,6 +79,9 @@ const ConfigurationView = (props) => {
   const [isEmpty, setIsEmpty] = useState(false); // 画板无数据状态
   const [description, setDescription] = useState(''); // 画板无数据描述
   const [first, setFirst] = useState(true); // 第一次加载
+  const [isVideoVisible, setIsVideoVisible] = useState(false);
+  const [videoData, setVideoData] = useState([]);
+  const [videoTitle, setVideoTitle] = useState('');
 
   twoID = `TDG${Date.now().toString(36)}`;
   const AdjustControlInput = useRef();
@@ -82,6 +93,14 @@ const ConfigurationView = (props) => {
   const globalConfig = window.globalConfig || config;
   let isClose = false;
 
+  const _JessibucaObj = {
+    operateBtns: {
+      screenshot: false,
+    },
+    loadingText: '视频加载中',
+    decoder: '/JessibucaVideo/decoder.js',
+  };
+
   /** **********************************获取工艺图画板信息*********************** */
   const getConfiguraList = async () => {
     const url = globalConfig.mainserver ? globalConfig.mainserver : 'https://panda-water.cn/';
@@ -1273,6 +1292,43 @@ 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 detail = await getVideoDetail({
+        id: video,
+        _site:
+          globalConfig.userInfo && globalConfig.userInfo.LocalSite
+            ? globalConfig.userInfo.LocalSite
+            : '',
+      });
+      const dataList = detail?.data;
+      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,
+        });
+      });
+      setVideoTitle(dataList?.deviceName || '视频查看');
+      setVideoData(detailList);
+      setIsVideoVisible(true);
+    } catch (e) {
+      // console.log(e)
+    }
+  };
+
   /** **************************************交互脚本****************************************** */
   const interactiveScript = (data) => {
     try {
@@ -1545,6 +1601,9 @@ const ConfigurationView = (props) => {
               case '功能跳转': // 功能模型
                 menuJumpMethod(data);
                 break;
+              case '视频查看': // 视频查看
+                videoScanMethod(data);
+                break;
               case '自定义交互': // 自定义交互
                 customBack(data);
                 interactiveScript(data);
@@ -1609,6 +1668,9 @@ const ConfigurationView = (props) => {
               case '功能跳转': // 功能模型
                 menuJumpMethod(data);
                 break;
+              case '视频查看': // 视频查看
+                videoScanMethod(data);
+                break;
               case '自定义交互': // 自定义交互
                 customBack(data);
                 interactiveScript(data);
@@ -1741,6 +1803,9 @@ const ConfigurationView = (props) => {
               case '功能跳转': // 功能模型
                 menuJumpMethod(data);
                 break;
+              case '视频查看': // 视频查看
+                videoScanMethod(data);
+                break;
               case '自定义交互': // 自定义交互
                 customBack(data);
                 interactiveScript(data);
@@ -1817,6 +1882,9 @@ const ConfigurationView = (props) => {
               case '功能跳转': // 功能模型
                 menuJumpMethod(data);
                 break;
+              case '视频查看': // 视频查看
+                videoScanMethod(data);
+                break;
               case '自定义交互': // 自定义交互
                 customBack(data);
                 interactiveScript(data);
@@ -2601,6 +2669,19 @@ const ConfigurationView = (props) => {
           />
         </DragModal>
       )}
+      {isVideoVisible && (
+        <VideoSliderModal
+          modalInfo={{
+            title: videoTitle,
+            open: isVideoVisible,
+            onCancel: () => {
+              setIsVideoVisible(false);
+            },
+          }}
+          videoInfos={videoData}
+          JessibucaObj={_JessibucaObj}
+        />
+      )}
     </div>
   );
 };

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

@@ -58,3 +58,21 @@ export function getHistoryInfo(data) {
     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`,
+    method: REQUEST_METHOD_GET,
+    params,
+  });
+}
\ No newline at end of file

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

@@ -149,3 +149,13 @@ export const stationData = [
   'Y',
   'Z',
 ];
+
+export const getVideoUrl = () => {
+  const hasGateWay = window.globalConfig?.hasGateWay;
+  const protocol = window.location.protocol;
+  const address = window.location.origin.replace(protocol, 'ws:');
+  const port = window.location.port;
+  const defaultAddress = address.replace(port, 7000);
+
+  return hasGateWay ? `${address}/` : `${defaultAddress}/`;
+};