diff --git a/src/App.vue b/src/App.vue index 25eb9fa..9e00d48 100644 --- a/src/App.vue +++ b/src/App.vue @@ -8,7 +8,7 @@ const year = new Date().getFullYear()

Server Status

diff --git a/src/api/utils.ts b/src/api/utils.ts index 44301e5..8d63852 100644 --- a/src/api/utils.ts +++ b/src/api/utils.ts @@ -72,7 +72,6 @@ export function formatDate(timestamp: number, timeOnly: boolean = false) { } export function getBaseColor(percent: number, disable: boolean = false) { - // 获取基础颜色 // 0~60: green, 60~80: yellow, 80~90: orange, 90~100: red if (disable) { return '#9ca3af' @@ -93,8 +92,6 @@ export function getBlankColor(percent: number, disable: boolean = false) { if (disable) { return '#e5e7eb' } - - //相比base更浅的颜色 if (percent < 60) { return '#bbf7d0' } else if (percent < 80) { @@ -115,4 +112,12 @@ export function formatUptime(uptime: number): string { const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0'); const s = Math.floor(seconds % 60).toString().padStart(2, '0'); return `${d}:${h}:${m}:${s}`; +} + +export function formatDuration(duration: number): string { + const d = Math.floor(duration / 86400); + const h = Math.floor((duration % 86400) / 3600); + const m = Math.floor((duration % 3600) / 60); + const s = duration % 60; + return d > 0 ? `${d}d` : h > 0 ? `${h}h` : m > 0 ? `${m}m` : `${s}s`; } \ No newline at end of file diff --git a/src/components/Disk.vue b/src/components/Disk.vue index 9545cd9..48016bd 100644 --- a/src/components/Disk.vue +++ b/src/components/Disk.vue @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/src/components/Host.vue b/src/components/Host.vue index 5f0ce4f..7d031ef 100644 --- a/src/components/Host.vue +++ b/src/components/Host.vue @@ -4,7 +4,7 @@ import {computed, onMounted, ref, watch} from "vue"; import * as echarts from "echarts"; import { format2Size, - formatDate, + formatDate, formatDuration, formatSizeByUnit, formatUptime, getBaseColor, @@ -63,6 +63,7 @@ const hoverBorderColor = computed(() => { return statusColor.value }) +const fontFam = 'Josefin Sans' function onMountedFunc() { const cpuChart = echarts.init(cpuChartRef.value); @@ -73,15 +74,16 @@ function onMountedFunc() { // style const titleStyle = { color: 'rgba(0, 0, 0, 0.8)', - fontSize: 15, + fontSize: 18, } - const radius = ['65%', '90%'] + const radius = ['65%', '80%'] const netColor = ['#a2d8f4', '#0194e3'] // Tx Rx const pieLabelPosition = 'center' const emphasis = { label: { show: true, fontSize: 15, + fontFamily: fontFam, position: ['50%', '20%'] // 设置标签位置为圆环外部 }, } @@ -96,7 +98,7 @@ function onMountedFunc() { function update() { const timeDiff = (Date.now()) / 1000 - status.value.meta.observed_at - deltaTime.value = timeDiff.toFixed(1) + deltaTime.value = formatDuration(timeDiff) // 判断该时间与上一个时间不同才push if (netStats.length === 0 || netStats[netStats.length - 1][0] !== status.value.meta.observed_at) { netStats.push([status.value.meta.observed_at, status.value.hardware.net.up, status.value.hardware.net.down]) // 时间 上行 下行 @@ -119,6 +121,9 @@ function onMountedFunc() { top: 'center', textStyle: titleStyle, }, + textStyle: { + fontFamily: fontFam + }, series: [ { type: 'pie', @@ -154,6 +159,9 @@ function onMountedFunc() { top: 'center', textStyle: titleStyle }, + textStyle: { + fontFamily: fontFam + }, series: [ { type: 'pie', @@ -187,6 +195,9 @@ function onMountedFunc() { top: 'center', textStyle: titleStyle, }, + textStyle: { + fontFamily: fontFam + }, series: [ { type: 'pie', @@ -215,6 +226,12 @@ function onMountedFunc() { netChart.setOption( { color: netColor, + title: { + textStyle: titleStyle + }, + textStyle: { + fontFamily: fontFam + }, tooltip: { trigger: 'axis', axisPointer: { @@ -228,7 +245,7 @@ function onMountedFunc() { } else { return formatDate(params.value, true); } - } + }, } }, formatter: function (params: any) { @@ -237,12 +254,10 @@ function onMountedFunc() { result += item.marker + (item.seriesName == 'Tx' ? '↑' : '↓') + ': ' + formatSizeByUnit(item.value * 8, null, 'bps') + '
'; }); return result; - } + }, }, toolbox: { - feature: { - saveAsImage: {} - } + feature: {} }, grid: { top: '25%', @@ -259,7 +274,7 @@ function onMountedFunc() { axisLabel: { formatter: function (value: number) { return formatDate(value, true) - } + }, } } ], @@ -269,7 +284,7 @@ function onMountedFunc() { axisLabel: { formatter: function (value: number) { return formatSizeByUnit(value * 8, null, 'b') - } + }, } } ], @@ -280,7 +295,7 @@ function onMountedFunc() { stack: 'Total', areaStyle: {}, emphasis: { - focus: 'series' + focus: 'series', }, data: netStats.map(item => item[1]), showSymbol: false, @@ -318,9 +333,9 @@ function onMountedFunc() { // link.download = `screenshot-${status.value.meta.id}-${formatDate(Date.now(), false)}.svg`; function downloadScreenshot() { - const hostElement = document.querySelector(".host#"+status.value.meta.id); + const hostElement = document.querySelector(".host#" + status.value.meta.id); if (hostElement) { - html2canvas(hostElement, { scale: 2 }).then((canvas) => { + html2canvas(hostElement, {scale: 2}).then((canvas) => { const dataURL = canvas.toDataURL("image/png"); const link = document.createElement("a"); link.href = dataURL; @@ -335,19 +350,21 @@ onMounted( onMountedFunc() } ) -