gh_mirrors/1Panel
1
0
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-01-19 16:29:17 +08:00
Code

feat: 概览、监控等界面增加单位区分显示 (#1440)

Browse Source
This commit is contained in:
ssongliu 2023-06-25 17:50:18 +08:00 committed by GitHub
parent dbeaaa49f3
commit 14f7435f82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/v-charts/components/Line.vue
View File

@ -5,6 +5,7 @@
import { onMounted, onUnmounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import { GlobalStore } from '@/store';
import { computeSizeFromKBs, computeSizeFromMB } from '@/utils/util';
const globalStore = GlobalStore();
const props = defineProps({
id: {
@ -99,8 +100,29 @@ function initChart() {
trigger: 'axis',
formatter: function (datas: any) {
let res = datas[0].name + '<br/>';
for (const item of datas) {
res += item.marker + ' ' + item.seriesName + '：' + item.data + props.option.formatStr + '<br/>';
switch (props.option.formatStr) {
case 'KB/s':
for (const item of datas) {
res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
}
break;
case 'MB':
for (const item of datas) {
res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromMB(item.data) + '<br/>';
}
break;
default:
for (const item of datas) {
res +=
item.marker +
' ' +
item.seriesName +
'：' +
item.data +
props.option.formatStr +
'<br/>';
}
break;
}
return res;
},

15
frontend/src/utils/util.ts
View File

@ -129,6 +129,21 @@ export function computeSize(size: number): string {
return (size / Math.pow(num, 4)).toFixed(2) + ' TB';
}
export function computeSizeFromMB(size: number): string {
const num = 1024.0;
if (size < num) return size + ' MB';
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' GB';
return (size / Math.pow(num, 3)).toFixed(2) + ' TB';
}
export function computeSizeFromKBs(size: number): string {
const num = 1024.0;
if (size < num) return size + ' KB/s';
if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + ' MB/s';
if (size < Math.pow(num, 3)) return (size / Math.pow(num, 2)).toFixed(2) + ' GB/s';
return (size / Math.pow(num, 3)).toFixed(2) + ' TB/s';
}
let icons = new Map([
['.zip', 'p-file-zip'],
['.gz', 'p-file-zip'],

14
frontend/src/views/host/monitor/monitor/index.vue
View File

@ -144,7 +144,7 @@ import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import * as echarts from 'echarts';
import { loadMonitor, getNetworkOptions } from '@/api/modules/monitor';
import { Monitor } from '@/api/interface/monitor';
import { dateFormatWithoutYear } from '@/utils/util';
import { computeSizeFromKBs, dateFormatWithoutYear } from '@/utils/util';
import i18n from '@/lang';
import MonitorRouter from '@/views/host/monitor/index.vue';
import { GlobalStore } from '@/store';
@ -380,8 +380,14 @@ function initCharts(chartName: string, xDatas: any, yDatas: any, yTitle: string,
trigger: 'axis',
formatter: function (datas: any) {
let res = datas[0].name + '<br/>';
for (const item of datas) {
res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
if (chartName !== 'loadNetworkChart') {
for (const item of datas) {
res += item.marker + ' ' + item.seriesName + '：' + item.data + formatStr + '<br/>';
}
} else {
for (const item of datas) {
res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
}
}
return res;
},
@ -574,7 +580,7 @@ function initIOCharts(item: Monitor.MonitorData) {
item.seriesName === i18n.global.t('monitor.read') ||
item.seriesName === i18n.global.t('monitor.write')
) {
res += item.marker + ' ' + item.seriesName + '：' + item.data + ' KB/s' + '<br/>';
res += item.marker + ' ' + item.seriesName + '：' + computeSizeFromKBs(item.data) + '<br/>';
}
if (item.seriesName === i18n.global.t('monitor.readWriteCount')) {
res +=