|
- <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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="Piabodata-box">
- <view class="Piabodata" @click="toTrendAnalysis()">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/qushi.png" mode=""></image>
- </view>
- <view class="Piabodata-text">趋势分析</view>
- </view>
- <view class="Piabodata" @click="toStaffAnalysis()">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/yuangong.png" mode=""></image>
- </view>
- <view class="Piabodata-text">员工分析</view>
- </view>
- <view class="Piabodata" @click="toUserinsightinto()">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/yinghu.png" mode=""></image>
- </view>
- <view class="Piabodata-text">用户洞察</view>
- </view>
- <view class="Piabodata" @click="Theteamcompared()" v-if="Theteamcomparedisshow">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/tuandui.png" mode=""></image>
- </view>
- <view class="Piabodata-text">团队对比</view>
- </view>
- <view class="Piabodata" @click="Groupcontrast()" v-if="Groupcontrastisshow">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/jituan.png" mode=""></image>
- </view>
- <view class="Piabodata-text">集团对比</view>
- </view>
-
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="boxzonglan">
- <view class="zonglantit">简报</view>
- <view class="zonglanbox">
- <view class="grid" v-for="(item,index) in numlist" :key="index">
- <view class="audonum">{{item.name}}</text></view>
- <view class="num">{{item.num}}</view>
- </view>
- </view>
- </view>
-
-
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">接待趋势</view>
- </view>
- <view class="swiper-box">
- <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex" @change="tapspagek2()"
- inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj1" :is-scroll="true">
- </u-tabs-swiper>
- </view>
- <!-- <view class="hejibox">
- <view class="heji">合计:50</view>
- <view class="heji">均值:25</view>
- </view> -->
- <view class="danwei">来访(人)</view>
- <view class="uchaserbox">
- <qiun-data-charts
- type="line"
- :chartData="lineOptsect"
- background="none"
- :ontouch="true"
- canvasId="wangxiaohuaerlingilingwuyiba1"
- :canvas2d="true"
- />
- </view>
- </view>
-
-
- <view class="" v-if="teamFlag">
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title" @click="staffShow1=true">
- <view class="title1">团队接待趋势</view>
- <view class="title2">
- <view class="title2-che" style="width: 220rpx;">{{team.label}}
- <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
- </view>
- <!-- <view class="title2-che">执行率
- <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
- </view> -->
- </view>
- </view>
- <view class="hejibox">
- <view class="heji">合计:{{allnum||0}}</view>
- <view class="heji">均值:{{allavg||0}}</view>
- </view>
- <view class="danwei">来访(人)</view>
- <view class="uchaserbox">
- <qiun-data-charts
- type="line"
- :chartData="lineOptsect1"
- background="none"
- :ontouch="true"
- canvasId="wangxiaohuaerlineryiliwuyibao"
- :canvas2d="true"
- />
- </view>
- </view>
- </view>
-
- <view class="" v-if="staffFlag">
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">员工接待趋势</view>
- <view class="title2" @click="staffShow=true">
- <view class="title2-che" style="width: 220rpx;">{{staff.label}}
- <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
- </view>
- <!-- <view class="title2-che">执行率
- <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
- </view> -->
- </view>
- </view>
- <view class="hejibox">
- <view class="heji">合计:{{allnum1||0}}</view>
- <view class="heji">均值:{{allavg1||0}}</view>
- </view>
- <view class="danwei">来访(人)</view>
- <view class="uchaserbox">
- <qiun-data-charts
- type="line"
- :chartData="lineOptsect2"
- background="none"
- :ontouch="true"
- canvasId="wangxiaohuaerlingeryilingwuyibao"
- :canvas2d="true"
- />
- </view>
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">销讲维度执行率</view>
- <!-- <view class="title3">
- <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">合计: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="#4FC78F" :percent="item.zxl"></u-line-progress>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">销讲指标执行率</view>
- </view>
- <view class="swiper-box">
- <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex1" @change="tapspagek3"
- inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
- </u-tabs-swiper>
- </view>
- <view class="jindu">
- <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 style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#4FC78F" :percent="item.zxl"></u-line-progress>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </view>
-
- </view>
-
- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
- <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback($event,0)" :default-value='selindex'></u-select>
- <u-select v-model="staffShow1" :list="teamList" @confirm="staffSelectCallback($event,1)" :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,
- houseId:'',
- timeobj:{
- statDateStart:'',
- statDateEnd:''
- },
- // 员工列表
- staffList:[],
- // 团队列表
- teamList:[],
- staffShow:false,
- staff:{
- value:'',
- label:''
- },
- team:{
- value:'',
- label:''
- },
- teamFlag:true,
- bocindex1:0,
- staffFlag:true,
- staffShow1:false,
- lastStartDate:'',
- lastEndDate :'',
- allnum:'',
- allavg:'',
- allnum1:'',
- allavg1:'',
- totalTimeShow: false,
- activeTab: 0,
- numlist:[
- {name:'接待量',num:'10'},
- {name:'接待客户',num:'10'},
- {name:'平均执行率',num:'10'},
- {name:'录音时长',num:'10'},
- ],
- lineOptsect:{
- "categories": ["2016","2017","2018","2019","2020","2021"],
- "series": [
- {
- "name": "成交量",
- "data": [35,8,25,37,4,20]
- }
- ]
- },
- lineOptsect1:{
- "categories": ["2016","2017","2018","2019","2020","2021"],
- "series": [
- {
- "name": "成交量",
- "data": [35,8,25,37,4,20]
- }
- ]
- },
- lineOptsect2:{
- "categories": ["2016","2017","2018","2019","2020","2021"],
- "series": [
- {
- "name": "成交量",
- "data": [35,8,25,37,4,20]
- }
- ]
- },
- newlistoj:[],
- newlistoj1:[
- {name:"接待量",id:1},
- {name:"平均执行率",id:2},
- {name:"接待客户",id:3},
- {name:"录音时长",id:5},
- ],
- bocindex:0,
- newlisttabinfo:[
- {name:'接待量',zxl:'10'},
- {name:'平均执行率',zxl:'50'},
- {name:'接待客户',zxl:'80'},
- ],
- newlisttabinfo1:[
- {name:'接待量',zxl:'10'},
- {name:'平均执行率',zxl:'50'},
- {name:'接待客户',zxl:'80'},
- ],
- Theteamcomparedisshow:false,
- Groupcontrastisshow:false,
- allechar:[],
- allList:[]
- };
- },
- onShow() {
- // 获取楼盘id
- this.houseId = uni.getStorageSync('buildingID').id;
- // 获取数据看板
-
- // 获取员工
- this.getStaffList()
- // 获取团队
- this.getSectionList()
- // 获取团队是否显示权限
-
- this.queryHaveDept()
- // 获取简报
- this.getReport()
- // 获取接待趋势
- this.getRtrent()
- // 获取维度
- this.getindexZxl()
- },
- methods: {
- queryHaveDept() {
- return new Promise((resolve, reject) => {
- this.$u.get("/user/queryHaveDept?houseId="+this.houseId).then(res => {
- this.permissions(res)
- })
- })
- },
- permissions(res){
- if(res==1){
- this.Theteamcomparedisshow=false;
- this.Groupcontrastisshow=false;
- return
- }
-
- let totle=uni.getStorageSync('weapp_session_userInfo_data').total;
- if(totle==1){
- this.Theteamcomparedisshow=true;
- this.Groupcontrastisshow=false;
- }else{
- this.Theteamcomparedisshow=true;
- this.Groupcontrastisshow=true;
- }
- },
- // 获取员工列表
- getStaffList(){
- this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId',{houseId:this.houseId})
- .then(res=>{
- // console.log(res,'123')
- this.staffList=[]
- res.map(item=>{
- let obj={}
- obj.value=item.accountId
- obj.label=item.name
- this.staffList.push(obj)
- })
- this.staff=this.staffList[0]
- this.getAward()
- })
- },
- // 获取接待趋势
- getRtrent(){
- this.$u.post('/cusLvStatistics/receptionTrend',{
- houseId:this.houseId,
- timeType:this.lastEndDate?null:this.activeTotal,
- lastEndDate:this.lastEndDate,
- lastStartDate:this.lastStartDate
- })
- .then(res=>{
- // console.log(res)
- this.allechar=res
- this.tapspagek2(this.bocindex)
-
- })
- },
- // 销奖维度
- getindexZxl(){
- this.$u.post('/cusLvStatistics/indexZxl',{
- houseId:this.houseId,
- timeType:this.lastEndDate?null:this.activeTotal,
- lastEndDate:this.lastEndDate,
- lastStartDate:this.lastStartDate
- })
- .then(res=>{
- // console.log(res)
- // 处理销奖维度执行率
- // this.newlisttabinfo
- let arr=[]
- this.newlistoj=[]
- res.list.map((item,index)=>{
- arr.push({
- name:item.name,
- zxl:item.zxl
- })
- this.newlistoj.push({
- name:item.name,
- id:index
- })
- })
- this.newlisttabinfo=arr
- this.allList=res.list
- this.tapspagek3(this.bocindex1)
- })
- },
- // 获取简报
- getReport(){
- this.$u.post('/cusLvStatistics/xiaojiangAnalysis',{
- houseId:this.houseId,
- timeType:this.lastEndDate?null:this.activeTotal,
- lastEndDate:this.lastEndDate,
- lastStartDate:this.lastStartDate
- })
- .then(res=>{
- // 接待量
- this.numlist[0].num=res.receptionCount||0
- // 接待客户
- this.numlist[1].num=res.sumCustomer||0
- // 执行率
- this.numlist[2].num=(res.fraction||0)+'%'
- // 录音时长
- this.numlist[3].num=util.formatSecond(res.sumDuration)||0
-
- })
- },
- // 获取团队列表
- getSectionList(){
- this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId',{houseId:this.houseId})
- .then(res=>{
- this.teamList=[]
- res.map(item=>{
- let obj={}
- obj.value=item.deptId
- obj.label=item.deptName
- this.teamList.push(obj)
- })
- this.team=this.teamList[0]
- this.receptionCountList()
- })
- },
- // 员工销奖趋势
- getAward(){
- if(!this.staff.value){
- this.staffFlag=false
- return
- }
- this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate',{
- userA:this.staff.value,
- userB:'',
- houseId:this.houseId,
- timeType:this.lastEndDate?null:this.activeTotal+'',
- lastEndDate:this.lastEndDate,
- lastStartDate:this.lastStartDate
- })
- .then(res=>{
- this.allnum1=res.avg[0]
- this.allavg1=res.avg[1]
- // console.log(res)
- let first=res.first
- let second=res.second
- this.lineOptsect2.categories=[]
- this.lineOptsect2.series=[
- {
- name:first[0].accountName,
- data:[]
- }
- ]
- first.map(item=>{
- this.lineOptsect2.categories.push(item.statDate.slice(5,10))
- this.lineOptsect2.series[0].data.push(item.sumFraction)
- })
- })
- },
- // 团队接待趋势
- receptionCountList(){
- if(!this.team.value){
- this.teamFlag=false
- return
- }
- this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate',{
- deptIds:this.team.value,
- showRank:1,
- houseId:this.houseId,
- timeType:this.lastEndDate?null:this.activeTotal+'',
- lastEndDate:this.lastEndDate,
- lastStartDate:this.lastStartDate
- })
- .then(res=>{
- // console.log(res)
- let result=res.result
- this.allnum=res.avg[0]
- this.allavg=res.avg[1]
- // 当选择趋势时
- this.lineOptsect1={}
- let allobj={
- categories:[],
- series:[]
- }
- // 先处理时间
- // 当选择全部时
- // 当选择只有一个时
- let obj={}
- obj.data=[]
- obj.name=result[0][0].deptName
- result[0].map(item=>{
- allobj.categories.push(item.statDate.slice(5,10))
- obj.data.push(item.data)
- })
- allobj.series.push(obj)
- this.lineOptsect1=allobj
-
- })
- },
- //时间切换
- tabtimetap(index) {
- if (index == 3) {
- this.totalTimeShow = true;
- } else {
- this.activeTotal = index;
- this.lastEndDate=''
- this.lastStartDate=''
- this.getdata()
- }
- },
- // 获取数据
- getdata(){
- this.receptionCountList()
- this.getReport()
- this.getRtrent()
- this.getindexZxl()
- },
- staffSelectCallback(e,idx){
- if(idx==0){
- this.staff=e[0]
- this.getAward()
- }else{
- this.team=e[0]
- this.receptionCountList()
- }
- // console.log(e,idx)
- },
- //自定义时间
- totalTimeChange(e) {
- console.log(e.startDate, e.endDate)
- this.activeTotal=3;
- this.lastEndDate=e.endDate
- this.lastStartDate=e.startDate
- this.getdata()
- },
- //指标执行率分析tab
- tapspagek2(index) {
- // console.log(index)
- // 对数据进行分析和处理
- // 先处理日期
- let allobj={
- "categories": [],
- "series": [
- {
- name:'接待量',
- data:[]
- }
- ]
- }
- if(index==0){
- // 接待量
- this.allechar.map(item=>{
- allobj.categories.push(item.statDate.slice(5,10))
- allobj.series[0].data.push(item.receptionCount)
- })
- }else if(index==1){
- // 平均执行率
- this.allechar.map(item=>{
- allobj.categories.push(item.statDate.slice(5,10))
- allobj.series[0].data.push(item.fraction)
- })
- }else if(index==2){
- // 接待客户
- this.allechar.map(item=>{
- allobj.categories.push(item.statDate.slice(5,10))
- allobj.series[0].data.push(item.sumCustomer)
- })
- }else{
- // 录音时长
- this.allechar.map(item=>{
- allobj.categories.push(item.statDate.slice(5,10))
- allobj.series[0].data.push(item.sumDuration)
- })
- }
- this.bocindex = index;
- // console.log(allobj)
- // return
- this.lineOptsect=allobj
- },
- tapspagek3(index){
- let arr=[]
- // return
- // console.log(index,this.allList[index])
- this.allList[index].children.map(item=>{
- arr.push({
- name:item.name,
- zxl:item.zxl
- })
- })
- this.newlisttabinfo1=arr
- this.bocindex1 = index;
- },
- //集团对比
- Groupcontrast(){
- uni.navigateTo({
- url: '/pages/center/Piabodata/Groupcontrast'
- });
- },
- //团队对比
- Theteamcompared(){
- uni.navigateTo({
- url: '/pages/center/Piabodata/Theteamcompared'
- });
- },
- //用户洞察
- toUserinsightinto(){
- uni.navigateTo({
- url: '/pages/center/Piabodata/Userinsightinto'
- });
- },
- //趋势分析
- toTrendAnalysis(){
- uni.navigateTo({
- url: '/pages/center/Piabodata/TrendAnalysis'
- });
- },
- //员工分析
- toStaffAnalysis(){
- uni.navigateTo({
- url: '/pages/center/Piabodata/StaffAnalysis'
- });
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .box {
- width: 100%;
- height: 100%;
- background: #FAFAFA;
- padding-bottom: 60rpx;
- }
- .Piabodata-box{
- width: 100%;
- background: #FFFFFF;
- display: flex;
- flex-wrap: wrap;
- padding-bottom: 30rpx;
- .Piabodata{
- width: 33.3%;
- .Piabodata-img{
- width: 100%;
- text-align: center;
- .Piabodata-img1{
- width: 134rpx;
- height: 134rpx;
- }
- }
- .Piabodata-text{
- width: 100%;
- text-align: center;
- font-size: 24rpx;
- font-weight: 400;
- color: #333333;
- margin-top: -10rpx;
- }
- }
- }
- </style>
|