From 7bff41b0bcc0976c470f381860327c77d4ba4216 Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Fri, 25 Oct 2024 21:56:22 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E2=99=BB=EF=B8=8F=20=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=9B=91=E6=8E=A7=E5=93=8D=E5=BA=94=E5=BC=8F=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E6=9B=B4=E5=A5=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MyCol/SystemCardItem.vue}                 |  41 ++----
 .../server/{ => component}/system-cpu.vue     |  93 ++-----------
 .../monitor/server/component/system-info.vue  |  48 +++++++
 .../server/{ => component}/system-jvm-cpu.vue |  93 ++-----------
 .../server/{ => component}/system-server.vue  |  15 +--
 src/views/monitor/server/index.vue            |  23 ++--
 src/views/monitor/server/system-info.vue      | 123 ------------------
 src/views/monitor/server/utils/hooks.ts       |  25 +++-
 8 files changed, 114 insertions(+), 347 deletions(-)
 rename src/{views/monitor/server/system-disk.vue => components/MyCol/SystemCardItem.vue} (58%)
 rename src/views/monitor/server/{ => component}/system-cpu.vue (55%)
 create mode 100644 src/views/monitor/server/component/system-info.vue
 rename src/views/monitor/server/{ => component}/system-jvm-cpu.vue (55%)
 rename src/views/monitor/server/{ => component}/system-server.vue (94%)
 delete mode 100644 src/views/monitor/server/system-info.vue

diff --git a/src/views/monitor/server/system-disk.vue b/src/components/MyCol/SystemCardItem.vue
similarity index 58%
rename from src/views/monitor/server/system-disk.vue
rename to src/components/MyCol/SystemCardItem.vue
index cbae08b..a85f786 100644
--- a/src/views/monitor/server/system-disk.vue
+++ b/src/components/MyCol/SystemCardItem.vue
@@ -1,47 +1,28 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
 // import 'echarts-gl';
 import { cardClass, cardLogoClass } from '@/views/monitor/server/utils/columns';
-import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
-import { fetchSystemDiskFree, fetchSystemDiskTotal } from '@/api/v1/actuator';
 
