|
|
|
@@ -0,0 +1,467 @@ |
|
|
|
<template> |
|
|
|
<view class="box"> |
|
|
|
<view class="boxtittab"> |
|
|
|
<view class="tabbox"> |
|
|
|
<view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">今日</view> |
|
|
|
</view> |
|
|
|
<view class="tabbox"> |
|
|
|
<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">昨日</view> |
|
|
|
</view> |
|
|
|
<view class="tabbox"> |
|
|
|
<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">近一周</view> |
|
|
|
</view> |
|
|
|
<view class="tabbox"> |
|
|
|
<view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="boxzonglan"> |
|
|
|
<view class="zonglantit">客群特征总览</view> |
|
|
|
<view class="zonglanbox"> |
|
|
|
<view class="grid" v-for="(item,index) in numlist" :key="index" v-if="item.isshow"> |
|
|
|
<view class="audonum">{{item.name}}<text v-if="index!=0">触达次数</text></view> |
|
|
|
<view class="num">{{item.num}}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="Afolding==true" class="anclack" @click="anclick(1)">展开 <u-icon style="margin-left: 8rpx;" label-color='#666666' name="arrow-down"></u-icon></view> |
|
|
|
<view v-if="Afolding==false" class="anclack" @click="anclick(2)">收起 <u-icon style="margin-left: 8rpx;" label-color='#666666' name="arrow-up"></u-icon></view> |
|
|
|
</view> |
|
|
|
<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<view class="centerfor" v-for="(item,index) in objlist" :key="index"> |
|
|
|
<view class="fortit"> |
|
|
|
<view class="left"> |
|
|
|
<view class="lefti"></view> |
|
|
|
<view class="lefttext">{{item.name}}触达排名</view> |
|
|
|
</view> |
|
|
|
<view class="right"> |
|
|
|
<view :class="{ activeclass: item.activeTab == 0 }" @click="charttoswitch(index,0)">表格</view> |
|
|
|
<view style="margin-left: 16rpx;" :class="{ activeclass: item.activeTab == 1 }" |
|
|
|
@click="charttoswitch(index,1)">饼状图</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="item.activeTab==0" class="tabdada"> |
|
|
|
<view class="tabth"> |
|
|
|
<view>排名</view> |
|
|
|
<view>画像语意词/触达客户</view> |
|
|
|
<view>触达占比</view> |
|
|
|
<view>沟通记录</view> |
|
|
|
</view> |
|
|
|
<view v-if="item.total==0" style="color: #999999;width: 100%;height: 500rpx;line-height: 500rpx;text-align: center;" >暂无数据</view> |
|
|
|
<view class="tabtd" v-if="item.total!=0" v-for="(chend,i) in item.matchKeywords" :key="i"> |
|
|
|
<view> |
|
|
|
<image v-if="i==0" class="ranking" src="../../../static/images/ranking1.png" mode=""></image> |
|
|
|
<image v-else-if="i==1" class="ranking" src="../../../static/images/ranking2.png" mode=""></image> |
|
|
|
<image v-else-if="i==2" class="ranking" src="../../../static/images/ranking3.png" mode=""></image> |
|
|
|
<view class="ranking1" v-else>{{i+1}}</view> |
|
|
|
</view> |
|
|
|
<view>{{chend.name}}({{chend.total}})</view> |
|
|
|
<view>{{chend.proportion}}%</view> |
|
|
|
<view @click="Toview(item,i)">查看</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view v-if="item.activeTab==1" class="tabech"> |
|
|
|
<qiun-data-charts |
|
|
|
:key="item.id" |
|
|
|
type="ring" |
|
|
|
:chartData="item.chartData" |
|
|
|
:canvas2d="true" |
|
|
|
:canvasId="'wangxiaohuahahahahaha'+item.id" |
|
|
|
:opts='item.opts' |
|
|
|
background="none" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar> |
|
|
|
<u-back-top :scroll-top="scrollTop"></u-back-top> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
var app = getApp(); |
|
|
|
var util = require("../../../utils/util.js"); |
|
|
|
var config = require("../../../config"); |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
scrollTop: 0, |
|
|
|
activeTotal: 2, |
|
|
|
timeobj:{ |
|
|
|
statDateStart:'', |
|
|
|
statDateEnd:'' |
|
|
|
}, |
|
|
|
buildingID:'', |
|
|
|
totalTimeShow: false, |
|
|
|
activeTab: 0, |
|
|
|
numlist:[], |
|
|
|
objlist:[], |
|
|
|
Afolding:true |
|
|
|
}; |
|
|
|
}, |
|
|
|
onPageScroll(e) { |
|
|
|
this.scrollTop = e.scrollTop; |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
this.buildingID=uni.getStorageSync('buildingID').id; |
|
|
|
this.gitinit() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
anclick(i){ |
|
|
|
console.log(i) |
|
|
|
this.Afolding=!this.Afolding; |
|
|
|
this.numlist.forEach((citem,index)=>{ |
|
|
|
if(index<6){ |
|
|
|
citem.isshow=true; |
|
|
|
}else{ |
|
|
|
citem.isshow=!citem.isshow; |
|
|
|
} |
|
|
|
}) |
|
|
|
this.$forceUpdate() |
|
|
|
|
|
|
|
}, |
|
|
|
//获取数据 |
|
|
|
gitinit(){ |
|
|
|
this.objlist=[]; |
|
|
|
this.numlist=[]; |
|
|
|
var dateType=''; |
|
|
|
if(this.activeTotal==3){ |
|
|
|
dateType=null; |
|
|
|
}else{ |
|
|
|
dateType=this.activeTotal; |
|
|
|
} |
|
|
|
let parames={ |
|
|
|
dateType:dateType, |
|
|
|
statDateStart:this.timeobj.statDateStart, |
|
|
|
statDateEnd:this.timeobj.statDateEnd, |
|
|
|
houseId:this.buildingID |
|
|
|
} |
|
|
|
this.$u.post("/matchKeywords/findmatchdata", parames).then(data => { |
|
|
|
this.numlist.push({ |
|
|
|
name:"客户数量", |
|
|
|
num:data.total |
|
|
|
}) |
|
|
|
data.list.forEach((item,index)=>{ |
|
|
|
this.numlist.push({ |
|
|
|
name:item.name, |
|
|
|
num:item.total |
|
|
|
}) |
|
|
|
item.activeTab=0; |
|
|
|
item.opts={ |
|
|
|
"title": { |
|
|
|
"name": item.total, |
|
|
|
"color": '#666666', |
|
|
|
"fontSize": 20 |
|
|
|
}, |
|
|
|
"subtitle": { |
|
|
|
"name": '总触达次数', |
|
|
|
"color": '#32363D', |
|
|
|
"fontSize": 12, |
|
|
|
"offsetY": 4 |
|
|
|
} |
|
|
|
} |
|
|
|
item.chartData={ |
|
|
|
"categories": [], |
|
|
|
"series": [{ |
|
|
|
"data": [] |
|
|
|
}], |
|
|
|
}; |
|
|
|
item.matchKeywords.forEach(chend=>{ |
|
|
|
item.chartData.series[0].data.push({ |
|
|
|
"name":chend.name, |
|
|
|
"value": chend.proportion |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
data.list.forEach(item=>{ |
|
|
|
item.matchKeywords.forEach(chend=>{ |
|
|
|
if(item.name=="意向面积"){ |
|
|
|
chend.name=chend.name+'m²-'+chend.endName+'m²' |
|
|
|
} |
|
|
|
if(item.name=="购房预算"){ |
|
|
|
chend.name=chend.name+'万-'+chend.endName+'万' |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.objlist=data.list; |
|
|
|
this.Afolding=true; |
|
|
|
this.numlist.forEach((citem,index)=>{ |
|
|
|
if(index<6){ |
|
|
|
citem.isshow=true |
|
|
|
}else{ |
|
|
|
citem.isshow=false |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
//查看 |
|
|
|
Toview(item,i){ |
|
|
|
// uni.navigateTo({ |
|
|
|
// url: '/pages/main/Customerportrait/Receivingrecords?datatype='+this.activeTotal+"&keywordsId="+item.matchKeywords[i].keywordsId+"&starttime="+this.timeobj.statDateStart+"&endoftime="+this.timeobj.statDateEnd |
|
|
|
// }) |
|
|
|
}, |
|
|
|
//时间切换 |
|
|
|
tabtimetap(index) { |
|
|
|
if (index == 3) { |
|
|
|
this.totalTimeShow = true; |
|
|
|
} else { |
|
|
|
this.activeTotal = index; |
|
|
|
this.gitinit() |
|
|
|
} |
|
|
|
}, |
|
|
|
//自定义时间 |
|
|
|
totalTimeChange(e) { |
|
|
|
this.timeobj.statDateStart = e.startDate; |
|
|
|
this.timeobj.statDateEnd = e.endDate; |
|
|
|
this.activeTotal=3; |
|
|
|
this.gitinit() |
|
|
|
}, |
|
|
|
charttoswitch(index,num) { |
|
|
|
this.objlist[index].activeTab=num |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.anclack{ |
|
|
|
width: 100%; |
|
|
|
height: 78rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 78rpx; |
|
|
|
font-size: 30rpx; |
|
|
|
border: 1rpx solid #E0E0E0; |
|
|
|
font-weight: 400; |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
.box { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: #FAFAFA; |
|
|
|
padding-bottom: 60rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.boxtittab { |
|
|
|
width: 100; |
|
|
|
height: 92rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
border: 1px solid #E0E0E0; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.tabbox { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
text-align: center; |
|
|
|
line-height: 92rpx; |
|
|
|
color: #666666; |
|
|
|
font-size: 28rpx; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
.activecllasscet { |
|
|
|
width: 96rpx; |
|
|
|
border-bottom: 2px solid #2671E2; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tabtime { |
|
|
|
width: 100%; |
|
|
|
height: 50rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 50rpx; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #666666; |
|
|
|
} |
|
|
|
|
|
|
|
.boxzonglan { |
|
|
|
width: 100%; |
|
|
|
min-height: 496rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
padding: 30rpx 30rpx 30rpx 30rpx; |
|
|
|
|
|
|
|
.zonglantit { |
|
|
|
font-size: 30rpx; |
|
|
|
color: #333333; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.zonglanbox { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
margin-top: 24rpx; |
|
|
|
|
|
|
|
.grid { |
|
|
|
width: 50%; |
|
|
|
height: 128rpx; |
|
|
|
border: 1px solid #E0E0E0; |
|
|
|
|
|
|
|
.audonum { |
|
|
|
color: #666666; |
|
|
|
text-indent: 40rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.num { |
|
|
|
color: #333333; |
|
|
|
text-indent: 40rpx; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 600; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.centerfor { |
|
|
|
width: 100%; |
|
|
|
height: 686rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
padding-left: 30rpx; |
|
|
|
padding-right: 30rpx; |
|
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
.fortit { |
|
|
|
width: 100%; |
|
|
|
height: 86rpx; |
|
|
|
display: flex; |
|
|
|
border-bottom: 1px solid #E0E0E0; |
|
|
|
|
|
|
|
.left { |
|
|
|
width: 70%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.lefti { |
|
|
|
width: 6rpx; |
|
|
|
height: 30rpx; |
|
|
|
background: #2671E2; |
|
|
|
} |
|
|
|
|
|
|
|
.lefttext { |
|
|
|
font-size: 30rpx; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-weight: 600; |
|
|
|
color: #333333; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right { |
|
|
|
width: 30%; |
|
|
|
height: 70rpx; |
|
|
|
display: flex; |
|
|
|
font-size: 28rpx; |
|
|
|
align-items: center; |
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.right view { |
|
|
|
width: 92rpx; |
|
|
|
height: 50rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.activeclass { |
|
|
|
color: #2671E2; |
|
|
|
border-bottom: 2px solid #2671E2; |
|
|
|
} |
|
|
|
|
|
|
|
.tabdada { |
|
|
|
width: 100%; |
|
|
|
height: 580rpx; |
|
|
|
overflow-y: auto; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth { |
|
|
|
width: 100%; |
|
|
|
height: 28rpx; |
|
|
|
display: flex; |
|
|
|
font-size: 28rpx; |
|
|
|
line-height: 28rpx; |
|
|
|
color: #666666; |
|
|
|
margin-top: 28rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(1) { |
|
|
|
width: 10%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(2) { |
|
|
|
width: 46%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(3) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabth>view:nth-of-type(4) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd { |
|
|
|
width: 100%; |
|
|
|
height: 30rpx; |
|
|
|
display: flex; |
|
|
|
font-size: 26rpx; |
|
|
|
line-height: 30rpx; |
|
|
|
margin-top: 32rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(1) { |
|
|
|
width: 10%; |
|
|
|
text-align: center; |
|
|
|
line-height: 30rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(2) { |
|
|
|
width: 46%; |
|
|
|
text-align: center; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(3) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
|
|
|
|
.tabtd>view:nth-of-type(4) { |
|
|
|
width: 22%; |
|
|
|
text-align: center; |
|
|
|
color: #2671E2; |
|
|
|
} |
|
|
|
|
|
|
|
.ranking { |
|
|
|
width: 34rpx; |
|
|
|
height: 34rpx; |
|
|
|
} |
|
|
|
.ranking1 { |
|
|
|
width: 30rpx; |
|
|
|
height: 30rpx; |
|
|
|
background: #ECF1FF; |
|
|
|
color: #424D64; |
|
|
|
font-size: 18rpx; |
|
|
|
text-align: center; |
|
|
|
line-height: 30rpx; |
|
|
|
border-radius: 50%; |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.tabech { |
|
|
|
width: 100%; |
|
|
|
height: 600rpx; |
|
|
|
} |
|
|
|
</style> |
