pref: 消息通知视频弹框 接入

package.json

@@ -106,11 +106,13 @@
         "@ant-design/pro-utils": "^1.10.4",
         "@babel/polyfill": "7.4.3",
         "@babel/runtime": "^7.10.5",
+        "@congcongcai/jieba.js": "0.0.3",
         "@esri/calcite-colors": "6.0.3",
         "@wisdom-cesium/cesium": "^1.1.48",
         "@wisdom-cesium/krpano": "1.0.29-60",
         "@wisdom-components/basictable": "^1.5.16",
         "@wisdom-components/empty": "^1.4.1",
+        "@wisdom-components/videoslidermodal": "^1.1.60",
         "@wisdom-map/amap": "1.7.0",
         "@wisdom-map/arcgismap": "1.4.0-277",
         "@wisdom-map/basemap": "1.1.0-41",
@@ -118,10 +120,8 @@
         "@wisdom-utils/components": "0.1.356",
         "@wisdom-utils/runtime": "0.0.48",
         "@wisdom-utils/utils": "0.1.396",
-        "@congcongcai/jieba.js" : "0.0.3",
         "animate.css": "^4.1.1",
         "antd": "4.21.2",
-        "long": "^5.2.3",
         "bcryptjs": "2.4.3",
         "compression": "1.7.4",
         "connected-react-router": "6.4.0",
@@ -140,6 +140,7 @@
         "kit_logger": "^1.0.2",
         "kit_utils": "^1.3.11",
         "lodash": "4.17.11",
+        "long": "^5.2.3",
         "minimist": "1.2.0",
         "mqtt-client": "^1.0.14",
         "omit.js": "^2.0.2",

src/api/service/base.js