-const free = ref();
-const total = ref();
-const percentage = ref<number>(0);
-
-/** 初始化数据 */
-const onSearch = async () => {
-	// 获取数据
-	const diskFree = await fetchSystemDiskFree();
-	const diskTotal = await fetchSystemDiskTotal();
-	free.value = diskFree.measurements[0].value / 1024 / 1024 / 1024;
-	total.value = diskTotal.measurements[0].value / 1024 / 1024 / 1024;
-
-	free.value = free.value.toFixed(2);
-	total.value = total.value.toFixed(2);
-
-	percentage.value = ((total.value - free.value) / total.value) * 100;
-	percentage.value = Number(percentage.value.toFixed(2));
-};
-
-onMounted(() => {
-	onSearch();
+defineProps({
+	title: String,
+	xl: { type: Number, default: 6 },
+	lg: { type: Number, default: 12 },
+	md: { type: Number, default: 12 },
+	sm: { type: Number, default: 24 },
+	xs: { type: Number, default: 24 },
 });
 </script>
 
 <template>
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
+	<el-col :lg="lg" :md="md" :sm="sm" :xl="xl" :xs="xs">
 		<div :class="cardClass">
 			<div class="list-card-item_detail bg-bg_color">
 				<el-row justify="space-between">
 					<div :class="cardLogoClass">
-						<component :is="useRenderIcon('carbon:logo-vmware')" />
+						<slot name="icon" />
 					</div>
 				</el-row>
-				<p class="list-card-item_detail--name text-text_color_primary">磁盘使用</p>
-				<div class="flex justify-center">
-					<el-progress :percentage="percentage" type="dashboard" />
-				</div>
+				<p class="list-card-item_detail--name text-text_color_primary">{{ title }}</p>
+				<slot name="default" />
 			</div>
 		</div>
 	</el-col>
diff --git a/src/views/monitor/server/system-cpu.vue b/src/views/monitor/server/component/system-cpu.vue
similarity index 55%
rename from src/views/monitor/server/system-cpu.vue
rename to src/views/monitor/server/component/system-cpu.vue
index 8b539c3..0828c72 100644
--- a/src/views/monitor/server/system-cpu.vue
+++ b/src/views/monitor/server/component/system-cpu.vue
@@ -2,12 +2,12 @@
 import { onMounted, reactive, ref } from 'vue';
 import { UtilsEChartsOption } from '@pureadmin/utils';
 // import 'echarts-gl';
-import { cardClass, cardLogoClass } from '@/views/monitor/server/utils/columns';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import * as echarts from 'echarts';
 import { useIntervalFn } from '@vueuse/core';
 import dayjs from 'dayjs';
 import { fetchSystemCPU } from '@/api/v1/actuator';
+import SystemCardItem from '@/components/MyCol/SystemCardItem.vue';
 
 const cupECharts = ref();
 const myChart = ref<any>();
@@ -88,92 +88,15 @@ onMounted(() => {
 	onSearch();
 
 	// 定时刷新
-	useIntervalFn(() => onSearch(), 1000);
+	useIntervalFn(() => onSearch(), 2000);
 });
 </script>
 
 <template>
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
-		<div :class="cardClass">
-			<div class="list-card-item_detail bg-bg_color">
-				<el-row justify="space-between">
-					<div :class="cardLogoClass">
-						<component :is="useRenderIcon('solar:cpu-bold-duotone')" />
-					</div>
-				</el-row>
-				<p class="list-card-item_detail--name text-text_color_primary">服务CPU使用率</p>
-				<div ref="cupECharts" style="width: 100%; height: 230px" />
-			</div>
-		</div>
-	</el-col>
+	<SystemCardItem :md="24" :xl="12" title="服务CPU使用率">
+		<template #icon>
+			<component :is="useRenderIcon('solar:cpu-bold-duotone')" />
+		</template>
+		<div ref="cupECharts" style="width: 100%; height: 230px" />
+	</SystemCardItem>
 </template>
-
-<style lang="scss" scoped>
-.list-card-item {
-	display: flex;
-	flex-direction: column;
-	margin-bottom: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	border-radius: 3px;
-
-	&_detail {
-		flex: 1;
-		min-height: 140px;
-		padding: 24px 32px;
-
-		&--logo {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 46px;
-			height: 46px;
-			font-size: 26px;
-			color: #0052d9;
-			background: #e0ebff;
-			border-radius: 50%;
-
-			&__disabled {
-				color: #a1c4ff;
-			}
-		}
-
-		&--operation {
-			display: flex;
-			height: 100%;
-
-			&--tag {
-				border: 0;
-			}
-		}
-
-		&--name {
-			margin: 24px 0 8px;
-			font-size: 16px;
-			font-weight: 400;
-		}
-
-		&--desc {
-			display: -webkit-box;
-			height: 40px;
-			margin-bottom: 24px;
-			overflow: hidden;
-			font-size: 12px;
-			line-height: 20px;
-			text-overflow: ellipsis;
-			-webkit-line-clamp: 2;
-			-webkit-box-orient: vertical;
-		}
-	}
-
-	&__disabled {
-		.list-card-item_detail--name {
-			color: var(--el-text-color-disabled);
-		}
-
-		.list-card-item_detail--operation--tag {
-			color: #bababa;
-		}
-	}
-}
-</style>
diff --git a/src/views/monitor/server/component/system-info.vue b/src/views/monitor/server/component/system-info.vue
new file mode 100644
index 0000000..5fcc5b6
--- /dev/null
+++ b/src/views/monitor/server/component/system-info.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+import SystemCardItem from '@/components/MyCol/SystemCardItem.vue';
+import { info, onSearch, onSearchDisk, percentage } from '@/views/monitor/server/utils/hooks';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+	onSearch();
+	onSearchDisk();
+});
+</script>
+
+<template>
+	<SystemCardItem title="java">
+		<template #icon>
+			<component :is="useRenderIcon('devicon:java')" />
+		</template>
+		<el-text>
+			<div>Java版本：{{ info?.java?.version }}</div>
+
+			<div>供应商：{{ info?.java?.vendor?.name }}</div>
+			<div>供应商版本：{{ info?.java?.vendor?.version }}</div>
+
+			<div>运行时：{{ info?.java?.runtime?.name }}</div>
+			<div>运行时版本：{{ info?.java?.runtime?.version }}</div>
+
+			<div>jvm：{{ info?.java?.jvm?.name }}</div>
+			<div>jvm版本：{{ info?.java?.jvm?.version }}</div>
+		</el-text>
+	</SystemCardItem>
+
+	<SystemCardItem title="系统信息">
+		<template #icon>
+			<component :is="useRenderIcon('mdi:server')" />
+		</template>
+		<div>系统名称： {{ info?.os?.name }}</div>
+		<div>系统版本： {{ info?.os?.version }}</div>
+		<div>系统架构： {{ info?.os?.arch }}</div>
+		<el-divider />
+		<div class="flex flex-col items-center">
+			<p class="list-card-item_detail--name text-text_color_primary">磁盘占用率</p>
+
+			<div>
+				<el-progress :percentage="percentage" type="dashboard" />
+			</div>
+		</div>
+	</SystemCardItem>
+</template>
diff --git a/src/views/monitor/server/system-jvm-cpu.vue b/src/views/monitor/server/component/system-jvm-cpu.vue
similarity index 55%
rename from src/views/monitor/server/system-jvm-cpu.vue
rename to src/views/monitor/server/component/system-jvm-cpu.vue
index ce714ba..8bf7c1b 100644
--- a/src/views/monitor/server/system-jvm-cpu.vue
+++ b/src/views/monitor/server/component/system-jvm-cpu.vue
@@ -2,12 +2,12 @@
 import { onMounted, reactive, ref } from 'vue';
 import { UtilsEChartsOption } from '@pureadmin/utils';
 // import 'echarts-gl';
