统计分析整合

src/components/Analysis/AnalysisChart.vue

@@ -1,91 +0,0 @@
-<template>
-  <m-card :shadow="shadow ?? 'never'" :bodyStyle="{ position: 'relative' }">
-    <e-charts ref="chart" :style="`height: ${height ?? 400}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: 400px;"></e-charts>
-      </div>
-    </el-drawer>
-  </m-card>
-</template>
-
-<script>
-export default {
-  name: 'AnalysisChart',
-  props: {
-    height: [Number, String],
-    init: Function,
-    shadow: String,
-    option: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      drawer: false,
-      chart: null,
-      drawerChart: null,
-      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.init) {
-        return
-      }
-      this.drawer = true
-      this.loading = true
-      try {
-        const { data } = await this.init(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/Analysis/index.vue

@@ -1,103 +0,0 @@
-<template>
-  <div>
-    <m-search :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-    <m-card class="mt-3" v-loading="loading">
-      <AnalysisChart class="mb-3" v-for="item in items" :key="item.key" :option="item.value" :init="drillInit"></AnalysisChart>
-      <m-empty v-if="items.length === 0"></m-empty>
-    </m-card>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import AnalysisChart from './AnalysisChart.vue'
-export default {
-  name: 'AnalysisPage',
-  props: {
-    searchApi: {
-      type: Function,
-      default: () => ({})
-    },
-    drillInit: Function,
-    searchConfig: {
-      type: Array,
-      default: () => []
-    },
-    valueFn: Function
-  },
-  components: {
-    AnalysisChart
-  },
-  data () {
-    return {
-      chart: {},
-      loading: false,
-      searchValues: {
-        parentOrganizationNo: null
-      },
-      items: []
-    }
-  },
-  computed: {
-    ...mapGetters(['organizationTree']),
-    searchItems () {
-      return [
-        {
-          label: '上级机构',
-          type: 'cascader',
-          prop: 'parentOrganizationNo',
-          options: {
-            filterable: true,
-            clearable: true,
-            placeholder: '请选择上级机构',
-            options: this.organizationTree,
-            showAllLevels: false,
-            props: {
-              emitPath: false,
-              checkStrictly: true,
-              value: 'organizationNo',
-              label: 'organizationName',
-              children: 'child'
-            }
-          }
-        },
-        ...this.searchConfig
-      ]
-    }
-  },
-  mounted () {
-    this.searchValues.parentOrganizationNo = this.organizationTree[0].organizationNo
-    this.onInit()
-  },
-  methods: {
-    async onInit () {
-      this.loading = true
-      try {
-        const query = this.valueFn ? this.valueFn(this.searchValues) : { ...this.searchValues }
-
-        const { data } = await this.searchApi(query)
-        this.items = Object.keys(data).map(key => {
-          return {
-            key,
-            value: data[key] || {}
-          }
-        })
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onSearch () {
-      if (this.searchValues.parentOrganizationNo === null) {
-        this.searchValues.parentOrganizationNo = this.organizationTree[0].organizationNo
-      }
-      this.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/dataChart/components/StatisticsCard.vue

@@ -1,86 +0,0 @@
-<template>
-  <div>
-    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-    <slot></slot>
-    <AnalysisChart shadow="always" :option="option" :height="height" v-loading="loading" v-on="$listeners"></AnalysisChart>
-  </div>
-</template>
-
-<script>
-import AnalysisChart from '@/components/Analysis/AnalysisChart'
-export default {
-  name: 'StatisticsCard',
-  components: {
-    AnalysisChart
-  },
-  props: {
-    api: Function,
-    assignFn: Function,
-    assignValues: Function,
-    height: {
-      type: [String, Number],
-      default: '800'
-    },
-    searchItems: {
-      type: Array,
-      default: () => []
-    },
-    defaultValues: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data () {
-    return {
-      loading: false,
-      option: {},
-      // searchItems: [
-      //   {
-      //     label: '月份',
-      //     prop: 'month',
-      //     type: 'datePicker',
-      //     options: {
-      //       placeholder: '请选择月份',
-      //       clearable: false,
-      //       type: 'month',
-      //       valueFormat: 'yyyy-MM',
-      //       format: 'yyyy 年 MM 月'
-      //     }
-      //   }
-      // ],
-      searchValues: {
-        // month: dateFormat('YYYY-mm', new Date())
-        ...this.defaultValues
-      }
-    }
-  },
-  created () {
-    this.onInit()
-  },
-  methods: {
-    async onInit () {
-      this.loading = true
-      const query = this.assignValues ? this.assignValues(this.searchValues) : this.searchValues
-      try {
-        const { data } = await this.api(query)
-        if (this.assignFn) {
-          this.option = this.assignFn(data)
-          return
-        }
-        this.option = data
-      } catch (error) {
-        this.$message.error(error)
-      } finally {
-        this.loading = false
-      }
-    },
-    onSearch () {
-      this.onInit()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

src/views/dataChart/salaryFixedAnalysis/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="pa-3 white fullscreen border-box">
+    <StatisticsList ref="second" :apis="apis" :search-items="searchConfig"></StatisticsList>
+  </div>
+</template>
+
+<script>
+import {
+  getSalaryFixedStatistics,
+  getSalaryFixedEmployeeStatistics
+} from '@/api/salary'
+import StatisticsList from '@/components/StatisticsList'
+import { mapGetters } from 'vuex'
+export default {
+  name: 'accumulatePointsStatistics',
+  components: {
+    StatisticsList
+  },
+  data () {
+    return {
+      apis: [
+        (query) => {
+          return new Promise((resolve, reject) => {
+            getSalaryFixedStatistics({ avge: false, ...query }).then(resolve).catch(reject)
+          })
+        },
+        (query) => {
+          return new Promise((resolve, reject) => {
+            getSalaryFixedStatistics({ 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: {
+    drillFn (e) {
+      return new Promise((resolve, reject) => {
+        getSalaryFixedEmployeeStatistics({
+          organizationNo: [e.data.organizationNo]
+        }).then(resolve).catch(reject)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/salaryFixed/salaryFixedAnalysis/index.vue

@@ -1,35 +0,0 @@
-<template>
-  <AnalysisPage class="white pa-3" :search-api="getSalaryFixedStatistics" :drill-init="drillInit"></AnalysisPage>
-</template>
-
-<script>
-import AnalysisPage from '@/components/Analysis'
-import {
-  getSalaryFixedStatistics,
-  getSalaryFixedEmployeeStatistics
-} from '@/api/salary'
-export default {
-  name: 'SalaryFixedAnalysis',
-  components: {
-    AnalysisPage
-  },
-  data () {
-    return {
-      getSalaryFixedStatistics
-    }
-  },
-  methods: {
-    drillInit (e) {
-      return new Promise((resolve, reject) => {
-        getSalaryFixedEmployeeStatistics({
-          organizationNo: [e.data.organizationNo]
-        }).then(resolve).catch(reject)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>