update

pc_chat/src/components/chat.vue

@@ -7,16 +7,18 @@
 					<el-col class="tit nopd" v-if="machineAndAtl == 10">
 						<img id="logo" :src="url + logo" alt="">
 						<span>智能客服</span>
+						<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="">
 						<span v-if="service">{{service.serverInfo.name}}</span>
-						<span 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/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">
-							<i v-if="selNum > chatNum" @click="ejectEvl(10)" class="sc pointer"
-							   :class="selType?'scActy':''"></i>
+							<i v-if="(selNum + tokNum) > 2" @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; margin-top: 13px;" @click="back()"
 									  class="el-icon-chat-line-round"></span>
@@ -25,8 +27,6 @@
 								<span style="font-size: 25px; color: #d6d1c4; margin-top: 13px;"
 									  class="el-icon-chat-line-round"></span>
 							</div>
-
-
 						</div>
 					</el-col>
 				</el-row>
@@ -349,56 +349,71 @@
 
 				<el-aside width='255px' v-if="retractShow">
 					<el-row class="rt">
-						<el-col :span='24' class="artificial pd20">
-							<div class="infor" v-if="machineAndAtl == 10">
-								<div>
-									<span>姓名:</span>
-									<span>智能客服</span>
-								</div>
-								<div>
-									<span>工号:</span>
-									<span>001</span>
-								</div>
-								<div>
-									<span>性别:</span>
-									<span>保密</span>
+						<div v-if="machineAndAtl == 10">
+							<el-col :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>
-									<span>职务:</span>
-									<span>咨询客服</span>
+								<div class="headPortrait">
+									<img :src="require('@/assets/st-img/kf.png')" alt="">
 								</div>
-							</div>
-							<div class="infor" v-if="machineAndAtl == 100">
+							</el-col>
+							<el-col class="autograph pd20">
 								<div>
-									<span>姓名:</span>
-									<span v-if="service">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
+									<span>个性签名:</span>
+									<span></span>
 								</div>
+							</el-col>
+						</div>
+						<div v-if="machineAndAtl == 100">
+							<el-col :span='24' class="artificial pd20">
+								<div class="infor">
+									<div>
+										<span>姓名:</span>
+										<span v-if="service">{{ service.serverInfo.name ? service.serverInfo.name : '001客服' }}</span>
+									</div>
 
-								<div>
-									<span>工号:</span>
-									<span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
+									<div>
+										<span>工号:</span>
+										<span>{{service.serverInfo ? service.serverInfo.job_name : '001'}}</span>
+									</div>
+									<div>
+										<span>性别:</span>
+										<span>保密</span>
+									</div>
+									<div>
+										<span>职务:</span>
+										<span>咨询客服</span>
+									</div>
 								</div>
-								<div>
-									<span>性别:</span>
-									<span>保密</span>
+								<div class="headPortrait">
+									<img :src="service.serverInfo ? service.serverInfo.avatar ?  (url+service.serverInfo.avatar) :require('@/assets/st-img/kf.png') : require('@/assets/st-img/kf.png')"
+										 alt="">
 								</div>
+							</el-col>
+							<el-col class="autograph pd20">
 								<div>
-									<span>职务:</span>
-									<span>咨询客服</span>
+									<span>个性签名:</span>
+									<span>{{service.serverInfo ? service.serverInfo.signature :'' }}</span>
 								</div>
-							</div>
-							<div class="headPortrait">
-								<img :src="service.serverInfo ? service.serverInfo.avatar ?  (url+service.serverInfo.avatar) :require('@/assets/st-img/kf.png') : require('@/assets/st-img/kf.png')"
-									 alt="">
-							</div>
-						</el-col>
+							</el-col>
+						</div>
 
-						<el-col class="autograph pd20">
-							<div>
-								<span>个性签名:</span>
-								<span>{{service.serverInfo ? service.serverInfo.signature :'' }}</span>
-							</div>
-						</el-col>
 						<el-col class="advent" v-for="imgs in advert" :key="imgs.id">
 							<a :href="'http://'+imgs.advertisement_url" target="_blank" rel="noopener noreferrer">
 								<img :src="url + imgs.advertisement_img" alt="">
@@ -428,10 +443,6 @@
 						<span>不满意</span>
 					</div>
 				</div>
-				<div class="levMsg">
-					<el-input type="textarea" rows="6" placeholder="评价备注" v-model="textarea">
-					</el-input>
-				</div>
 				<div class="sure" @click="evaluateSure()">
 					<span>确定</span>
 				</div>
