|
|
@@ -521,6 +521,12 @@
|
|
|
.step_num_bg {
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+.van_loading {
|
|
|
+ height: 400px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<body>
|
|
|
@@ -589,12 +595,13 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-popover>
|
|
|
- <van-search class="search_input" v-model="keyword" label="顾问："input-align="center" left-icon="" right-icon="search" @search="handleSearch"></van-search>
|
|
|
+ <van-search class="search_input" v-model="keyword" search :clearable="false" label="顾问：" left-icon="" right-icon="search" @search="handleSearch" @click-right-icon="handleSearch"></van-search>
|
|
|
<van-calendar type="range" v-model="showSelfDate" @confirm="onSelfConfirm" color="#1677FF" :min-date="minDate"
|
|
|
:max-date="maxDate" :allow-same-day="true"></van-calendar>
|
|
|
</div>
|
|
|
<div class="box_connect">
|
|
|
- <div class="branch_table" style="margin-bottom: 20px;">
|
|
|
+ <van-loading type="spinner" color="#1989fa" class="van_loading" v-if="loading"></van-loading>
|
|
|
+ <div class="branch_table" style="margin-bottom: 20px;" v-if="!loading">
|
|
|
<div class="branch_header" style="box-sizing: border-box;">
|
|
|
<div style="width: 40px;">顾问</div>
|
|
|
<div>今日处理<br />消息数</div>
|
|
|
@@ -636,20 +643,21 @@
|
|
|
:max-date="maxDate" :allow-same-day="true"></van-calendar>
|
|
|
</div>
|
|
|
<div class="box_connect">
|
|
|
- <div class="branch_table" style="margin-bottom: 20px;">
|
|
|
- <div class="branch_header" style="box-sizing: border-box;">
|
|
|
- <div style="width: 40px;">客户昵称</div>
|
|
|
- <div>手机号</div>
|
|
|
- <div>最新消息<br />时间</div>
|
|
|
- <div>等待时间</div>
|
|
|
- <div>最新消息<br />内容</div>
|
|
|
+ <van-loading type="spinner" color="#1989fa" class="van_loading" v-if="loading"></van-loading>
|
|
|
+ <div class="branch_table" style="margin-bottom: 20px;" v-if="!loading">
|
|
|
+ <div class="branch_header">
|
|
|
+ <div style="width: 50px;">客户昵称</div>
|
|
|
+ <div style="width: 80px;">手机号</div>
|
|
|
+ <div style="width: 100px;">最新消息<br />时间</div>
|
|
|
+ <div style="width: 60px;">等待时间</div>
|
|
|
+ <div style="width: 60px;">最新消息<br />内容</div>
|
|
|
</div>
|
|
|
- <div class="branch_item" style="box-sizing: border-box;" v-for="(item, index) in memberDetailReplyData" :key="index">
|
|
|
- <div style="width: 40px;">{{item.clientName}}</div>
|
|
|
- <div style="width: 40px;">{{item.clientPhone}}</div>
|
|
|
- <div style="width: 40px;">{{item.msgTime}}</div>
|
|
|
- <div style="width: 40px;">{{item.waitSeconds}}</div>
|
|
|
- <div style="width: 40px;">{{item.content}}</div>
|
|
|
+ <div class="branch_item" v-for="(item, index) in memberDetailReplyData" :key="index">
|
|
|
+ <div style="width: 50px;">{{item.clientName}}</div>
|
|
|
+ <div style="width: 80px;">{{item.clientPhone}}</div>
|
|
|
+ <div style="width: 100px;">{{timeFormat(item.msgTime)}}</div>
|
|
|
+ <div style="width: 60px;">{{(item.waitSeconds/60).toFixed(2)}}分钟</div>
|
|
|
+ <div style="width: 60px;">{{item.content}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<van-pagination v-model="currentItemPage" :total-items="itemTotalItems" :show-page-size="3" force-ellipses
|
|
|
@@ -661,7 +669,7 @@
|
|
|
<van-popup v-model="showDoneReply" position="right" :overlay="false" :lock-scroll="false" :style="{ width: '100%', height: '100%' }">
|
|
|
<div class="memberReply_title">
|
|
|
<image class="close_icon" src="./img/close.png" @click="closeReply"></image>
|
|
|
- <div>顾问完成情况统计1</div>
|
|
|
+ <div>顾问完成情况统计</div>
|
|
|
<div class="close_icon"></div>
|
|
|
</div>
|
|
|
<div class="pop_content">
|
|
|
@@ -1116,7 +1124,7 @@
|
|
|
|
|
|
saleRankData: [], // 销售统计排名数据
|
|
|
timeOutDate: [], // 聊天超时监测-日期
|
|
|
- timeOutMember: [], // 聊天超时监测-超时客户数
|
|
|
+ timeoutMember: [], // 聊天超时监测-超时客户数
|
|
|
timeData: '',
|
|
|
memberStartTime: '',
|
|
|
memberEndTime: '',
|
|
|
@@ -1136,6 +1144,7 @@
|
|
|
opInteractClient: [], // 运营任务-互动客户数
|
|
|
|
|
|
contentRankData: [], // 运营任务-素材排行榜
|
|
|
+ loading: false,
|
|
|
|
|
|
}
|
|
|
},
|
|
|
@@ -2273,9 +2282,9 @@
|
|
|
{// 第一种方式
|
|
|
type: 'value',
|
|
|
min: 0,
|
|
|
- max: Math.max(...this.proactiveServe, ...this.privateChat, ...this.groupMsgNum),
|
|
|
+ max: Math.max(...this.privateMsgNum, ...this.privateChat, ...this.groupMsgNum),
|
|
|
splitNumber: 5,
|
|
|
- interval: Math.max(...this.proactiveServe, ...this.privateChat, ...this.groupMsgNum) / 5,
|
|
|
+ interval: Math.max(...this.privateMsgNum, ...this.privateChat, ...this.groupMsgNum) / 5,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
color: "#222222",
|
|
|
@@ -2901,7 +2910,7 @@
|
|
|
// 聊天超时监测
|
|
|
getTimeOutTrendChart () {
|
|
|
this.timeOutDate = []
|
|
|
- this.timeOutMember = []
|
|
|
+ this.timeoutMember = []
|
|
|
if (this.noDealerIds()) {
|
|
|
return
|
|
|
}
|
|
|
@@ -2926,7 +2935,7 @@
|
|
|
if (data && data.length) {
|
|
|
data.forEach(item => {
|
|
|
this.timeOutDate.push(item.time.split('T')[0])
|
|
|
- this.timeOutMember.push(item.timeOutMember)
|
|
|
+ this.timeoutMember.push(item.timeoutMember)
|
|
|
})
|
|
|
this.$nextTick(() => {
|
|
|
this.timeOutTrendChart()
|
|
|
@@ -2977,9 +2986,9 @@
|
|
|
{// 第一种方式
|
|
|
type: 'value',
|
|
|
min: 0,
|
|
|
- max: Math.max(...this.timeOutMember),
|
|
|
+ max: Math.max(...this.timeoutMember),
|
|
|
splitNumber: 5,
|
|
|
- interval: Math.max(...this.timeOutMember) / 5,
|
|
|
+ interval: Math.max(...this.timeoutMember) / 5,
|
|
|
position: 'left',
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
@@ -3007,7 +3016,7 @@
|
|
|
{ offset: 1, color: 'rgba(255, 78, 78,0)' }
|
|
|
])
|
|
|
}, //填充区域样式
|
|
|
- data: this.timeOutMember,
|
|
|
+ data: this.timeoutMember,
|
|
|
symbol: 'none', //去掉折线图中的节点
|
|
|
smooth: true, //true 为平滑曲线，false为直线
|
|
|
}
|
|
|
@@ -3034,6 +3043,7 @@
|
|
|
this.getMemberReply()
|
|
|
},
|
|
|
getMemberReply () {
|
|
|
+ this.loading = true
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/memberReply`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
@@ -3062,6 +3072,8 @@
|
|
|
} else {
|
|
|
vant.Toast.fail(msg)
|
|
|
}
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
},
|
|
|
onSelect (val) {
|
|
|
@@ -3151,6 +3163,7 @@
|
|
|
},
|
|
|
// 顾客响应统计-详情
|
|
|
handleItemMemberReplyDetail() {
|
|
|
+ this.loading = true
|
|
|
fetch(this.httpUrl + `/scrm/v1/dw-dealer/m/memberReplyDetail`, {
|
|
|
method: 'post',
|
|
|
body: JSON.stringify({
|
|
|
@@ -3179,6 +3192,8 @@
|
|
|
} else {
|
|
|
vant.Toast.fail(msg)
|
|
|
}
|
|
|
+ }).finally(() => {
|
|
|
+ this.loading = false
|
|
|
})
|
|
|
},
|
|
|
// 顾客完成情况统计
|
|
|
@@ -3209,7 +3224,7 @@
|
|
|
let { data, code, msg } = result
|
|
|
if (code === 1) {
|
|
|
this.doneReplyData = data.records || []
|
|
|
- this.itemTotalItems = data.total || 0
|
|
|
+ this.totalItems = data.total || 0
|
|
|
} else if (code === 10001) {
|
|
|
this.loginOut()
|
|
|
} else {
|
|
|
@@ -3696,6 +3711,31 @@
|
|
|
// 返回指定参数的值，如果不存在则返回null
|
|
|
return urlParams.get(paramName);
|
|
|
},
|
|
|
+ timeFormat(time, format = 'yyyy-MM-dd hh:mm:ss') {
|
|
|
+ if (time === undefined || time === '' || time === null) {
|
|
|
+ return '--'
|
|
|
+ } else {
|
|
|
+ const date = new Date(time)
|
|
|
+ const o = {
|
|
|
+ 'M+': date.getMonth() + 1,
|
|
|
+ 'd+': date.getDate(),
|
|
|
+ 'h+': date.getHours(),
|
|
|
+ 'm+': date.getMinutes(),
|
|
|
+ 's+': date.getSeconds(),
|
|
|
+ 'q+': Math.floor((date.getMonth() + 3) / 3),
|
|
|
+ 'S': date.getMilliseconds()
|
|
|
+ }
|
|
|
+ if (/(y+)/.test(format)) {
|
|
|
+ format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
|
|
|
+ }
|
|
|
+ for (let k in o) {
|
|
|
+ if (new RegExp('(' + k + ')').test(format)) {
|
|
|
+ format = format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return format
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
|
|
|
})
|
