274 lines
11 KiB
Vue
274 lines
11 KiB
Vue
<template>
|
|
<div class="app-container app-viewContent">
|
|
<Form :formList="formList" :ruleFormData="ruleForm" :config="{buttonGroup: []}" @fnClick="callback"></Form>
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="监控项" name="first">
|
|
<ResMonitorDigitalSuper></ResMonitorDigitalSuper>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="自动发现项" name="second">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item v-for="(val,index) of linuxSystem" :title="val.title" :name="index">
|
|
<div class="mt10 w100">
|
|
<Form :formList="val.formList" :ruleFormData="val.formModel" :config="val.config" @fnClick="callback"></Form>
|
|
<div v-for="item of val.echartList" class="w100 mt20 mb20" style="height: 200px;border-top: 1px solid #d8dce5">
|
|
<EchartsLine class="w100 h100" :lineData="item.dataVal" :title="item.title"></EchartsLine>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="告警信息" name="third">
|
|
<TableList style="height: 500px" class="w100" :config="{colHiddenCheck: true, colTopHiddenIcon: true}" :columns="columns" :queryParams="queryParams" :tableList="tableList" @fnRenderList="getList"></TableList>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import Form from '@/components/form/index.vue';
|
|
import TableList from "@/components/table/index.vue"
|
|
import {listAllBusinessList, calculateAvg} from "@/api/disRevenue/earnManage"
|
|
import {listAllResourList, listTopology} from "@/api/disRevenue/resource"
|
|
import EchartsLine from "@/components/echartsList/line.vue";
|
|
import ResMonitorDigitalSuper from "./digitalSuper";
|
|
export default {
|
|
name: 'ResMonitorDetails',
|
|
components: {Form, TableList, EchartsLine, ResMonitorDigitalSuper},
|
|
dicts: ['rm_topology_type', 'rm_register_online_state', 'rm_register_resource_type'],
|
|
data() {
|
|
return {
|
|
ruleForm: {},
|
|
formList: [],
|
|
ruleFormTow: {},
|
|
formListTow: [],
|
|
paramsData: {},
|
|
activeName: 'first',
|
|
activeNames: [0, 1],
|
|
linuxSystem: [],
|
|
columns: {
|
|
id: { label: `ID`, width: '50', visible: false },
|
|
switchSn: { label: `源IP`, minWidth: '200', visible: true},
|
|
switchName: { label: `发生时间`, minWidth: '250', visible: true },
|
|
interfaceName: { label: `状态`, minWidth: '100', visible: true },
|
|
connectedDeviceType: { label: `内容`, minWidth: '250', visible: true },
|
|
},
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
},
|
|
tableList: []
|
|
}
|
|
},
|
|
created() {
|
|
// this.paramsData = this.$route && this.$route.query;
|
|
this.fnFormList('1');
|
|
// this.switchList();
|
|
},
|
|
methods: {
|
|
handleClick(tab, event) {
|
|
if (tab && tab.index === '1') {
|
|
this.secondList();
|
|
} else if (tab && tab.index === '2') {
|
|
this.getList();
|
|
}
|
|
},
|
|
// formList集合
|
|
fnFormList(num) {
|
|
this.formList = [{
|
|
config: {title: '基本信息'},
|
|
controls: {
|
|
id: {label: 'ID',hidden: true},
|
|
hardwareSn: {label: '硬件SN', span: 12, type: 'input',disabled: true},
|
|
resourceType: {label: '资源类型', span: 12, type: 'select',disabled: true, options: this.dict.type.rm_register_resource_type},
|
|
resourceName: {label: '资源名称', span: 12, type: 'input', disabled: true},
|
|
ipAddress: {label: 'IP地址', span: 12, type: 'input',disabled: true},
|
|
onlineStatus: {label: '在线状态', span: 12, type: 'select',disabled: true, options: this.dict.type.rm_register_online_state},
|
|
switchName: {label: '关联监控模版', span: 12, type: 'select',disabled: true},
|
|
resourceGroup: {label: '所属资源组', span: 12, type: 'select',disabled: true},
|
|
cpu: {label: 'CPU使用率%', span: 12, type: 'input',disabled: true},
|
|
neicun: {label: '内存使用率%', span: 12, type: 'input',disabled: true},
|
|
gaojing: {label: '未处理告警数', span: 12, type: 'input',disabled: true},
|
|
}
|
|
}];
|
|
let formFirst = [
|
|
{name: '系统描述', value: 'aaa'},
|
|
{name: '系统位置', value: 'aaa'},
|
|
{name: '系统Object ID', value: 'aaa'},
|
|
{name: '系统MAC地址', value: 'aaa'},
|
|
{name: '系统运行时间', value: 'aaa'},
|
|
{name: '设备名称', value: 'aaa'},
|
|
{name: '系统联系信息', value: 'aaa'},
|
|
{name: '设备软件版本', value: 'aaa'},
|
|
{name: '系统名称', value: 'aaa'},
|
|
];
|
|
let formSecond = [
|
|
{name: '总内存', value: 'aaa'},
|
|
{name: '操作系统', value: 'aaa'},
|
|
{name: '操作系统架构', value: 'aaa'},
|
|
{name: '最大进程数', value: 'aaa'},
|
|
{name: '硬盘总可用空间', value: 'aaa'},
|
|
{name: '系统启动时间', value: 'aaa'},
|
|
{name: '系统描述', value: 'aaa'},
|
|
{name: '系统正常运行时间', value: 'aaa'},
|
|
{name: '系统本地时间', value: 'aaa'},
|
|
{name: 'CPU数量', value: 'aaa'},
|
|
];
|
|
this.formListTow = num && num === '1' ? formFirst : formSecond;
|
|
},
|
|
getList() {
|
|
this.loading = true;
|
|
listTopology(this.addDateRange(this.queryParams)).then(response => {
|
|
this.tableList = response.rows;
|
|
this.queryParams.total = response.total;
|
|
this.loading = false;
|
|
})
|
|
},
|
|
// 获取交换机下拉
|
|
switchList() {
|
|
listAllResourList({resourceType: this.paramsData.resourceType}).then(val => {
|
|
this.formList[0].controls.nodeName['options'] = val && val.map(item => {
|
|
return Object.assign({label: item.resourceName, value: item.resourceName});
|
|
});
|
|
});
|
|
listAllBusinessList().then(val => {
|
|
this.formList[0].controls.businessName['options'] = val && val.data.map(item => {
|
|
return Object.assign({label: item.businessName, value: item.id});
|
|
});
|
|
});
|
|
},
|
|
// 第二节点 自动发现项
|
|
secondList(){
|
|
this.linuxSystem = [{
|
|
title: '网络端口GE1/0/1',
|
|
formList: [{
|
|
controls: {
|
|
id: {label: 'ID',hidden: true},
|
|
hardwareSn: {label: '端口名称', span: 12, type: 'input',disabled: true},
|
|
resourceType: {label: '端口类型', span: 12, type: 'input',disabled: true},
|
|
resourceName: {label: '端口状态', span: 12, type: 'input', disabled: true},
|
|
ipAddress: {label: '端口适配速率(Mbps)', span: 12, type: 'input',disabled: true}
|
|
}
|
|
}],
|
|
formModel: {},
|
|
config: {labelWidth: '160px', buttonGroup: []},
|
|
echartList: [{
|
|
title: '设备CPU使用率(%)',
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
gridTop: '30%',
|
|
legend: {top: '5%', left: 'center'},
|
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
|
dataList: [{
|
|
name: '设备CPU使用率',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
}]
|
|
}
|
|
},{
|
|
title: '设备内存使用率(%)',
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
gridTop: '30%',
|
|
legend: {top: '5%', left: 'center'},
|
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
|
dataList: [{
|
|
name: '设备内存使用率',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
},{
|
|
name: 'CPU运行用户进程所花费的时间',
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
|
}]
|
|
}
|
|
}]
|
|
},{
|
|
title: '光模块sabc',
|
|
formList: [{
|
|
controls: {
|
|
id: {label: 'ID',hidden: true},
|
|
hardwareSn: {label: '光模块端口名称', span: 12, type: 'input',disabled: true}
|
|
}
|
|
}],
|
|
formModel: {},
|
|
config: {buttonGroup: []},
|
|
echartList: [{
|
|
title: '设备CPU使用率(%)',
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
gridTop: '30%',
|
|
legend: {top: '5%', left: 'center'},
|
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
|
dataList: [{
|
|
name: '设备CPU使用率',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
}]
|
|
}
|
|
},{
|
|
title: '设备内存使用率(%)',
|
|
dataVal: {
|
|
titleVal: {textAlign: 'left', left: '1%'},
|
|
gridTop: '30%',
|
|
legend: {top: '5%', left: 'center'},
|
|
lineXData: ['2025-9-1', '2025-9-2', '2025-9-3', '2025-9-4', '2025-9-5', '2025-9-6', '2025-9-7'],
|
|
dataList: [{
|
|
name: '设备内存使用率',
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
},{
|
|
name: 'CPU运行用户进程所花费的时间',
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
|
}]
|
|
}
|
|
}]
|
|
}];
|
|
},
|
|
// 监听事件
|
|
callback(result, dataVal, formVal) {
|
|
if (result && result.fnCode) {
|
|
switch (result.fnCode) {
|
|
case 'businessName':
|
|
if (dataVal) {
|
|
formVal.options.forEach(item => {
|
|
if (item.value === dataVal) {
|
|
this.$set(this.ruleForm, 'businessName', item.label);
|
|
}
|
|
});
|
|
this.$set(this.ruleForm, 'code', dataVal);
|
|
}
|
|
break;
|
|
case 'submit':
|
|
dataVal['resourceType'] = this.paramsData.resourceType;
|
|
calculateAvg(dataVal).then(response => {
|
|
this.$modal.msgSuccess(response.msg);
|
|
if (this.paramsData && this.paramsData.resourceType === '1') {
|
|
this.$router.push("/earnManage/server");
|
|
}
|
|
// else {
|
|
// this.$router.push("/disRevenue/earnManage/switch");
|
|
// }
|
|
}).catch(() => {
|
|
this.$modal.msgError("操作失败")
|
|
});
|
|
break;
|
|
case 'cancle':
|
|
if (this.paramsData && this.paramsData.resourceType === '1') {
|
|
this.$router.push("/earnManage/server");
|
|
}
|
|
// else {
|
|
// this.$router.push("/disRevenue/earnManage/switch");
|
|
// }
|
|
break;
|
|
default:
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
::v-deep .el-collapse-item__header {
|
|
background-color: #d4e3fc!important;
|
|
/*color: #fff!important;*/
|
|
padding-left: 20px;
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|