From 184462bf2df6b0d303237da90e295681a0bec1e3 Mon Sep 17 00:00:00 2001 From: kiki Date: Fri, 2 Jun 2023 16:24:23 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/utils/ruoyi.js | 14 +- .../data-view/components/data-view-echart.vue | 554 ++++++++++-------- .../data-view/components/data-view-layout.vue | 69 ++- .../data-view/components/data-view-table.vue | 28 +- src/views/data-view/data-view.vue | 27 +- 5 files changed, 354 insertions(+), 338 deletions(-) diff --git a/src/utils/ruoyi.js b/src/utils/ruoyi.js index 4d6434a..1ca2f91 100644 --- a/src/utils/ruoyi.js +++ b/src/utils/ruoyi.js @@ -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, diff --git a/src/views/data-view/components/data-view-echart.vue b/src/views/data-view/components/data-view-echart.vue index e78128d..5f06121 100644 --- a/src/views/data-view/components/data-view-echart.vue +++ b/src/views/data-view/components/data-view-echart.vue @@ -1,7 +1,7 @@ @@ -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()) } } } diff --git a/src/views/data-view/components/data-view-layout.vue b/src/views/data-view/components/data-view-layout.vue index 583d884..679601a 100644 --- a/src/views/data-view/components/data-view-layout.vue +++ b/src/views/data-view/components/data-view-layout.vue @@ -10,18 +10,25 @@ >
- {{identifier}} + {{ identifier }}
-

{{ title }}

+

{{ + title + }}

- {{date}} + {{ date }}
+ +
+ +
+ -
+
@@ -29,14 +36,8 @@
- -
- -
-
- -
+
@@ -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; + margin-top: 10px; + width: 75vw; + align-self: center; } -.left-table { - width: 23.5%; -} - -.middle { - width: 50%; +.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-charts { - display: flex; - flex-direction: row; - justify-content: space-between; + .left-table { + width: 23.5%; } - .middle-table { - margin-top: max(0.5vh, 25px); + .middle { + width: 50%; } -} - - -.right-table { - width: 23.5%; + .right-table { + width: 23.5%; + } } diff --git a/src/views/data-view/components/data-view-table.vue b/src/views/data-view/components/data-view-table.vue index 9ff6002..9f4de4e 100644 --- a/src/views/data-view/components/data-view-table.vue +++ b/src/views/data-view/components/data-view-table.vue @@ -126,7 +126,8 @@ export default {