diff --git a/public/alarm.mp3 b/public/alarm.mp3 new file mode 100644 index 0000000..595d3b5 Binary files /dev/null and b/public/alarm.mp3 differ diff --git a/src/utils/ruoyi.js b/src/utils/ruoyi.js index edd8e8a..4d6434a 100644 --- a/src/utils/ruoyi.js +++ b/src/utils/ruoyi.js @@ -390,6 +390,43 @@ export const amountFormat = (o) => { return amount; } +/** + * 格式化金额, 自动进万, 百万 + * @param amount + * @param unit + */ +export function amountFriendlyFormat(amount, unit) { + // 百万 + if (amount >= 1000000 || unit === '百万') { + return { + unit: '百万', + amount: amount / 1000000, + display: `${amount / 1000000}百万` + } + } + // 万 + if (amount >= 10000 || unit === '万') { + return { + unit: '万', + amount: amount / 10000, + display: `${amount / 10000}万` + } + } + // 百 + if (amount >= 100 || unit === '百') { + return { + unit: '百', + amount: amount / 100, + display: `${amount / 100}百` + } + } + return { + unit: '', + amount: amount, + display: amount + }; +} + /** * sortBy */ diff --git a/src/views/data-view/components/data-view-echart.vue b/src/views/data-view/components/data-view-echart.vue index 9b4b9ea..e78128d 100644 --- a/src/views/data-view/components/data-view-echart.vue +++ b/src/views/data-view/components/data-view-echart.vue @@ -21,7 +21,7 @@ export default { }) }, immediate: true, - deep: true, + deep: true } }, data() { @@ -31,7 +31,7 @@ export default { }, computed: { option() { - let percent = 0; + let percent = 0 if (this.config.total === 0) { percent = 0 } else { @@ -203,13 +203,13 @@ export default { shadowColor: this.config.shadowColor, shadowBlur: 25, shadowOffsetX: 0, - shadowOffsetY: -25 + shadowOffsetY: -15 } }] }, // 阴影的边框(中间) { - name: '内部透明起始结束的圆边', + name: '阴影的边框(中间)', type: 'gauge', center: center, radius: '70%', @@ -217,26 +217,26 @@ export default { lineStyle: { color: [ // 右/下/左/上 - [0.4, new echarts.graphic.LinearGradient( - 1, 0, 0, 0, - [{ - offset: 0, - color: this.config.opacityBorder[0] - }, { - offset: 1, - color: this.config.opacityBorder[1] - }] - )], - [0.6, new echarts.graphic.LinearGradient( - 1, 0, 0, 0, - [{ - offset: 0, - color: this.config.opacityBorder[0] - }, { - offset: 1, - color: this.config.opacityBorder[0] - }] - )] + [ + 0.6, + new echarts.graphic.LinearGradient( + 0, 0, 1, 0, + [ + { + offset: 0.2, + color: this.config.opacityBorder[0] + }, + { + offset: 0.7, + color: this.config.opacityBorder[1] + }, + { + offset: 1, + color: this.config.opacityBorder[0] + } + ] + ) + ] ], width: 2 } diff --git a/src/views/data-view/components/data-view-layout.vue b/src/views/data-view/components/data-view-layout.vue index 85f873a..583d884 100644 --- a/src/views/data-view/components/data-view-layout.vue +++ b/src/views/data-view/components/data-view-layout.vue @@ -87,7 +87,7 @@ export default { } } - diff --git a/src/views/data-view/components/data-view-table.vue b/src/views/data-view/components/data-view-table.vue index 4caf8da..9ff6002 100644 --- a/src/views/data-view/components/data-view-table.vue +++ b/src/views/data-view/components/data-view-table.vue @@ -98,7 +98,7 @@ export default { }, methods: { scrollReset() { - this.$refs.tbody.scroll({top: 0, behavior: "smooth"}) + // this.$refs.tbody.scroll({top: 0, behavior: "smooth"}) }, mouseleave() { this.scroll() @@ -107,18 +107,18 @@ export default { clearTimeout(this.timer) }, scroll() { - const tbody = this.$refs.tbody - if ((tbody.clientHeight + tbody.scrollTop) < tbody.scrollHeight) { - clearInterval(this.timer) - this.timer = setInterval(() => { - const remainScrollTop = tbody.scrollHeight - (tbody.clientHeight + tbody.scrollTop) - tbody.scrollTop += 1 - if (tbody.scrollTop >= remainScrollTop) { - tbody.scrollTop = 0; - } - }, 50) - - } + // const tbody = this.$refs.tbody + // if ((tbody.clientHeight + tbody.scrollTop) < tbody.scrollHeight) { + // clearInterval(this.timer) + // this.timer = setInterval(() => { + // const remainScrollTop = tbody.scrollHeight - (tbody.clientHeight + tbody.scrollTop) + // tbody.scrollTop += 1 + // if (tbody.scrollTop >= remainScrollTop) { + // tbody.scrollTop = 0; + // } + // }, 50) + // + // } } } } @@ -127,36 +127,6 @@ export default { .data-view-table { - .data-view-table-header { - height: 51px; - align-items: center; - padding-left: 28px; - display: flex; - flex-direction: row; - background-size: cover; - background-repeat: no-repeat; - - .data-view-table-header-parta { - width: 350px; - height: 100%; - background-size: cover; - background-repeat: no-repeat; - } - .data-view-table-header-partb { - width: 100%; - height: 100%; - background-size: cover; - background-repeat: no-repeat; - } - - .header-title { - font-size: 22px; - /* identical to box height */ - text-transform: uppercase; - color: #FFFFFF; - } - - } table { /*设置相邻单元格的边框间的距离*/ @@ -237,6 +207,38 @@ export default { } } + +.data-view-table-header { + height: 51px; + align-items: center; + padding-left: 28px; + display: flex; + flex-direction: row; + background-repeat: no-repeat; + background-size: 100% 100%; + + .data-view-table-header-parta { + width: 350px; + height: 100%; + background-size: cover; + background-repeat: no-repeat; + } + .data-view-table-header-partb { + width: 100%; + height: 100%; + background-size: cover; + background-repeat: no-repeat; + } + + .header-title { + font-size: 22px; + /* identical to box height */ + text-transform: uppercase; + color: #FFFFFF; + } + +} + .data-view-table--large { table tbody { diff --git a/src/views/data-view/data-view.vue b/src/views/data-view/data-view.vue index 45f710e..bf25d59 100644 --- a/src/views/data-view/data-view.vue +++ b/src/views/data-view/data-view.vue @@ -73,7 +73,7 @@ import DataViewEchart from './components/data-view-echart.vue' 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, sortBy } from '@/utils/ruoyi' +import { amountFormat, amountFriendlyFormat, sortBy } from '@/utils/ruoyi' import screenfull from 'screenfull'; export default { @@ -104,7 +104,7 @@ export default { // 透明边框的颜色, 数组第一个为浅色, 第二个为深色 opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'], // 投影颜色 - shadowColor: '#2D68FF', + shadowColor: '#2d68ffc4', // 刻度颜色 scaleColor: '#6DCBFF', // 数值文字 @@ -121,7 +121,7 @@ export default { circle2Color: ['#168FFF00', '#168FFF'], innerCircle: ['#082863', '#082863', '#8000FF68'], opacityBorder: ['rgba(0, 0, 0, 0)', 'rgba(45, 103, 252, 1)'], - shadowColor: '#2D68FF', + shadowColor: '#2d68ffc4', scaleColor: '#6DCBFF', valueLabel: '代收成功金额', totalLabel: '总金额：0', @@ -135,7 +135,7 @@ export default { circle2Color: ['#30BE7900', '#30BE79'], innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'], - shadowColor: '#30C17B', + shadowColor: '#30C17Bc4', scaleColor: '#6DCBFF', valueLabel: '代付成功单数', totalLabel: '总金额：0', @@ -149,7 +149,7 @@ export default { circle2Color: ['#30BE7900', '#30BE79'], innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'], opacityBorder: ['rgba(0, 0, 0, 0)', '#30C17B'], - shadowColor: '#30C17B', + shadowColor: '#30C17Bc4', scaleColor: '#6DCBFF', valueLabel: '代付成功金额', totalLabel: '总金额：0', @@ -192,23 +192,40 @@ export default { // transferSuccessQty 代付成功订单数 // transferSuccessAmount 代付成功金额 // transferTotalAmount 代付总金额 - console.log("statisticsPush", statisticsPush) - this.chart1.value = statisticsPush.paySuccessQty - this.chart1.total = statisticsPush.payTotalQty - this.chart1.totalLabel = '总订单：' + statisticsPush.payTotalQty + const chart1Total = amountFriendlyFormat(statisticsPush.payTotalQty) + const chart1Value = amountFriendlyFormat(statisticsPush.paySuccessQty, chart1Total.unit) + this.chart1.value = chart1Value.amount + this.chart1.unit = chart1Value.unit + "单" + this.chart1.total = chart1Total.amount + this.chart1.totalLabel = '总订单：' + chart1Total.display - this.chart2.value = this.NumberDiv(statisticsPush.paySuccessAmount, 100) - this.chart2.total = this.NumberDiv(statisticsPush.payTotalAmount, 100) - this.chart2.totalLabel = '总金额：' + this.NumberDiv(statisticsPush.payTotalAmount, 100) + const payTotalAmount = this.NumberDiv(statisticsPush.payTotalAmount, 100) + const paySuccessAmount = this.NumberDiv(statisticsPush.paySuccessAmount, 100) + const chart2Total = amountFriendlyFormat(payTotalAmount) + const chart2Value = amountFriendlyFormat(paySuccessAmount, chart2Total.unit) + this.chart2.value = chart2Value.amount + this.chart2.unit = chart2Value.unit + "元" + this.chart2.total = chart2Total.amount + this.chart2.totalLabel = '总金额：' + chart2Total.display - this.chart3.value = statisticsPush.transferSuccessQty - this.chart3.total = statisticsPush.transferTotalQty - this.chart3.totalLabel = '总订单：' + statisticsPush.transferTotalQty - this.chart4.value = this.NumberDiv(statisticsPush.transferSuccessAmount, 100) - this.chart4.total = this.NumberDiv(statisticsPush.transferTotalAmount, 100) - this.chart4.totalLabel = '总金额：' + this.NumberDiv(statisticsPush.transferTotalAmount, 100) + const chart3Total = amountFriendlyFormat(statisticsPush.transferSuccessQty) + const chart3Value = amountFriendlyFormat(statisticsPush.transferTotalQty, chart3Total.unit) + this.chart3.value = chart3Value.amount + 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.total = chart4Total.amount + this.chart4.totalLabel = '总金额：' + chart4Total.display const pushMerchant = JSON.parse(data.value.pushMerchant) // 商户数据 @@ -223,6 +240,8 @@ export default { } }) this.data1 = sortBy(this.data1, 'balanceWarning') + this.data1 = this.data1.slice(0, 10) + // 在线卡数据 this.data2 = card.map(i => { return { @@ -237,6 +256,7 @@ export default { } }) this.data2 = sortBy(this.data2, 'balanceWarning') + this.data2 = this.data2.slice(0, 10) // 在线卡商数据 this.data3 = carddealer.map(i => { return { @@ -248,6 +268,7 @@ export default { } }) this.data3 = sortBy(this.data3, 'balanceWarning') + this.data3 = this.data3.slice(0, 10) this.$refs.table1.scrollReset(); this.$refs.table2.scrollReset();