118 lines
3.9 KiB
Vue
118 lines
3.9 KiB
Vue
<template>
|
||
<div class="p-4">
|
||
<a-card :bordered="false" style="height: 100%">
|
||
<a-tabs v-model:activeKey="activeKey" @change="tabChange">
|
||
<a-tab-pane key="1" tab="服务器信息"></a-tab-pane>
|
||
<a-tab-pane key="2" tab="JVM信息" force-render></a-tab-pane>
|
||
<a-tab-pane key="3" tab="Tomcat信息"></a-tab-pane>
|
||
<!-- <a-tab-pane key="6" tab="Undertow信息"></a-tab-pane>-->
|
||
<a-tab-pane key="4" tab="磁盘监控">
|
||
<DiskInfo v-if="activeKey == 4" style="height: 100%"></DiskInfo>
|
||
</a-tab-pane>
|
||
<a-tab-pane key="5" tab="内存信息" />
|
||
</a-tabs>
|
||
<BasicTable @register="registerTable" :searchInfo="searchInfo" :dataSource="dataSource" v-show="activeKey != 4">
|
||
<template #tableTitle>
|
||
<div slot="message"
|
||
>上次更新时间：{{ lastUpdateTime }}
|
||
<a-divider type="vertical" />
|
||
<a @click="handleUpdate">立即更新</a></div
|
||
>
|
||
</template>
|
||
<template #param="{ record, text }">
|
||
<a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
|
||
</template>
|
||
<template #text="{ record }">
|
||
{{ textInfo[record.param].text }}
|
||
</template>
|
||
<template #value="{ record, text }"> {{ text }} {{ textInfo[record.param].unit }} </template>
|
||
</BasicTable>
|
||
</a-card>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" name="monitor-server" setup>
|
||
import { onMounted, ref, unref } from 'vue';
|
||
import { BasicTable, useTable, TableAction } from '/@/components/Table';
|
||
import DiskInfo from '../disk/DiskInfo.vue';
|
||
import { getServerInfo, getTextInfo, getMoreInfo } from './server.api';
|
||
import { columns } from './server.data';
|
||
import { useMessage } from '/@/hooks/web/useMessage';
|
||
import dayjs from 'dayjs';
|
||
|
||
const dataSource = ref([]);
|
||
const activeKey = ref('1');
|
||
const moreInfo = ref({});
|
||
const lastUpdateTime = ref({});
|
||
let textInfo = ref({});
|
||
const { createMessage } = useMessage();
|
||
const checkedKeys = ref<Array<string | number>>([]);
|
||
|
||
const searchInfo = { logType: '1' };
|
||
const [registerTable, { reload }] = useTable({
|
||
columns,
|
||
showIndexColumn: false,
|
||
bordered: true,
|
||
pagination: false,
|
||
canResize: false,
|
||
tableSetting: { fullScreen: true },
|
||
rowKey: 'id',
|
||
});
|
||
|
||
//tab切换
|
||
function tabChange(key) {
|
||
if (key != 4) {
|
||
getInfoList(key);
|
||
}
|
||
}
|
||
|
||
//加载信息
|
||
function getInfoList(infoType) {
|
||
lastUpdateTime.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
|
||
getServerInfo(infoType).then((res) => {
|
||
textInfo.value = getTextInfo(infoType);
|
||
moreInfo.value = getMoreInfo(infoType);
|
||
let info = [];
|
||
if (infoType === '5') {
|
||
for (let param in res[0].result) {
|
||
let data = res[0].result[param];
|
||
let val = convert(data, unref(textInfo)[param].valueType);
|
||
info.push({ id: param, param, text: 'false value', value: val });
|
||
}
|
||
} else {
|
||
res.forEach((value, id) => {
|
||
let more = unref(moreInfo)[value.name];
|
||
if (!(more instanceof Array)) {
|
||
more = [''];
|
||
}
|
||
more.forEach((item, idx) => {
|
||
let param = value.name + item;
|
||
let val = convert(value.measurements[idx].value, unref(textInfo)[param].valueType);
|
||
info.push({ id: param + id, param, text: 'false value', value: val });
|
||
});
|
||
});
|
||
}
|
||
dataSource.value = info;
|
||
});
|
||
}
|
||
|
||
function handleUpdate() {
|
||
getInfoList(activeKey.value);
|
||
}
|
||
|
||
//单位转换
|
||
function convert(value, type) {
|
||
if (type === 'Number') {
|
||
return Number(value * 100).toFixed(2);
|
||
} else if (type === 'Date') {
|
||
return dayjs(value * 1000).format('YYYY-MM-DD HH:mm:ss');
|
||
} else if (type === 'RAM') {
|
||
return Number(value / 1048576).toFixed(3);
|
||
}
|
||
return value;
|
||
}
|
||
|
||
onMounted(() => {
|
||
getInfoList(activeKey.value);
|
||
});
|
||
</script>
|