aslan-admin/src/views/dashboard/components/user-daily-currency-gold-top/index.vue

<template>
  <div v-loading="loading" class="dily-register-user" :data-language="language">
    <el-date-picker
      v-model="dateNumber"
      style="margin-bottom: 10px;"
      type="date"
      :placeholder="$t('pages.dashboard.userGoldTop.datePlaceholder')"
      value-format="yyyyMMdd"
      size="mini"
      :picker-options="pickerOptions"
      :clearable="false"
      @change="changeDateNumber"
    />
    <div v-for="(item, index) in list" :key="index">
      <el-card v-if="sysOriginPlatforms.includes(item.sysOrigin)" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ $t('pages.dashboard.userGoldTop.title', { sysOriginName: item.sysOriginName }) }}</span>
        </div>
        <div class="content">
          <div style="font-size: 12px;color: #666;margin-bottom: 10px;">{{ $t('pages.dashboard.userGoldTop.description') }}</div>
          <el-table
            :data="item.items"
            element-loading-text="Loading"
            fit
            highlight-current-row
          >
            <el-table-column label="No" width="50" align="center">
              <template slot-scope="scope">{{ scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column :label="$t('pages.dashboard.userGoldTop.user')" prop="roomProfile.roomName" align="center" min-width="200">
              <template slot-scope="scope">
                <user-table-exhibit :user-profile="scope.row.userProfile" :query-details="true" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('pages.dashboard.userGoldTop.income')" width="100" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.groupTypeQuantity['0'] || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('pages.dashboard.userGoldTop.expenditure')" width="100" align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.groupTypeQuantity['1'] || 0 }}</div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('pages.dashboard.userGoldTop.total')" prop="quantity" align="center" width="100" />
            <el-table-column fixed="right" :label="$t('pages.dashboard.userGoldTop.action')" align="center" width="80">
              <template slot-scope="scope">
                <el-button type="text" @click.native="clickQueryDetails(scope.row)">{{ $t('pages.dashboard.userGoldTop.details') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>

    <div class="user-daily-currency-gold-top-drawer">
      <el-drawer
        :title="$t('pages.dashboard.userGoldTop.details')"
        :before-close="() => queryDetailsVisible = false"
        :visible="queryDetailsVisible"
        :close-on-press-escape="false"
        :wrapper-closable="false"
        :modal-append-to-body="true"
        :append-to-body="true"
        custom-class="drawer-auto-layout"
      >
        <div class="bar-graph-charts" style="padding: 0 10px">
          <bar-graph-charts
            ref="lineGraphCharts"
            :key="(queryDetailsRow ? queryDetailsRow.userId : 'tmp') + '-' + language"
            :charts-data="queryDetailsRow.items"
            :height="(queryDetailsRow.items ? queryDetailsRow.items.length > 5 ? queryDetailsRow.items.length * 40 : queryDetailsRow.items.length * 80 : 300) + 'px'"
          />
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { listDailyUserGoldTop } from '@/api/statistics'
import BarGraphCharts from './bar-graph-charts'
import { currencyOrigins } from '@/constant/type'
import { mapGetters } from 'vuex'
import { formatDate, beforeDateObject } from '@/utils'

export default {
  name: 'DilyRegisterUser',
  components: { BarGraphCharts },
  data() {
    return {
      queryDetailsVisible: false,
      pickerOptions: {
        disabledDate(date) {
          return date.getTime() > beforeDateObject(1).getTime()
        }
      },
      dateNumber: formatDate(beforeDateObject(new Date().getHours() > 8 ? 1 : 2), 'yyyyMMdd'),
      loading: false,
      list: [],
      queryDetailsRow: {},
      selectOrigin: currencyOrigins[0].value,
      selectOriginName: currencyOrigins[0].name
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatformAlls', 'language']),
    sysOriginPlatforms() {
      if (!this.permissionsSysOriginPlatformAlls || this.permissionsSysOriginPlatformAlls.length <= 0) {
        return []
      }
      return this.permissionsSysOriginPlatformAlls.map(item => item.value)
    }
  },
  created() {
    this.loadOrigin()
  },
  methods: {
    loadOrigin() {
      this.loading = true
      listDailyUserGoldTop(this.dateNumber).then(res => {
        this.loading = false
        const { body } = res
        const list = body || []
        this.list = list.filter(item => !item.sysOrigin || this.permissionsSysOriginPlatformAlls.some(sys => sys.value === item.sysOrigin))
      }).catch(() => {
        this.loading = false
      })
    },
    querySearch(queryString, cb) {
      const restaurants = currencyOrigins
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      cb(results)
    },
    createFilter(queryString) {
      return restaurant => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0 ||
          restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
      }
    },
    handleSelect(item) {
      const selectedItem = item || currencyOrigins[0]
      this.selectOrigin = selectedItem.value
      this.selectOriginName = selectedItem.name
      this.loadOrigin()
    },
    clickAnalyze() {
      this.$router.push('/system/manager/tools/manager/gold-analyze')
    },
    changeDateNumber() {
      this.loadOrigin()
    },
    clickQueryDetails(row) {
      this.queryDetailsRow = row
      this.queryDetailsVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 10px;
  padding: 10px;

  .card-col {
    margin-bottom: 10px;
  }
}

.register-logout-count {
  .date {
    font-weight: bold;
    line-height: 30px;
  }
}
</style>