diff --git a/src/App.vue b/src/App.vue index f053b3d..feb1364 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,10 +7,28 @@ import NetIn from "@/components/NetIn.vue"; import NetOut from "@/components/NetOut.vue"; import axios from "axios"; import { Message } from "@arco-design/web-vue"; +import StatsCard from "@/components/StatsCard.vue"; +import {formatBytes, formatTimeStamp, formatUptime} from '@/utils/utils' const socketURL = ref('') const apiURL = ref('') +const theme = window.localStorage.getItem('theme') || 'light' +const dark = ref(theme !== 'light') + +const handleChangeDark = () => { + dark.value = !dark.value + + if (dark.value) { + window.localStorage.setItem('theme','dark') + document.body.setAttribute('arco-theme', 'dark') + } else { + // 恢复亮色主题 + window.localStorage.setItem('theme','light') + document.body.removeAttribute('arco-theme'); + } +} + const area = ref([]) const selectArea = ref('all') @@ -96,8 +114,8 @@ const initScoket = async () => { charts.value[host.Host.Name].cpu.push([host.TimeStamp * 1000, host.State.CPU]) charts.value[host.Host.Name].mem.push([host.TimeStamp * 1000, host.State.MemUsed]) - charts.value[host.Host.Name].net_in.push([host.TimeStamp * 1000, host.State.NetInSpeed]) - charts.value[host.Host.Name].net_out.push([host.TimeStamp * 1000, host.State.NetOutSpeed]) + charts.value[host.Host.Name].net_in.push([host.TimeStamp * 1000, host.State.NetOutSpeed]) + charts.value[host.Host.Name].net_out.push([host.TimeStamp * 1000, host.State.NetInSpeed]) return { ...host, @@ -130,60 +148,11 @@ const sendPing = () => { onMounted(() => { initScoket() -}) -// 格式化字节单位 -const formatBytes = (bytes) => { - const units = ['B', 'KB', 'MB', 'GB', 'TB']; - let i = 0; - while (bytes >= 1024 && i < units.length - 1) { - bytes /= 1024; - i++; + if (dark.value) { + document.body.setAttribute('arco-theme', 'dark') } - return bytes.toFixed(2) + ' ' + units[i]; -} - -// 格式化字节单位 -const formatMem = (bytes) => { - const units = ['B', 'KB', 'MB', 'GB', 'TB']; - let i = 0; - while (bytes >= 1024 && i < units.length - 1) { - bytes /= 1024; - i++; - } - return bytes.toFixed(2) + ' ' + units[i]; -} - -// 格式化系统时间为小时:分钟:秒 -const formatTime = (seconds) => { - const hours = Math.floor(seconds / 3600); - const minutes = Math.floor((seconds % 3600) / 60); - const remainingSeconds = seconds % 60; - return `${hours}小时 ${minutes}分钟 ${remainingSeconds}秒`; -} - -// 格式化时间戳为可读的日期格式 -const formatTimeStamp = (timestamp) => { - const date = new Date(timestamp * 1000); // 转换为毫秒 - const year = date.getFullYear(); - const month = ('0' + (date.getMonth() + 1)).slice(-2); - const day = ('0' + date.getDate()).slice(-2); - const hours = ('0' + date.getHours()).slice(-2); - const minutes = ('0' + date.getMinutes()).slice(-2); - const seconds = ('0' + date.getSeconds()).slice(-2); - return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; -} - -const formatUptime = (seconds) => { - const days = Math.floor(seconds / (24 * 3600)); - seconds %= 24 * 3600; - const hours = Math.floor(seconds / 3600); - seconds %= 3600; - const minutes = Math.floor(seconds / 60); - const secs = seconds % 60; - - return `${days}d ${hours}h ${minutes}m ${secs}s`; -} +}) const progressStatus = (value) => { if (value < 80) { @@ -243,13 +212,21 @@ const handleClose = () => { - \ No newline at end of file diff --git a/src/utils/utils.js b/src/utils/utils.js new file mode 100644 index 0000000..f5537ce --- /dev/null +++ b/src/utils/utils.js @@ -0,0 +1,41 @@ +// 格式化字节单位 +export const formatBytes = (bytes) => { + const units = ['B', 'KB', 'MB', 'GB', 'TB']; + let i = 0; + while (bytes >= 1024 && i < units.length - 1) { + bytes /= 1024; + i++; + } + return bytes.toFixed(2) + ' ' + units[i]; +} + +// 格式化系统时间为小时:分钟:秒 +export const formatTime = (seconds) => { + const hours = Math.floor(seconds / 3600); + const minutes = Math.floor((seconds % 3600) / 60); + const remainingSeconds = seconds % 60; + return `${hours}小时 ${minutes}分钟 ${remainingSeconds}秒`; +} + +// 格式化时间戳为可读的日期格式 +export const formatTimeStamp = (timestamp) => { + const date = new Date(timestamp * 1000); // 转换为毫秒 + const year = date.getFullYear(); + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + const hours = ('0' + date.getHours()).slice(-2); + const minutes = ('0' + date.getMinutes()).slice(-2); + const seconds = ('0' + date.getSeconds()).slice(-2); + return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; +} + +export const formatUptime = (seconds) => { + const days = Math.floor(seconds / (24 * 3600)); + seconds %= 24 * 3600; + const hours = Math.floor(seconds / 3600); + seconds %= 3600; + const minutes = Math.floor(seconds / 60); + const secs = seconds % 60; + + return `${days}d ${hours}h ${minutes}m ${secs}s`; +} \ No newline at end of file