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

perf: 优化样式

master
kiki 2 years ago
parent
836d7b441a
commit
184462bf2d
5 changed files with 354 additions and 338 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. 14
      src/utils/ruoyi.js
  2. 552
      src/views/data-view/components/data-view-echart.vue
  3. 61
      src/views/data-view/components/data-view-layout.vue
  4. 28
      src/views/data-view/components/data-view-table.vue
  5. 27
      src/views/data-view/data-view.vue

14
src/utils/ruoyi.js
View File

@ -413,13 +413,13 @@ export function amountFriendlyFormat(amount, unit) {
}
}
// 百
if (amount >= 100 || unit === '百') {
return {
unit: '百',
amount: amount / 100,
display: `${amount / 100}百`
}
}
// if (amount >= 100 || unit === '百') {
// return {
// unit: '百',
// amount: amount / 100,
// display: `${amount / 100}百`
// }
// }
return {
unit: '',
amount: amount,

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

@ -1,7 +1,7 @@
<template>
<div
ref="charts"
style="min-width: 12vw;max-height:220px;height:220px;"
style="width: 18vw;height:23vh;"
/>
</template>
@ -9,6 +9,24 @@
import * as echarts from 'echarts'
import { debounce } from '@/utils'
function fontSize(res){
let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res*fontSize;
}
function fontSize2(res){
let height = document.documentElement.clientHeight
if (!height) return;
let fontSize = 100 * (height / 1080);
return res*fontSize;
}
function max(v1, v2) {
return v1 > v2 ? v2 : v1
}
export default {
props: {
config: Object
@ -26,19 +44,43 @@ export default {
},
data() {
return {
chart: null
chart: null,
}
},
computed: {
option() {
mounted() {
window.addEventListener('resize', debounce(() => {
this.chart?.resize()
setTimeout(() => {
this.chart?.setOption(this.getOption())
}, 200)
}, 200))
},
methods: {
getOption() {
console.log("reseize")
let percent = 0
if (this.config.total === 0) {
percent = 0
} else {
percent = ((this.config.value / this.config.total) * 100).toFixed(2)
percent = percent > 100 ? 100 : percent
}
const center = ['50%', '55%']
const center = ['50%', '45%']
const self = this
// 外圈文字大小
const outSideFontSize = max(fontSize2(0.22), 16)
// 外圈文字高度
const outSideTextHeight = max(fontSize2(0.3), 26)
// 内圈小文字
const insideFontSize = max(fontSize2(0.18), 18)
// 内圈小文字高度
const insideTextHeight = 0
// 内圈大文字
const insideBigFontSize = max(fontSize2(0.38), 40)
// 内圈大文字高度
const insideBigTextHeight = max(fontSize2(0.70), 70)
return {
grid: {
left: '0',
@ -70,7 +112,7 @@ export default {
//圆环位置和大小
polar: {
center: center,
radius: '100%'
radius: '145%'
},
series: [
@ -80,7 +122,7 @@ export default {
name: '内部透明起始结束的圆边',
type: 'gauge',
center: center,
radius: '80%',
radius: '90%',
splitNumber: 10,
axisLine: {
lineStyle: {
@ -141,15 +183,15 @@ export default {
rich: {
t1: {
fontFamily: 'PingFang TC',
fontSize: '5%',
fontSize: outSideFontSize,
color: '#C6CEEC',
lineHeight: 18
lineHeight: outSideTextHeight
},
t2: {
fontFamily: 'PingFang TC',
fontSize: '10%',
fontSize: outSideFontSize,
color: '#FFFFFF',
lineHeight: 18
lineHeight: outSideTextHeight
}
}
},
@ -172,156 +214,156 @@ export default {
},
// 带有阴影的边框
{
name: 'border',
type: 'pie',
clockWise: false,
radius: '70%',
center: center,
animation: false,
z: 0,
data: [{
value: 0,
color: 'transparent',
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
disabled: true
},
select: {
disabled: true
},
tooltip: {
show: false
},
itemStyle: {
color: '#071422',
shadowColor: this.config.shadowColor,
shadowBlur: 25,
shadowOffsetX: 0,
shadowOffsetY: -15
}
}]
},
// {
// name: 'border',
// type: 'pie',
// clockWise: false,
// radius: '70%',
// center: center,
// animation: false,
// z: 0,
// data: [{
// value: 0,
// color: 'transparent',
// label: {
// show: false
// },
// labelLine: {
// show: false
// },
// emphasis: {
// disabled: true
// },
// select: {
// disabled: true
// },
// tooltip: {
// show: false
// },
// itemStyle: {
// color: '#071422',
// shadowColor: this.config.shadowColor,
// shadowBlur: 25,
// shadowOffsetX: 0,
// shadowOffsetY: -15
// }
// }]
// },
// 阴影的边框(中间)
{
name: '阴影的边框(中间)',
type: 'gauge',
center: center,
radius: '70%',
axisLine: {
lineStyle: {
color: [
// 右/下/左/上
[
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
}
},
z: 4,
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
show: false
},
label: {
show: false
},
pointer: {
show: false
},
title: {
//标题
show: false
},
data: [
{
name: percent + '%',
value: percent
}
]
},
// {
// name: '阴影的边框(中间)',
// type: 'gauge',
// center: center,
// radius: '70%',
// axisLine: {
// lineStyle: {
// color: [
// // 右/下/左/上
// [
// 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
// }
// },
// z: 4,
// axisLabel: {
// show: false
// },
// axisTick: {
// show: false
// },
// splitLine: {
// show: false
// },
// detail: {
// show: false
// },
// label: {
// show: false
// },
// pointer: {
// show: false
// },
// title: {
// //标题
// show: false
// },
// data: [
// {
// name: percent + '%',
// value: percent
// }
// ]
// },
// 刻度
{
name: '外部刻度',
type: 'gauge',
center: center,
radius: '75%',
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 225,
endAngle: -45,
axisLine: {
show: false,
lineStyle: {
width: 1,
color: [
[1, 'rgba(0,0,0,0)']
]
}
},
//仪表盘轴线
axisLabel: {
show: false
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 4,
lineStyle: {
//用颜色渐变函数不起作用
color: '#6DCBFF',
width: 1
},
length: 1
},
//刻度样式
splitLine: {
show: true,
length: 2,
lineStyle: {
//用颜色渐变函数不起作用
color: '#6DCBFF'
}
}, //分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
},
// {
// name: '外部刻度',
// type: 'gauge',
// center: center,
// radius: '75%',
// min: 0, //最小刻度
// max: 100, //最大刻度
// splitNumber: 10, //刻度数量
// startAngle: 225,
// endAngle: -45,
// axisLine: {
// show: false,
// lineStyle: {
// width: 1,
// color: [
// [1, 'rgba(0,0,0,0)']
// ]
// }
// },
// //仪表盘轴线
// axisLabel: {
// show: false
// }, //刻度标签。
// axisTick: {
// show: true,
// splitNumber: 4,
// lineStyle: {
// //用颜色渐变函数不起作用
// color: '#6DCBFF',
// width: 1
// },
// length: 1
// },
// //刻度样式
// splitLine: {
// show: true,
// length: 2,
// lineStyle: {
// //用颜色渐变函数不起作用
// color: '#6DCBFF'
// }
// }, //分隔线样式
// detail: {
// show: false
// },
// pointer: {
// show: false
// }
// },
// 最宽的圆环，上层, 显示彩色的进度条
{
@ -373,89 +415,89 @@ export default {
z: 1
},
{
name: '内部透明起始结束的圆边',
type: 'gauge',
center: center,
radius: '40%',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: this.config.circle2Color[0]
}, {
offset: 1,
color: this.config.circle2Color[1]
}]
)],
[0.2, new echarts.graphic.LinearGradient(
0, 1, 0, 0,
[{
offset: 0,
color: this.config.circle2Color[0]
}, {
offset: 1,
color: this.config.circle2Color[1]
}]
)],
[0.8, new echarts.graphic.LinearGradient(
0, 0, 1, 0,
[{
offset: 0,
color: this.config.circle2Color[1]
}, {
offset: 1,
color: this.config.circle2Color[1]
}]
)],
[1, new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: this.config.circle2Color[1]
}, {
offset: 1,
color: this.config.circle2Color[0]
}]
)]
],
width: 1
}
},
z: 4,
axisLabel: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
detail: {
show: false
},
label: {
show: false
},
pointer: {
show: false
},
title: {
//标题
show: false
},
data: [
{
name: percent + '%',
value: percent
}
]
},
// {
// name: '内部透明起始结束的圆边',
// type: 'gauge',
// center: center,
// radius: '40%',
// splitNumber: 10,
// axisLine: {
// lineStyle: {
// color: [
// [0, new echarts.graphic.LinearGradient(
// 0, 1, 0, 0,
// [{
// offset: 0,
// color: this.config.circle2Color[0]
// }, {
// offset: 1,
// color: this.config.circle2Color[1]
// }]
// )],
// [0.2, new echarts.graphic.LinearGradient(
// 0, 1, 0, 0,
// [{
// offset: 0,
// color: this.config.circle2Color[0]
// }, {
// offset: 1,
// color: this.config.circle2Color[1]
// }]
// )],
// [0.8, new echarts.graphic.LinearGradient(
// 0, 0, 1, 0,
// [{
// offset: 0,
// color: this.config.circle2Color[1]
// }, {
// offset: 1,
// color: this.config.circle2Color[1]
// }]
// )],
// [1, new echarts.graphic.LinearGradient(
// 0, 0, 0, 1,
// [{
// offset: 0,
// color: this.config.circle2Color[1]
// }, {
// offset: 1,
// color: this.config.circle2Color[0]
// }]
// )]
// ],
// width: 1
// }
// },
// z: 4,
// axisLabel: {
// show: false
// },
// axisTick: {
// show: false
// },
// splitLine: {
// show: false
// },
// detail: {
// show: false
// },
// label: {
// show: false
// },
// pointer: {
// show: false
// },
// title: {
// //标题
// show: false
// },
// data: [
// {
// name: percent + '%',
// value: percent
// }
// ]
// },
// 内圆的边框
{
@ -463,7 +505,7 @@ export default {
type: 'pie',
clockWise: false,
hoverAnimation: false,
radius: ['35%', '35%'],//边框大小
radius: ['55%', '55%'],//边框大小
center: center,//边框位置
tooltip: {
show: false
@ -487,7 +529,7 @@ export default {
// 内圆
{
type: 'pie',
radius: '35%',
radius: '55%',
center: center,
z: 1,
itemStyle: {
@ -522,26 +564,26 @@ export default {
show: true,
position: 'center',
color: '#4c4a4a',
formatter: `{t1|${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`,
formatter: `{t1| ${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`,
rich: {
t1: {
fontFamily: 'PingFang TC',
fontSize: '5%',
fontSize: insideFontSize,
color: '#C6CEEC',
lineHeight: 14
lineHeight: insideTextHeight
},
t2: {
fontFamily: 'PingFang TC',
fontSize: '10%',
fontSize: insideBigFontSize,
color: '#FFFFFF',
lineHeight: 14,
lineHeight: insideBigTextHeight,
fontWeight: 600
},
t3: {
fontFamily: 'PingFang TC',
fontSize: '5%',
fontSize: insideFontSize,
color: '#C6CEEC',
lineHeight: 14
lineHeight: insideTextHeight
}
}
},
@ -556,20 +598,12 @@ export default {
}
]
}
}
},
mounted() {
window.addEventListener('resize', debounce(() => {
this.chart?.resize()
}, 200))
},
methods: {
init() {
if (!this.chart) {
this.chart = echarts.init(this.$refs.charts)
}
this.chart.setOption(this.option)
this.chart.setOption(this.getOption())
}
}
}

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

@ -10,18 +10,25 @@
>
<div class="identifier data-view-header-item">
<img style="width: 23px; height: 23px;" :src="icon" alt="">
<span style="padding-left: 10px;">{{identifier}}</span>
<span style="padding-left: 10px;">{{ identifier }}</span>
</div>
<h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{ title }}</h1>
<h1 class="YouSheBiaoTiHei data-view-header-title data-view-header-item" style="text-align: center;">{{
title
}}</h1>
<div class="data-view-header-time data-view-header-item">
<img @click="$emit('leave')" style="width: 26px; height: 26px; cursor: pointer;" :src="ICUNFullscreen" alt="">
<div style="width: 26px;"/>
<span>{{date}}</span>
<span>{{ date }}</span>
</div>
</div>
<!-- 中间的图表 -->
<div class="data-view-charts-body">
<slot name="charts"></slot>
</div>
<!-- 内容 -->
<div class="data-view-body">
<div class="data-view-tables-body">
<!-- 左边的表格 -->
<div class="left-table">
<slot name="left-table"/>
@ -29,15 +36,9 @@
<!-- 中间的内容 -->
<div class="middle">
<!-- 中间的图表 -->
<div class="middle-charts">
<slot name="middle-charts"></slot>
</div>
<!-- 中间的表格 -->
<div class="middle-table">
<slot name="middle-table"/>
</div>
</div>
<!-- 右边的表格 -->
<div class="right-table">
@ -54,9 +55,8 @@ import DataViewHeaderBg from '@/assets/images/data-view-header-bg.png'
import ICUNFullscreen from '@/assets/images/ic_unfullscreen.png'
import { getWeek, parseTime } from '@/utils/ruoyi'
export default {
components: { },
components: {},
props: {
// 左上角的标识
identifier: {
@ -76,13 +76,13 @@ export default {
ICUNFullscreen,
DataViewBG,
DataViewHeaderBg,
date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek()
date: parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
}
},
mounted() {
// 每秒更新一次时间
setInterval(() => {
this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + " " + getWeek()
this.date = parseTime(new Date(), `{y}-{m}-{d} {h}:{i}:{s}`) + ' ' + getWeek()
}, 1000)
}
}
@ -142,37 +142,36 @@ export default {
}
.data-view-body {
.data-view-charts-body {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 40px;
padding: 0 20px 0 20px;
}
.left-table {
width: 23.5%;
margin-top: 10px;
width: 75vw;
align-self: center;
}
.middle {
width: 50%;
.middle-charts {
.data-view-tables-body {
display: flex;
flex-direction: row;
justify-content: space-between;
}
margin-top: 30px;
padding: 0 20px 20px 20px;
overflow: hidden;
height: 100%;
.middle-table {
margin-top: max(0.5vh, 25px);
.left-table {
width: 23.5%;
}
}
.middle {
width: 50%;
}
.right-table {
.right-table {
width: 23.5%;
}
}
</style>

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

@ -126,7 +126,8 @@ export default {
<style scoped lang="scss">
.data-view-table {
height: 100%;
overflow: hidden;
table {
/*设置相邻单元格的边框间的距离*/
@ -136,20 +137,16 @@ export default {
text-align: center;
}
table tbody {
display: block;
overflow-y: scroll;
}
table tbody::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
table tbody {
table > tbody {
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
overflow-x: hidden;
overflow-y: auto;
overflow-y: scroll;
height: 48vh;
}
.data-view-table-body {
@ -239,21 +236,6 @@ export default {
}
.data-view-table--large {
table tbody {
height: 40vh;
}
}
.data-view-table--middle {
table tbody {
height: 65vh;
}
}
.data-view-table-body-header {

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

@ -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="在线卡数据"
@ -130,7 +131,7 @@ export default {
value: 0,
total: 0,
unit: "单",
progressBar: ["#4494FF", '#EFA83E'],
progressBar: ["#42EA9A", '#EFA83E'],
progressBarBG: '#0A2F28',
circle2Color: ['#30BE7900', '#30BE79'],
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@ -144,7 +145,7 @@ export default {
value: 0,
total: 0,
unit: "元",
progressBar: ["#4494FF", '#EFA83E'],
progressBar: ["#42EA9A", '#EFA83E'],
progressBarBG: '#0A2F28',
circle2Color: ['#30BE7900', '#30BE79'],
innerCircle: ['#2EB87642', '#2EB87642', '#2AA56C'],
@ -210,18 +211,18 @@ export default {
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.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
@ -261,7 +262,7 @@ export default {
this.data3 = carddealer.map(i => {
return {
username: i.username,
dayMargin: (amountFormat({ amount: i.dayMargin }) || "0") + (amountFormat({ amount: i.margin }) || "0"),
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,

Write Preview
Loading…
Cancel
Save