Skip to content

M
mingPayPc
Commit 4004ee1b by liang ce
Options

图表

parent 88beb353
Showing with 165 additions and 140 deletions
package.json
......@@ -14,6 +14,7 @@
"ant-design-vue": "^1.3.8",
"core-js": "^2.6.5",
"dingtalk-jsapi": "^2.6.44",
"echarts": "^4.5.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
......
src/components/common/Home.vue
......@@ -14,7 +14,7 @@
<!-- <a-menu-item key="1">应用管理</a-menu-item> -->
<a-menu-item key="accountManagement">支付管理</a-menu-item>
<a-menu-item key="classificationOfDishes">食堂管理</a-menu-item>
<a-menu-item key="historicalVisitors">访客管理</a-menu-item>
<!-- <a-menu-item key="historicalVisitors">访客管理</a-menu-item> -->
<!-- <a-menu-item key="5">权限管理</a-menu-item> -->
</a-menu>
</a-layout-header>
......
src/components/pages/PaymentManagement/SystemReconciliation.vue
<template>
<div class="SystemReconciliation">
<div class="searchBox">
<a-date-picker
:disabledDate="disabledStartDate"
format="YYYY-MM-DD"
v-model="startValue"
placeholder="开始日期"
@change="onChangeStartValue"
@openChange="handleStartOpenChange"
/>
～
<a-date-picker
:disabledDate="disabledEndDate"
format="YYYY-MM-DD"
placeholder="结束日期"
@change="onChangeEndValue"
v-model="endValue"
:open="endOpen"
@openChange="handleEndOpenChange"
/>
<a-button type="primary" @click="getAccountCheck">查询</a-button>
<a-select 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>
<a-select 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>
<a-button type="primary">查询</a-button>
</div>
<div class="title">账单汇总</div>
<div class="SystemReconciliationContent">
<div class="contentItem">
<div class="title">
充值金额
</div>
<div>
<p><label>现金：</label>¥{{systemReconciliationDetails.internalRechargeAmount || '0.00'}}</p>
<p><label>支付宝：</label>¥{{systemReconciliationDetails.externalRechargeAmount || '0.00'}}</p>
</div>
<div><p>共计：<span>¥{{ returnRechargeAmount() }}</span></p></div>
</div>
<div class="contentItem">
<div class="title">
发放津贴
</div>
<div>
<p v-for=" item in systemReconciliationDetails.subsidyCheck" :key="item.sceneType"><label>{{ item.sceneType === 'TRAVEL' ? '交通补助' : '餐补' }}：</label>¥{{ item.amount || '0.00' }}</p>
</div>
<div><p>共计：<span>¥{{ returnSubsidyCheckTotal() }}</span></p></div>
</div>
<div class="contentItem">
<div class="title">
消费金额
</div>
<div class="recordsBox">
<div v-for="item in systemReconciliationDetails.consumeCheck" :key="item.sceneType">
<div>{{ item.sceneType === 'TRAVEL' ? '交通消费' : '用餐消费' }}：</div>
<div>
<p>现金：¥{{ item.realityAmount || '0.00' }}</p>
<p>津贴：¥{{ item.subsidyAmount || '0.00' }}</p>
</div>
</div>
</div>
<div>
<p>共计：<span>¥{{ returnConsumeCheck('total') }}</span></p>
<p>津贴总消费：<span>¥{{ returnConsumeCheck('subsidyAmount') }}</span></p>
<p>现金总消费：<span>¥{{ returnConsumeCheck('realityAmount') }}</span></p>
</div>
</div>
</div>
<div id="rechargeLine" :style="{width: '900px', height: '300px'}"></div>
<div id="subsidyList" :style="{width: '900px', height: '300px'}"></div>
<div id="consumeLine" :style="{width: '900px', height: '300px'}"></div>
</div>
</template>
<script>
import { $http } from './../../../api/axios.js'
import moment from 'moment'
export default {
name: 'systemReconciliation',
data () {
return {
startTime: '',
endTime: '',
startValue: null,
endValue: null,
endOpen: false,
systemReconciliationDetails: {}
year: '',
month: '',
SubsidyListDataList: [],
ConsumeDataList: [],
RechargeDataList: [],
yearList: []
}
},
created () {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = (new Date(year, month, 0).getDate().toString()).length > 1 ? new Date(year, month, 0).getDate() : '0' + new Date(year, month, 0).getDate()
this.startTime = `${year}-${month.toString().length > 1 ? month : '0' + month}-01`
this.endTime = `${year}-${month.toString().length > 1 ? month : '0' + month}-${day}`
this.startValue = this.moment(`${year}-${month.toString().length > 1 ? month : '0' + month}-01`, 'YYYY-MM-DD')
this.endValue = this.moment(`${year}-${month.toString().length > 1 ? month : '0' + month}-${day}`, 'YYYY-MM-DD')
this.getAccountCheck()
},
methods: {
moment,
disabledStartDate (startValue) {
const endValue = this.endValue
if (!startValue || !endValue) {
return false
let thisYear = new Date().getFullYear()
for (let i = 2018; i <= thisYear; i++) {
this.yearList.push(i)
}
return startValue.valueOf() > endValue.valueOf() || startValue.valueOf() >= moment().endOf('day').valueOf()
this.year = new Date().getFullYear()
this.month = new Date().getMonth() + 1
this.getStatisticsSubsidyData()
this.getStatisticsConsumeData()
this.getStatisticsRechargeData()
},
disabledEndDate (endValue) {
const startValue = this.startValue
if (!endValue || !startValue) {
return false
}
return startValue.valueOf() > endValue.valueOf() || endValue.valueOf() > moment().endOf('day').valueOf()
mounted () {
// this.drawLine()
},
handleStartOpenChange (open) {
if (!open) {
this.endOpen = true
methods: {
drawSubsidyListDataLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('subsidyList'))
// 绘制图表
let xAxisData = []
let data1 = []
let data2 = []
this.SubsidyListDataList.map(item => {
xAxisData.push(item.abscissaKey)
debugger
if (item.sceneTypeTotalAmountMap !== null) {
data1.push(item.sceneTypeTotalAmountMap.MEAl)
data2.push(item.sceneTypeTotalAmountMap.TRAVEL)
} else {
data1.push('')
data2.push('')
}
})
myChart.setOption({
title: { text: '发放津贴金额' },
tooltip: {},
xAxis: {
data: xAxisData
},
handleEndOpenChange (open) {
this.endOpen = open
},
onChangeStartValue (date, dateString) {
this.startTime = dateString
yAxis: {},
series: [{
name: '餐补津贴',
type: 'bar',
data: data1
}, {
name: '交通津贴',
type: 'bar',
data: data2
}]
})
},
onChangeEndValue (date, dateString) {
this.endTime = dateString
drawRechargeListDataLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('rechargeLine'))
// 绘制图表
let xAxisData = []
let data1 = []
let data2 = []
this.SubsidyListDataList.map(item => {
xAxisData.push(item.abscissaKey)
data1.push(item.internalRechargeAmount)
data2.push(item.externalRechargeAmount)
})
myChart.setOption({
title: { text: '充值金额' },
tooltip: {},
xAxis: {
data: xAxisData
},
returnConsumeCheck (str) {
let totalNum = 0
if (this.systemReconciliationDetails.consumeCheck) {
if (str === 'realityAmount') {
this.systemReconciliationDetails.consumeCheck.map(item => {
let realityAmountNum = item.realityAmount ? item.realityAmount : 0
totalNum = totalNum + parseFloat(realityAmountNum)
yAxis: {},
series: [{
name: '支付宝充值',
type: 'bar',
data: data1
}, {
name: '现金充值',
type: 'bar',
data: data2
}]
})
return totalNum.toFixed(2)
} else if (str === 'subsidyAmount') {
this.systemReconciliationDetails.consumeCheck.map(item => {
let subsidyAmountNum = item.subsidyAmount ? item.subsidyAmount : 0
totalNum = totalNum + parseFloat(subsidyAmountNum)
},
drawConsumeListDataLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('consumeLine'))
// 绘制图表
let xAxisData = []
let data1 = []
let data2 = []
let data3 = []
this.SubsidyListDataList.map(item => {
xAxisData.push(item.abscissaKey)
data1.push(item.internalConsumeRealityAmount)
data2.push(item.internalConsumeSubsidyAmount)
data3.push(item.externalConsumeRealityAmount)
})
return totalNum.toFixed(2)
} else if (str === 'total') {
this.systemReconciliationDetails.consumeCheck.map(item => {
let orderAmountNum = item.orderAmount ? item.orderAmount : 0
totalNum = totalNum + parseFloat(orderAmountNum)
// internalConsumeRealityAmount 员工现金
// internalConsumeSubsidyAmount 津贴
// externalConsumeRealityAmount 访客消费
myChart.setOption({
title: { text: '消费金额' },
tooltip: {},
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '员工现金消费',
type: 'bar',
data: data1
}, {
name: '员工津贴消费',
type: 'bar',
data: data2
}, {
name: '访客消费',
type: 'bar',
data: data3
}]
})
return totalNum.toFixed(2)
},
handleChange (value) {
console.log(`selected ${value}`)
},
getStatisticsSubsidyData () {
let that = this
let SubsidyListData = {
year: this.year,
month: this.month
}
$http.get(`/mingpay/v1/isv/account/statisticsSubsidy`, SubsidyListData).then((res) => {
if (res.data.resultCode === 0) {
that.SubsidyListDataList = res.data.data
that.drawSubsidyListDataLine()
} else {
return '0.00'
this.$message.error(res.data.message)
}
},
returnSubsidyCheckTotal () {
let totalNum = 0
if (this.systemReconciliationDetails.subsidyCheck) {
this.systemReconciliationDetails.subsidyCheck.map(item => {
let amountNum = item.amount ? item.amount : 0
totalNum = totalNum + parseFloat(amountNum)
})
return totalNum.toFixed(2)
},
getStatisticsConsumeData () {
let that = this
let ConsumeData = {
year: this.year,
month: this.month
}
$http.get(`/mingpay/v1/isv/account/statisticsConsume`, ConsumeData).then((res) => {
console.log(res.data.data)
if (res.data.resultCode === 0) {
that.ConsumeDataList = res.data.data
that.drawConsumeListDataLine()
} else {
return '0.00'
this.$message.error(res.data.message)
}
})
},
returnRechargeAmount () {
let internalRechargeAmount = this.systemReconciliationDetails.internalRechargeAmount || 0
let externalRechargeAmount = this.systemReconciliationDetails.externalRechargeAmount || 0
let totalNum = parseFloat(internalRechargeAmount) + parseFloat(externalRechargeAmount)
return totalNum.toFixed(2)
},
getAccountCheck () {
let SubsidyListData = {
startTime: this.startTime,
endTime: this.endTime
getStatisticsRechargeData () {
let that = this
let RechargeData = {
year: this.year,
month: this.month
}
$http.get(`/mingpay/v1/isv/account/accountCheck`, SubsidyListData).then((res) => {
$http.get(`/mingpay/v1/isv/account/statisticsRecharge`, RechargeData).then((res) => {
console.log(res.data.data)
if (res.data.resultCode === 0) {
this.systemReconciliationDetails = res.data.data
that.RechargeDataList = res.data.data
that.drawRechargeListDataLine()
} else {
this.$message.error(res.data.message)
}
......
src/main.js
......@@ -6,6 +6,7 @@ import { Upload, Menu, Layout, Checkbox, Breadcrumb, Popover, Icon, Button, Date
import 'ant-design-vue/dist/antd.css'
import { config } from './api/config'
import './assets/css/global.css'
import echarts from 'echarts'
Vue.use(Layout)
Vue.use(Upload)
......@@ -32,8 +33,10 @@ Vue.use(Input.TextArea)
Vue.use(message)
Vue.use(Pagination)
Vue.config.productionTip = false
Vue.prototype.$confirm = Modal.confirm
Vue.prototype.$message = message
Vue.prototype.$echarts = echarts
router.beforeEach(function (to, from, next) {
// 项目初始化进行鉴权
......
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