update audio

pc_chat/src/components/chat.vue

@@ -4,8 +4,10 @@
 			<!-- ************************* 头部消息 ************************* -->
 			<el-header height='80px'>
 				<el-row type="flex" justify='space-between' align='middle' style="height:100%;">
-					<el-col class="tit nopd" v-if="machineAndAtl == 10"><img id="logo" :src="url + logo" alt=""><span>智能客服</span></el-col>
-					<el-col class="tit nopd" v-else-if="machineAndAtl == 100"><img id="logo" :src="url + logo" alt=""><span v-if="service">{{service.serverInfo.name}}</span>
+					<el-col class="tit nopd" v-if="machineAndAtl == 10"><img id="logo" :src="url + logo" alt=""><span>智能客服</span>
+					</el-col>
+					<el-col class="tit nopd" v-else-if="machineAndAtl == 100"><img id="logo" :src="url + logo"
+																				   alt=""><span v-if="service">{{service.serverInfo.name}}</span>
 					</el-col>
 					<el-col>
 						<div class="imgBox">
@@ -16,7 +18,8 @@
 									  class="el-icon-chat-line-round"></span>
 							</div>
 							<div v-if="!showleaveIcon" style="float: right; cursor: not-allowed">
-								<span style="font-size: 25px; color: #d6d1c4; margin-top: 13px;" class="el-icon-chat-line-round"></span>
+								<span style="font-size: 25px; color: #d6d1c4; margin-top: 13px;"
+									  class="el-icon-chat-line-round"></span>
 							</div>
 
 
@@ -180,6 +183,14 @@
 								</div>
 							</div>
 
+							<!-- 排队等待 -->
+							<div class="evaluate" v-if="waitingMsg">
+								<span>{{waitingText}}</span>
+								<el-button type="primary" style="margin: 10px auto; display: block;"
+										   @click="closedWating">退出排队
+								</el-button>
+							</div>
+
 						</div>
 
 						<!--············ 和人工会话聊天模块 ··············-->
@@ -194,7 +205,8 @@
 									<div class="row">
 										<div class="conversation row">
 											<div class="headImg">
-												<img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')" alt="">
+												<img :src="serviceImg?url+serviceImg:require('@/assets/st-img/kf.png')"
+													 alt="">
 											</div>
 											<div class="cont left">
 												<div v-if="item.content != ''" v-html="item.content"></div>
@@ -270,6 +282,12 @@
 							</div>
 
 						</div>
+
+						<!-- 发送消息音频提示 -->
+						<audio id="send" src="../../static/send.wav"></audio>
+						<!-- 接收消息音频提示 -->
+						<audio id="receive" src="../../static/receive.wav"></audio>
+
 					</el-row>
 
 
@@ -301,13 +319,13 @@
 							<div class="row center allAlignment chattingBox">
 								<div style="height:44px;width:300px;">
 									<textarea name=""
-											   id="information"
-											   v-model.trim="information"
-											   cols="30"
-											   rows="1"
-											   autofocus
-											   placeholder="请输入你的问题："
-											   @keyup.enter="listenEnter($event)"
+											  id="information"
+											  v-model.trim="information"
+											  cols="30"
+											  rows="1"
+											  autofocus
+											  placeholder="请输入你的问题："
+											  @keyup.enter="listenEnter($event)"
 									>
 									</textarea>
 								</div>
@@ -329,7 +347,7 @@
 					<el-row class="rt">
 						<el-col :span='24' class="artificial pd20">
 							<div class="infor" v-if="machineAndAtl == 10">
-								<div >
+								<div>
 									<span>姓名:</span>
 									<span>智能客服</span>
 								</div>
@@ -347,7 +365,7 @@
 								</div>
 							</div>
 							<div class="infor" v-if="machineAndAtl == 100">
-								<div >
+								<div>
 									<span>姓名:</span>
 									<span v-if="service">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
 								</div>
@@ -469,8 +487,8 @@
 				userConversation: {}, //用户当前会话
 				machineAndAtl: 10, //默认为机器人，100为人工
 				satisfaction: 1, //评价满意度,1为满意，2为一般，3为不满意
