491 lines
13 KiB
Vue
491 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import { PageContainer } from '@ant-design-vue/pro-layout';
|
||
import { ColumnsType } from 'ant-design-vue/lib/table';
|
||
import { message } from 'ant-design-vue/lib';
|
||
import { reactive, toRaw, ref, onMounted,onBeforeUnmount} from 'vue';
|
||
import { listMain } from '@/api/index';
|
||
import useI18n from '@/hooks/useI18n';
|
||
import { TooltipComponent } from 'echarts/components';
|
||
import { GaugeChart } from 'echarts/charts';
|
||
import { CanvasRenderer } from 'echarts/renderers';
|
||
import * as echarts from 'echarts/core';
|
||
import { TitleComponent, LegendComponent } from 'echarts/components';
|
||
import { PieChart } from 'echarts/charts';
|
||
import { LabelLayout } from 'echarts/features';
|
||
const { t } = useI18n();
|
||
echarts.use([
|
||
TooltipComponent,
|
||
GaugeChart,
|
||
TitleComponent,
|
||
LegendComponent,
|
||
PieChart,
|
||
CanvasRenderer,
|
||
LabelLayout,
|
||
]);
|
||
|
||
/**表格字段列 */
|
||
//customRender(){} ----单元格处理
|
||
let tableColumns: ColumnsType = [
|
||
{
|
||
title: '对象',
|
||
dataIndex: 'name',
|
||
align: 'center',
|
||
key: 'status',
|
||
},
|
||
{
|
||
title: '网元状态',
|
||
dataIndex: 'status',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '刷新时间',
|
||
dataIndex: 'refresh',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '版本',
|
||
dataIndex: 'version',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: 'IP地址',
|
||
dataIndex: 'ipAddress',
|
||
key: 'groupName',
|
||
align: 'center',
|
||
},
|
||
];
|
||
/**表格状态类型 */
|
||
type TabeStateType = {
|
||
/**加载等待 */
|
||
loading: boolean;
|
||
/**紧凑型 */
|
||
size: string;
|
||
/**斑马纹 */
|
||
striped: boolean;
|
||
/**搜索栏 */
|
||
seached: boolean;
|
||
/**记录数据 */
|
||
data: object[];
|
||
/**勾选记录 */
|
||
selectedRowKeys: (string | number)[];
|
||
};
|
||
|
||
/**表格状态 */
|
||
let tableState: TabeStateType = reactive({
|
||
loading: false,
|
||
size: 'middle',
|
||
striped: false,
|
||
seached: false,
|
||
data: [],
|
||
selectedRowKeys: [],
|
||
});
|
||
|
||
/**表格状态 */
|
||
let nfInfo: any = reactive({
|
||
obj: 'OMC',
|
||
version: '1.6.2',
|
||
status: '正常',
|
||
number: '',
|
||
outTimeDate: '',
|
||
});
|
||
|
||
/**表格状态类型 */
|
||
type nfStateType = {
|
||
/**主机名 */
|
||
hostName: string;
|
||
/**操作系统信息 */
|
||
osInfo: string;
|
||
/**数据库信息 */
|
||
dbInfo: string;
|
||
/**IP地址 */
|
||
ipAddress: string;
|
||
/**端口 */
|
||
port: number;
|
||
/**版本 */
|
||
version: string;
|
||
/**CPU利用率 */
|
||
cpuUse: string;
|
||
/**内存使用 */
|
||
memoryUse: string;
|
||
/**用户容量 */
|
||
capability: number;
|
||
/**序列号 */
|
||
serialNum: string;
|
||
/**许可证到期日期 */
|
||
/* selectedRowKeys: (string | number)[];*/
|
||
expiryDate: string;
|
||
};
|
||
/**网元详细信息 */
|
||
let pronInfo: nfStateType = reactive({
|
||
hostName: '5gc',
|
||
osInfo:
|
||
'Linux 5gc 4.15.0-112-generic #113-Ubuntu SMP Thu Jul 9 23:41:39 UTC 2020 x86_64 GNU/Linux',
|
||
dbInfo: 'adb v1.0.1',
|
||
ipAddress: '-',
|
||
port: 3030,
|
||
version: '-',
|
||
cpuUse: '-',
|
||
memoryUse: '-',
|
||
capability: 0,
|
||
serialNum: '-',
|
||
expiryDate: '-',
|
||
});
|
||
|
||
/**查询网元状态列表 */
|
||
function fnGetList() {
|
||
if (tableState.loading) return;
|
||
tableState.loading = true;
|
||
listMain().then(res => {
|
||
tableState.data = res;
|
||
tableState.loading = false;
|
||
var rightNum = 0;
|
||
var errorNum = 0;
|
||
|
||
for (let i = 0; i < res.length; i++) {
|
||
if (res[i].status == '正常') {
|
||
rightNum++;
|
||
} else {
|
||
errorNum++;
|
||
}
|
||
}
|
||
echarts.init(document.getElementById('echarts-records')).clear();
|
||
var chartDom = document.getElementById('echarts-records');
|
||
var myChart = echarts.init(chartDom);
|
||
|
||
var option = {
|
||
title: {
|
||
text: '',
|
||
subtext: '',
|
||
left: 'center',
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
left: 'left',
|
||
},
|
||
series: [
|
||
{
|
||
name: '网元状态',
|
||
type: 'pie',
|
||
radius: '70%',
|
||
center: ['50%', '50%'],
|
||
data: [
|
||
{ value: rightNum, name: '正常' },
|
||
{ value: errorNum, name: '异常' },
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||
},
|
||
},
|
||
|
||
label: {},
|
||
},
|
||
],
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
window.onresize = function () {
|
||
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
|
||
myChart.resize();
|
||
};
|
||
});
|
||
}
|
||
|
||
/**點擊網元名 */
|
||
function init(e: any) {
|
||
let realData = toRaw(e);
|
||
var chartDom = document.getElementById('echarts-records');
|
||
var myChart = echarts.init(chartDom);
|
||
myChart.clear(); //怕遗留以前得元素
|
||
|
||
let cpuUsage = realData.cpuUsage;
|
||
let memUsage = realData.memUsage;
|
||
var nfMenUsage =
|
||
Math.round((memUsage?.nfUsedMem / memUsage?.totalMem) * 10000) / 100.0;
|
||
let partitionInfo = realData.diskSpace?.partitionInfo[1];
|
||
var nfMaxDiskSpace =
|
||
Math.round((partitionInfo?.used / partitionInfo?.total) * 10000) / 100.0;
|
||
let option = {
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}%',
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Nf Memory usage',
|
||
center: ['17%', '50%'],
|
||
radius: '80%',
|
||
type: 'gauge',
|
||
progress: {
|
||
show: true,
|
||
},
|
||
pointer: {
|
||
//仪表盘的指针
|
||
//这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
|
||
show: true,
|
||
//指针长度
|
||
length: '60%',
|
||
},
|
||
title: {
|
||
offsetCenter: [0, '90%'],
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
fontSize: 18,
|
||
},
|
||
offsetCenter: [0, '60%'],
|
||
},
|
||
data: [
|
||
{
|
||
value: nfMenUsage,
|
||
name: 'MEM',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
center: ['50%', '50%'],
|
||
name: 'Nf CPU usage',
|
||
radius: '80%',
|
||
type: 'gauge',
|
||
progress: {
|
||
show: true,
|
||
},
|
||
|
||
title: {
|
||
offsetCenter: [0, '90%'],
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
fontSize: 18,
|
||
},
|
||
offsetCenter: [0, '60%'],
|
||
},
|
||
data: [
|
||
{
|
||
value: cpuUsage?.nfCpuUsage / 100,
|
||
name: 'CPU',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
center: ['83%', '50%'],
|
||
name: 'NF maximum disk usage',
|
||
radius: '80%',
|
||
type: 'gauge',
|
||
progress: {
|
||
show: true,
|
||
},
|
||
title: {
|
||
offsetCenter: [0, '90%'],
|
||
},
|
||
detail: {
|
||
valueAnimation: true,
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
fontSize: 18,
|
||
},
|
||
offsetCenter: [0, '60%'],
|
||
},
|
||
data: [
|
||
{
|
||
value: nfMaxDiskSpace,
|
||
name: 'DiskSpace',
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
option && myChart.setOption(option);
|
||
window.onresize = function () {
|
||
// echarts 窗口缩放自适应 随着div--echarts-records的大小来适应
|
||
myChart.resize();
|
||
};
|
||
|
||
nfInfo.obj = realData.name;
|
||
nfInfo.number = realData.serialNum;
|
||
nfInfo.outTimeDate = realData.expiryDate;
|
||
}
|
||
|
||
/**抽屉 网元详细信息 */
|
||
const visible = ref(false);
|
||
const closeDrawer = () => {
|
||
visible.value = false;
|
||
};
|
||
/**抽屉 网元详细信息 */
|
||
|
||
/**监听表格行事件*/
|
||
function rowClick(record: any, index: any) {
|
||
return {
|
||
onClick: (event: any) => {
|
||
if (toRaw(record).status == '异常') {
|
||
message.error(`网元状态异常`, 2);
|
||
return false;
|
||
} else {
|
||
let pronData = toRaw(record);
|
||
//渲染详细信息
|
||
pronInfo = {
|
||
hostName: pronData.hostName,
|
||
osInfo: pronData.osInfo,
|
||
dbInfo: pronData.dbInfo,
|
||
ipAddress: pronData.ipAddress,
|
||
port: pronData.port,
|
||
version: pronData.version,
|
||
cpuUse:
|
||
pronData.name +
|
||
':' +
|
||
pronData.cpuUsage?.nfCpuUsage / 100 +
|
||
'%; ' +
|
||
'SYS:' +
|
||
pronData.cpuUsage?.sysCpuUsage / 100 +
|
||
'%',
|
||
memoryUse:
|
||
'Total:' +
|
||
pronData.memUsage?.totalMem +
|
||
'KB; ' +
|
||
pronData.name +
|
||
':' +
|
||
pronData.memUsage?.nfUsedMem +
|
||
'KB; SYS:' +
|
||
pronData.memUsage?.sysMemUsage +
|
||
'KB',
|
||
capability: pronData.capability,
|
||
serialNum: pronData.serialNum,
|
||
expiryDate: pronData.expiryDate,
|
||
};
|
||
}
|
||
visible.value = true;
|
||
},
|
||
};
|
||
}
|
||
let timer: any;
|
||
onMounted(() => {
|
||
fnGetList();
|
||
timer = setInterval(fnGetList, 10000); // 每隔10秒执行一次
|
||
});
|
||
|
||
// 在组件卸载之前清除定时器
|
||
|
||
onBeforeUnmount(() => {
|
||
clearInterval(timer);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<PageContainer :breadcrumb="false">
|
||
<div>
|
||
<a-drawer :visible="visible" @close="closeDrawer" :width="700">
|
||
<a-descriptions bordered :column="1" :label-style="{ width: '160px' }">
|
||
<a-descriptions-item :label="t('views.index.hostName')">{{
|
||
pronInfo.hostName
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.osInfo')">{{
|
||
pronInfo.osInfo
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.dbInfo')">{{
|
||
pronInfo.dbInfo
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.ipAddress')">{{
|
||
pronInfo.ipAddress
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.port')">{{
|
||
pronInfo.port
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.version')">{{
|
||
pronInfo.version
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.cpuUse')">{{
|
||
pronInfo.cpuUse
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.memoryUse')">{{
|
||
pronInfo.memoryUse
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.capability')">{{
|
||
pronInfo.capability
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.serialNum')">{{
|
||
pronInfo.serialNum
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item :label="t('views.index.expiryDate')">{{
|
||
pronInfo.expiryDate
|
||
}}</a-descriptions-item>
|
||
</a-descriptions>
|
||
</a-drawer>
|
||
</div>
|
||
|
||
<a-row :gutter="16">
|
||
<a-col :lg="14" :md="16" :xs="24">
|
||
<!-- 表格列表 -->
|
||
<a-table
|
||
class="table"
|
||
row-key="id"
|
||
:columns="tableColumns"
|
||
:loading="tableState.loading"
|
||
:data-source="tableState.data"
|
||
:pagination="false"
|
||
:scroll="{ x: true }"
|
||
:customRow="rowClick"
|
||
>
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'status'">
|
||
<div v-if="record.status == '正常'">
|
||
<a-tag color="blue" @click="init(record)">{{
|
||
record.name
|
||
}}</a-tag>
|
||
</div>
|
||
<div v-else>
|
||
<a-tag color="pink">{{ record.name }}</a-tag>
|
||
</div>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</a-col>
|
||
<a-col :lg="10" :md="8" :xs="24">
|
||
<a-card title="运行状态" style="margin-bottom: 16px">
|
||
<div
|
||
id="echarts-records"
|
||
style="width: 100%; min-height: 200px"
|
||
></div>
|
||
</a-card>
|
||
<a-card title="简略信息" style="margin-top: 16px">
|
||
<a-descriptions
|
||
bordered
|
||
:column="1"
|
||
:label-style="{ width: '160px' }"
|
||
>
|
||
<a-descriptions-item label="对象">{{
|
||
nfInfo.obj
|
||
}}</a-descriptions-item>
|
||
<template v-if="nfInfo.obj === 'OMC'">
|
||
<a-descriptions-item label="版本号">{{
|
||
nfInfo.version
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item label="系统状态">{{
|
||
nfInfo.status
|
||
}}</a-descriptions-item>
|
||
</template>
|
||
<template v-else>
|
||
<a-descriptions-item label="序列号">{{
|
||
nfInfo.number
|
||
}}</a-descriptions-item>
|
||
<a-descriptions-item label="许可证到期日期">{{
|
||
nfInfo.outTimeDate
|
||
}}</a-descriptions-item>
|
||
</template>
|
||
</a-descriptions>
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</PageContainer>
|
||
</template>
|
||
|
||
<style lang="less" scoped></style>
|