2019-08-01-02

pc_chat/src/components/chat.vue

@@ -1,6 +1,6 @@
 <template>
-  <div >
-    <!-- v-loading="allLoading" element-loading-text="拼命连接中" -->
+  <div  v-loading="allLoading" element-loading-text="拼命连接中" >
+    <!-- -->
     <el-container class="chatBox">
       <!-- ************************* 头部消息 ************************* -->
       <el-header height='80px'>
@@ -67,46 +67,34 @@
             <!--················ 和机器人会话发送消息 ·············-->
             <div v-for="item in chatCont" :key="item.id">   
                <!-- 用户发文本信息 -->
-              <div class="conversationBox" v-if="item.chat && item.imgUrl == ''">
+              <div class="conversationBox" v-if="item.type =='user'">
                 <div class="timer">{{item.time}}</div>
                 <div class="customer row allAlignment">
                   <div style="width:66px;"></div>
                   <div class="row">
                     <!-- 显示内容 -->
-                    <div class="cont right">
+                    <div v-if="item.chat"  class="cont right">
                       <div v-html="item.chat"></div>
                     </div>
-                    <!-- 头像 -->
-                    <div class="headImg">
-                        <img :src="user_info.avatar" alt="">
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- 用户发送图片 -->
-              <div class="conversationBox" v-if="item.imgUrl && item.imgUrl != ''">
-                <div class="timer">{{item.time}}</div>
-                <div class="customer row allAlignment">
-                  <div></div>
-                  <div class="row">
-                    <!-- 图片展示 -->
-                    <div class=" right noafter" style="width:200px;margin-right:10px; ">
+                    <div v-else class=" right noafter" style="width:200px;margin-right:10px; ">
                       <div slot="file">
                         <img class="el-upload-list__item-thumbnail"  @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
                       </div>
                     </div>
-                    <div class="headImg" style="">
-                        <img :src="user_info.avatar" alt="">
-                    </div>
-                    <!-- 图片放大展示 -->
+
+                    <!-- 图片放大 -->
                     <el-dialog :visible.sync="dialogVisible">
                       <img width="100%" :src="dialogImageUrl" alt="">
                     </el-dialog>
+
+                    <!-- 头像 -->
+                    <div class="headImg">
+                        <img :src="user_info.avatar" alt="">
+                    </div>
                   </div>
                 </div>
               </div>
-
+            
               <!-- 机器人无法回答转人工 -->
               <div class="conversationBox" v-if="item.type == 1001">
                 <div class=" row">
@@ -127,7 +115,7 @@
               </div>
 
               <!-- 机器人回答 -->
-              <div class="conversationBox" v-else-if='item.type == "service" || item.type =="user"'>
+              <div class="conversationBox" v-else-if='item.type == "service"'>
                   <div class=" row">
                     <div class="conversation row">
                       <div class="headImg">
@@ -242,25 +230,6 @@
               <el-dialog :visible.sync="dialogVisible">
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
-        
-              <!-- 用户发送图片信息
-              <div class="conversationBox" v-if="item.imgUrl && item.imgUrl != ''">
-                <div class="timer">{{item.time}}</div>
-                <div class="customer row allAlignment">
-                  <div></div>
-                  <div class="row">
-                    <div class=" right noafter" style="width:200px;margin-right:10px; ">
-                      <div slot="file">
-                        <img class="el-upload-list__item-thumbnail"  @click="handlePictureCardPreview(url+item.imgUrl)" style="width:100%;height:auto;border-radius: 10px;" :src="url+item.imgUrl" alt="">
-                      </div>
-                    </div>
-                    <div class="headImg" style="">
-                        <img :src="user_info.avatar" alt="">
-                    </div>
-                  
-                  </div>
-                </div>
-              </div> -->
             </div>
 
             <!-- 评价 -->
@@ -338,29 +307,6 @@
 
       <el-aside width='255px' v-if="retractShow">
         <el-row class="rt">
