【开发】首页统计开发
This commit is contained in:
fengachen
@@ -0,0 +1,391 @@
|
||||
<!--全所收入 累计统计echarts-->
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- echarts-->
|
||||
<div class="title">全所收入统计 (累计)</div>
|
||||
<div class="echarts-box" id="singleMonthTotalEcharts"></div>
|
||||
<!-- echarts-->
|
||||
|
||||
<!-- 表格区域beign -->
|
||||
<div style="width: 100%">
|
||||
<a-table
|
||||
ref="table"
|
||||
size="middle"
|
||||
bordered
|
||||
rowKey="projectId"
|
||||
:columns="columns"
|
||||
:scroll="{x: 1500}"
|
||||
: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'
|
||||
import {JeroListMixin} from '@/mixins/JeroListMixin'
|
||||
import {MonthDataTotal} from '@views/statisticalReport/statisticData'
|
||||
import {getAction} from '@api/manage'
|
||||
import {formatMoney} from '@/utils/formatMoney'
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
dataIndex: 'indexName',
|
||||
scopedSlots: {customRender: 'text'}
|
||||
},
|
||||
]
|
||||
MonthDataTotal.map(tt => {
|
||||
columns.push({
|
||||
title: tt.name,
|
||||
align: 'center',
|
||||
width: 100,
|
||||
dataIndex: tt.key,
|
||||
scopedSlots: {customRender: 'allMoney'}
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
export default {
|
||||
name: 'SingleMonthEcharts',
|
||||
mixins: [JeroListMixin],
|
||||
data() {
|
||||
return {
|
||||
columns,
|
||||
url: {
|
||||
list: '/index/cumulativeGraphList'
|
||||
},
|
||||
disableMixinCreated:true,
|
||||
echartsData:{
|
||||
allMoney:[],
|
||||
confirmAmount:[],
|
||||
billMoney:[],
|
||||
comeAllMoney:[]
|
||||
}
|
||||
}
|
||||
},
|
||||
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()//查询条件
|
||||
this.loading = true
|
||||
getAction(this.url.list, params).then((res) => {
|
||||
if (res.success) {
|
||||
let dataSource = res.result
|
||||
// 树形结构的数据 ，修改成table可以直接展示的数据，默认只有四行数据
|
||||
let tableData = [
|
||||
{indexName: '合同金额'},
|
||||
{indexName: '确认收入金额'},
|
||||
{indexName: '开票金额'},
|
||||
{indexName: '到账金额'},
|
||||
]
|
||||
|
||||
dataSource.map((item, index) => {
|
||||
let keyItem = MonthDataTotal.find(ele => Number(ele.value) === (index + 1))
|
||||
if (keyItem) {
|
||||
let key = keyItem.key
|
||||
tableData[0][key] = item.allMoney // 合同金额
|
||||
tableData[1][key] = item.confirmAmount // 确认收入金额
|
||||
tableData[2][key] = item.billMoney // 开票金额
|
||||
tableData[3][key] = 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.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)
|
||||
})
|
||||
},
|
||||
initEcharts() {
|
||||
// 处理x轴数据
|
||||
let xData = MonthDataTotal.reduce((pre, val) => {
|
||||
return pre.concat(val.name)
|
||||
}, [])
|
||||
|
||||
let chartDom = document.getElementById('singleMonthTotalEcharts')
|
||||
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>${item.seriesName}</span>
|
||||
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
return dataStr
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['合同金额', '确认收入金额', '开票金额', '到账金额'],
|
||||
right: '2%'
|
||||
},
|
||||
grid: {
|
||||
left: '0%',
|
||||
right: '2%',
|
||||
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: '确认收入金额',
|
||||
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>
|
||||
Reference in New Issue
Block a user