optimize: ♻️ 服务监控响应式支持更好
This commit is contained in:
parent
f37cb642be
commit
7bff41b0bc
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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));
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue