diff --git a/resources/src/components/dashboard/PerformanceCard.vue b/resources/src/components/dashboard/PerformanceCard.vue index 4c90034..f080c46 100644 --- a/resources/src/components/dashboard/PerformanceCard.vue +++ b/resources/src/components/dashboard/PerformanceCard.vue @@ -6,35 +6,11 @@ import { ref, onMounted, computed, Ref } from "vue"; import type { EChartsOption } from "echarts"; import { useChart, RenderType, ThemeType } from "@/plugins/echarts"; -import { useTheme } from "vuetify"; import { getPerformceUsage, PerformceUsage } from "@/api/metric"; -const { current } = useTheme(); const loading = ref(true); const performanceData = ref(null); -// 预定义的颜色集合 -const colors = [ - "#f44336", - "#e91e63", - "#9c27b0", - "#673ab7", - "#3f51b5", - "#2196f3", - "#03a9f4", - "#00bcd4", - "#009688", - "#4caf50", - "#8bc34a", - "#cddc39", - "#ffeb3b", - "#ffc107", - "#ff9800", - "#ff5722", - "#795548", - "#607d8b", -]; - // CPU饼图配置 const cpuChartEl = ref(null); const cpuOption = computed(() => { @@ -53,10 +29,9 @@ const cpuOption = computed(() => { ); const data = [ - ...sortedItems.map((item, index) => ({ + ...performanceData.value.items.map((item, index) => ({ value: parseFloat(item.cpu.toFixed(2)), name: item.name, - itemStyle: { color: colors[index % colors.length] }, })), ]; @@ -65,7 +40,6 @@ const cpuOption = computed(() => { data.push({ value: parseFloat(otherProcessesCpu.toFixed(2)), name: "其他进程", - itemStyle: { color: "#9e9e9e" }, }); } @@ -73,21 +47,18 @@ const cpuOption = computed(() => { data.push({ value: parseFloat(performanceData.value.cpuFree.toFixed(2)), name: "空闲", - itemStyle: { color: "#4caf50" }, }); return { - backgroundColor: current.value.colors.surface, tooltip: { trigger: "item", - formatter: "{a}
{b}: {c}% ({d}%)", + formatter: "{a} ---
{b}: {c}% ({d}%)", }, title: { text: "CPU使用率", left: "center", top: 10, textStyle: { - color: current.value.colors.onSurface, fontSize: 16, fontWeight: "bold", }, @@ -97,15 +68,9 @@ const cpuOption = computed(() => { left: "left", top: "middle", textStyle: { - color: current.value.colors.onSurface, fontSize: 11, }, type: "scroll", - pageIconColor: current.value.colors.primary, - pageIconInactiveColor: current.value.colors.onSurface, - pageTextStyle: { - color: current.value.colors.onSurface, - }, }, series: [ { @@ -116,17 +81,14 @@ const cpuOption = computed(() => { avoidLabelOverlap: false, itemStyle: { borderRadius: 10, - borderColor: current.value.colors.surface, borderWidth: 2, }, label: { show: true, position: "outside", formatter: (params: any) => { - if (params.percent < 3) return ""; return `${params.name}: ${params.value}%`; }, - color: current.value.colors.onSurface, fontSize: 10, }, emphasis: { @@ -162,7 +124,6 @@ const memOption = computed(() => { ...sortedItems.map((item, index) => ({ value: parseFloat((item.mem / 1024).toFixed(2)), name: item.name, - itemStyle: { color: colors[index % colors.length] }, })), // 添加空闲项 { @@ -173,7 +134,6 @@ const memOption = computed(() => { ]; return { - backgroundColor: current.value.colors.surface, tooltip: { trigger: "item", formatter: "{a}
{b}: {c}MB ({d}%)", @@ -183,7 +143,6 @@ const memOption = computed(() => { left: "center", top: 10, textStyle: { - color: current.value.colors.onSurface, fontSize: 16, fontWeight: "bold", }, @@ -193,15 +152,9 @@ const memOption = computed(() => { left: "left", top: "middle", textStyle: { - color: current.value.colors.onSurface, fontSize: 11, }, type: "scroll", - pageIconColor: current.value.colors.primary, - pageIconInactiveColor: current.value.colors.onSurface, - pageTextStyle: { - color: current.value.colors.onSurface, - }, }, series: [ { @@ -212,17 +165,14 @@ const memOption = computed(() => { avoidLabelOverlap: false, itemStyle: { borderRadius: 10, - borderColor: current.value.colors.surface, borderWidth: 2, }, label: { show: true, position: "outside", formatter: (params: any) => { - if (params.percent < 3) return ""; return `${params.name}: ${params.value}MB`; }, - color: current.value.colors.onSurface, fontSize: 10, }, emphasis: { diff --git a/resources/src/components/process/ProcessCard.vue b/resources/src/components/process/ProcessCard.vue index 47c16ff..fa81199 100644 --- a/resources/src/components/process/ProcessCard.vue +++ b/resources/src/components/process/ProcessCard.vue @@ -60,7 +60,7 @@ const initEChart = () => { }, { type: "value", - name: "内存(" + (mem/1024).toFixed(2) + "MB)", + name: "内存(" + (mem / 1024).toFixed(2) + "MB)", max: parseFloat((props.data.usage.memCapacity / 1024).toFixed(2)), axisLine: { show: false }, axisTick: { show: false }, @@ -84,7 +84,9 @@ const initEChart = () => { { name: "内存", type: "line", - data: props.data.usage.mem.map((num) => parseFloat((num/1024).toFixed(2))), + data: props.data.usage.mem.map((num) => + parseFloat((num / 1024).toFixed(2)) + ), yAxisIndex: 1, showSymbol: false, lineStyle: { @@ -166,6 +168,9 @@ onMounted(() => { initEChart(); window.addEventListener("resize", handleResize); }); +onUnmounted(() => { + window.removeEventListener("resize", handleResize); +}); const props = defineProps<{ data: ProcessItem; @@ -405,9 +410,7 @@ const copyToken = () => {
分享链接已生成
有效期:{{ shareForm.minutes }} 分钟 - • 可写入 + • 可写入 • 只读