ch-tgr/src/views/Merchant/Statistics.vue

<template>
  <BasePage>
    <div class="statistics">
      <div class="top box box-align-center">
        <span>
          截止{{ total.endTimes }}
        </span>
        <p class="refresh r" @click="initTotal">刷新<img src="/img/refresh.png"></p>
      </div>

      <div class="count-box" v-if="total">
        <div class="item">
          <div>
            <span>今日营业额（元）</span>
            <b>{{ total.todayyingyee?.toFixed(2) }}</b>
          </div>
          <p>{{ total.yesterdayyingyee && total.yesterdayyingyee != 0
            ? ((total.todayyingyee - total.yesterdayyingyee) / total.yesterdayyingyee * 100).toFixed(2)
            : (total.todayyingyee > 0 ? '100.00' : '0.00') }}%<span>较昨日</span></p>
        </div>
        <div class="item">
          <div>
            <span>今日应收（元）</span>
            <b>{{ total.todayyingshou?.toFixed(2) }}</b>
          </div>
          <p>{{ total.yesterdayingshou && total.yesterdayingshou != 0
            ? ((total.todayyingshou - total.yesterdayingshou) / total.yesterdayingshou * 100).toFixed(2)
            : (total.todayyingshou > 0 ? '100.00' : '0.00') }}%<span>较昨日</span></p>
        </div>
        <div class="item">
          <div>
            <span>今日订单数</span>
            <b>{{ total.todaydingdanshu }}</b>
          </div>
          <p>{{ total.yesterdaydingdanshu && total.yesterdaydingdanshu != 0
            ? ((total.todaydingdanshu - total.yesterdaydingdanshu) / total.yesterdaydingdanshu * 100).toFixed(2)
            : (total.todaydingdanshu > 0 ? '100.00' : '0.00') }}%<span>较昨日</span></p>
        </div>
        <div class="item">
          <div>
            <span>今日惠利金额（元）</span>
            <b>{{ total.todayyouhui?.toFixed(2) }}</b>
          </div>
          <p>{{ total.yesterdayyouhui && total.yesterdayyouhui != 0
            ? ((total.todayyouhui - total.yesterdayyouhui) / total.yesterdayyouhui * 100).toFixed(2)
            : (total.todayyouhui > 0 ? '100.00' : '0.00') }}%<span>较昨日</span></p>
        </div>
      </div>

      <div class="report">
        <div class="t">
          <b>经营统计报表</b>
          <div class="box box-align-center r" v-if="active === 0" @click="showDate = true">
            <img class="calendar" src="/img/calendar.png">
            <span>
              {{ currentDate[0] }}-{{ currentDate[1] }}-{{ currentDate[2] }}
            </span>
            <img class="down" src="/img/down.png">
          </div>

          <div class="box box-align-center r" v-if="active == 1" @click="showMonth = true">
            <img class="calendar" src="/img/calendar.png">
            <span>
              {{ currentMonth[0] }}-{{ currentMonth[1] }}
            </span>
            <img class="down" src="/img/down.png">
          </div>
        </div>

        <van-tabs type="card" v-model:active="active" line-height="1.333vw" line-width="8vw" color="#e4bb4e"
          title-active-color="#fff" title-inactive-color="#222222" @change="init">
          <van-tab title="日报"></van-tab>
          <van-tab title="月报"></van-tab>
        </van-tabs>

        <div class="datecount">
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}营业额（元）</span>
            <b>{{ chartData.yingyee?.toFixed(2) }}</b>
          </div>
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}抵扣积分</span>
            <b>{{ chartData.yingshou?.toFixed(2) }}</b>
          </div>
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}订单数</span>
            <b>{{ chartData.dingdanshu }}</b>
          </div>
          <div class="dc-item">
            <span>{{ active == 0 ? '今日' : '本月' }}收入（元）</span>
            <b>{{ chartData.youhui?.toFixed(2) }}</b>
          </div>
        </div>

        <b v-if="active == 0">日交易趋势图</b>
        <b v-if="active == 1">月交易趋势图</b>
        <div class="Chart" ref="chartRef" style="width: 82vw;height: 50vw;"></div>

      </div>

      <van-popup v-model:show="showMonth" position="bottom">
        <van-date-picker v-model="currentMonth" title="选择年月" :columns-type="['year', 'month']" @confirm="init"
          @cancel="showDate = false" />
      </van-popup>

      <van-popup v-model:show="showDate" position="bottom">
        <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate" :max-date="maxDate" @confirm="init" />
      </van-popup>


    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'Statistics',
  data() {
    return {
      chartData: {
        yingyee: 0,
        yingshou: 0,
        dingdanshu: 0,
        youhui: 0,
        orderchart: []
      },
      total: {
        todayyingyee: 0,
        yesterdayyingyee: 0,
        todayyingshou: 0,
        yesterdayingshou: 0,
        todaydingdanshu: 0,
        yesterdaydingdanshu: 0,
        todayyouhui: 0,
        yesterdayyouhui: 0,
        endTimes: ''
      },
      showDate: false,
      active: 0,
      showMonth: false,
      currentMonth: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`, `${new Date().getDate()}`],
      chart: null
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    initTotal() {
      this.total.endTimes = new Date().toLocaleString('zh-CN', { hour12: false });
    },
    init() {
      this.showMonth = false;
      this.showDate = false;
      this.getCount();
      this.initTotal()
      this.initChart();
    },
    initChart() {
      const params = this.active == 0
        ? { year: this.currentDate[0], month: this.currentDate[1], day: this.currentDate[2] }
        : { year: this.currentMonth[0], month: this.currentMonth[1] };
      this.$get('/v1/client/DShopsClient/statisticschart', params).then(res => {
        this.chartData = res.data;
        this.$nextTick(() => {
          this.renderChart();
        })
      })
    },
    renderChart() {
      if (!this.chart) {
        this.chart = window.echarts.init(this.$refs.chartRef);
      }
      const dates = this.chartData.orderchart.map(item => item.adddate?.slice(5));
      const values = this.chartData.orderchart.map(item => item.ordermoney);
      this.chart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '12%',
          right: '8%',
          bottom: '25%',
          top: '20%'
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLabel: {
            fontSize: 10,
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 10,
            color: '#666'
          }
        },
        series: [{
          data: values,
          type: 'line',
          smooth: true,
          lineStyle: { color: '#e4bb4e', width: 2 },
          itemStyle: { color: '#e4bb4e' },
          areaStyle: {
            color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(228,187,78,0.3)' },
              { offset: 1, color: 'rgba(228,187,78,0)' }
            ])
          }
        }]
      });
    },
    getCount() {
      this.$get('/v1/client/DShopsClient/statistics').then(res => {
        this.total = res.data
        this.total.endTimes = new Date().toLocaleString('zh-CN', { hour12: false });
      })
    }
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
}
</script>