-          <!-- <el-col v-if="machineAndAtl == 10" :span='24' class="artificial pd20">
-            <div class="infor">
-              <div>
-                <span>姓名:</span>
-                <span>智能客服</span>
-              </div>
-              <div>
-                <span>工号:</span>
-                <span>001</span>
-              </div>
-              <div>
-                <span>性别:</span>
-                <span>保密</span>
-              </div>
-              <div>
-                <span>职务:</span>
-                <span>咨询客服</span>
-              </div>
-            </div>
-            <div class="headPortrait">
-              <img src="./../assets/st-img/headPortrait.png" alt="">
-            </div>
-          </el-col> -->
           <el-col :span='24' class="artificial pd20">
             <div class="infor">
               <div>
@@ -428,34 +374,6 @@
           <span>确定</span>
         </div>
       </el-card>
-      <!-- 验证框 -->
-      <!-- <el-card class="proving" v-if="provShow">
-        <div class="close" @click="closeEvl(100)">
-          <i></i>
-        </div>
-        <div class="logo">
-          <span>HX</span>
-          <span>668</span>
-        </div>
-        <div class="formBox">
-          <el-input v-model="name" placeholder="姓名"></el-input>
-          <div :class="error?'phone':''">
-            <el-input v-model="phone" placeholder="手机" @blur="sureInfor(1)"></el-input>
-            <span class="tips" v-show="error">请输入正确的手机号</span>
-          </div>
-          <div :class="emlError?'email':''">
-            <el-input v-model="email" placeholder="邮箱地址"  @blur="sureInfor(10)"></el-input>
-            <span class="tips" v-show="emlError">请输入正确的手机号</span>
-          </div>
-          <div class="vertion">
-            <el-input v-model="vertion" placeholder="请输入图形验证码"></el-input>
-            <span></span>
-          </div>
-        <div class="sure" @click="yySure()">
-          <span>确定</span>
-        </div>
-        </div>
-      </el-card> -->
       <div class="zzBox"  v-if="zzShow"></div>
       <!-- </div> -->
     </el-container>
