|
|
|
@@ -24,10 +24,10 @@ |
|
|
|
<view class="briefing-box"> |
|
|
|
<block v-for="(data, index) in numlist" :key="index"> |
|
|
|
<view class="briefing-box-item"> |
|
|
|
<view class="tops"> |
|
|
|
<view class="tops" :class="[data.class || '']"> |
|
|
|
{{ data.name }} |
|
|
|
</view> |
|
|
|
<view class="middle"> |
|
|
|
<view class="middle" :class="[data.class || '']"> |
|
|
|
{{ data.num || 0 }} |
|
|
|
</view> |
|
|
|
<view class="bottom"> |
|
|
|
@@ -35,7 +35,8 @@ |
|
|
|
<text class="b-text" |
|
|
|
:class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent || '0' }}</text> |
|
|
|
<template v-if="data.percent != 0"> |
|
|
|
<text style="margin-left: 8rpx;font-size: 34rpx;font-weight: bold;" :class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent > 0 ? '↑' : '↓' }}</text> |
|
|
|
<text style="margin-left: 8rpx;font-size: 34rpx;font-weight: bold;" |
|
|
|
:class="{up: data.percent > 0, down: data.percent < 0}">{{ data.percent > 0 ? '↑' : '↓' }}</text> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@@ -50,15 +51,21 @@ |
|
|
|
销讲场景执行排名 |
|
|
|
</view> |
|
|
|
<template v-if="isShowXJTop1List"> |
|
|
|
<view class="execution-ranking-desc"> |
|
|
|
<view class="execution-ranking-desc" v-if="false"> |
|
|
|
<text>销讲场景平均执行对比上周</text> |
|
|
|
<text>{{ rankTop('fractionPKName') }}</text> |
|
|
|
<text>{{ rankTop('fractionPK') }}</text> |
|
|
|
<text>%，其中【{{ rankTop('fractionBastName') }}】最强为</text> |
|
|
|
<text class="up">{{ rankTop('fractionBastValue') }}</text> |
|
|
|
<text>%，【{{ rankTop('fractionLastName') }}】执行最弱为</text> |
|
|
|
<text class="down">{{ rankTop('fractionLastValue') }}</text> |
|
|
|
<text>%;</text> |
|
|
|
<text>%</text> |
|
|
|
<template v-if="rankTop('fractionBastValue') > 0"> |
|
|
|
<text>，其中【{{ rankTop('fractionBastName') }}】最强为</text> |
|
|
|
<text class="up">{{ rankTop('fractionBastValue') }}</text> |
|
|
|
<text>%</text> |
|
|
|
</template> |
|
|
|
<template v-if="rankTop('fractionLastValue') < 0"> |
|
|
|
<text>，【{{ rankTop('fractionLastName') }}】执行最弱为</text> |
|
|
|
<text class="down">{{ rankTop('fractionLastValue') }}</text> |
|
|
|
<text>%;</text> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 排名百分比列表 --> |
|
|
|
@@ -67,8 +74,9 @@ |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="left">{{ percent.title }}</view> |
|
|
|
<view class="middle"> |
|
|
|
<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false" |
|
|
|
:percent="percent.value"></u-line-progress> |
|
|
|
<u-line-progress :active-color="$options.filters.setColor(index)" |
|
|
|
inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value"> |
|
|
|
</u-line-progress> |
|
|
|
</view> |
|
|
|
<view class="right"> {{ percent.value || '0' }} %</view> |
|
|
|
</view> |
|
|
|
@@ -87,8 +95,8 @@ |
|
|
|
<view class="statistics-title"> |
|
|
|
接待统计 |
|
|
|
</view> |
|
|
|
<template v-if="rankTop('ranktype')&&rankTop('people')&&weekObj.customerInfo1"> |
|
|
|
<view class="statistics-desc"> |
|
|
|
<template v-if="isShowStatistics"> |
|
|
|
<view class="statistics-desc" v-if="false"> |
|
|
|
<text> |
|
|
|
顾问平均执行率对比上周 |
|
|
|
</text> |
|
|
|
@@ -99,11 +107,11 @@ |
|
|
|
<text class=""> |
|
|
|
人，其中{{ rankTop('topName') || '' }}上升 |
|
|
|
</text> |
|
|
|
<text class="up">{{ rankTop('topPk') || '' }}</text> |
|
|
|
<text class="up">{{ rankTop('topPk') || '0' }}</text> |
|
|
|
<text class=""> |
|
|
|
%为最高，{{ rankTop('lastName') || '' }}下降 |
|
|
|
</text> |
|
|
|
<text class="down">{{ rankTop('lastPk') || '' }}</text> |
|
|
|
<text class="down">{{ rankTop('lastPk') || '0' }}</text> |
|
|
|
<text class=""> |
|
|
|
%降幅最大。 |
|
|
|
</text> |
|
|
|
@@ -146,14 +154,14 @@ |
|
|
|
顾问销讲执行率排名（TOP10） |
|
|
|
</view> |
|
|
|
<template v-if="isShowZXLTopList"> |
|
|
|
<!-- 排名百分比列表 --> |
|
|
|
<!-- 排名百分比列表 --> |
|
|
|
<view class="ranking-box"> |
|
|
|
<block v-for="(percent, index) in weekObj.ZXLTopList" :key="index"> |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="left">{{ percent.title }}</view> |
|
|
|
<view class="middle"> |
|
|
|
<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false" |
|
|
|
:percent="percent.value"> |
|
|
|
<u-line-progress :active-color="$options.filters.setColor(index)" |
|
|
|
inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value"> |
|
|
|
</u-line-progress> |
|
|
|
</view> |
|
|
|
<view class="right"> {{ percent.value || '0' }} %</view> |
|
|
|
@@ -182,11 +190,11 @@ |
|
|
|
<view class="ranking-item"> |
|
|
|
<view class="left">{{ percent.title }}</view> |
|
|
|
<view class="middle"> |
|
|
|
<u-line-progress :active-color="$options.filters.setColor(percent.value)" inactive-color="#F2F2F2" :show-percent="false" |
|
|
|
:percent="percent.value"> |
|
|
|
<u-line-progress :active-color="$options.filters.setColor(index)" |
|
|
|
inactive-color="#F2F2F2" :show-percent="false" :percent="percent.value"> |
|
|
|
</u-line-progress> |
|
|
|
</view> |
|
|
|
<view class="right"> {{ percent.value || '0' }} %</view> |
|
|
|
<view class="right"> {{ percent.value || '0' }} </view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
</view> |
|
|
|
@@ -200,35 +208,13 @@ |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 使用建议 --> |
|
|
|
<view class="proposal" v-if="false"> |
|
|
|
<view class="proposal" v-if="weekObj.suggest"> |
|
|
|
<view class="proposal-title"> |
|
|
|
使用建议 |
|
|
|
</view> |
|
|
|
<!-- 建议的文字 --> |
|
|
|
<view class="proposal-box"> |
|
|
|
<block v-for="(data, index) in 3" :key="index"> |
|
|
|
<view class="proposal-item"> |
|
|
|
<view class="lside"> |
|
|
|
{{ index+1 }} |
|
|
|
</view> |
|
|
|
<view class="rside"> |
|
|
|
<view class="rside-title"> |
|
|
|
执行率整体较低； |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="rside-box"> |
|
|
|
<view class="reason"> |
|
|
|
原因：整体平均执率低 |
|
|
|
</view> |
|
|
|
<view class="advice"> |
|
|
|
建议： 1、精简话术（关键词、指标点）; |
|
|
|
2、对顾问进行话术培训。 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
<u-parse class="ql-editor" :content="weekObj.suggest" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
@@ -244,7 +230,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import uParse from '@/components/gaoyia-parse/parse.vue' |
|
|
|
export default { |
|
|
|
|
|
|
|
components: { |
|
|
|
uParse |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableHead: [{ |
|
|
|
@@ -327,6 +318,7 @@ |
|
|
|
percentName: 'prohibitedNumPK', |
|
|
|
preNum: '', // 上周数量 |
|
|
|
preNumName: 'prohibitedNum2', // |
|
|
|
class: 'down', |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '客户画像触达 (次)', |
|
|
|
@@ -354,6 +346,7 @@ |
|
|
|
percentName: 'unlabelledReceptionNumPK', |
|
|
|
preNum: '', // 上周数量 |
|
|
|
preNumName: 'unlabelledReceptionNum2', // |
|
|
|
class: 'down', |
|
|
|
}, |
|
|
|
], |
|
|
|
|
|
|
|
@@ -365,65 +358,76 @@ |
|
|
|
|
|
|
|
|
|
|
|
computed: { |
|
|
|
|
|
|
|
|
|
|
|
// 排名最高与最低 |
|
|
|
rankTop() { |
|
|
|
return name => { |
|
|
|
let obj = {} |
|
|
|
try { |
|
|
|
|
|
|
|
|
|
|
|
if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) { |
|
|
|
obj.ranktype = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ? '上升' : '下降' |
|
|
|
obj.people = Math.abs(this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) |
|
|
|
obj.ranktype = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > |
|
|
|
0 ? '上升' : '下降' |
|
|
|
obj.people = Math.abs(this.weekObj.customerInfo1.length - this.weekObj.customerInfo2 |
|
|
|
.length) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0) { |
|
|
|
obj.topName = this.weekObj.customerInfo1[0].name |
|
|
|
obj.topPk = Math.abs(this.weekObj.customerInfo1[0].pk) |
|
|
|
obj.lastName = this.weekObj.customerInfo1[this.weekObj.customerInfo1.length-1].name, |
|
|
|
obj.lastPk = Math.abs(this.weekObj.customerInfo1[this.weekObj.customerInfo1.length-1].pk) |
|
|
|
obj.lastName = this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1].name, |
|
|
|
obj.lastPk = Math.abs(this.weekObj.customerInfo1[this.weekObj.customerInfo1.length - 1] |
|
|
|
.pk) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (this.weekObj.customerInfo1.length && this.weekObj.customerInfo2.length) { |
|
|
|
obj.class = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ? 'up' : 'down' |
|
|
|
obj.class = (this.weekObj.customerInfo1.length - this.weekObj.customerInfo2.length) > 0 ? |
|
|
|
'up' : 'down' |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (this.weekObj.fractionPK) { |
|
|
|
obj.fractionPKName = this.weekObj.fractionPK > 0 ? '上涨' : '下跌' |
|
|
|
obj.fractionPK = Math.abs(this.weekObj.fractionPK) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) { |
|
|
|
obj.fractionBastName = this.weekObj.XJTop1List[0].title |
|
|
|
obj.fractionBastValue = this.weekObj.XJTop1List[0].value |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0) { |
|
|
|
obj.fractionLastName = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length-1].title |
|
|
|
obj.fractionLastValue = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length-1].value |
|
|
|
obj.fractionLastName = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].title |
|
|
|
obj.fractionLastValue = this.weekObj.XJTop1List[this.weekObj.XJTop1List.length - 1].value |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return obj[name] || '' |
|
|
|
} catch(e) { |
|
|
|
} catch (e) { |
|
|
|
console.log(e) |
|
|
|
return '' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
isShowXJTop1List () { |
|
|
|
return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length |
|
|
|
// 接待统计 |
|
|
|
isShowStatistics() { |
|
|
|
// return this.rankTop('ranktype') && this.rankTop('class') && this.rankTop('people') && this.rankTop('topName') && this.rankTop('topPk') && this.rankTop('lastName') && this.rankTop('lastPk') && this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0 |
|
|
|
return this.weekObj.customerInfo1 && this.weekObj.customerInfo1.length > 0 |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
isShowXJTop1List() { |
|
|
|
// return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0 && this.rankTop('fractionPKName') && this.rankTop('fractionPK') && this.rankTop('fractionBastName') && this.rankTop('fractionBastValue') && this.rankTop('fractionLastName') && this.rankTop('fractionLastName') && this.rankTop('fractionLastValue') |
|
|
|
return this.weekObj.XJTop1List && this.weekObj.XJTop1List.length > 0 |
|
|
|
}, |
|
|
|
|
|
|
|
isShowZXLTopList() { |
|
|
|
return this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0 |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
isShowJDLTopList() { |
|
|
|
return this.weekObj.JDLTopList && this.weekObj.JDLTopList.length > 0 |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
onLoad(option) { |
|
|
|
@@ -436,7 +440,7 @@ |
|
|
|
return { |
|
|
|
title: `${this.projectName}数智工牌周报`, |
|
|
|
type: 2, |
|
|
|
path: `/pages/mine/reportExcel/weekRepor?id=${this.id}` |
|
|
|
path: `/pages/reportExcel/weekReport?id=${this.id}` |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@@ -454,7 +458,7 @@ |
|
|
|
this.bubbleSort(data.customerInfo2, 'pk') |
|
|
|
data.customerInfo1.reverse() |
|
|
|
data.customerInfo2.reverse() |
|
|
|
|
|
|
|
|
|
|
|
this.weekObj = { |
|
|
|
...res.zkMessage, |
|
|
|
...data |
|
|
|
@@ -479,8 +483,8 @@ |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 把对象转成数组并在后续的步骤方便处理 |
|
|
|
init() { |
|
|
|
console.log(this.weekObj, 'this.weekObj') |
|
|
|
@@ -533,21 +537,21 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 转换时间 |
|
|
|
getTimeLine(date, type = 1) { |
|
|
|
let resu = '--' |
|
|
|
if (!date) return resu |
|
|
|
let time = new Date(date) |
|
|
|
let time = new Date(date.replace(/-/g, '/')) |
|
|
|
time.setDate(time.getDate() - 7) |
|
|
|
let arr = date.split(' ') |
|
|
|
let str = arr[0] |
|
|
|
let result = str.split('-') |
|
|
|
|
|
|
|
|
|
|
|
let m = (time.getMonth() + 1) < 10 ? `0${time.getMonth() + 1}` : (time.getMonth() + 1) |
|
|
|
let d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate() |
|
|
|
|
|
|
|
|
|
|
|
if (type == 1) { |
|
|
|
resu = `${m}.${d}-${result[1]}.${result[2]}` |
|
|
|
} else { |
|
|
|
@@ -570,7 +574,8 @@ |
|
|
|
// 转换时间 |
|
|
|
getTimeLine(date, type = 1) { |
|
|
|
if (!date) return '--' |
|
|
|
let time = new Date(date) |
|
|
|
console.log(date.replace(/-/g, '/')) |
|
|
|
let time = new Date(date.replace(/-/g, '/')) |
|
|
|
time.setDate(time.getDate() - 7) |
|
|
|
let arr = date.split(' ') |
|
|
|
let str = arr[0] |
|
|
|
@@ -585,22 +590,22 @@ |
|
|
|
return `${m}月${d}日～${result[1]}月${result[2]}日` |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
// 设置颜色 |
|
|
|
setColor(value) { |
|
|
|
setColor(index) { |
|
|
|
let color = '' |
|
|
|
switch(true) { |
|
|
|
case 0 <= value && value <= 70 : |
|
|
|
color = '#4FC78F'; |
|
|
|
break; |
|
|
|
case 70 < value && value <= 80 : |
|
|
|
color = '#FFCC00'; |
|
|
|
switch (index) { |
|
|
|
case 0: |
|
|
|
color = '#E7483C'; |
|
|
|
break; |
|
|
|
case 80 < value && value <= 90 : |
|
|
|
case 1: |
|
|
|
color = '#FF8C13'; |
|
|
|
break; |
|
|
|
case 90 < value && value <= 100 : |
|
|
|
color = '#E7483C'; |
|
|
|
case 2: |
|
|
|
color = '#FFCC00'; |
|
|
|
break; |
|
|
|
default: |
|
|
|
color = '#4FC78F'; |
|
|
|
break; |
|
|
|
} |
|
|
|
return color |
|
|
|
@@ -610,6 +615,10 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@import '@/static/css/quill/quill.core.css'; |
|
|
|
@import '@/static/css/quill/quill.snow.css'; |
|
|
|
@import '@/static/css/quill/quill.bubble.css'; |
|
|
|
|
|
|
|
.pages { |
|
|
|
width: 100vw; |
|
|
|
min-height: 100vh; |
|
|
|
@@ -622,7 +631,7 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.container { |
|
|
|
padding: 30rpx 30rpx 0; |
|
|
|
padding: 30rpx 30rpx 40rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
background: #fff; |
|
|
|
@@ -644,7 +653,7 @@ |
|
|
|
font-weight: bold; |
|
|
|
color: #303030; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.date { |
|
|
|
// position: absolute; |
|
|
|
// right: 0; |
|
|
|
@@ -663,9 +672,8 @@ |
|
|
|
|
|
|
|
|
|
|
|
.briefing { |
|
|
|
margin: 40rpx 0 0 0; |
|
|
|
background: #fff; |
|
|
|
|
|
|
|
|
|
|
|
.briefing-title { |
|
|
|
padding: 0 30rpx; |
|
|
|
height: 90rpx; |
|
|
|
@@ -830,7 +838,7 @@ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.name { |
|
|
|
justify-content: flex-start; |
|
|
|
overflow: hidden; |
|
|
|
@@ -958,17 +966,18 @@ |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nav-footer { |
|
|
|
position: sticky; |
|
|
|
bottom: 32rpx; |
|
|
|
margin: 32rpx 0; |
|
|
|
bottom: 0; |
|
|
|
padding: 32rpx 0; |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
background: #fff; |
|
|
|
|
|
|
|
.footer-item { |
|
|
|
width: 686rpx; |
|
|
|
height: 88rpx; |
|
|
|
@@ -980,11 +989,11 @@ |
|
|
|
border-radius: 8rpx; |
|
|
|
overflow: hidden; |
|
|
|
font-size: 32rpx; |
|
|
|
|
|
|
|
|
|
|
|
&.full { |
|
|
|
background: #2671E2; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
|
|
.fulls { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
@@ -993,15 +1002,15 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.up { |
|
|
|
color: #E6273A; |
|
|
|
color: #43CD80 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.down { |
|
|
|
color: #43CD80; |
|
|
|
color: #E6273A !important; |
|
|
|
} |
|
|
|
|
|
|
|
.empity { |
