NewZkgj/pages/center/Piabodata/StaffAnalysis.vue

<template>
	<view>
		<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="timepick">
			<view class="timepicktime">
				<view>毛丫丫</view>
				<view>
					<image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
				</view>
			</view>
			<view class="timepickpick">
				 <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">
					<image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;" src="../../../static/images/xuanzhong.png" mode=""></image>
				 </view>  
				 <view style="font-size:26rpx;text-indent: 12rpx;">对比</view> 
			</view>
			<view class="timepicktime" v-if="timepickpickisshow">
				<view>毛丫丫2</view>
				<view>
					<image class="Underimg" src="../../../static/images/Underimg.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待量</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="wangxiaohuaerlingeryilingwuyibbb"
					:canvas2d="true"
				 /> 
			</view>
		</view>
		
		<view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
		<view class="single">
			<view class="title">
				<view class="title1" style="flex: 1;">接待客户</view>
				<view class="title3" style="flex: 1;">
					<view class="title3-box" style="width: 40%;">
						<view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 0 }">有效录音</view>
					</view>
					<view class="title3-box" style="width: 40%;">
						<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="danwei">来访(人)</view>
			<view class="uchaserbox">
				<qiun-data-charts
				   type="line"
				   :chartData="lineOptsect"
				   background="none"
				   :ontouch="true"
					canvasId="wangxiaohuaerlingeryilingwuyibhh"
					:canvas2d="true"
				 /> 
			</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;">销讲能力</view>
			</view>
			<view class="uchaserbox">
				 <qiun-data-charts
				    type="radar"
				    :chartData="chartData"
				    :canvas2d="true"
					canvasId="wangxiaohuaerlingeryilingwuycsdx"
				    background="none"
				  />
			</view>
		</view>
		
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
	
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timepickpickisshow:false,
				totalTimeShow: false,
				activeTotal:0,
				activeTotal2:0,
				lineOptsect:{
					"categories": ["2016","2017","2018","2019","2020","2021"],
					"series": [
						{
							"name": "成交量1",
							"data": [35,8,25,37,4,20]
						},
						{
							"name": "成交量2",
							"data": [40,18,45,44,10,60]
						}
					]
				},
				chartData:{
					"categories": ["维度1","维度2","维度3","维度4","维度5","维度6"],
					"series": [
						{
							"name": "成交量",
							"data": [90,110,165,195,187,172]
						}
					]
				}
			};
			
		},
		
		onLoad: function(options) {	},
		methods: {
			//是否对比
			checkboxChange(){
				this.timepickpickisshow=!this.timepickpickisshow;
			},
			tabtimetap(index){
				// console.log(idx)
				// this.activeTotal=idx
				if (index == 3) {
					this.totalTimeShow = true;
				} else {
					this.activeTotal = index;
				}
			},
			//自定义时间
			totalTimeChange(e) {
				console.log(e.startDate, e.endDate)
				this.activeTotal=3;
			},
		},
	}
</script>
<style lang="scss" scoped>
	// 对比时间切换
	.timepick{
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		background: #FAFAFA;
	}
	.timepicktime{
		width: 260rpx;
		height: 50rpx;
		border: 1rpx solid #E0E0E0;
		margin-left: 30rpx;
		display: flex;
		background: #FFFFFF;
	}
	.timepicktime>view:nth-of-type(1){
		width: 210rpx;
		height: 100%;
		line-height: 50rpx;
		font-size: 26rpx;
		font-weight: 400;
		text-align: center;
	}
	.timepicktime>view:nth-of-type(2){
		width: 50rpx;
		height: 100%;
		border-left: 1px solid  #E0E0E0;
	}
	.timepickpick{
		width: 110rpx;
		height: 50rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}
	.Underimg{
		width: 50rpx;
		height:50rpx;
		margin-top: -2rpx;
	}
</style>