-import { cardClass, cardLogoClass } from '@/views/monitor/server/utils/columns';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import * as echarts from 'echarts';
 import { useIntervalFn } from '@vueuse/core';
 import dayjs from 'dayjs';
 import { fetchSystemProcessCPU } from '@/api/v1/actuator';
+import SystemCardItem from '@/components/MyCol/SystemCardItem.vue';
 
 const jvmCPUECharts = ref();
 const myChart = ref<any>();
@@ -87,92 +87,15 @@ onMounted(() => {
 	onSearch();
 
 	// 定时刷新
-	useIntervalFn(() => onSearch(), 1000);
+	useIntervalFn(() => onSearch(), 2000);
 });
 </script>
 
 <template>
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
-		<div :class="cardClass">
-			<div class="list-card-item_detail bg-bg_color">
-				<el-row justify="space-between">
-					<div :class="cardLogoClass">
-						<component :is="useRenderIcon('carbon:logo-vmware')" />
-					</div>
-				</el-row>
-				<p class="list-card-item_detail--name text-text_color_primary">JVM最近cpu使用率</p>
-				<div ref="jvmCPUECharts" style="width: 100%; height: 230px" />
-			</div>
-		</div>
-	</el-col>
+	<SystemCardItem :md="24" :xl="12" title="JVM CPU使用率">
+		<template #icon>
+			<component :is="useRenderIcon('carbon:logo-vmware')" />
+		</template>
+		<div ref="jvmCPUECharts" style="width: 100%; height: 230px" />
+	</SystemCardItem>
 </template>
