|
- <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">接待量(TOP10)</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newTeam1||0}}</view>
- <view class="text1-1">项目</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newAvg1||0}}</view>
- <view class="text1-1">均值</view>
- </view>
- </view>
- <view class="jindu">
- <scroll-view scroll-y="true" >
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view class="progress-cus">
- <view class="color" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
- </view>
- <!-- <view style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#FBA448" :percent="item.zxl1"></u-line-progress>
- </view> -->
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- <view class="single">
- <view class="title">
- <view class="title1">接待时长(TOP10)</view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newTeam2||0}}</view>
- <view class="text1-1">项目</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newAvg2||0}}</view>
- <view class="text1-1">均值</view>
- </view>
- </view>
- <view class="jindu">
- <scroll-view scroll-y="true" >
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo2" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view class="progress-cus">
- <view class="color" :style="'width:'+ getPercent(item.zxl,2) + '%'" ></view>
- </view>
- <!-- <view style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl1"></u-line-progress>
- </view> -->
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">销讲执行排名(TOP10)</view>
- <!-- <view class="title3" style="flex: 1;">
- <view class="title3-box">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
- </view>
- <view class="title3-box">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
- </view>
- </view> -->
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newTeam3||0}}</view>
- <view class="text1-1">项目</view>
- </view>
- <view class="sanbox1">
- <view class="text1-2">{{newAvg3||0}}%</view>
- <view class="text1-1">均值</view>
- </view>
- </view>
- <view class="jindu">
- <scroll-view scroll-y="true" >
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo3" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view class="progress-cus">
- <view class="color" :style="'width:'+ getPercent1(item.zxl)+ '%'" ></view>
- </view>
- <!-- <view style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#9B6BDF" :percent="item.zxl1"></u-line-progress>
- </view> -->
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">顾问执行排名(TOP10)</view>
- <!-- <view class="title3" style="flex: 1;">
- <view class="title3-box">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">执行率</view>
- </view>
- <view class="title3-box">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 1 }">得分</view>
- </view>
- </view> -->
- </view>
-
- <!-- <view class="hejibox">
- <view class="heji">项目:{{newTeam4||0}}</view>
- <view class="heji">均值:{{newAvg4||0}}</view>
- </view> -->
- <view class="jindu">
- <scroll-view scroll-y="true" >
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo4" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view class="progress-cus">
- <view class="color" :style="'width:'+getPercent1(item.zxl) + '%'" ></view>
- </view>
- <!-- <view style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#9B6BDF" :percent="item.zxl1"></u-line-progress>
- </view> -->
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </scroll-view>
-
- </view>
- </view>
- <view class="single">
- <view class="title" style="padding-right: 30rpx;">
- <view class="title1" style="flex: 1;">销讲能力</view>
- <!-- <view class="title2" style="flex: 1;justify-content: flex-end;" @click="Groupcontrast">
- <view class="title2-che">项目
- <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
- </view>
- </view> -->
- <view class="title2" style="flex: 1;justify-content: flex-end;" @click="staffShow=true">
- <view class="title2-che" style="width: auto;">{{staff.label}}
- <image class="righttochoose" src="../../../static/images/down.png" mode=""></image>
- </view>
- </view>
- </view>
- <!-- <view class="hejibox">
- <view class="heji">项目:50</view>
- <view class="heji">均值:25</view>
- </view> -->
- <view class="uchaserbox" v-if="emptyCharData">
- <qiun-data-charts
- type="radar"
- :chartData="chartData"
- :canvas2d="true"
- canvasId="wangxiaohuaerlingeryilingwuyib88"
- background="none"
- :loadingType="0"
- :opts="opts"
- />
- </view>
- <view class="uchaserbox" v-else>
- <u-empty mode="data"></u-empty>
- </view>
- </view>
-
-
- <!--
- <view class="single">
- <view class="title">
- <view class="title1">禁忌执行率(TOP10)</view>
- </view>
- <view class="hejibox">
- <view class="heji">合计:50</view>
- <view class="heji">均值:25</view>
- </view>
- <view class="jindu">
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#E6625B" :percent="item.zxl"></u-line-progress>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </view>
- </view> -->
-
-
- <!-- <view class="single">
- <view class="title" style="padding-right: 30rpx;">
- <view class="title1" style="flex: 1;">违禁能力(TOP10)</view>
- <view class="title2" style="flex: 1;justify-content: flex-end;">
- <view class="title2-che">项目
- <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
- </view>
- </view>
- </view>
- <view class="hejibox">
- <view class="heji">合计:50</view>
- <view class="heji">均值:25</view>
- </view>
- <view class="uchaserbox">
- <qiun-data-charts
- type="radar"
- :chartData="chartData"
- :canvas2d="true"
- canvasId="wangxiaohuaerlingeryilingwuyib89"
- background="none"
- />
- </view>
- </view> -->
-
- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
- <!-- 选择项目 -->
- <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'></u-select>
- </view>
- </template>
-
- <script>
- var app = getApp();
- var util = require("../../../utils/util.js");
- var config = require("../../../config");
- export default {
- data() {
- return {
- activeTotal: 4,
- activeTotal2: 0,
- bocindex:0,
- totalTimeShow: false,
- // 项目id
- houseId:'',
- staffShow:false,
- staffList:[],
- lastStartDate:'',
- lastEndDate :'',
- newTeam1:'',
- newAvg1:'',
- newTeam2:'',
- newAvg2:'',
- newTeam3:'',
- newAvg3:'',
- newTeam4:'',
- newAvg4:'',
- staff:{
- value:'',
- label:''
- },
- newlisttabinfo1:[
- {name:'接待量',zxl:'10'},
- {name:'平均执行率',zxl:'50'},
- {name:'接待客户',zxl:'80'},
- ],
- newlisttabinfo2:[
- {name:'接待量',zxl:'10'},
- {name:'平均执行率',zxl:'50'},
- {name:'接待客户',zxl:'80'},
- ],
- newlisttabinfo3:[
- {name:'接待量',zxl:'10'},
- {name:'平均执行率',zxl:'50'},
- {name:'接待客户',zxl:'80'},
- ],
- newlisttabinfo4:[
- {name:'接待量',zxl:'10'},
- {name:'平均执行率',zxl:'50'},
- {name:'接待客户',zxl:'80'},
- ],
- chartData:{
- "categories": [],
- "series": [
-
- ]
- },
- emptyCharData:true,
- opts: {
- fontSize: 10,
- extra: {
- radar: {
- max: 100
- }
- }
- }
-
- };
- },
- onLoad() {
- let that=this
- uni.$on('updateGroup',function(data){
- console.log(data)
- that.houseId=data.arr.join(',')
- // 获取销奖能力
- that.getPowerList()
- })
- this.getSectionList()
-
-
- },
- onPullDownRefresh(){
- this.getSectionList()
- setTimeout(function () {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods: {
- getPercent(num,type) {
- if(this.newlisttabinfo1&&this.newlisttabinfo1.length&&type==1){
- console.log(this.newlisttabinfo1)
- let index0 = this.newlisttabinfo1[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else if(this.newlisttabinfo2&&this.newlisttabinfo2.length&&type==2){
- let index0 = this.newlisttabinfo2[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else if(this.newlisttabinfo3&&this.newlisttabinfo3.length&&type==3){
- let index0 = this.newlisttabinfo3[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else{
- return 0
- }
- },
- getPercent1(num){
- console.log(num)
- return num||0
- },
- // 获取部门列表
- getSectionList(){
- this.$u.post('/user/getHouseByToken',)
- .then(res=>{
- // console.log(res)
- this.staffList=[]
- res.map((item,index)=>{
- let obj={}
- obj.value=item.id
- obj.label=item.propertyName
- this.staffList.push(obj)
- })
- this.houseId=this.staffList[0].value
- this.staff=this.staffList[0]
- this.getdata()
- // console.log(this.staffList,this.staffList,this.houseId)
- })
-
- },
- //指标执行率分析tab
- tapspagek2(index) {
- this.bocindex = index;
- },
- staffSelectCallback(e){
- this.staff=e[0]
- this.houseId=e[0].value
- this.getPowerList()
- },
- getdata(){
- // 请求接口获取接待量
- this.receptionCountList('1','/cusLvStatistics/groupComparisonReception')
- // 接待时长
- this.receptionCountList('2','/cusLvStatistics/groupComparisonReceptionTime')
- // 小将排名
- this.receptionCountList('3','/cusLvStatistics/groupComparisonTalkRank')
- // 顾问牌名
- this.receptionCountList('4','/cusLvStatistics/groupComparisonTalkRankByConsultant')
- // 销奖能力
- this.getPowerList()
- },
- //时间切换
- tabtimetap(index) {
- this.activeTotal = index;
- if (index == 3) {
- this.totalTimeShow = true;
- } else {
- this.lastEndDate=''
- this.lastStartDate=''
- this.getdata()
- // // 获取数据
- // // 团队对比接待量
- // this.receptionCountList(0,1,'/cusLvStatistics/teamAnalysisReception')
- // // 团队对比接待时长
- // this.receptionCountList(0,2,'/cusLvStatistics/teamAnalysisReceptionTime')
- // /* 销奖执行率 */
- // this.receptionCountList(0,3,'/cusLvStatistics/teamAnalysisExecutionRate')
- // // 获取销奖能力
- // this.getPowerList()
- }
- },
- // 接待时长
- receptionCountList(index,url){
- this.$u.post(url,{
- timeType:this.lastEndDate?null:this.activeTotal+'',
- lastEndDate:this.lastEndDate,
- lastStartDate:this.lastStartDate
- })
- .then(res=>{
- // console.log(res)
- let result=res.result
- this['newTeam'+index]=res.avg[0]
- this['newAvg'+index]=res.avg[1]
- // return
- // 处理数据
- // 先处理牌名数据,需要进行判断全部还是单个
- // 当为全部时
- this['newlisttabinfo'+index]=[]
- // 当选择全部时
- let arr=[]
- // 当两个都选择的时候
- result.map(item=>{
- let obj={}
- obj.name=item.houseName
- obj.zxl=item.data
- arr.push(obj)
-
- })
- arr=this.dealData(arr)
- this['newlisttabinfo'+index]=arr
- })
- },
- // 获取销奖能力
- getPowerList(){
- this.chartData={
- categories:[],
- series:[]
- }
- this.$u.post('/cusLvStatistics/groupComparisonMarketingAbility',{
- houseIds:this.houseId,
- timeType:this.lastEndDate?null:this.activeTotal+'',
- lastEndDate:this.lastEndDate,
- lastStartDate:this.lastStartDate
- })
- .then(res=>{
- let allobj={
- categories:[],
- series:[]
- }
- if(res.result.length!=0){
- res.result.map((item,index)=>{
- let obj={
- name:item.length>0?item[0].houseName:'',
- data:[]
- }
- item.map(item1=>{
- if(index==0){
- allobj.categories.push(item1.name)
- }
- obj.data.push(item1.avgExecutionRate)
- })
- allobj.series.push(obj)
- })
- this.chartData=allobj
- this.$forceUpdate()
- this.emptyCharData = true;
- }else{
- this.emptyCharData = false;
- }
- })
- },
- //自定义时间
- totalTimeChange(e) {
- console.log(e.startDate, e.endDate)
- this.activeTotal=3;
- this.lastEndDate=e.endDate
- this.lastStartDate=e.startDate
- this.getdata()
- },
- //集团对比
- Groupcontrast(){
- uni.navigateTo({
- url: `/pages/center/Piabodata/selectGroup?ids=${this.houseId}`
- });
- },
- // 定义一个公共方法对数据进行处理
- 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
- }
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- .box {
- width: 100%;
- height: 100%;
- background: #FAFAFA;
- }
- .single {
- margin-top: 20rpx;
- padding-bottom: 20rpx;
- }
-
- .boxtittab {
- position: sticky;
- top: var(--window-top);
- z-index: 999;
- }
- .hejisan{
- width: 92%;
- margin: 0 auto;
- display: flex;
- padding:0 0 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;
- }
- }
- </style>
|