newEdition/pages/center400/Piabodata/TrendAnalysis.vue

<template>
	<view>
		<view class="boxtittabs">
			<div class="items" @tap="screenShow = true">{{ showTimeText }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
			</div>
			<div class="items" @tap="showTemplate = true">{{ showBeText }}
				<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon>
			</div>
		</view>

		<!-- 		<view class="timetabct">
			<view class="timetabctview">
				<view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">7天</view>
			</view>
			<view class="timetabctview">
				<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">15天</view>
			</view>
			<view class="timetabctview">
				<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">30天</view>
			</view>
		</view> -->

		<view class="timepick">
			<view class="timepicktime">
				<view @click="tabtimetap(3)">{{sheartime1}}
					<image class="Underimg" src="../../../static/images/down.png" mode=""></image>
				</view>
			</view>
			<view class="timepickpick" @click="checkboxChange()">
				<image v-if="timepickpickisshow" style="width: 30rpx;height: 30rpx;"
					src="../../../static/images/xuanzhong.png" mode=""></image>
				<view v-else style="width: 30rpx;height:30rpx;border: 1px solid #E0E0E0;box-sizing:border-box;"></view>
				<view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
			</view>
			<view class="timepicktime" v-if="timepickpickisshow">
				<view @click="tabtimetap(4)">{{sheartime2}}
					<image class="Underimg" src="../../../static/images/down.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="timeduibi">
			<view class="timeshow">数据起始时间：<text style="color: #333333;">{{kanbanlist.kaishitime}}</text></view>
			<view class="timeshow" v-if="kanbanlist.duibitime.length!=0">
				数据对比时间：
				<text style="color: #333333;">{{kanbanlist.duibitime}}</text>
			</view>
		</view>
		<view class="boxzonglan" style="min-height: 100rpx;">
			<view class="zonglantit">简报</view>
			<view class="zonglanbox">
				<view class="grid" v-for="(item,index) in numlist" :key="index">
					<view class="audonum">
						<view class="circle"></view>
						{{item.name}}
					</view>
					<view class="num u-flex" v-if="item.name==='平均执行率'">
						{{item.num}}%
						<!-- <image style="margin-left: 2rpx;width: 28rpx;height: 14rpx" src="../../../static/images/excute.png" mode="" /> -->
					</view>
					<view class="num" v-else-if="item.name==='有效接待'">{{item.num||'--'}}</view>
					<view class="num" v-else-if="item.name==='平均接待时长'">{{item.num}}分</view>
					<view class="num" v-else>{{item.num||0}}</view>
					<view class="comparesize" v-if="compareFlag&&timepickpickisshow">
						<text style="margin-right: 50rpx;">对比：{{item.name==='平均执行率'?item.num1+'%':item.num1}}</text>
						<text :style="{color:item.num2*1>0?'red':'green'}">
							{{item.num2}}
							<template v-if="item.name==='平均执行率'">
								%
							</template>
							{{(item.num2*1) > 0 ? '↑' : '↓'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="boxtittab" style="border: none;height: 82rpx;">
			<view class="tabbox">
				<view :class="{ activecllasscet2: newactiveTotal == 0 }" @click="tabxuanxiangtap(0)">项目</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet2: newactiveTotal == 1 }" @click="tabxuanxiangtap(1)">顾问</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet2: newactiveTotal == 2 }" @click="tabxuanxiangtap(2)">团队</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet2: newactiveTotal == 3 }" @click="tabxuanxiangtap(3)">销讲一级</view>
			</view>
			<view class="tabbox">
				<view :class="{ activecllasscet2: newactiveTotal == 4 }" @click="tabxuanxiangtap(4)">销讲二级</view>
			</view>
		</view>


		<view class="chart">
			<view style="display: flex;padding: 0 0 40rpx 0;justify-content: center;">
<!-- 				<view class="marketingBusiness">
					<view class="marketingBusinesstext" style="min-width: 50rpx;" @click="showMarketingBusiness = true">
						{{ marketingBusinessText }}
						<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
					</view>
				</view> -->
				<view
					style="display: flex;justify-content:center;padding-left: 30rpx;padding-right: 30rpx;margin-top: 0rpx;"
					v-if="guwenshow&&lopanobj.name" @click="oninputtap()">
					<view class="title2-che u-flex" style="width: 220rpx;">{{lopanobj.name}}
						<image class="righttochoose" src="../../../static/images/down.png" mode=""></image>
					</view>
				</view>
			</view>
			<view style="padding: 30rpx;padding-bottom: 20rpx;align-items: center;" v-if="Selectlevel">
				<view style="display: flex;align-items: center;border-bottom: 1px solid #C9C9C9;height: 80rpx;">
					<view>选择一级：</view>
					<view style="width:75%;">
						<input @click="oninputtap2()" v-model="Selectlevelobj.name" type="text" disabled="true"
							:border="border" placeholder="请选择" />
					</view>
					<view>
						<image src="https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/qf/more.png"
							style="width:12rpx;height:23rpx;margin-left: 16rpx;">
					</view>
				</view>


				<view style="display: flex;align-items: center;border-bottom: 1px solid #C9C9C9;height: 80rpx;">
					<view>选择二级：</view>
					<view style="width:75%;">
						<input @click="oninputtap3()" v-model="erSelectlevelobj.name" type="text" disabled="true"
							:border="border" placeholder="请选择" />
					</view>
					<view>
						<image src="https://qufang.oss-cn-beijing.aliyuncs.com/upload/icon/xcx/jjycrm/qf/more.png"
							style="width:12rpx;height:23rpx;margin-left: 16rpx;">
					</view>
					<!-- <view style="display: flex;justify-content:center;padding-left: 30rpx;padding-right: 30rpx;margin-top: 16rpx;"
						v-if="erSelectlevelobj.name" @click="oninputtap3()">
						<view class="title2-che" style="width: 220rpx;">{{erSelectlevelobj.name}}
							<image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
						</view>
					</view> -->
				</view>
			</view>

			<view style="display: flex;align-items: center;height: 80rpx;justify-content: center;"
				v-if="Selecttuandui&&Selecttuanduiobj.name" @click="oninputtap4()">
				<view class="title2-che u-flex" style="width: 220rpx;">{{Selecttuanduiobj.name}}
					<image class="righttochoose" src="../../../static/images/down.png" mode=""></image>
				</view>
			</view>

			<view class="single">
				<view class="danwei" style="margin: 20rpx 0" v-if="newactiveTotal==0||newactiveTotal==4">单位(%)</view>
				<view class="uchaserbox" v-if="lineOptsect.series.length!=0">
					<qiun-data-charts :style="!showCanvas?'display:none':''" :type="linetype" :opts="opts"
						:chartData="lineOptsect" background="none" :ontouch="true"
						canvasId="wangxiaohuaerlingeryilingwuyibao" :canvas2d="true" />
				</view>
				<view v-else style="width: 100%;">
					<view style="width: 100%;text-align: center;">
						<image style="width: 200rpx;height: 200rpx;"
							src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
					</view>
					<view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
				</view>
			</view>

		</view>

		<view class="single" v-if="timepickpickisshow">
			<view class="title">
				<view class="title1">对比报表</view>
			</view>
			<view class="table" v-if="!guwenFlag">
				<view v-for="(item,index) in tableDate" :key="index">
					<view class="tr">
						<view v-for="(item1,index1) in item" :key="index" style="width: 100%;">
							<view v-if="index1<item.length-1||index==0" class="td"
								style="border-right:1px solid #E0E0E0;">{{item1}}</view>
							<view v-if="index>0 && index1==item.length-1" class="td"
								style="border-right:1px solid #E0E0E0;" :style="{color:item1*1>0?'red':'green'}">
								{{item1==0?'--':item1+'%'}}{{item1*1>0?'↑':item1*1<0?'↓':''}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="table" v-if="guwenFlag" style="width: 100%;">
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<view v-for="(item,index) in tableDate" :key="index"
						:style="{display:index==0?'inline-block':'block'}">
						<view class="tr" style="display: inline-block;">
							<view v-for="(item1,index1) in item" :key="index1" class="trd"
								style="display: inline-block;">
								<view v-if="index==1&&index1>0" class="td" :style="{color:item1*1>0?'red':'green'}"
									style="border-right:1px solid #E0E0E0;">
									{{item1==0?'--':item1+'%'}}{{item1*1>0?'↑':item1*1<0?'↓':''}}
								</view>
								<view v-else-if="index>1&&index1>0" class="td" style="border-right:1px solid #E0E0E0;">
									{{item1+'%'}}
								</view>
								<view v-else class="td" style="border-right:1px solid #E0E0E0;">{{item1}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-select v-model="Showhiddenunits" mode="single-column" :list="selectlist" @confirm="confirm"
			:default-value="selindexList">
		</u-select>
		<u-select v-model="Showhiddenunits2" mode="single-column" :list="selectlist2" @confirm="confirm2"
			:default-value="selindex">
		</u-select>
		<u-select v-model="Showhiddenunits3" mode="single-column" :list="selectlist3" @confirm="confirm3"
			:default-value="selindex">
		</u-select>
		<u-select v-model="Showhiddenunits4" mode="single-column" :list="selectlist4" @confirm="confirm4"
			:default-value="selindex">
		</u-select>
		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
		<newcalendar v-model="totalTimeShow2" :planNum='intervaltime' mode="date" @change="totalTimeChange2">
		</newcalendar>
<!-- 
		<u-select v-model="showMarketingBusiness" mode="single-column" :list="showMarketingList"
			label-name="templateName" value-name="id" @confirm="selectMarketingBusiness"></u-select>
 -->
		<!-- 加载组件 -->
		<u-loadings v-model="LOADING"></u-loadings>

		<!-- 销讲业务 -->
		<u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
			mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>


		<!-- 更多筛选 -->
		<u-popup v-model="screenShow" mode="bottom" height="368">
			<view class="screen">
				<view class="timetabct">
					<view class="timetabctview">
						<view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0, '7天')">7天</view>
					</view>
					<view class="timetabctview">
						<view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1, '15天')">15天</view>
					</view>
					<view class="timetabctview">
						<view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2, '30天')">30天</view>
					</view>
				</view>
			</view>
		</u-popup>


	</view>
