web-zk-h5/pages/performanceEchart/index.vue

<template>
	<view class="main">

		<view class="top-lists">
			<view v-for="(item, index) in navList" v-show="item.menuKey!=''" :key="index"
				:class="navIndex == index ? 'styles' : ''" class="nav-view" @click="clickHref(index)">
				{{ item.name }}
			</view>
		</view>
		<view>

		</view>
		<!-- 业绩分布 !-->
		<template>
			<view v-if="navIndex==0 && navList[0].menuKey!=''">
				<view v-if='ifDetail==0'>
					<view>
						<performanceDistribution />
					</view>
					<!-- 安置图 -->
					<view>
						<placement />
					</view>
				</view>
				<view v-else>
					<!-- 月度业绩详情 -->
					<view>
						<monthPvDetail :placeDept='ifDetail' />
					</view>

				</view>
			</view>
		</template>
		<!-- 安置图 !-->
		<!-- <template>
			<view v-if="navIndex==1">


			</view>
		</template> -->
		<!-- 月度新增统计 !-->
		<template>
			<!-- <view v-if="navIndex==1">

			</view> -->
		</template>
		<!-- 月度新增业绩 / 数据查询 !-->
		<template>
			<view v-if="navIndex==1" style="padding-bottom: 20rpx;">
				<!-- 首购新增业绩 !-->
				<view>
					<fistAddPv />
				</view>
				<!-- 首购业绩分布 !-->
				<view>
					<firstPv></firstPv>
				</view>
				<!-- 复购新增业绩 !-->
				<!-- <view>
					<repAddPv />
				</view> -->
				<!-- 复购业绩分布 !-->
				<!-- <view>
					<secondPv></secondPv>
				</view> -->
				<!-- 奖衔业绩分布 !-->
				<!-- <view>
					<placementPerformance />
				</view> -->
				<!-- 真实业绩分布  !-->
				<!-- <view>
					<realPerformances />
				</view> -->
				<!-- 首购新增业绩对比 !-->
				<view>
					<mounthPvCompare />
				</view>
				<!-- 活跃会员对比 !-->
				<view>
					<activeMembers></activeMembers>
				</view>


				<!-- 推荐小区分布 !-->
				<!-- <view>
					<recommendedCommunity />
				</view> -->


				<!-- 推荐平均用时 -->
				<!-- <view>
					<recommendTime />
				</view> -->

			</view>
		</template>

		<!-- 直推业绩 !-->
		<template>
			<view v-if="navIndex==2">
				<view class="height-auto-s">
					<view style="font-size: 28rpx;">{{'直推业绩'}}</view>
					<view class="flex-ss">
						<view class="time1">
							<picker :value="query.startDate" fields='month' mode="date" @change="bindDateChange">
								<view v-if="query.startDate!=''" class="uni-inputs">{{query.startDate}}</view>
								<view v-else class="uni-input">{{'开始日期'}}</view>
							</picker>
						</view>
						<!-- <view class="text_s">{{'至'}}</view>
						<view class="time1" style="margin-right: 0;">
							<picker :value="query.endDate" mode="date" @change="bindDateChange1">
								<view v-if="query.endDate!=''" class="uni-inputs">{{query.endDate}}</view>
								<view v-else class="uni-input">{{'结束日期'}}</view>
							</picker>
						</view> -->
					</view>
				</view>
				<!-- 推荐业绩分布 !-->
				<view>
					<recommendPerformance ref="recommends" />
				</view>
				<!-- 等级业绩 !-->
				<view>
					<gradePerformance ref="recommends1" />
				</view>
			</view>
		</template>
		<!-- 推荐列表 !-->
		<template>
			<view v-if="navIndex==3">
				<directList ref="sgsyData" />
			</view>
		</template>

	</view>
</template>

