|
|
@@ -29,6 +29,95 @@
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
+ <!-- 会话总览 -->
|
|
|
+ <el-badge class="item">
|
|
|
+ <!-- el-icon-menu -->
|
|
|
+ <el-button @click="getInnerDrawer()">
|
|
|
+ <i style="font-size:14px; color:#5aa0fbbd ;" class="el-icon-menu"> </i>会话总览
|
|
|
+ </el-button>
|
|
|
+ <el-drawer
|
|
|
+ title="会话总览"
|
|
|
+ :modal="false"
|
|
|
+ :show-close="true"
|
|
|
+ size="90%"
|
|
|
+ style="margin-top: 7vh"
|
|
|
+ :before-close="handleClose"
|
|
|
+ :visible.sync="innerDrawer">
|
|
|
+ <div class="session_overview">
|
|
|
+ <!-- 会话列表 -->
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-tree class="session_list"
|
|
|
+ :data="dataTree"
|
|
|
+ :props="defaultProps"
|
|
|
+ default-expand-all
|
|
|
+ @node-click="handleNodeClick">
|
|
|
+ </el-tree>
|
|
|
+ </el-col>
|
|
|
+ <!-- 会话消息 -->
|
|
|
+ <el-col class="session_box" :span="12">
|
|
|
+ <div class="session_box_title">{{session_litle ? session_litle :'未选择会话'}}</div>
|
|
|
+ <div class="session_box_content">
|
|
|
+ <!-- <div class="chatWindow" > -->
|
|
|
+ <div v-for="(item,index) in dataList " :key="index">
|
|
|
+ <!-- 模拟用户 -->
|
|
|
+ <div v-if="item.to_id.startsWith('KF')" style="padding-top:10px;">
|
|
|
+ <div class="title_time">
|
|
|
+ <span>{{item.time_line}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.content.text" class=" row wrap" >
|
|
|
+ <div class="left_session item-center" v-html="item.content.text"></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.content.img" class="row " >
|
|
|
+ <div class="left_session item-center " >
|
|
|
+ <img :src="img_http+item.content.img" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 模拟客户 -->
|
|
|
+ <div v-else style="padding-top:10px;">
|
|
|
+ <div class="row rightAlignment title_time" style="width: 100%;">
|
|
|
+ <span>{{item.time_line}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.content.text" class="row rightAlignment">
|
|
|
+ <div class="right_session item-center wrap" v-html="item.content.text"></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.content.img" class="row rightAlignment" >
|
|
|
+ <div class="right_session item-center ">
|
|
|
+ <img :src="img_http+item.content.img" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <!-- 用户信息 -->
|
|
|
+ <el-col class="user_info" :span="6">
|
|
|
+ <!-- 用户信息展示框 -->
|
|
|
+ <div>
|
|
|
+ <ul style="padding-inline-start:0px; margin-block-start:0; margin-top:30px;">
|
|
|
+ <li style="font-weight:bold;font-weight:bold; color:#666666;">访问信息</li>
|
|
|
+ <li>IP地址：{{visitorsInfo.user_ip}}</li>
|
|
|
+ <li>来源终端：{{visitorsInfo.system}}-{{visitorsInfo.browse}}</li>
|
|
|
+ </ul>
|
|
|
+ <ul style="padding-inline-start:0px; margin-block-start: 0; margin-top:30px;">
|
|
|
+ <li style="font-weight:bold;font-weight:bold; color:#666666;">用户信息</li>
|
|
|
+ <li>账号：{{visitorsInfo.account_name}}</li>
|
|
|
+ <li>标签：{{visitorsInfo.label}}</li>
|
|
|
+ <li>昵称：{{visitorsInfo.nick_name}}</li>
|
|
|
+ <li>手机：{{visitorsInfo.visitorsInfo_phone}}</li>
|
|
|
+ <li>邮箱：{{visitorsInfo.visitorsInfo_email}}</li>
|
|
|
+ <li>地址：{{visitorsInfo.address}}</li>
|
|
|
+ <li>备注：{{visitorsInfo.remark}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-drawer>
|
|
|
+
|
|
|
+ </el-badge>
|
|
|
+ <!-- 消息中心 -->
|
|
|
<el-badge :value="unreadNum" class="item">
|
|
|
<el-button @click="openDrawer">
|
|
|
<i style="font-size:14px; color:#5399F5;" class="el-icon-chat-dot-square"> </i>消息中心
|
|
|
@@ -59,7 +148,21 @@
|
|
|
userID:null,
|
|
|
unreadNum:null, // 未读数量
|
|
|
img_http:'http://kfadmin.bocai186.com',//图片路径域
|
|
|
+ innerDrawer:false,//会话总览抽屉开关
|
|
|
// img_http: 'http://192.168.2.187:8090',//图片路径域
|
|
|
+ dataTree: [],
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'label',
|
|
|
+ },
|
|
|
+ interval:'',//列表循环定时器
|
|
|
+ ession_int:'',//会话信息循环定时器
|
|
|
+ visitorsInfo:{},//访客信息
|
|
|
+ dataList:[],//会话信息列表
|
|
|
+ servicelog:'',//当前会话工单信息
|
|
|
+ session_litle:'',//会话标题
|
|
|
+ newTime:'',//本次最新时间
|
|
|
+ isGetList:false,//点击获取会话信息
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -120,14 +223,15 @@
|
|
|
websocketsend(Data) {
|
|
|
this.$websocket.send(Data);
|
|
|
},
|
|
|
- // 未读信息
|
|
|
+
|
|
|
+ /****************未读信息**************/
|
|
|
unreadnotice(){
|
|
|
- let str = "unreadnotice" + "customer-service" + "index" + this.time + "service";
|
|
|
+ let str = "unreadnotice" + "customer-service" + "index" + "service";
|
|
|
let obj = {
|
|
|
headers: {
|
|
|
"Content-Type": "application/x-www-form-urlencoded",
|
|
|
apiToken: this.$md5(str),
|
|
|
- userToken: this.token
|
|
|
+ userToken: this.user_info.token
|
|
|
},
|
|
|
user_id: this.userID
|
|
|
};
|
|
|
@@ -138,8 +242,109 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- },
|
|
|
|
|
|
+ /************获取客服和用户会话信息************/
|
|
|
+ handleNodeClick(data,i,j){
|
|
|
+ if(!data.children){
|
|
|
+ if(this.isGetList) return false
|
|
|
+ clearInterval(this.ession_int);
|
|
|
+ this.servicelog = data;
|
|
|
+ this.get_session_lise();
|
|
|
+ this.ession_int = setInterval(()=>{
|
|
|
+ this.get_session_lise(this.newTime);
|
|
|
+ },1000*5)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /***************会话总览关闭前回掉处理************/
|
|
|
+ handleClose(){
|
|
|
+ this.innerDrawer = false;
|
|
|
+ //清除列表定时请求
|
|
|
+ clearInterval(this.interval);
|
|
|
+ //
|
|
|
+ clearInterval(this.ession_int);
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+
|
|
|
+ /*************获取会话总览数据************/
|
|
|
+ getInnerDrawer(){
|
|
|
+ if(this.innerDrawer) return false;
|
|
|
+ this.innerDrawer = true;
|
|
|
+ let obj = {
|
|
|
+ headers: {
|
|
|
+ apiToken: this.$md5("allconversation" + "customer-service" + "history" + "service"),
|
|
|
+ userToken: this.user_info.token
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.post("api/service/history/allConversation",'',obj).then(res => {
|
|
|
+ if(res.data.code === 1){
|
|
|
+ this.dataTree = res.data.data;
|
|
|
+ //this.unreadNum = res.data.data.length;
|
|
|
+ this.interval = setInterval(()=>{
|
|
|
+ this.post("api/service/history/allConversation",'',obj).then(res => {
|
|
|
+ if(res.data.code === 1){
|
|
|
+ console.log('asda',res.data.data)
|
|
|
+ this.dataTree = res.data.data;
|
|
|
+ //this.unreadNum = res.data.data.length;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(2);
|
|
|
+ },1000*60);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /******************会话详情列表******************/
|
|
|
+ get_session_lise(time){
|
|
|
+ // if() return false
|
|
|
+ let str ="chatbytime" + "customer-service" + "history" + "service";
|
|
|
+ this.get("api/service/history/chatByTime",{
|
|
|
+ params:{
|
|
|
+ servicelog_id:this.servicelog.servicelog_id,
|
|
|
+ lastTime:time,
|
|
|
+ },
|
|
|
+ headers:{
|
|
|
+ 'X-Requested-With': 'XMLHttpRequest',
|
|
|
+ 'apiToken': this.$md5(str),
|
|
|
+ 'userToken': this.user_info.token
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ if(res.data.code == 1){
|
|
|
+ res.data.data.list = res.data.data.list.reverse();
|
|
|
+ this.isGetList = false;
|
|
|
+ //本次最新时间
|
|
|
+ this.newTime = res.data.data.list[res.data.data.list.length -1].time_line
|
|
|
+ this.alarm = res.data.data.alarm;
|
|
|
+ //访客信息
|
|
|
+ this.visitorsInfo = res.data.data.account;
|
|
|
+ let name = this.visitorsInfo.nick_name ? this.visitorsInfo.nick_name : this.visitorsInfo.account_name
|
|
|
+ this.session_litle = '(组)'+res.data.data.groupName +'->(客服)'+ res.data.data.serverName +'->(会话)'+name
|
|
|
+ res.data.data.list.forEach(e => {
|
|
|
+ //时间戳转时间
|
|
|
+ e.time_line = this.$public.customFormatDateTime(e.time_line);
|
|
|
+ //字符串转换成对象
|
|
|
+ e.content =JSON.parse(e.content);
|
|
|
+ //文字转表情符号
|
|
|
+ e.content.text = this.$public.turnFace(e.content.text,this.$frce);
|
|
|
+ this.dataList.push(e)
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ /*******************会话总览数据初始化****************/
|
|
|
+ init(){
|
|
|
+ this.visitorsInfo = {};//访客信息
|
|
|
+ this.dataList = [];//会话信息列表
|
|
|
+ this.servicelog_id = '';//会话工单号
|
|
|
+ this.session_litle = '';//会话标题
|
|
|
+ this.newTime = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ /***
|
|
|
+ *
|
|
|
+ */
|
|
|
mounted() {
|
|
|
if (this.$store.getters.get_stateValue) {
|
|
|
this.value = this.$store.getters.get_stateValue;
|
|
|
@@ -154,7 +359,7 @@
|
|
|
let _this = this;
|
|
|
let get = setTimeout(function(){
|
|
|
_this.unreadnotice();
|
|
|
- },1000*60)
|
|
|
+ },1000)
|
|
|
|
|
|
|
|
|
|
|
|
@@ -224,10 +429,77 @@
|
|
|
.el-popover {
|
|
|
height: 700px !important;
|
|
|
}
|
|
|
-
|
|
|
- /* .el-dropdown{
|
|
|
- border: 1px solid #ECF4FF;
|
|
|
- } */
|
|
|
+ /* 会话总览 */
|
|
|
+ .session_overview{
|
|
|
+ /* padding:0 20px; */
|
|
|
+ border: 1px solid #d5e5ff !important;
|
|
|
+ /* border-top:1px solid #d5e5ff; */
|
|
|
+ height: 92vh;
|
|
|
+ }
|
|
|
+ .session_list{
|
|
|
+ /* margin-top: 10px; */
|
|
|
+ padding: 10px 20px;
|
|
|
+ height: 92vh;
|
|
|
+ }
|
|
|
+ .session_box{
|
|
|
+ border-left: 1px solid #d5e5ff !important;
|
|
|
+ border-right: 1px solid #d5e5ff !important;
|
|
|
+ height: 92vh;
|
|
|
+ padding:10px 0;
|
|
|
+ }
|
|
|
+ .session_box_title{
|
|
|
+ padding: 0 20px;
|
|
|
+ padding-bottom:10px;
|
|
|
+ border-bottom: 1px solid #d5e5ff !important;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(102,102,102,1);
|
|
|
+ }
|
|
|
+ .session_box_content{
|
|
|
+ padding: 10px 20px;
|
|
|
+ height: 70vh;
|
|
|
+ border-bottom: 1px solid #d5e5ff !important;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(102,102,102,1);
|
|
|
+ overflow:auto
|
|
|
+ }
|
|
|
+ .user_info{
|
|
|
+ padding:10px 20px;
|
|
|
+ height: 92vh;
|
|
|
+ font-size:14px;
|
|
|
+ color:rgba(153,153,153,1);
|
|
|
+ font-weight:400;
|
|
|
+ }
|
|
|
+ .user_info li{
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+ .title_time{
|
|
|
+ font-size:12px;
|
|
|
+ font-weight:400;
|
|
|
+ color:rgba(187,187,187,1);
|
|
|
+ }
|
|
|
+ .left_session{
|
|
|
+ border:1px solid rgba(221,221,221,1);
|
|
|
+ margin-right: 50px;
|
|
|
+ max-width: 100%;
|
|
|
+ min-height: 20px;
|
|
|
+ padding: 6px;
|
|
|
+ background:rgba(245,245,245,1);
|
|
|
+ border-radius:0px 10px 10px 10px;
|
|
|
+ margin-top:6px;
|
|
|
+ }
|
|
|
+ .right_session{
|
|
|
+ margin-top:6px;
|
|
|
+ border:1px solid rgba(221,221,221,1);
|
|
|
+ margin-left: 50px;
|
|
|
+ max-width: 100%;
|
|
|
+ min-height: 20px;
|
|
|
+ padding: 6px;
|
|
|
+ background:rgba(223,240,255,1);
|
|
|
+ justify-content: flex-end;
|
|
|
+ border-radius:10px 0px 10px 10px;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style>
|
