web-store-retail-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>
    <!-- 业绩分布 !-->
    <template>
      <view v-if="navIndex == 0 && navList[0].menuKey != ''">
        <performanceDistribution />
      </view>
    </template>

    <!-- 推荐列表 !-->
    <template v-if="navIndex == 1">
      <view>
        <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 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,
    recommendedCommunity,
    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: '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 == 1) {
        this.$refs.sgsyData.nextPageQuery()
      }
    },
    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 {
  color: #005bac !important;
  background: #fff !important;
  border-bottom: 4rpx solid #005bac !important;
}

.top-lists {
  display: flex;
  background-color: #fff;
  border-bottom: 2rpx solid #f0f0f0;
  margin-bottom: 10rpx;

  .nav-view {
    flex: 1;
    padding: 30rpx 20rpx;
    font-size: 28rpx;
    text-align: center;
    color: #666;
    position: relative;
    border-bottom: 4rpx solid transparent;
    transition: all 0.3s ease;

    &:not(:last-child) {
      border-right: 1rpx solid #f0f0f0;
    }

    &:active {
      background-color: #f8f8f8;
    }
  }
}
</style>