@@ -47,6 +47,7 @@ export const API = {
   GET_WEB_TICKET: '/PandaOMS/OMS/GetTicketByToken',
 
   GET_ACCOUNT_PAGE_LIST: '/PandaWorkFlow/WorkFlow/AccountManage/GetAccountPageList',
+  GET_VIDEO_PLAY_LIST_BY_DEVICE_CODE: '/PandaMonitor/Monitor/Video/GetVideoPlayListByDeviceCode',
 };
 
 const services = {
@@ -239,6 +240,11 @@ const services = {
     method: constants.REQUEST_METHOD_POST,
     type: constants.REQUEST_METHOD_POST,
   },
+  GetVideoPlayListByDeviceCode: {
+    url: API.GET_VIDEO_PLAY_LIST_BY_DEVICE_CODE,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
 };
 
 export const searchAutoCity = keywords => {

src/components/GlobalHeader/NoticeIconView.js

@@ -6,6 +6,9 @@ import { FormattedMessage } from '@wisdom-utils/components';
 import { history } from '@wisdom-utils/runtime';
 import { findPathByWidget, isJSON } from '@wisdom-utils/components/lib/AppLayout/helpers';
 import classNames from 'classnames';
+import { appService } from '@/api';
+import { getVideoUrl } from '@/utils/utils';
+import VideoSliderModal from '@wisdom-components/videoslidermodal';
 import Notifier from '../../layouts/AppLayout/notifier/notice';
 import NoticeIcon from '../../layouts/AppLayout/notifier';
 import { ERR_OK, MESSAGE_TYPE, NEW_MESSAGE } from '../../layouts/AppLayout/notifier/constants';
@@ -15,9 +18,15 @@ import isProd from '../../utils/env';
 import { getMessageTypeIcon } from '../../layouts/AppLayout/notifier/utils';
 // import NoticeIcon from '../NoticeIcon';
 import styles from './index.less';
-
 const { TextArea } = Input;
 
+const jessibucaObj = {
+  operateBtns: {
+    screenshot: false,
+  },
+  loadingText: '视频加载中',
+  decoder: '/JessibucaVideo/decoder.js',
+};
 const PlatformModal = ({ platformVisible, handleClosePlatform, handlerMointer, messages = [] }) => {
   const [pageIndex, setPageIndex] = useState(1);
   const message = useMemo(() => messages[pageIndex - 1], [messages, pageIndex]);
@@ -222,42 +231,41 @@ class NoticeIconView extends Component {
     }
   };
 
-  renderVideo = message => {
+  renderVideo = async message => {
     try {
       this.setState({
         videoVisible: true,
       });
       const { props } = this;
-    const infoType = message.infoType
-      ? message.infoType
-      : MESSAGE_TYPE.ALARM_TYPE;
-    let data = [];
-    if (this.props.global.mqtt_mess.MessageLevel === '2.0') {
-      // eslint-disable-next-line no-shadow
-      const message = this.notifier.messageThrome(
-        infoType,
-        // eslint-disable-next-line no-use-before-define
-        JSON.parse(message.messContent),
-      );
-      data = message.split('\\n');
-    } else {
-      data = message.messContent.split('\\n');
-    }
 
-    const id = data[3];
-    const name = data[0];
-    const baseURI = isProd
-      ? window.location.origin
-      : `http://${window.location.hostname}:3020`;
-    const url = `${baseURI}/civweb4/video/indexAll.html?ID=${id}&name=${name}&site=${
-      props.global.userInfo.site
-    }`;
+      if(!message.infoContent?.deviceCode&&!message.infoContent?.DeviceCode)return;
+      const {data} = await appService.GetVideoPlayListByDeviceCode({
+        UserID: 1,
+        DeviceCode: message.infoContent?.deviceCode || message.infoContent?.DeviceCode,
+        _site:props.global.userInfo.site || '',
+      })
+      const dataList = []
+      if(Array.isArray(data)){
+        data.forEach((list) => {
+          dataList.push({
+            id: list.vmS_DeviceID,
+            name: list.channelName,
+            protocol: list.protocol,
+            username: list.username,
+            password: list.password,
+            dataRate: 'Sub',
+            pandavmsHost: getVideoUrl(),
+            gateway: true,
+            address: list.address,
+            channel: list.channelID * 1,
+          });
+        });
+      }
 
       this.setState({
-      // eslint-disable-next-line react/no-unused-state
         videoMessage: {
-        name,
-        url,
+          list:dataList,
+          title:message.infoContent?.title || ''
         },
       });
             
@@ -420,28 +428,19 @@ class NoticeIconView extends Component {
           )
         }
 
-        {this.state.videoVisible && this.state.videoMessage && (
-          <Modal
-            visible={this.state.videoVisible}
-            title={this.state.videoMessage.name}
-            footer={null}
-            centered
-            width="50%"
-            zIndex={1500}
-            ref={videoRef => (this.videoRef = videoRef)}
-            className={styles.videoPopup}
-            onCancel={() => this.handleCloseVideo()}
-          >
-            <div className="web4_console_component">
-              {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
-              <iframe
-                id="videoIframe"
-                style={{ width: '100%', height: '100%' }}
-                frameBorder="0"
-                src={this.state.videoMessage.url}
+        {this.state.videoVisible && this.state.videoMessage?.list?.length && (
+          <VideoSliderModal
+            modalInfo={{
+              title: this.state.videoMessage.title,
+              open: this.state.videoVisible,
+              visible:this.state.videoVisible,
+              onCancel: () => {
+                this.handleCloseVideo()
+              },
+            }}
+            videoInfos={this.state.videoMessage.list}
+            JessibucaObj={jessibucaObj}
           />
-            </div>
-          </Modal>
         )}
 
         {this.state.sysTopVisible && this.state.sysMessage && !this.props.global.isNewYear && (

src/utils/utils.js

@@ -48,7 +48,6 @@ export function getBaseName() {
   return pkg.name.toLocaleLowerCase();
 }
 
-
 export const getKeyName = path => {
   const truePath = path.split('?')[0];
   const curRoute = [].filter(item => item.path.includes(truePath));
@@ -76,3 +75,11 @@ export function getToken() {
 export function setToken(token) {
   Cookies.set(token);
 }
+export function getVideoUrl() {
+  const { protocol } = window.location;
+  const address =
+    protocol === 'https:'
+      ? window.location.origin.replace(protocol, 'wss:')
+      : window.location.origin.replace(protocol, 'ws:');
+  return `${address}/`;
+}