electripper-v2-ui/src/views/bst/index/MchIndex.vue

<template>
  <div style="min-height: 800px" v-loading="loading">
    <el-row :gutter="gutter" v-if="stat">
      <el-col :sm="24" :md="18">
        
        <el-row type="flex" justify="space-between">
          <div class="title-1">
            <i class="el-icon-s-data"></i>
            运营统计
            <el-select v-model="areaId" @change="onChangeArea" placeholder="请选择运营区" clearable>
              <el-option v-for="item in areaList" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
          </div> 
          <div class="title-1" v-if="isSysAdmin()" @click="$emit('change', 'admin')">
            平台统计
            <i class="el-icon-arrow-right"></i>
          </div> 
        </el-row>

        <!-- 统计信息 -->
        <mch-stat :stat="stat" :today-stat="todayStat" :mine-stat="mineStat" :today-mine-stat="todayMineStat" />

        <!-- 设备统计信息 -->
        <device-stat :stat="stat"/>

        <el-row :gutter="gutter" style="margin-top:12px">
          <el-col :sm="24" :md="18">
            <el-card header="每日流水统计" shadow="never">
              <order-daily-stat ref="dailyStat" :query="areaQuery"/>
            </el-card>
          </el-col>
          <el-col :sm="24" :md="6">
            <order-stat :stat="stat"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :sm="24" :md="6">
        <div class="title-1">
          <i class="el-icon-user"></i>
          我的
        </div>
        <balance-panel v-if="userInfo" :balance="userInfo.balance" :waitBonus="userStat.bonus.waitDivideAmount" :totalWithdraw="userStat.withdraw.successAmount"/>

        <!-- 待办事项 -->
        <todo-list :stat="stat"/>

      </el-col>

    </el-row>

  </div>
</template>

<script>
import { getStat } from '@/api/dashboard/dashboard'
import { StatKeys } from '@/utils/enums'
import MchStat from '@/views/bst/index/components/MchStat'
import DeviceStat from '@/views/bst/index/components/DeviceStat'
import TodoList from '@/views/bst/index/components/TodoList'
import { getLastDateStr } from '@/utils'
import OrderDailyStat from '@/views/bst/index/components/OrderDailyStat'
import { getInfo } from '@/api/login'
import { listSimpleArea } from '@/api/bst/area'
import BalancePanel from '@/views/bst/index/components/BalancePanel'
import OrderStat from '@/views/bst/index/components/OrderStat'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  components: {
    MchStat,
    DeviceStat,
    TodoList,
    OrderDailyStat,
    BalancePanel,
    OrderStat,
  },
  data() {
    return {
      span: 6,
      gutter: 12,
      loading: false,
      stat: null,
      todayStat: null,
      userInfo: null,
      areaId: null,
      areaList: [],
    }
  },
  computed: {
    ...mapGetters(['userId']),
    areaQuery() {
      return {
        areaId: this.areaId,
        bonusUserId: this.userId,
      }
    }
  },
  created() {
    this.getUserInfo();
    this.getAreaList();
  },
  methods: {
    getAreaList() {
      listSimpleArea().then(res => {
        this.areaList = res.data;
        if (this.areaList.length > 0) {
          this.areaId = this.areaList[0].id;
          this.onChangeArea();
        }
      })
    },
    onChangeArea() {
      this.getStat();
      this.getTodayStat();
      this.$nextTick(() => {
        if (this.$refs.dailyStat) {
          this.$refs.dailyStat.getDailyAmount();
        }
      })
    },
    getUserInfo() {
      getInfo().then(res => {
        this.userInfo = res.user;
        this.userStat = res.stat;
      })
    },
    // 获取运营统计信息
    getStat() {
      this.loading = true;
      getStat({
        areaId: this.areaId,
        bonusUserId: this.userId,
        keys: [
          StatKeys.ORDER_COUNT,
          StatKeys.ORDER_PAY_AMOUNT,
          StatKeys.ORDER_REFUND_AMOUNT,
          StatKeys.ORDER_STATUS_COUNT,
          StatKeys.DEVICE_COUNT,
          StatKeys.DEVICE_STATUS_COUNT,
          StatKeys.DEVICE_ONLINE_STATUS_COUNT,
          StatKeys.AREA_JOIN_COUNT,
          StatKeys.AREA_JOIN_PARTNER_COUNT,
          StatKeys.BONUS_AMOUNT,
          StatKeys.BONUS_REFUND_AMOUNT,
        ]
      }).then(res => {
        this.stat = res.data
      }).finally(() => {
        this.loading = false;
      })
    },
    // 获取今日运营统计信息
    getTodayStat() {
      getStat({
        areaId: this.areaId,
        bonusUserId: this.userId,
        keys:[
          StatKeys.ORDER_COUNT,
          StatKeys.ORDER_PAY_AMOUNT,
          StatKeys.ORDER_REFUND_AMOUNT,
          StatKeys.DEVICE_COUNT,
          StatKeys.BONUS_AMOUNT,
          StatKeys.BONUS_REFUND_AMOUNT,
        ],
        dateRange: [
          getLastDateStr(0),
          getLastDateStr(0)
        ]
      }).then(res => {
        this.todayStat = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title-1 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #409EFF;
  line-height: 36px;
  margin-right: 12px;
  width: fit-content;
  display: inline-block;
  cursor: pointer;
  transition: color 0.3s;
  &:hover {
    color: #80bfff;
  }
}
</style>