|
|
|
@ -6,6 +6,14 @@ |
|
|
|
@leave="handleLeave" |
|
|
|
ref="layout" |
|
|
|
> |
|
|
|
|
|
|
|
<template #charts> |
|
|
|
<data-view-echart :config="chart1"/> |
|
|
|
<data-view-echart :config="chart2"/> |
|
|
|
<data-view-echart :config="chart3"/> |
|
|
|
<data-view-echart :config="chart4"/> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #left-table> |
|
|
|
<data-view-table |
|
|
|
title="商户数据" |
|
|
|
@ -23,13 +31,6 @@ |
|
|
|
/> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #middle-charts> |
|
|
|
<data-view-echart :config="chart1"/> |
|
|
|
<data-view-echart :config="chart2"/> |
|
|
|
<data-view-echart :config="chart3"/> |
|
|
|
<data-view-echart :config="chart4"/> |
|
|
|
</template> |
|
|
|
|
|
|
|
<template #middle-table> |
|
|
|
<data-view-table |
|
|
|
title="在线卡数据" |
|
|
|
@ -74,7 +75,7 @@ import DataViewLayout from './components/data-view-layout.vue' |
|
|
|
import icon from '@/assets/logo/plain.png' |
|
|
|
import DataViewTable from './components/data-view-table.vue' |
|
|
|
import { amountFormat, amountFriendlyFormat, sortBy } from '@/utils/ruoyi' |
|
|
|
import screenfull from 'screenfull'; |
|
|
|
import screenfull from 'screenfull' |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { DataViewTable, DataViewLayout, DataViewEchart }, |
|
|
|
@ -92,9 +93,9 @@ export default { |
|
|
|
chart1: { |
|
|
|
value: 0, |
|
|
|
total: 0, |
|
|
|
unit: "单", |
|
|
|
unit: '单', |
|
|
|
// 进度条主色(渐变色), 由左到右 |
|
|
|
progressBar: ["#4494FF", '#B04BFF'], |
|
|
|
progressBar: ['#4494FF', '#B04BFF'], |
|
|
|
// 进度条背景色 |
|
|
|
progressBarBG: '#091560', |
|
|
|
// 两边透明的圆边颜色, 第一个浅色, 第二个深色 |
|
|
|
@ -110,13 +111,13 @@ export default { |
|
|
|
// 数值文字 |
|
|
|
valueLabel: '代收成功单数', |
|
|
|
// 总数值文字 |
|
|
|
totalLabel: '总订单：0', |
|
|
|
totalLabel: '总订单：0' |
|
|
|
}, |
|
|
|
chart2: { |
|
|
|
value: 0, |
|
|
|
total: 0, |
|
|
|
unit: "元", |
|
|
|
progressBar: ["#4494FF", '#B04BFF'], |
|
|
|
unit: '元', |
|
|
|
progressBar: ['#4494FF', '#B04BFF'], |
|
|
|
progressBarBG: '#091560', |
|
|
|
circle2Color: ['#168FFF00', '#168FFF'], |
|
|
|
innerCircle: ['#082863', '#082863', '#8000FF68'], |
|
|
|
@ -124,13 +125,13 @@ export default { |
|
|
|
shadowColor: '#2d68ffc4', |
|
|
|
scaleColor: '#6DCBFF', |
|
|
|
valueLabel: '代收成功金额', |
|
|
|
totalLabel: '总金额：0', |
|
|
|
totalLabel: '总金额：0' |
|
|
|
}, |
|
|
|
chart3: { |
|
|
|
value: 0, |
|
|
|
total: 0, |
|
|
|
unit: "单", |
|
|
|
progressBar: ["#4494FF", '#EFA83E'], |
|
|
|
unit: '单', |
|
|
|
progressBar: ['#42EA9A', '#EFA83E'], |
|
|
|
progressBarBG: '#0A2F28', |
|
|
|
circle2Color: ['#30BE7900', '#30BE79'], |
|
|
|
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], |
|
|
|
@ -138,13 +139,13 @@ export default { |
|
|
|
shadowColor: '#30C17Bc4', |
|
|
|
scaleColor: '#6DCBFF', |
|
|
|
valueLabel: '代付成功单数', |
|
|
|
totalLabel: '总金额：0', |
|
|
|
totalLabel: '总金额：0' |
|
|
|
}, |
|
|
|
chart4: { |
|
|
|
value: 0, |
|
|
|
total: 0, |
|
|
|
unit: "元", |
|
|
|
progressBar: ["#4494FF", '#EFA83E'], |
|
|
|
unit: '元', |
|
|
|
progressBar: ['#42EA9A', '#EFA83E'], |
|
|
|
progressBarBG: '#0A2F28', |
|
|
|
circle2Color: ['#30BE7900', '#30BE79'], |
|
|
|
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], |
|
|
|
@ -152,13 +153,21 @@ export default { |
|
|
|
shadowColor: '#30C17Bc4', |
|
|
|
scaleColor: '#6DCBFF', |
|
|
|
valueLabel: '代付成功金额', |
|
|
|
totalLabel: '总金额：0', |
|
|
|
totalLabel: '总金额：0' |
|
|
|
}, |
|
|
|
ws: null, |
|
|
|
isScreenFull: false, |
|
|
|
isScreenFull: false |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
if (this.$route.query.fullscreen) { |
|
|
|
this.isScreenFull = true |
|
|
|
setTimeout(() => { |
|
|
|
this.$nextTick(() => { |
|
|
|
screenfull.request() |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
this.connectWS() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -196,7 +205,7 @@ export default { |
|
|
|
const chart1Total = amountFriendlyFormat(statisticsPush.payTotalQty) |
|
|
|
const chart1Value = amountFriendlyFormat(statisticsPush.paySuccessQty, chart1Total.unit) |
|
|
|
this.chart1.value = chart1Value.amount |
|
|
|
this.chart1.unit = chart1Value.unit + "单" |
|
|
|
this.chart1.unit = chart1Value.unit + '单' |
|
|
|
this.chart1.total = chart1Total.amount |
|
|
|
this.chart1.totalLabel = '总订单：' + chart1Total.display |
|
|
|
|
|
|
|
@ -205,25 +214,24 @@ export default { |
|
|
|
const chart2Total = amountFriendlyFormat(payTotalAmount) |
|
|
|
const chart2Value = amountFriendlyFormat(paySuccessAmount, chart2Total.unit) |
|
|
|
this.chart2.value = chart2Value.amount |
|
|
|
this.chart2.unit = chart2Value.unit + "元" |
|
|
|
this.chart2.unit = chart2Value.unit + '元' |
|
|
|
this.chart2.total = chart2Total.amount |
|
|
|
this.chart2.totalLabel = '总金额：' + chart2Total.display |
|
|
|
|
|
|
|
|
|
|
|
const chart3Total = amountFriendlyFormat(statisticsPush.transferSuccessQty) |
|
|
|
const chart3Value = amountFriendlyFormat(statisticsPush.transferTotalQty, chart3Total.unit) |
|
|
|
const chart3Total = amountFriendlyFormat(statisticsPush.transferTotalQty) |
|
|
|
const chart3Value = amountFriendlyFormat(statisticsPush.transferSuccessQty, chart3Total.unit) |
|
|
|
this.chart3.value = chart3Value.amount |
|
|
|
this.chart3.unit = chart3Value.unit + "单" |
|
|
|
this.chart3.unit = chart3Value.unit + '单' |
|
|
|
this.chart3.total = chart3Total.amount |
|
|
|
this.chart3.totalLabel = '总订单：' + chart3Total.display |
|
|
|
|
|
|
|
|
|
|
|
const transferSuccessAmount = statisticsPush.transferSuccessAmount |
|
|
|
const transferTotalAmount = statisticsPush.transferTotalAmount |
|
|
|
const chart4Total = amountFriendlyFormat(transferTotalAmount) |
|
|
|
const chart4Value = amountFriendlyFormat(transferSuccessAmount, chart4Total.unit) |
|
|
|
|
|
|
|
this.chart4.value = chart4Value.amount |
|
|
|
this.chart4.unit = chart4Value.unit + "元" |
|
|
|
this.chart4.unit = chart4Value.unit + '元' |
|
|
|
this.chart4.total = chart4Total.amount |
|
|
|
this.chart4.totalLabel = '总金额：' + chart4Total.display |
|
|
|
|
|
|
|
@ -232,11 +240,11 @@ export default { |
|
|
|
this.data1 = pushMerchant.map(i => { |
|
|
|
return { |
|
|
|
username: i.username, |
|
|
|
balance: amountFormat({ amount: i.balance }) || "0", |
|
|
|
residueBalance: amountFormat({ amount: i.residueBalance }) || "0", |
|
|
|
collectionSuccessPrice: amountFormat({ amount: i.collectionSuccessPrice }) || "0", |
|
|
|
percentage: (i.percentage * 100).toFixed(2) + "%", |
|
|
|
balanceWarning: i.balanceWarning, |
|
|
|
balance: amountFormat({ amount: i.balance }) || '0', |
|
|
|
residueBalance: amountFormat({ amount: i.residueBalance }) || '0', |
|
|
|
collectionSuccessPrice: amountFormat({ amount: i.collectionSuccessPrice }) || '0', |
|
|
|
percentage: (i.percentage * 100).toFixed(2) + '%', |
|
|
|
balanceWarning: i.balanceWarning |
|
|
|
} |
|
|
|
}) |
|
|
|
this.data1 = sortBy(this.data1, 'balanceWarning') |
|
|
|
@ -245,14 +253,14 @@ export default { |
|
|
|
// 在线卡数据 |
|
|
|
this.data2 = card.map(i => { |
|
|
|
return { |
|
|
|
bankName: i.bankName + '/' + "**** " + i.cardNumber.slice(-4), |
|
|
|
bankName: i.bankName + '/' + '**** ' + i.cardNumber.slice(-4), |
|
|
|
cardHolder: i.cardHolder, |
|
|
|
username: i.username, |
|
|
|
todayIncomeReceived: amountFormat({ amount: i.todayIncomeReceived }) || "0", |
|
|
|
todayRemainingAmount: amountFormat({ amount: i.todayRemainingAmount }) || "0", |
|
|
|
todayOutNumber: i.todayOutNumber + '/' + amountFormat({ amount: i.todayOutReceived }) || "0", |
|
|
|
remainingAmount: amountFormat({ amount: i.remainingAmount }) || "0", |
|
|
|
balanceWarning: i.balanceWarning, |
|
|
|
todayIncomeReceived: amountFormat({ amount: i.todayIncomeReceived }) || '0', |
|
|
|
todayRemainingAmount: amountFormat({ amount: i.todayRemainingAmount }) || '0', |
|
|
|
todayOutNumber: i.todayOutNumber + '/' + amountFormat({ amount: i.todayOutReceived }) || '0', |
|
|
|
remainingAmount: amountFormat({ amount: i.remainingAmount }) || '0', |
|
|
|
balanceWarning: i.balanceWarning |
|
|
|
} |
|
|
|
}) |
|
|
|
this.data2 = sortBy(this.data2, 'balanceWarning') |
|
|
|
@ -261,18 +269,24 @@ export default { |
|
|
|
this.data3 = carddealer.map(i => { |
|
|
|
return { |
|
|
|
username: i.username, |
|
|
|
dayMargin: (amountFormat({ amount: i.dayMargin }) || "0") + (amountFormat({ amount: i.margin }) || "0"), |
|
|
|
toDayTotal: amountFormat({ amount: i.toDayTotal }) || "0", |
|
|
|
turnoverRate: (i.turnoverRate * 100).toFixed(2) + "%", |
|
|
|
balanceWarning: i.balanceWarning, |
|
|
|
dayMargin: (amountFormat({ amount: i.dayMargin }) || '0') + '/' + (amountFormat({ amount: i.margin }) || '0'), |
|
|
|
toDayTotal: amountFormat({ amount: i.toDayTotal }) || '0', |
|
|
|
turnoverRate: (i.turnoverRate * 100).toFixed(2) + '%', |
|
|
|
balanceWarning: i.balanceWarning |
|
|
|
} |
|
|
|
}) |
|
|
|
this.data3 = sortBy(this.data3, 'balanceWarning') |
|
|
|
this.data3 = this.data3.slice(0, 10) |
|
|
|
|
|
|
|
this.$refs.table1.scrollReset(); |
|
|
|
this.$refs.table2.scrollReset(); |
|
|
|
this.$refs.table3.scrollReset(); |
|
|
|
this.$refs.table1.scrollReset() |
|
|
|
this.$refs.table2.scrollReset() |
|
|
|
this.$refs.table3.scrollReset() |
|
|
|
|
|
|
|
const audio = new Audio('/alarm.mp3') |
|
|
|
const hasBalanceWarning = this.data1.some(i => i.balanceWarning) || this.data2.some(i => i.balanceWarning) || this.data3.some(i => i.balanceWarning) |
|
|
|
if (hasBalanceWarning) { |
|
|
|
audio.play() |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
/** |
|
|
|
@ -284,7 +298,7 @@ export default { |
|
|
|
} else { |
|
|
|
screenfull.request(this.$refs.layout.$el) |
|
|
|
} |
|
|
|
this.isScreenFull = !this.isScreenFull; |
|
|
|
this.isScreenFull = !this.isScreenFull |
|
|
|
}, |
|
|
|
disconnect() { |
|
|
|
this.ws?.send({ 'type': 'del_push' }) |
|
|
|
|
