NewZkgj/pages/center/Piabodata/index.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="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()">
				<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()">
				<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="newlistoj" :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="wangxiaohuaerlingeryilingwuyiba1"
					:canvas2d="true"
				 /> 
			</view>
		</view>
		
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1">团队接待趋势</view>
				<view class="title2">
					<view class="title2-che">毛丫丫
						<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">合计：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="wangxiaohuaerlingeryilingwuyibao"
					:canvas2d="true"
				 /> 
			</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="bocindex" @change="tapspagek2"
				 inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj" :is-scroll="true">
				</u-tabs-swiper>
			</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>
		
		<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,
				timeobj:{
					statDateStart:'',
					statDateEnd:''
				},
				totalTimeShow: false,
				activeTab: 0,
				numlist:[
					{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]
						}
					]
				},
				newlistoj:[
					{name:"接待量",id:1},
					{name:"平均执行率",id:2},
					{name:"接待客户",id:3},
					{name:"接待",id:4},
					{name:"接待量",id:5},
					{name:"接待",id:6},
				],
				bocindex:0,
				newlisttabinfo:[
					{name:'接待量',zxl:'10'},
					{name:'平均执行率',zxl:'50'},
					{name:'接待客户',zxl:'80'},
				],
				
			};
		},
		onLoad() {
			
		},
		methods: {
			//时间切换
			tabtimetap(index) {
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.activeTotal = index;
				}
			},
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal=3;
			},
			//指标执行率分析tab
			tapspagek2(index) {
				this.bocindex = 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>