经销商管理

doum

11 小时以前 c11bce150d6e702f41ce247a0c62ea03401318f1

 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>
@@ -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>
@@ -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>
@@ -138,13 +138,18 @@

<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 {
      loading1: false,
      loading2: false,
      loading3: 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月' }],
@@ -155,10 +160,18 @@
      searchForm:{
        topYear:null,
        topMonth:null,
        topYear2:null,
        topYear2: null
      },
      topData:{

        num: 0,
        num1: 0,
        price: 0,
        price1: 0,
        dateStrList: [],
        dataList: [],
        dataList2: [],
        cateList: [],
        numList: []
      },
      countData: {
        totalPrice: 1000,
@@ -168,8 +181,6 @@
      },
      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'],
      myChart0: null,
      myChart1: null
    }
@@ -183,10 +194,54 @@
    })
  },
  mounted () {
    this.initCountData()
    this.initTopData()
    this.initShopRankData()
    this.initGoodsRankData()
  },
  methods: {
    initCountData () {
    changeYearMonth(){
      this.initGoodsRankData()
      this.initShopRankData()
    },
    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.renderEchartOption2()
      }).finally(() => {
        this.loading1 = false
      })
    },
    initTopEcharts () {
      this.myChart0 = echarts.init(this.$refs.orderCount)
      window.addEventListener('resize', () => {
        this.myChart0.resize()
@@ -195,23 +250,46 @@
      window.addEventListener('resize', () => {
        this.myChart1.resize()
      })
      this.renderOrderChange(this.myChart0)
      this.renderOrderChange(this.myChart1)
      this.renderEchartOption0()
      this.renderEchartOption2()
    },
    changeTab (item) {
      if (this.loading1) {
        return
      }
      if (item.index !== this.tabIndex) {
      this.tabName = item.name
      this.tabIndex = item.index
        this.initTopData()
      }
    },
    changeTab1 (item) {
      if (this.loading2) {
        return
      }
      if (item.index !== this.tabIndex1) {
        this.tabName = item.name
      this.tabIndex1 = item.index
        this.initShopRankData()
      }
    },
    changeTab2 (item) {
      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%',
@@ -221,23 +299,84 @@
        },
        toolbox: {
          feature: {

          }
        },
        legend: {
          data: ['订单量', '销售额(元)']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.opinionData
          data: this.topData.dateStrList || []
        },
        yAxis: {
          type: 'value'
        yAxis: [
          {
            type: 'value',
            name: '订单量',
            min: 0
        },
        series: [{
          name: '订单',
          type: 'line',
          stack: '总量',
          data: this.orderCorderCount
        }]
          {
            type: 'value',
            name: '销售额(元)',
            min: 0
          }
        ],
        series: [
          {
            name: '订单量',
            data: this.topData.dataList || [],
            type: 'bar'
          },
          {
            name: '销售额(元)',
            yAxisIndex: 1,
            data: this.topData.dataList2 || [],
            type: 'line'
          }
        ]
      })
    },
    renderEchartOption2 () {
      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
      })
    }
  }