jack
/
kakapay
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

perf: 优化样式

master
kiki 2 years ago
parent
6ce8ac2bd0
commit
1fb016541f
6 changed files with 205 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/alarm.mp3
  2. 37
      src/utils/ruoyi.js
  3. 48
      src/views/data-view/components/data-view-echart.vue
  4. 120
      src/views/data-view/components/data-view-layout.vue
  5. 88
      src/views/data-view/components/data-view-table.vue
  6. 57
      src/views/data-view/data-view.vue

BIN
public/alarm.mp3
View File

Binary file not shown.

37
src/utils/ruoyi.js
View File

@ -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
*/

48
src/views/data-view/components/data-view-echart.vue
View File

@ -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
}

120
src/views/data-view/components/data-view-layout.vue
View File

@ -87,7 +87,7 @@ export default {
}
}
</script>
<style scoped>
<style scoped lang="scss">
.data-view {
height: 100vh;
width: 100vw;
@ -96,83 +96,83 @@ export default {
display: flex;
flex-direction: column;
.data-view-header {
display: flex;
justify-content: space-between;
background-size: contain;
background-repeat: no-repeat;
height: 6vw;
padding: 0 20px 0 20px;
.data-view-header-item {
width: 33%;
}
.identifier {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 25px;
color: #FFFFFF;
display: flex;
flex-direction: row;
margin-top: 14px;
}
.data-view-header-time {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 25px;
color: #FFFFFF;
display: flex;
flex-direction: row;
margin-top: 14px;
justify-content: flex-end;
}
}
.data-view-header-title {
color: #D4DCFF;
font-size: 2.5vw;
}
.data-view-header {
display: flex;
justify-content: space-between;
background-size: contain;
background-repeat: no-repeat;
height: 6vw;
padding: 0 20px 0 20px;
.data-view-header-item {
width: 33%;
}
.data-view-body {
.identifier {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 25px;
color: #FFFFFF;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 40px;
padding: 0 20px 0 20px;
margin-top: 14px;
}
.left-table {
width: 23.5%;
.data-view-header-time {
font-family: 'PingFang SC';
font-style: normal;
font-weight: 500;
font-size: 18px;
line-height: 25px;
color: #FFFFFF;
display: flex;
flex-direction: row;
margin-top: 14px;
justify-content: flex-end;
}
.middle {
width: 50%;
.data-view-header-title {
color: #D4DCFF;
font-size: 2.5vw;
}
.middle-charts {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}
.middle-table {
margin-top: 0.5vh;
}
.data-view-body {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 40px;
padding: 0 20px 0 20px;
}
}
.left-table {
width: 23.5%;
}
.middle {
width: 50%;
.right-table {
width: 23.5%;
.middle-charts {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.middle-table {
margin-top: max(0.5vh, 25px);
}
}
.right-table {
width: 23.5%;
}
</style>

88
src/views/data-view/components/data-view-table.vue
View File

@ -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 {

57
src/views/data-view/data-view.vue
View File

@ -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();

Write Preview
Loading…
Cancel
Save