update pc_chat

pc_chat/src/components/chat.vue

@@ -10,16 +10,21 @@
 						<span style="margin-left: 5px;"><img src="./../assets/st-img/on_icon.png" alt=""></span>
 					</el-col>
 					<el-col class="tit nopd" v-else-if="machineAndAtl == 100">
-						<img id="logo" :src="url + logo"  alt="">
+						<img id="logo" :src="url + logo" alt="">
 						<span v-if="service">{{service.serverInfo.name}}</span>
-						<span v-if="service_on" style="margin-left: 5px;"><img src="./../assets/st-img/on_icon.png" alt=""></span>
-						<span v-if="!service_on" style="margin-left: 5px;"><img src="./../assets/st-img/off_icon.png" alt=""></span>
+						<span v-if="service_on" style="margin-left: 5px;"><img src="./../assets/st-img/on_icon.png"
+																			   alt=""></span>
+						<span v-if="!service_on" style="margin-left: 5px;"><img src="./../assets/st-img/off_icon.png"
+																				alt=""></span>
 					</el-col>
 					<el-col>
 						<div class="imgBox">
 							<!-- <el-button v-if="!service_on"  size="mini" type="primary" @click="exit" style="margin-right: 10px;">退出聊天</el-button>-->
-							<el-button v-if="machineAndAtl == 100" size="mini" type="primary" @click="exit" style="margin-right: 10px;">退出聊天</el-button>
-							<i v-if="(selNum + tokNum) >= 4"  @click="ejectEvl(10)" class="sc pointer" :class="selType?'scActy':''"></i>
+							<el-button v-if="machineAndAtl == 100" size="mini" type="primary" @click="exit"
+									   style="margin-right: 10px;">退出聊天
+							</el-button>
+							<i v-if="(selNum + tokNum) >= 4" @click="ejectEvl(10)" class="sc pointer"
+							   :class="selType?'scActy':''"></i>
 							<div v-if="showleaveIcon" style="float: right" class="pointer" @click="leaveMsg()">
 								<span style="font-size: 25px; color: #b3c1e7; vertical-align: middle;" @click="back()"
 									  class="el-icon-chat-line-round"></span>
@@ -188,7 +193,7 @@
 							<!--············· 各种消息提示框 ··············-->
 
 							<!-- 客服不在线帮助提示框 -->
-							<div class="promptBox"  v-if="artAndLeave==100">
+							<div class="promptBox" v-if="artAndLeave==100">
 								<div class="prompt help">
 									<span>{{jumpName + Onlinemsg}}</span>
 									<span class="colE5 ly pointer" @click="leaveMsg()">留言</span>
@@ -196,13 +201,11 @@
 							</div>
 
 							<!-- 客服会话超时 -->
-<!--							<div class="promptBox" v-if="resigtermsg">-->
-<!--								<div class="prompt help">-->
-<!--									<span>客服已经关闭会话，如需继续咨询请重新连接客服</span>-->
-<!--								</div>-->
-<!--							</div>-->
-
-
+							<!--							<div class="promptBox" v-if="resigtermsg">-->
+							<!--								<div class="prompt help">-->
+							<!--									<span>客服已经关闭会话，如需继续咨询请重新连接客服</span>-->
+							<!--								</div>-->
+							<!--							</div>-->
 
 
 							<!-- 排队等待 -->
@@ -294,7 +297,7 @@
 								<!-- 用户发送文本消息 -->
 								<div class="conversationBox" v-if="item.type == 'user' ">
 									<div>
-										<div class="timer">{{webTime}}</div>
+										<div class="timer">{{item.time}}</div>
 										<div class="customer row allAlignment">
 											<div style="width:66px;"></div>
 											<div class="row">
@@ -396,7 +399,7 @@
 
 							<div class="row center allAlignment chattingBox">
 								<div style="height:44px;width:300px;">
-									<textarea  name=""
+									<textarea name=""
 											  id="information"
 											  v-model.trim="information"
 											  cols="30"
@@ -459,7 +462,8 @@
 								<div class="infor">
 									<div>
 										<span>姓名:</span>
-										<span v-if="service.serverInfo" :title="service.serverInfo.name ? service.serverInfo.name : '001客服' ">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
+										<span v-if="service.serverInfo"
+											  :title="service.serverInfo.name ? service.serverInfo.name : '001客服' ">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
 									</div>
 
 									<div>
