From b6fe04ea07bcc159b885b312b3447055b48c6620 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Tue, 5 Aug 2025 18:06:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(performanceEchart):=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E6=97=A0=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/performanceEchart/index.vue | 733 +++++++++++++++---------------
 1 file changed, 367 insertions(+), 366 deletions(-)

diff --git a/pages/performanceEchart/index.vue b/pages/performanceEchart/index.vue
index 0962881..54058b2 100644
--- a/pages/performanceEchart/index.vue
+++ b/pages/performanceEchart/index.vue
@@ -1,415 +1,416 @@
 <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 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">
+    <!-- 月度新增统计 !-->
+    <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>
+    </template>
+    <!-- 月度新增业绩 / 数据查询 !-->
+    <template>
+      <view v-if="navIndex == 1" style="padding-bottom: 20rpx">
+        <!-- 首购新增业绩 !-->
+        <view>
+          <fistAddPv />
+        </view>
+        <!-- 首购业绩分布 !-->
+        <view>
+          <firstPv></firstPv>
+        </view>
+        <!-- 复购新增业绩 !-->
+        <!-- <view>
 					<repAddPv />
 				</view> -->
-				<!-- 复购业绩分布 !-->
-				<!-- <view>
+        <!-- 复购业绩分布 !-->
+        <!-- <view>
 					<secondPv></secondPv>
 				</view> -->
-				<!-- 奖衔业绩分布 !-->
-				<!-- <view>
+        <!-- 奖衔业绩分布 !-->
+        <!-- <view>
 					<placementPerformance />
 				</view> -->
-				<!-- 真实业绩分布  !-->
-				<!-- <view>
+        <!-- 真实业绩分布  !-->
+        <!-- <view>
 					<realPerformances />
 				</view> -->
-				<!-- 首购新增业绩对比 !-->
-				<view>
-					<mounthPvCompare />
-				</view>
-				<!-- 活跃会员对比 !-->
-				<view>
-					<activeMembers></activeMembers>
-				</view>
+        <!-- 首购新增业绩对比 !-->
+        <view>
+          <mounthPvCompare />
+        </view>
+        <!-- 活跃会员对比 !-->
+        <view>
+          <activeMembers></activeMembers>
+        </view>
 
-
-				<!-- 推荐小区分布 !-->
-				<!-- <view>
+        <!-- 推荐小区分布 !-->
+        <!-- <view>
 					<recommendedCommunity />
 				</view> -->
 
-
-				<!-- 推荐平均用时 -->
-				<!-- <view>
+        <!-- 推荐平均用时 -->
+        <!-- <view>
 					<recommendTime />
 				</view> -->
+      </view>
+    </template>
 
-			</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>
+    <!-- 直推业绩 !-->
+    <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>
+          </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 {
+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',
+        },
 
-		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: "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)
+    },
 
-					// {
-					// 	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
-						}
-					})
-				})
-			},
-		},
-	}
+    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;
-	}
+.uni-inputs {
+  color: #333;
+}
 
-	.text_s {
-		font-size: 24rpx;
-		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;
-	}
+.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;
-	}
+.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; */
-	}
+.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;
+}
 
-	.texts {
-		color: #333;
-		font-size: 26rpx;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		/* width:200rpx; */
-		text-align: right;
-	}
+.selIcon {
+  width: 30rpx;
+  height: 30rpx;
+  margin: 5rpx 0 0 20rpx;
+}
 
-	.select-text {
-		display: flex;
-		margin-right: 20rpx;
-		font-size: 26rpx;
-		color: #333;
-		position: relative;
-	}
+page {
+  background-color: #f2f2f2;
+}
 
-	.selIcon {
-		width: 30rpx;
-		height: 30rpx;
-		margin: 5rpx 0 0 20rpx;
-	}
+.styles {
+  border: none !important;
+  color: #fff !important;
+  background: #d61820;
+}
 
-	page {
-		background-color: #f2f2f2;
-	}
+.top-lists {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  background-color: #fff;
+  padding: 20rpx 0;
+  margin-bottom: 20rpx;
 
-	.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;
-		}
-	}
+  .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>