-
-<style lang="scss" scoped>
-.list-card-item {
-	display: flex;
-	flex-direction: column;
-	margin-bottom: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	border-radius: 3px;
-
-	&_detail {
-		flex: 1;
-		min-height: 140px;
-		padding: 24px 32px;
-
-		&--logo {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 46px;
-			height: 46px;
-			font-size: 26px;
-			color: #0052d9;
-			background: #e0ebff;
-			border-radius: 50%;
-
-			&__disabled {
-				color: #a1c4ff;
-			}
-		}
-
-		&--operation {
-			display: flex;
-			height: 100%;
-
-			&--tag {
-				border: 0;
-			}
-		}
-
-		&--name {
-			margin: 24px 0 8px;
-			font-size: 16px;
-			font-weight: 400;
-		}
-
-		&--desc {
-			display: -webkit-box;
-			height: 40px;
-			margin-bottom: 24px;
-			overflow: hidden;
-			font-size: 12px;
-			line-height: 20px;
-			text-overflow: ellipsis;
-			-webkit-line-clamp: 2;
-			-webkit-box-orient: vertical;
-		}
-	}
-
-	&__disabled {
-		.list-card-item_detail--name {
-			color: var(--el-text-color-disabled);
-		}
-
-		.list-card-item_detail--operation--tag {
-			color: #bababa;
-		}
-	}
-}
-</style>
diff --git a/src/views/monitor/server/system-server.vue b/src/views/monitor/server/component/system-server.vue
similarity index 94%
rename from src/views/monitor/server/system-server.vue
rename to src/views/monitor/server/component/system-server.vue
index 06e9cf9..4b7ed38 100644
--- a/src/views/monitor/server/system-server.vue
+++ b/src/views/monitor/server/component/system-server.vue
@@ -13,7 +13,7 @@ const formatValue = (va: any) => {
 
 <template>
 	<!-- 系统状态 -->
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
+	<el-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
 		<div :class="cardClass">
 			<div class="list-card-item_detail bg-bg_color">
 				<el-row justify="space-between">
@@ -41,7 +41,7 @@ const formatValue = (va: any) => {
 	</el-col>
 
 	<!-- 数据库状态 -->
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
+	<el-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24">
 		<div :class="cardClass">
 			<div class="list-card-item_detail bg-bg_color">
 				<el-row justify="space-between">
@@ -60,14 +60,9 @@ const formatValue = (va: any) => {
 					<div>数据库类型：{{ systemServerInfo?.components?.db?.details.database }}</div>
 					<div>验证查询：{{ systemServerInfo?.components?.db?.details.validationQuery }}</div>
 				</el-text>
-			</div>
-		</div>
-	</el-col>
+				<el-divider />
 
-	<!-- Redis状态 -->
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
-		<div :class="cardClass">
-			<div class="list-card-item_detail bg-bg_color">
+				<!-- Redis状态 -->
 				<el-row justify="space-between">
 					<div :class="cardLogoClass">
 						<component :is="useRenderIcon('devicon:redis')" />
@@ -86,6 +81,8 @@ const formatValue = (va: any) => {
 			</div>
 		</div>
 	</el-col>
+
+	<el-col :lg="12" :md="12" :sm="24" :xl="6" :xs="24" />
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/monitor/server/index.vue b/src/views/monitor/server/index.vue
index 7068c9a..511e699 100644
--- a/src/views/monitor/server/index.vue
+++ b/src/views/monitor/server/index.vue
@@ -1,26 +1,23 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue';
-import SystemInfo from '@/views/monitor/server/system-info.vue';
+import SystemInfo from '@/views/monitor/server/component/system-info.vue';
 import { svg } from '@/views/monitor/server/utils/columns';
-import { info, loading, onSearch } from '@/views/monitor/server/utils/hooks';
-import SystemServer from '@/views/monitor/server/system-server.vue';
-import SystemCpu from '@/views/monitor/server/system-cpu.vue';
-import SystemJvmCpu from '@/views/monitor/server/system-jvm-cpu.vue';
-import SystemDisk from '@/views/monitor/server/system-disk.vue';
-
-onMounted(() => {
-	onSearch();
-});
+import { info, loading } from '@/views/monitor/server/utils/hooks';
+import SystemServer from '@/views/monitor/server/component/system-server.vue';
+import SystemCpu from '@/views/monitor/server/component/system-cpu.vue';
+import SystemJvmCpu from '@/views/monitor/server/component/system-jvm-cpu.vue';
 </script>
 
 <template>
 	<div v-loading="loading" :element-loading-svg="svg" element-loading-svg-view-box="-10, -10, 50, 50">
 		<el-row :gutter="16">
-			<system-info v-if="info" :info="info" />
+			<system-info v-if="info" />
 			<system-server />
+		</el-row>
+
+		<!-- CPU 信息-->
+		<el-row :gutter="16">
 			<system-cpu />
 			<system-jvm-cpu />
-			<system-disk />
 		</el-row>
 	</div>
 </template>
diff --git a/src/views/monitor/server/system-info.vue b/src/views/monitor/server/system-info.vue
deleted file mode 100644
index 5122315..0000000
--- a/src/views/monitor/server/system-info.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script lang="ts" setup>
-import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
-import { cardClass, cardLogoClass } from '@/views/monitor/server/utils/columns';
-
-defineProps({
-	info: { type: Object as PropType<any> },
-});
-</script>
-
-<template>
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
-		<div :class="cardClass">
-			<div class="list-card-item_detail bg-bg_color">
-				<el-row justify="space-between">
-					<div :class="cardLogoClass">
-						<component :is="useRenderIcon('devicon:java')" />
-					</div>
-				</el-row>
-				<p class="list-card-item_detail--name text-text_color_primary">java</p>
-				<el-text>
-					<div>Java版本：{{ info?.java?.version }}</div>
-
-					<div>供应商：{{ info?.java?.vendor?.name }}</div>
-					<div>供应商版本：{{ info?.java?.vendor?.version }}</div>
-
-					<div>运行时：{{ info?.java?.runtime?.name }}</div>
-					<div>运行时版本：{{ info?.java?.runtime?.version }}</div>
-
-					<div>jvm：{{ info?.java?.jvm?.name }}</div>
-					<div>jvm版本：{{ info?.java?.jvm?.version }}</div>
-				</el-text>
-			</div>
-		</div>
-	</el-col>
-
-	<el-col :lg="6" :md="8" :sm="12" :xl="4" :xs="24">
-		<div :class="cardClass">
-			<div class="list-card-item_detail bg-bg_color">
-				<el-row justify="space-between">
-					<div :class="cardLogoClass">
-						<component :is="useRenderIcon('mdi:server')" />
-					</div>
-				</el-row>
-				<p class="list-card-item_detail--name text-text_color_primary">系统信息</p>
-				<el-text>
-					<div>系统名称： {{ info?.os?.name }}</div>
-					<div>系统版本： {{ info?.os?.version }}</div>
-					<div>系统架构： {{ info?.os?.arch }}</div>
-				</el-text>
-			</div>
-		</div>
-	</el-col>
-</template>
-
-<style lang="scss" scoped>
-.list-card-item {
-	display: flex;
-	flex-direction: column;
-	margin-bottom: 12px;
-	overflow: hidden;
-	cursor: pointer;
-	border-radius: 3px;
-
-	&_detail {
-		flex: 1;
-		min-height: 140px;
-		padding: 24px 32px;
-
-		&--logo {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 46px;
-			height: 46px;
-			font-size: 26px;
-			color: #0052d9;
-			background: #e0ebff;
-			border-radius: 50%;
-
-			&__disabled {
-				color: #a1c4ff;
-			}
-		}
-
-		&--operation {
-			display: flex;
-			height: 100%;
-
-			&--tag {
-				border: 0;
-			}
-		}
-
-		&--name {
-			margin: 24px 0 8px;
-			font-size: 16px;
-			font-weight: 400;
-		}
-
-		&--desc {
-			display: -webkit-box;
-			height: 40px;
-			margin-bottom: 24px;
-			overflow: hidden;
-			font-size: 12px;
-			line-height: 20px;
-			text-overflow: ellipsis;
-			-webkit-line-clamp: 2;
-			-webkit-box-orient: vertical;
-		}
-	}
-
-	&__disabled {
-		.list-card-item_detail--name {
-			color: var(--el-text-color-disabled);
-		}
-
-		.list-card-item_detail--operation--tag {
-			color: #bababa;
-		}
-	}
-}
-</style>
diff --git a/src/views/monitor/server/utils/hooks.ts b/src/views/monitor/server/utils/hooks.ts
index 95c0b90..23563ff 100644
--- a/src/views/monitor/server/utils/hooks.ts
+++ b/src/views/monitor/server/utils/hooks.ts
@@ -1,12 +1,18 @@
 // 系统健康状态
-import { fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator';
+import { fetchSystemDiskFree, fetchSystemDiskTotal, fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator';
 import { ref } from 'vue';
 
+export const loading = ref(false);
 // 系统服务信息
 export const systemServerInfo = ref<any>({});
 // 系统运行信息
 export const info = ref<any>({});
-export const loading = ref(false);
+// 磁盘可用空间
+const free = ref();
+// 磁盘总空间
+const total = ref();
+// 磁盘占用百分比
+export const percentage = ref<number>(0);
 
 /** 获取系统服务数据 */
 export const onSearch = async () => {
@@ -20,3 +26,18 @@ export const onSearch = async () => {
 
 	loading.value = false;
 };
+
+/** 获取磁盘信息数据 */
+export const onSearchDisk = async () => {
+	// 获取数据
+	const diskFree = await fetchSystemDiskFree();
+	const diskTotal = await fetchSystemDiskTotal();
+	free.value = diskFree.measurements[0].value / 1024 / 1024 / 1024;
+	total.value = diskTotal.measurements[0].value / 1024 / 1024 / 1024;
+
+	free.value = free.value.toFixed(2);
+	total.value = total.value.toFixed(2);
+
+	percentage.value = ((total.value - free.value) / total.value) * 100;
+	percentage.value = Number(percentage.value.toFixed(2));
+};