统计分析

src/components/AutoComponents/MSearch/index.vue

@@ -125,7 +125,7 @@ export default {
     },
     onReset () {
       this.$refs.form.resetFields()
-      this.$emit('search', this.query)
+      this.$emit('search', this.query, true)
     }
   }
 }

src/components/StatisticsList/StatisticsListChart.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <m-empty v-show="!option.series || !option.series.length"></m-empty>
+    <e-charts v-show="option.series && option.series.length" ref="chart" :style="`height: ${height}px;`"></e-charts>
+    <el-drawer
+      :visible.sync="drawer"
+      direction="rtl"
+      :show-close="false"
+      :modal-append-to-body="false"
+      :modal="false"
+      size="70%"
+      :withHeader="false"
+      style="position: absolute;"
+      v-loading="loading"
+    >
+      <div style="width: 100%; height: 100%; padding: 20px;">
+        <e-charts ref="drawerChart" :style="`height: ${height}px;`"></e-charts>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StatisticsListChart',
+  props: {
+    height: {
+      type: [Number, String],
+      default: 400
+    },
+    option: {
+      type: Object,
+      default: () => ({})
+    },
+    drillFn: Function
+  },
+  data () {
+    return {
+      drawer: false,
+      loading: false
+    }
+  },
+  watch: {
+    option: {
+      handler (val) {
+        if (this.chart) {
+          this.chart.setOption(val, true) // true 表示不合并配置
+        }
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.chart = this.$refs.chart.onInit()
+    if (Object.keys(this.option).length) {
+      this.chart.setOption(this.option)
+    }
+    this.chart.on('click', this.onInit)
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.off('click', this.onInit)
+  },
+  methods: {
+    async onInit (e) {
+      this.$emit('click', e)
+      if (!this.drillFn) {
+        return
+      }
+      this.drawer = true
+      this.loading = true
+      try {
+        const { data } = await this.drillFn(e)
+        if (!this.drawerChart) {
+          this.drawerChart = this.$refs.drawerChart.onInit()
+        }
+        this.drawerChart.setOption(data)
+      } catch (error) {
+        this.$message.error(error)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/StatisticsList/index.vue

@@ -1,31 +1,49 @@
 <template>
-  <div class="pa-3 white content" ref="content">
+  <div class="white content" ref="content">
     <div ref="header" class="content-header">
       <m-search v-if="searchItems.length" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
       <div>
         <el-tag
-          v-for="item in items"
+          v-for="(item, index) in items"
           :key="item.title"
           type="orange"
           class="mr-3 mb-3 point"
+          @click="onJump(`${generateUUID}_chart_${index}`)"
         >
           {{ item.title }}
         </el-tag>
       </div>
     </div>
-    <div ref="main" class="content-main">
-      <m-card shadow="never" v-for="item in items" :key="item.title" class="mb-3">
+    <div ref="main" class="content-main" v-loading="loading">
+      <m-card
+        shadow="never"
+        v-for="(item, index) in items"
+        :key="item.title"
+        :class="{ 'mb-3': index !== items.length - 1 }"
+        :id="`${generateUUID}_chart_${index}`"
+        :bodyStyle="{ position: 'relative' }"
+      >
         <template #header>
           {{ item.title }}
         </template>
+        <StatisticsListChart
+          :option="item.option"
+          :height="item.height || 400"
+          :drillFn="item.drillFn"
+        ></StatisticsListChart>
       </m-card>
     </div>
   </div>
 </template>
 
 <script>
+import {
+  generateUUID
+} from '@/utils'
+import StatisticsListChart from './StatisticsListChart.vue'
 export default {
   name: 'StatisticsList',
+  components: { StatisticsListChart },
   props: {
     apis: {
       type: Array,
@@ -38,46 +56,62 @@ export default {
   },
   data () {
     return {
+      loading: false,
+      generateUUID: generateUUID(),
       searchValues: {},
-      items: [
-        {
-          title: '统计分析1',
-          desc: '统计分析1描述'
-        },
-        {
-          title: '统计分析2',
-          desc: '统计分析2描述'
-        },
-        {
-          title: '统计分析3',
-          desc: '统计分析3描述'
-        },
-        {
-          title: '统计分析4',
-          desc: '统计分析4描述'
-        },
-        {
-          title: '统计分析1',
-          desc: '统计分析1描述'
-        },
-        {
-          title: '统计分析2',
-          desc: '统计分析2描述'
-        },
-        {
-          title: '统计分析3',
-          desc: '统计分析3描述'
-        },
-        {
-          title: '统计分析4',
-          desc: '统计分析4描述'
-        }
-      ]
+      items: [],
+      callback: null,
+      defaultValue: {}
     }
   },
   methods: {
-    onSearch () {
+    onInit (callback = () => Promise.resolve()) {
+      this.callback = callback
+      this.onDraw()
+    },
+    async onDraw () {
+      let i = 0
+      this.items = []
+      this.loading = true
 
+      while (i < this.apis.length) {
+        const index = i
+        try {
+          const { data } = await this.apis[index](this.searchValues)
+          const { title, ...option } = data
+          this.items.push({
+            title: title.text,
+            option,
+            height: undefined
+          })
+          this.callback(this.items)
+        } catch (error) {
+          this.$message.error(error)
+        } finally {
+          i++
+        }
+      }
+      // 移除items中多余的项
+      // this.items = this.items.slice(0, i)
+      this.loading = false
+    },
+    onSetValue (val) {
+      this.searchValues = val
+      this.defaultValue = { ...val }
+    },
+    onJump (id) {
+      const selector = document.getElementById(id)
+      if (!selector) return
+      this.$refs.main.scrollTo({
+        top: selector.offsetTop,
+        behavior: 'smooth'
+      })
+    },
+    onSearch (val, reset) {
+      if (reset) {
+        this.searchValues = { ...this.defaultValue }
+      }
+      this.onDraw()
     }
   }
 }
@@ -96,8 +130,9 @@ export default {
   // }
   &-main {
     flex-grow: 1;
-  min-height: 0; /* 关键：允许内容压缩 */
-  overflow: auto;
+    min-height: 0; /* 关键：允许内容压缩 */
+    overflow: auto;
+    position: relative;
   }
 }
 .point {

src/utils/request.js

@@ -61,7 +61,7 @@ service.interceptors.response.use(
     }
 
     // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
-    if ([50008, 50012, 50014, 402000, 401].includes(res.code)) {
+    if ([50008, 50012, 50014, 50015, 402000, 401].includes(res.code)) {
       // Vue.prototype.$message.error('登陆过期，请重新登陆')
       const str = '登陆过期，请重新登陆'
       try {

src/views/dataChart/accumulatePointsStatistics/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <AnalysisPage class="white pa-3" :search-api="getAccumulatePointStatisticsSummary" :drill-init="drillInit"></AnalysisPage>
+  <div class="pa-3 white fullscreen border-box">
+    <StatisticsList ref="second" :apis="apis" :search-items="searchConfig"></StatisticsList>
+  </div>
 </template>
 
 <script>
@@ -7,19 +9,70 @@ import {
   getAccumulatePointStatisticsSummary,
   getAccumulatePointStatisticsTop
 } from '@/api/accumulatePoint'
-import AnalysisPage from '@/components/Analysis'
+import StatisticsList from '@/components/StatisticsList'
+import { mapGetters } from 'vuex'
 export default {
   name: 'accumulatePointsStatistics',
   components: {
-    AnalysisPage
+    StatisticsList
   },
   data () {
     return {
-      getAccumulatePointStatisticsSummary
+      apis: [
+        (query) => {
+          return new Promise((resolve, reject) => {
+            getAccumulatePointStatisticsSummary({ avge: false, ...query }).then(resolve).catch(reject)
+          })
+        },
+        (query) => {
+          return new Promise((resolve, reject) => {
+            getAccumulatePointStatisticsSummary({ avge: true, ...query }).then(resolve).catch(reject)
+          })
+        }
+      ]
     }
   },
+  computed: {
+    ...mapGetters(['organizationTree']),
+    searchConfig () {
+      return [
+        {
+          label: '上级机构',
+          type: 'cascader',
+          prop: 'parentOrganizationNo',
+          options: {
+            filterable: true,
+            clearable: false,
+            placeholder: '请选择上级机构',
+            options: this.organizationTree,
+            showAllLevels: false,
+            props: {
+              emitPath: false,
+              checkStrictly: true,
+              value: 'organizationNo',
+              label: 'organizationName',
+              children: 'child'
+            }
+          }
+        }
+      ]
+    }
+  },
+  mounted () {
+    this.$refs.second.onSetValue({
+      parentOrganizationNo: this.organizationTree[0].organizationNo
+    })
+    this.$refs.second.onInit((items) => {
+      return new Promise((resolve, reject) => {
+        items.forEach(ele => {
+          ele.drillFn = this.drillFn
+        })
+        resolve()
+      })
+    })
+  },
   methods: {
-    drillInit (e) {
+    drillFn (e) {
       return new Promise((resolve, reject) => {
         getAccumulatePointStatisticsTop({
           organizationNo: e.data.organizationNo

src/views/dataChart/claimStatistics/index.vue

@@ -1,108 +1,120 @@
+
 <template>
-  <div class="pa-3 white">
-    <el-tabs v-model="activeName">
-      <el-tab-pane label="分布图" name="first">
-        <StatisticsCard
-          :api="getCustomerClaimStatistics"
-          :assignFn="assignFn"
-          :default-values="{
-            month: dateFormat('YYYY-mm', new Date())
-          }"
-          :search-items="[
-            {
-              label: '月份',
-              prop: 'month',
-              type: 'datePicker',
-              options: {
-                placeholder: '请选择月份',
-                clearable: false,
-                type: 'month',
-                valueFormat: 'yyyy-MM',
-                format: 'yyyy 年 MM 月'
-              }
-            }
-          ]"
-        ></StatisticsCard>
+  <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">
-        <StatisticsCard
-          :api="getSalaryProductStatistics"
-          :height="400"
-          :assign-values="assignValues"
-          :search-items="[{
-            label: '时间范围',
-            type: 'datePicker',
-            prop: 'month',
-            options: {
-              rangeSeparator: '至',
-              startPlaceholder: '开始时间',
-              endPlaceholder: '结束时间',
-              valueFormat: 'yyyy-MM-dd',
-              type: 'daterange'
-            }
-          }]"
-          @click="onClick"
-        ></StatisticsCard>
+      <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 StatisticsCard from '../components/StatisticsCard.vue'
+import StatisticsList from '@/components/StatisticsList'
 import { getCustomerClaimStatistics, getSalaryProductStatistics } from '@/api/salary'
 import { dateFormat } from '@/utils/date'
 export default {
   name: 'claimStatistics',
   components: {
-    StatisticsCard
+    StatisticsList
   },
   data () {
     return {
-      dateFormat,
-      activeName: 'first',
-      getCustomerClaimStatistics,
-      getSalaryProductStatistics
+      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'
     }
   },
-  methods: {
-    onClick (e) {
-      console.log(e)
-    },
-    assignValues (data) {
-      const { month } = data
-      if (!month || !month.length) {
-        return {}
-      }
-      return {
-        startDate: month[0],
-        endDate: month[1]
-      }
-    },
-    assignFn (data) {
-      data.series.forEach((item) => {
-        Object.assign(item, {
-          label: {
-            show: true,
-            formatter: (v) => {
-              return ` ${v.name}：${v.value} 元`
-            }
-          },
-          breadcrumb: {
-            show: true,
-            left: 'left',
-            top: 'top'
-          }
+  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()
         })
       })
-      return {
-        ...data
-      }
-    }
+    })
+
+    this.$refs.second.onInit()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+::v-deep .el-tabs__content {
+  height: calc(100% - 55px);
+  overflow: visible;
+}
 </style>

src/views/dataChart/trendStatistics/index.vue

@@ -1,33 +1,141 @@
 <template>
-  <div class="pa-3 white">
-    <el-tabs v-model="activeName">
-    <el-tab-pane label="分布图" name="first">
-      <performanceAnalysis></performanceAnalysis>
-    </el-tab-pane>
-    <el-tab-pane label="趋势图" name="second">
-      <AnalysisPage :search-api="getSalaryStatistics" :search-config="searchConfig" :value-fn="valueFn"></AnalysisPage>
-    </el-tab-pane>
-  </el-tabs>
+  <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"></StatisticsList>
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 
 <script>
 import {
-  getSalaryStatistics
+  getSalaryStatistics,
+  getPayrollStatistics
 } from '@/api/salary'
-import AnalysisPage from '@/components/Analysis'
-import performanceAnalysis from './performanceAnalysis'
+import {
+  dateFormat
+} from '@/utils/date'
+import StatisticsList from '@/components/StatisticsList'
+import { mapGetters } from 'vuex'
 export default {
   name: 'trendStatistics',
   components: {
-    AnalysisPage,
-    performanceAnalysis
+    StatisticsList
   },
   data () {
     return {
-      activeName: 'first',
-      getSalaryStatistics,
-      searchConfig: [
+      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: 0 },
+              { label: '加班工资', value: 1 },
+              // { label: '通讯补贴', value: 2 },
+              // { label: '午餐费补贴', value: 3 },
+              { label: '网讯稿酬', value: 4 }
+            ]
+          }
+        },
+        {
+          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)
+          })
+        }
+      ],
+      apis: [
+        (query) => {
+          return new Promise((resolve, reject) => {
+            const { month, ...obj } = query
+            const param = {
+              ...obj,
+              avge: true
+            }
+            if (month && month.length) {
+              Object.assign(param, {
+                startDate: month[0],
+                endDate: month[1]
+              })
+            }
+            getSalaryStatistics(param).then(resolve).catch(reject)
+          })
+        },
+        (query) => {
+          return new Promise((resolve, reject) => {
+            const { month, ...obj } = query
+            const param = {
+              ...obj,
+              avge: false
+            }
+            if (month && month.length) {
+              Object.assign(param, {
+                startDate: month[0],
+                endDate: month[1]
+              })
+            }
+            getSalaryStatistics(param).then(resolve).catch(reject)
+          })
+        }
+      ],
+      activeName: 'first'
+    }
+  },
+  computed: {
+    ...mapGetters(['organizationTree']),
+    searchConfig () {
+      return [
+        {
+          label: '上级机构',
+          type: 'cascader',
+          prop: 'parentOrganizationNo',
+          options: {
+            filterable: true,
+            clearable: false,
+            placeholder: '请选择上级机构',
+            options: this.organizationTree,
+            showAllLevels: false,
+            props: {
+              emitPath: false,
+              checkStrictly: true,
+              value: 'organizationNo',
+              label: 'organizationName',
+              children: 'child'
+            }
+          }
+        },
         {
           label: '时间范围',
           type: 'datePicker',
@@ -43,22 +151,53 @@ export default {
       ]
     }
   },
-  methods: {
-    valueFn (data) {
-      const { month, ...obj } = data
-      if (!month || !month.length) {
-        return obj
-      }
-      return {
-        ...obj,
-        startDate: month[0],
-        endDate: month[1]
-      }
-    }
+  mounted () {
+    // const clientHeight = this.$refs.first.$refs.main.clientHeight
+    this.$refs.first.onSetValue({
+      month: dateFormat('YYYY-mm', new Date()),
+      type: 0,
+      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()
+        })
+      })
+    })
+
+    this.$refs.second.onSetValue({
+      parentOrganizationNo: this.organizationTree[0].organizationNo
+    })
+    this.$refs.second.onInit()
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+::v-deep .el-tabs__content {
+  height: calc(100% - 55px);
+  overflow: visible;
+}
 </style>

src/views/dataChart/trendStatistics/performanceAnalysis.vue

@@ -1,130 +0,0 @@
-<template>
-  <div>
-    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-    <m-card v-if="!Object.keys(option).length">
-      <m-empty></m-empty>
-    </m-card>
-    <AnalysisChart v-else shadow="always" v-loading="loading" class="mb-3" :option="option" height="800"></AnalysisChart>
-  </div>
-</template>
-
-<script>
-import AnalysisChart from '@/components/Analysis/AnalysisChart'
-import {
-  getPayrollStatistics
-} from '@/api/salary'
-import {
-  dateFormat
-} from '@/utils/date'
-export default {
-  name: 'performanceAnalysis',
-  components: {
-    AnalysisChart
-  },
-  data () {
-    return {
-      loading: false,
-      option: {},
-      searchValues: {
-        month: dateFormat('YYYY-mm', new Date()),
-        type: 0,
-        avge: false
-      },
-      searchItems: [
-        {
-          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: 0 },
-              { label: '加班工资', value: 1 },
-              { label: '通讯补贴', value: 2 },
-              { label: '午餐费补贴', value: 3 },
-              { label: '网讯稿酬', value: 4 }
-            ]
-          }
-        },
-        {
-          label: '类型',
-          prop: 'avge',
-          type: 'select',
-          options: {
-            clearable: false,
-            items: [
-              { label: '总计', value: false },
-              { label: '平均值', value: true }
-            ]
-          }
-        }
-      ]
-    }
-  },
-  created () {
-    this.onInit()
-  },
-  methods: {
-    async onInit () {
-      this.loading = true
-      try {
-        const { data } = await getPayrollStatistics(this.searchValues)
-        if (!data.series.length) {
-          this.option = {}
-          return
-        }
-        data.series.forEach((item) => {
-          Object.assign(item, {
-            label: {
-              show: true,
-              formatter: (v) => {
-                return ` ${v.name}：${v.value} 元`
-              }
-            },
-            breadcrumb: {
-              show: true,
-              left: 'left',
-              top: 'top'
-            }
-          })
-        })
-
-        this.option = {
-          ...data
-        }
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onSearch (v) {
-      this.searchValues = v
-      this.onInit()
-    }
-    // drillInit (e) {
-    //   return new Promise((resolve, reject) => {
-    //     getSalaryFixedEmployeeStatistics({
-    //       organizationNo: [e.data.organizationNo]
-    //     }).then(resolve).catch(reject)
-    //   })
-    // }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/dataChart/welfareAnalysis/index.vue

@@ -0,0 +1,109 @@
+<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>

src/views/welfare/welfareAnalysis/index.vue

@@ -1,17 +0,0 @@
-<template>
-  <StatisticsList></StatisticsList>
-</template>
-
-<script>
-import StatisticsList from '@/components/StatisticsList'
-export default {
-  name: 'welfareAnalysis',
-  components: {
-    StatisticsList
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>