Merge remote-tracking branch 'origin/master'

rk

15 小时以前 086be7eae50e48ad554fd8a3f4cb1e333d587595

 admin/src/views/index.vue

@@ -56,7 +56,7 @@
      <div class="change-style">
        <div class="count-left">
          <div class="item-title" style="display: flex;">
            <span style="flex: 1">经销商IOP10</span>
            <span style="flex: 1">经销商TOP10</span>
            <div class="tab-item" style="text-align: right;flex: 1.5; ">
              <span v-for="(item,index) in tabs1" :key="'tab'+index"  :class="item.index==tabIndex1?'active-tab tab-btn':'tab-btn'" @click="changeTab1(item)">{{item.name}}</span>
            </div>
@@ -98,7 +98,7 @@
        <div class="tab-title" style="display: flex;align-items: center; ">
          <span style="">营销数据分析</span>
          <div class="tab-item" style="margin-left: 20px;" >
            <el-date-picker  style="width: 110px;height: 22px;margin-right: 10px;"   v-model="searchForm.topYear2"  type="year"
            <el-date-picker  style="width: 110px;height: 22px;margin-right: 10px;"   v-model="searchForm.topYear2"  type="year" @change="changeYear"
                             clearable  value-format="yyyy"     format="yyyy'年'"   placeholder="年份" ></el-date-picker>
          </div>
        </div>
@@ -106,23 +106,24 @@
      <div class="change-style">
        <div class="count-left">
          <div class="item-title">积分发放类型占比</div>
          <div  class="bottom2" style="display: flex">
              <div ref="integralCount" style="flex: 1"></div>
              <div style="flex: 1;font-size: 14px;font-weight: 500;">
                  <div>累计消耗：{{10000}}</div>
                  <div>累计优惠金额：￥{{10000 }}</div>
          <div  class="bottom2" style="display: flex;align-items: center">
              <div ref="integralCount" style="flex: 1;min-height: 200px;"></div>
              <div style="flex: 1;font-size: 14px;font-weight: 500;margin-left: 20px;">
                  <div>累计发放数量：{{( dataList4.num || 0 ) +( dataList4.num1 || 0 )+( dataList4.num2 || 0 )+( dataList4.num3 || 0 )}}</div>
                  <div>累计消耗：{{ dataList4.useNum || 0 }}</div>
                  <div>累计优惠金额：￥{{(dataList4.price || 0 ).toFixed(2) }}</div>
              </div>
          </div>
        </div>
        <div class="count-right">
          <div class="item-title">优惠券发放类型占比</div>
          <div  class="bottom2">
            <div  class="bottom2" style="display: flex">
              <div ref="couponCount" style="flex: 1"></div>
              <div style="flex: 1;font-size: 14px;font-weight: 500;">
                <div>已使用优惠券：{{10000}}</div>
                <div>累计优惠金额：￥{{10000 }}</div>
              </div>
            <div  class="bottom2" style="display: flex;align-items: center">
              <div ref="couponCount" style="flex: 1;min-height: 200px;"></div>
              <div style="flex: 1;font-size: 14px;font-weight: 500;margin-left: 20px;">
                <div>累计发放数量：{{( dataList3.num || 0 ) +( dataList3.num1 || 0 )}}</div>
                <div>已使用优惠券：{{ dataList3.useNum || 0 }}</div>
                <div>累计优惠金额：￥{{(dataList3.price || 0 ).toFixed(2) }}</div>
                <div>促成交易金额：￥{{(dataList3.orderPrice || 0 ).toFixed(2) }}</div>
            </div>
          </div>
        </div>
@@ -150,6 +151,8 @@
      loading1: false,
      loading2: false,
      loading3: false,
      loading4: false,
      loading5: false,
      tabs2: [{ index: 0, name: '按销量' }, { index: 1, name: '按销售额' }],
      tabs1: [{ index: 0, name: '按订单量' }, { index: 1, name: '按销售额' }, { index: 2, name: '按会员数' }],
      tabs: [{ index: 0, name: '今日' }, { index: 1, name: '近7日' }, { index: 2, name: '近30日' }, { index: 3, name: '近12月' }],
@@ -181,8 +184,12 @@
      },
      dataList1: [],
      dataList2: [],
      dataList4: [],
      dataList3: [],
      myChart0: null,
      myChart1: null
      myChart1: null,
      myChart2: null,
      myChart3: null
    }
  },
  created () {
@@ -197,11 +204,37 @@
    this.initTopData()
    this.initShopRankData()
    this.initGoodsRankData()
    this.initIntegralData()
    this.initCouponData()
  },
  methods: {
    changeYearMonth(){
      this.initGoodsRankData()
      this.initShopRankData()
    },
    changeYear(){
      this.initIntegralData()
      this.initCouponData()
    },
    initCouponData () {
      this.loading4 = true
      this.api.couponData({year: this.searchForm.topYear2}).then(res => {
        res = res || {}
        this.dataList3 = res
        this.renderEchartOption3()
      }).finally(() => {
        this.loading4 = false
      })
    },
    initIntegralData () {
      this.loading5 = true
      this.api.integralData({ year: this.searchForm.topYear2}).then(res => {
        res = res || {}
        this.dataList4 = res
        this.renderEchartOption2()
      }).finally(() => {
        this.loading5 = false
      })
    },
    initShopRankData () {
      this.loading2 = true
@@ -236,7 +269,7 @@
        res.cateList = res.cateList || []
        this.topData = res
        this.renderEchartOption0()
        this.renderEchartOption2()
        this.renderEchartOption1()
      }).finally(() => {
        this.loading1 = false
      })
@@ -250,8 +283,18 @@
      window.addEventListener('resize', () => {
        this.myChart1.resize()
      })
      this.myChart2 = echarts.init(this.$refs.integralCount)
      window.addEventListener('resize', () => {
        this.myChart2.resize()
      })
      this.myChart3 = echarts.init(this.$refs.couponCount)
      window.addEventListener('resize', () => {
        this.myChart3.resize()
      })
      this.renderEchartOption0()
      this.renderEchartOption1()
      this.renderEchartOption2()
      this.renderEchartOption3()
    },
    changeTab (item) {
      if (this.loading1) {
@@ -336,7 +379,7 @@
        ]
      })
    },
    renderEchartOption2 () {
    renderEchartOption1 () {
      const series = []
      this.topData.cateList.forEach((item, index) => {
        series.push( {
@@ -378,9 +421,61 @@
        yAxis: { type: 'value' } ,
        series
      })
    },
    renderEchartOption2() {
      this.myChart2.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.dataList4.num || 0, name: '手动增加' },
              { value: this.dataList4.num1 || 0, name: '邀请好友' },
              { value: this.dataList4.num2 || 0, name: '消费返利' },
              { value: this.dataList4.num3 || 0, name: '注册赠送' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  }
}
        ]
      })
    },
    renderEchartOption3() {
      this.myChart3.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '优惠券发放',
            type: 'pie',
            radius: '50%',
            data: [
              { value: this.dataList3.num1 || 0, name: '折扣券' },
              { value: this.dataList3.num || 0, name: '满减券' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
  }
}
</script>

<style lang="scss" scoped>