react_hsbc_teller 1.9.15 → 1.9.17

package/package.json

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

package/packages/pages/video/video.jsx

@@ -59,7 +59,7 @@ let videoName
 let muteJson = new Map()
 let dateTime = 0
 let messageValue = ''
-let beautyType = false
+// let beautyType = false
 // let beautyNum = 0  // 0-关闭  1--弱  2--中 5---高
 let rateList = []
 let beautyDiv = {};
@@ -108,6 +108,7 @@ function clearStreamRemain() {
     document.body.removeChild(beautyDiv.beauty_div);
     beautyDiv.beauty_div = null;
   }
+  console.log('clearStreamRemain!!!!!')
   beautyDiv = {};
 };
 async function startBeauty(stream) {
@@ -167,6 +168,7 @@ class Video extends Component {
   }
   cancel = axios.CancelToken.source()
   state = {
+    beautyType: false,
     beautyName: '开启美颜',
     signNoClick: false,
     listVideoPicture: [],
@@ -292,7 +294,7 @@ class Video extends Component {
   saveLog = (val) => {
     axios({
       method: 'get',
-      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.15&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
+      baseURL: this.props.logUrl + '&message=' + encodeURIComponent(val) + '&react_hsbc_teller=1.9.17&logTime=' + Date.now() + '&mtoken=' + encodeURIComponent(this.state.rtoken) + '&roomId=' + encodeURIComponent(this.state.channelId) + '&sessionId=' + encodeURIComponent(this.state.sessionId) + '&appointmentID=' + this.props.businessNumber,
 
     }).then(res => {
 
@@ -467,6 +469,7 @@ class Video extends Component {
     // 允许最大断网时间 (超过未重连, 直接关闭)
     config_param.network_check_timeout = 10000;
     this.test_controller.Connect(config_param)
+    this.saveLog('mrtc connect start')
   };
   // 初始化视频
   ConnectMRTC = () => {
@@ -523,6 +526,7 @@ class Video extends Component {
       }
     ];
     this.test_controller.InitRoomConfig(config_param)
+    this.saveLog('mrtc InitRoomConfig start')
   };
   rateAll = async () => {
     let data = ''
@@ -806,6 +810,8 @@ class Video extends Component {
           // faceFailReason: result.message
         })
         this.errorCodeClick('face',result.code)
+        // this.saveLog('meeting ID&V error, code=' + result.code )
+        this.saveLog('face recognition api error code ' + result.code + '. [ LIVE_SIGN_ALI_FACE_RECOGNITION_ERROR ]')
       }
 
 
@@ -1328,7 +1334,7 @@ class Video extends Component {
       else if (Mival.typeId == 1220) {
         // 一炒多的图片  1214
         if (Mival.sessionId == this.state.sessionId) {
-          this.saveLog('imgCallback success' + Mival.data.type)
+          this.saveLog('imgCallback success,  typeId=1220, type=' + Mival.data.type)
           this.tabTitlesClick('customerScreen', 'delect')
           this.props.imgCallback({
             type: Mival.data.type + '',
@@ -1339,11 +1345,12 @@ class Video extends Component {
         }
       } else if (Mival.typeId == 1321) {
         this.getBase64Image(Mival.fileName)
+        this.saveLog('signCallback success, typeId=1321, fileName=' + Mival.fileName)
       } else if (Mival.typeId == 1216) {
         // 签字回调  1213
         if (Mival.sessionId == this.state.sessionId) {
           this.tabTitlesClick('customerScreen', 'delect')
-          this.saveLog('signatureCallback success')
+          this.saveLog('signatureCallback success, typeId=1216,')
           this.props.signatureCallback({
             errorType: 0
           })
@@ -1353,6 +1360,7 @@ class Video extends Component {
           // 1-开启，2-关闭
           if (Mival.type == 1) {
             this.switchExternal()
+            this.saveLog('whiteboard start, typeId=1218,')
           } else if (Mival.type == 2) {
             if (streamShare) {
               streamShare.getTracks().forEach(track => track.stop());
@@ -1371,6 +1379,7 @@ class Video extends Component {
                 isWhiteboard: false
               })
             }
+            this.saveLog('whiteboard close, typeId=1218,')
           }
 
         }
@@ -1398,7 +1407,7 @@ class Video extends Component {
         }
       } else if (Mival.typeId == 121305) {
         if (Mival.sessionId == this.state.sessionId) {
-          this.saveLog('signatureCallback fail')
+          this.saveLog('signatureCallback fail, typeId=121305, ')
           this.props.signatureCallback({
             errorType: -1
           })
@@ -1406,7 +1415,7 @@ class Video extends Component {
       } else if (Mival.typeId == 121405) {
         if (Mival.sessionId == this.state.sessionId) {
           console.log('imgCallback')
-          this.saveLog('imgCallback fail')
+          this.saveLog('imgCallback fail, typeId=121405, ')
           this.props.imgCallback({
             type: '',
             file: '',
@@ -1416,6 +1425,7 @@ class Video extends Component {
       } else if (Mival.typeId == 4001) {
         // 手机端停止投屏
         this.tabTitlesClick('customerScreen', 'delect')
+        this.saveLog('app stop sharing screen, typeId=4001, ')
 
       } else if (Mival.typeId == 1401) {
         // 用户修改名字
@@ -1584,7 +1594,7 @@ class Video extends Component {
     // 获取设备失败
     this.test_controller.OnGetDevicesFailed = (code, msg) => {
       console.log('获取设备失败', code, msg)
-      this.saveLog('Failed to get device')
+      this.saveLog('Failed to get device, code='+code)
       this.state.sessionType = false
       this.messageClick('获取设备失败，请检查摄像头设备是否可用或是否禁用摄像头', 'error')
       this.roomCallBack(2, '获取设备失败', 1)
@@ -1625,6 +1635,7 @@ class Video extends Component {
       } else {
         this.test_controller.CreateRoom()
       }
+      this.saveLog('InitRoomConfig successfully')
 
     };
     // 创建房间成功
@@ -1634,6 +1645,7 @@ class Video extends Component {
       this.state.channelId = room_id,
         this.state.rtoken = rtoken
       this.createRoom()
+      this.saveLog('RM mrtc create room successfully, room_id=' + room_id)
     };
     // 创建房间失败
     this.test_controller.OnCreateRoomFailed = (err_code, err_msg) => {
@@ -1645,10 +1657,12 @@ class Video extends Component {
     // 初始化⾳视频成功
     this.test_controller.OnMediaCallSucc = (sid) => {
       console.log('初始化⾳视频成功', sid)
+      this.saveLog('OnMediaCallSucc:' + sid)
     };
     // 初始化音视频失败
     this.test_controller.OnMediaCallFail = (err_code, err_msg) => {
       console.log('初始化音视频失败', err_code, err_msg)
+      this.saveLog('OnMediaCallFail, code=' + err_code)
     };
     // 音视频关闭通知
     this.test_controller.OnMediaClose = (code, sid) => {
@@ -1679,10 +1693,11 @@ class Video extends Component {
       publish_config.publish_tag = 'tag1'
       this.test_controller.Publish(publish_config)
       this.roomCallBack(1, '', 0)
+      this.saveLog('mrtc join room success')
     };
     // 加入房间失败
     this.test_controller.OnJoinRoomFailed = (err_code, err_msg) => {
-      this.saveLog('Join room failed，' + err_code)
+      this.saveLog('mrtc join room failed，' + err_code)
       console.log('加入房间失败', err_code, err_msg)
       // this.setState({
       //   sessionType: false,
@@ -1714,12 +1729,14 @@ class Video extends Component {
         documentError: '',
         isModalVisibleCustomer: false,
       })
+      this.saveLog('mrtc OnSendTextMsgSucc:' + msgId)
     }
     this.test_controller.OnSendTextMsgFailed = (msgId, code, msg) => {
       console.log('发送失败', msgId, code, msg)
       this.setState({
         documentError: '推送授权白板失败，请重试'
       })
+      this.saveLog('mrtc OnSendTextMsgFail:' + msgId +', code=' + code + ',msg=' + msg)
     }
     this.test_controller.OnReceiveTextMsg = (uid, msg) => {
       console.log('收到手机端消息', uid, msg, JSON.parse(msg).typeId, JSON.parse(msg).data.sessionId, this.state.sessionId)
@@ -1729,6 +1746,7 @@ class Video extends Component {
           this.customerFaceClick(this.state.customerList[this.state.customerSelect - 1])
         }
       }
+      this.saveLog('mrtc OnReceiveTextMsg info:', uid, msg, JSON.parse(msg).typeId, JSON.parse(msg).data.sessionId, this.state.sessionId)
     }
     this.test_controller.StreamFilterHandler = async (publish_tag, stream, stream_type, publish_device, media_type) => {
       console.log(`stream processed by client, publish_device=${publish_device}, media_type=${media_type}, publish_tag=${publish_tag},stream_type=${stream_type}`);
@@ -1893,7 +1911,7 @@ class Video extends Component {
     };
     // 发布媒体流失败
     this.test_controller.OnPublishFailed = (sid, err_code, err_msg) => {
-      this.saveLog('发布失败' + err_code)
+      this.saveLog('mrtc OnPublishFailed 发布失败, code=' + err_code)
       console.log('Publishing media stream failed，', sid, err_code, err_msg)
       if (sid == document.getElementById('publish_video1').name) {
         this.state.sessionType = false
@@ -2018,6 +2036,7 @@ class Video extends Component {
     //  推送“新加⼊房间者”给与会者
     this.test_controller.OnNewJoinerIn = (participant) => {
       console.log('新加⼊房间者', participant);
+      this.saveLog('mrtc someone joined room, userId=' + participant)
       this.state.isCustomer = true
     };
     // 推送“有新发布”给与会者
@@ -2257,6 +2276,7 @@ class Video extends Component {
         let data = res ? res.username ? res.username : '客户' : '客户'
         console.log(data)
         this.messageClick((data + '已退出会议'), 'error')
+        this.saveLog(data + ' leave room')
         if (res.userType == 1) {
           // 2--坐席  1--客户
           this.props.userExit({
@@ -2287,6 +2307,7 @@ class Video extends Component {
       console.log('弱网回调', bpsSend, bpsRecv, sid)
       if (sid == document.getElementById('publish_video1').name) {
         this.messageClick('当前网络环境较差', 'error')
+        this.saveLog('mrtc OnNetworkWeak')
       }
     };
     // 开始服务端录制成功
@@ -2294,6 +2315,7 @@ class Video extends Component {
       console.log('开始服务端录制成功', record_id);
       this.state.recordId = record_id
       this.videoRecordCallback('1', true)
+      this.saveLog('mrtc OnStartRemoteRecordSucc')
     };
     // 开始服务端录制失败
     this.test_controller.OnStartRemoteRecordFailed = (
@@ -2303,11 +2325,13 @@ class Video extends Component {
     ) => {
       this.videoRecordCallback('1', false)
       console.log('开始服务端录制失败', record_id, err_code, err_msg)
+      this.saveLog('mrtc OnStartRemoteRecordFailed, code='+err_code)
     };
     // 结束服务端录制成功
     this.test_controller.OnStopRemoteRecordSucc = (recordId) => {
       console.log('结束服务端录制成功', recordId);
       this.videoRecordCallback('2', true)
+      this.saveLog('mrtc OnStopRemoteRecordSucc, recordId='+recordId)
       // this.endSessionValue()
       // 获取服务端录制结果
     };
@@ -2319,6 +2343,7 @@ class Video extends Component {
     ) => {
       this.videoRecordCallback('2', false)
       console.log('结束服务端录制失败', recordId, err_code, err_msg)
+      this.saveLog('mrtc OnStopRemoteRecordFailed, err_code='+err_code)
     };
     // 开启浏览器录制成功
     this.test_controller.OnClientStartRecordSuccess = (
@@ -2464,6 +2489,7 @@ class Video extends Component {
       msg
     ) => {
       console.log('切流失败通知', sid, code, msg)
+      this.saveLog('mrtc OnChangeMediaStreamFailed, code=' + code)
       if (this.state.loading) {
         this.setState({
           loading: false
@@ -2706,6 +2732,13 @@ class Video extends Component {
       clearStreamRemain()
       this.test_controller.LeaveRoom()
       this.test_controller.Disconnect()
+      try {
+        beautySetMode('none');
+        beautyStop();
+        console.log('beautyStop!!')
+      } catch (err){
+        console.error(err)
+      }
     }
     if (this.state.imStatus) {
       console.log('disconnect断开连接')
@@ -2903,7 +2936,7 @@ class Video extends Component {
     }
   }
   componentWillMount() {
-    console.log('hsbc_teller_sdk', '1.9.15')
+    console.log('hsbc_teller_sdk', '1.9.17')
     let arr = []
     for(let i=1;i<=12;i++){
       arr.push({
@@ -3264,7 +3297,8 @@ class Video extends Component {
         isModalVisibleSFP: false,
         disabledIdCard: false,
         isStaffState: 'success',
-        loadingStaff: false
+        loadingStaff: false,
+        authorizeStaffId:  this.state.StaffidSFP,
       })
     }).catch((err) => {
       console.log(err)
@@ -3302,6 +3336,10 @@ class Video extends Component {
         idCardNumber: '',
         idCardName: '',
         certificateValidity: '',
+        resultIdCardName: '',
+        resultIdCardNumber: '',
+        resultCertificateDate: '',
+        authorizeStaffId: ''
       })
     // })
     } else {
@@ -3312,6 +3350,10 @@ class Video extends Component {
         idCardNumber: this.state.idCardNumber,
         customerName: this.state.customerName,
         certificateValidity: this.state.certificateValidity,
+        resultIdCardName: this.state.resultIdCardName,
+        resultIdCardNumber: this.state.resultIdCardNumber,
+        resultCertificateDate: this.state.resultCertificateDate,
+        authorizeStaffId: this.state.authorizeStaffId,
       }
       console.log(this.state.userIdCardResults)
       this.setState({
@@ -3326,6 +3368,10 @@ class Video extends Component {
         certificateValidity: '',
         idCardNumber: '',
         idCardName: '',
+        resultIdCardName: '',
+        resultIdCardNumber: '',
+        resultCertificateDate: '',
+        authorizeStaffId: '',
         titleModal: '身份验证',
         // clickedFacial: true,
         facialImg: faceImage,
@@ -3340,18 +3386,38 @@ class Video extends Component {
   // ocr结果入库
   confirmCallback = async (data) => {
     try {
-      let result = await API.confirmCallback({
-        idCardName: this.state.idCardName,
+      // 原始证件参数
+      let data = {
+        idCardName: this.state.resultIdCardName,
         staffId: this.props.tellerAccount,
         activityId: this.props.businessNumber,
         appAccount: this.state.faceCustomerUid,
-        idCardNumber: this.state.idCardNumber,
+        idCardNumber: this.state.resultIdCardNumber,
         sessionId: this.state.sessionId,
         certificateType: this.state.certificateType,
         customerName: this.state.customerName,
-        startDate: this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '',
-        endDate: this.state.documentType == 'PASSPORT_CARD' ? this.state.certificateValidity ? this.state.certificateValidity.split('-')[0]: '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '',
-      });
+        startDate: this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.resultCertificateDate ? this.state.resultCertificateDate.split('-')[0] : '',
+        endDate: this.state.documentType == 'PASSPORT_CARD' ? this.state.resultCertificateDate ? this.state.resultCertificateDate.split('-')[0]: '' : this.state.resultCertificateDate ? this.state.resultCertificateDate.split('-')[1] : '',
+      }
+      // 添加修改后的证件参数
+      if (this.state.authorizeStaffId) {
+        data.authorizeStaffId = this.state.authorizeStaffId
+      }
+      if (this.state.idCardName != this.state.resultIdCardName) {
+        data.reviseIdCardName = this.state.idCardName
+      }
+      if (this.state.idCardNumber != this.state.resultIdCardNumber) {
+        data.reviseIdCardNumber = this.state.idCardNumber
+      }
+      let reviseCertificateStartDate = this.state.documentType == 'PASSPORT_CARD' ? '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[0] : '';
+      let reviseCertificateEndDate = this.state.documentType == 'PASSPORT_CARD' ? this.state.certificateValidity ? this.state.certificateValidity.split('-')[0]: '' : this.state.certificateValidity ? this.state.certificateValidity.split('-')[1] : '';
+      if (reviseCertificateStartDate != data.startDate) {
+        data.reviseCertificateStartDate = reviseCertificateStartDate
+      }
+      if (reviseCertificateEndDate != data.endDate) {
+        data.reviseCertificateEndDate = reviseCertificateEndDate
+      }
+      let result = await API.confirmCallback(data);
       console.log('confirmCallback', result)
       if (result.code == 200) {
         // console.log(data)
@@ -3401,6 +3467,8 @@ class Video extends Component {
                 this.setState({
                   idCardNumber: result.data.idCardNumber,
                   idCardName: result.data.idCardName,
+                  resultIdCardName:  result.data.idCardName,
+                  resultIdCardNumber: result.data.idCardNumber,
                   loadingFace: false,
                   cardFailReason: '',
                   cardResuly: 'success',
@@ -3409,6 +3477,8 @@ class Video extends Component {
                 this.setState({
                   idCardNumber: result.data.idCardNumber,
                   idCardName: result.data.idCardName,
+                  resultIdCardName:  result.data.idCardName,
+                  resultIdCardNumber: result.data.idCardNumber,
                   certificateValidityType: false,
                   cardFailReason: '证件已过期[#'+result.code+'#]',
                   loadingFace: false,
@@ -3420,7 +3490,9 @@ class Video extends Component {
               this.setState({
                 // isModalVisibleFacial: false
                 idCardNumber: result.data.idCardNumber,
-                idCardName: result.data.idCardName
+                idCardName: result.data.idCardName,
+                resultIdCardName:  result.data.idCardName,
+                resultIdCardNumber: result.data.idCardNumber,
               })
               this.ocrCallback(2)
             }
@@ -3438,6 +3510,7 @@ class Video extends Component {
             if(this.state.idCardName && this.dateNewTime(endDate)) {
               this.setState({
                 certificateValidity: startDate + '-' + endDate,
+                resultCertificateDate: startDate + '-' + endDate,
                 loadingFace: false,
                 cardFailReason: '',
                 cardResuly: 'success',
@@ -3446,6 +3519,7 @@ class Video extends Component {
             } else if(this.state.idCardName && !this.dateNewTime(endDate)) {
               this.setState({
                 certificateValidity: startDate + '-' + endDate,
+                resultCertificateDate: startDate + '-' + endDate,
                 loadingFace: false,
                 certificateValidityType: false,
                 cardFailReason: '证件已过期[#'+result.code+'#]',
@@ -3484,13 +3558,16 @@ class Video extends Component {
             this.setState({
               // isModalVisibleFacial: false
               idCardNumber: result.data.resident.idNum,
-              idCardName: result.data.resident.name
+              idCardName: result.data.resident.name,
+              resultIdCardName:  result.data.resident.name,
+              resultIdCardNumber: result.data.resident.idNum,
             })
             this.ocrCallback(2)
           } else if (result.data.side == 'back' && val != 1) {
             console.log(result.data.resident.startDate, result.data.resident.endDate)
             this.setState({
               certificateValidity: result.data.resident.startDate + '-' + result.data.resident.endDate,
+              resultCertificateDate: result.data.resident.startDate + '-' + result.data.resident.endDate,
               loadingFace: false,
               cardFailReason: result.code == 40002 ? '证件已过期[#'+result.code+'#]' : '',
               certificateValidityType: result.code == 40002 ? false : true,
@@ -3508,7 +3585,10 @@ class Video extends Component {
           this.setState({
             idCardNumber: result.data.passport.passportCode,
             idCardName: result.data.passport.nameEN,
+            resultIdCardName: result.data.passport.nameEN,
+            resultIdCardNumber: result.data.passport.passportCode,
             certificateValidity: result.data.passport.expiryDate,
+            resultCertificateDate: result.data.passport.expiryDate,
             loadingFace: false,
             cardFailReason: result.code == 30002 ? '证件已过期[#'+result.code+'#]' : '',
             certificateValidityType: result.code == 30002 ? false : true,
@@ -3520,7 +3600,10 @@ class Video extends Component {
           this.setState({
             idCardNumber: result.data.permission.cardNum,
             idCardName: result.data.permission.nameEN,
+            resultIdCardName: result.data.permission.nameEN,
+            resultIdCardNumber: result.data.permission.cardNum,
             certificateValidity: result.data.permission.validDate,
+            resultCertificateDate: result.data.permission.validDate,
             loadingFace: false,
             cardFailReason: result.code == 50002 ? '证件已过期[#'+result.code+'#]' : '',
             certificateValidityType: result.code == 50002 ? false : true,
@@ -3593,18 +3676,38 @@ class Video extends Component {
     }
     this.handleCancelFacial();
     try {
-      let result = await API.confirmCallback({
-        idCardName: userInfo.idCardName,
+      // 原始证件参数
+      let data = {
+        idCardName: userInfo.resultIdCardName,
         staffId: this.props.tellerAccount,
         activityId: this.props.businessNumber,
         appAccount: this.state.faceCustomerUid,
-        idCardNumber: userInfo.idCardNumber,
+        idCardNumber: userInfo.resultIdCardNumber,
         sessionId: this.state.sessionId,
         certificateType: 'ID_CARD',
         customerName: userInfo.customerName,
-        startDate: userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[0] : '',
-        endDate: userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[1] : '',
-      });
+        startDate: userInfo.resultCertificateDate ? userInfo.resultCertificateDate.split('-')[0] : '',
+        endDate: userInfo.resultCertificateDate ? userInfo.resultCertificateDate.split('-')[1] : '',
+      }
+      // 添加修改后的证件参数
+      if (userInfo.authorizeStaffId) {
+        data.authorizeStaffId = userInfo.authorizeStaffId
+      }
+      if (userInfo.idCardName != userInfo.resultIdCardName) {
+        data.reviseIdCardName = userInfo.idCardName
+      }
+      if (userInfo.idCardNumber != userInfo.resultIdCardNumber) {
+        data.reviseIdCardNumber = userInfo.idCardNumber
+      }
+      let reviseCertificateStartDate = userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[0] : '';
+      let reviseCertificateEndDate = userInfo.certificateValidity ? userInfo.certificateValidity.split('-')[1] : '';
+      if (reviseCertificateStartDate != data.startDate) {
+        data.reviseCertificateStartDate = reviseCertificateStartDate
+      }
+      if (reviseCertificateEndDate != data.endDate) {
+        data.reviseCertificateEndDate = reviseCertificateEndDate
+      }
+      let result = await API.confirmCallback(data);
       console.log('confirmCallback', result)
       if (result.code == 200) {
         // console.log(data)
@@ -4354,14 +4457,14 @@ class Video extends Component {
     // publish_config.video_profile_diy={width:640, height:360, frameRate:15, bitrate:400}
     // this.test_controller.ChangeMediaStream(publish_config)
     // beautyNum =  beautyNum == 0 ? 1 : 0
-    if (beautyType) {
-      beautyType = false
+    if (this.state.beautyType) {
+      this.state.beautyType = false
       this.setState({
         beautyName: '开启美颜'
       })
       beautySetMode('none')
     } else {
-      beautyType = true
+      this.state.beautyType = true
       beautySetMode('beauty')
       this.setState({
         beautyName: '关闭美颜'
@@ -4783,8 +4886,7 @@ class Video extends Component {
         
         return a.idIndex - b.idIndex;
     })
-    console.log('排序后list');
-    console.log(list);
+    console.log('排序后list', list);
     for(let i=0;i<12;i++){
       for(let j=0;j<12;j++){
         if (list[j].videoName == this.state.videoList[i].videoName) {
@@ -4935,7 +5037,7 @@ class Video extends Component {
                   <CanvasHome zIndexNum={this.state.zIndexNum} style={{ width: isGraffiti ? this.state.widthVideo + 'px' : this.state.whiteboardWidth + 'Px', height: this.state.whiteboardHeight + 'Px', top: this.state.whiteboardTop + 'Px', left: isGraffiti ? this.state.leftVideo + 'px' : this.state.whiteboardLeft + 'Px' }}>
                     {this.state.operateShow &&
                       <OpreateDiv id="operate">
-                        <span style={{ color: this.state.selectSpan == 'pen' ? '#1890ff' : '#333' }} onClick={() => this.setTool('pen')}>铅笔</span>
+                        <span style={{ color: this.state.selectSpan == 'pen' ? '#1890ff' : '#333' }} onClick={() => this.setTool('pen')}>黑笔</span>
                         <span style={{ color: this.state.selectSpan == 'redPen' ? '#1890ff' : '#333' }} onClick={() => this.setStrokeColor()}>红笔</span>
                         <span style={{ color: this.state.selectSpan == 'eraser' ? '#1890ff' : '#333' }} onClick={() => this.setTool('eraser')}>橡皮</span>
                         <span onClick={() => this.setOpreate('undo')}>撤销</span>