Merge remote-tracking branch 'origin/master'

rk

15 小时以前 086be7eae50e48ad554fd8a3f4cb1e333d587595

 admin/src/views/index.vue

@@ -11,22 +11,22 @@
        <div class="data-summary">
          <div class="data-item blue">
            <div>{{tabName}}销售额</div>
            <div class="data-num">￥{{ (countData.totalPrice ||0).toFixed(2) }}</div>
            <div class="data-num">￥{{ (topData.price ||0).toFixed(2) }}</div>
          </div>
          <div class="parting"></div>
          <div class="data-item yellow">
            <div>{{tabName}}成交订单量</div>
            <div class="data-num">{{ countData.totalNum ||0}}</div>
            <div class="data-num">{{ topData.num||0}}</div>
          </div>
          <div class="parting"></div>
          <div class="data-item green">
            <div>{{tabName}}退款金额</div>
            <div class="data-num">￥{{( countData.totalRefundPrice ||0).toFixed(2) }}</div>
            <div class="data-num">￥{{( topData.price1 ||0).toFixed(2) }}</div>
          </div>
          <div class="parting"></div>
          <div class="data-item orange">
            <div>{{tabName}}退款订单量</div>
            <div class="data-num">{{ countData.totalRefundNum ||0 }}</div>
            <div class="data-num">{{ topData.num1 ||0 }}</div>
          </div>
          <div class="parting"></div>
        </div>
@@ -35,7 +35,7 @@
      <div class="change-style">
        <div class="count-left">
          <div class="item-title">订单量与销售额趋势</div>
          <div ref="orderCount" class="bottom"></div>
          <div ref="orderCount" class="bottom"  ></div>
        </div>
        <div class="count-right">
          <div class="item-title">各品类销售额占比</div>
@@ -46,9 +46,9 @@
          <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.topYear"  type="year"
              <el-date-picker  style="width: 110px;height: 22px;margin-right: 10px;"   v-model="searchForm.topYear"  type="year" @change="changeYearMonth"
                  clearable  value-format="yyyy"     format="yyyy'年'"   placeholder="年份" ></el-date-picker>
              <el-date-picker  style="width: 100px;height: 22px;"   v-model="searchForm.topMonth"  type="month"
              <el-date-picker  style="width: 100px;height: 22px;"   v-model="searchForm.topMonth"  type="month"  @change="changeYearMonth"
                               clearable  value-format="MM"     format="MM'月'"   placeholder="月份" ></el-date-picker>
            </div>
          </div>
@@ -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>
@@ -69,7 +69,7 @@
              <el-table-column prop="name" label="经销商名称"   align="center" >  </el-table-column>
              <el-table-column prop="num" label="订单量"   align="center" >  </el-table-column>
              <el-table-column prop="price" label="销售额（元）" align="center" ></el-table-column>
              <el-table-column prop="num2" label="会员数" align="center"  ></el-table-column>
              <el-table-column prop="num1" label="会员数" align="center"  ></el-table-column>
            </el-table>
          </div>
        </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,25 +106,26 @@
      <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  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>
        </div>
      </div>
      <div class="change-style" v-if="1==2">
@@ -138,24 +139,42 @@

