NewZkgj/pages/center/Piabodata/Groupcontrast.vue

<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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></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="#FBA448" :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">接待时长（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="#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" 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">合计：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="#9B6BDF" :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" 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">合计：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="#9B6BDF" :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" 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="wangxiaohuaerlingeryilingwuyib88"
				    background="none"
				  />
			</view>
		</view>
		
		
		
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></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 style="width: 100%;height: 20rpx;background: #FAFAFA;"></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>
	</view>
</template>

<script>
	var app = getApp();
	var util = require("../../../utils/util.js");
	var config = require("../../../config");
	export default {
		data() {
			return {
				activeTotal: 2,
				activeTotal2: 0,
				bocindex:0,
				totalTimeShow: false,
				newlisttabinfo:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				chartData:{
					"categories": ["维度1","维度2","维度3","维度4","维度5","维度6"],
					"series": [
						{
							"name": "成交量",
							"data": [90,110,165,195,187,172]
						}
					]
				}
				
			};
		},
		onLoad() {
			
		},
		methods: {
			//指标执行率分析tab
			tapspagek2(index) {
				this.bocindex = index;
			},
			//时间切换
			tabtimetap(index) {
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.activeTotal = index;
				}
			},
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal=3;
			},
			//集团对比
			Groupcontrast(){
				uni.navigateTo({
				    url: '/pages/center/Piabodata/Groupcontrast'
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background: #FAFAFA;
		padding-bottom: 60rpx;
	}
</style>