-				url: 'http://kfadmin.bocai186.com', // 域名地址
-				// url :'http://192.168.2.186:8090', // 域名地址
+				// url: 'http://kfadmin.bocai186.com', // 域名地址
+				url: 'http://192.168.2.187:8090', // 域名地址
 				user_info: '', // 用户信息
 				// 人工客服信息
 				service: '',
@@ -496,10 +514,10 @@
 				closeByServer: false, //客服关闭会话
 				serverNotOnlin: false, //客服掉线
 				willOverTime: false, //超时关闭会话
-				overTimeMsg:'', // 超时提示内容
+				overTimeMsg: '', // 超时提示内容
 				allLoading: true, //整个页面加载中
 				webTime: '',//网络时间
-				changeKeFu:false, //客服转接
+				changeKeFu: false, //客服转接
 				/*****************websockt心跳变量*******************/
 				reconnectData: null,
 				lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
@@ -507,31 +525,43 @@
 				timeoutObj: null,
 				serverTimeoutObj: null,
 
-				logo:'', // logo 图片
-				Onlinemsg:"", // 系统留言信息
+				logo: '', // logo 图片
+				Onlinemsg: "", // 系统留言信息
 				showleaveIcon: true, // 留言按钮触发条件
-				jumpName:'', // 根据类型提示售后服务名称
+				jumpName: '', // 根据类型提示售后服务名称
+				waitingMsg: false, // 是否显示等待排队
+				waitingText: "", // 等待内容
 			}
 		},
 		methods: {
+			// 消息发送
+			sendAudio() {
+				let send = document.getElementById('send')
+				send.play()
+			},
+			// 消息接收
+			receiveAudio() {
+				let receive = document.getElementById('receive')
+				receive.play();
+			},
 			// 回车提交
-			listenEnter(event){
+			listenEnter(event) {
 				let text = document.getElementById('information');
-				if(event.keyCode == 13 && event.ctrlKey == true){
+				if (event.keyCode == 13 && event.ctrlKey == true) {
 					text.value = text.value + '\n'
-				}else if(event.keyCode == 13){
-					if(this.information == ""){
+				} else if (event.keyCode == 13) {
+					if (this.information == "") {
 						text.value = '';
 						return false
-					}else {
+					} else {
 						this.sendInfo();
 						event.preventDefault()
 					}
 				}
 			},
 			// 切换留言板返回
-			back(){
-				this.$emit('value',100)
+			back() {
+				this.$emit('value', 100)
 			},
 			/******************文字信息转表情******************/
 			turnFace(data) {
@@ -612,7 +642,7 @@
 
 			handError(err, file, fileList) {
 				// 获取当前发送时间
-				console.log(err,'上传图片报错！')
+				console.log(err, '上传图片报错！')
 			},
 
 
@@ -648,11 +678,12 @@
 				if (type === 1) {
 					this.artAndLeave = 0;
 					this.chatCont = [];
-				}else {
+				} else {
 					this.machineAndAtl = 10;
 					this.macNotPro = false;
 					this.jumpArtl = false;
 					this.willOverTime = false;
+					this.waitingMsg = false;
 					this.time = '';
 					this.returnTimer = '';
 					// this.automaticRolling();
@@ -669,6 +700,7 @@
 				this.jumpArtl = false;
 				this.dialogUrl = false;
 				this.sendMessage();
+				this.sendAudio();
 			},
 
 			/***************改变评价框的满意度*************** */
@@ -825,8 +857,8 @@
 			initWebSocket() {
 				let _this = this;
 				let apiToken = this.$md5.hex_md5('customer-service' + this.currTime + window.location.origin);
-				this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken=' + apiToken);
-				//this.websock = new WebSocket('ws://192.168.2.186:9101?apiToken=' + apiToken);
+				//this.websock = new WebSocket('ws://103.108.43.176:9101?apiToken=' + apiToken);
+				this.websock = new WebSocket('ws://192.168.2.187:9101?apiToken=' + apiToken);
 				this.websock.debug = true;
 				// 数据接收
 				this.websock.onmessage = this.websocketonmessage;
@@ -841,6 +873,12 @@
 			/****************连接建立成功***************/
 			websocketonopen() {
 				console.log('链接成功');
+				// 如果有传 group_id 直接跳转人工客服
+				let group_id = this.$public.getQueryString("group_id");
+				if (group_id) {
+					this.jumpService(group_id);
+				}
+
 				//心跳检测
 				this.heatBeat()
 			},
@@ -854,13 +892,13 @@
 			/**************数据接收***************** */
 			websocketonmessage(e) {
 				let redata = e
-				if(e.data){
+				if (e.data) {
 					redata = JSON.parse(e.data);
 				}
 				//心跳检测
 				this.heatBeat();
 
-				if(redata.type != 'pong'){
+				if (redata.type != 'pong') {
 					console.log(redata)
 				}
 				// 欢迎语
@@ -914,6 +952,7 @@
 				}
 				//接收客服会话
 				if (redata.message_type == 'chatMessage') {
+
 					//存储会话超时间
 					this.webTime = redata.data.time;
 					//会话大于两分钟显示
@@ -932,7 +971,6 @@
 							}
 						}
 					}
-					//
 					let contType = this.isJSON(redata.data.content);
 					let content = {};
 					if (contType == false) {
@@ -949,8 +987,10 @@
 					this.customerSviceChat.push(obj);
 					// console.log(this.customerSviceChat);
 					this.selNum++;
+					if(this.selNum > 1){
+						this.receiveAudio();
+					}
 					this.automaticRolling();
-
 				}
 				//接收机器会话
 				if (redata.message_type == 'robotMessage') {
@@ -1002,11 +1042,11 @@
 					this.automaticRolling();
 				}
 				// 客服转接
-				if(redata.message_type == 'changeKeFuSuccess'){
+				if (redata.message_type == 'changeKeFuSuccess') {
 					console.log('======转接成功========')
 					this.changeKeFu = true;
 					// this.goBack();
-					this.customerSviceChat.push({type:'system', str:'changeKeFu'})
+					this.customerSviceChat.push({type: 'system', str: 'changeKeFu'})
 				}
 				// 客服会话超时
 				if (redata.message_type == 'overtime') {
@@ -1015,8 +1055,18 @@
 					// this.goBack();
 					this.overTimeMsg = redata.data.content;
 				}
+				// 客服等待排队
+				if (redata.message_type == "inqueue") {
+					this.waitingMsg = true;
+					this.automaticRolling();
+					this.waitingText = redata.content;
+				}
 
+			},
 
+			closedWating() {
+				this.waitingMsg = false;
+				this.goBack();
 			},
 
 
@@ -1067,7 +1117,7 @@
 			/******************消息发送数据处理********************/
 			sendMessage() {
 				let str = this.information;
-			    let formatStr = str.replace(/\n/g,'<br/>');
+				let formatStr = str.replace(/\n/g, '<br/>');
 				// 给机器人发送文本消息
 				if (this.machineAndAtl == 10) {
 					//给机器人发送文本消息-本地储存
@@ -1132,7 +1182,7 @@
 			},
 
 			/*************跳转人工客服***************** */
-			jumpService(id,name) {
+			jumpService(id, name) {
 
 				this.jumpArtl = true;
 				this.closeByServer = false;
@@ -1167,6 +1217,7 @@
 			/**************匿名注册**************** */
 			registered() {
 				let token = sessionStorage.getItem('token');
+
 				let data = {
 					token: token != null ? token : '',//
 					appid: this.$public.getQueryString('appid'),//
@@ -1181,8 +1232,14 @@
 					if (res.data.code == 1) {
 						this.user_info = res.data.data;
 						sessionStorage.setItem("token", res.data.data.token);
+						setTimeout(() => {
+							//关闭加载条
+							this.allLoadingClose();
+							// 初始化websocket
+							this.initWebSocket();
+						}, 2000);
 					}
-				})
+				});
 			},
 
 			/***********聊天滑动的时候滑动滚动条到底部******************* */
@@ -1245,12 +1302,7 @@
 					this.getProblem();
 					// 匿名注册
 					this.registered();
-					setTimeout(() => {
-						//关闭加载条
-						this.allLoadingClose();
-						// 初始化websocket
-						this.initWebSocket();
-					}, 2000);
+
 					// 获取聊天次数
 					this.getChatNum();
 					// 获取敏感词