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

add 全院经营数据统计(累计)-比对

Browse Source
This commit is contained in:
danshihao
2024-01-24 16:11:24 +08:00
parent 2b7e9d72cd
commit 7a478a742e
2 changed files with 664 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/SingleMonthTotalEcharts.vue
+9
View File
@@ -4,6 +4,7 @@
<!-- echarts-->
<div class="title">全院经营数据统计 (累计)
<j-year-date style="width:250px" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
<a-button type="link" style="margin-left: 8px;" @click="handleComparison">比对</a-button>
</div>
<div class="echarts-box" id="singleMonthTotalEcharts"></div>
<!-- echarts-->
@@ -39,6 +40,8 @@
</a-table>
</div>
<!-- 表格区域end -->
<!-- 比对弹框 -->
<single-month-total-comparison-modal ref="singleMonthTotalComparisonModal"/>
</div>
</template>
@@ -72,6 +75,7 @@ import {MonthDataTotal} from '@views/statisticalReport/statisticData'
import {getAction} from '@api/manage'
import {formatMoney} from '@/utils/formatMoney'
import JYearDate from '@comp/jero/JYearDate'
import SingleMonthTotalComparisonModal from '@views/dashboard/modules/SingleMonthTotalComparisonModal'
const columns = [
{
@@ -96,6 +100,7 @@ MonthDataTotal.map(tt => {
export default {
name: 'SingleMonthEcharts',
components:{
SingleMonthTotalComparisonModal,
JYearDate
},
mixins: [JeroListMixin],
@@ -120,6 +125,10 @@ export default {
},
methods: {
formatMoney,
// 比对
handleComparison () {
this.$refs.singleMonthTotalComparisonModal.open()
},
loadData(arg) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
src/views/dashboard/modules/SingleMonthTotalComparisonModal.vue
+655
View File
@@ -0,0 +1,655 @@
<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
fullscreen
:footer="null"
@cancel="handleCancel"
cancelText="关闭">
<a-spin :spinning="confirmLoading">
<!-- 查询区域-start -->
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row type="flex">
<a-col :span="6">
<a-form-item label="比对年份1" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-year-date style="margin-right:8px;" class="year" placeholder="请选择比对年份1" v-model="queryParam.year1"></j-year-date>
</a-form-item>
</a-col>
<a-col :span="6">
<a-form-item label="比对年份2" :labelCol="labelCol" :wrapperCol="wrapperCol">
<j-year-date style="margin-right:8px;" class="year" placeholder="请选择比对年份2" v-model="queryParam.year2"></j-year-date>
</a-form-item>
</a-col>
<a-col :span="4">
<a-button type="primary" @click="searchQuery">比对</a-button>
</a-col>
</a-row>
</a-form>
</div>
<!-- /查询区域-end-->
<!-- echart-start -->
<div class="echarts-box" ref="singleMonthTotalEcharts"></div>
<!-- echart-end -->
<!-- 表格区域beign -->
<div style="width: 100%">
<a-table
ref="table"
size="middle"
bordered
rowKey="projectId"
:columns="columns"
:scroll="{x: 1100}"
:dataSource="dataSource"
:pagination="false"
class="j-table-force-nowrap main-table">
<template slot="text" slot-scope="text">
<a-tooltip>
<template slot="title">{{ text }}</template>
<div class="table-text">{{ text }}</div>
</a-tooltip>
</template>
<template slot="allMoney" slot-scope="text">
<a-tooltip>
<template slot="title">{{ formatMoney(text) }}</template>
<div class="table-text">{{ formatMoney(text) }}</div>
</a-tooltip>
</template>
</a-table>
</div>
<!-- 表格区域end -->
</a-spin>
</j-modal>
</template>
<script>
import JYearDate from '@comp/jero/JYearDate'
import {MonthDataTotal} from '@views/statisticalReport/statisticData'
import * as echarts from 'echarts/core'
import {
DatasetComponent,
TitleComponent,
TooltipComponent,
GridComponent,
TransformComponent,
ToolboxComponent
} from 'echarts/components'
import {LineChart} from 'echarts/charts'
import {CanvasRenderer} from 'echarts/renderers'
import {UniversalTransition} from 'echarts/features'
import {getAction} from '@api/manage'
import {formatMoney} from '@/utils/formatMoney'
echarts.use([
DatasetComponent,
TitleComponent,
TooltipComponent,
GridComponent,
TransformComponent,
LineChart,
CanvasRenderer,
UniversalTransition,
ToolboxComponent
])
const columns = [
{
title: '',
align: 'center',
width: 160,
dataIndex: 'indexName',
scopedSlots: {customRender: 'text'}
},
]
MonthDataTotal.map(tt => {
columns.push({
title: tt.name,
align: 'center',
width: 125,
dataIndex: tt.key,
scopedSlots: {customRender: 'allMoney'}
})
})
export default {
name: 'SingleMonthTotalComparisonModal',
components: {JYearDate},
data () {
return {
columns,
title: '比对',
width: 800,
visible: false,
confirmLoading: false,
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 10 }
},
url: {
list: '/index/cumulativeGraphList'
},
// echarts实例
myChart: null,
// 年份1的echarts数据
echartsData1: {},
// 年份2的echarts数据
echartsData2: {},
queryParam: {},
dataSource: [],
}
},
methods: {
formatMoney,
// 查询
searchQuery () {
const { year1, year2 } = this.queryParam
// 两个年份不能为空
if (!year1) {
this.$message.warning('请选择比对年份1')
return
}
if (!year2) {
this.$message.warning('请选择比对年份2')
return
}
// 两个年份不能相同
if (year1 === year2) {
this.$message.warning('比对年份不能相同')
return
}
this.loadData()
},
// 加载数据
loadData() {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
}
this.confirmLoading = true
// 比对两个年份两次请求
Promise.all([
getAction(this.url.list, { year: this.queryParam.year1 }),
getAction(this.url.list, { year: this.queryParam.year2 }),
]).then(resArr => {
if (resArr[0].success && resArr[1].success) {
let dataSource1 = resArr[0].result || []
let dataSource2 = resArr[1].result || []
const {year1, year2} = this.queryParam
// 树形结构的数据 ，修改成table可以直接展示的数据，默认每年份只有四行数据
let tableData = [
// 年份1
{indexName: `${year1}年预估收入金额`},
{indexName: `${year1}年确认收入金额`},
{indexName: `${year1}年开票金额`},
{indexName: `${year1}年到账金额`},
// 年份2
{indexName: `${year2}年预估收入金额`},
{indexName: `${year2}年确认收入金额`},
{indexName: `${year2}年开票金额`},
{indexName: `${year2}年到账金额`},
]
// 年份1的数据
dataSource1.map((item, index) => {
let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
if (keyItem) {
let key = keyItem.key
tableData[0][key] = item.estimatedArrivalMoney // 预估收入金额--也可能放在第一条
// tableData[0][key] = item.allMoney // 年度待确收金额
tableData[1][key] = item.confirmAmount // 确认收入金额
tableData[2][key] = item.billMoney // 开票金额
tableData[3][key] = item.comeAllMoney // 到账金额
}
})
// 年份2的数据
dataSource2.map((item, index) => {
let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
if (keyItem) {
let key = keyItem.key
tableData[4][key] = item.estimatedArrivalMoney // 预估收入金额--也可能放在第一条
// tableData[0][key] = item.allMoney // 年度待确收金额
tableData[5][key] = item.confirmAmount // 确认收入金额
tableData[6][key] = item.billMoney // 开票金额
tableData[7][key] = item.comeAllMoney // 到账金额
}
})
// 初始化年份1的echarts数据
this.initEchartsData(resArr[0].result, '1')
// 初始化年份2的echarts数据
this.initEchartsData(resArr[1].result, '2')
// 初始化 echarts
this.initEcharts()
this.dataSource = tableData
} else {
this.$message.warning(resArr[resArr[0].success ? 1 : 0].message)
}
}).finally(() => {
this.confirmLoading = false
})
},
// 将后端返回的数据 处理成 echarts需要的数据 格式
initEchartsData(data, suffix) {
this['echartsData' + suffix].confirmAmount = []
this['echartsData' + suffix].billMoney = []
this['echartsData' + suffix].comeAllMoney = []
this['echartsData' + suffix].estimatedArrivalMoney = []
data.map(item =>{
// this.echartsData.allMoney.push(item.allMoney)
this['echartsData' + suffix].confirmAmount.push(item.confirmAmount)
this['echartsData' + suffix].billMoney.push(item.billMoney)
this['echartsData' + suffix].comeAllMoney.push(item.comeAllMoney)
this['echartsData' + suffix].estimatedArrivalMoney.push(item.estimatedArrivalMoney)
})
},
initEcharts() {
// 处理x轴数据
let xData = MonthDataTotal.reduce((pre, val) => {
return pre.concat(val.name)
}, [])
let chartDom = this.$refs.singleMonthTotalEcharts
let myChart = echarts.init(chartDom)
this.myChart = myChart
let option
const { year1, year2 } = this.queryParam
let legend = [
`${year1}年预估收入金额`,
`${year1}年确认收入金额`,
`${year1}年开票金额`,
`${year1}年到账金额`,
`${year2}年预估收入金额`,
`${year2}年确认收入金额`,
`${year2}年开票金额`,
`${year2}年到账金额`,
]
option = {
color: ['#069F99', '#FA9F79', '#728ECC', '#88C87E'],
tooltip: {
trigger: 'axis',
formatter: params => {
// 获取xAxis data中的数据
let dataStr = ''
params.forEach(item => {
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:#fff;border: 2px solid ${item.color};border-radius: 50%"></span>
<span style="color: #666">${item.seriesName}</span>
<span style="float:right;color:#333;margin-left:20px;">${this.formatMoney(item.data)}</span>
</div>
</div>`
})
return dataStr
}
},
legend: {
data: legend,
right: '2%'
},
grid: {
left: '2.4%',
right: '0%',
bottom: '3%',
containLabel: true
},
toolbox: {},
xAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#F5F5F5'
}
},
axisLabel: {
show: true,
color: '#999999'
},
type: 'category',
boundaryGap: true,
// 刻度线设置
axisTick: {
show: false
},
data: xData
},
yAxis: {
axisLine: {
show: true,
lineStyle: {
color: '#f2f2f2'
}
},
axisLabel: {
show: true,
color: '#8E8E95'
},
splitLine: {
lineStyle: {
color: '#F5F5F5',
type: 'dashed'
}
},
type: 'value',
nameTextStyle: {
color: '#8E8E95'
},
},
series: [
// {
// name: '年度待确收金额',
// type: 'line',
// showSymbol: false,
// symbol: 'circle',
// symbolSize: 8,
// data: this.echartsData.allMoney,
// itemStyle: {
// emphasis: {
// color: '#fff',//拐点颜色
// borderColor: '#1BCDC6',//拐点边框颜色
// borderWidth: 2//拐点边框大小
// }
// },
// areaStyle: {
// opacity: 0.2,
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// {
// offset: 0,
// color: '#1BCDC6'
// },
// {
// offset: 1,
// color: '#ffffff'
// }
// ])
// },
// },
{
name: legend[0],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData1.estimatedArrivalMoney,
itemStyle: {
normal: {lineStyle:{type: 'dashed'}},
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#1BCDC6',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#1BCDC6'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
{
name: legend[1],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData1.confirmAmount,
itemStyle: {
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#EBAB91',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#EBAB91'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
{
name: legend[2],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData1.billMoney,
itemStyle: {
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#9CB7F2',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#9CB7F2'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
{
name: legend[3],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData1.comeAllMoney,
itemStyle: {
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#B6F1AC',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B6F1AC'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
{
name: legend[4],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData2.estimatedArrivalMoney,
itemStyle: {
normal: {lineStyle:{type: 'dashed'}},
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#1BCDC6',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#1BCDC6'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
{
name: legend[5],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData2.confirmAmount,
itemStyle: {
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#EBAB91',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#EBAB91'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
{
name: legend[6],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData2.billMoney,
itemStyle: {
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#9CB7F2',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#9CB7F2'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
{
name: legend[7],
type: 'line',
showSymbol: false,
symbol: 'circle',
symbolSize: 8,
data: this.echartsData2.comeAllMoney,
itemStyle: {
emphasis: {
color: '#fff',//拐点颜色
borderColor: '#B6F1AC',//拐点边框颜色
borderWidth: 2//拐点边框大小
}
},
areaStyle: {
opacity: 0.2,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#B6F1AC'
},
{
offset: 1,
color: '#ffffff'
}
])
},
},
]
}
option && myChart.setOption(option)
window.addEventListener('resize', () => {
console.log('resize')
myChart.resize()
})
},
handleCancel () {
this.close()
},
open () {
this.visible = true
},
close () {
this.visible = false
this.myChart && this.myChart.dispose()
this.myChart = null
this.dataSource = []
this.echartsData1 = {}
this.echartsData2 = {}
this.queryParam = {}
}
}
}
</script>
<style lang="less" scoped>
.echarts-box {
width: 100%;
height: 400px;
}
/deep/ .ant-table-thead tr > th {
color: #050525;
font-weight: bold;
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);
}
/deep/ .ant-table-tbody tr > td:first-child {
color: #050525;
font-weight: bold;
background: rgb(245,245,246);
}
</style>