react_hsbc_teller 0.6.0 → 0.6.4

package/package.json

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

package/packages/pages/foot/foot.jsx

@@ -54,8 +54,8 @@ export default class foot extends Component {
         const {clickedOcr,clickedFacial,isTranscribing,img,cameraImg,screenName,suspendName,customerList,menus} = this.props
         const content = (
             <div>
-              {customerList.map((item)=>{
-                  return  <div className="customer" onClick={this.customerFaceClick.bind(this,item)}>
+              {customerList.map((item,index)=>{
+                  return  <div key={index}className="customer" onClick={this.customerFaceClick.bind(this,item)}>
                       <img className="imgClass" alt="" src={require("../../assets/img/youke.png").default} />
                       <li className="listLi" key={item.customerId}>{item.name}</li>
                       </div>
@@ -67,8 +67,8 @@ export default class foot extends Component {
           const defaultList = (
               <div className="total totalTwo">
                   {
-                      menus.map((item)=>{
-                          return <div className='footHover'>
+                      menus.map((item,index)=>{
+                          return <div key={index}className='footHover'>
                           {
                                   isTranscribing &&
                                   <div className="one" onClick={this.transcribingClick.bind(this)}>
@@ -144,7 +144,7 @@ export default class foot extends Component {
                     </div>
                     <div className='footHover' onClick={this.inspection.bind(this)}>
                     <div className="one">
-                        <img className="imgClass" src={cameraImg} alt="" />
+                        <img className="imgClass" src={require("../../assets/img/inspection.png").default} alt="" />
                         <div className="text">
                             设备检测
                         </div>

package/packages/pages/foot/foot.less

@@ -1,9 +1,9 @@
 .foot{
     background: #fff;
-height: 48px;
+height: 60px;
 display: inline-flex;
 width: 100%;
-margin: 10px 0;
+// margin: 10px 0;
 // position: absolute;
 //     bottom: 0;
 //     left: 0;
@@ -11,8 +11,9 @@ margin: 10px 0;
 .total{
     display: inline-flex;
     width: 33%;
-
+    height: 100%;
   align-items: center;
+  margin: 10px 0;
 .one{
     padding-top: 5px;
         display: flex;

package/packages/pages/index.jsx

@@ -46,6 +46,7 @@ class Main extends Component {
 }
 Main.defaultProps = {
   lang: 'zh',
+  // baseURL: 'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/zuul/api/leimon-counter-api',
   baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
 
 }

package/packages/pages/video/video.jsx

@@ -101,6 +101,7 @@ class Video extends Component {
     voiceVideoTwelve: false,
     cameraList: [],
     microphoneList: [],
+    speakerList: [],
     isModalVisibleInspection: false,
     cameraValue: '',
     microphoneValue: '',
@@ -647,7 +648,18 @@ class Video extends Component {
             cobj.font = "28px auto";
             cobj.textAlign = 'center';
             cobj.lineWidth = 1;
-            cobj.strokeText(list[i].title, 150, 360 * (i + 1) - 20);
+            // 文字
+            let str = list[i].title
+            for (let k = 0; k < str.length; k++){
+              // console.log(str.substring(0,k+1))
+              // console.log(cobj.measureText(str.substring(0,k+1)).width)
+                  if (cobj.measureText(str.substring(0,k+1)).width>300){
+                    str = str.substring(0,k-2)
+                    str += '...'
+                    break;
+                  }
+            }
+            cobj.strokeText(str, 150, 360 * (i + 1) - 20);
             cobj.stroke();
             //左边框
             cobj.beginPath();
@@ -1100,6 +1112,7 @@ class Video extends Component {
       this.setState({
         cameraList: obj,
         microphoneList: obj1,
+        speakerList: obj2
       })
       if (!this.state.appId) {
         this.mpaasSig(data);
@@ -2489,6 +2502,10 @@ class Video extends Component {
 
   }
   handleOkInvitation = async () => {
+    if(!this.state.employeeName || this.state.employeeError) {
+      this.messageClick('请输入正确的员工号','error')
+      return
+    }
     try {
       let result = await API.sendLink({
         sessionId: this.state.sessionId,
@@ -2666,6 +2683,7 @@ class Video extends Component {
     }
   }
   queryStaff = async () => {
+    if(!this.state.employeeNumber) return
     try {
       let result = await API.getUsername({
         userId: this.state.employeeNumber
@@ -2673,13 +2691,17 @@ class Video extends Component {
       console.log(result)
       if (result.code == 200) {
         this.setState({
-          employeeName: result.data.username
+          employeeName: result.data.username,
+          employeeError: '',
         })
       } else {
         this.messageClick('查询失败','error')
       }
     } catch (err) {
-
+      console.log(err)
+      this.setState({
+        employeeError: '未搜索到相关信息'
+      })
     }
   }
   counterSign = async data => {
@@ -2799,7 +2821,7 @@ class Video extends Component {
       <span className='labelClass'>
         {
           meetingInfo.customers.map((item, index) => {
-            return <label>
+            return <label key={index}>
               {item}
               {
                 meetingInfo.customers.length > 0 && index != meetingInfo.customers.length - 1 && <label>，</label>
@@ -2813,38 +2835,19 @@ class Video extends Component {
     const tabTitleList = (
       <div className="button">
         {
-          this.state.tabTitles.map((item) => {
-            return <div className={`${this.state.isSelect == item.value ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this, item.value)}>
+          this.state.tabTitles.map((item,index) => {
+            return <div key={index} className={`${this.state.isSelect == item.value ? 'selectSee' : "noSelest"}`} onClick={this.switchSelect.bind(this, item.value)}>
               {item.name}
             </div>
           })
         }
       </div>
     )
-    const videoCustomer =
-      this.state.videoList.map((item, index) => {
-        return <div className={`itemed`} style={{ display: (item.isVideo) ? '' : 'none', }}>
-          <video
-            id={'video' + item.videoIndex}
-            autoPlay
-            muted={true}
-            className="video"
-          />
-          <audio id={'audio' + item.videoIndex} autoPlay />
-          <label style={{ display: 'none' }} id={'feedId' + item.videoIndex} type="text" />
-          <div className={`customerTitle titleSamlle`}>
-            <div className='titleName' style={{ background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
-              {this.state.videoTwoName}
-            </div>
-          </div>
-          <canvas className="canvasClassOne" id={'subscribe_volumeView' + item.videoIndex} width="40" height="70"></canvas>
-        </div>
-      })
     const camera = (
       <div class="cameraAnMicrophone">
         {
-          this.state.cameraList.map((item, index) => {
-            return <div>
+          this.state.cameraList.map((item,index) => {
+            return <div key={index}>
               <label className="radio">
               <input type="radio" name="camere" value={item.actionid} style={{float: 'left'}} checked={this.state.cameraValue == item.actionid} onChange={(e) => this.getCameraValue(e)}  /><i></i>
               {item.actionname}
@@ -2859,8 +2862,8 @@ class Video extends Component {
     const microphone = (
       <div>
         {
-          this.state.microphoneList.map((item, index) => {
-            return <div class="cameraAnMicrophone">
+          this.state.microphoneList.map((item,index) => {
+            return <div key={index} class="cameraAnMicrophone">
               <label className="radio">
               <input type="radio" name="microphone" value={item.actionid} style={{float: 'left'}} checked={this.state.microphoneValue == item.actionid} onChange={(e) => this.getMicrophoneValue(e)}  /><i></i>
               {item.actionname}
@@ -2871,8 +2874,20 @@ class Video extends Component {
         }
       </div>
     )
+    const speaker = (
+      <div>
+        {
+          this.state.speakerList.map((item,index) => {
+            return <div key={index} class="cameraAnMicrophone">
+              {item.actionname}<br />
+            </div>
+          })
+        }
+      </div>
+    )
+
     const sectionStyle = this.state.tabTitles.length > 0 ? {
-      'z-index': '-1',
+      zIndex: '-1',
       width:'100%', 
       height:'100%',
       position: 'absolute',
@@ -2883,7 +2898,7 @@ class Video extends Component {
       margin: 'auto'
 
     } :{
-      'z-index': '0',
+      zIndex: '0',
       width:'100%', 
       // height:'100%',
       position: 'absolute',
@@ -2971,8 +2986,6 @@ class Video extends Component {
                     className={`publishVideoClass`}
                     autoPlay
                     muted={true}
-                    webkit-playsinline={true}
-                    playsinline={true}
                   />
                   <label style={{ display: 'none' }} id="publish_streamId1" type="text" />
                   
@@ -2984,15 +2997,12 @@ class Video extends Component {
                       className="imgClassVoice voiceClass"
                     />
                   }
-                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
-                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>坐席</div>
+                  <canvas style={{ display: (!this.state.voiceStatue) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClass" id="publish_volumeView" width="40" height="70"></canvas>
+                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>坐席</div>
                   </div>
                 </div>
 
               </div>
-              {/* {
-                videoCustomer
-              } */}
               <div
                 className={`itemed`}
                 style={{ position: "relative", display: (this.state.videoOneName) ? '' : 'none' }}
@@ -3022,9 +3032,9 @@ class Video extends Component {
                       className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px'}} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoOneName && !this.state.voiceVideoOne) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px'}} className="canvasClassOne" id="subscribe_volumeView1" width="40" height="70"></canvas>
 
-                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                       {this.state.videoOneName}
                     </div>
 
@@ -3050,9 +3060,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTwoName && !this.state.voiceVideoTwo) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView2" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoTwoName}
                   </div>
                 </div>
@@ -3068,7 +3078,7 @@ class Video extends Component {
                 <audio id="audio3" autoPlay />
                 <label style={{ display: 'none' }} id="feedId3" type="text" />
                 
-                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoThreeName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoThree && <img
                     alt=""
@@ -3076,9 +3086,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoThreeName && !this.state.voiceVideoThree) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView3" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoThreeName}
                   </div>
                 </div>
@@ -3093,7 +3103,7 @@ class Video extends Component {
                 <audio id="audio4" autoPlay />
                 <label style={{ display: 'none' }} id="feedId4" type="text" />
                 
-                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoFourName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoFour && <img
                     alt=""
@@ -3101,9 +3111,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFourName && !this.state.voiceVideoFour) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView4" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoFourName}
                   </div>
                 </div>
@@ -3119,7 +3129,7 @@ class Video extends Component {
                 <audio id="audio5" autoPlay />
                 <label style={{ display: 'none' }} id="feedId5" type="text" />
                 
-                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoFiveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoFive && <img
                     alt=""
@@ -3127,9 +3137,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoFiveName && !this.state.voiceVideoFive) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView5" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{  color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoFiveName}
                   </div>
                 </div>
@@ -3144,7 +3154,7 @@ class Video extends Component {
                 <audio id="audio6" autoPlay />
                 <label style={{ display: 'none' }} id="feedId6" type="text" />
                 
-                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoSixName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoSix && <img
                     alt=""
@@ -3152,9 +3162,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
+                <canvas style={{ display: (!this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView6" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoSixName}
                   </div>
                 </div>
@@ -3189,9 +3199,9 @@ class Video extends Component {
                       className="imgClassVoice voiceVideoClass"
                     />
                   }
-                  <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
+                  <canvas style={{ display: (this.state.videoSevenName && !this.state.voiceVideoSeven) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView7" width="40" height="70"></canvas>
 
-                    <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                    <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                       {this.state.videoSevenName}
                     </div>
 
@@ -3217,9 +3227,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoEightName && !this.state.voiceVideoEight) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView8" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoEightName}
                   </div>
                 </div>
@@ -3234,7 +3244,7 @@ class Video extends Component {
                 <audio id="audio9" autoPlay />
                 <label style={{ display: 'none' }} id="feedId9" type="text" />
                 
-                <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoNineName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoNine && <img
                     alt=""
@@ -3242,9 +3252,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoNineName && !this.state.voiceVideoSix) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView9" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoNineName}
                   </div>
                 </div>
@@ -3261,7 +3271,7 @@ class Video extends Component {
                 <audio id="audio10" autoPlay />
                 <label style={{ display: 'none' }} id="feedId10" type="text" />
                 
-                <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoTenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoTen && <img
                     alt=""
@@ -3269,9 +3279,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTenName && !this.state.voiceVideoTen) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView10" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{  color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoTenName}
                   </div>
                 </div>
@@ -3286,7 +3296,7 @@ class Video extends Component {
                 <audio id="audio11" autoPlay />
                 <label style={{ display: 'none' }} id="feedId11" type="text" />
                 
-                <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoElevenName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoEleven && <img
                     alt=""
@@ -3294,9 +3304,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoElevenName && !this.state.voiceVideoEleven) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView11" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{ color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{ color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoElevenName}
                   </div>
                 </div>
@@ -3312,7 +3322,7 @@ class Video extends Component {
                 <audio id="audio12" autoPlay />
                 <label style={{ display: 'none' }} id="feedId12" type="text" />
                 
-                <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }} className={`customerTitle titleSamlle`}>
+                <div style={{ display: (this.state.videoTwelveName) ? '' : 'none', background: this.props.titleBackground, color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }} className={`customerTitle titleSamlle`}>
                 {
                   this.state.voiceVideoTwelve && <img
                     alt=""
@@ -3320,9 +3330,9 @@ class Video extends Component {
                     className="imgClassVoice voiceVideoClass"
                   />
                 }
-                <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none',width: '25px',height:'25px','margin-top': '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
+                <canvas style={{ display: (this.state.videoTwelveName && !this.state.voiceVideoTwelve) ? '' : 'none',width: '25px',height:'25px',marginTop: '4px' }} className="canvasClassOne" id="subscribe_volumeView12" width="40" height="70"></canvas>
 
-                  <div className='titleName' style={{  color: this.props.titleColor, 'font-size': this.props.fontSize + 'px', 'font-family': this.props.fontFamily }}>
+                  <div className='titleName' style={{  color: this.props.titleColor, fontSize: this.props.fontSize + 'px', fontFamily: this.props.fontFamily }}>
                     {this.state.videoTwelveName}
                   </div>
                 </div>
@@ -3402,6 +3412,13 @@ class Video extends Component {
               <span class="modalSpan">&nbsp;&nbsp;&nbsp;姓名：</span><span>{this.state.employeeName}</span>
               </div>
             </div>
+            {
+              this.state.employeeError && <div className='errorClassInvitation'>
+              <img alt="" src={require("../../assets/img/tooltips2_fail.png").default} />
+              <span>{this.state.employeeError}</span>
+              </div>
+            }
+            
           </Modal>
           <Modal title="签字白板" closable={false} centered={true} visible={this.state.isModalVisibleSign} footer={
             [
@@ -3429,11 +3446,11 @@ class Video extends Component {
               {camera}
               <div>麦克风设备：</div>
               {microphone}
+              <div>扬声器设备：</div>
+              {speaker}
             </div>
           </Modal>
-          <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"
-            webkit-playsinline="true" playsInline={true} x5-playsinline="x5-playsinline"
-            x-webkit-airplay="true"></video>
+          <video className="mixedvideo" id="mixedvideo" autoPlay muted={true} width="0" height="0"></video>
         </Spin>
       </div>);
   }
@@ -3442,8 +3459,11 @@ Video.defaultProps = {
   tellerAccount: 't001',
   businessNumber: '123',
   callbackUrl: 'http://47.102.126.132:8720/hsbc/callback',
+  // roomServerUrl: 'wss://app.uat.dsp.hsbcfts.com.cn/mpaas/mrtc/ws', 
   roomServerUrl: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
+
   resourcePath: 'https://counter-web.leimondata.cn:7199',
+  // resourcePath: 'https://zuul.uat.dsp.hsbcfts.com.cn/wealth/js/',
   prohbiitPrompt: '当前无客户',
   voiceColor: '#0AE544',
   titleBackground: 'rgba(0,0,0,0.65)',

package/packages/pages/video/video.less

@@ -42,7 +42,7 @@
   font-weight: bold;
   height: 170px;
   position: relative;
-  background: #333;
+  background: rgba(0, 0, 0, 0.65);
   margin-bottom: 20px;
   border-radius: 6px;
 }
@@ -115,6 +115,7 @@
   // border: 0px;
   outline: none;
   font-size: 17px;
+  padding: 0 5px;
   border: 1px #707070 solid;
 }
 .modalSpan{
@@ -154,6 +155,7 @@
   background: #f3f3f3;
   color: #333;
   border-radius: 0 4px 4px 4px;
+  text-align: left;
   // height:  ~"calc(100vh - 130px)";
   // position: absolute;
   // z-index: 1;
@@ -164,7 +166,7 @@
     .video{
       width: 100%;
       height: 100%;
-      background: #333;
+      background: rgba(0, 0, 0, 0.65);
     }
   }
 }
@@ -387,33 +389,49 @@
 .radio i {
   display: block;
   position: absolute;
-  top: 3px;
+  top: 50%;
   left: 2px;
-  width: 15px;
-  height: 15px;
+  width: 12px;
+  height: 12px;
+  transform: translateY(-50%);
   outline: 0;
   border: 1px solid rgb(133, 133, 133);
   background: transparent;
   border-radius: 50%;
   transition: border-color .3s;
   -webkit-transition: border-color .3s;
+  box-sizing: content-box;
 }
 
 .radio input+i:after {
   position: absolute;
   content: '';
-  top: 1.5px;
-  left: 1.5px;
-  width: 10px;
-  height: 10px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  width: 50%;
+  height: 50%;
   border-radius: 50%;
   background-color: #269792;
-  border: 1px solid #269792;
+  // border: 1px solid #269792;
   opacity: 0;
   transition: opacity .1s;
   -webkit-transition: opacity .1s;
+  box-sizing: content-box;
 }
 
 .radio input:checked+i:after {
   opacity: 1;
+}
+.errorClassInvitation{
+  width: 90%;
+  height: 50px;
+  margin: 50px 30px 0px;
+  background: #F9F2F3;
+  border: 1px #E5B2B5 solid;
+    img{
+      margin: 15px 20px;
+      width: 18px;
+    height: 18px;
+    }
 }