react_hsbc_teller 1.6.7 → 1.6.9

package/packages/pages/video/video.jsx

@@ -4,6 +4,7 @@
 import React, { Component, useState } from 'react';
 import API from '../../api/api';
 import { initWebSocket, joinRoom, disconnect } from '../../common/websocket';
+import { BoardOperate } from '../../common/index.esm.js';
 import './video.less'
 import Header from '../header/header.jsx'
 import Foot from '../foot/foot.jsx'
@@ -23,10 +24,11 @@ import Spin from "antd/lib/spin";
 import 'antd/lib/spin/style'
 import Select  from "antd/lib/select";
 import 'antd/lib/select/style'
-
+import styled from 'styled-components';
 import { Button } from '../../../node_modules/antd/lib/index';
 import SignMy from '../sign/signMy.jsx'
 import axios from 'axios';
+import CryptoJS from "crypto-js";
 const { Option } = Select;
 const LEAVE_TYPE = {
   TELLER_EXIT: 1, // 坐席退出
@@ -42,6 +44,36 @@ let messageValue = ''
 let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
+const CanvasHome = styled.div`
+  position: fixed;
+  width: 76vw;
+  height: 74vh;
+  top: 3vh;
+  left: 1.5vw;
+  z-index:999;
+
+  .canvas{
+    width:100%;
+    height:100%;
+    box-shadow: 0 0 5px 0 #06a;
+    display:none;
+  }
+`;
+const OpreateDiv = styled.div`
+  display: inline-block;
+  margin-left: 10vw;
+  padding: 0 6px;
+  height: 4vh;
+  line-height: 4vh;
+  border-radius: 5px;
+  background: #fff;
+  font-size: 16px;
+  border: #333 1px solid;
+  span{
+    margin-right:10px;
+    cursor:pointer;
+  }
+`;
   function clearStreamRemain() {
     if (!(beautyDiv.beauty_canvas == null || beautyDiv.beauty_canvas == undefined)) {
       beautyDiv.beauty_canvas = null;
@@ -69,6 +101,7 @@ message.config({
 class Video extends Component {
   constructor(props) {
     super(props)
+    this.boardOperate = null;
 	}
   cancel = axios.CancelToken.source()
   state = {
@@ -213,10 +246,15 @@ class Video extends Component {
     ],
     shareMaskState: false,
     idCardName: '',
-    idCardNumber: ''
+    idCardNumber: '',
+    operateShow: false,
+    drawConfig: {
+      curryControl: 'pen', // 工具类型
+    }
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
+  
   /**
    * 创建房间成功后回调后台
    * @param  {JSON} data 数据类型
@@ -297,6 +335,35 @@ class Video extends Component {
       
     }
   };
+  decrypt(data) {
+    let keyStr = "le&&If?()*^%$#hA"
+    let iv = CryptoJS.enc.Utf8.parse("jwe232DEE?^%$eq3")
+    let encryptedHexStr = CryptoJS.enc.Hex.parse(data);
+    let content = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+    let key = CryptoJS.enc.Utf8.parse(keyStr);
+    let decrypt = CryptoJS.AES.decrypt(content, key, {
+      iv: iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
+  }
+  encrypt(data) {
+    let keyStr = "le&&If?()*^%$#hA"
+    let iv = CryptoJS.enc.Utf8.parse("jwe232DEE?^%$eq3")
+    let dataString = data;
+    if (typeof data !== "string") {
+      dataString = JSON.stringify(data);
+    }
+    const key = CryptoJS.enc.Utf8.parse(keyStr);
+    let sc = CryptoJS.enc.Utf8.parse(dataString);
+    let encrypted = CryptoJS.AES.encrypt(sc, key, {
+      iv: iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString();
+  }
   /**
    * 初始化获取数据
    * @param  {JSON} data 数据类型
@@ -304,18 +371,13 @@ class Video extends Component {
   mpaasSig = async data => {
     console.log(data);
     try {
-      let result = await API.mpaasSig({ account: data.account, type: data.type });
-      console.log(result);
+      // let result = JSON.parse(this.decrypt(await API.mpaasSig({ ciphertext: this.encrypt({account: data.account, type: data.type})})));
+      let result = await API.mpaasSig({account: data.account, type: data.type});
+      console.log('mpaasSig',result,result.mpsSig);
       window.sessionStorage.setItem('alimpassSig', result.mpsSig);
         this.state.workSpaceId = result.workspaceId,
         this.state.appId = result.appId,
         this.state.bizName = result.bizName
-      // const data1={
-      //   hostname: 'im.uat.dsp.hsbcfts.com.cn',
-      //   webPort: '443',
-      //   account: 'web',
-      //   openfireToken: '123'
-      // }
       window.sessionStorage.setItem('sigData', JSON.stringify(result));
       if (data.sigType == 1) {
         this.handleEdit()
@@ -2500,6 +2562,12 @@ class Video extends Component {
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
           this.state.isCustomer= true
+          if(this.props.isOpenSound) {
+            let src = autod
+          let audio = new Audio(src)
+          audio.play()
+          }
+
           // let src = autod
           // let audio = new Audio(src)
           // audio.play()
@@ -2887,9 +2955,13 @@ class Video extends Component {
       exitType
     ) => {
       console.log('退出房间者', participant, exitType)
-      // let src = leftMetting
-      // let audio = new Audio(src)
-      // audio.play()
+      if(this.props.isOpenSound) {
+      let src = leftMetting
+      let audio = new Audio(src)
+      audio.play()
+      }
+
+
       this.appGetUsernameClick(participant).then((res)=>{
         console.log('退出房间者',res)
 let data = res? res.username ? res.username : '客户' : '客户'
@@ -3262,6 +3334,7 @@ userType:'1'
       let result = await API.videoRecordCallback({
         activityId: this.props.businessNumber,
         sessionId: this.state.sessionId,
+        roomId: this.state.channelId,
         type: type,
         status: status
       });
@@ -4414,13 +4487,81 @@ userType:'1'
         // }
       }
     }
-    
     this.navigatorClick()
+    
   } else {
     this.messageClick('internal staff正在共享屏幕，请先关闭','error')
   }
   }
   }
+  openCanvas(drawCanvas) {
+    if (!this.boardOperate) {
+      this.boardOperate = new BoardOperate(drawCanvas, {
+        drawColor: "#000000",
+        drawType: "pen",
+        lineWidth: 5,
+        fillStyle: '', // 初始背景色，若为空则透明背景 
+      });
+    }
+  }
+  closeCanvas() {
+    this.boardOperate.destroy();
+    this.boardOperate = null;
+  }
+
+  setTool(type) {
+    const { drawConfig } = this.state;
+    drawConfig.curryControl = type;
+    this.boardOperate.changeWay({
+      type
+    });
+
+    this.setState({ drawConfig });
+  }
+
+  setOpreate(type) {
+    this.boardOperate[type]();
+  }
+  downCanvas() {
+    const canvas = document.getElementById('canvas');
+    const base64 = canvas.toDataURL();
+
+
+    let img = document.createElement('img');
+    img.style.position = 'fixed';
+    img.style.width = '90vw';
+    img.style.height = '95vh';
+    img.style.top = '9vh';
+    img.style.left = '5vw';
+    img.src = base64;
+    document.body.appendChild(img);
+
+  }
+  graffiti=()=>{
+    if(!this.state.operateShow) {
+      this.change(true)
+    }
+
+  }
+  closeGraffiti=()=>{
+    this.change(false)
+  }
+  change(val) {
+    this.setState({ operateShow: val })
+    const canvas = document.getElementById('canvas');
+    if (val) {
+      canvas.style.display = 'block';
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
+      setTimeout(() => {
+        this.openCanvas(canvas)
+      }, 0);
+    } else {
+      // this.downCanvas()
+      this.closeCanvas();
+      canvas.style.display = 'none';
+    }
+  }
   switchSelect = (value) => {
     this.setState({
       isSelect: value,
@@ -4783,7 +4924,19 @@ userType:'1'
             {tabTitleList}
             {/* <img style={sectionStyle} src={require("../../assets/img/placeholder_bg.png").default} alt="" /> */}
             <div id="whiteboardDIV" style={{height: 'calc(100% - 33px)'}}>
-            
+            <CanvasHome>
+          {this.state.operateShow &&
+            <OpreateDiv id="operate">
+              <span onClick={() => this.setTool('pen')}>铅笔</span>
+              <span onClick={() => this.setTool('eraser')}>橡皮</span>
+              <span onClick={() => this.setOpreate('undo')}>撤销</span>
+              <span onClick={() => this.setOpreate('redo')}>恢复</span>
+              <span onClick={() => this.setOpreate('clear')}>清除</span>
+              <span onClick={() => this.closeGraffiti()}>关闭</span>
+            </OpreateDiv>
+          }
+          <canvas id="canvas" className="canvas"></canvas>
+        </CanvasHome>
               <div className="videoDiv" style={{ display: (this.state.isSelect == 'RMScreen' || this.state.isSelect == 'staffScreen') ? '' : 'none', }}>
                 <div className="videoDiv">
                   <video
@@ -5275,6 +5428,7 @@ userType:'1'
             switchExternal={this.switchExternal}
             inspection={this.inspection}
             beautyClick={this.beautyClick}
+            graffiti={this.graffiti}
           ></Foot>
           <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
             onCancel={this.handleCancel}>
@@ -5439,7 +5593,7 @@ sessionId: "",
   microphoneSize: 25,
   fontSize: '14',
   fontFamily: 'auto',
-  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY'],
+  menus: ['BOARD','SHARE', 'FRIES', 'OCR', 'INVITE', 'PIP', 'BEAUTY','GRAFFITI'],
   customLeaveRoom: '客户离开房间',
   meetingInfo: {
     title: '--',
@@ -5449,6 +5603,7 @@ sessionId: "",
   },
   isTranscribing: false,
   shareMask: false,
+  isOpenSound: false, // true开启进出音效   false不开启
   internalUrl: 'https://wp-staff-gateway.wealth-platform.uat.ali.cloud.cn.hsbc/meeting-ui/OHB/CN/HSBC?chnlID=OHB&locale=zh_CN&chnlCC=CN&chnlGMC=HSBC&targetFunc=supervisorMeeting&sourceFunc=rmMeeting'
 }
 export default Video