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

feat: 🚀 更改服务监控显示样式

This commit is contained in:
bunny 2024-10-25 10:13:42 +08:00
parent e046171f47
commit 9b50823cdb
5 changed files with 183 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,9 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import SystemInfo from '@/views/monitor/server/info.vue'; import SystemInfo from '@/views/monitor/server/system-info.vue';
import { $t } from '@/plugins/i18n';
import { svg } from '@/views/monitor/server/utils/columns'; import { svg } from '@/views/monitor/server/utils/columns';
import ListCard from '@/views/monitor/server/list-card.vue'; import { info, loading, onSearch } from '@/views/monitor/server/utils/hooks';
import { datalist, info, loading, onSearch } from '@/views/monitor/server/utils/hooks'; import SystemServer from '@/views/monitor/server/system-server.vue';
onMounted(() => { onMounted(() => {
onSearch(); onSearch();
@ -13,13 +12,14 @@ onMounted(() => {
<template> <template>
<div v-loading="loading" :element-loading-svg="svg" element-loading-svg-view-box="-10, -10, 50, 50"> <div v-loading="loading" :element-loading-svg="svg" element-loading-svg-view-box="-10, -10, 50, 50">
<el-empty v-if="false" :description="$t('no_server')" /> <!--<el-empty v-if="false" :description="$t('no_server')" />-->
<el-row :gutter="16"> <el-row :gutter="16">
<system-info v-if="info.java.jvm" :info="info" /> <system-info v-if="info" :info="info" />
<el-col v-for="(product, index) in datalist" :key="index" :lg="6" :md="8" :sm="12" :xl="4" :xs="24"> <system-server />
<ListCard :product="product" /> <!--<el-col v-for="(product, index) in datalist" :key="index" :lg="6" :md="8" :sm="12" :xl="4" :xs="24">-->
</el-col> <!-- <ListCard :product="product" />-->
<!--</el-col>-->
</el-row> </el-row>
</div> </div>
</template> </template>

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

@ -18,16 +18,16 @@ defineProps({
</el-row> </el-row>
<p class="list-card-item_detail--name text-text_color_primary">java</p> <p class="list-card-item_detail--name text-text_color_primary">java</p>
<el-text> <el-text>
<div>Java版本：{{ info.java.version }}</div> <div>Java版本：{{ info?.java?.version }}</div>
<div>供应商：{{ info.java.vendor.name }}</div> <div>供应商：{{ info?.java?.vendor?.name }}</div>
<div>供应商版本：{{ info.java.vendor.version }}</div> <div>供应商版本：{{ info?.java?.vendor?.version }}</div>
<div>运行时：{{ info.java.runtime.name }}</div> <div>运行时：{{ info?.java?.runtime?.name }}</div>
<div>运行时版本：{{ info.java.runtime.version }}</div> <div>运行时版本：{{ info?.java?.runtime?.version }}</div>
<div>jvm：{{ info.java.jvm.name }}</div> <div>jvm：{{ info?.java?.jvm?.name }}</div>
<div>jvm版本：{{ info.java.jvm.version }}</div> <div>jvm版本：{{ info?.java?.jvm?.version }}</div>
</el-text> </el-text>
</div> </div>
</div> </div>
@ -43,9 +43,9 @@ defineProps({
</el-row> </el-row>
<p class="list-card-item_detail--name text-text_color_primary">系统信息</p> <p class="list-card-item_detail--name text-text_color_primary">系统信息</p>
<el-text> <el-text>
<div>系统名称： {{ info.os.name }}</div> <div>系统名称： {{ info?.os?.name }}</div>
<div>系统版本： {{ info.os.version }}</div> <div>系统版本： {{ info?.os?.version }}</div>
<div>系统架构： {{ info.os.arch }}</div> <div>系统架构： {{ info?.os?.arch }}</div>
</el-text> </el-text>
</div> </div>
</div> </div>

159
src/views/monitor/server/system-server.vue Normal file
View File

@ -0,0 +1,159 @@
<script lang="ts" setup>
import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
import { cardClass, cardLogoClass } from '@/views/monitor/server/utils/columns';
import { systemServerInfo } from '@/views/monitor/server/utils/hooks';
import { $t } from '@/plugins/i18n';
/** 格式化值 */
const formatValue = (va: any) => {
va = va / 1024 / 1024 / 1024;
return va.toFixed(2);
};
</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('pajamas:status-health')" />
</div>
<div class="list-card-item_detail--operation">
<el-tag :color="systemServerInfo?.components?.diskSpace?.status === 'UP' ? '#00a870' : '#eee'" class="mx-1 list-card-item_detail--operation--tag" effect="dark">
{{ systemServerInfo?.components?.diskSpace?.status === 'UP' ? $t('enable') : $t('disable') }}
</el-tag>
</div>
</el-row>
<p class="list-card-item_detail--name text-text_color_primary">系统状态</p>
<el-text>
<div>系统状态：{{ systemServerInfo?.status === 'UP' ? '正常' : '异常' }}</div>
<div>ping：{{ systemServerInfo?.components?.ping?.status === 'UP' ? '正常' : '异常' }}</div>
<div>磁盘总量：{{ formatValue(systemServerInfo?.components?.diskSpace.details.total) }}GB</div>
<div>磁盘可用：{{ formatValue(systemServerInfo?.components?.diskSpace.details.free) }}GB</div>
<div>阈值：{{ formatValue(systemServerInfo?.components?.diskSpace.details.threshold) }}GB</div>
<div>项目位置：{{ systemServerInfo?.components?.diskSpace.details.path }}</div>
<div>是否存在：{{ systemServerInfo?.components?.diskSpace.details.exists ? '是' : '否' }}</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('raphael:db')" />
</div>
<div class="list-card-item_detail--operation">
<el-tag :color="systemServerInfo?.components?.db?.status === 'UP' ? '#00a870' : '#eee'" class="mx-1 list-card-item_detail--operation--tag" effect="dark">
{{ systemServerInfo?.components?.db?.status === 'UP' ? $t('enable') : $t('disable') }}
</el-tag>
</div>
</el-row>
<p class="list-card-item_detail--name text-text_color_primary">数据库状态</p>
<el-text>
<div>数据库状态：{{ systemServerInfo?.components?.db?.status === 'UP' ? $t('enable') : $t('disable') }}</div>
<div>数据库类型：{{ systemServerInfo?.components?.db?.details.database }}</div>
<div>验证查询：{{ systemServerInfo?.components?.db?.details.validationQuery }}</div>
</el-text>
</div>
</div>
</el-col>
<!-- 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">
<el-row justify="space-between">
<div :class="cardLogoClass">
<component :is="useRenderIcon('devicon:redis')" />
</div>
<div class="list-card-item_detail--operation">
<el-tag :color="systemServerInfo?.components?.redis?.status === 'UP' ? '#00a870' : '#eee'" class="mx-1 list-card-item_detail--operation--tag" effect="dark">
{{ systemServerInfo?.components?.redis?.status === 'UP' ? $t('enable') : $t('disable') }}
</el-tag>
</div>
</el-row>
<p class="list-card-item_detail--name text-text_color_primary">Redis状态</p>
<el-text>
<div>数据库状态：{{ systemServerInfo?.components?.redis?.status === 'UP' ? $t('enable') : $t('disable') }}</div>
<div>数据库类型：{{ systemServerInfo?.components?.redis?.details.version }}</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>

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

@ -2,9 +2,10 @@
import { fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator'; import { fetchSystemHealthList, fetchSystemInfo } from '@/api/v1/actuator';
import { ref } from 'vue'; import { ref } from 'vue';
export const datalist = ref([]); // 系统服务信息
export const systemServerInfo = ref<any>({});
// 系统运行信息 // 系统运行信息
export const info = ref({ java: { vendor: {}, runtime: {}, jvm: {} }, os: {} }); export const info = ref<any>({});
export const loading = ref(false); export const loading = ref(false);
/** 获取系统服务数据 */ /** 获取系统服务数据 */
@ -12,13 +13,7 @@ export const onSearch = async () => {
loading.value = true; loading.value = true;
// 获取系统运行状态信息 // 获取系统运行状态信息
const result = await fetchSystemHealthList(); systemServerInfo.value = await fetchSystemHealthList();
datalist.value = Object.entries(result.components).map(([key, value]: any) => ({
type: key,
key: `${key}`,
status: value.status === 'UP',
details: value.details && Object.entries(value.details).map(([key, value]: any) => ({ key, value })),
}));
// 系统信息 // 系统信息
info.value = await fetchSystemInfo(); info.value = await fetchSystemInfo();

2
src/views/monitor/userLoginLog/utils/columns.ts
View File

@ -10,7 +10,7 @@ export const columns: TableColumnList = [
// 登录Ip // 登录Ip
{ label: $t('userLoginLog_ipAddress'), prop: 'ipAddress', width: 130 }, { label: $t('userLoginLog_ipAddress'), prop: 'ipAddress', width: 130 },
// 登录Ip归属地 // 登录Ip归属地
{ label: $t('userLoginLog_ipRegion'), prop: 'ipRegion', width: 100 }, { label: $t('userLoginLog_ipRegion'), prop: 'ipRegion', width: 160 },
// 登录时代理 // 登录时代理
{ label: $t('userLoginLog_userAgent'), prop: 'userAgent' }, { label: $t('userLoginLog_userAgent'), prop: 'userAgent' },
// 操作类型 // 操作类型