electripper-v2-ui/src/views/bst/index/components/Stat.vue

<template>
  <el-row :gutter="10">
    <el-col :span="span" class="stat-col">
      <statistics-card
        :value="stat.order.payAmount - stat.orderRefund.amount"
        label="订单实收"
        icon="el-icon-bank-card"
        start-color="#FF6F61"
        end-color="#FF9F80"
        sub-label="今日订单实收"
        :sub-value="todayStat.order.payAmount - todayStat.orderRefund.amount"
        :precision="2"
      />
    </el-col>
    <el-col :span="span" class="stat-col">
      <statistics-card
        :value="stat.order.count"
        label="订单数量"
        icon="el-icon-document"
        start-color="#FF6F61"
        end-color="#FF9F80"
        sub-label="今日订单数量"
        :sub-value="todayStat.order.count"
      />
    </el-col>
    <el-col :span="span" class="stat-col">
      <statistics-card
        :value="stat.area.count"
        label="总收入"
        icon="el-icon-wallet"
        start-color="#69C0FF"
        end-color="#40A9FF"
        sub-label="今日收入"
        :sub-value="stat.user.balance"
        :precision="2"
      />
    </el-col>
    <el-col :span="span" class="stat-col" v-if="isSysAdmin()">
      <statistics-card
        :value="stat.user.balance"
        label="商户余额"
        icon="el-icon-wallet"
        start-color="#69C0FF"
        end-color="#40A9FF"
        sub-label="待结算金额"
        :sub-value="stat.user.balance"
        :show-value-change="false"
        :precision="2"
      />
    </el-col>
    <el-col :span="span" class="stat-col">
      <statistics-card
        :value="stat.device.count"
        label="车辆总数"
        icon="el-icon-bicycle"
        start-color="#73D13D"
        end-color="#A0D911"
        sub-label="车型总数"
        :sub-value="stat.model.count"
        :show-value-change="false"
      />
    </el-col>
    <el-col :span="span" class="stat-col" v-if="isSysAdmin()">
      <statistics-card
        :value="stat.area.count"
        label="运营区数量"
        icon="el-icon-map-location"
        start-color="#FFC069"
        end-color="#FF9C6E"
        sub-label="店铺数量"
        :sub-value="stat.user.balance"
        :show-value-change="false"
      />
    </el-col>
    <el-col :span="span" class="stat-col">
      <statistics-card
        :value="stat.user.count"
        label="用户总数"
        icon="el-icon-user"
        start-color="#9254DE"
        end-color="#F759AB"
        sub-label="今日新增"
        :sub-value="todayStat.user.count"
      />
    </el-col>
    <el-col :span="span" class="stat-col">
      <statistics-card
        :value="stat.area.count"
        label="累计提现"
        icon="el-icon-money"
        start-color="#FFC069"
        end-color="#FF9C6E"
        sub-label="审核中"
        :sub-value="stat.user.balance"
        :show-value-change="false"
        :precision="2"
      />
    </el-col>
    <el-col :span="span" class="stat-col" v-if="!isSysAdmin()">
      <statistics-card
        :value="stat.area.count"
        label="加盟商"
        icon="el-icon-money"
        start-color="#FFC069"
        end-color="#FF9C6E"
        sub-label="合伙人"
        :sub-value="stat.user.balance"
        :show-value-change="false"
      />
    </el-col>
    <el-col :span="span" class="stat-col" v-if="!isSysAdmin()">
      <statistics-card
        :value="stat.area.count"
        label="用户投诉"
        icon="el-icon-warning"
        start-color="#FFC069"
        end-color="#FF9C6E"
        sub-label="故障反馈"
        :sub-value="stat.user.balance"
        :show-value-change="false"
      />
    </el-col>
  </el-row>
</template>

<script>
import StatisticsCard from '@/components/StatisticsCard'
export default {
  name: 'Stat',
  components: {
    StatisticsCard
  },
  props: {
    stat: {
      type: Object,
      required: true
    },
    todayStat: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      span: 6
    }
  },
}
</script>

<style lang="scss" scoped>
.stat-col {
  margin-bottom: 10px;
}
</style>