react_hsbc_teller 0.3.1 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.3.1",
+  "version": "0.3.5",
   "description": "React",
   "private": false,
   "main": "lib/hsbc.js",

package/packages/pages/foot/foot.jsx

@@ -3,10 +3,6 @@ import './foot.less'
 import Popover from "antd/lib/popover";
 import 'antd/lib/popover/style'
 export default class foot extends Component {
-    state = {
-        clicked: false,
-        clickedOcr: false
-    }
     voice = () => {
         this.props.voice()
     }
@@ -26,15 +22,9 @@ export default class foot extends Component {
         this.props.endSession()
     }
     facialRecognition=()=>{
-        this.setState({
-            clicked: true
-        })
         this.props.facialRecognition()
     }
     ocrClick=()=>{
-        this.setState({
-            clickedOcr: true
-        })
         this.props.ocrClick()
     }
     pictureInPicture=()=>{
@@ -44,17 +34,21 @@ export default class foot extends Component {
         this.props.invitationClick()
     }
     customerFaceClick=(item)=>{
-        this.setState({
-            clicked: false,
-            clickedOcr: false
-        })
         this.props.customerFaceClick(item)
     }
     switchExternal=()=>{
         this.props.switchExternal()
     }
+    facialHandleVisibleChange = visible => {
+        console.log(visible)
+        this.props.facialHandleVisibleChange(visible)
+      };
+      ocrHandleVisibleChange = visible => {
+        console.log(visible)
+        this.props.ocrHandleVisibleChange(visible)
+      };
     render() {
-        const {isTranscribing,img,cameraImg,screenName,suspendName,customerList} = this.props
+        const {clickedOcr,clickedFacial,isTranscribing,img,cameraImg,screenName,suspendName,customerList} = this.props
         const content = (
             <div>
               {customerList.map((item)=>{
@@ -111,7 +105,7 @@ export default class foot extends Component {
                             {suspendName}
                         </div>
                     </div> */}
-                    <Popover content={content} trigger="click" visible={this.state.clicked}>
+                    <Popover content={content} trigger="click" visible={clickedFacial} onVisibleChange={this.facialHandleVisibleChange}>
                     <div className="one" onClick={this.facialRecognition.bind(this)}>
                         <img className="imgClass" src={require("../../assets/img/Face_recognition.png").default} alt="" />
                         <div className="text">
@@ -126,7 +120,7 @@ export default class foot extends Component {
                             邀请
                         </div>
                     </div>
-                    <Popover content={content} trigger="click" visible={this.state.clickedOcr}>
+                    <Popover content={content} trigger="click" visible={clickedOcr} onVisibleChange={this.ocrHandleVisibleChange}>
                     <div className="one"  onClick={this.ocrClick.bind(this)}>
                         <img className="imgClass" src={require("../../assets/img/icon_ocr.png").default} alt="" />
                         <div className="text">

package/packages/pages/foot/foot.less

@@ -1,11 +1,11 @@
 .foot{
     background: #fff;
-height: 80px;
+height: 78px;
 display: inline-flex;
 width: 100%;
-position: absolute;
-    bottom: 0;
-    left: 0;
+// position: absolute;
+//     bottom: 0;
+//     left: 0;
 }
 .total{
     display: inline-flex;

package/packages/pages/video/video.jsx

@@ -69,6 +69,8 @@ class Video extends Component {
     sessionId: this.props.sessionId,
     imRoomId: this.props.imRoomId,
     isPictureInPicture: false,
+    clickedFacial: false,
+    clickedOcr: false
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -324,7 +326,7 @@ class Video extends Component {
     }
   }
   // 获取人员客户列表
-  selectCustomer = () => {
+  selectCustomer = (val) => {
     const list = []
     if (document.getElementById('video1').name) {
       console.log(this.seeList(this.state.roomCustomerList, 'feedId', document.getElementById("feedId1").innerText))
@@ -380,24 +382,41 @@ class Video extends Component {
         name: '客户6'
       })
     }
+    if(list.length > 0) {
+      if(val == 'ocr') {
+        this.setState({
+          clickedOcr: true
+        })
+      } else if(val == 'facial'){
+        this.setState({
+          clickedFacial: true
+        })
+      }
+    } else {
+      message.success('当前暂无客户')
+    }
     this.setState({
       customerList: list
     })
   }
   // 人脸识别
   facialRecognition = () => {
+    if (this.isFileSuccuse()) {
     this.setState({
       faceCustomerType: 1,
       titleModal: '人脸识别'
     })
-    this.selectCustomer()
+    this.selectCustomer('facial')
+  }
   };
   ocrClick = () => {
+    if (this.isFileSuccuse()) {
     this.setState({
       faceCustomerType: 2,
       titleModal: 'OCR识别'
     })
-    this.selectCustomer()
+    this.selectCustomer('ocr')
+  }
   };
   endSessionValue = () => {
     this.test_controller.LeaveRoom()
@@ -727,6 +746,17 @@ class Video extends Component {
     // 发布媒体流成功
     this.test_controller.OnPublishSucc = (sid) => {
       console.log('发布媒体流成功', sid)
+      if(sid == document.getElementById('video10').name) {
+          callNimIM('sendCustomCmdMsg', {
+            customId: this.state.imRoomId,
+            content: JSON.stringify({
+              'typeId': 2030,
+              'sessionId': this.state.sessionId,
+              'sharedScreen': 1,
+              'tellerId': this.props.tellerAccount
+            })
+          });
+      }
     };
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
@@ -778,7 +808,18 @@ class Video extends Component {
     };
     // 取消发布成功
     this.test_controller.OnUnPublishSucc = (sid) => {
-      console.log('取消发布成功', sid)
+      console.log('取消发布成功', sid,document.getElementById('publish_video1').name)
+      if(sid != document.getElementById('publish_video1').name) {
+        callNimIM('sendCustomCmdMsg', {
+          customId: this.state.imRoomId,
+          content: JSON.stringify({
+            'typeId': 2030,
+            'sessionId': this.state.sessionId,
+            'sharedScreen': 0,
+            'tellerId': this.props.tellerAccount
+          })
+        })
+      }
     };
     // 取消订阅媒体流成功
     this.test_controller.OnUnSubscribeSucc = (sid) => {
@@ -965,36 +1006,6 @@ class Video extends Component {
     // 切流成功通知
     this.test_controller.OnChangeMediaStreamSuccess = (sid) => {
       console.log('切流成功通知', sid);
-      if (this.state.publishDevic == 2) {
-        // 打开共享
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 2030,
-            'sessionId': this.state.sessionId,
-            'sharedScreen': 1,
-            'tellerId': this.props.tellerAccount
-          })
-        });
-        this.setState({
-          isSharedScreen: true,
-          screenName: '取消共享'
-        });
-      } else {
-        this.setState({
-          isSharedScreen: false,
-          screenName: '投屏'
-        });
-        callNimIM('sendCustomCmdMsg', {
-          customId: this.state.imRoomId,
-          content: JSON.stringify({
-            'typeId': 2030,
-            'sessionId': this.state.sessionId,
-            'sharedScreen': 0,
-            'tellerId': this.props.tellerAccount
-          })
-        })
-      }
     };
     // 切流失败通知
     this.test_controller.OnChangeMediaStreamFailed = (
@@ -1053,7 +1064,7 @@ class Video extends Component {
       let outcanvas = document.createElement("canvas");
       outcanvas.width = canvas.width;
       outcanvas.height = canvas.height;
-      ctx.strokeStyle = "#db0011";
+      ctx.strokeStyle = this.props.voiceColor;
       ctx.lineWidth = 2;
       ctx.clearRect(0, 0, canvas.width, canvas.height); //清理画布
       let dataArray = new Uint8Array(analyser.frequencyBinCount);
@@ -1145,7 +1156,7 @@ class Video extends Component {
       let result = await API.getRoomStatus({
         sessionId: data.sessionId
       });
-      if (result.code == 200 && result.data.roomStatu == 1) {
+      if (result.code == 200 && result.data.roomStatus == 1) {
         this.addToScript()
       } else {
         message.success('当前房间状态异常')
@@ -1293,11 +1304,8 @@ class Video extends Component {
     }
   };
   isFileSuccuse = () => {
-    if (!this.state.sessionId) {
-      return false
-    } else if (this.state.isSuspend) {
-      return false
-    } else if (!this.state.isCustomer) {
+    if (!this.state.sessionId || this.state.isSuspend || !this.state.isCustomer) {
+      message.success(this.props.prohibitPrompt)
       return false
     } else {
       return true
@@ -1398,7 +1406,7 @@ class Video extends Component {
           publish_config.video_profile_type = 5
           publish_config.publish_video_id = 'video10'
           publish_config.publish_streamId_id = 'subscribe_streamId10'
-          publish_config.publish_tag = ''
+          publish_config.publish_tag = 'projectionWhiteboard'
           this.test_controller.Publish(publish_config)
         }
 
@@ -1599,6 +1607,8 @@ class Video extends Component {
     }
     console.log(sid)
     this.setState({
+      clickedFacial: false,
+      clickedOcr: false,
       faceCustomerUid: item.customId,
       isModalVisibleFacial: true,
       facialImg: this.test_controller.TakePicture(1, undefined, undefined, sid, 'png')
@@ -1678,7 +1688,7 @@ class Video extends Component {
         publish_config.part_of_screen_id = 'touBoxItem';
         publish_config.publish_video_id = 'video10'
         publish_config.publish_streamId_id = 'subscribe_streamId10'
-        publish_config.publish_tag = ''
+        publish_config.publish_tag = 'projectionWhiteboard'
         this.test_controller.Publish(publish_config)
       }
     } else{
@@ -1703,6 +1713,20 @@ class Video extends Component {
       })
     }
   }
+  facialHandleVisibleChange=(value)=>{
+    if(!value) {
+      this.setState({
+        clickedFacial: false
+      })
+    }
+  }
+  ocrHandleVisibleChange=(value)=>{
+    if(!value) {
+      this.setState({
+        clickedOcr: false
+      })
+    }
+  }
   render() {
     var pdfChildren
     if (this.props.children) {
@@ -1713,7 +1737,7 @@ class Video extends Component {
         <Spin spinning={this.state.loading} tip="视频初始化中...">
           <Header></Header>
           <div className="health">
-            <div className="projection" style={{ display: (this.state.isCustomer == 'noVideo') ? '' : 'none', }}>
+            <div className="projection" style={{ display: (this.state.isCustomer) ? '' : 'none', }}>
               <div className="button">
                 <div className={`${this.state.isSelect == 'video' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>视频画面</div>
                 <div className={`${this.state.isSelect == 'noVideo' ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this)}>投屏白板</div>
@@ -1741,14 +1765,14 @@ class Video extends Component {
               <div
                 className={`itemed ${this.state.isBigVideo == 'video1' ? 'item1' : ""}`}
                 // className="itemed item1"
-                style={{ position: "relative" }}
+                style={{ position: "relative",'margin-right': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo1')}
               >
                 {
                   this.state.customAudioed && <img
                     alt=""
                     src={require("../../assets/img/yingpin.png").default}
-                    style={{ width: "100%", height: "100%" }}
+                    style={{ width: "100%", height: "100%",}}
                   ></img>
                 }
                 <div className="video1Div" style={{ display: (!this.state.customAudioed) ? '' : 'none', }}>
@@ -1760,7 +1784,7 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="feedId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div>
+                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor }} className='customerTitle'>客户</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
                 </div>
               </div>
@@ -1800,14 +1824,12 @@ class Video extends Component {
                   />
                   <audio id="audio1" autoPlay />
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
-                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='tellerTitle'>坐席</div>
+                  <div style={{ display: (this.state.isCustomer) ? '' : 'none', background: this.props.titleBackground,color: this.props.titleColor}} className='tellerTitle'>坐席</div>
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
                 </div>
 
               </div>
-              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
-
-                <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
+              <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`} style={{'margin-top': '5px',  }} onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
                   <video
                     id="video2"
                     autoPlay
@@ -1818,9 +1840,9 @@ class Video extends Component {
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
                   {/* <div className='customerTitle'>客户</div> */}
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
-                </div>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
+              style={{'margin-top': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
                 <video
                   id="video3"
@@ -1834,6 +1856,7 @@ class Video extends Component {
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video4' ? 'item1' : ""}`}
+              style={{'margin-right': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo4')}>
                 <video
                   id="video4"
@@ -1847,6 +1870,7 @@ class Video extends Component {
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
               </div>
               <div className={`itemed ${this.state.isBigVideo == 'video5' ? 'item1' : ""}`}
+              style={{'margin-top': '5px',  }}
                 onClick={this.enlargeClick.bind(this, 'isLangVideo5')}>
                 <video
                   id="video5"
@@ -1859,11 +1883,11 @@ class Video extends Component {
                 {/* <div style={{ display: (this.state.isCustomer) ? '' : 'none', }} className='customerTitle'>客户</div> */}
                 <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
               </div>
-              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
+              <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} style={{'margin-top': '5px',  }} className={`${this.state.isBigVideo == 'video6' ? 'item1' : "itemed"}`}>
                 <video
                   id="video6"
                   autoPlay
-                  muted={true}
+                  muted={true} 
                   className="video"
                 />
                 <audio id="audio6" autoPlay />
@@ -1881,7 +1905,11 @@ class Video extends Component {
             suspendName={this.state.suspendName}
             cameraImg={this.state.cameraImg}
             customerList={this.state.customerList}
+            clickedOcr={this.state.clickedOcr}
+            clickedFacial={this.state.clickedFacial}
             suspend={this.suspend}
+            facialHandleVisibleChange={this.facialHandleVisibleChange}
+            ocrHandleVisibleChange={this.ocrHandleVisibleChange}
             voice={this.voice}
             cameraClick={this.cameraClick}
             sharedScreen={this.sharedScreen}
@@ -1959,5 +1987,9 @@ Video.defaultProps = {
   callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
   resourcePath: 'https://counter-web.leimondata.cn:7199',
+  prohibitPrompt: '当前无客户',
+  voiceColor: '#db0011',
+  titleBackground: 'rgba(219, 0, 17, 0.1)',
+  titleColor: '#DB0011'
 }
 export default Video

package/packages/pages/video/video.less

@@ -79,8 +79,8 @@
   height: 100%;
 }
 .health{
-  margin: 20px;
-  height:  ~"calc(100vh - 60px)";
+  margin: 20px 20px 0 20px;
+  height:  ~"calc(100vh - 130px)";
 }
 .all{
   height: 100%;
@@ -144,7 +144,7 @@
 }
 .projection{
   width: 80%;
-  height: 88%;
+  height:  ~"calc(100vh - 130px)";
   position: absolute;
   z-index: 1;
   // background: #fff;
@@ -188,9 +188,9 @@ border-radius: 0px 0px 2px 2px;
   width: 80px;
   line-height: 30px;
   height: 30px;
-  background: rgba(219, 0, 17, 0.1);
+  // background: rgba(219, 0, 17, 0.1);
   border-radius: 4px 0px 2px 0px;
-  color: #DB0011;
+  // color: #DB0011;
   font-size: 14px;
 }
 .tellerTitle{
@@ -200,10 +200,9 @@ border-radius: 0px 0px 2px 2px;
   width: 80px;
   line-height: 30px;
   height: 30px;
-  background: rgba(219, 0, 17, 0.1);
+  // background: rgba(219, 0, 17, 0.1);
   border-radius: 4px 0px 2px 0px;
-  transform: rotateY( 
-180deg);
-  color: #DB0011;
+  transform: rotateY(180deg);
+  // color: #DB0011;
   font-size: 14px;
 }