</template>
<script>
	import newcalendar from '@/components/newcalendar/newcalendar.vue';
	var config = require(".../../../config");
	export default {
		data() {
			return {
				selindexList: [0], // 默认选中第一项
				compareFlag: false,
				numlist: [{
						name: '平均执行率',
						num: '10',
						num1: '0',
						num2: '0'
					},
					{
						name: '平均接待时长',
						num: '10',
						num1: '0',
						num2: '0'
					},
					{
						name: '接待量',
						num: '10',
						num1: '0',
						num2: '0'
					},
					{
						name: '有效接待',
						num: '10',
						num1: '0',
						num2: '0'
					},
				],
				activeTotal: 0, //时间下标
				newactiveTotal: 0, //tab下标
				totalTimeShow: false,
				totalTimeShow2: false,
				totalTimeShow3: false,
				cWidth: uni.upx2px(690),
				cHeight: uni.upx2px(453),
				AcHeight: uni.upx2px(500),
				kanbanlist: { //录音和测评的数据
					kaishitime: '',
					duibitime: '',
					audonum: '',
					audotime: "",
					avgDuration: '',
					fraction: ''
				},
				pamect: { //接口参数
					houseId: '',
					timeType: "4",
					firstStartDate: '', //第一次开始时间
					firstEndDate: '', //第一次结束时间
					lastStartDate: '',
					lastEndDate: '',
					accountId: '', //顾问ids
					marketingId: '', //二级销讲id
					deptId: "", //部门id
					showStatus: 0
				},
				linetype: "line",
				lineOptsect: {}, //图表数据
				Showhiddenunits: false,
				selectlist: [],
				guwenshow: false,
				lopanobj: {
					id: '',
					name: ''
				},
				//二级相关
				Selectlevel: false,
				Selectlevelobj: {
					id: '',
					name: ''
				},
				erSelectlevelobj: {
					id: '',
					name: ''
				},
				Showhiddenunits2: false,
				Showhiddenunits3: false,
				selectlist2: [],
				selectlist3: [],
				//团队相关
				Selecttuandui: false,
				selectlist4: [],
				Selecttuanduiobj: {
					id: '',
					name: ''
				},
				Showhiddenunits4: false,
				showCanvas: true,

				timepickpickisshow: false,
				sheartime1: "",
				sheartime2: "",
				intervaltime: 0,
				tableDate: [],
				guwenFlag: false,
				opts: {
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 8
					},
					yAxis: {
						data: [{
							max: 100,
							min: 0,
						}]
					},
					fontSize: 10,
					extra: {
						radar: {
							max: 100
						}
					}
				},



				marketingBusinessText: '请选择销讲业务',
				showMarketingBusiness: false, // 展示可选择的销讲业务
				showMarketingList: [], // 销讲业务列表
				marketingBusiness: '', // 销讲业务
				screenShow: false, // 时间筛选弹窗
				showTimeText: '近七天', // 展示文字
				showBeText: '全部业务', // 
				templateList: [], // 销讲业务
				showTemplate: false, // 展示选择销讲业务弹窗
				showTemplates: false, // 展示选择销讲业务弹窗
				templateLists: [], // 销讲业务
				marketingBusinessId: '', // 选择的业务id
			};

		},
		components: {
			newcalendar
		},
		onLoad(options) {
			this.LOADING = true
			this.pamect.houseId = uni.getStorageSync('buildingID').id;
			this.init()
			this.getMarketingBusiness()
		},
		onPullDownRefresh() {
			this.init()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		watch: {
			Showhiddenunits(newValue, oldValue) {
				this.showCanvas = !newValue
			},
			Showhiddenunits2(newValue, oldValue) {
				this.showCanvas = !newValue
			},
			Showhiddenunits3(newValue, oldValue) {
				this.showCanvas = !newValue
			},
			Showhiddenunits4(newValue, oldValue) {
				this.showCanvas = !newValue
			},

			totalTimeShow(newValue, oldValue) {
				this.showCanvas = !newValue
			},
			totalTimeShow2(newValue, oldValue) {
				this.showCanvas = !newValue
			},
			totalTimeShow3(newValue, oldValue) {
				this.showCanvas = !newValue
			},
		},
		methods: {

			// 销讲业务方法
			templateCancel() {
				this.showTemplate = false;
			},

			// 确认选择销讲业务
			templateConfirm(e) {
				this.showTemplate = false;
				this.marketingBusiness = e[0].value
				this.showBeText = e[0].label
				this.init()
			},


			// 获取销讲业务
			getMarketingBusiness() {
				this.$u.get('/customer/marketingBusiness', {
					houseId: uni.getStorageSync('buildingID').id,
				}).then(res => {
					this.templateLists = res.map(item => {
						return item
					})
					this.templateList = res
					this.templateList.unshift({
						templateName: '全部业务',
						id: ''
					})
				})
			},

			// 选择趋势分析
			selectMarketingBusiness(e) {
				this.marketingBusinessText = e[0].label
				this.marketingBusiness = e[0].value
				this.init()
			},

			//是否对比
			checkboxChange() {
				if (this.newactiveTotal == 3) {
					uni.showToast({
						title: '销讲一级无对比',
						duration: 2000
					});
					return
				}
				if (this.newactiveTotal == 2) {
					if (this.Selecttuanduiobj.id == '') {
						uni.showToast({
							title: '全部团队无对比',
							duration: 2000
						});
						return
					}
				}

				if (this.timepickpickisshow == true) {
					this.timepickpickisshow = false;
					this.pamect.showStatus = 0;
					this.init()
				} else {
					this.timepickpickisshow = true;
					this.pamect.showStatus = 1;
				}
				this.activeTotal = 8;
			},

			init() {
				this.pamect.marketingBusiness = this.marketingBusiness
				this.$u.post("/cusLvStatistics/lyAndcp", this.pamect).then(data => {
					this.pamect.lastStartDate = data.lastStartDate;
					this.pamect.lastEndDate = data.lastEndDate;
					this.numlist[3].num = data.startSumCustomer
					this.numlist[0].num = data.startFraction;
					this.numlist[1].num = data.startSumDuration || 0;
					this.numlist[2].num = data.startReceptionCount || 0
					// startReceptionCount开始接待量
					// endReceptionCount结束接待量
					// contrastReceptionCount接待量对比
					if (data.endSumDuration != null) {
						this.compareFlag = true
						// return
						this.numlist[3].num1 = data.endSumCustomer
						this.numlist[0].num1 = data.endFraction;
						this.numlist[1].num1 = data.endSumDuration || 0;
						this.numlist[2].num1 = data.endReceptionCount || 0
						this.numlist[3].num2 = data.contrastSumCustomer
						this.numlist[0].num2 = data.contrastFraction;
						this.numlist[1].num2 = data.contrastSumDuration || 0;
						this.numlist[2].num = data.startReceptionCount || 0
						this.numlist[2].num2 = data.contrastReceptionCount || 0
					} else {
						this.compareFlag = false
					}
					this.sheartime1 = data.lastStartDate.substring(5, 10) + "--" + data.lastEndDate.substring(5,
						10);
					this.sheartime2 = '请选择';
					this.kanbanlist.duibitime = '';
					var kaishi = this.DateDiff(data.lastStartDate, data.lastEndDate);
					this.kanbanlist.kaishitime = data.lastStartDate + "至" + data.lastEndDate + "(" + kaishi + "天)";
					if (this.pamect.showStatus == 1) {
						this.sheartime2 = data.firstStartDate.substring(5, 10) + "--" + data.firstEndDate
							.substring(5, 10);
						var jeishu = this.DateDiff(data.firstStartDate, data.firstEndDate);
						this.kanbanlist.duibitime = data.firstStartDate + "至" + data.firstEndDate + "(" + jeishu +
							"天)";
					}
					this.kanbanlist.audonum = data.sumCustomer;
					this.kanbanlist.audotime = data.avgDuration;
					this.kanbanlist.avgDuration = data.fraction;
					this.kanbanlist.fraction = data.fraction;

					if (this.newactiveTotal == 0) {
						this.ProjectDimension()
					} else if (this.newactiveTotal == 1) {
						if (this.pamect.accountId == "") {
							this.getguwenlist()
						} else {
							this.ConsultantDimension()
						}
					} else if (this.newactiveTotal == 2) {
						if (this.pamect.deptId == "") {
							this.getuanduilist()
						} else {
							this.TeamCompared()
						}
					} else if (this.newactiveTotal == 3) {
						this.speakingLevel()
					} else {
						if (this.pamect.marketingId == '') {
							this.getonsyiji()
						} else {
							this.aboutEecondary()
						}
					}

					setTimeout(() => {
						this.LOADING = false
					}, 1500)
				});
			},
			//起始时间
			totalTimeChange(e) {
				this.pamect.lastStartDate = e.startDate;
				this.pamect.lastEndDate = e.endDate;
				var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
				this.kanbanlist.kaishitime = this.pamect.lastStartDate + "至" + this.pamect.lastEndDate + "(" + kaishi +
					"天)";

				if (this.pamect.showStatus == 0) {
					this.init()
					this.totalTimeShow = false;
				} else {
					if (this.pamect.firstStartDate.length == 0) {
						uni.showToast({
							title: '请选择对比时间',
							duration: 2000
						});
					} else {
						var jshu = this.DateDiff(this.pamect.firstStartDate, this.pamect.firstEndDate)
						if (kaishi == jshu) {
							this.init()
						} else {
							uni.showToast({
								title: '请选择相同天数',
								duration: 2000
							});
						}
					}
					this.totalTimeShow = false;
				}
			},
			//对比时间
			totalTimeChange2(e) {
				var d = new Date(e.result.replace(/\-/g, '/'));
				d.setDate(d.getDate() + this.intervaltime);
				var year = d.getFullYear();
				var month = d.getMonth() + 1;
				if (month < 10) month = '0' + month;
				var day = d.getDate();
				if (day < 10) day = '0' + day;
				this.pamect.firstStartDate = e.result;
				this.pamect.firstEndDate = year + '-' + month + '-' + day;
				console.log(this.pamect.firstStartDate)
				var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
				var jeishu = this.DateDiff(this.pamect.firstStartDate, this.pamect.firstEndDate)
				this.kanbanlist.duibitime = this.pamect.firstStartDate + "至" + this.pamect.firstEndDate + "(" + jeishu +
					"天)";

				console.log(this.pamect.lastStartDate, this.pamect.lastEndDate, kaishi, jeishu)
				if (kaishi == jeishu) {
					this.init()
				} else {
					uni.showToast({
						title: '请选择相同天数',
						duration: 2000
					});
				}
				this.totalTimeShow2 = false;
			},
			//自定义时间
			totalTimeChange3(e) {
				this.pamect.firstStartDate = "";
				this.pamect.firstEndDate = "";
				this.pamect.lastStartDate = e.startDate;
				this.pamect.lastEndDate = e.endDate;
				this.init()
				this.totalTimeShow3 = false;
			},


			//时间切换
			tabtimetap(index, text) {
				if (index == 0) {
					this.screenShow = false
					this.showTimeText = text
					this.activeTotal = index;
					this.pamect.timeType = "4";
					this.pamect.firstStartDate = '';
					this.pamect.firstEndDate = '';
					this.pamect.lastStartDate = '';
					this.pamect.lastEndDate = '';
					this.init()
				} else if (index == 1) {
					this.screenShow = false
					this.showTimeText = text
					this.activeTotal = index;
					this.pamect.timeType = "5";
					this.pamect.firstStartDate = '';
					this.pamect.firstEndDate = '';
					this.pamect.lastStartDate = '';
					this.pamect.lastEndDate = '';
					this.init()
				} else if (index == 2) {
					this.screenShow = false
					this.showTimeText = text
					this.activeTotal = index;
					this.pamect.timeType = "6";
					this.pamect.firstStartDate = '';
					this.pamect.firstEndDate = '';
					this.pamect.lastStartDate = '';
					this.pamect.lastEndDate = '';
					this.init()
				} else if (index == 3) {
					this.pamect.timeType = "";
					this.totalTimeShow = true;
				} else if (index == 4) {
					this.pamect.timeType = "";
					var kaishi = this.DateDiff(this.pamect.lastStartDate, this.pamect.lastEndDate)
					console.log(kaishi)
					this.intervaltime = kaishi - 1;
					this.totalTimeShow2 = true;
				} else {
					this.pamect.timeType = "";
					this.totalTimeShow3 = true;
				}
				this.activeTotal = index;
			},
			//tab切换
			tabxuanxiangtap(index) {
				// if (index == 1 || index == 3 || index == 4) {
				// 	if (this.showMarketingList.findIndex(item => item.id == '') != -1) {
				// 		this.showMarketingList.shift()
				// 	}
				// 	this.marketingBusinessText = this.showMarketingList[0].templateName
				// 	this.marketingBusiness = this.showMarketingList[0].id
				// } else {
				// 	this.showMarketingList.unshift({
				// 		templateName: '全部',
				// 		id: ''
				// 	})
				// 	this.marketingBusiness = ''
				// 	this.marketingBusinessText = '请选择销讲业务'
				// }
				this.newactiveTotal = index;
				this.guwenshow = false;
				this.Selectlevel = false;
				this.Selecttuandui = false;
				this.tableDate = []
				// this.pamect.showStatus = 0;
				// this.pamect.timeType = "4";
				// this.pamect.firstStartDate = '';
				// this.pamect.firstEndDate = '';
				// this.pamect.lastStartDate = '';
				// this.pamect.lastEndDate = '';
				// this.pamect.accountId = '';
				// this.pamect.marketingId = '';
				// this.pamect.deptId = ""
				// this.activeTotal = 0;
				this.timepickpickisshow = false;
				this.init()
				if (index == 4) {
					this.Selectlevel = true
				}
				if (index == 1) {
					this.guwenshow = true;
				}
			},
			//项目维度
			ProjectDimension() {
				const that = this;
				that.lineOptsect = {
					categories: [],
					series: []
				};
				this.linetype = "line";
				this.$u.post("/cusLvStatistics/teamOrOneValueShow", this.pamect).then(data => {
					if (this.pamect.showStatus == 0) {
						that.lineOptsect = {
							categories: [],
							series: [{
								name: '起始时间',
								data: [],
								color: '#7ED3F4'
							}]
						}
						data.startList.forEach((child, zxc) => {
							that.lineOptsect.categories.push(child.statDate.substring(5, 10))
						})
						that.lineOptsect.series[0].data = data.startList.map(item => item.fraction);
						console.log(that.lineOptsect.series, 'asdasdsadsadass00000000000000')
					} else {
						that.lineOptsect = {
							categories: [],
							series: [{
									name: '起始时间',
									data: [],
									color: '#7ED3F4'
								},
								{
									name: '对比时间',
									data: [],
									color: '#FF7070'
								},
							]
						}
						data.startList.forEach((item, sdf) => {
							data.endList.forEach((child, zxc) => {
								if (sdf == zxc) {
									that.lineOptsect.categories.push(
										child.statDate.substring(5, 10) + 'vs' + item
										.statDate
										.substring(5, 10)
									)
								}
							})
						})
						that.lineOptsect.series[1].data = data.startList.map(item => item.fraction);
						that.lineOptsect.series[0].data = data.endList.map(item => item.fraction)
						that.guwenFlag = false
						// // 处理表格数据
						let arr = [
							['时间', '时段一', '时段二', '变化']
							// {
							// 	time:'时间',
							// 	time1:'时段一',
							// 	time2:'时段二',
							// 	compare:'变化'
							// },
						]
						that.lineOptsect.categories.map((item, index) => {
							let newarr = [item, data.endList[index].fraction, data.startList[index]
								.fraction, data.comparedList[index].fraction
							]
							// obj.time=item
							// obj.time1=data.firstValue[index].fraction
							// obj.time2=data.lastValue[index].fraction
							// obj.compare=data.contrast[index].data
							// arr.push(obj)
							arr.push(newarr)
						})
						// console.log(arr)
						that.tableDate = arr
						console.log(that.lineOptsect.series, 'asdasdsadsadass00000000000000else')
					}
				});

			},
			//顾问维度
			ConsultantDimension() {
				const that = this;
				that.lineOptsect = {
					categories: [],
					series: []
				};
				this.linetype = "radar";
				this.$u.post("/cusLvStatistics/accFirstLevelContrast", this.pamect).then(data => {
					// return
					if (this.pamect.showStatus == 0) {
						that.lineOptsect = {
							categories: [],
							series: [{
								name: '时段一',
								data: [],
								color: '#7ED3F4'
							}]
						}
						data.firstList.forEach((item, sdf) => {
							that.lineOptsect.categories.push(item.name)
							that.lineOptsect.series[0].data.push(data.firstList[sdf].total)
						})
						// that.lineOptsect.series[0].data = data.lastValue.map(item => item.fraction);
					} else {
						// 当有对比的时候
						that.lineOptsect = {
							categories: [],
							series: [{
									name: '时段一',
									data: [],
									color: '#7ED3F4'
								},
								{
									name: '时段二',
									data: [],
									color: '#FF7070'
								},
							]
						}
						data.headerList.forEach((item, sdf) => {
							that.lineOptsect.categories.push(item.name)
							that.lineOptsect.series[0].data.push(data.firstList[sdf].total)
							that.lineOptsect.series[1].data.push(data.secondList[sdf].total)
						})
						// return
						// // 处理表格数据
						that.guwenFlag = true
						let arr = []
						arr[0] = ['时间', ...that.lineOptsect.categories]
						arr[1] = ['变化']
						arr[2] = ['时段一']
						arr[3] = ['时段二']
						// console.log(arr)
						data.firstList.map((item, index) => {
							arr[2].push(item.total)
							arr[3].push(data.secondList[index].total)
							arr[1].push(data.thirdList[index].total)
						})
						that.tableDate = arr
					}
				});
			},
			// 顾问纬度选择顾问
			oninputtap() {
				this.Showhiddenunits = true;
			},
			// 顾问选择确认
			confirm(e) {
				this.lopanobj.id = e[0].value;
				this.lopanobj.name = e[0].label;
				this.pamect.accountId = this.lopanobj.id;
				this.ConsultantDimension()
				this.Showhiddenunits = false;
				for (let i = 0; i < this.selectlist.length; i++) {
					if (e[0].value == this.selectlist[i].value) {
						this.selindexList[0] = i
					}
				}
			},
			//获取顾问
			getguwenlist() {
				this.$u.post("/cusLvStatistics/selectAllAccountIdByHouseId", {
					houseId: this.pamect.houseId
				}).then(data => {
					this.selectlist = [];
					if (data.length == 0) {
						this.lineOptsect = {
							categories: [],
							series: []
						};
						this.guwenshow = false;
						return
					} else {
						this.guwenshow = true;
						data.forEach(item => {
							this.selectlist.push({
								value: item.accountId,
								label: item.name
							})
						})
						this.lopanobj.id = data[0].accountId;
						this.lopanobj.name = data[0].name;
						this.pamect.accountId = this.lopanobj.id;
						this.ConsultantDimension()
					}
				})
			},
			//销讲一级
			speakingLevel() {
				this.linetype = "radar";
				this.lineOptsect = {
					categories: [],
					series: []
				};
				this.$u.post("/cusLvStatistics/firstLevelContrast", this.pamect).then(data => {
					if (data.length == 0) {
						return
					} else {
						let list = data.map(item => {
							return item.name
						});
						let list1 = data.map(item => {
							if (item.avgExecutionRate == null) {
								item.avgExecutionRate = 0
							} else {
								item.avgExecutionRate = item.avgExecutionRate
							}
							return item.avgExecutionRate
						});
						this.lineOptsect = {
							"categories": list,
							"series": [{
								"name": "销讲一级",
								"data": list1
							}]
						}
					}
				})
			},
			//销讲二级
			aboutEecondary() {
				this.lineOptsect = {};
				this.linetype = "line";
				this.$u.post("/cusLvStatistics/level2Contrast", this.pamect).then(data => {
					if (this.pamect.showStatus == 0) {
						this.lineOptsect = {
							categories: [],
							series: [{
								name: '起始时间',
								data: [],
								color: '#7ED3F4'
							}]
						}
						data.lastList.forEach((item, sdf) => {
							this.lineOptsect.categories.push(item.statDate.substring(5, 10))
						})
						this.lineOptsect.series[0].data = data.lastList.map(item => item.avgExecutionRate);
					} else {
						this.lineOptsect = {
							categories: [],
							series: [{
									name: '起始时间',
									data: [],
									color: '#7ED3F4'
								},
								{
									name: '对比时间',
									data: [],
									color: '#FF7070'
								},
							]
						}
						data.firstList.forEach((item, sdf) => {
							data.lastList.forEach((child, zxc) => {
								if (sdf == zxc) {
									this.lineOptsect.categories.push(
										child.statDate.substring(5, 10) + 'vs' + item.statDate
										.substring(5, 10)
									)
								}
							})
						})
						this.lineOptsect.series[1].data = data.firstList.map(item => item.avgExecutionRate);
						this.lineOptsect.series[0].data = data.lastList.map(item => item.avgExecutionRate)
						let that = this
						this.guwenFlag = false
						// // 处理表格数据
						let arr = [
							['时间', '时段一', '时段二', '变化']
						]
						that.lineOptsect.categories.map((item, index) => {
							let newarr = [item, data.lastList[
									index].avgExecutionRate, data.firstList[index].avgExecutionRate,
								data.contrast[index].data
							]
							arr.push(newarr)
						})
						// console.log(arr)
						that.tableDate = arr
					}
				})
			},
			//销讲二级:获取一级
			getonsyiji() {
				this.$u.post("/cusLvStatistics/findAllFirstLevel", {
					houseId: this.pamect.houseId
				}).then(data => {
					this.selectlist2 = [];
					if (data.length == 0) {
						this.Selectlevel = false;
						this.lineOptsect = {
							categories: [],
							series: []
						};
						return
					} else {
						this.Selectlevel = true;
						data.forEach(item => {
							this.selectlist2.push({
								value: item.marketingId,
								label: item.name
							})
						})
						this.Selectlevelobj.id = data[0].marketingId;
						this.Selectlevelobj.name = data[0].name;
						this.getonserji(this.Selectlevelobj.id)
					}
				})
			},
			//销讲二级:通过一级获取二级
			getonserji(ccd) {
				this.$u.post("/cusLvStatistics/findLevel2ByFirstLevel", {
					houseId: this.pamect.houseId,
					marketingId: ccd
				}).then(data => {
					this.selectlist3 = [];
					data.forEach(item => {
						this.selectlist3.push({
							value: item.marketingId,
							label: item.name
						})
					})
					this.erSelectlevelobj.id = data[0].marketingId;
					this.erSelectlevelobj.name = data[0].name;
					this.pamect.marketingId = this.erSelectlevelobj.id;
					this.aboutEecondary()
				})
			},
			//销讲二级:一级选择
			oninputtap2() {
				this.Showhiddenunits2 = true;
			},
			//销讲二级:二级选择
			oninputtap3() {
				if (this.Selectlevelobj.id == "") {
					uni.showToast({
						title: '请先选择一级',
						duration: 2000
					});
				} else {
					this.Showhiddenunits3 = true;
				}
			},
			//销讲二级:一级选择确认
			confirm2(e) {
				this.Selectlevelobj.id = e[0].value;
				this.Selectlevelobj.name = e[0].label;
				this.getonserji(this.Selectlevelobj.id)
			},
			//销讲二级:二级选择确认
			confirm3(e) {
				this.erSelectlevelobj.id = e[0].value;
				this.erSelectlevelobj.name = e[0].label;
				this.pamect.marketingId = this.erSelectlevelobj.id;
				this.aboutEecondary()
			},





			//团队请选择
			oninputtap4() {
				this.Showhiddenunits4 = true;
			},
			//团队选择确认
			confirm4(e) {
				this.Selecttuanduiobj.id = e[0].value;
				this.Selecttuanduiobj.name = e[0].label;
				this.pamect.deptId = this.Selecttuanduiobj.id;

				this.pamect.showStatus = 0;
				this.pamect.timeType = "4";
				this.pamect.firstStartDate = '';
				this.pamect.firstEndDate = '';
				this.pamect.lastStartDate = '';
				this.pamect.lastEndDate = '';
				this.activeTotal = 0;
				this.timepickpickisshow = false;
				this.init()
				this.TeamCompared()
			},
			//获取团队列表
			getuanduilist() {
				uni.request({
					url: config.service.findListByUser + "?houseId=" + this.pamect.houseId,
					method: "GET",
					header: {
						'content-type': 'application/json',
						'Authorization': 'Bearer ' + uni.getStorageSync('weapp_session_login_data').token
					},
					success: (data) => {
						if (data.data.data.length == 0) {
							this.Selecttuandui = false;
							this.lineOptsect = {
								categories: [],
								series: []
							};
							return
						} else {
							this.Selecttuandui = true;
							data.data.data.forEach(item => {
								this.selectlist4.push({
									value: item.deptId,
									label: item.name
								})
							})
							this.Selecttuanduiobj.id = this.selectlist4[0].value;
							this.Selecttuanduiobj.name = this.selectlist4[0].label;
							this.pamect.deptId = this.Selecttuanduiobj.id;
							this.TeamCompared()
						}
					}
				})

				// this.$u.post("/cusLvStatistics/findAllDeptIdByHouseId ", {
				// 	houseId: this.pamect.houseId
				// }).then(data => {
				// 	this.selectlist4 = [{
				// 		value: "",
				// 		label: "全部"
				// 	}];
				// 	if (data.length == 0) {
				// 		this.Selecttuandui = false;
				// 		this.lineOptsect = {
				// 			categories: [],
				// 			series: []
				// 		};
				// 		return
				// 	} else {
				// 		this.Selecttuandui = true;
				// 		data.forEach(item => {
				// 			this.selectlist4.push({
				// 				value: item.deptId,
				// 				label: item.deptName
				// 			})
				// 		})
				// 		this.Selecttuanduiobj.id = "";
				// 		this.Selecttuanduiobj.name = "全部";
				// 		this.pamect.deptId = this.Selecttuanduiobj.id;
				// 		this.TeamCompared()
				// 	}
				// })
			},
			//团队对比
			TeamCompared() {
				const that = this;
				that.lineOptsect = {};
				this.linetype = "line";
				this.$u.post("/cusLvStatistics/teamOrOneValueShowByDept", this.pamect).then(data => {
					if (this.Selecttuanduiobj.id == "") {
						var newlist = [];
						for (var i in data) {
							var ect = data[i].receptionStatList.map(item => {
								if (item.fraction == null) {
									item.fraction = 0
								} else {
									item.fraction = item.fraction
								}
								return item.fraction
							});
							newlist.push({
								name: data[i].deptName,
								data: ect
							})
						}
						var timelist = [];
						for (var i in data) {
							var ect = data[i].receptionStatList.map(item => {
								return item.statDate
							});
							timelist.push({
								name: data[i].deptName,
								data: ect
							})
						}
						var xAxisdata = [];
						timelist[0].data.forEach((item, sdf) => {
							xAxisdata.push(item.substring(5, 10))
						})
						that.lineOptsect = {
							categories: xAxisdata,
							series: newlist
						}
					} else {
						if (this.pamect.showStatus == 0) {
							that.lineOptsect = {
								categories: [],
								series: [{
									name: '起始时间',
									data: [],
									color: '#7ED3F4'
								}]
							}
							data.lastValue.receptionStatList.forEach((item, sdf) => {
								that.lineOptsect.categories.push(item.statDate.substring(5, 10))
							})
							that.lineOptsect.series[0].data = data.lastValue.receptionStatList.map(item => item
								.fraction);
						} else {
							that.lineOptsect = {
								categories: [],
								series: [{
										name: '起始时间',
										data: [],
										color: '#7ED3F4'
									},
									{
										name: '对比时间',
										data: [],
										color: '#FF7070'
									},
								]
							}
							data.firstValue.receptionStatList.forEach((item, sdf) => {
								data.lastValue.receptionStatList.forEach((child, zxc) => {
									if (sdf == zxc) {
										that.lineOptsect.categories.push(
											child.statDate.substring(5, 10) + 'vs' + item
											.statDate.substring(5, 10)
										)
									}
								})
							})
							that.lineOptsect.series[1].data = data.firstValue.receptionStatList.map(item => item
								.fraction);
							that.lineOptsect.series[0].data = data.lastValue.receptionStatList.map(item => item
								.fraction)
							that.guwenFlag = false
							// 团队处理数据
							// // 处理表格数据
							let arr = [
								['时间', '时段一', '时段二', '变化']
							]
							that.lineOptsect.categories.map((item, index) => {
								let newarr = [item, data
									.lastValue.receptionStatList[index].fraction, data.firstValue
									.receptionStatList[index].fraction, data.contrast
									.receptionStatList[index].data
								]
								arr.push(newarr)
							})
							that.tableDate = arr
						}
					}
				});
			},

			//算相隔天数
			DateDiff(sDate1, sDate2) {
				var aDate, oDate1, oDate2, iDays;
				aDate = sDate1.split("-");
				oDate1 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]); //转换为yyyy-MM-dd格式
				aDate = sDate2.split("-");
				oDate2 = new Date(aDate[1] + '/' + aDate[2] + '/' + aDate[0]);
				iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
				return iDays + 1; //返回相差天数
			},
		},
	}
