统计调整

src/api/salary.js

@@ -225,3 +225,8 @@ export function getCustomerClaimStatistics (data) {
 export function getSalaryStatistics (data) {
   return http.post('/employee/payroll/organization/date/range/statistics', data)
 }
+
+// 机构产品趋势
+export function getSalaryProductStatistics (data) {
+  return http.post('/customer/performance/claim/product/statistics ', data)
+}

src/components/Analysis/AnalysisChart.vue

@@ -64,6 +64,7 @@ export default {
   },
   methods: {
     async onInit (e) {
+      this.$emit('click', e)
       if (!this.init) {
         return
       }

src/views/dataChart/claimStatistics/index.vue

@@ -1,12 +1,57 @@
 <template>
-  <div class="white pa-3">
-    <StatisticsCard :api="getCustomerClaimStatistics" :assignFn="assignFn"></StatisticsCard>
+  <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>
+      </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>
+    </el-tabs>
   </div>
 </template>
 
 <script>
 import StatisticsCard from '../components/StatisticsCard.vue'
-import { getCustomerClaimStatistics } from '@/api/salary'
+import { getCustomerClaimStatistics, getSalaryProductStatistics } from '@/api/salary'
+import { dateFormat } from '@/utils/date'
 export default {
   name: 'claimStatistics',
   components: {
@@ -14,10 +59,26 @@ export default {
   },
   data () {
     return {
-      getCustomerClaimStatistics
+      dateFormat,
+      activeName: 'first',
+      getCustomerClaimStatistics,
+      getSalaryProductStatistics
     }
   },
   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, {

src/views/dataChart/components/StatisticsCard.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
-    <AnalysisChart shadow="always" :option="option" height="800" v-loading="loading"></AnalysisChart>
+    <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'
-import { dateFormat } from '@/utils/date'
 export default {
   name: 'StatisticsCard',
   components: {
@@ -15,28 +15,42 @@ export default {
   },
   props: {
     api: Function,
-    assignFn: 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 月'
-          }
-        }
-      ],
+      // 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())
+        // month: dateFormat('YYYY-mm', new Date())
+        ...this.defaultValues
       }
     }
   },
@@ -46,10 +60,9 @@ export default {
   methods: {
     async onInit () {
       this.loading = true
+      const query = this.assignValues ? this.assignValues(this.searchValues) : this.searchValues
       try {
-        const { data } = await this.api({
-          ...this.searchValues
-        })
+        const { data } = await this.api(query)
         if (this.assignFn) {
           this.option = this.assignFn(data)
           return

src/views/dataChart/trendStatistics/index.vue

@@ -1,5 +1,14 @@
 <template>
-  <AnalysisPage class="white pa-3" :search-api="getSalaryStatistics" :search-config="searchConfig" :value-fn="valueFn"></AnalysisPage>
+  <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>
 </template>
 
 <script>
@@ -7,13 +16,16 @@ import {
   getSalaryStatistics
 } from '@/api/salary'
 import AnalysisPage from '@/components/Analysis'
+import performanceAnalysis from './performanceAnalysis'
 export default {
   name: 'trendStatistics',
   components: {
-    AnalysisPage
+    AnalysisPage,
+    performanceAnalysis
   },
   data () {
     return {
+      activeName: 'first',
       getSalaryStatistics,
       searchConfig: [
         {

src/views/dataChart/performanceAnalysis/index.vue → src/views/dataChart/trendStatistics/performanceAnalysis.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pa-3 white">
+  <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>