LK/income_payments_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fengachen
2022-09-27 14:06:58 +08:00
parent ba35bdf5d2
commit cf43dd5336
1 changed files with 104 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/IncomeSortEcharts.vue
+104 -48
View File
@@ -1,13 +1,31 @@
<!-- 分类统计--> <!-- 分类统计-->
<template> <template>
<div class="container"> <div class="container">
<div class="title">收入分类统计 </div> <div class="title">收入分类统计
<div class="operator"> <a-tree-select
<span @click="toggleEcharts('income')" class="operator-left" :class="{'active':activeIndex === 'income'}">收入分析</span> :multiple="false"
<span @click="toggleEcharts('allMoney')" class="operator-left" :class="{'active':activeIndex === 'allMoney'}">应收</span> show-search
<span @click="toggleEcharts('confirmAmount')" class="operator-right" :class="{'active':activeIndex === 'confirmAmount'}">确收</span> :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>
<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 --> <!-- 表格区域beign -->
<div style="width: 100%"> <div style="width: 100%">
<a-table <a-table
@@ -48,9 +66,9 @@ import {
TooltipComponent, TooltipComponent,
LegendComponent LegendComponent
} from 'echarts/components' } from 'echarts/components'
import { PieChart } from 'echarts/charts' import {PieChart} from 'echarts/charts'
import { LabelLayout } from 'echarts/features' import {LabelLayout} from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers' import {CanvasRenderer} from 'echarts/renderers'
echarts.use([ echarts.use([
TitleComponent, TitleComponent,
@@ -62,6 +80,8 @@ echarts.use([
]) ])
import {getAction} from '@api/manage' import {getAction} from '@api/manage'
import {formatMoney} from '@/utils/formatMoney' import {formatMoney} from '@/utils/formatMoney'
import {queryDepartTreeList} from '@api/api'
const columns = [ const columns = [
{ {
title: '', title: '',
@@ -76,46 +96,74 @@ export default {
name: 'IncomeSortEcharts', name: 'IncomeSortEcharts',
data() { data() {
return { return {
activeIndex:'income', activeIndex: 'income',
echartsInstace:null, echartsInstace: null,
columns, columns,
url:{ url: {
list:'/index/incomeClassificationStatistics' list: '/index/incomeClassificationStatistics'
}, },
dataSource:[] queryParam:{},
dataSource: [],
treeDepartData:[],// 组织机构 树数据
} }
}, },
mounted() { mounted() {
this.loadData() this.loadData()
this.loadDepartTreeData()
}, },
methods:{ methods: {
formatMoney, formatMoney,
toggleEcharts(key) { toggleEcharts(key) {
if(key === this.activeIndex) { if (key === this.activeIndex) {
return return
}else { } else {
this.activeIndex = key this.activeIndex = key
this.loadData() this.loadData()
this.$forceUpdate() 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() { loadData() {
if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) { if (this.echartsInstace != null && this.echartsInstace != '' && this.echartsInstace != undefined) {
this.echartsInstace.dispose()//销毁 this.echartsInstace.dispose()//销毁
} }
let typeEnum = { let typeEnum = {
allMoney:1, allMoney: 1,
confirmAmount:2, confirmAmount: 2,
income:3 income: 3
} }
getAction(this.url.list,{type:typeEnum[this.activeIndex]}).then(res =>{ getAction(this.url.list, {type: typeEnum[this.activeIndex],departCode:this.queryParam.departCode}).then(res => {
if(res.success){ if (res.success) {
let dataSource = res.result let dataSource = res.result
this.initColumns(res.result) this.initColumns(res.result)
this.initEcharts(res.result) this.initEcharts(res.result)
// 将接口数据 转化成表格数据形式 // 将接口数据 转化成表格数据形式
let tableData = [ let tableData = [
{indexName: typeEnum[this.activeIndex] !== 2 ? '合同金额' :'确收金额'}, {indexName: typeEnum[this.activeIndex] !== 2 ? '合同金额' : '确收金额'},
{indexName: '百分比'} {indexName: '百分比'}
] ]
dataSource.map((item, index) => { dataSource.map((item, index) => {
@@ -129,10 +177,10 @@ export default {
}, },
initEcharts(data) { initEcharts(data) {
let color = ['#069F99', '#88C87E ', '#6D7FD0', '#FA9D81', '#A5B3FF'] let color = ['#069F99', '#88C87E ', '#6D7FD0', '#FA9D81', '#A5B3FF']
let echartsData = data.reduce( (pre,val) => { let echartsData = data.reduce((pre, val) => {
return pre.concat({value:val.value,name:val.name_dictText,money:val.money}) return pre.concat({value: val.value, name: val.name_dictText, money: val.money})
},[]) }, [])
echartsData = this.initPoint(echartsData,color) echartsData = this.initPoint(echartsData, color)
let chartDom = document.getElementById('incomeSort') let chartDom = document.getElementById('incomeSort')
let myChart = echarts.init(chartDom) let myChart = echarts.init(chartDom)
let option let option
@@ -140,7 +188,7 @@ export default {
option = { option = {
tooltip: { tooltip: {
show:true, show: true,
trigger: 'item', trigger: 'item',
formatter: (param) => { formatter: (param) => {
return `<div> return `<div>
@@ -151,32 +199,32 @@ export default {
} }
}, },
legend: { legend: {
bottom:'2%', bottom: '2%',
right:'5%', right: '5%',
padding: [0,10,0,20] padding: [0, 10, 0, 20]
}, },
labelLine:{ labelLine: {
lineStyle:{ lineStyle: {
color:'#999' color: '#999'
} }
}, },
series: [ series: [
{ {
color:color, color: color,
type: 'pie', type: 'pie',
radius: ['30%', '60%'], radius: ['30%', '60%'],
itemStyle: { itemStyle: {
borderColor: '#fff', borderColor: '#fff',
borderWidth: 2 borderWidth: 2
}, },
label:{ label: {
show:true, show: true,
formatter: '{pre|}{d}%', formatter: '{pre|}{d}%',
rich:{ rich: {
pre:{ pre: {
width:4, width: 4,
height:4, height: 4,
borderRadius:[4,4,4,4] borderRadius: [4, 4, 4, 4]
} }
} }
}, },
@@ -219,7 +267,7 @@ export default {
}) })
}, },
// 处理圆点 // 处理圆点
initPoint(data,color) { initPoint(data, color) {
// 这步主要是为了让小圆点的颜色和饼状图的块对应 // 这步主要是为了让小圆点的颜色和饼状图的块对应
let setLabel = (data) => { let setLabel = (data) => {
let opts = [] let opts = []
@@ -234,8 +282,8 @@ export default {
show: true, show: true,
formatter: '{point|}{a|}{d}%', formatter: '{point|}{a|}{d}%',
rich: { rich: {
a:{ a: {
padding: [0,0,0,4] padding: [0, 0, 0, 4]
}, },
point: { point: {
height: 6, height: 6,
@@ -265,6 +313,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
} }
.operator { .operator {
color: #069F99; color: #069F99;
position: absolute; position: absolute;
@@ -281,25 +330,30 @@ export default {
border: 1px solid #069F99; border: 1px solid #069F99;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
&-left { &-left {
width: 33.3%; width: 33.3%;
text-align: center; text-align: center;
border-right: 1px solid #069F99; border-right: 1px solid #069F99;
} }
&-right { &-right {
width: 33.3%; width: 33.3%;
text-align: center; text-align: center;
} }
} }
.active { .active {
background: #069F99; background: #069F99;
color: #fff; color: #fff;
} }
.echarts-box { .echarts-box {
min-width: 300px; min-width: 300px;
width: 100%; width: 100%;
height: 400px; height: 400px;
} }
.point { .point {
width: 3px; width: 3px;
height: 3px; height: 3px;
@@ -307,6 +361,7 @@ export default {
border-radius: 50%; border-radius: 50%;
background: #000; background: #000;
} }
.title { .title {
text-align: left; text-align: left;
font-weight: 500; font-weight: 500;
@@ -317,18 +372,19 @@ export default {
/deep/ .ant-table-thead tr > th { /deep/ .ant-table-thead tr > th {
color: #050525; color: #050525;
font-weight: bold; font-weight: bold;
background: rgb(245,245,246); background: rgb(245, 245, 246);
border: none; border: none;
} }
/deep/ .ant-table-tbody tr > td { /deep/ .ant-table-tbody tr > td {
color: rgba(5, 5, 37, 0.8); color: rgba(5, 5, 37, 0.8);
border: none; 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 { /deep/ .ant-table-tbody tr > td:first-child {
color: #050525; color: #050525;
font-weight: bold; font-weight: bold;
background: rgb(245,245,246); background: rgb(245, 245, 246);
} }
</style> </style>