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

<template>
  <div class="pa-3 white fullscreen border-box">
    <StatisticsList ref="first" :apis="firstApis" :search-items="firstSearchConfig"></StatisticsList>
  </div>
</template>

<script>
import StatisticsList from '@/components/StatisticsList'
import {
  getPayrollStatistics
} from '@/api/salary'
import {
  dateFormat
} from '@/utils/date'
export default {
  name: 'welfareAnalysis',
  components: {
    StatisticsList
  },
  data () {
    return {
      firstSearchConfig: [
        {
          label: '月份',
          prop: 'month',
          type: 'datePicker',
          options: {
            clearable: false,
            type: 'month',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM',
            placeholder: '选择月份'
          }
        },
        {
          label: '维度',
          prop: 'type',
          type: 'select',
          options: {
            clearable: false,
            items: [
              { label: '通讯补贴', value: 2 },
              { label: '午餐费补贴', value: 3 }
            ]
          }
        },
        {
          label: '类型',
          prop: 'avge',
          type: 'select',
          options: {
            clearable: false,
            items: [
              { label: '总计', value: false },
              { label: '平均值', value: true }
            ]
          }
        }
      ],
      firstApis: [
        (query) => {
          return new Promise((resolve, reject) => {
            getPayrollStatistics(query).then(resolve).catch(reject)
          })
        }
      ]
    }
  },
  mounted () {
    this.$refs.first.onSetValue({
      month: dateFormat('YYYY-mm', new Date()),
      type: 2,
      avge: false
    })
    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()
        })
      })
    })
  }
}
</script>

<style lang="scss" scoped>

</style>