remuneration/src/views/dataChart/claimStatistics/index.vue

<template>
  <div class="pa-3 white fullscreen border-box">
    <el-tabs v-model="activeName" class="fullscreen">
      <el-tab-pane label="分布图" name="first" class="fullscreen">
        <StatisticsList ref="first" :apis="firstApis" :search-items="firstSearchConfig"></StatisticsList>
      </el-tab-pane>
      <el-tab-pane label="趋势图" name="second" class="fullscreen">
        <StatisticsList ref="second" :apis="apis" :search-items="searchConfig" :value-fn="valueFn"></StatisticsList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import StatisticsList from '@/components/StatisticsList'
import { getCustomerClaimStatistics, getSalaryProductStatistics } from '@/api/salary'
import { dateFormat } from '@/utils/date'
export default {
  name: 'claimStatistics',
  components: {
    StatisticsList
  },
  data () {
    return {
      firstApis: [
        (query) => {
          return new Promise((resolve, reject) => {
            getCustomerClaimStatistics(query).then(resolve).catch(reject)
          })
        }
      ],
      firstSearchConfig: [
        {
          label: '月份',
          prop: 'month',
          type: 'datePicker',
          options: {
            placeholder: '请选择月份',
            clearable: false,
            type: 'month',
            valueFormat: 'yyyy-MM',
            format: 'yyyy 年 MM 月'
          }
        }
      ],
      apis: [
        (query) => {
          return new Promise((resolve, reject) => {
            const { month } = query
            const param = {}
            if (month && month.length) {
              Object.assign(param, {
                startDate: month[0],
                endDate: month[1]
              })
            }
            getSalaryProductStatistics(param).then(resolve).catch(reject)
          })
        }
      ],
      searchConfig: [{
        label: '时间范围',
        type: 'datePicker',
        prop: 'month',
        options: {
          rangeSeparator: '至',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          valueFormat: 'yyyy-MM-dd',
          type: 'daterange'
        }
      }],
      activeName: 'first'
    }
  },
  mounted () {
    this.$refs.first.onSetValue({
      month: dateFormat('YYYY-mm', new Date())
    })
    this.$refs.first.onInit(items => {
      return new Promise((resolve, reject) => {
        items.forEach(ele => {
          ele.option.series.forEach((item) => {
            Object.assign(item, {
              label: {
                show: true,
                formatter: (v) => {
                  return ` ${v.name}：${v.value} 元`
                }
              },
              breadcrumb: {
                show: true,
                left: 'left',
                top: 'top'
              }
            })
          })
        })
        this.$nextTick(() => {
          const clientHeight = this.$refs.first.$refs.main.clientHeight
          items.forEach(ele => {
            ele.height = clientHeight - 61 - 40 - 2
          })
          resolve()
        })
      })
    })

    this.$refs.second.onInit()
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__content {
  height: calc(100% - 55px);
  overflow: visible;
}
</style>