<script>
import TableLayout from '@/layouts/TableLayout'
import BaseTable from '@/components/base/BaseTable'
import * as echarts from 'echarts'
export default {
  extends: BaseTable,
  components: {
    TableLayout
  },
  data () {
    return {
      tabs2: [{ index: 0, name: '按销量' }, { index: 1, name: '按销售额' } ],
      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: '近1年' }],
      tabs: [{ index: 0, name: '今日' }, { index: 1, name: '近7日' }, { index: 2, name: '近30日' }, { index: 3, name: '近12月' }],
      tabName: '今日',
      tabIndex: 0,
      tabIndex1: 0,
      tabIndex2: 0,
      searchForm:{
        topYear:null,
        topMonth:null,
        topYear2:null,
      searchForm: {
        topYear: null,
        topMonth: null,
        topYear2: null
      },
      topData: {
        num: 0,
        num1: 0,
        price: 0,
        price1: 0,
        dateStrList: [],
        dataList: [],
        dataList2: [],
        cateList: [],
        numList: []
      },
      countData: {
        totalPrice: 1000,
@@ -163,19 +182,99 @@
        totalRefundPrice: 10000,
        totalRefundNum: 100
      },
      dataList1:[],
      dataList2:[],
      orderCorderCount: [10, 10, 20, 10, 40, 10, 30],
      opinionData: ['3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26'],
      dataList1: [],
      dataList2: [],
      dataList4: [],
      dataList3: [],
      myChart0: null,
      myChart1: null
      myChart1: null,
      myChart2: null,
      myChart3: null
    }
  },
  created () {
    this.config({
      module: '工作台数据统计',
      api: '/business/workbench',
      'field.id': 'id',
      'field.main': 'id'
    })
  },
  mounted () {
    this.initCountData()
    this.initTopData()
    this.initShopRankData()
    this.initGoodsRankData()
    this.initIntegralData()
    this.initCouponData()
  },
  methods: {
    initCountData () {
    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
      this.api.shopRankList10({ year: this.searchForm.topYear, month: this.searchForm.topMonth ,type:this.tabIndex1}).then(res => {
        res = res || []
        this.dataList1 = res
      }).finally(() => {
        this.loading2 = false
      })
    },
    initGoodsRankData () {
      this.loading3 = true
      this.api.goodsRankList10({ year: this.searchForm.topYear, month: this.searchForm.topMonth ,type:this.tabIndex2}).then(res => {
        res = res || []
        this.dataList2 = res
      }).finally(() => {
        this.loading3 = false
      })
    },
    initTopData () {
      this.loading1 = true
      this.initTopEcharts()
      this.api.businessData({ dateType: this.tabIndex }).then(res => {
        res = res || {}
        res.num = res.num || 0
        res.num1 = res.num1 || 0
        res.price = res.price || 0
        res.price1 = res.price1 || 0
        res.dateStrList = res.dateStrList || []
        res.datalist2 = res.datalist2 || []
        res.dataList = res.dataList || []
        res.cateList = res.cateList || []
        this.topData = res
        this.renderEchartOption0()
        this.renderEchartOption1()
      }).finally(() => {
        this.loading1 = false
      })
    },
    initTopEcharts () {
      this.myChart0 = echarts.init(this.$refs.orderCount)
      window.addEventListener('resize', () => {
        this.myChart0.resize()
@@ -184,23 +283,56 @@
      window.addEventListener('resize', () => {
        this.myChart1.resize()
      })
      this.renderOrderChange(this.myChart0)
      this.renderOrderChange(this.myChart1)
      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) {
      this.tabName = item.name
      this.tabIndex = item.index
      if (this.loading1) {
        return
      }
      if (item.index !== this.tabIndex) {
        this.tabName = item.name
        this.tabIndex = item.index
        this.initTopData()
      }
    },
    changeTab1 (item) {
      this.tabIndex1 = item.index
      if (this.loading2) {
        return
      }
      if (item.index !== this.tabIndex1) {
        this.tabName = item.name
        this.tabIndex1 = item.index
        this.initShopRankData()
      }
    },
    changeTab2 (item) {
      this.tabIndex2 = item.index
      if (this.loading3) {
        return
      }
      if (item.index !== this.tabIndex2) {
        this.tabName = item.name
        this.tabIndex2 = item.index
        this.initGoodsRankData()
      }
    },
    renderOrderChange (chart) {
      chart.setOption({
    renderEchartOption0 () {
      this.myChart0.setOption({
        tooltip: {
          trigger: 'axis'
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
@@ -210,37 +342,138 @@
        },
        toolbox: {
          feature: {

          }
        },
        legend: {
          data: ['订单量', '销售额(元)']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.opinionData
          data: this.topData.dateStrList || []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '订单',
          type: 'line',
          stack: '总量',
          data: this.orderCorderCount
        }]
        yAxis: [
          {
            type: 'value',
            name: '订单量',
            min: 0
          },
          {
            type: 'value',
            name: '销售额(元)',
            min: 0
          }
        ],
        series: [
          {
            name: '订单量',
            data: this.topData.dataList || [],
            type: 'bar'
          },
          {
            name: '销售额(元)',
            yAxisIndex: 1,
            data: this.topData.dataList2 || [],
            type: 'line'
          }
        ]
      })
    },
    changeCount (page) {
      if (page == 7) {
        this.orderCorderCount = [10, 10, 20, 10, 40, 10, 30]
        this.opinionData = ['3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26']
      } else {
        this.orderCorderCount = [11, 10, 20, 10, 40, 10, 30, 20, 10, 20, 10, 40, 10, 30, 10, 10, 20, 10, 40, 10, 30, 10, 10, 20, 10, 40, 10, 30, 20, 40]
        this.opinionData = ['3.01', '3.02', '3.03', '3.04', '3.05', '3.06', '3.07', '3.08', '3.09', '3.10', '3.11', '3.12', '3.13', '3.14', '3.15', '3.16', '3.17', '3.18', '3.19', '3.20', '3.21', '3.22', '3.23', '3.24', '3.25', '3.26', '3.27', '3.28', '3.28', '3.30']
      }
      // this.orderCorderCount.push(1)
      // this.opinionData.push(1)
      this.renderOrderChange()
    }
    renderEchartOption1 () {
      const series = []
      this.topData.cateList.forEach((item, index) => {
        series.push( {
          name: item.name,
          type: 'bar',
          stack: 'total',
          barWidth: '60%',
          label: {
            // show: true
          },
          data: item.data || []
        })
      })
      this.myChart1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
          }
        },
        legend: {
          data: this.topData.cateList || []
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.topData.dateStrList || []
        },
        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>