Commit 3cacfdf4 by liang ce

图表修改

parent 2a4023a7
<template> <template>
<div class="SystemReconciliation"> <div class="SystemReconciliation">
<div class="searchBox"> <div class="searchBox">
<a-select placeholder="请选择年" v-model="year" style="width: 120px" @change="handleChange"> <a-select allowClear placeholder="请选择年" v-model="year" style="width: 120px" @change="handleChange">
<a-select-option v-for="item in yearList" :key="item" :value="item">{{item}}</a-select-option> <a-select-option v-for="item in yearList" :key="item" :value="item">{{item}}</a-select-option>
</a-select> </a-select>
<a-select placeholder="请选择月" v-model="month" style="width: 120px;margin-left: 10px" @change="handleChange"> <a-select allowClear placeholder="请选择月" v-model="month" style="width: 120px;margin-left: 10px" @change="handleChange">
<a-select-option v-for="item in 12" :key="item" :value="item">{{item}}</a-select-option> <a-select-option v-for="item in 12" :key="item" :value="item">{{item}}</a-select-option>
</a-select> </a-select>
<a-button type="primary" @click="init">查询</a-button> <a-button type="primary" @click="init">查询</a-button>
</div> </div>
<div class="title">账单汇总</div> <div class="title">账单汇总</div>
<div id="rechargeLine" :style="{width: '900px', height: '300px'}"></div> <div style="width: 100%;overflow-x:scroll">
<div id="subsidyList" :style="{width: '900px', height: '300px'}"></div> <div id="rechargeLine" :style="{width: '100%', height: '300px'}"></div>
<div id="consumeLine" :style="{width: '900px', height: '300px'}"></div> </div>
<div style="width: 100%;overflow-x:scroll">
<div id="subsidyList" :style="{width: '100%', height: '300px'}"></div>
</div>
<div style="width: 100%;overflow-x:scroll">
<div id="consumeLine" :style="{width: '100%', height: '300px'}"></div>
</div>
</div> </div>
</template> </template>
...@@ -27,7 +33,8 @@ export default { ...@@ -27,7 +33,8 @@ export default {
SubsidyListDataList: [], SubsidyListDataList: [],
ConsumeDataList: [], ConsumeDataList: [],
RechargeDataList: [], RechargeDataList: [],
yearList: [] yearList: [],
lineWidth: []
} }
}, },
created () { created () {
...@@ -44,6 +51,10 @@ export default { ...@@ -44,6 +51,10 @@ export default {
}, },
methods: { methods: {
init () { init () {
if (!this.year) {
this.$message.success('请选择年份')
return
}
this.getStatisticsSubsidyData() this.getStatisticsSubsidyData()
this.getStatisticsConsumeData() this.getStatisticsConsumeData()
this.getStatisticsRechargeData() this.getStatisticsRechargeData()
...@@ -56,19 +67,26 @@ export default { ...@@ -56,19 +67,26 @@ export default {
let data1 = [] let data1 = []
let data2 = [] let data2 = []
this.SubsidyListDataList.map(item => { this.SubsidyListDataList.map(item => {
xAxisData.push(item.abscissaKey) xAxisData.push(parseInt(item.abscissaKey))
debugger
if (item.sceneTypeTotalAmountMap !== null) { if (item.sceneTypeTotalAmountMap !== null) {
data1.push(item.sceneTypeTotalAmountMap.MEAl) data1.push(item.sceneTypeTotalAmountMap.MEAl ? item.sceneTypeTotalAmountMap.MEAl : 0)
data2.push(item.sceneTypeTotalAmountMap.TRAVEL) data2.push(item.sceneTypeTotalAmountMap.TRAVEL ? item.sceneTypeTotalAmountMap.TRAVEL : 0)
} else { } else {
data1.push('') data1.push(0)
data2.push('') data2.push(0)
} }
}) })
myChart.setOption({ myChart.setOption({
title: { text: '发放津贴金额' }, title: { text: '发放津贴金额' },
tooltip: {}, tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['餐补津贴', '交通津贴']
},
xAxis: { xAxis: {
data: xAxisData data: xAxisData
}, },
...@@ -91,14 +109,25 @@ export default { ...@@ -91,14 +109,25 @@ export default {
let xAxisData = [] let xAxisData = []
let data1 = [] let data1 = []
let data2 = [] let data2 = []
this.SubsidyListDataList.map(item => { this.RechargeDataList.map(item => {
xAxisData.push(item.abscissaKey) xAxisData.push(parseInt(item.abscissaKey))
data1.push(item.internalRechargeAmount) data1.push(item.internalRechargeAmount ? item.internalRechargeAmount : 0)
data2.push(item.externalRechargeAmount) data2.push(item.externalRechargeAmount ? item.externalRechargeAmount : 0)
}) })
myChart.setOption({ myChart.setOption({
title: { text: '充值金额' }, title: { text: '充值金额' },
tooltip: {}, legend: {
data: ['支付宝充值', '现金充值']
},
grid: {
left: '10%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: { xAxis: {
data: xAxisData data: xAxisData
}, },
...@@ -122,21 +151,30 @@ export default { ...@@ -122,21 +151,30 @@ export default {
let data1 = [] let data1 = []
let data2 = [] let data2 = []
let data3 = [] let data3 = []
this.SubsidyListDataList.map(item => { this.ConsumeDataList.map(item => {
xAxisData.push(item.abscissaKey) xAxisData.push(parseInt(item.abscissaKey))
data1.push(item.internalConsumeRealityAmount) data1.push(item.internalConsumeRealityAmount ? item.internalConsumeRealityAmount : 0)
data2.push(item.internalConsumeSubsidyAmount) data2.push(item.internalConsumeSubsidyAmount ? item.internalConsumeSubsidyAmount : 0)
data3.push(item.externalConsumeRealityAmount) data3.push(item.externalConsumeRealityAmount ? item.externalConsumeRealityAmount : 0)
}) })
// internalConsumeRealityAmount 员工现金 // internalConsumeRealityAmount 员工现金
// internalConsumeSubsidyAmount 津贴 // internalConsumeSubsidyAmount 津贴
// externalConsumeRealityAmount 访客消费 // externalConsumeRealityAmount 访客消费
myChart.setOption({ myChart.setOption({
title: { text: '消费金额' }, title: { text: '消费金额' },
tooltip: {}, tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: { xAxis: {
data: xAxisData data: xAxisData
}, },
legend: {
data: ['员工现金消费', '员工津贴消费', '访客消费']
},
yAxis: {}, yAxis: {},
series: [{ series: [{
name: '员工现金消费', name: '员工现金消费',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment