From cf43dd5336da420509ec9325a9999f2d2aa04f23 Mon Sep 17 00:00:00 2001
From: fengachen <373943794@qq.com>
Date: Tue, 27 Sep 2022 14:06:58 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91=E6=94=B6?=
 =?UTF-8?q?=E5=85=A5=E7=BB=9F=E8=AE=A1=E9=83=A8=E9=97=A8=E7=AD=9B=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/IncomeSortEcharts.vue | 152 +++++++++++++++-------
 1 file changed, 104 insertions(+), 48 deletions(-)

diff --git a/src/views/dashboard/IncomeSortEcharts.vue b/src/views/dashboard/IncomeSortEcharts.vue
index 1c98086..cfd40ec 100644
--- a/src/views/dashboard/IncomeSortEcharts.vue
+++ b/src/views/dashboard/IncomeSortEcharts.vue
@@ -1,13 +1,31 @@
 <!-- 分类统计-->
 <template>
   <div class="container">
-    <div class="title">收入分类统计 </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 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:40%"
+        :dropdownStyle="{ maxHeight: '200px',maxWidth:'100px','overflow-x':'hidden',' overflo-y': 'auto' }"
+        :treeData="treeDepartData"
+        v-model="queryParam.departCode"
+        placeholder="请选择组织机构">
+      </a-tree-select>
     </div>
-    <div  class="echarts-box" id="incomeSort"> </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="incomeSort"></div>
     <!--   表格区域beign -->
     <div style="width: 100%">
       <a-table
@@ -48,9 +66,9 @@ import {
   TooltipComponent,
   LegendComponent
 } from 'echarts/components'
