472 lines
13 KiB
Vue
472 lines
13 KiB
Vue
<!--全所收入 单月统计echarts-->
|
|
<template>
|
|
<div class="container">
|
|
<!-- echarts-->
|
|
<div class="title">全院经营数据统计(单月)
|
|
<j-year-date style="width:250px" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
|
|
</div>
|
|
<div class="echarts-box" id="singleMonthEcharts"></div>
|
|
<!-- echarts-->
|
|
|
|
<!-- 表格区域beign -->
|
|
<div style="width: 100%">
|
|
<a-table
|
|
ref="table"
|
|
size="middle"
|
|
bordered
|
|
rowKey="projectId"
|
|
:columns="columns"
|
|
:scroll="{x: 1100}"
|
|
:dataSource="dataSource"
|
|
:pagination="false"
|
|
:loading="loading"
|
|
@change="handleTableChange"
|
|
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 -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts/core'
|
|
import {
|
|
DatasetComponent,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
TransformComponent,
|
|
ToolboxComponent
|
|
} from 'echarts/components'
|
|
import { LineChart } from 'echarts/charts'
|
|
import { UniversalTransition } from 'echarts/features'
|
|
import { CanvasRenderer } from 'echarts/renderers'
|
|
|
|
echarts.use([
|
|
DatasetComponent,
|
|
TitleComponent,
|
|
TooltipComponent,
|
|
GridComponent,
|
|
TransformComponent,
|
|
LineChart,
|
|
CanvasRenderer,
|
|
UniversalTransition,
|
|
ToolboxComponent
|
|
])
|
|
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
|
import {MonthData} from '@views/statisticalReport/statisticData'
|
|
import {getAction} from '@api/manage'
|
|
import {formatMoney} from '@/utils/formatMoney'
|
|
import JYearDate from '@comp/jero/JYearDate'
|
|
|
|
const columns = [
|
|
{
|
|
title: '',
|
|
align: 'center',
|
|
width: 110,
|
|
dataIndex: 'indexName',
|
|
scopedSlots: {customRender: 'text'}
|
|
},
|
|
]
|
|
MonthData.map(tt => {
|
|
columns.push({
|
|
title: tt.name,
|
|
align: 'center',
|
|
width: 115,
|
|
dataIndex: tt.key,
|
|
scopedSlots: {customRender: 'allMoney'}
|
|
})
|
|
})
|
|
|
|
columns.push({
|
|
title: '总数',
|
|
align: 'center',
|
|
width: 100,
|
|
dataIndex: 'key12',
|
|
scopedSlots: {customRender: 'allMoney'}
|
|
})
|
|
|
|
|
|
export default {
|
|
name: 'SingleMonthEcharts',
|
|
components:{
|
|
JYearDate
|
|
},
|
|
mixins: [JeroListMixin],
|
|
data() {
|
|
return {
|
|
columns,
|
|
url: {
|
|
list: '/index/lineChartList'
|
|
},
|
|
queryParam:{},
|
|
disableMixinCreated:true,
|
|
echartsData:{
|
|
// allMoney:[],
|
|
confirmAmount:[],
|
|
billMoney:[],
|
|
comeAllMoney:[],
|
|
estimatedArrivalMoney:[] // 预计到账金额
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadData(1)
|
|
},
|
|
methods: {
|
|
formatMoney,
|
|
loadData(arg) {
|
|
if (!this.url.list) {
|
|
this.$message.error('请设置url.list属性!')
|
|
return
|
|
}
|
|
//加载数据 若传入参数1则加载第一页的内容
|
|
if (arg === 1) {
|
|
this.ipagination.current = 1
|
|
}
|
|
let params = this.getQueryParams()//查询条件
|
|
params = Object.assign({}, params, {year: this.queryParam.year})
|
|
this.loading = true
|
|
getAction(this.url.list, params).then((res) => {
|
|
if (res.success) {
|
|
let dataSource = res.result
|
|
// 树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
|
|
let tableData = [
|
|
// {indexName: '年度待确收金额'},
|
|
{indexName: '预估收入金额'},
|
|
{indexName: '确认收入金额'},
|
|
{indexName: '开票金额'},
|
|
{indexName: '到账金额'}
|
|
]
|
|
|
|
dataSource.map((item, index) => {
|
|
let keyItem = MonthData.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 // 到账金额
|
|
|
|
}
|
|
// 单月总数
|
|
if(index === 12){
|
|
tableData[0].key12 = item.estimatedArrivalMoney // 预估收入金额
|
|
tableData[1].key12 = item.confirmAmount // 确认收入金额
|
|
tableData[2].key12 = item.billMoney // 开票金额
|
|
tableData[3].key12 = item.comeAllMoney // 到账金额
|
|
}
|
|
})
|
|
|
|
this.initEchartsData(res.result)
|
|
// 初始化 echarts
|
|
this.initEcharts()
|
|
this.dataSource = tableData
|
|
}
|
|
if (res.code === 510) {
|
|
this.$message.warning(res.message)
|
|
}
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
// 将后端返回的数据 处理成 echarts需要的数据 格式
|
|
initEchartsData(data) {
|
|
data.slice(0,12).map(item =>{
|
|
// this.echartsData.allMoney.push(item.allMoney)
|
|
this.echartsData.confirmAmount.push(item.confirmAmount)
|
|
this.echartsData.billMoney.push(item.billMoney)
|
|
this.echartsData.comeAllMoney.push(item.comeAllMoney)
|
|
this.echartsData.estimatedArrivalMoney.push(item.estimatedArrivalMoney)
|
|
|
|
})
|
|
},
|
|
initEcharts() {
|
|
// 处理x轴数据
|
|
let xData = MonthData.reduce((pre, val) => {
|
|
return pre.concat(val.name)
|
|
}, [])
|
|
|
|
let chartDom = document.getElementById('singleMonthEcharts')
|
|
let myChart = echarts.init(chartDom)
|
|
let option
|
|
|
|
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: [ '预估收入金额', '确认收入金额', '开票金额', '到账金额'],
|
|
right: '2%'
|
|
},
|
|
grid: {
|
|
left: '2.4%',
|
|
right: '5%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {},
|
|
xAxis: {
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#F5F5F5'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#999999'
|
|
},
|
|
type: 'category',
|
|
boundaryGap: ['30%','20%'],
|
|
// 刻度线设置
|
|
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: '预估收入金额',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
symbol: 'circle',
|
|
symbolSize: 8,
|
|
data: this.echartsData.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: '确认收入金额',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
symbol: 'circle',
|
|
symbolSize: 8,
|
|
data: this.echartsData.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: '开票金额',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
symbol: 'circle',
|
|
symbolSize: 8,
|
|
data: this.echartsData.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: '到账金额',
|
|
type: 'line',
|
|
showSymbol: false,
|
|
symbol: 'circle',
|
|
symbolSize: 8,
|
|
data: this.echartsData.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', () => {
|
|
myChart.resize()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.container {
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
.title {
|
|
text-align: left;
|
|
font-weight: 500;
|
|
color: #333;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.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> |