@@ -521,14 +439,14 @@ export default {
       timerVote:'', //存储上一次时间
       curtTimer:'',//当前时间
       returnTimer : '',//返回当前时间
-      isConnection:true,//人工分组列表开关
+      // isConnection:true,//人工分组列表开关
       chatNum : '', // 会话数量
       comtSuccess : false, // 评论发送成功显示
       comtCount : '', // 评论成功返回的满意度
       retractShow:true, // 展开侧边栏
       sensitive :[], //敏感词1
       senType:false,//敏感词状态
-      sensitiveNumber:0,//敏感词状态
+      sensitiveNumber:0,//敏感词次数
       doubSensitive:[],//重复的敏感词
       senInfo:'', //敏感词数据
       // sensitiveWordsNumber:0,
@@ -537,6 +455,7 @@ export default {
       serverNotOnlin:false , //客服掉线
       willOverTime:'' , //超时关闭会话
       allLoading:true , //整个页面加载中
+      webTime:'',//网络时间
     }
   },
   methods:{
@@ -569,12 +488,7 @@ export default {
       console.log('ddsd');
     },
     
-    /***************传输成功之后返回图片*************** */
-    handleAvatarSuccess(res, file) {
-      this.dialogUrl = true;
-      this.img = res.data.src;
-      this.sendMessage();
-    },
+    /***************发送图片***************/
     beforeAvatarUpload(file){
       let self = this
       const isJPG = file.type =='image/jpeg'||'image/jpg'||'image/png'||'image/svg';
@@ -588,30 +502,26 @@ export default {
       }
       // 压缩图片
       //         this.$public.imgPreview(picavalue, function(imgSrc, config, formData) {
-      //   // console.log(imgSrc,config,formData);
+        //   // console.log(imgSrc,config,formData);
       //   self.dialogImageUrl = imgSrc;
       // });
       return isJPG && isLt2M;
     },
     handError(err, file, fileList){
-    // 获取当前发送时间
+      // 获取当前发送时间
     },
      
+    /***************传输成功之后返回图片*************** */
+    handleAvatarSuccess(res, file) {
+      this.dialogUrl = true;
+      this.img = res.data.src;
+      this.sendMessage();
+    },
     /***************图片放大*************** */
     handlePictureCardPreview(url){
       this.dialogImageUrl = url;
       this.dialogVisible = true;
     },
-    // // 关闭框
-    // closeEvl(type){
-    //   // 10为评价框，100为验证框
-    //   if(type == 10){
-    //     this.evlShow = false;
-    //   }else if(type == 100){
-    //     this.provShow = false;
-    //   }
-    //   this.zzShow = false;
-    // },
 
     /***************弹出评价框*************** */
     ejectEvl(type){
@@ -638,7 +548,7 @@ export default {
       //this.questionShow = true;
     },
 
-    /********准备修改********/
+
     /*******发送消息按钮*******/
     sendInfo(){
       this.closeByServer = false;
@@ -676,13 +586,6 @@ export default {
     
     /***************评价确认*************** */
     evaluateSure(){
-      // 头部
-      /*let obj = {
-        headers:{
-          'Content-Type' :'application/x-www-form-urlencoded',
-          'apiToken' : this.setApiToken('putevaluate','evaluate',this.currTime,'index')
-        }
-      }*/
       // 参数
       let params = {
         'evaluateId' : this.satisfaction,
@@ -713,9 +616,9 @@ export default {
        this.zzShow = false;
     },
    
-    /***************改变人工客服状态*************** */
+    /***************转人工客服列表*************** */
     changeService(){
-      if(!this.isConnection) return
+      // if(!this.isConnection) return
       this.$axios.post('/api/index/groups/index',{},{headers:{
             'Content-Type' :'application/x-www-form-urlencoded',
             'apiToken' : this.setApiToken('index','groups',this.currTime,'index')
@@ -728,7 +631,7 @@ export default {
           this.automaticRolling();
         }
       })
-      this.isConnection = false;
+      // this.isConnection = false;
     },
  
     /***************表情点击*************** */
@@ -755,20 +658,6 @@ export default {
         }
       }
     },
-    /****************************** */
-    /***************获取客服信息*************** */
-    // getService(){
-    //   let obj = {
-    //     headers:{
-    //       'Content-Type' :'application/x-www-form-urlencoded',
-    //       'apiToken' : this.setApiToken('userinfo','index',this.currTime,'service')
-    //     }
-    //   }
-    //   this.$axios.post('/api/service/index/userInfo','',obj).then(res =>{
-    //     // console.log('res',res)
-    //   })
-    // },
- 
 
     /***************获取热点智能问题*************** */
     getProblem(){
@@ -869,10 +758,32 @@ export default {
       if(redata.message_type == 'getEvaluate'){
         this.consult = true;
       }
-      /*if(redata.message_type == 'evaluate'){
 
-      }*/
-      // 客服信息
+      //返回的会话时间
+      if(redata.message_type == 'webTime'){
+        this.webTime = redata.data.time;
+        if(this.machineAndAtl ==100){
+          let num = this.customerSviceChat.length-1;
+          if(this.customerSviceChat[num].type == "user"){
+            this.$set(this.customerSviceChat[num],'time',redata.data.time);
+          }
+        }else if(this.machineAndAtl ==10){
+          let num  = this.chatCont.length-1;
+          if(1){
+            this.$set(this.chatCont[num],'time',redata.data.time);
+          }
+          // this.chatCont = 
+        }
+
+        console.log(redata.data);
+      }
+
+      //会话超时提示
+      if(redata.message_type == 'overtime'){
+        console.log('接收会话超时');
+      }
+
+      // 链接客服信息
       if(redata.message_type == 'connect'){
         this.artAndLeave = 10;
         this.machineAndAtl = 100;
@@ -884,8 +795,11 @@ export default {
         let content = JSON.parse(redata.data.content)
         this.artAndLeave = 100;
       }
-      // 客服聊天
+      //接收客服会话
       if(redata.message_type == 'chatMessage'){
+      
+        //存储会话超时间
+        this.webTime = redata.data.time;
 
         //会话大于两分钟显示
         let timer = ''
@@ -903,7 +817,6 @@ export default {
             }
           }
         }
-        
         //
         let contType =  this.isJSON(redata.data.content);
         let content = {};
@@ -919,60 +832,24 @@ export default {
           type:'service'
         }
         this.customerSviceChat.push(obj);
-
         // console.log(this.customerSviceChat);
         this.selNum++;
         this.automaticRolling();
       }
+      //接收机器会话
       if(redata.message_type == 'robotMessage'){
-        let obj = {
-          'type' : ''
-        }
         if(redata.data.content == 'error'){
           let _this = this;
-          let leng = this.chatCont.length;
-          for(var i = leng - 1; i < leng; i++){
-            this.chatCont[i].type = this.type++;
-            this.automaticRolling();
-            return;
-          }
+          this.chatCont.push({type:1001 })
+          this.automaticRolling();
         }else{
-          let leng = this.chatCont.length;
-          for(var i = leng - 1; i < leng; i++){
-            let obj = {
+          this.chatCont.push({
               'robot_content':redata.data.content,
               'type' : 'machine'
-            }
-            /*this.chatCont[i].type ='service';
-            this.chatCont[i].cont =redata.data.content;*/
-            this.chatCont.push(obj)
-            this.automaticRolling();
-            return;
-          }
+          })
+          this.automaticRolling();
         }
       }
-      // 客服.
-      /*if(redata.message_type == 'closeBysever'){
-        let obj = {
-          'type' : ''
-        }
-        if(redata.data.content == 'error'){
-          let _this = this;
-          let leng = this.chatCont.length;
-          for(var i = leng - 1; i < leng; i++){
-            this.chatCont[i].type = this.type++;
-            return;
-          }
-        }else{
-          let leng = this.chatCont.length;
-          for(var i = leng - 1; i < leng; i++){
-            this.chatCont[i].type ='service';
-            this.chatCont[i].cont =redata.data.content;
-            return;
-          }
-        }
-        this.automaticRolling();
-      }*/
       // 没有客服上线.
       if(redata.message_type == 'notice'){
         this.artAndLeave = 100;
@@ -1031,6 +908,7 @@ export default {
           time : currentdate,
           chat : this.turnFace(this.shieldingKeyword(this.information)),
           imgUrl : this.img,
+          type:'user'
         }
         this.chatCont.push(datas)
         //消息发送-机器人
@@ -1039,6 +917,7 @@ export default {
           data:{
             groups_id :'1',
             robot_name:this.shieldingKeyword(this.information),
+            webTime:this.webTime,
             robotgroups_id:'1',
           }
         }))     
@@ -1048,25 +927,35 @@ export default {
           time : currentdate,
           content : this.turnFace(this.shieldingKeyword(this.information)),
           imgUrl : this.img,
-          type:'user'
+          type:'user',
         });
         console.log(this.customerSviceChat);
 
         //消息发送-客服
-        this.websocketsend(JSON.stringify({type:'chatMessage',data:{
-          from_name : this.user_info.name,
-          from_avatar:this.user_info.avatar,
-          from_id : this.user_info.id,
-          content : JSON.stringify({
-            text:this.information,
-            img :this.img,
-            type:this.senType
-          }),
-          to_id : this.service.kf_id,
-          to_name :this.service.kf_name,
-          conversationId : this.service.conversationId
-        }}))
+        this.websocketsend(JSON.stringify({
+          type:'chatMessage',
+          data:{
+            from_name : this.user_info.name,
+            from_avatar:this.user_info.avatar,
+            from_id : this.user_info.id,
+            content : JSON.stringify({
+              text:this.information,
+              img :this.img,
+              type:'user'
+            }),
+            webTime:this.webTime,
+            to_id : this.service.kf_id,
+            to_name :this.service.kf_name,
+            sensitiveNumber:this.sensitiveNumber,
+            conversationId : this.service.conversationId
+          }
+        }))
       }
+      // 发送之后清空发送数据
+      this.img = '';
+      this.information = '';
+      //高度自动向上滑动
+      this.automaticRolling();
     },
 
     /**************获取会话间隔是否大于2分钟**************** */
@@ -1086,96 +975,7 @@ export default {
 
     /*************数据发送***************** */
     websocketsend(data){
-      // let dat = JSON.parse(data);
-      // //console.log(data)
-
-      // //发送消息时间获取服务器时间 
-      // let currentdate = '';
-      // if(this.timerVote != ''){
-      //   currentdate = this.newTimer();
-      // }else{
-      //   let date = new Date();
-      //   let curtDate = date.getHours()*60 + date.getMinutes()
-      //   this.timerVote = curtDate;
-      //   currentdate = '';
-      // }
-
-      // // 机器人聊天
-      // if(this.machineAndAtl == 10){
-      //   // if(this.jumpArtl == true){
-      //   //   this.websock.send(data);
-      //   // }else{
-      //   console.log(data);
-      //   //发送消息
-          
-      //   let datas = {
-      //     time : currentdate,
-      //     chat : this.senInfo,
-      //     imgUrl : this.img,
-      //   }
-
-      //     // if(this.dialogUrl == true){
-      //     //   datas.imgUrl = this.img;
-      //     //   this.dialogUrl = false;
-      //     // }else{
-      //     //   if(this.senType == true){
-      //     //     datas.chat = this.senInfo;
-      //     //   }else{
-      //     //     datas.chat = dat.data.robot_name
-      //     //   }
-      //     // }
-      //     // if(this.senType == true){
-      //     //   datas.doubType = 1;
-      //     // }
-      //     datas.chat = this.turnFace(this.senInfo);
-      //     // // datas.chat = this.turnFace(datas.chat);
-      //     // console.log(datas);
-      //     this.chatCont.push(datas)
-      //     this.websock.send(data);
-      //   //}
-          
-          
-      // }else if(this.machineAndAtl == 100){ // 人工聊天
-
-
-      //   this.willOverTime = '';
-      //   this.websock.send(data);
-      //   let datas = {
-      //     time : currentdate,
-      //     cont : '',
-      //     chat:'',
-      //     imgUrl:'',
-      //     doubType:''
-      //   }
-      //   if(this.dialogUrl == true){
-      //     datas.imgUrl = this.userConversation.content.img;
-      //     //datas.imgUrl = dat.data.content.img;
-      //     this.dialogUrl = false;
-      //   }else{
-      //     if(this.senType == true){
-      //       //datas.doubType = 1;
-      //       //datas.cont = this.userConversation.content;
-      //       //datas.cont = data.content;
-      //       datas.cont =  this.userConversation.content.text;
-      //     }else{
-      //       datas.cont =  this.userConversation.content.text;
-      //       //datas.cont =  dat.data.content.text ;
-      //     }
-      //   }
-      //   this.customerSviceChat.push(datas);
-      //   // 清空数据
-      //   this.img = '';
-      //   this.information = '';
-      // }
-
-
       this.websock.send(data);
-      // 发送之后清空发送数据
-      this.img = '';
-      this.information = '';
-      // this.senInfo = '';
-      //高度自动向上滑动
-      this.automaticRolling();
     },
 
 
@@ -1212,10 +1012,6 @@ export default {
       }
       this.information = this.problem[idx].robot_name
       this.sendMessage();
-      // if(this.chatCont.length == 0){
-        //this.chatCont.push(obj)
-      // }
-      this.isConnection = true;
       this.automaticRolling();
     },
 
@@ -1287,29 +1083,22 @@ export default {
   /**************页面加载中挂载**************** */
   mounted(){
     let self = this;
-    // // 设置加载中，2秒
-    // setTimeout(() => {
-    //   this.allLoadingClose();
-    // }, 2000);
-    let t = new Date();
-    this.$axios.get('api/index/index/systime?t='+t).then(res =>{
-      console.log(res.data);
+    this.frceArr = frce.frce;
+    this.$axios.get('api/index/index/systime?t='+new Date()).then(res =>{
       if(res.data.code == 1){
         // 获取系统时间
         let date = res.data.data.time.split(" ");
         date[0] = (new Date( date[0].replace(/-/g,'/')).getTime()) /1000;;
         this.currTime = date[0];
         this.hourse = date[1];
-        // 获取系统token
-        
-       // 获取客服信息
-        // this.getService();
         // 获取机器智能问题
         this.getProblem();
         // 匿名注册
         this.registered();
-        // 初始化websocket
         setTimeout(() => {
+          //关闭加载条
+          this.allLoadingClose();
+          // 初始化websocket
           this.initWebSocket();
         }, 2000);
         // 获取聊天次数
@@ -1320,10 +1109,7 @@ export default {
     })
   },
     // 组件挂载阶段
-  created() {
-    this.frceArr = frce.frce;
 
-  },
   destroyed() {
   this.websock.close() //离开路由之后断开websocket连接
   },