-import { PieChart } from 'echarts/charts'
-import { LabelLayout } from 'echarts/features'
-import { CanvasRenderer } from 'echarts/renderers'
+import {PieChart} from 'echarts/charts'
+import {LabelLayout} from 'echarts/features'
+import {CanvasRenderer} from 'echarts/renderers'
 
 echarts.use([
   TitleComponent,
@@ -62,6 +80,8 @@ echarts.use([
 ])
 import {getAction} from '@api/manage'
 import {formatMoney} from '@/utils/formatMoney'
+import {queryDepartTreeList} from '@api/api'
+
 const columns = [
   {
     title: '',
@@ -76,46 +96,74 @@ export default {
   name: 'IncomeSortEcharts',
   data() {
     return {
-      activeIndex:'income',
-      echartsInstace:null,
+      activeIndex: 'income',
+      echartsInstace: null,
       columns,
-      url:{
-        list:'/index/incomeClassificationStatistics'
+      url: {
+        list: '/index/incomeClassificationStatistics'
       },
-      dataSource:[]
+      queryParam:{},
+      dataSource: [],
+      treeDepartData:[],// 组织机构 树数据
     }
   },
   mounted() {
     this.loadData()
+    this.loadDepartTreeData()
   },
-  methods:{
+  methods: {
     formatMoney,
     toggleEcharts(key) {
-      if(key === this.activeIndex) {
+      if (key === this.activeIndex) {
         return
-      }else {
+      } else {
         this.activeIndex = key
         this.loadData()
         this.$forceUpdate()
       }
     },
+    /**
+     * 选择部门
+     * */
+    changeDepart(val){
+      console.log(val,'val')
+      this.queryParam.departCode = val
+      this.loadData()
+    },
+    /*
+    *  组织机构下拉数据
+    * */
+    loadDepartTreeData() {
+      const that = this
+      queryDepartTreeList().then((res) => {
+        if (res.success) {
+          that.treeDepartData = []
+          let treeList = res.result
+          for (let a = 0; a < treeList.length; a++) {
+            let temp = treeList[a]
+            temp.isLeaf = temp.leaf
+            that.treeDepartData.push(temp)
+          }
+        }
+      })
+    },
     loadData() {
       if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
         this.echartsInstace.dispose()//销毁
       }
       let typeEnum = {
-        allMoney:1,
-        confirmAmount:2,
-        income:3
+        allMoney: 1,
+        confirmAmount: 2,
+        income: 3
       }
-      getAction(this.url.list,{type:typeEnum[this.activeIndex]}).then(res =>{
-        if(res.success){
+      getAction(this.url.list, {type: typeEnum[this.activeIndex],departCode:this.queryParam.departCode}).then(res => {
+        if (res.success) {
           let dataSource = res.result
           this.initColumns(res.result)
           this.initEcharts(res.result)
           // 将接口数据 转化成表格数据形式
           let tableData = [
-            {indexName: typeEnum[this.activeIndex] !== 2 ? '合同金额' :'确收金额'},
+            {indexName: typeEnum[this.activeIndex] !== 2 ? '合同金额' : '确收金额'},
             {indexName: '百分比'}
           ]
           dataSource.map((item, index) => {
@@ -129,10 +177,10 @@ export default {
     },
     initEcharts(data) {
       let color = ['#069F99', '#88C87E ', '#6D7FD0', '#FA9D81', '#A5B3FF']
-      let echartsData = data.reduce( (pre,val) => {
-       return  pre.concat({value:val.value,name:val.name_dictText,money:val.money})
-      },[])
-      echartsData = this.initPoint(echartsData,color)
+      let echartsData = data.reduce((pre, val) => {
+        return pre.concat({value: val.value, name: val.name_dictText, money: val.money})
+      }, [])
+      echartsData = this.initPoint(echartsData, color)
       let chartDom = document.getElementById('incomeSort')
       let myChart = echarts.init(chartDom)
       let option
@@ -140,7 +188,7 @@ export default {
       option = {
 
         tooltip: {
-          show:true,
+          show: true,
           trigger: 'item',
           formatter: (param) => {
             return `<div>
@@ -151,32 +199,32 @@ export default {
           }
         },
         legend: {
-          bottom:'2%',
-          right:'5%',
-          padding: [0,10,0,20]
+          bottom: '2%',
+          right: '5%',
+          padding: [0, 10, 0, 20]
         },
-        labelLine:{
-          lineStyle:{
-            color:'#999'
+        labelLine: {
+          lineStyle: {
+            color: '#999'
           }
         },
         series: [
           {
-            color:color,
+            color: color,
             type: 'pie',
             radius: ['30%', '60%'],
             itemStyle: {
               borderColor: '#fff',
               borderWidth: 2
             },
-            label:{
-              show:true,
+            label: {
+              show: true,
               formatter: '{pre|}{d}%',
-              rich:{
-                pre:{
-                  width:4,
-                  height:4,
-                  borderRadius:[4,4,4,4]
+              rich: {
+                pre: {
+                  width: 4,
+                  height: 4,
+                  borderRadius: [4, 4, 4, 4]
                 }
               }
             },
@@ -219,7 +267,7 @@ export default {
       })
     },
     // 处理圆点
-    initPoint(data,color) {
+    initPoint(data, color) {
       // 这步主要是为了让小圆点的颜色和饼状图的块对应
       let setLabel = (data) => {
         let opts = []
@@ -234,8 +282,8 @@ export default {
               show: true,
               formatter: '{point|}{a|}{d}%',
               rich: {
-                a:{
-                  padding: [0,0,0,4]
+                a: {
+                  padding: [0, 0, 0, 4]
                 },
                 point: {
                   height: 6,
@@ -265,6 +313,7 @@ export default {
   box-sizing: border-box;
   width: 100%;
 }
+
 .operator {
   color: #069F99;
   position: absolute;
@@ -281,25 +330,30 @@ export default {
   border: 1px solid #069F99;
   border-radius: 4px;
   cursor: pointer;
+
   &-left {
     width: 33.3%;
     text-align: center;
     border-right: 1px solid #069F99;
   }
+
   &-right {
     width: 33.3%;
     text-align: center;
   }
 }
+
 .active {
   background: #069F99;
   color: #fff;
 }
+
 .echarts-box {
   min-width: 300px;
   width: 100%;
   height: 400px;
 }
+
 .point {
   width: 3px;
   height: 3px;
@@ -307,6 +361,7 @@ export default {
   border-radius: 50%;
   background: #000;
 }
+
 .title {
   text-align: left;
   font-weight: 500;
@@ -317,18 +372,19 @@ export default {
 /deep/ .ant-table-thead tr > th {
   color: #050525;
   font-weight: bold;
-  background: rgb(245,245,246);
+  background: rgb(245, 245, 246);
   border: none;
 }
+
 /deep/ .ant-table-tbody tr > td {
   color: rgba(5, 5, 37, 0.8);
   border: none;
-  border-bottom: 1px solid rgb(245,245,246);
+  border-bottom: 1px solid rgb(245, 245, 246);
 }
 
 /deep/ .ant-table-tbody tr > td:first-child {
   color: #050525;
   font-weight: bold;
-  background: rgb(245,245,246);
+  background: rgb(245, 245, 246);
 }
 </style>
\ No newline at end of file