Acher
/
newEdition
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

提交日报周报页面

message
douzhuo 2 years ago
parent
8868fc9684
commit
2926aac6ee
3 changed files with 1941 additions and 2 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +24
    -2
      pages.json
  2. +745
    -0
      pages/reportExcel/dayReport.vue
  3. +1172
    -0
      pages/reportExcel/weekReport.vue

+ 24
- 2
pages.json View File

@@ -3,7 +3,8 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
//这个pages里只放这五个页面，新增页面时请对应的放到下面的分包里
"pages": [{
"pages": [
{
"path": "pages/index/guide",
"style": {
"navigationBarBackgroundColor": "#008EF2",
@@ -45,7 +46,8 @@
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true
}
}, {
},
{
"path": "pages/index/personal",
"style": {
"navigationBarTitleText": "我的",
@@ -53,6 +55,26 @@
"navigationStyle":"custom",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/reportExcel/dayReport",
"style": {
"navigationBarTitleText": "数智工牌日报",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
},
{
"path": "pages/reportExcel/weekReport",
"style": {
"navigationBarTitleText": "数智工牌周报",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black"
}
}
],
//这下面是分包


+ 745
- 0
pages/reportExcel/dayReport.vue View File

@@ -0,0 +1,745 @@
<template>
<view class="pages">
<!-- 日报内容部分 -->
<view class="container" ref="lists">
<!-- 头部日报卡 -->
<view class="c-head-card">
<view class="c-title-text">
{{ projectName }}数智工牌日报
</view>
<text class="date">{{ weekObj.createTime | fomatDate }}</text>
<view class="creative-time">
生成时间：{{ weekObj.createTime || '--' }}
</view>
</view>

<!-- 循环渲染的数据 -->
<view class="dateList">
<!-- -->
<view class="arrs">
<view class="arrs-items index1">
<view class="left">
1
</view>
<view class="right">
<view class="r-title">
<text>接待量：</text>
</view>
<view class="r-box">
<view class="r-box-item">
<text>接待量</text><text class="value">{{ weekObj.receptionCount || 0 }}</text>
</view>
<view class="r-box-item">
<text>有效接待</text><text class="value">{{ weekObj.activeCustomer || 0 }}</text>
</view>
<view class="r-box-item-lang">
<view>有效接待率<text class="value">{{ weekObj.validReceptionRate || 0 }}%</text></view>
<view class="contrast">对比昨天<text class="value"
:class="{down: weekObj.validReceptionRatePK < 0, up: weekObj.validReceptionRatePK > 0}">{{ weekObj.validReceptionRatePK > 0 ? '+' : '' }}{{ weekObj.validReceptionRatePK || 0 }}%</text>
</view>
</view>
</view>
</view>
</view>

<view class="arrs-items index2">
<view class="left">
2
</view>
<view class="right">
<view class="r-title">
<text>平均执行率：</text>
</view>
<view class="r-box">
<view class="r-box-item-lang">
<view>平均执行率<text class="value">{{ weekObj.fraction || 0 }}%</text></view>
<view class="contrast">对比昨天<text class="value"
:class="{down: weekObj.fractionPK < 0, up: weekObj.fractionPK > 0}">{{ weekObj.fractionPK > 0 ? '+' : '' }}{{ weekObj.fractionPK || 0 }}%</text>
</view>
</view>
</view>
</view>
</view>

<view class="arrs-items index3">
<view class="left">
3
</view>
<view class="right">
<view class="r-title">
<text>平均接待时长：</text>
</view>
<view class="r-box">
<view class="r-box-item-lang">
<view>平均接待时长<text class="value">{{ weekObj.avgDuration || 0 }}min</text></view>
<view class="contrast">对比昨天<text class="value"
:class="{down: weekObj.avgDurationPK < 0, up: weekObj.avgDurationPK > 0}">{{ weekObj.avgDurationPK > 0 ? '+' : '' }}{{ weekObj.avgDurationPK || 0 }}min</text>
</view>
</view>
</view>
</view>
</view>

<view class="arrs-items index4">
<view class="left">
4
</view>
<view class="right">
<view class="r-title">
<text>销讲维度执行前三：</text>
</view>
<view class="ranking">
<block v-for="(rank, rankIndex) in carryOutTop" :key="rankIndex">
<view class="ranking-item">
<view class="serial">
{{ rankIndex+1 }}
</view>
<view class="lside">
{{ rank.title || '--' }}
</view>
<view class="rside">
({{ rank.value || 0 }}%)
</view>
</view>
</block>
<template v-if="carryOutTop.length == 0">
<view class="empty">
暂无数据
</view>
</template>
</view>
</view>
</view>
<view class="arrs-items index5">
<view class="left">
5
</view>
<view class="right">
<view class="r-title">
<text>销讲维度执行弱项前三：</text>
</view>
<view class="ranking">
<block v-for="(rank, rankIndex) in carryOutLast" :key="rankIndex">
<view class="ranking-item">
<view class="serial">
{{ rankIndex+1 }}
</view>
<view class="lside">
{{ rank.title || '--' }}
</view>
<view class="rside">
({{ rank.value || 0 }}%)
</view>
</view>
</block>
<template v-if="carryOutLast.length == 0">
<view class="empty">
暂无数据
</view>
</template>
</view>
</view>
</view>

<view class="arrs-items index6">
<view class="left">
6
</view>
<view class="right">
<view class="r-title">
<text>置业顾问平均执行率排名：</text>
</view>
<view class="ranking">
<block v-for="(rank, rankIndex) in consultant" :key="rankIndex">
<view class="ranking-item">
<view class="serial">
{{ rankIndex+1 }}
</view>
<view class="lside">
{{ rank.title || '--' }}
</view>
<view class="rside">
({{ rank.value || 0 }}%)
</view>
</view>
</block>
<template v-if="consultant.length == 0">
<view class="empty">
暂无数据
</view>
</template>
</view>
</view>
</view>

<view class="arrs-items index7">
<view class="left">
7
</view>
<view class="right">
<view class="r-title">
<text>置业顾问平均接访时长排名：</text>
</view>
<view class="ranking">
<block v-for="(rank, rankIndex) in recording" :key="rankIndex">
<view class="ranking-item">
<view class="serial">
{{ rankIndex+1 }}
</view>
<view class="lside">
{{ rank.title || '--' }}
</view>
<view class="rside">
({{ rank.value || 0 }}min)
</view>
</view>
</block>

<template v-if="recording.length == 0">
<view class="empty">
暂无数据
</view>
</template>
</view>
</view>
</view>

<view class="arrs-items index8">
<view class="left">
8
</view>
<view class="right">
<view class="r-title">
<text>平均执行率最低的顾问：</text>
</view>
<view class="ranking">
<block v-for="(rank, rankIndex) in lowest" :key="rankIndex">
<view class="ranking-item">
<view class="lside">
{{ rank.title || '--' }}
</view>
<view class="rside value">
{{ rank.value || 0 }}%
</view>
</view>
</block>
<template v-if="lowest.length == 0">
<view class="empty">
暂无数据
</view>
</template>
</view>
</view>
</view>

<view class="arrs-items index9">
<view class="left">
9
</view>
<view class="right">
<view class="r-title">
<text>客户画像触达：</text>
<text class="num value">{{ weekObj.reachSum || 0 }}次</text>
</view>
</view>
</view>

<view class="arrs-items index10">
<view class="left">
10
</view>
<view class="right">
<view class="r-title">
<text>未标记接待数：</text>
<text class="num value down"
style="font-weight: 500;font-size: 34rpx;">{{ weekObj.unlabelledReceptionNum || 0 }}</text>
<text class="down value">条</text>
</view>
</view>
</view>

<view class="arrs-items index11">
<view class="left">
11
</view>
<view class="right">
<view class="r-title">
<text>设备情况：</text>
</view>
<view class="r-box">
<view class="r-box-item-lang">
<view>在线<text class="value">{{ weekObj.equipmentInfo.onlineNum || 0 }}</text></view>
<view style="margin-left: 24rpx;">
离线<text class="value">{{ weekObj.equipmentInfo.offlineNum || 0 }}</text></view>
</view>
</view>
</view>
</view>

</view>
</view>
</view>

<!-- 底部按钮 -->
<view class="nav-footer">
<view class="footer-item" @click="toHome">
回到管理端
</view>
<view class="footer-item" @click="copy" style="margin-left: 24rpx;">
复制内容
</view>
<view class="footer-item full" style="margin-left: 24rpx;">
<button open-type="share" class="fulls">
一键转发
</button>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
needList: ['XJTop', 'ZXLTop', 'avgJds'], // 需要转换数组的内容
carryOutTop: [], //
carryOutLast: [], //
consultant: [], // 置业顾问排名
recording: [], // 录音排名
lowest: [], // 执行率最低的顾问
building: uni.getStorageSync('buildingID'),
id: '', // 消息id
projectName: '', // 项目名称
weekObj: {}, // 日报详情
}
},


onLoad(option) {
if (option.id) this.id = option.id
this.getMessage()
},

onShareAppMessage() {
return {
title: `${this.projectName}数智工牌日报`,
path: `/pages/reportExcel/dayReport?id=${this.id}`
}
},

methods: {
// 跳转首页
toHome() {
uni.navigateTo({
url: '/pages/index/guide'
})
},
// 获取日报详情
getMessage() {
this.$u.get('/zkMessage/findByProjectId', {
id: this.id
}).then(res => {
console.log(res)
let data = JSON.parse(res.zkMessage.content)
this.weekObj = {
...res.zkMessage,
...data
}
this.projectName = res.projectName
this.init()
}).catch(e => {
console.log(e)
})
},

copy() {
let str = `
${this.projectName}数智工牌日报
生成时间：${this.weekObj.createTime || '--'}
1、接待量：${this.weekObj.receptionCount || 0 }
有效接待：${this.weekObj.activeCustomer || 0}
有效接待率：${this.weekObj.validReceptionRate || 0}%
对比昨天：${ this.weekObj.validReceptionRatePK > 0 ? '+' : '' }${ this.weekObj.validReceptionRatePK || 0 }%
2、平均执行率：${ this.weekObj.fraction || 0 }%
对比昨天：${ this.weekObj.fractionPK > 0 ? '+' : '' }${ this.weekObj.fractionPK || 0 }%
3、平均接待时长：${ this.weekObj.avgDuration || 0 }min
对比昨天：${this.weekObj.avgDurationPK > 0 ? '+' : '' }${ this.weekObj.avgDurationPK || 0 }min`
if (this.carryOutTop.length > 0) {
str += `
4、销讲维度执行前三：`
this.carryOutTop.map((item, index) => {
str += `
top${index+1}.${item.title || '--'}${item.value||'0'}%`
})
}
if (this.carryOutLast.length > 0) {
str += `
5、销讲维度执行弱项前三：`
this.carryOutLast.map((item, index) => {
str += `
top${index+1}.${item.title || '--'}${item.value||'0'}%`
})
}
if (this.consultant.length > 0) {
str += `
6、置业顾问平均执行率排名：`
this.consultant.map((item, index) => {
str += `
top${index+1}.${item.title || '--'}${item.value||'0'}%`
})
}
if (this.recording.length > 0) {
str += `
7、置业顾问平均接访时长排名：`
this.recording.map((item, index) => {
str += `
top${index+1}.${item.title || '--'}${item.value||'0'}min`
})
}
if (this.lowest.length > 0) {
str += `
8、平均执行率最低的顾问：`
this.lowest.map((item, index) => {
str += `
${item.title || '--'}${item.value||'0'}%`
})
}
str += `
9、客户画像触达：${this.weekObj.reachSum || 0}次
10、未标记接待数：${ this.weekObj.unlabelledReceptionNum || 0 }条
11、设备情况：
在线:${this.weekObj.equipmentInfo.onlineNum || 0}
离线:${this.weekObj.equipmentInfo.offlineNum || 0}`

uni.setClipboardData({
data: str
})
},

// 分割数组排名前三，倒三
getTopThree() {
if (this.weekObj.XJTopList && this.weekObj.XJTopList.length > 0) {
let arr = this.weekObj.XJTopList.slice(0, 3)
arr.forEach(item => {
if (item.value != 100) {
this.carryOutLast.push(item)
}
})
this.carryOutTop = this.weekObj.XJTopList.reverse().slice(0, 3)
console.log(this.weekObj.XJTopList)
}
if (this.weekObj.ZXLTopList && this.weekObj.ZXLTopList.length > 0) {
this.consultant = this.weekObj.ZXLTopList.reverse().slice(0, 3)
this.lowest.push(this.weekObj.ZXLTopList[this.weekObj.ZXLTopList.length - 1])
}
if (this.weekObj.avgJdsList && this.weekObj.avgJdsList.length > 0) {
this.recording = this.weekObj.avgJdsList.reverse().slice(0, 3)
}
},

init() {
// 把对象转成数组并在后续的步骤方便处理
this.needList.forEach(item => {
if (this.weekObj[item] && Object.keys(this.weekObj[item]).length > 0) {
this.weekObj[item + 'List'] = [] // 销讲执行
for (let i in this.weekObj[item]) {
this.weekObj[item + 'List'].push({
title: i,
value: this.weekObj[item][i]
})
}
}
})
this.sortInitArr()
},

// 排序对象转换后的数组
sortInitArr() {
this.needList.forEach(item => {
if (this.weekObj[item + 'List']) {
this.bubbleSort(this.weekObj[item + 'List'])
}
})
this.getTopThree()
},


// 冒泡排序
bubbleSort(arr) {
for (let i = 0; i < arr.length - 1; i += 1) {
//通过 arr.length 次把第一位放到最后,完成排序
//-i是因为最后的位置是会动态改变的，当完成一次后,最后一位会变成倒数第二位
for (let j = 0; j < arr.length - 1 - i; j += 1) {
if (arr[j].value > arr[j + 1].value) {
const temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
},
},
filters: {
fomatDate(date) {
if (!date) return '--'
let arr = date.split(' ')
let str = arr[0]
let result = str.split('-')
return `${result[1]}-${result[2]}`
}
}
}
</script>

<style lang="scss" scoped>
.pages {
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;

.nav-header {
flex-shrink: 0;
}

.container {
padding: 30rpx 30rpx 0;
flex-grow: 1;
display: flex;
flex-direction: column;

.c-head-card {
padding: 30rpx;
width: 100%;
min-height: 252rpx;
border: 2rpx solid #000000;
border-radius: 12rpx;
box-shadow: 10rpx 10rpx #2671E2;
display: flex;
flex-direction: column;

.c-title-text {
// position: relative;
flex-grow: 1;
font-size: 48rpx;
font-weight: bold;
color: #303030;
}


.date {
// position: absolute;
// right: 0;
// bottom: 6rpx;
font-size: 30rpx;
color: #303030;
}

.creative-time {
margin: 20rpx 0 0 0;
flex-shrink: 0;

}

}


.dateList {
width: 100%;

.arrs {
width: 100%;

.arrs-items {
margin: 40rpx 0 0 0;
display: flex;
min-height: 100rpx;

.left {
flex-shrink: 0;
margin-right: 12rpx;
width: 48rpx;
height: 44rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8rpx;
border: 1rpx solid #999999;
font-size: 32rpx;
}

.right {
flex-grow: 1;

.r-title {
font-size: 32rpx;
height: 44rpx;
display: flex;
align-items: center;

.num {
font-size: 34rpx;

}
}

.r-box {
padding: 21rpx 0 0 0;
display: flex;
flex-wrap: wrap;

.r-box-item {
margin-right: 24rpx;
}

.r-box-item-lang {
margin-top: 19rpx;
width: 100%;
display: flex;
align-items: center;

.contrast {
margin: 0 0 0 24rpx;
display: flex;
align-items: center;
}

.down {
color: #43CD80;
font-size: 34rpx;
}

.up {
font-size: 34rpx;
color: #E7483C;
}
}
}

.ranking {
padding: 21rpx 0 0 0;
display: flex;
flex-direction: column;

.ranking-item {
margin-bottom: 22rpx;
display: flex;
align-items: center;
font-size: 30rpx;

.serial {
flex-shrink: 0;
width: 42rpx;
height: 42rpx;
background: #2671E2;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}

.lside {
margin: 0 20rpx;
color: #505050;

}

.rside {
flex-shrink: 0;
font-size: 32rpx;
}
}
}

}
}
}
}
}

.nav-footer {
position: sticky;
bottom: 0;
padding: 32rpx;
width: 100%;
display: flex;
justify-content: center;
background: #fff;

.footer-item {
flex: 1;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
color: #2671E2;
border: 2rpx solid #2671E2;
border-radius: 8rpx;
overflow: hidden;
font-size: 32rpx;

&.full {
background: #2671E2;
color: #fff;

.fulls {
box-sizing: border-box;
width: 100%;
height: 100%;
background: transparent;
color: #fff;
font-size: 32rpx;
font-weight: normal;
line-height: 88rpx;
}
}
}

}


.up {
color: #43CD80 !important;
}

.down {
color: #E6273A !important;
}

.empty {
width: 100%;
line-height: 48rpx;
}
.value {
margin-left: 5rpx;
font-size: 30rpx !important;
font-weight: bold !important;
}
}
</style>

+ 1172
- 0
pages/reportExcel/weekReport.vue
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save