@@ -461,7 +472,8 @@
 				information: '',//发送的文本信息
 				sendCol: false, // 发送按钮切换样式
 				selType: false, //图标选中样式 true为选中，false为未选中
-				selNum: 0, // 自增当达到某个条件显示图片
+				selNum: 0, // 服务端消息数量
+				tokNum: 0, // 用户端消息数量
 				// syType : false,
 				// sqType : false,
 				error: false,
@@ -491,8 +503,8 @@
 				userConversation: {}, //用户当前会话
 				machineAndAtl: 10, //默认为机器人，100为人工
 				satisfaction: 1, //评价满意度,1为满意，2为一般，3为不满意
-				// url: 'http://kfadmin.bocai186.com', // 域名地址
-				url: 'http://192.168.2.187:8090', // 域名地址
+				url: 'http://kfadmin.bocai186.com', // 域名地址
+				// url: 'http://192.168.2.187:8090', // 域名地址
 				user_info: '', // 用户信息
 				// 人工客服信息
 				service: '',
@@ -535,6 +547,8 @@
 				jumpName: '', // 根据类型提示售后服务名称
 				waitingMsg: false, // 是否显示等待排队
 				waitingText: "", // 等待内容
+
+				service_on:true, // 现在状态
 			}
 		},
 		methods: {
@@ -670,7 +684,7 @@
 
 			/***************弹出评价框*************** */
 			ejectEvl(type) {
-				// if (this.comtSuccess) return;
+				if (this.comtSuccess) return;
 				this.changeIcon = 10;
 				if (type == 10) {
 					this.evlShow = true
@@ -740,29 +754,21 @@
 
 			/***************评价确认*************** */
 			evaluateSure() {
-				// 参数
-				let params = {
-					'evaluateId': this.satisfaction,
-					'conversationId': this.service.conversationId,
-					'evaluateContent': this.textarea
-				}
-				this.$axios.get('/api/index/evaluate/putEvaluate', {
-					params,
-					headers: {
-						'Content-Type': 'application/x-www-form-urlencoded',
-						'apiToken': this.setApiToken('putevaluate', 'evaluate', this.currTime, 'index')
-					}
-				}).then(res => {
-					if (res.data.code == 1) {
-						this.evlShow = false;
-						this.zzShow = false;
-						this.textarea = '';
-						this.comtSuccess = true;
-						if (this.changeIcon == 10) {
-							this.comtCount = '满意'
-						}
+				this.websocketsend(JSON.stringify({
+					type: 'evaluate',
+					data: {
+						evaluate_id: this.satisfaction,
+						conversationId: this.service.conversationId,
+						evaluate_content: this.textarea
 					}
-				})
+				}))
+				this.evlShow = false;
+				this.zzShow = false;
+				this.textarea = '';
+				this.consult = false;
+				if (this.changeIcon == 10) {
+					this.comtCount = '满意'
+				}
 			},
 
 			/***************验证框确认*************** */
@@ -866,8 +872,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.187: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;
@@ -953,6 +959,7 @@
 					this.evlShow = false;
 					this.comtSuccess = false;
 					this.showleaveIcon = false;
+					this.waitingMsg = false;
 				}
 				// 暂无客服
 				if (redata.message_type == 'wait') {
@@ -1050,10 +1057,10 @@
 				}
 				// 客服转接
 				if (redata.message_type == 'changeKeFuSuccess') {
-					console.log('======转接成功========')
 					this.changeKeFu = true;
 					// this.goBack();
 					this.customerSviceChat.push({type: 'system', str: 'changeKeFu'})
+					this.consult = false;
 				}
 				// 客服会话超时
 				if (redata.message_type == 'overtime') {
@@ -1068,7 +1075,19 @@
 					this.automaticRolling();
 					this.waitingText = redata.content;
 				}
+				// 掉线
+				if (redata.message_type == 'kfNotOnlin'){
+					console.log(redata);
+					this.service_on = false;
+				}
+				// 评价返回
+				if(redata.message_type == "evaluate"){
+					console.log(redata,"评价返回");
+					if(redata.data.status == 1){
+						this.comtSuccess = true;
+					}
 
+				}
 			},
 
 			closedWating() {
@@ -1175,6 +1194,9 @@
 							conversationId: this.service.conversationId
 						}
 					}))
+					this.tokNum++;
+					console.log(this.tokNum,"我发的消息");
+
 				}
 				// 发送之后清空发送数据
 				this.img = '';
@@ -1764,7 +1786,7 @@
 
 	.box-card, .proving {
 		width: 494px;
-		height: 429px;
+		height: 300px;
 		position: absolute;
 		left: 50%;
 		top: 50%;