【fix:update】-收入分类统计 增加打包项目、打包子项目的统计维度

src/views/dashboard/IncomeSortEcharts.vue

@@ -1,30 +1,39 @@
 <!-- 分类统计-->
 <template>
   <div class="container">
-    <div class="title">收入分类统计
+    <div class="title">收入分类统计</div>
-      <a-tree-select
-        :multiple="false"
-        show-search
-        :replaceFields="{value:'orgCode'}"
-        allowClear
-        tree-default-expand-all
-        tree-node-filter-prop="title"
-        @change="changeDepart"
-        style="width:20%"
-        :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
-        :treeData="treeDepartData"
-        v-model="queryParam.departCode"
-        placeholder="请选择部门">
-      </a-tree-select>
-      <j-year-date  style="width:20%" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
-    </div>
     <div class="operator">
+      <span @click="projectToggleEcharts('packProject')" class="operator-left"
+            :class="{'active':projectActiveIndex === 'packProject'}">打包项目</span>
+      <span @click="projectToggleEcharts('childProject')" class="operator-right"
+            :class="{'active':projectActiveIndex === 'childProject'}">子项目</span>
+    </div>
+    <div class="search-class">
+      <div class="title">
+        <a-tree-select
+          :multiple="false"
+          show-search
+          :replaceFields="{value:'orgCode'}"
+          allowClear
+          tree-default-expand-all
+          tree-node-filter-prop="title"
+          @change="changeDepart"
+          style="width:20%"
+          :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
+          :treeData="treeDepartData"
+          v-model="queryParam.departCode"
+          placeholder="请选择部门">
+        </a-tree-select>
+        <j-year-date  style="width:20%" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
+      </div>
+      <div class="operator sub-operator">
       <span @click="toggleEcharts('income')" class="operator-left"
             :class="{'active':activeIndex === 'income'}">收入分析</span>
-      <span @click="toggleEcharts('allMoney')" class="operator-left"
+        <span @click="toggleEcharts('allMoney')" class="operator-left"
-            :class="{'active':activeIndex === 'allMoney'}">应收</span>
+              :class="{'active':activeIndex === 'allMoney'}">应收</span>
-      <span @click="toggleEcharts('confirmAmount')" class="operator-right"
+        <span @click="toggleEcharts('confirmAmount')" class="operator-right"
-            :class="{'active':activeIndex === 'confirmAmount'}">确收</span>
+              :class="{'active':activeIndex === 'confirmAmount'}">确收</span>
+      </div>
     </div>
     <div class="echarts-box" id="incomeSort"></div>
     <!--   表格区域beign -->
@@ -108,6 +117,7 @@ export default {
   data() {
     return {
       activeIndex: 'income',
+      projectActiveIndex: 'childProject', // 打包项目、打包子项目选中的索引
       echartsInstace: null,
       columns,
       url: {
@@ -124,6 +134,15 @@ export default {
   },
   methods: {
     formatMoney,
+    projectToggleEcharts(key) {
+      if (key === this.projectActiveIndex) {
+        return
+      } else {
+        this.projectActiveIndex = key
+        this.loadData()
+        this.$forceUpdate()
+      }
+    },
     toggleEcharts(key) {
       if (key === this.activeIndex) {
         return
@@ -169,7 +188,11 @@ export default {
         confirmAmount: 2,
         income: 3
       }
-      getAction(this.url.list, {type: typeEnum[this.activeIndex],departCode:this.queryParam.departCode,year:this.queryParam.year}).then(res => {
+      const projectTypeEnum = {
+        packProject: 1,
+        childProject: 2
+      }
+      getAction(this.url.list, {type: typeEnum[this.activeIndex], projectType: projectTypeEnum[this.projectActiveIndex], departCode:this.queryParam.departCode,year:this.queryParam.year}).then(res => {
         if (res.success) {
           let dataSource = res.result
           this.initColumns(res.result)
@@ -355,24 +378,36 @@ export default {
   right: 20px;
   top: 20px;
   width: 180px;
-  height: 35px;
+  height: 32px;
-  line-height: 35px;
+  line-height: 32px;
   border: 1px solid #069F99;
   border-radius: 4px;
   cursor: pointer;
 
   &-left {
-    width: 33.3%;
+    width: 50%;
     text-align: center;
     border-right: 1px solid #069F99;
   }
 
   &-right {
-    width: 33.4%;
+    width: 50%;
     text-align: center;
   }
 }
-
+.search-class {
+  position: relative;
+  padding-top: 21px;
+}
+.sub-operator.operator {
+  right: 0;
+  .operator-left {
+    width: 33.3%;
+  }
+  .operator-right {
+    width: 33.4%;
+  }
+}
 .active {
   background: #069F99;
   color: #fff;
@@ -381,7 +416,7 @@ export default {
 .echarts-box {
   min-width: 300px;
   width: 100%;
-  height: 400px;
+  height: 440px;
 }
 
 .point {

src/views/dashboard/NotReceivedEcharts.vue

@@ -1,7 +1,8 @@
 <!-- 未收账款统计-->
 <template>
   <div class="container">
-    <div class="title">应收账款
+    <div class="title">应收账款</div>
+    <div class="search-class">
       <a-tree-select
         :multiple="false"
         show-search
@@ -17,14 +18,6 @@
         placeholder="请选择部门">
       </a-tree-select>
     </div>
-<!--    <div class="operator">-->
-<!--      <span @click="toggleEcharts('income')" class="operator-left"-->
-<!--            :class="{'active':activeIndex === 'income'}">收入分析</span>-->
-<!--      <span @click="toggleEcharts('allMoney')" class="operator-left"-->
-<!--            :class="{'active':activeIndex === 'allMoney'}">应收</span>-->
-<!--      <span @click="toggleEcharts('confirmAmount')" class="operator-right"-->
-<!--            :class="{'active':activeIndex === 'confirmAmount'}">确收</span>-->
-<!--    </div>-->
     <div class="echarts-box" id="notReceived"></div>
     <!--   表格区域beign -->
         <div style="width: 100%">
@@ -371,6 +364,10 @@ export default {
     text-align: center;
   }
 }
+.search-class {
+  position: relative;
+  padding-top: 21px;
+}
 
 .active {
   background: #069F99;
@@ -380,7 +377,7 @@ export default {
 .echarts-box {
   min-width: 300px;
   width: 100%;
-  height: 400px;
+  height: 440px;
 }
 
 .point {