water_dealer-agent/src/views/home/components/Count.vue

<template>
  <a-row>
    <a-row :gutter="24">
      <!-- 分公司库存 -->
      <a-col
        v-if="info.middle"
        :sm="24"
        :md="12"
        :xl="12"
        :xxl="12"
        :style="{ marginBottom: '10px' }"
      >
        <chart-card :loading="loading" title="分公司总库存(瓶)" :total="info.middle.total">
          <template slot="footer">
            <!-- <trend flag="up"> <span slot="term">{{ $t('线上库存') }}</span>{{ info.middle.online_stock }}瓶</trend> -->
            <trend flag="down">
              <span slot="term">{{ $t('线下库存') }}</span>{{ info.middle.offline_stock }}瓶
            </trend>
          </template>
        </chart-card>
      </a-col>
      <!-- 经销商总库存 -->
      <a-col
        :sm="24"
        :md="12"
        :xl="12"
        :xxl="12"
        :style="{ marginBottom: '10px' }"
        v-if="info.agent"
      >
        <chart-card :loading="loading" title="经销商总库存(瓶)" :total="info.agent.stock | NumberFormat">
          <a-tooltip title="经销商总库存" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :data="info.agent.line" />
          </div>
          <template slot="footer">{{ $t('经销商总数') }}<span style="margin-right:20px;"> {{ info.agent.users | NumberFormat }} 人</span></template>
        </chart-card>
      </a-col>
    </a-row>

    <a-col :span="24" >
      <a-card :bordered="false" title="用户数据">
        <template #extra>
          <a-dropdown v-model="visible">
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">{{ searchs[typeIndex].title }} <a-icon type="down" /></a>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item
                v-for="item in searchs"
                :key="item.key">
                <a href="javascript:;">{{ item.title }}</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
        <a-row v-if="info.users">
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="用户总数量(人)" :value="''+info.users.all" :bordered="true" />
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增代理数(人)" :value="''+info.users.new_agents" :bordered="true" />
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增创客数(人)" :value="''+info.users.new_makers" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增VIP数(人)" :value="''+info.users.new_vips" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="新增游客数量(人)" :value="''+info.users.new_visitors"/>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="24" v-if="info.sales_quantity">
      <a-card :bordered="false" title="累计销售数量">
        <a-row>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="累计销售数量(瓶)" :value="''+info.sales_quantity.online_all" :bordered="true" />
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线上销售数量(瓶)" :value="''+info.sales_quantity.online_retail" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线下出货数量(瓶)" :value="''+info.sales_quantity.offline" />
          </a-col>
        </a-row>
      </a-card>
    </a-col>
    <a-col :span="24" v-if="info.sales_amount">
      <a-card :bordered="false" title="售卖数据管理">
        <a-row>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="售卖数据管理总数(元)" :value="''+info.sales_amount.online_agent_all" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线上销售金额(元)" :value="''+info.sales_amount.online_sell" :bordered="true"/>
          </a-col>
          <a-col :sm="24" :md="12" :xl="8" :xxl="8" class="mt20">
            <info title="线下出货金额总和(元)" :value="''+info.sales_amount.offline_sell" />
          </a-col>
        </a-row>
      </a-card>
    </a-col>

    <!-- <a-col :span="24" v-if="info.b_recheck">
      <a-card :bordered="false" title="复审业务操作">
        <a-row>
          <a-col :sm="8" :xs="24">
            <info title="本周复审订单" :value="info.b_recheck.diff+''" :bordered="true" />
          </a-col>
          <a-col :sm="8" :xs="24">
            <info title="本周通过数" :value="info.b_recheck.diff+''" :bordered="true" />
          </a-col>
          <a-col :sm="8" :xs="24">
            <info title="本周补差价数" :value="info.b_recheck.diff+''" />
          </a-col>
        </a-row>
      </a-card>
    </a-col> -->

  </a-row>
</template>

<script>
  import Info from '@/views/home/components/Info'
  import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea
} from '@/components'

export default {
    components: {
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea,
    Info
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  name: 'Count',
  data: () => ({
    visible: false,
    loading: false,
    type: 'today',
    typeIndex: 0,
    searchs: [
      { key: 'today', title: '本日' },
      { key: 'week', title: '本周' },
      { key: 'month', title: '本月' },
      { key: 'year', title: '本年' }
    ]
  }),
  methods: {
    handleMenuClick (e) {
      this.typeIndex = this.searchs.findIndex(item => item.key === e.key)
      this.visible = false
      this.type = e.key
      this.eventBus.$emit('updateHomeDataByType', { type: e.key })
    }
  }
}
</script>

<style lang='less' scoped>
@import '../Index.less';
.mt20{
  margin-top: 30px;
}
</style>