</script>
<style lang="scss" scoped>
	.boxtittabs {
		width: 100%;
		height: 92rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;

		.items {
			padding: 0 24rpx;
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.boxtittabs {
		position: sticky;
		top: var(--window-top);
		z-index: 999;
	}

	.boxtittab .tabbox {
		flex: none;
		padding: 0 35rpx;
	}

	.uchaserbox {
		height: 500rpx;
	}

	.title2-che {
		width: 178rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #666666;
		text-indent: 12rpx;
		margin-left: 35rpx;
		margin-top: 20rpx;

		.righttochoose {
			width: 28rpx;
			height: 14rpx;
			margin-left: 12rpx;
		}
	}

	.table {
		border: 0px solid darkgray;

		.tr {
			display: flex;
			// width: 100%;
			justify-content: center;
			height: 64rpx;
			align-items: center;
			border-bottom: 1px solid #E0E0E0;
			flex-wrap: nowrap;

			.td {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
				height: 64rpx;
				line-height: 64rpx;
				// flex-shrink: 0;
			}

			.trd {
				flex-shrink: 0;
				min-width: 300rpx;
				// border-bottom: 1px solid #ccc;
			}

			.th {
				height: 64rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 64rpx;
			}
		}
	}

	.activecllasscet2 {
		color: #2671E2;
		font-weight: 600;
		border-bottom: 4rpx solid #2671E2;
	}

	.timeduibi {
		width: 100%;
		background: #FFFFFF;
		padding-bottom: 10rpx;

		.timeshow {
			color: #666666;
			width: 100%;
			height: 50rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			text-indent: 30rpx;
		}
	}




	.screen {

		// 顶部时间切换
		.timetabct {
			// position: sticky;
			// top: var(--window-top);
			// z-index: 999;
			// background: #fff;
			width: 100%;
			height: 98rpx;
			display: flex;
			border-bottom: 1rpx solid #E0E0E0;
			color: #666;
			flex-direction: column;
			border: none;
		}

		.timetabctview {
			flex: 1;
			text-align: center;
			line-height: 98rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			height: 100%;
			display: flex;
			justify-content: center;
		}

		.timetabctview view {
			width: 100rpx;
		}
	}


	.activecllasscet {
		color: #2671E2;
		font-weight: 600;
		border-bottom: 4rpx solid #2671E2;
	}

	// 对比时间切换
	.timepick {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		background: #FFFFFF;
	}

	.timepicktime {
		width: 260rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 30rpx;
		display: flex;
		background: #FFFFFF;
	}

	.timepickpick {
		width: 110rpx;
		height: 50rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
	}

	.Underimg {
		width: 28rpx;
		height: 14rpx;
		margin-left: 12rpx;
	}




	.timeButton {
		width: 100%;
		height: 60rpx;
		display: flex;
		color: #b1b1b1;
		font-size: 28rpx;

		.item {
			text-align: center;
			line-height: 60rpx;
			padding-left: 12rpx;
			padding-right: 12rpx;
			border-radius: 8rpx;
			border: 1px solid #E0E0E0;
			margin-right: 20rpx;

			&.active {
				color: #FFFFFF;
				background-color: #2671E2;
			}
		}
	}



	.boardbox {
		width: 100%;
		height: 172rpx;
		display: flex;
		align-items: center;
		background: #F4F8FD;
		border-radius: 8rpx;
		margin-top: 28rpx;

		.boardbox-zuo {
			width: 50%;
			height: 120rpx;
			border-right: 1px solid #E0E0E0;
		}

		.boardbox-you {
			width: 50%;
			height: 120rpx;
		}

		.boardbox-text1 {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
		}

		.boardbox-text2 {
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			color: #333333;
			margin-top: 10rpx;
		}
	}

	.comparesize {
		font-size: 26rpx;
		color: #333;
		margin: 30rpx 30rpx 0 30rpx;
		display: flex;
		align-items: center;
	}

	.grid:nth-child(1) {
		border-right: 1rpx solid #E0E0E0;
		border-bottom: 1rpx solid #E0E0E0;
	}

	.grid:nth-child(2) {
		border-bottom: 1rpx solid #E0E0E0;
	}

	.grid:nth-child(3) {
		border-right: 1rpx solid #E0E0E0;
	}

	.chart {
		padding: 40rpx 0 20rpx;
		min-height: 50vh;

		.marketingBusiness {
			display: flex;
			justify-content: center;
			align-items: center;

			.marketingBusinesstext {
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				border-radius: 8rpx;
				border: 1rpx solid #666666;

				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				.righttochoose {
					margin-left: 12rpx;
					width: 18rpx;
					height: 24rpx;
				}
			}
		}
	}

	.screen {
		width: 100%;

		.boxtittab {
			width: 100%;
			flex-direction: column;
			border: none;

			.tabbox {
				width: 100%;
			}
		}
	}
</style>