web-base-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>