react_hsbc_teller 0.1.8 → 0.2.2

package/package.json

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

package/packages/api/server.js

@@ -24,7 +24,7 @@ export default class Server {
       _option = {
         method,
         url,
-        baseURL: envconfig.baseURL,
+        baseURL: window.sessionStorage.getItem('baseURL'),
         timeout: 30000,
         params: null,
         data: params,

package/packages/envconfig/envconfig.js

@@ -4,9 +4,9 @@
 let baseURL; 
 // let imgUrl = '//elm.cangdu.org/img/';
 if(process.env.NODE_ENV === 'development'){
-  baseURL = 'http://47.102.126.132:8082/api/leimon-counter-api';
+  baseURL = 'https://counter-web.leimondata.cn:18082/api/leimon-counter-api';
 }else{
-  baseURL = 'http://47.102.126.132:8082/api/leimon-counter-api';
+  baseURL = 'https://counter-web.leimondata.cn:18082/api/leimon-counter-api';
 }
 
 

package/packages/pages/foot/foot.jsx

@@ -50,6 +50,9 @@ export default class foot extends Component {
         })
         this.props.customerFaceClick(item)
     }
+    switchExternal=()=>{
+        this.props.switchExternal()
+    }
     render() {
         const {isTranscribing,img,cameraImg,screenName,suspendName,customerList} = this.props
         const content = (
@@ -86,7 +89,7 @@ export default class foot extends Component {
                         <div className="one" onClick={this.transcribingClick.bind(this)}>
                         <img src={require("../../assets/img/icon_copy.png").default} alt="" />
                         <div className="text">
-                            抄录
+                            签字
                         </div>
                     </div>
                     }
@@ -132,6 +135,12 @@ export default class foot extends Component {
                             画中画
                         </div>
                     </div>
+                    <div className="one" onClick={this.switchExternal.bind(this)}>
+                        <img src={require("../../assets/img/huazhonghua.png").default} alt="" />
+                        <div className="text">
+                            切换外部
+                        </div>
+                    </div>
                 </div>
                 <div className="total totalThree">
                     <button className="buttonClass" onClick={this.endSession.bind(this)}>

package/packages/pages/foot/foot.less

@@ -34,6 +34,7 @@ line-height: 11px;
     justify-content: center;
 }
 .totalThree{
+    margin-top: 10px;
     justify-content: flex-end;
 }
 .buttonClass{

package/packages/pages/index.jsx

@@ -24,6 +24,7 @@ class Main extends Component {
     window.localStorage.setItem("langData", JSON.stringify(Object.assign(res)));
   }
   componentWillMount() {
+    window.sessionStorage.setItem('baseURL',this.props.baseURL)
     localStorage.setItem("a_lang", this.props.lang)
     if (localStorage.getItem("langData")){
       this.setState({langPackage: JSON.parse(localStorage.getItem("langData"))})
@@ -34,6 +35,7 @@ class Main extends Component {
 
   render() {
     const lang = this.props.lang
+    
     // console.log(this.state.langPackage[lang])
     return (
       <IntlProvider locale={lang} messages={this.state.langPackage[lang]}>
@@ -42,5 +44,9 @@ class Main extends Component {
     );
   }
 }
+Main.defaultProps = {
+  lang: 'zh',
+  baseURL:'https://counter-web.leimondata.cn:18082/api/leimon-counter-api',
 
+}
 export default Main

package/packages/pages/video/video.jsx

@@ -16,6 +16,8 @@ import Modal from "antd/lib/modal";
 import 'antd/lib/modal/style'
 import message from "antd/lib/message";
 import 'antd/lib/message/style'
+import Spin from "antd/lib/spin";
+import 'antd/lib/spin/style'
 import { Button } from '../../../node_modules/antd/lib/index';
 import CanvasDraw from "react-canvas-draw";
 import { FormattedMessage, injectIntl  } from 'react-intl';
@@ -27,8 +29,9 @@ const LEAVE_TYPE = {
 class Video extends Component {
   signCanvas = React.createRef();
   state = {
+    isPDF: false,
+    loading: false,
     isModalVisibleSign: false,
-    signData: {},
     titleModal: '人脸识别',
     faceCustomerType: 1, // 1无感人脸，2ocr
     faceCustomerUid: '',
@@ -36,9 +39,6 @@ class Video extends Component {
     employeeNumber: '',
     employeeName: '',
     isModalVisibleInvitation: false,
-    isTranscribing: false,
-    transcribingData: '',
-    isPDF: false,
     roomCustomerList: [],
     facialImg: '',
     isModalVisibleFacial: false,
@@ -61,13 +61,10 @@ class Video extends Component {
     workSpaceId: '',
     bizName: '',
     appId: '',
-    // room_server_url: 'wss://cn-hangzhou-mrtc.cloud.alipay.com/ws',
-    room_server_url: 'wss://mrtc.mpaas.cn-hangzhou.aliyuncs.com/ws',
     channelId: this.props.roomId,
     rtoken: this.props.mtoken,
     sessionId: this.props.sessionId,
     imRoomId: this.props.imRoomId,
-    html_string: '<span style="color:red">123456</span>',
   };
   // eslint-disable-next-line no-undef
   test_controller = '';
@@ -128,7 +125,7 @@ class Video extends Component {
     config_param.biz_name = this.state.bizName; // 'demo'
     config_param.appId = this.state.appId;
 
-    config_param.room_server_url = this.state.room_server_url;
+    config_param.room_server_url = this.props.roomServerUrl;
     // 允许最大断网时间 (超过未重连, 直接关闭)
     config_param.network_check_timeout = 10000;
     this.test_controller.Connect(config_param)
@@ -514,20 +511,6 @@ class Video extends Component {
         if (Mival.sessionId == this.state.sessionId) {
           this.endSession('customerHangUp')
         }
-      } else if (Mival.typeId == 1214) {
-        console.log(Mival);
-        if (Mival.sessionId == this.state.sessionId) {
-          this.setState({
-            transcribingData: Mival,
-            isTranscribing: true
-          });
-        }
-
-      } else if (Mival.typeId == 1216) {
-        this.setState({
-          signData: Mival.callbackUrl,
-          isModalVisibleSign: true
-        })
       }
     };
 
@@ -1098,36 +1081,40 @@ class Video extends Component {
     }
   }
   addToScript = () => {
+    this.setState({
+      loading: true,
+    })
+    console.log( this.props.resourcePath + "/log4b.js")
     const _dependScripts = [
-      "http://dns.leimon.xyz/log4b.js",
-      "http://dns.leimon.xyz/meeting_api_util.js",
-      "http://dns.leimon.xyz/mcu.js",
-      "http://dns.leimon.xyz/client_record.js",
-      "http://dns.leimon.xyz/meeting_vod.js",
-      "http://dns.leimon.xyz/remote_record.js",
-      "http://dns.leimon.xyz/meeting_invite.js",
-      "http://dns.leimon.xyz/meeting_im.js",
-      "http://dns.leimon.xyz/meeting_camera_stream.js",
-      "http://dns.leimon.xyz/meeting_file_stream.js",
-      "http://dns.leimon.xyz/meeting_desk_stream.js",
-      "http://dns.leimon.xyz/meeting_html_stream.js",
-      "http://dns.leimon.xyz/meeting_beautify_stream.js",
-      "http://dns.leimon.xyz/stream.js",
-      "http://dns.leimon.xyz/room.js",
-      "http://dns.leimon.xyz/backgroundBlur.js",
-      "http://dns.leimon.xyz/meeting_api.js",
-      "http://dns.leimon.xyz/html2image.js",
-      "http://dns.leimon.xyz/reconnecting-websocket.min.js",
-      "http://dns.leimon.xyz/mtc_api.js",
-      "http://dns.leimon.xyz/BandwidthHandler.js",
-      "https://gw.alipayobjects.com/os/lib/recordrtc/5.5.9/RecordRTC.min.js",
-      "https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.2",
-      "https://cdn.jsdelivr.net/npm/@tensorflow-models/body-pix@2.0",
-      "http://dns.leimon.xyz/pdf.js",
-      "http://dns.leimon.xyz/EBML.js",
-      "http://dns.leimon.xyz/adapter.js",
-      "http://dns.leimon.xyz/beauty.js",
-      "http://dns.leimon.xyz/getMediaInfo.js",
+      // https://counter-web.leimondata.cn:7199
+      this.props.resourcePath + "/log4b.js",
+      this.props.resourcePath + "/meeting_api_util.js",
+      this.props.resourcePath + "/mcu.js",
+      this.props.resourcePath + "/client_record.js",
+      this.props.resourcePath + "/meeting_vod.js",
+      this.props.resourcePath + "/remote_record.js",
+      this.props.resourcePath + "/meeting_invite.js",
+      this.props.resourcePath + "/meeting_im.js",
+      this.props.resourcePath + "/meeting_camera_stream.js",
+      this.props.resourcePath + "/meeting_file_stream.js",
+      this.props.resourcePath + "/meeting_desk_stream.js",
+      this.props.resourcePath + "/meeting_html_stream.js",
+      this.props.resourcePath + "/meeting_beautify_stream.js",
+      this.props.resourcePath + "/stream.js",
+      this.props.resourcePath + "/room.js",
+      this.props.resourcePath + "/backgroundBlur.js",
+      this.props.resourcePath + "/meeting_api.js",
+      this.props.resourcePath + "/html2image.js",
+      this.props.resourcePath + "/reconnecting-websocket.min.js",
+      this.props.resourcePath + "/mtc_api.js",
+      this.props.resourcePath + "/BandwidthHandler.js",
+      this.props.resourcePath + "/RecordRTC.min.js",
+      // "https://gw.alipayobjects.com/os/lib/recordrtc/5.5.9/RecordRTC.min.js",
+      this.props.resourcePath + "/pdf.js",
+      this.props.resourcePath + "/EBML.js",
+      this.props.resourcePath + "/adapter.js",
+      this.props.resourcePath + "/beauty.js",
+      this.props.resourcePath + "/getMediaInfo.js",
     ]
     const that = this
     let i = 0
@@ -1151,6 +1138,9 @@ class Video extends Component {
             script.onload = () => {
               that.test_controller = new McuController();
               that.mountClick()
+              that.setState({
+                loading: false,
+              })
             }
           }
         } else {
@@ -1439,10 +1429,10 @@ class Video extends Component {
       isModalVisibleFacial: false
     })
   };
+  // 坐席签字
   transcribingClick = () => {
-    callNimIM('sendCustomCmdMsg', {
-      customId: this.state.imRoomId,
-      content: JSON.stringify(this.state.transcribingData)
+    this.setState({
+      isModalVisibleSign: true,
     })
   };
   invitationClick = () => {
@@ -1531,7 +1521,6 @@ class Video extends Component {
     try {
       let result = await API.counterSign({
         sessionId: this.state.sessionId,
-        callbackUrl: this.state.signData,
         file: data.file
       });
       console.log(result)
@@ -1539,7 +1528,6 @@ class Video extends Component {
         message.success('签字成功')
         this.setState({
           isModalVisibleSign: false,
-          signData: ''
         })
       } else {
         message.success('签字失败')
@@ -1553,10 +1541,17 @@ class Video extends Component {
       file: this.signCanvas.current.canvas.drawing.toDataURL('image/png')
     })
   }
+  switchExternal=()=>{
+    this.setState({
+      isPDF: true
+    })
+  }
   render() {
-
+    const pdfChildren = React.cloneElement(this.props.children,{width: 100, height: 100, id: 12})
     return (
+      
       <div className="all">
+        <Spin spinning={this.state.loading} tip="视频初始化中...">
         <Header></Header>
         <div className="health">
           <div className="wrapper">
@@ -1626,8 +1621,8 @@ class Video extends Component {
 
             </div>
             <div className={`itemed ${this.state.isBigVideo == 'video2' ? 'item1' : ""}`}>
-              {
-                !this.state.isPDF ? <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
+              
+                <div onClick={this.enlargeClick.bind(this, 'isLangVideo2')}>
                   <video
                     id="video2"
                     autoPlay
@@ -1638,12 +1633,6 @@ class Video extends Component {
                   <label style={{ display: 'none' }} id="feedId2" type="text" />
                   <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView2" width="70" height="70"></canvas>
                 </div>
-                  :
-                  <div className="video" id="touBoxItem">
-                  </div>
-              }
-
-
             </div>
             <div className={`itemed ${this.state.isBigVideo == 'video3' ? 'item1' : ""}`}
               onClick={this.enlargeClick.bind(this, 'isLangVideo3')}>
@@ -1681,18 +1670,23 @@ class Video extends Component {
               <label style={{ display: 'none' }} id="feedId5" type="text" />
               <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView5" width="70" height="70"></canvas>
             </div>
-            <div className={`itemed ${this.state.isBigVideo == 'video6' ? 'item1' : ""}`}
-              onClick={this.enlargeClick.bind(this, 'isLangVideo6')}>
-              <video
-                id="video6"
-                autoPlay
-                muted={true}
-                className="video"
-              />
-              <audio id="audio6" autoPlay />
-              <label style={{ display: 'none' }} id="feedId6" type="text" />
-              <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView6" width="70" height="70"></canvas>
-            </div>
+                  <div onClick={this.enlargeClick.bind(this, 'isLangVideo6')} className={`${this.state.isBigVideo == 'video6' ? (this.state.isPDF ? 'item1' : 'item1 itemed') : "itemed"}`}>
+                       <div style={{ display: (this.state.isPDF) ? '' : 'none', }} id="touBoxItem">
+                       {pdfChildren}
+                       </div>
+                       <div style={this.state.isPDF ? {display:  'none'}: {}}>
+                         <video
+                            id="video6"
+                            autoPlay
+                            muted={true}
+                            className="video"
+                        />
+                        <audio id="audio6" autoPlay/>
+                        <label style={{display: 'none'}} id="feedId6" type="text"/>
+                        <canvas style={{ display: (this.state.isCustomer) ? '' : 'none', }} className="canvasClass" id="subscribe_volumeView6" width="70" height="70"></canvas>
+                       </div>
+                
+              </div>
           </div>
 
         </div>
@@ -1701,7 +1695,6 @@ class Video extends Component {
           screenName={this.state.screenName}
           suspendName={this.state.suspendName}
           cameraImg={this.state.cameraImg}
-          isTranscribing={this.state.isTranscribing}
           customerList={this.state.customerList}
           suspend={this.suspend}
           voice={this.voice}
@@ -1714,6 +1707,7 @@ class Video extends Component {
           invitationClick={this.invitationClick}
           customerFaceClick={this.customerFaceClick}
           ocrClick={this.ocrClick}
+          switchExternal={this.switchExternal}
         ></Foot>
         <Modal cancelText="取消" okText="确定" visible={this.state.isModalVisible} onOk={this.handleOk}
           onCancel={this.handleCancel}>
@@ -1770,8 +1764,9 @@ class Video extends Component {
         <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>
-
+          </Spin>
       </div>
+      
     );
   }
 }
@@ -1779,6 +1774,7 @@ Video.defaultProps = {
   tellerAccount: 't001',
   businessNumber: '123',
   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',
 }
 export default Video

package/packages/pages/video/video.less

@@ -77,7 +77,7 @@
 }
 .health{
   margin: 20px;
-  height: calc(100vh - 15px);
+  height:  ~"calc(100vh - 60px)";
 }
 .all{
   height: 100%;
@@ -129,4 +129,7 @@
   border:1px dashed  #DDDDDD;
   margin: 24px;
   flex:1;
+}
+.ant-spin-nested-loading,.ant-spin-container{
+  height: 100%;
 }

package/src/index.less

@@ -1 +1,6 @@
-.hsbc {}
+.hsbc {
+    height: calc(100vh);
+}
+.hsbc>div {
+    height: 100%;
+}