|
- <template>
- <view class="box">
- <view class="boxtittab">
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
- </view>
- </view>
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">接待量排名(TOP10)</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newlisttabinfo1.total}}</view>
- <view class="text1-1">合计接待次数</view>
- </view>
- <view class="sanbox1" >
- <view class="text1-2">{{newlisttabinfo1.count}}</view>
- <view class="text1-1">顾问人数</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo1.avg}}</view>
- <view class="text1-1">人均接待次数</view>
- </view>
- </view>
-
- <view class="jindu" style="margin-top: 20rpx;">
- <view v-if="newlisttabinfo1.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo1.result" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
- <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
- <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
- <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
- <view class="sort-number" v-if="index>2">{{index+1}}</view>
- {{item.name.substring(0,4)}}</view>
- <view class="progress-cus">
- <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
- <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
- <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
- <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
- </view>
- <view class="jindu-zxl" >{{item.zxl==null?0:item.zxl}}次</view>
- </view>
- </view>
- <view v-if="newlisttabinfo1.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
- 暂无数据
- </view>
- </view>
- </view>
-
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">平均执行率排行(TOP10)</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" style="width: 40%;">
- <view class="text1-2">{{newlisttabinfo3.count}}</view>
- <view class="text1-1">顾问人数</view>
- </view>
- <view class="sanbox1" style="width: 25%;">
- <view class="text1-2">{{newlisttabinfo3.avg}}%</view>
- <view class="text1-1">人均执行率</view>
- </view>
- </view>
- <view class="jindu" style="margin-top: 20rpx;">
- <view v-if="newlisttabinfo3.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo3.result" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
- <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
- <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
- <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
- <view class="sort-number" v-if="index>2">{{index+1}}</view>
- {{item.name.substring(0,4)}}</view>
- <!-- <view class="jindu-name" v-if="item.name">{{item.name.substring(0,4)}}</view> -->
- <!-- <view class="progress-cus">
- <view class="color" :style="'width:'+ item.zxl||0 + '%'" ></view>
- </view> -->
- <view class="progress-cus">
- <view class="color1" v-if="index==0" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
- <view class="color2" v-if="index==1" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
- <view class="color3" v-if="index==2" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
- <view class="color4" v-if="index>2" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- <view v-if="newlisttabinfo3.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
- 暂无数据
- </view>
- </view>
- </view>
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">录音时长(TOP10)</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newlisttabinfo2.total}}</view>
- <view class="text1-1">合计时长/分钟</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo2.count}}</view>
- <view class="text1-1">顾问人数</view>
- </view>
- <view class="sanbox1" >
- <view class="text1-2">{{newlisttabinfo2.avg}}</view>
- <view class="text1-1">人均录音时长/分钟</view>
- </view>
- </view>
- <view class="jindu" style="margin-top: 20rpx;">
- <view v-if="newlisttabinfo2.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo2.result" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
- <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
- <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
- <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
- <view class="sort-number" v-if="index>2">{{index+1}}</view>
- {{item.name.substring(0,4)}}</view>
- <view class="progress-cus">
- <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
- <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,2)+ '%'" ></view>
- <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,2)+ '%'" ></view>
- <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,2)+ '%'" ></view>
- </view>
- <view class="jindu-zxl u-line-1">{{item.zxl==null?0:item.zxl}}分钟</view>
- </view>
- </view>
- <view v-if="newlisttabinfo2.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
- 暂无数据
- </view>
- </view>
- </view>
-
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">违禁次数排名(TOP10)</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo4.total}}</view>
- <view class="text1-1">合计次数</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo4.count}}人</view>
- <view class="text1-1">顾问人数</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo4.avg}}</view>
- <view class="text1-1">人均违禁次数</view>
- </view>
- </view>
- <view class="jindu" style="margin-top: 20rpx;min-height: 300rpx">
- <view v-if="newlisttabinfo4.result.length" class="jindu-box" v-for="(item,index) in newlisttabinfo4.result" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
- <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
- <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
- <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
- <view class="sort-number" v-if="index>2">{{index+1}}</view>
- {{item.name.substring(0,4)}}</view>
- <view class="progress-cus">
- <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
- <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,4)+ '%'" ></view>
- <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,4) + '%'" ></view>
- <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,4)+ '%'" ></view>
- </view>
- <view class="jindu-zxl" >{{item.zxl==null?0:item.zxl}}次</view>
- </view>
- </view>
- <view v-if="newlisttabinfo4.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
- 暂无数据
- </view>
- </view>
- </view>
-
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">接待未标顾问排名(TOP10)</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo5.total||0}}</view>
- <view class="text1-1">合计</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo5.count||0}}人</view>
- <view class="text1-1">顾问</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newlisttabinfo5.avg||0}}</view>
- <view class="text1-1">均值</view>
- </view>
- </view>
- <view class="jindu" style="margin-top: 20rpx;min-height: 300rpx">
- <view v-if="newlisttabinfo5.result.length!=0" class="jindu-box"
- v-for="(item,index) in newlisttabinfo5.result" :key="index">
- <view class="jindu-boxche" >
- <view class="jindu-name u-flex" style='width: 170rpx' v-if="item.name">
- <image v-if="index==0" class="sort-img" src="/static/images/top1.png" mode="" />
- <image v-if="index==1" class="sort-img" src="/static/images/top2.png" mode="" />
- <image v-if="index==2" class="sort-img" src="/static/images/top3.png" mode="" />
- <view class="sort-number" v-if="index>2">{{index+1}}</view>
- {{item.name.substring(0,4)}}</view>
- <view class="progress-cus">
- <view class="color1" v-if="index==0" :style="'width:'+ item.zxl||0 + '%'" ></view>
- <view class="color2" v-if="index==1" :style="'width:'+ getPercent(item.zxl,5)+ '%'" ></view>
- <view class="color3" v-if="index==2" :style="'width:'+ getPercent(item.zxl,5) + '%'" ></view>
- <view class="color4" v-if="index>2" :style="'width:'+ getPercent(item.zxl,5)+ '%'" ></view>
- </view>
- <view class="jindu-zxl" >{{item.zxl==null?0:item.zxl}}次</view>
- </view>
- </view>
- <view v-if="newlisttabinfo5.result.length==0" style="width: 100%;text-align: center;margin-top: 60rpx;">
- 暂无数据
- </view>
- </view>
- </view>
- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
-
- <!-- 加载组件 -->
- <u-loadings v-model="LOADING"></u-loadings>
-
- </view>
- </template>
-
- <script>
- var app = getApp();
- var util = require("../../../utils/util.js");
- var config = require("../../../config");
- export default {
- data() {
- return {
- activeTotal: 4,
- totalTimeShow: false,
- // 项目id
- houseId: '',
- lastEndDate: '',
- lastStartDate: '',
- newlisttabinfo1: {
- avg: '',
- count: '',
- total: '',
- result: [],
- },
- newlisttabinfo2: {
- avg: '',
- count: '',
- total: '',
- result: [],
- },
- newlisttabinfo3: {
- avg: '',
- count: '',
- total: '',
- result: [],
- },
- newlisttabinfo4: {
- avg: '',
- count: '',
- total: '',
- result: [],
- },
- newlisttabinfo5: {
- avg: '',
- count: '',
- total: '',
- result: [],
- },
- };
- },
- onLoad() {
- this.LOADING = true
- // 获取项目id
- this.houseId = uni.getStorageSync('buildingID').id;
- this.init()
- },
- computed: {
-
- },
- onPullDownRefresh(){
- this.init()
- setTimeout(function() {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods: {
- getPercent(num,type) {
- if(this.newlisttabinfo1.result&&this.newlisttabinfo1.result.length&&type==1){
- console.log(this.newlisttabinfo1.result)
- let index0 = this.newlisttabinfo1.result[0]
- let percent = num/(index0.zxl) * 100
- // console.log(index0.zxl)
- // console.log(index0)
- // console.log('num',num)
- // console.log(percent)
- // console.log(percent.toFixed(2))
- return percent.toFixed(2)
-
- }else if(this.newlisttabinfo2.result&&this.newlisttabinfo2.result.length&&type==2){
- let index0 = this.newlisttabinfo2.result[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
-
- }else if(this.newlisttabinfo4.result&&this.newlisttabinfo4.result.length&&type==4){
- let index0 = this.newlisttabinfo4.result[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else if(this.newlisttabinfo5.result&&this.newlisttabinfo5.result.length&&type==5){
- let index0 = this.newlisttabinfo5.result[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else{
- return 0
- }
- },
- getPercent1(num){
- console.log(num)
- return num||0
- },
- init(){
- this.newlisttabinfo1={
- avg:'',
- count:'',
- total:'',
- result:[],
- },
- this.newlisttabinfo2={
- avg:'',
- count:'',
- total:'',
- result:[],
- },
- this.newlisttabinfo3={
- avg:'',
- count:'',
- total:'',
- result:[],
- },
- this.newlisttabinfo4={
- avg:'',
- count:'',
- total:'',
- result:[],
- }
- this.newlisttabinfo2 = {
- avg: '',
- count: '',
- total: '',
- result: [],
- }
- this.newlisttabinfo3 = {
- avg: '',
- count: '',
- total: '',
- result: [],
- }
- this.newlisttabinfo4 = {
- avg: '',
- count: '',
- total: '',
- result: [],
- }
- this.newlisttabinfo5 = {
- avg: '',
- count: '',
- total: '',
- result: [],
- }
-
- var activeTotal = 0;
- if (this.activeTotal == 3) {
- activeTotal = null;
- } else {
- activeTotal = this.activeTotal;
- this.lastEndDate = '';
- this.lastStartDate = '';
- }
- var promse = {
- timeType: activeTotal,
- lastStartDate: this.lastStartDate,
- lastEndDate: this.lastEndDate,
- houseId: this.houseId
- }
- this.staffStatisticsReceptionTop10(promse)
- this.staffStatisticsRecordingTimTop10(promse)
- this.staffStatisticsExecutionRateTop10(promse)
- this.staffStatisticsProhibitedTop10(promse)
- this.staffStatisticsUnlabeledTop10(promse)
- },
- //接待量排名
- staffStatisticsReceptionTop10(promse) {
-
- this.$u.post('/cusLvStatistics/staffStatisticsReceptionTop10', promse).then(res => {
- res.result.forEach(item => {
- item.zxl = item.data
- item.name = item.accountName
- })
- res.result = this.dealData(res.result)
- this.newlisttabinfo1 = res;
- })
- },
- //录音时长
- staffStatisticsRecordingTimTop10(promse) {
- this.$u.post('/cusLvStatistics/staffStatisticsRecordingTimTop10', promse).then(res => {
- res.result.forEach(item => {
- item.zxl = item.data
- item.name = item.accountName
- })
- res.result = this.dealData(res.result)
- this.newlisttabinfo2 = res;
- })
- },
- //销讲
- staffStatisticsExecutionRateTop10(promse) {
- this.$u.post('/cusLvStatistics/staffStatisticsExecutionRateTop10', promse).then(res => {
- res.result.forEach(item => {
- item.zxl = item.data;
- item.zxl1 = item.data;
- item.name = item.accountName
- })
- this.newlisttabinfo3 = res;
- })
- },
- //j禁忌
- staffStatisticsProhibitedTop10(promse) {
- this.$u.post('/cusLvStatistics/staffStatisticsProhibitedTop10', promse).then(res => {
- res.result.forEach(item => {
- item.zxl = item.data
- item.name = item.accountName
- })
- res.result = this.dealData(res.result)
- this.newlisttabinfo4 = res;
- })
- },
- //未标记客户数量排名,
- staffStatisticsUnlabeledTop10(promse) {
- this.$u.post('/cusLvStatistics/staffStatisticsUnlabeledTop', promse).then(res => {
- this.LOADING = false
- res.result.forEach(item => {
- item.zxl = item.tagCustomer
- item.name = item.accountName
- })
- res.result = this.dealData(res.result)
- this.newlisttabinfo5 = res;
- }).catch(e => {
- this.LOADING = false
- })
- },
-
- //自定义时间
- totalTimeChange(e) {
- console.log(e.startDate, e.endDate)
- this.activeTotal = 3;
- this.lastEndDate = e.endDate
- this.lastStartDate = e.startDate
- this.init()
- },
- //时间切换
- tabtimetap(index) {
- this.activeTotal = index;
- if (index == 3) {
- this.totalTimeShow = true;
- } else {
- this.lastEndDate='';
- this.lastStartDate='';
- this.init()
- }
- },
- // 定义一个公共方法对数据进行处理
- dealData(arr) {
- // 获取最大值
- let num = Math.max.apply(Math, arr.map(function(o) {
- return o.zxl
- })) //结果:3
- // console.log(num)
- // if(num>100){
- // // 获取最大值的下标
- // // let idx=arr.findIndex(item=>item.zxl==num)
- // // console.log(idx,123)
- // arr.map(item=>{
- // item.zxl1=Math.floor(item.zxl/num*100)
- // })
- // // console.log(arr)
- // return arr
- // }else{
- // arr.map(item=>{
- // item.zxl1=item.zxl
- // })
- // return arr
- // }
- arr.map(item => {
- item.zxl1 = Math.floor(item.zxl / num * 100)
- })
- return arr
-
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- .box {
- width: 100%;
- height: 100%;
- background: #FAFAFA;
- }
-
- .single{
- padding-bottom: 20rpx;
- margin-top: 20rpx;
- }
- .boxtittab {
- position: sticky;
- top: var(--window-top);
- z-index: 999;
- }
-
- .hejisan {
- width: 92%;
- margin: 0 auto;
- display: flex;
- padding-top: 20rpx;
-
- padding-bottom:20rpx;
- .sanbox1{
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: relative;
- &::after{
- position: absolute;
- content: '';
- width: 1rpx;
- height: 86rpx;
- background: #E0E0E0;
- right: 0;
- top: 0;
- }
- &:last-child::after {
- position: absolute;
- content: '';
- width: 1rpx;
- height: 86rpx;
- right: 0;
- top: 0;
- background: #fff;
- }
- }
- .text1-1{
- font-size: 24rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 32rpx;
- }
-
- .text1-2 {
- color: #333333;
- font-size: 40rpx;
- line-height: 46rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- margin-bottom: 10rpx;
- }
- }
- .jindu-name{
- width: 180rpx;
- margin-left: 15rpx;
- }
- .sort-img{
- width: 44rpx;
- height: 44rpx;
- margin-right: 15rpx;
- }
- .sort-number{
- width: 40rpx;
- height: 40rpx;
- background: #E5F0FF;
- border-radius: 50%;
- font-size: 24rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- text-align: center;
- line-height: 40rpx;
- margin-right: 15rpx;
- }
- </style>
|