<script>
	import * as api from '@/config/login.js'
	import * as apis from '@/config/market.js'
	import {
		setToken
	} from '@/config/auth.js'
	import store from '@/store'
	import placement from '@/components/distribution/placement.vue'
	import placementPerformance from '@/components/distribution/placementPerformance.vue'
	import fistAddPv from '@/components/distribution/fistAddPv.vue'
	import mounthPvCompare from '@/components/distribution/mounthPvCompare.vue'
	import activeMembers from '@/components/distribution/activeMembers.vue'
	import repAddPv from '@/components/distribution/repAddPv.vue'
	import recommendedCommunity from '@/components/distribution/recommendedCommunity.vue'
	import firstPv from '@/components/distribution/firstPv.vue'
	import secondPv from '@/components/distribution/secondPv.vue'
	import realPerformances from '@/components/distribution/realPerformances.vue'
	import realPerformance from '@/components/distribution/realPerformance.vue'
	import directList from '@/components/distribution/directList.vue'
	import recommendTime from '@/components/distribution/recommendTime.vue'
	import gradePerformance from '@/components/distribution/gradePerformance.vue'
	import recommendPerformance from '@/components/distribution/recommendPerformance.vue'
	import performanceDistribution from '@/components/distribution/performanceDistribution.vue'
	import monthPvDetail from '@/components/distribution/monthPvDetail.vue'
	export default {

		components: {
			placement,
			realPerformances,
			placementPerformance,
			realPerformance,
			directList,
			recommendTime,
			gradePerformance,
			recommendPerformance,
			performanceDistribution,
			fistAddPv,
			repAddPv,
			recommendedCommunity,
			firstPv,
			secondPv,
			mounthPvCompare,
			activeMembers,
			monthPvDetail
		},
		data() {
			return {
				index: null,
				userInfo: [],
				query: {
					startDate: '',
				},
				marketList: [{
					text: '奖金来源',
					id: 3,
					path: "/marketDynamics",
					name: 'bonusSource',
					isShow: false,
				}, ],
				navList: [{
						name: '月度业绩',
						menuKey: "",
						value: "ConsanguinityCheck"
					},
					{
						name: '数据查询',
						menuKey: "",
						value: "monthlyPerformance"
					},
					{
						name: '直推业绩',
						menuKey: "",
						value: "recommendPerformance"
					},
					{
						name: '推荐列表',
						menuKey: "",
						value: "recommendList"
					},

					// {
					// 	name: "最末节点",
					// 	menuKey: "",
					// 	value: "placementChart"
					// },
					// {
					// 	name: "月度新增统计",
					// 	menuKey: "",
					// 	value: "monthlyChart"
					// },

					// {
					// 	name: '推荐平均用时',
					// 	menuKey: "",
					// 	value: "recommendTime"
					// },

				],
				navIndex: 0,
				page: {
					pageSize: 50,
					pageNum: 1,
				},
				ifDetail: "0"
			}
		},
		onLoad(val) {

			this.query.startDate = this.getStartTime()
			this.ifDetail = val.ifDetail || "0"
			// this.query.endDate = this.getEndTime()
			this.getMenuLists()
		},
		methods: {
			getStartTime() {
				let date = new Date()
				date.setDate(1) // 将当前时间的日期设置成第一天
				let year = date.getFullYear() // 得到当前年份
				let month = date.getMonth() + 1 // 得到当前月份（0-11月份，+1是当前月份）
				month = month > 9 ? month : '0' + month // 补零
				// return year + '-' + month + '-' + day
				return year + "-" + month
			},
			// getEndTime() {
			// 	var date = new Date();
			// 	var year = date.getFullYear() // 年
			// 	var month = date.getMonth() + 1; // 月
			// 	var day = date.getDate() > 1 ? date.getDate() - 1 : date.getDate(); // 日
			// 	var hour = date.getHours(); // 时
			// 	var minutes = date.getMinutes(); // 分
			// 	var seconds = date.getSeconds() //秒
			// 	// 给一位数的数据前面加 “0”
			// 	if (month >= 1 && month <= 9) {
			// 		month = "0" + month;
			// 	}
			// 	if (day >= 0 && day <= 9) {
			// 		day = "0" + day;
			// 	}
			// 	if (hour >= 0 && hour <= 9) {
			// 		hour = "0" + hour;
			// 	}
			// 	if (minutes >= 0 && minutes <= 9) {
			// 		minutes = "0" + minutes;
			// 	}
			// 	if (seconds >= 0 && seconds <= 9) {
			// 		seconds = "0" + seconds;
			// 	}
			// 	// return year + "-" + month + "-" + day + " "
			// 	return year + "-" + month
			// },
			bindDateChange(e) {
				this.query.startDate = e.detail.value
				this.$refs.recommends.upDateCover2(this.query)
				this.$refs.recommends1.upDateCover2(this.query)
			},

			async onReachBottom() {
				if (this.navIndex == 6) {
					this.page.pageNum + 1
					this.$refs.sgsyData.getDataList(this.page.pageNum += 1);
				}
			},
			bindPickerChange(e) {
				this.index = e.detail.value
			},
			clickHref(index) {
				// let that= this;
				this.navIndex = index
				this.ifDetail = "0"
			},
			getMenuLists() {
				api.menuList().then((res) => {
					res.data.forEach((item) => {
						this.navList.forEach((items) => {
							if (item.menuKey == items.value) {
								items.menuKey = item.menuKey
							}
						})
						if (this.marketList[0].name == item.menuKey) {
							this.marketList[0].isShow = true
						}
					})
				})
			},
		},
	}
</script>
<style lang="scss">
	.uni-inputs {
		color: #333;
	}

	.text_s {
		font-size: 24rpx;
		color: #333;
	}

	.height-auto-s {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		padding: 25rpx 60rpx 0 60rpx;
		// line-height: 75rpx;
	}

	.flex-ss {
		display: flex;
	}

	.time1 {
		width: 158rpx;
		// height: 75rpx;
		// border-bottom: 1rpx solid #eee;
		margin: 0 20rpx 30rpx 20rpx;
		color: #999;
		text-align: center;
		font-size: 24rpx;
		/* margin-bottom: 30rpx; */
	}



	.texts {
		color: #333;
		font-size: 26rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* width:200rpx; */
		text-align: right;
	}

	.select-text {
		display: flex;
		margin-right: 20rpx;
		font-size: 26rpx;
		color: #333;
		position: relative;
	}

	.selIcon {
		width: 30rpx;
		height: 30rpx;
		margin: 5rpx 0 0 20rpx;
	}

	page {
		background-color: #f2f2f2;
	}

	.styles {
		border: none !important;
		color: #fff !important;
		background: #d61820;
	}

	.top-lists {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		background-color: #fff;
		padding: 20rpx 0;
		margin-bottom: 20rpx;

		.nav-view {
			min-width: 110rpx;
			padding: 5rpx 26rpx;
			border-radius: 10rpx;
			border: 2rpx solid #999999;
			font-size: 28rpx;
			text-align: center;
			margin: 0 10rpx;
			color: #999;
		}
	}
</style>