auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

optimize: ♻️ 服务监控响应式支持更好

This commit is contained in:
Bunny 2024-10-25 21:56:22 +08:00
parent f37cb642be
commit 7bff41b0bc
8 changed files with 114 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/monitor/server/system-disk.vue → src/components/MyCol/SystemCardItem.vue
View File

@ -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>

93
src/views/monitor/server/system-cpu.vue → src/views/monitor/server/component/system-cpu.vue
View File

@ -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>

48
src/views/monitor/server/component/system-info.vue Normal file
View File

@ -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>

93
src/views/monitor/server/system-jvm-cpu.vue → src/views/monitor/server/component/system-jvm-cpu.vue
View File

@ -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>

15
src/views/monitor/server/system-server.vue → src/views/monitor/server/component/system-server.vue
View File

@ -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>

23
src/views/monitor/server/index.vue
View File

@ -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>

123
src/views/monitor/server/system-info.vue
View File

@ -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>

25
src/views/monitor/server/utils/hooks.ts
View File

@ -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));
};