react_hsbc_teller 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react_hsbc_teller",
-  "version": "0.3.4",
+  "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/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()
@@ -1045,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);
@@ -1285,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
@@ -1591,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')
@@ -1695,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) {
@@ -1752,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>
@@ -1792,7 +1824,7 @@ 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>
 
@@ -1873,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}
@@ -1951,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

@@ -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;
 }