|
|
@@ -51,6 +51,30 @@
|
|
|
|
|
|
<!-- 和机器人会话 -->
|
|
|
<div v-for="(item,i) in robot" :key="'r'+i">
|
|
|
+ <!-- 和机器人会话互动 -->
|
|
|
+ <div v-if="item.type == 'error'" class="row allAlignment"
|
|
|
+ style="margin-top:.3rem;">
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+ <img v-if="item.type == 'error'" :src="require('@/assets/headAdvent.png')">
|
|
|
+ </div>
|
|
|
+ <div class="messageWindow dialogueA col-w">
|
|
|
+ <!-- <div v-if="item.type == '1001'" class="customerService left"
|
|
|
+ v-html="item.content.text"></div> -->
|
|
|
+ <!-- <div v-if="item.type == 'user'" class="user right imgSrc">
|
|
|
+ <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
+ class="row rightAlignment box-img">
|
|
|
+ <yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
|
|
|
+ </yd-lightbox> -->
|
|
|
+ <div v-if="item.type == 'error'" class="customerService left">{{item.content.text}}<div style="color:#5EA0F7;padding-left:.1rem;cursor:pointer;" @click="connectionService">转人工客服</div></div>
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+ <img v-if="item.type == 'user'"
|
|
|
+ :src="require('@/assets/timg.jpg') ">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
<!-- 和机器人会话互动 -->
|
|
|
<div v-if="item.type == 'service' || item.type == 'user'" class="row allAlignment"
|
|
|
style="margin-top:.3rem;">
|
|
|
@@ -89,125 +113,138 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!--历史消息-->
|
|
|
- <div v-if="showHistory" v-for="item in hisSviceChat" >
|
|
|
- <!-- 客服信息 -->
|
|
|
- <div v-if="item.to_id.startsWith('KF')">
|
|
|
- <div class="row allAlignment" style="margin-top:.3rem;">
|
|
|
- <div class="HeadPortrait row center">
|
|
|
- <img v-if="service_info.avatar == '' " :src="avatar_imgs">
|
|
|
- <img v-if="service_info.avatar != ''" :src="img_http + service_info.avatar ? img_http + service_info.avatar : require('@/assets/user2.png')">
|
|
|
+ <!-- ********************************************************** -->
|
|
|
+ <!-- 人工会话模版 -->
|
|
|
+ <div v-if="link_success">
|
|
|
+ <!--历史消息-->
|
|
|
+ <div v-if="showHistory" v-for="item in hisSviceChat" >
|
|
|
+ <!-- 客服信息 -->
|
|
|
+ <div v-if="item.from_id.startsWith('KF')">
|
|
|
+ <div style="width: 100%;text-align: center;">
|
|
|
+ <span v-if="item.time_line">{{item.time_line}}</span>
|
|
|
</div>
|
|
|
- <div class="messageWindow dialogueA col-w">
|
|
|
- <div class="customerService left imgSrc">
|
|
|
- <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
- class="row rightAlignment">
|
|
|
- <yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
|
|
|
- </yd-lightbox>
|
|
|
- <div v-html="item.content.text" v-else></div>
|
|
|
+ <div class="row allAlignment" style="margin-top:.3rem;margin-top: 0.3rem;">
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+ <img v-if="service_info.avatar == '' " :src="avatar_imgs">
|
|
|
+ <img v-if="service_info.avatar != ''" :src="img_http + service_info.avatar ? img_http + service_info.avatar : require('@/assets/user2.png')">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="HeadPortrait row center">
|
|
|
+ <div class="messageWindow dialogueA col-w">
|
|
|
+ <div class="customerService left imgSrc">
|
|
|
+ <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
+ class="row rightAlignment">
|
|
|
+ <yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
|
|
|
+ </yd-lightbox>
|
|
|
+ <div v-html="item.content.text" v-else></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 用户信息 -->
|
|
|
- <div v-else>
|
|
|
-
|
|
|
- <div class="row allAlignment" style="margin-top:.3rem;">
|
|
|
- <div class="HeadPortrait row center">
|
|
|
-
|
|
|
+ <!-- 用户信息 -->
|
|
|
+ <div v-else>
|
|
|
+ <div style="width: 100%;text-align: center;margin-top: 0.3rem;">
|
|
|
+ <span v-if="item.time_line">{{item.time_line}}</span>
|
|
|
</div>
|
|
|
- <div class="messageWindow dialogueA col-w" style="text-align: right;">
|
|
|
- <div class="user right imgSrc">
|
|
|
- <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
- class="row rightAlignment">
|
|
|
- <yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
|
|
|
- </yd-lightbox>
|
|
|
- <span v-html="item.content.text" v-else>{{item.content.text}}</span>
|
|
|
+ <div class="row allAlignment" style="margin-top:.3rem;">
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="messageWindow dialogueA col-w" style="text-align: right;">
|
|
|
+ <div class="user right imgSrc">
|
|
|
+
|
|
|
+ <yd-lightbox v-if="item.content.img" style="display:inline-block" class="row rightAlignment">
|
|
|
+ <yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
|
|
|
+ </yd-lightbox>
|
|
|
+ <span v-html="item.content.text" v-else></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+ <img :src="require('@/assets/timg.jpg') ">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="HeadPortrait row center">
|
|
|
- <img :src="require('@/assets/timg.jpg') ">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
+
|
|
|
+ <div v-for="(item,index) in chat" :key="index">
|
|
|
|
|
|
- <!-- ********************************************************** -->
|
|
|
- <!-- 人工会话模版 -->
|
|
|
- <div v-if="link_success" v-for="(item,index) in chat" :key="index">
|
|
|
-
|
|
|
- <!-- 历史消息 -->
|
|
|
- <div class="promptBox" v-if="item.type == 'historyMsg'">
|
|
|
- <div class="prompt help">
|
|
|
- <span>{{historyMsgtext}}</span>
|
|
|
+ <!-- 历史消息 -->
|
|
|
+ <div class="promptBox" v-if="item.type == 'historyMsg'">
|
|
|
+ <div class="prompt help">
|
|
|
+ <span>{{historyMsgtext}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <!-- 客服会话 -->
|
|
|
- <div v-if="item.type == 'service'">
|
|
|
- <div class="row allAlignment" style="margin-top:.3rem;">
|
|
|
- <div class="HeadPortrait row center">
|
|
|
- <img id="123" v-if="service_info.avatar == '' " :src="avatar_imgs">
|
|
|
- <img id="321" v-if="service_info.avatar != '' " :src="img_http + service_info.avatar ? img_http + service_info.avatar : img_http + service_info.avatar">
|
|
|
+ <!-- 客服会话 -->
|
|
|
+ <div v-if="item.type == 'service'">
|
|
|
+ <div style="width: 100%;text-align: center;margin-top: 0.3rem;">
|
|
|
+ <span v-if="item.time ">{{item.time}}</span>
|
|
|
</div>
|
|
|
- <div class="messageWindow dialogueA col-w">
|
|
|
- <div class="customerService left imgSrc">
|
|
|
- <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
- class="row rightAlignment">
|
|
|
- <yd-lightbox-img :src="img_http + item.content.img"></yd-lightbox-img>
|
|
|
- </yd-lightbox>
|
|
|
- <div v-html="item.content.text" v-else></div>
|
|
|
+ <div class="row allAlignment" style="margin-top:.3rem;">
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+ <img id="123" v-if="service_info.avatar == '' " :src="avatar_imgs">
|
|
|
+ <img id="321" v-if="service_info.avatar != '' " :src="img_http + service_info.avatar ? img_http + service_info.avatar : img_http + service_info.avatar">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="HeadPortrait row center">
|
|
|
+ <div class="messageWindow dialogueA col-w">
|
|
|
+ <div class="customerService left imgSrc">
|
|
|
+
|
|
|
+ <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
+ class="row rightAlignment">
|
|
|
+ <yd-lightbox-img :src="img_http + item.content.img"></yd-lightbox-img>
|
|
|
+ </yd-lightbox>
|
|
|
+ <div v-html="item.content.text" v-else></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 用户会话 -->
|
|
|
- <div v-if="item.type == 'user'">
|
|
|
-
|
|
|
- <div class="row allAlignment" style="margin-top:.3rem;">
|
|
|
- <div class="HeadPortrait row center">
|
|
|
|
|
|
+ <!-- 用户会话 -->
|
|
|
+ <div v-if="item.type == 'user'">
|
|
|
+ <div style="width: 100%;text-align: center;margin-top: 0.3rem;">
|
|
|
+ <span v-if="item.time">{{item.time}}</span>
|
|
|
</div>
|
|
|
- <div class="messageWindow dialogueA col-w" style="text-align: right;">
|
|
|
- <div class="user right imgSrc">
|
|
|
- <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
- class="row rightAlignment">
|
|
|
- <yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
|
|
|
- </yd-lightbox>
|
|
|
- <span v-html="item.content.text" v-else>{{item.content.text}}</span>
|
|
|
+ <div class="row allAlignment" style="margin-top:.3rem;">
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="messageWindow dialogueA col-w" style="text-align: right;">
|
|
|
+
|
|
|
+ <div class="user right imgSrc">
|
|
|
+ <yd-lightbox v-if="item.content.img" style="display:inline-block"
|
|
|
+ class="row rightAlignment">
|
|
|
+ <yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
|
|
|
+ </yd-lightbox>
|
|
|
+ <span v-html="item.content.text" v-else>{{item.content.text}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="HeadPortrait row center">
|
|
|
+ <img v-if="item.type == 'user'"
|
|
|
+ :src="require('@/assets/timg.jpg') ">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="HeadPortrait row center">
|
|
|
- <img v-if="item.type == 'user'"
|
|
|
- :src="require('@/assets/timg.jpg') ">
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 常规系统消息评价 -->
|
|
|
- <div class="row center " v-if="item.type== 'system' ">
|
|
|
- <div class="column item-center "
|
|
|
- style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0;"
|
|
|
- v-if="item.content.state =='getEvaluate' && !haveEvaluation ">
|
|
|
- <p class="row center wrap">{{item.content.text}}</p>
|
|
|
- <button class="evaluateBtn" style="margin-top:.2rem;" @click="is_show_evaluate()">评价
|
|
|
- </button>
|
|
|
- </div>
|
|
|
+ <!-- 常规系统消息评价 -->
|
|
|
+ <div class="row center " v-if="item.type== 'system' ">
|
|
|
+ <div class="column item-center "
|
|
|
+ style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0;"
|
|
|
+ v-if="item.content.state =='getEvaluate' && !haveEvaluation ">
|
|
|
+ <p class="row center wrap">{{item.content.text}}</p>
|
|
|
+ <button class="evaluateBtn" style="margin-top:.2rem;" @click="is_show_evaluate()">评价
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="column item-center"
|
|
|
- style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0.5rem;"
|
|
|
- v-if="item.content.state == 'closeInform' ">
|
|
|
- <p class="row center wrap">{{item.content.text}}</p>
|
|
|
- </div>
|
|
|
+ <div class="column item-center"
|
|
|
+ style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0.5rem;"
|
|
|
+ v-if="item.content.state == 'closeInform' ">
|
|
|
+ <p class="row center wrap">{{item.content.text}}</p>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -339,10 +376,10 @@
|
|
|
</yd-popup>
|
|
|
<!-- 底部输入框 -->
|
|
|
<div class="footer row wrap" id='input_box'>
|
|
|
+ <!-- @keydown="inputNumFun()" -->
|
|
|
<textarea
|
|
|
- id="textarea"
|
|
|
+ id="textarea"
|
|
|
v-model.trim="text_info"
|
|
|
- @keydown="inputNumFun()"
|
|
|
placeholder="请输入你的问题："
|
|
|
maxlength="100"
|
|
|
>
|
|
|
@@ -490,7 +527,7 @@
|
|
|
avatar: '/static/customer/images/robot.png',
|
|
|
job_name: '001',
|
|
|
name: '智能客服',
|
|
|
- signature: "万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！"
|
|
|
+ signature: ""
|
|
|
},
|
|
|
link_success: false,//人工链接成功
|
|
|
conversationId: '',//会话工单
|
|
|
@@ -508,6 +545,14 @@
|
|
|
hisSviceChat: [],
|
|
|
showHistory:true,
|
|
|
avatar_imgs:avatarImgs,
|
|
|
+ webTime:'',//人工会话上一次发送消息时间
|
|
|
+ chatIndex:'',//人工会话上一次下标
|
|
|
+ /*****************websockt心跳变量*******************/
|
|
|
+ reconnectData: null,
|
|
|
+ lockReconnect: false, //避免重复连接，因为onerror之后会立即触发 onclose
|
|
|
+ timeout: 5000, //5s一次心跳检测
|
|
|
+ timeoutObj: null,
|
|
|
+ serverTimeoutObj: null,
|
|
|
};
|
|
|
},
|
|
|
// 方法
|
|
|
@@ -524,10 +569,12 @@
|
|
|
type: 6,
|
|
|
}
|
|
|
}));
|
|
|
- this.socket_close(this.user_info.id);
|
|
|
- this.setInit();
|
|
|
- this.initWebsocket()
|
|
|
- this.isExit = false;
|
|
|
+
|
|
|
+
|
|
|
+ // this.websock.close()
|
|
|
+ // this.setInit();
|
|
|
+ // this.initWebsocket()
|
|
|
+
|
|
|
|
|
|
},
|
|
|
/*******************************************/
|
|
|
@@ -540,12 +587,11 @@
|
|
|
|
|
|
/*******************************************/
|
|
|
//初始化Websocket链接
|
|
|
- initWebsocket() {
|
|
|
-
|
|
|
- let sock_ip = 'ws://103.108.43.176:9101'; // 线上
|
|
|
+ initWebsocket(apiToken) {
|
|
|
+ let sock_ip = ''; // 线上
|
|
|
// let sock_ip = 'ws://192.168.2.187:9101'; // 本地
|
|
|
|
|
|
- this.websock = new WebSocket(sock_ip + "?apiToken=" + this.apiToken);
|
|
|
+ this.websock = new WebSocket("ws://103.108.43.176:9101?apiToken=" + apiToken);
|
|
|
//数据返回
|
|
|
this.websock.onmessage = this.socket_message;
|
|
|
//数据发送
|
|
|
@@ -559,15 +605,16 @@
|
|
|
/*******************************************/
|
|
|
//连接建立之后执行send方法发送数据
|
|
|
socket_open() {
|
|
|
- // let actions = {"test":"12345"};
|
|
|
console.log('我链接了');
|
|
|
- //this.socket_send(JSON.stringify(actions));
|
|
|
},
|
|
|
|
|
|
/*******************************************/
|
|
|
//连接建立失败重连
|
|
|
socket_error() {
|
|
|
- this.initWebSocket();
|
|
|
+ console.log('连接建立失败重连');
|
|
|
+ // this.initWebSocket();
|
|
|
+ // this.setInit();
|
|
|
+ // this.reconnect();
|
|
|
},
|
|
|
|
|
|
/*******************************************/
|
|
|
@@ -576,6 +623,8 @@
|
|
|
if (!e.data) return;
|
|
|
const redata = JSON.parse(e.data);
|
|
|
console.log(redata);
|
|
|
+ //心跳检测
|
|
|
+ this.heatBeat();
|
|
|
//欢迎语
|
|
|
if (redata.message_type == 'helloMessage') {
|
|
|
this.isTurnArtifcial = true;
|
|
|
@@ -594,16 +643,18 @@
|
|
|
// console.log(redata);
|
|
|
if (redata.data.content == "error") {
|
|
|
this.robot.push({
|
|
|
- type: this.error_num,
|
|
|
+ type:'error',
|
|
|
+ content: {text: "您的问题暂无法处理"}
|
|
|
})
|
|
|
- this.error_num++;
|
|
|
+ // this.error_num++;
|
|
|
} else {
|
|
|
this.robot.push({
|
|
|
type: 'service',
|
|
|
content: {text: redata.data.content}
|
|
|
})
|
|
|
}
|
|
|
- this.automaticRolling();
|
|
|
+ console.log(this.robot);
|
|
|
+ // this.automaticRolling();
|
|
|
//data
|
|
|
//this.robot =
|
|
|
}
|
|
|
@@ -644,28 +695,51 @@
|
|
|
//人工会话回复
|
|
|
if (redata.message_type == "chatMessage") {
|
|
|
// 转接的时候清除历史信息
|
|
|
- this.hisSviceChat = [];
|
|
|
+ // this.hisSviceChat = [];
|
|
|
// this.getHistory = false;
|
|
|
this.$dialog.loading.close();
|
|
|
let obj = {};
|
|
|
+ let isSession = false;
|
|
|
if (this.$public.isJSON(redata.data.content)) {
|
|
|
obj = JSON.parse(redata.data.content);
|
|
|
- obj.text = this.turnFace(obj.text)
|
|
|
+ obj.text = this.turnFace(obj.text);
|
|
|
+ isSession = true;
|
|
|
} else {
|
|
|
obj.text = redata.data.content;
|
|
|
}
|
|
|
+
|
|
|
+ let thisTime ='';
|
|
|
+ let newTime = redata.data.time.split(':');
|
|
|
+ if(this.webTime){
|
|
|
+ let lastTime = this.webTime.split(":");
|
|
|
+ if(newTime[0] == lastTime[0] && newTime[1] < (lastTime[1]+2)){
|
|
|
+ thisTime = ''
|
|
|
+ }else{
|
|
|
+ thisTime = redata.data.time;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ if(isSession){
|
|
|
+ thisTime = redata.data.time;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(isSession){
|
|
|
+ this.webTime = redata.data.time;
|
|
|
+ }
|
|
|
this.chat.push({
|
|
|
type: 'service',
|
|
|
+ time: thisTime ? thisTime: '',
|
|
|
content: obj
|
|
|
})
|
|
|
// this.setNum++;
|
|
|
}
|
|
|
-
|
|
|
//系统消息通知客户结束通话
|
|
|
if (redata.message_type == 'closeBysever') {
|
|
|
- this.showHistory = false
|
|
|
this.setInit();
|
|
|
+ this.showHistory = false;
|
|
|
+ this.link_success = false;
|
|
|
+ this.isTurnArtifcial =true;
|
|
|
}
|
|
|
+
|
|
|
if(redata.message_type == "changeKeFuSuccess"){
|
|
|
this.$dialog.alert({
|
|
|
mes: redata.data.content
|
|
|
@@ -680,11 +754,11 @@
|
|
|
this.$dialog.alert({
|
|
|
mes: redata.content, callback: () => {
|
|
|
this.initData = 100;
|
|
|
- _this.$dialog.loading.open('数据加载中...');
|
|
|
- setTimeout(() => {
|
|
|
- _this.$dialog.loading.close();
|
|
|
- _this.registered();
|
|
|
- }, 2000);
|
|
|
+ // _this.$dialog.loading.open('数据加载中...');
|
|
|
+ // setTimeout(() => {
|
|
|
+ // _this.$dialog.loading.close();
|
|
|
+ // // _this.registered();
|
|
|
+ // }, 2000);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -715,7 +789,7 @@
|
|
|
|
|
|
// 历史信息
|
|
|
if (redata.message_type == 'toOld') {
|
|
|
- console.log(redata, '历史信息')
|
|
|
+ // console.log(redata, '历史信息')
|
|
|
this.hisSviceChat = [];
|
|
|
let obj = redata;
|
|
|
this.historyMsgtext = obj.data.content;
|
|
|
@@ -725,14 +799,50 @@
|
|
|
text: this.historyMsgtext,
|
|
|
}
|
|
|
})
|
|
|
+ let historyTime = '';
|
|
|
obj.data.chatLog.forEach(res => {
|
|
|
- res.content = JSON.parse(res.content)
|
|
|
- this.hisSviceChat.push(res)
|
|
|
+ // console.log(res,'历史信息');
|
|
|
+ res.content = JSON.parse(res.content);
|
|
|
+ let time_line = this.$public.customFormatDateTime(res.time_line,'',3);
|
|
|
+ // res.time_line =
|
|
|
+ if(!historyTime){
|
|
|
+ res.time_line = time_line
|
|
|
+ }else{
|
|
|
+ let newTime = time_line.split(':');
|
|
|
+ let lastTime = historyTime.split(':');
|
|
|
+ if(newTime[0]==lastTime[0] && newTime[1] < (lastTime[1]+2)){
|
|
|
+ res.time_line = '';
|
|
|
+ }else{
|
|
|
+ res.time_line = time_line
|
|
|
+ }
|
|
|
+ }
|
|
|
+ historyTime = time_line;
|
|
|
+ this.hisSviceChat.push(res);
|
|
|
})
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
+ //获取发送时间
|
|
|
+ if(redata.message_type == "webTime"){
|
|
|
+ if(this.webTime){
|
|
|
+ let newTime = redata.data.webTime.split(':');
|
|
|
+ let time = this.webTime.split(':');
|
|
|
+
|
|
|
+ if(newTime[0]*1 > time[0]*1 ){
|
|
|
+ // console.log('newTime[0]')
|
|
|
+ this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
|
|
|
+ }else if(newTime[0]*1 == time[0]*1 && (newTime[1]*1 - time[1]*1) > 2 ){
|
|
|
+ this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
|
|
|
+ // console.log('newTime[1]')
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.chat[this.chatIndex].time = redata.data.webTime;
|
|
|
+ // this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
|
|
|
+ }
|
|
|
+ this.webTime = redata.data.webTime
|
|
|
+ }
|
|
|
+
|
|
|
//屏幕滚动
|
|
|
this.automaticRolling();
|
|
|
},
|
|
|
@@ -744,16 +854,51 @@
|
|
|
},
|
|
|
|
|
|
|
|
|
+
|
|
|
/*******************************************/
|
|
|
//关闭
|
|
|
socket_close(e) {
|
|
|
- // console.log('断开连接', e);
|
|
|
+ console.log('断开连接', e);
|
|
|
this.initData = 100;
|
|
|
this.link_success = false;
|
|
|
- this.registered();
|
|
|
+ this.setInit();
|
|
|
+ this.reconnect();
|
|
|
+ // this.registered();
|
|
|
// this.websock.close()
|
|
|
},
|
|
|
|
|
|
+
|
|
|
+ /***************************************/
|
|
|
+ //socket重连
|
|
|
+ reconnect() {
|
|
|
+ if (this.lockReconnect) { //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.lockReconnect = true;
|
|
|
+ this.reconnectData && clearTimeout(this.reconnectData);
|
|
|
+ this.reconnectData = setTimeout(() => {
|
|
|
+ this.initWebSocket(this.apiToken);
|
|
|
+ //this.registered()
|
|
|
+ console.log('-----lail-----');
|
|
|
+ this.lockReconnect = false;
|
|
|
+ }, 2000)
|
|
|
+ },
|
|
|
+
|
|
|
+ /*************************************/
|
|
|
+ //心跳检测
|
|
|
+ heatBeat() {
|
|
|
+ this.timeoutObj && clearTimeout(this.timeoutObj);
|
|
|
+ this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
|
|
|
+ this.timeoutObj = setTimeout(() => {
|
|
|
+ // console.log('发送', {type: 'ping'});
|
|
|
+ this.socket_send(JSON.stringify({type: 'ping'})) //根据后台要求发送
|
|
|
+ this.serverTimeoutObj = setTimeout(() => {
|
|
|
+ // console.log('------close-------')
|
|
|
+ this.websock.close(); //如果 4秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
|
|
|
+ }, 4000);
|
|
|
+ }, this.timeout)
|
|
|
+ },
|
|
|
+
|
|
|
/*****************************************/
|
|
|
//用户匿名注册
|
|
|
registered() {
|
|
|
@@ -788,7 +933,7 @@
|
|
|
});
|
|
|
}else if (res.data.code == 1) {
|
|
|
this.user_info = res.data.data;
|
|
|
- console.log(this.user_info)
|
|
|
+ // console.log(this.user_info)
|
|
|
// 游客 token
|
|
|
localStorage.setItem("token", res.data.data.token);
|
|
|
localStorage.setItem("tutype", res.data.tutype);
|
|
|
@@ -796,7 +941,7 @@
|
|
|
|
|
|
setTimeout(() => {
|
|
|
this.$dialog.loading.close();
|
|
|
- this.initWebsocket();
|
|
|
+ this.initWebsocket(this.apiToken);
|
|
|
}, 2000)
|
|
|
//console.log(res.data.data)
|
|
|
}
|
|
|
@@ -834,7 +979,6 @@
|
|
|
this.group = id;
|
|
|
this.$dialog.loading.open('转接中...')
|
|
|
if (this.isTurnArtifcial) {
|
|
|
-
|
|
|
let data = {
|
|
|
'type': 'userInit',
|
|
|
data: {
|
|
|
@@ -855,7 +999,6 @@
|
|
|
if (this.text_info == '') return;
|
|
|
let str = this.text_info;
|
|
|
let formatStr = str.replace(/\n|\r\n/g, "<br>");
|
|
|
-
|
|
|
let type = 'toRobot';
|
|
|
let data = {};
|
|
|
let obj = {
|
|
|
@@ -880,8 +1023,10 @@
|
|
|
conversationId: this.conversationId,
|
|
|
}
|
|
|
type = 'chatMessage';
|
|
|
+ this.chatIndex = this.chat.length;
|
|
|
this.chat.push({
|
|
|
type: 'user',
|
|
|
+ time:'',
|
|
|
content: {text: this.turnFace(obj.text)}
|
|
|
})
|
|
|
} else {//和机器人聊天
|
|
|
@@ -891,7 +1036,7 @@
|
|
|
robotgroups_id: '1',
|
|
|
}
|
|
|
|
|
|
- console.log(this.turnFace(formatStr));
|
|
|
+ // console.log(this.turnFace(formatStr));
|
|
|
type = 'toRobot';
|
|
|
//本地存放数据
|
|
|
this.robot.push({
|
|
|
@@ -908,13 +1053,13 @@
|
|
|
/*******************************************/
|
|
|
//获取转接人工客服列表
|
|
|
connectionService() {
|
|
|
- if (!this.isConnection) return
|
|
|
+ // if (!this.isConnection) return
|
|
|
let obj = {
|
|
|
headers: {
|
|
|
"apiToken": this.setApiToken('index', 'groups', this.currentTime[0], 'index')
|
|
|
}
|
|
|
}
|
|
|
- this.isConnection = false;
|
|
|
+ // this.isConnection = false;
|
|
|
//api
|
|
|
this.get('api/index/groups/index', obj).then(res => {
|
|
|
if (res.data.code == 1) {
|
|
|
@@ -937,7 +1082,7 @@
|
|
|
// let input_box = document.getElementById('input_box') // 获取对象
|
|
|
|
|
|
//判断是否是苹果手机自代浏览器
|
|
|
- if (/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)) {
|
|
|
+ if (/Safari/.test(navigator.userAgent) && /Chrome/.test(navigator.userAgent)) {
|
|
|
this.box_height = true; //input_box+'px';
|
|
|
}
|
|
|
|
|
|
@@ -954,13 +1099,20 @@
|
|
|
let files = e.target.files || e.dataTransfer.files;
|
|
|
if (!files.length) return;
|
|
|
let picavalue = files[0];
|
|
|
- //console.log(picavalue);
|
|
|
- if (picavalue.size / 1000 > 20000) {
|
|
|
- this.$message({
|
|
|
- message: "图片过大不支持上传",
|
|
|
- type: "warning"
|
|
|
+ const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
|
|
|
+ const isLt2M = picavalue.size / 1000 / 1000 > 2;
|
|
|
+
|
|
|
+ if (isLt2M) {
|
|
|
+ this.$dialog.notify({
|
|
|
+ mes: '图片过大不支持上传哦！',
|
|
|
+ timeout: 2000,
|
|
|
});
|
|
|
- } else {
|
|
|
+ }else if(!isJPG){
|
|
|
+ this.$dialog.notify({
|
|
|
+ mes: '只能上传图片哦！',
|
|
|
+ timeout: 2000,
|
|
|
+ });
|
|
|
+ }else {
|
|
|
this.$public.imgPreview(picavalue, function (imgSrc, formData) {
|
|
|
// let img = imgSrc;
|
|
|
|
|
|
@@ -1007,7 +1159,7 @@
|
|
|
});
|
|
|
}
|
|
|
self.socket_send(JSON.stringify({type, data}))
|
|
|
- this.automaticRolling();
|
|
|
+ self.automaticRolling();
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
@@ -1106,24 +1258,32 @@
|
|
|
/*******************************************/
|
|
|
//提交评价信息
|
|
|
evaluateEsc() {
|
|
|
- this.get('/api/index/evaluate/putEvaluate', {
|
|
|
- params: {
|
|
|
- 'evaluateId': this.evaluateState,
|
|
|
- 'conversationId': this.conversationId,
|
|
|
- }, headers: {
|
|
|
- 'Content-Type': 'application/x-www-form-urlencoded',
|
|
|
- 'apiToken': this.setApiToken('putevaluate', 'evaluate', this.currentTime[0], 'index')
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- if (res.data.code == 1) {
|
|
|
- console.log(res.data.data,'评价')
|
|
|
- this.bottomShow = false;
|
|
|
- //this.hintSwitch.evaluateOnOff = true;
|
|
|
- this.haveEvaluation = true; // 标识已评价
|
|
|
-
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
+ console.log();
|
|
|
+ if(this.evaluateState != 100){
|
|
|
+ this.bottomShow = false;
|
|
|
+ this.haveEvaluation = true; // 标识已评价
|
|
|
+ this.socket_send(JSON.stringify({type:'evaluate', data:{
|
|
|
+ evaluate_id:this.evaluateState,
|
|
|
+ conversationId:this.conversationId ,
|
|
|
+ // evaluate_content:''
|
|
|
+ }}))
|
|
|
+
|
|
|
+ this.$dialog.notify({
|
|
|
+ mes: '感谢你的评价！',
|
|
|
+ timeout: 2000,
|
|
|
+ callback: () => {
|
|
|
+ //console.log('我走咯！');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.$dialog.notify({
|
|
|
+ mes: '亲，请选择评价类型...',
|
|
|
+ timeout: 2000,
|
|
|
+ callback: () => {
|
|
|
+ //console.log('我走咯！');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
},
|
|
|
|
|
|
/************************************************/
|
|
|
@@ -1132,14 +1292,16 @@
|
|
|
this.haveEvaluation = false;
|
|
|
this.chat = [];
|
|
|
this.evaluateState = 100;
|
|
|
+ this.hisSviceChat = [];
|
|
|
this.meme = false
|
|
|
- this.frceArr = [];//表情包代码
|
|
|
+ // this.frceArr = [];//表情包代码
|
|
|
this.isConnection = true;
|
|
|
+ this.isExit = false;
|
|
|
this.service_info = {
|
|
|
avatar: '/static/customer/images/robot.png',
|
|
|
job_name: '001',
|
|
|
name: '智能客服',
|
|
|
- signature: "万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！"
|
|
|
+ signature: " "
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -1158,25 +1320,19 @@
|
|
|
},
|
|
|
// 留言知识库返回到主页
|
|
|
returnIndex(data) {
|
|
|
+ console.log(data)
|
|
|
this.knowledge = data
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
- /**
|
|
|
- * 组件挂载阶段
|
|
|
- */
|
|
|
- created() {
|
|
|
- this.frceArr = frce.frce;
|
|
|
- // this.initialLoginCode();
|
|
|
- },
|
|
|
-
|
|
|
/**
|
|
|
* 视图挂载前
|
|
|
*/
|
|
|
mounted() {
|
|
|
this.source.appuid = this.$public.getQueryString('appuid');//用户标识
|
|
|
this.source.appid = this.$public.getQueryString('appid');//用户来源
|
|
|
+ this.frceArr = frce.frce;
|
|
|
//console.log(this.source);
|
|
|
//页面初始化获取系统时间第一步
|
|
|
//console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
|
|
|
@@ -1199,6 +1355,15 @@
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+
|
|
|
+ destroyed() {
|
|
|
+ this.setInit();
|
|
|
+ this.websock.close() //离开路由之后断开websocket连接
|
|
|
+ this.lockReconnect = true;
|
|
|
+ clearTimeout(this.reconnectData); //离开清除 timeout
|
|
|
+ clearTimeout(this.timeoutObj); //离开清除 timeout
|
|
|
+ clearTimeout(this.serverTimeoutObj); //离开清除 timeout
|
|
|
+ },
|
|
|
// 计算
|
|
|
computed: {
|
|
|
inputmsg() {
|
