【修改】收入统计部门筛选

2022-09-27 14:06:58 +08:00
parent ba35bdf5d2
commit cf43dd5336
1 changed files with 104 additions and 48 deletions
@@ -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>