@@ -472,7 +476,8 @@
 									</div>
 									<div>
 										<span>职务:</span>
-										<span class="duty" :title="service.serverInfo ? service.serverInfo.groupname : '咨询客服'">{{service.serverInfo ? service.serverInfo.groupname : '咨询客服'}}</span>
+										<span class="duty"
+											  :title="service.serverInfo ? service.serverInfo.groupname : '咨询客服'">{{service.serverInfo ? service.serverInfo.groupname : '咨询客服'}}</span>
 									</div>
 								</div>
 								<div class="headPortrait">
@@ -527,7 +532,7 @@
 
 			<el-dialog
 					:close-on-click-modal="true"
-					:close-on-press-escape ="true"
+					:close-on-press-escape="true"
 					title="是否发送图片"
 					:visible.sync="dialogPaste"
 					width="35%">
@@ -544,6 +549,7 @@
 	import '../css/index.css';
 	import frce from '../assets/frce.js';
 	import fk from '../assets/st-img/kf.png'
+
 	export default {
 		data() {
 			return {
@@ -599,7 +605,7 @@
 				serviceList: [], //后台推送的人工客服列表
 				customerWelCome: '', // 客服欢迎语
 				customerSviceChat: [], // 客服会话信息
-				hisSviceChat:[],
+				hisSviceChat: [],
 				serviceImg: '',
 				timerVote: '', //存储上一次时间
 				curtTimer: '',//当前时间
@@ -625,7 +631,7 @@
 				webTime: '',//网络时间
 				changeKeFu: false, //客服转接
 				historyMsg: false, // 是否展示历史信息
-				historyMsgtext:"", // 历史信息内容提示
+				historyMsgtext: "", // 历史信息内容提示
 				/*****************websockt心跳变量*******************/
 				reconnectData: null,
 				lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
@@ -640,15 +646,16 @@
 				waitingMsg: false, // 是否显示等待排队
 				waitingText: "", // 等待内容
 
-				service_on:true, // 现在状态
+				service_on: true, // 现在状态
 				avatarImg: fk,
 
 				dialogPaste: false,
-				pasteUrl:'',//截屏图片
-				fit:'contain', // 图片样式
-				resigtermsg:false, //提示重连
-				evaluateNum:false,
-				jumps:false,
+				pasteUrl: '',//截屏图片
+				fit: 'contain', // 图片样式
+				resigtermsg: false, //提示重连
+				evaluateNum: false,
+				jumps: false,
+				customerTime: ""
 			}
 		},
 		filters: {
@@ -659,8 +666,8 @@
 			 * isDtae:0=月份、1=日期、3=时间
 			 */
 
-			formatDate: function (value, custom='',isDtae=3) {
-				let timeStamp =value;
+			formatDate: function (value, custom = '', isDtae = 3) {
+				let timeStamp = value;
 				var date = new Date();
 				date.setTime(timeStamp * 1000);
 				var y = date.getFullYear();
@@ -674,66 +681,66 @@
 				var second = date.getSeconds();
 				minute = minute < 10 ? ('0' + minute) : minute;
 				second = second < 10 ? ('0' + second) : second;
-				if (isDtae == 0){
+				if (isDtae == 0) {
 					return y + custom + m //+'student';
-				}else if (isDtae ==1){
+				} else if (isDtae == 1) {
 					return y + custom + m + custom + d;
-				}else if(isDtae == 3){
-					return  h + ':' + minute;
-				}else {
+				} else if (isDtae == 3) {
+					return h + ':' + minute;
+				} else {
 					return y + '-' + m + '-' + d + ' ' + h + ':' + minute //+ ':' + second;
 				}
 			}
 		},
 		methods: {
 			/******************qq截图粘贴---获取剪切板数据*****************/
-			getClipboardData( e ){
+			getClipboardData(e) {
 				// 添加到事件对象中的访问系统剪贴板的接口
 				let clipboardData = e.clipboardData,
 					i = 0,
 					items, item, types;
 
-				if( clipboardData ){
+				if (clipboardData) {
 					items = clipboardData.items;
-					if( !items ){
+					if (!items) {
 						return;
 					}
 					item = items[0];
 					// 保存在剪贴板中的数据类型
 					types = clipboardData.types || [];
-					for( ; i < types.length; i++ ){
-						if( types[i] === 'Files' ){
+					for (; i < types.length; i++) {
+						if (types[i] === 'Files') {
 							item = items[i];
 							break;
 						}
 					}
 					// 判断是否为图片数据
-					if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
-						this.imgReader( item );
+					if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
+						this.imgReader(item);
 					}
 				}
 			},
 
 			/**********qq截图粘贴---获取剪切板图片信息进行转换blob***********/
-			imgReader( item ){
+			imgReader(item) {
 				let _this = this;
-				var blob = item.getAsFile(),reader = new FileReader();
+				var blob = item.getAsFile(), reader = new FileReader();
 				// 读取文件后将其显示在网页中
-				reader.onload = function( e ){
+				reader.onload = function (e) {
 					var img = new Image();
 					img.src = e.target.result;
-					_this.dialogPaste =true;
+					_this.dialogPaste = true;
 					_this.pasteUrl = e.target.result;
 					// console.log(img.src)
 					//document.body.appendChild( img );
 				};
 				// 读取文件
-				reader.readAsDataURL( blob );
+				reader.readAsDataURL(blob);
 			},
 
 			/***qq截图粘贴************/
-			paste(){
-				document.getElementById('information').addEventListener('paste',this.getClipboardData)
+			paste() {
+				document.getElementById('information').addEventListener('paste', this.getClipboardData)
 			},
 
 			/*****发送截图******/
@@ -746,7 +753,7 @@
 				self.upImg(formData);
 			},
 
-			upImg(formData){
+			upImg(formData) {
 				let self = this;
 				// 数据结构请求
 				this.$axios.post('/api/index/upload/uploadImg', formData).then(res => {
@@ -775,13 +782,14 @@
 								data: {
 									groups_id: '1',
 									robot_name: this.shieldingKeyword(formatStr),
-									webTime: this.webTime = this.webTime,
+									webTime: '',
 									robotgroups_id: '1',
 								}
 							}))
 						} else if (this.machineAndAtl == 100) { //人工聊天
 							// 人工聊天超时隐藏
 							this.willOverTime = false;
+
 							//发送给客服消息-本地储存
 							this.customerSviceChat.push({
 								time: '',
@@ -802,7 +810,7 @@
 										img: res.data.data.src,
 										type: 'user'
 									}),
-									webTime: this.webTime = this.webTime,
+									webTime: '',
 									to_id: this.service.kf_id,
 									to_name: this.service.kf_name,
 									sensitiveNumber: this.sensitiveNumber,
@@ -822,7 +830,7 @@
 
 
 			// 退出聊天
-			exit(){
+			exit() {
 
 				this.websocketsend(JSON.stringify({
 					type: 'kfCloseUser',
@@ -830,8 +838,8 @@
 						to_id: this.service.kf_id,
 						kf_id: this.user_info.id,
 						group_id: this.service.serverInfo.group,
-						conversationId:this.service.conversationId,
-						type:6,
+						conversationId: this.service.conversationId,
+						type: 6,
 					}
 				}))
 				// this.goBack();
@@ -849,7 +857,7 @@
 			},
 
 			// 关闭评价框按钮
-			closeEvl(){
+			closeEvl() {
 				this.evlShow = false;
 				this.zzShow = false;
 			},
@@ -880,7 +888,7 @@
 			},
 			// 切换留言板返回
 			back() {
-				document.getElementById('information').removeEventListener('paste',this.getClipboardData)
+				document.getElementById('information').removeEventListener('paste', this.getClipboardData)
 				this.$emit('value', 100)
 			},
 			/******************文字信息转表情******************/
@@ -1011,8 +1019,8 @@
 					this.returnTimer = '';
 					this.service_on = true;
 					this.historyMsg = false,
-					// this.automaticRolling();
-					this.customerSviceChat = [];
+						// this.automaticRolling();
+						this.customerSviceChat = [];
 					this.reconnect();
 					this.selNum = 0;
 					this.tokNum = 0;
@@ -1218,7 +1226,7 @@
 				this.heatBeat();
 
 				// 心跳检测
-				if(redata.message_type == "ping"){
+				if (redata.message_type == "ping") {
 					this.websock.send('{"type":"pong"}')
 					return false;
 				}
@@ -1241,16 +1249,29 @@
 				}
 				//返回的会话时间
 				if (redata.message_type == 'webTime') {
+
+					// if(this.machineAndAtl == 100){
+					// 	// this.customerSviceChat[this.customerTime].time  = redata.data.webTime;
+					// 	this.$set(this.customerSviceChat[this.customerTime], 'time' , redata.data.webTime);
+					// 	console.log(this.customerSviceChat);
+					//
+					// }
 					//处理会话时间大于两分钟显示会话时间并且储存本次会话时间
 					if (this.machineAndAtl == 100) {
+						console.log(redata.data.webTime)
+
 						let num = this.customerSviceChat.length - 1;
 						if (this.customerSviceChat[num].type == "user") {
-							if (redata.data.webTime.split(":")[1] - this.webTime.split(":")[1] > 2) {
-								this.$set(this.customerSviceChat[num], 'time', redata.data.webTime);
-								this.webTime = redata.data.webTime;
+							if (this.webTime) {
+								if (redata.data.webTime.split(":")[1] - this.webTime.split(":")[1] > 2) {
+									this.$set(this.customerSviceChat[num], 'time', redata.data.webTime);
+									this.webTime = redata.data.webTime;
+								}
 							} else {
 								this.$set(this.customerSviceChat[num], 'time', '');
 							}
+						} else {
+							this.$set(this.customerSviceChat[this.customerTime], 'time', redata.data.webTime);
 						}
 					}
 
@@ -1261,7 +1282,7 @@
 				}
 				// 链接客服信息
 				if (redata.message_type == 'connect') {
-					let server= {};
+					let server = {};
 					if (redata.data) {
 						server = redata.data
 					} else {
@@ -1271,10 +1292,10 @@
 							kf_name: "",
 							serverInfo: {
 								avatar: this.avatarImg,
-								client_id:"",
-								group:"",
+								client_id: "",
+								group: "",
 								id: "",
-								intime:"",
+								intime: "",
 								job_name: "",
 								name: "tank",
 								signature: "",
@@ -1284,6 +1305,8 @@
 
 						}
 					}
+
+					this.webTime = ''
 					this.artAndLeave = 10;
 					this.machineAndAtl = 100;
 					// console.log(server, '============客服信息')
@@ -1299,7 +1322,7 @@
 					this.service_on = true;
 					this.closeByServer = false;
 					// console.log(redata.data.evaluate_id,"评价数量")
-					if(redata.data.evaluate_id > 0){
+					if (redata.data.evaluate_id > 0) {
 						this.evaluateNum = true;
 					}
 				}
@@ -1405,7 +1428,7 @@
 					this.serviceNotOnlineText = redata.msg;
 					this.service_on = false;
 					this.serverNotOnlin = true;
-					this.chatCont.push({type:"tips",str:"serverNotOnlin"})
+					this.chatCont.push({type: "tips", str: "serverNotOnlin"})
 					this.closeByServer = true;
 				}
 				// 客服转接
@@ -1430,17 +1453,17 @@
 					this.waitingText = redata.content;
 				}
 				// 客服不在线请稍后再试
-				if (redata.message_type == 'kfNotOnlin'){
+				if (redata.message_type == 'kfNotOnlin') {
 					this.service_on = false;
 				}
 				// 评价返回
-				if(redata.message_type == "evaluate"){
-					if(redata.data.status == 1){
+				if (redata.message_type == "evaluate") {
+					if (redata.data.status == 1) {
 						this.comtSuccess = true;
 					}
 				}
 				// 历史信息
-				if(redata.message_type == 'toOld'){
+				if (redata.message_type == 'toOld') {
 					let obj = redata;
 					this.historyMsgtext = obj.data.content;
 
@@ -1453,17 +1476,17 @@
 						this.hisSviceChat.push(res)
 					})
 					this.customerSviceChat.push({type: 'system', str: 'historyMsg'})
-					if(obj.data.chatLog.length >= 3){
+					if (obj.data.chatLog.length >= 3) {
 						this.selNum = 3;
 						this.tokNum = 3;
-					}else {
+					} else {
 						this.selNum = 0;
 						this.tokNum = 0;
 					}
 				}
 
 				// 退出排队
-				if(redata.message_type == 'cancelqueueret') {
+				if (redata.message_type == 'cancelqueueret') {
 					this.jumps = false;
 				}
 			},
@@ -1550,6 +1573,7 @@
 						}
 					}))
 				} else if (this.machineAndAtl == 100) { //人工聊天
+
 					// 人工聊天超时隐藏
 					this.willOverTime = false;
 					// 发送给客服消息-本地储存
@@ -1559,6 +1583,8 @@
 						imgUrl: this.img,
 						type: 'user',
 					});
+					this.customerTime = this.customerSviceChat.length - 1;
+					console.log(this.customerTime, "--------123123")
 
 					//消息发送-客服
 					this.websocketsend(JSON.stringify({
@@ -1591,14 +1617,14 @@
 			},
 
 			/*************设置token加密***************** */
-			setApiToken(name, controller,modules) {
+			setApiToken(name, controller, modules) {
 				return this.$md5.hex_md5(name + 'customer-service' + controller + modules)
 			},
 
 			/*************跳转人工客服***************** */
 			jumpService(id, name) {
-				if(this.jumps){
-					this.$alert('请先退出排队，再进行操作。','提示信息',{
+				if (this.jumps) {
+					this.$alert('请先退出排队，再进行操作。', '提示信息', {
 						confirmButtonText: '确定',
 					});
 					return false
@@ -1651,7 +1677,7 @@
 					appuid: this.$public.getQueryString('appuid'),
 				}
 				this.$http.post('/index/register/autoReg', data).then(res => {
-					if(res.data.code == 0){
+					if (res.data.code == 0) {
 						this.$message({
 							showClose: true,
 							message: res.data.msg,
@@ -1660,7 +1686,7 @@
 					}
 					if (res.data.code == 1) {
 						this.user_info = res.data.data;
-						 // console.log(this.user_info,"用户信息")
+						// console.log(this.user_info,"用户信息")
 						localStorage.setItem('uid', res.data.data.id)
 						// 游客 token
 						localStorage.setItem("token", res.data.data.token);
@@ -1688,7 +1714,7 @@
 				let obj = {
 					headers: {
 						'Content-Type': 'application/x-www-form-urlencoded',
-						"apiToken": this.setApiToken('sensitivewords', 'index','index')
+						"apiToken": this.setApiToken('sensitivewords', 'index', 'index')
 					}
 				};
 				let data = {
@@ -1746,7 +1772,7 @@
 			this.paste();
 		},
 
-		beforeDestroy(){
+		beforeDestroy() {
 
 		},
 		destroyed() {
@@ -1774,9 +1800,10 @@
 	}
 </script>
 <style scoped>
-	#welcome .row{
+	#welcome .row {
 		margin-bottom: 5px;
 	}
+
 	.chatBox {
 		width: 700px;
 		position: relative;
@@ -1822,9 +1849,11 @@
 		width: 37%;
 		overflow: hidden;
 	}
-	.cationer{
+
+	.cationer {
 		height: 570px;
 	}
+
 	.cationer, .artificial {
 		display: flex;
 		justify-content: space-between;
@@ -2091,7 +2120,8 @@
 	.nopd {
 		padding: 0;
 	}
-	.nopd i{
+
+	.nopd i {
 		margin-left: 10px;
 		width: 8px;
 		height: 8px;
@@ -2216,16 +2246,17 @@
 		padding: 20px 20px 30px 47px;
 	}
 
-	 .close{
-	  text-align: right;
-	  cursor: pointer;
+	.close {
+		text-align: right;
+		cursor: pointer;
 	}
-	 .close i{
-	  display: inline-block;
-	  width: 18px;
-	  height: 18px;
-	  background: url("./../assets/st-img/close.png") no-repeat;
-	  background-size: 100% 100%;
+
+	.close i {
+		display: inline-block;
+		width: 18px;
+		height: 18px;
+		background: url("./../assets/st-img/close.png") no-repeat;
+		background-size: 100% 100%;
 	}
 
 	.box-card .tit {
@@ -2508,6 +2539,7 @@
 		position: relative;
 		top: 10px;
 	}
+
 	.duty {
 		display: inline-block;
 		width: 60px;