监控策略、拓扑图、资源分组等
This commit is contained in:
@@ -70,6 +70,15 @@ export function listTopology(query) {
|
||||
data: query
|
||||
})
|
||||
}
|
||||
// 查询all列表
|
||||
export function listAllTopology(query) {
|
||||
return request({
|
||||
url: '/system/management/getListChart',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询资源注册详细
|
||||
export function getTopology(Id) {
|
||||
return request({
|
||||
@@ -152,6 +161,14 @@ export function delGroup(Ids) {
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
// 包含设备向右移动校验
|
||||
export function exitsResourceById(data) {
|
||||
return request({
|
||||
url: '/system/group/exitsResourceById',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 包含设备查询
|
||||
export function resNameList() {
|
||||
return request({
|
||||
@@ -175,6 +192,14 @@ export function getMonitorTemp(Id) {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查询资源监控项
|
||||
export function getMonitorTempList(query) {
|
||||
return request({
|
||||
url: '/rocketmq/initialMonitorItem/list',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
|
||||
// 新增资源注册
|
||||
export function addMonitorTemp(data) {
|
||||
|
||||
BIN
src/assets/images/level1.png
Normal file
BIN
src/assets/images/level1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/level2.png
Normal file
BIN
src/assets/images/level2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
src/assets/images/level2True.png
Normal file
BIN
src/assets/images/level2True.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
BIN
src/assets/images/level3.png
Normal file
BIN
src/assets/images/level3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
src/assets/images/level3True.png
Normal file
BIN
src/assets/images/level3True.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 MiB |
@@ -1,12 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" class="demo-ruleForm">
|
||||
{{config && config.key}}
|
||||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="config && config.labelWidth || '130px'" :key="config && config.key" class="demo-ruleForm">
|
||||
<template v-for="(formItem,index) of formList">
|
||||
<h4 v-if="formItem && formItem.config && formItem.config.title" class="form-header h4">{{formItem.config.title}}</h4>
|
||||
<el-row>
|
||||
<el-col v-for="(formVal,key,index) of formItem['controls']" :span="formVal.span" v-if="!formVal.hidden" :class="formItem.config.colSpan" :style="formVal.style">
|
||||
<el-form-item
|
||||
:key="index"
|
||||
:key="config && config.key ? `${config && config.key}-${key}` : `${key}`"
|
||||
:prop="key"
|
||||
:required="formVal.required">
|
||||
<template #label>
|
||||
@@ -135,7 +136,7 @@
|
||||
:data="formVal.options"
|
||||
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
|
||||
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? formVal.placeholder || `请输入${formVal.label}` : null"
|
||||
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"
|
||||
@[formVal.eventName]="(val,option) => handleChange(key,val,option)"
|
||||
></el-transfer>
|
||||
</template>
|
||||
|
||||
@@ -199,7 +200,14 @@
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
// formList: {
|
||||
// handler(val) {
|
||||
// this.initFormData();
|
||||
// },
|
||||
// deep: true,
|
||||
// immediate: true
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
// 初始化表单数据
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
</el-row>
|
||||
<!-- 表格数据 -->
|
||||
<el-table v-loading="loading" :data="tableList" ref="selChangeList" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
|
||||
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" align="center" />
|
||||
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" :selectable="() => config && config.selectable ? false : true" align="center" />
|
||||
<!-- 展开列内容 -->
|
||||
<el-table-column v-if="config && config.expand" type="expand">
|
||||
<template #default="props">
|
||||
|
||||
@@ -269,6 +269,7 @@ export const dynamicRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// 资源拓扑
|
||||
{
|
||||
path: '/disRevenue/resource/topology/edit',
|
||||
component: Layout,
|
||||
@@ -279,7 +280,21 @@ export const dynamicRoutes = [
|
||||
path: 'index/:id?',
|
||||
component: () => import('@/views/disRevenue/resource/topology/details'),
|
||||
name: 'TopologyEdit',
|
||||
meta: { title: '交换机信息', activeMenu: '/disRevenue/resource/topology' }
|
||||
meta: { title: '拓扑信息', activeMenu: '/disRevenue/resource/topology' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/disRevenue/resource/topology/gplot',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
permissions: ['disRevenue:resource:topology:gplot'],
|
||||
children: [
|
||||
{
|
||||
path: 'index/:id?',
|
||||
component: () => import('@/views/disRevenue/resource/topology/gplot'),
|
||||
name: 'TopologyGplot',
|
||||
meta: { title: '拓扑展示', activeMenu: '/disRevenue/resource/topology' }
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -472,7 +487,7 @@ export const dynamicRoutes = [
|
||||
}
|
||||
]
|
||||
},
|
||||
// 资源远程管理
|
||||
// 资源远程管理---脚本执行结果
|
||||
{
|
||||
path: '/disRevenue/resource/remoteManage/view',
|
||||
component: Layout,
|
||||
@@ -483,7 +498,7 @@ export const dynamicRoutes = [
|
||||
path: ':id?',
|
||||
component: () => import('@/views/disRevenue/resource/remoteManage/remoteManageView'),
|
||||
name: 'remoteManageView',
|
||||
meta: { title: '文件管理信息', activeMenu: '/disRevenue/resource/remoteManage' }
|
||||
meta: { title: '脚本执行结果信息', activeMenu: '/disRevenue/resource/remoteManage' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<Form :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
|
||||
<Form ref="formRes" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Handle">
|
||||
import Form from '@/components/form/index.vue';
|
||||
import {addGroup, getGroup, updateGroup, resNameList} from "@/api/disRevenue/resource"
|
||||
import {addGroup, getGroup, updateGroup, resNameList,exitsResourceById} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: 'GroupDetails',
|
||||
components: {Form},
|
||||
@@ -14,7 +14,8 @@
|
||||
return {
|
||||
ruleForm: {},
|
||||
formList: [],
|
||||
paramsData: {}
|
||||
paramsData: {},
|
||||
includedDevicesList: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@@ -34,7 +35,7 @@
|
||||
id: {label: 'ID',hidden: true},
|
||||
groupName: {label: '名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
|
||||
description: {label: '描述', span: 24, type: 'textarea'},
|
||||
includedDevices: {label: '包含设备', span: 24, type: 'transfer',options: []}
|
||||
includedDevicesId: {label: '包含设备', span: 24, type: 'transfer',options: [], eventName: 'change'}
|
||||
}
|
||||
}];
|
||||
},
|
||||
@@ -42,8 +43,9 @@
|
||||
getFormDataList(id) {
|
||||
getGroup(id).then(val => {
|
||||
if (val && val.data) {
|
||||
if (val.data && val.data['includedDevices']) {
|
||||
val.data['includedDevices'] = val.data['includedDevices'].split(',');
|
||||
if (val.data && val.data['includedDevicesId']) {
|
||||
let newArr = val.data['includedDevicesId'].split(',');
|
||||
val.data['includedDevicesId'] = newArr.map(id => Number(id));
|
||||
}
|
||||
this.ruleForm = val.data;
|
||||
}
|
||||
@@ -54,19 +56,24 @@
|
||||
// 包含设备
|
||||
getResNameList() {
|
||||
resNameList().then(val => {
|
||||
this.formList[0].controls['includedDevices']['options']= val && val.map(item => {
|
||||
return Object.assign({label: item.resourceName, key: item.resourceName});
|
||||
if (val) {
|
||||
this.formList[0].controls['includedDevicesId']['options']= val && val.map(item => {
|
||||
this.includedDevicesList[item.id] = item;
|
||||
return Object.assign({label: item.resourceName, key: item.id});
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("操作失败")
|
||||
});
|
||||
},
|
||||
// 监听事件
|
||||
callback(result, dataVal, formVal) {
|
||||
console.log('result===',formVal);
|
||||
if (result && result.fnCode) {
|
||||
switch (result.fnCode) {
|
||||
case 'submit':
|
||||
dataVal['includedDevices'] = dataVal['includedDevices'].join();
|
||||
dataVal['includedDevicesName'] = (dataVal['includedDevicesId'].map(id => this.includedDevicesList[id].resourceName)).join();
|
||||
dataVal['includedDevicesId'] = dataVal['includedDevicesId'].join();
|
||||
let fnType = addGroup;
|
||||
if (dataVal && dataVal.id) {
|
||||
fnType = updateGroup;
|
||||
@@ -81,6 +88,20 @@
|
||||
case 'cancle':
|
||||
this.$router.push("/resource/group");
|
||||
break;
|
||||
case 'includedDevicesId':
|
||||
// if (formVal && formVal === 'right') {
|
||||
// exitsResourceById({resourceIds: dataVal.join(',')}).then(res => {
|
||||
// console.log('res=',res.msg);
|
||||
// if (res.msg) {
|
||||
// let content = '<p style="font-size: 1rem;font-weight: 600;">资源从其他分组移动到此组</p>' +
|
||||
// '<p style="height: 0px;margin:10px 0 50px;">资源移动到此组后,将在原来到组中消失,相关的监控策略也会消失</p>';
|
||||
// this.$modal.confirm(content).then(() => {
|
||||
//
|
||||
// }).catch(() => {});
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
break;
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
id: { label: `ID`, visible: false },
|
||||
groupName: { label: `名称`, visible: true},
|
||||
description: { label: `描述`, visible: true},
|
||||
includedDevices: { label: `包含设备`, visible: true },
|
||||
includedDevicesName: { label: `包含设备`, visible: true },
|
||||
createTime: { label: `创建时间`},
|
||||
updateTime: { label: `修改时间`, visible: true}
|
||||
},
|
||||
|
||||
@@ -14,36 +14,36 @@
|
||||
</div>
|
||||
<!-- active:2 -->
|
||||
<div v-show="active === 1">
|
||||
<el-tabs type="border-card">
|
||||
<el-tabs type="border-card" v-model="activeTypeName" @tab-click="handleClick">
|
||||
<!-- 2-1 -->
|
||||
<el-tab-pane label="Linux系统">
|
||||
<el-tabs v-model="linuxActiveName">
|
||||
<el-tab-pane label="Linux系统" name="linux">
|
||||
<el-tabs v-model="linuxActiveName" @tab-click="handleClick">
|
||||
<!-- 2-1-1 -->
|
||||
<el-tab-pane label="监控项" name="first">
|
||||
<el-tab-pane label="监控项" name="monitorItem">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item v-for="(item,index) of linuxSystem.monitorList['dataList']" :title="item.title" :name="index">
|
||||
<el-collapse-item v-for="(item,index) of linuxSystem.monitorItem['dataList']" :title="item.title" :name="index">
|
||||
<template slot="title">
|
||||
{{item.title}}
|
||||
<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" class="ml20" @change="(checked) => handleCheckAllChange(checked,item)">全选</el-checkbox>
|
||||
<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" :disabled="item.disabled" class="ml20" @change="(checked) => handleCheckAllChange(checked,item)">全选</el-checkbox>
|
||||
</template>
|
||||
<el-checkbox-group v-model="checkParams[item.modelName]" @change="(checkValList) => handleCheckedCitiesChange(checkValList, item)" style="padding: 0 20px;">
|
||||
<el-checkbox v-for="city of item.checkList" :label="city.id" :key="city.id" class="w45 mt10 mb10">
|
||||
<span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
|
||||
<span>{{city.towName}}</span>
|
||||
<el-checkbox v-for="city of item.checkList" :label="city.id" :key="city.id" :disabled="item.disabled" class="w45 mt10 mb10">
|
||||
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
|
||||
<span>{{city.metricName}}</span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-tab-pane>
|
||||
<!-- 2-1-2 -->
|
||||
<el-tab-pane label="自动发现项" name="second">
|
||||
<el-tab-pane label="自动发现项" name="autodiscoverItem">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item v-for="(item,index) of linuxSystem.autoFindList['dataList']" :title="item.title" :name="index">
|
||||
<el-collapse-item v-for="(item,index) of linuxSystem.autodiscoverItem['dataList']" :title="item.title" :name="index">
|
||||
<div style="display: flex;justify-content: center;">
|
||||
<el-checkbox-group v-model="checkParams[item.modelName]" style="padding: 0 20px;">
|
||||
<el-checkbox v-for="city of item.checkList" :label="city.id" :key="city.id" class="mt10 mb10 disBlock">
|
||||
<span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
|
||||
<span>{{city.towName}}</span>
|
||||
<el-checkbox v-for="city of item.checkList" :disabled="item.disabled" :label="city.id" :key="city.id" class="mt10 mb10 disBlock">
|
||||
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
|
||||
<span>{{city.metricName}}</span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
@@ -53,7 +53,7 @@
|
||||
</el-tabs>
|
||||
</el-tab-pane>
|
||||
<!-- 2-2 -->
|
||||
<el-tab-pane label="华为交换机">
|
||||
<el-tab-pane label="华为交换机" name="switch">
|
||||
<span slot="label">
|
||||
华为交换机
|
||||
<el-tooltip trigger="click" effect="dark" placement="top">
|
||||
@@ -61,18 +61,18 @@
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<el-tabs v-model="hwActiveName">
|
||||
<el-tabs v-model="hwActiveName" @tab-click="handleClick">
|
||||
<!-- 2-2-1 -->
|
||||
<el-tab-pane label="监控项" name="first">
|
||||
<el-tab-pane label="监控项" name="monitorItem">
|
||||
<template v-for="(item,index) of monitorTable['nodeOne']">
|
||||
<TableList :ref="`tableRef_${item.config.tableKey}`" :config="item.config" :columns="item.columns" :queryParams="{total: 0}" :tableList="item.tableList" @fnClick="callback"></TableList>
|
||||
<TableList :ref="`tableRef_${item.config.tableKey}`" :config="item.config" :columns="switchColumns" :queryParams="{total: 0}" :tableList="item.tableList" @fnClick="callback"></TableList>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<!-- 2-2-2 -->
|
||||
<el-tab-pane label="自动发现项" name="second">
|
||||
<el-tab-pane label="自动发现项" name="autodiscoverItem">
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item v-for="(val,index) of monitorTable['nodeTow']" :title="val.title" :name="index">
|
||||
<TableList :ref="`tableRef_${val.config.tableKey}`" :config="val.config" :columns="val.columns" :queryParams="{total: 0}" :tableList="val.tableList" @fnClick="callback"></TableList>
|
||||
<TableList :class="val && val.classType" :ref="`tableRef_${val.config.tableKey}`" :config="val.config" :columns="switchColumns" :queryParams="{total: 0}" :tableList="val.tableList" @fnClick="callback"></TableList>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-tab-pane>
|
||||
@@ -96,6 +96,7 @@
|
||||
<script setup>
|
||||
import Form from '@/components/form/index.vue';
|
||||
import TableList from "@/components/table/index.vue"
|
||||
import {getMonitorTempList} from "@/api/disRevenue/resource"
|
||||
import MonitorTempView from './view'
|
||||
export default {
|
||||
name: 'MonitorTempDetails',
|
||||
@@ -103,11 +104,13 @@
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
activeNames: [0, 1],
|
||||
linuxActiveName: 'first',
|
||||
hwActiveName: 'first',
|
||||
activeNames: [0, 1,2,3],
|
||||
activeTypeName: 'linux', // 两个系统
|
||||
linuxActiveName: 'monitorItem', // linux系统下的两个栏
|
||||
hwActiveName: 'monitorItem', // 华为交换机下的两个栏
|
||||
dataListMap: {}, // 存储监控字段
|
||||
checkAllParams: {},
|
||||
checkParams: {cpu: [], other: [], mount: [], netPort:[]},
|
||||
checkParams: {cpu: [], other: [], point: [], net:[], disk: [], docker: []},
|
||||
allSelectedData: {},
|
||||
synthesisList: {},
|
||||
// 第一节点
|
||||
@@ -129,10 +132,10 @@
|
||||
}],
|
||||
// 第二节点 1栏
|
||||
linuxSystem: {
|
||||
monitorList: {
|
||||
monitorItem: {
|
||||
firstTitle: 'Linux系统', title: '监控项',
|
||||
dataList: [{
|
||||
title: 'CPU监控', modelName: 'cpu', checkAll: false, isIndeterminate: false,
|
||||
title: 'CPU监控', modelName: 'cpu', checkAll: true, isIndeterminate: false, disabled: true,
|
||||
checkList: [
|
||||
{id: '1', name: 'system.cpu.load.avg1', towName: 'CPU的1分钟负载'},
|
||||
{id: '2', name: 'system.cpu.util.normal', towName: 'CPU正常运行时间'},
|
||||
@@ -142,97 +145,69 @@
|
||||
]},
|
||||
{
|
||||
title: '其他监控', modelName: 'other', checkAll: false, isIndeterminate: false,
|
||||
checkList: [
|
||||
{id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间(字节)'},
|
||||
{id: '7', name: 'proc.num.run', towName: '正在运行的进程数'},
|
||||
{id: '8', name: 'memory.utilization', towName: '内存利用率'},
|
||||
{id: '9', name: 'system.users.num', towName: '登录用户数'},
|
||||
{id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比'},
|
||||
]
|
||||
checkList: []
|
||||
}
|
||||
],
|
||||
},
|
||||
autoFindList: {
|
||||
autodiscoverItem: {
|
||||
firstTitle: 'Linux系统', title: '自动发现项',
|
||||
dataList:[{
|
||||
title: '发现挂载文件系统', modelName: 'mount', checkAll: false, isIndeterminate: false,
|
||||
checkList: [
|
||||
{id: '1', name: 'vfs.fs.type', towName: '某个挂载点(如/)的文件系统类型'},
|
||||
{id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点(如/)的可用空间'},
|
||||
{id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点(如/)的总空间'},
|
||||
{id: '4', name: 'vfs.fs.util', towName: '某个挂载点(如/)的空间利用率'},
|
||||
]},
|
||||
{
|
||||
title: '发现网络接口', modelName: 'netPort', checkAll: false, isIndeterminate: false,
|
||||
checkList: [
|
||||
{id: '1', name: 'net.if.in.dropped', towName: '某个网络接口(如interface eth0)的入站丢包'},
|
||||
{id: '2', name: 'net.if.out.dropped', towName: '某个网络接口(如interface eth0)的出站丢包'},
|
||||
{id: '3', name: 'net.if.out', towName: '某个网络接口(如interface eth0)的发送流量'},
|
||||
{id: '4', name: 'net.if.out.type', towName: '某个网络接口(如interface eth0)的接口类型'},
|
||||
{id: '5', name: 'net.if.in', towName: '某个网络接口(如interface eth0)的接收流量'}
|
||||
title: '发现挂载文件系统', modelName: 'point', checkAll: false, isIndeterminate: false, disabled: true,
|
||||
checkList: []
|
||||
}, {
|
||||
title: '发现网络接口', modelName: 'net', checkAll: false, isIndeterminate: false, disabled: true,
|
||||
checkList: []
|
||||
}, {
|
||||
title: '发现硬盘设备', modelName: 'disk', checkAll: false, isIndeterminate: false, disabled: true,
|
||||
checkList: []
|
||||
}, {
|
||||
title: '发现docker', modelName: 'docker', checkAll: false, isIndeterminate: false, disabled: true,
|
||||
checkList: []
|
||||
}
|
||||
]
|
||||
}]
|
||||
},
|
||||
},
|
||||
// 第二节点 2栏 列显隐信息
|
||||
switchColumns: {
|
||||
id: { label: `ID`, visible: false },
|
||||
metricKey: { label: `监控标识`, visible: true},
|
||||
metricName: { label: `监控名称`, visible: true},
|
||||
oid: { label: `监控OID`, visible: true },
|
||||
filterValue: { label: `过滤值`, visible: true},
|
||||
monitorDescription: { label: `自动监控说明`, visible: true}
|
||||
},
|
||||
monitorTable: {
|
||||
nodeOne: [{
|
||||
firstTitle: '华为交换机', secondTitle: '监控项',
|
||||
columns: {
|
||||
id: { label: `ID`, visible: false },
|
||||
ident: { label: `监控标识`, visible: true},
|
||||
name: { label: `监控名称`, visible: true},
|
||||
monitor: { label: `监控OID`, visible: true },
|
||||
filter: { label: `过滤值`},
|
||||
explain: { label: `监控说明`, visible: true}
|
||||
},
|
||||
tableList: [
|
||||
{id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
{id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
|
||||
{id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
{id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
|
||||
{id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
],
|
||||
config: {tableKey: 'web'}
|
||||
tableList: [],
|
||||
config: {tableKey: 'web', colTopHiddenIcon: true}
|
||||
}],
|
||||
nodeTow: [
|
||||
{
|
||||
firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现',
|
||||
columns: {
|
||||
id: { label: `ID`, visible: false },
|
||||
ident: { label: `监控标识`, visible: true},
|
||||
name: { label: `监控名称`, visible: true},
|
||||
monitor: { label: `监控OID`, visible: true },
|
||||
filter: { label: `过滤值`},
|
||||
explain: { label: `监控说明`, visible: true}
|
||||
},
|
||||
tableList: [
|
||||
{id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
{id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
|
||||
{id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
{id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
|
||||
{id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
],
|
||||
config: {tableKey: 'web1'}
|
||||
firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', classType: 'checkHidden',
|
||||
tableList: [],
|
||||
config: {tableKey: 'web1', colTopHiddenIcon: true, selectable: true}
|
||||
},
|
||||
{
|
||||
firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现',
|
||||
columns: {
|
||||
id: { label: `ID`, visible: false },
|
||||
ident: { label: `监控标识`, visible: true},
|
||||
name: { label: `监控名称`, visible: true},
|
||||
monitor: { label: `监控OID`, visible: true },
|
||||
filter: { label: `过滤值`},
|
||||
explain: { label: `监控说明`, visible: true}
|
||||
firstTitle: '华为交换机', secondTitle: '自动发现项',title: 'MPU发现', classType: 'checkHidden',
|
||||
tableList: [],
|
||||
config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
|
||||
},
|
||||
tableList: [
|
||||
{id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
{id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
|
||||
{id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
{id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
|
||||
{id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
],
|
||||
config: {tableKey: 'web2'}
|
||||
// {
|
||||
// firstTitle: '华为交换机', secondTitle: '自动发现项',title: '电源发现', classType: 'checkHidden',
|
||||
// tableList: [
|
||||
// {id: 1, ident: 'sysDescr', name: '系统描述', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
// {id: 2, ident: 'sysObjectID', name: '系统Object ID', monitor: '1.3.6.1.2.1.1.2', filter: '', explain: ''},
|
||||
// {id: 3, ident: 'sysUpTime', name: '系统运行时间', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
// {id: 4, ident: 'sysContact', name: '系统联系信息', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: '', relevance: {id: [2]}},
|
||||
// {id: 5, ident: 'sysName', name: '系统名称', monitor: '1.3.6.1.2.1.1.1', filter: '', explain: ''},
|
||||
// ],
|
||||
// config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
|
||||
// },
|
||||
{
|
||||
firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', classType: 'checkHidden',
|
||||
tableList: [],
|
||||
config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
|
||||
},
|
||||
]},
|
||||
}
|
||||
@@ -250,12 +225,58 @@
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
fnGetMonitorTempList(params) {
|
||||
let towType = this.hwActiveName;
|
||||
towType = this.linuxActiveName;
|
||||
getMonitorTempList(params).then(res => {
|
||||
// console.log('data====',res);
|
||||
if (this.activeTypeName === 'linux') {
|
||||
if (this.linuxActiveName === 'monitorItem'){
|
||||
this.linuxSystem[this.linuxActiveName].dataList[0].checkList = res.data && res.data.cpu;
|
||||
this.linuxSystem[this.linuxActiveName].dataList[1].checkList = res.data && res.data.other;
|
||||
// 全选操作
|
||||
this.handleCheckAllChange(true, this.linuxSystem[this.linuxActiveName].dataList[0]);
|
||||
} else {
|
||||
this.checkParams.point = res.data.point.map(item => item.id);
|
||||
this.checkParams.net = res.data.net.map(item => item.id);
|
||||
this.checkParams.disk = res.data.disk.map(item => item.id);
|
||||
this.checkParams.docker = res.data.docker.map(item => item.id);
|
||||
this.linuxSystem[this.linuxActiveName].dataList[0].checkList = res.data && res.data.point;
|
||||
this.linuxSystem[this.linuxActiveName].dataList[1].checkList = res.data && res.data.net;
|
||||
this.linuxSystem[this.linuxActiveName].dataList[2].checkList = res.data && res.data.disk;
|
||||
this.linuxSystem[this.linuxActiveName].dataList[3].checkList = res.data && res.data.docker;
|
||||
}
|
||||
} else {
|
||||
if (params.itemType === 'monitorItem') {
|
||||
let defaultNum = 0;
|
||||
let relevance = {id: []};
|
||||
res.data.system.forEach((item,index) => {
|
||||
if (item && item.filterValue === '9') {
|
||||
defaultNum = index;
|
||||
}
|
||||
if (item && item.monitorDescription === '如果需要设备索引,当选中此项的时候,设备索引项自动选中') {
|
||||
relevance['id'].push(item.id);
|
||||
}
|
||||
});
|
||||
res.data.system[defaultNum]['relevance'] = relevance;
|
||||
this.monitorTable.nodeOne[0].tableList = res.data.system;
|
||||
} else {
|
||||
this.monitorTable.nodeTow[0].tableList = res.data.netport;
|
||||
this.monitorTable.nodeTow[1].tableList = res.data.lightmodule;
|
||||
this.monitorTable.nodeTow[2].tableList = res.data.fan;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async next(num) {
|
||||
console.log('num====',num,'this.active===',this.active);
|
||||
if (num === '-1') {
|
||||
this.active--;
|
||||
} else {
|
||||
if (this.active === 0 && !await this.fnFormValid()) {
|
||||
return;
|
||||
} else {
|
||||
this.handleClick();
|
||||
}
|
||||
if (this.active === 1) {
|
||||
this.selectAllChange();
|
||||
@@ -263,6 +284,15 @@
|
||||
this.active++;
|
||||
}
|
||||
},
|
||||
handleClick() {
|
||||
let params = {};
|
||||
if (this.activeTypeName === 'linux') {
|
||||
params = {resourceType: this.activeTypeName, itemType: this.linuxActiveName};
|
||||
} else {
|
||||
params = {resourceType: this.activeTypeName, itemType: this.hwActiveName};
|
||||
}
|
||||
this.fnGetMonitorTempList(params);
|
||||
},
|
||||
// form验证
|
||||
fnFormValid() {
|
||||
return new Promise((resolve) => {
|
||||
@@ -349,4 +379,7 @@
|
||||
padding-left: 20px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
::v-deep .checkHidden .el-table .el-table__fixed .el-table__header-wrapper .el-table__header .el-table-column--selection .el-checkbox__input {
|
||||
display: none!important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
if (this.paramsData && this.paramsData.id) {
|
||||
this.getFormDataList(this.paramsData.id);
|
||||
} else {
|
||||
this.fnFormList({});
|
||||
this.fnFormList(this.ruleForm);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -64,7 +64,7 @@
|
||||
resourceUserName: {label: '用户名', span: 12, type: 'input', hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
|
||||
resourcePwd: {label: '密码', span: 12, type: 'input', hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.registrationStatus === '1' ? true : false},
|
||||
description: {label: '描述', span: 12, type: 'textarea',disabled: objVal && objVal.registrationStatus === '1' ? true : false},
|
||||
agentVersion: {label: 'AGENT版本', span: 12, type: 'input',disabled: objVal && objVal.id ? true : false},
|
||||
agentVersion: {label: 'AGENT版本', span: 12, type: 'input',hidden: objVal && objVal.id ? false : true, disabled: objVal && objVal.id ? true : false},
|
||||
// customerName: {label: '设备业务客户', span: 12, type: 'input'},
|
||||
// serviceNumber: {label: '业务号', span: 12, type: 'input'},
|
||||
agentWeek: {label: 'Agent与交换机心跳检测周期', span: 12, type: 'input', disabled: true},
|
||||
@@ -92,11 +92,13 @@
|
||||
this.formList[0].controls.resourceVersion['hidden'] = false;
|
||||
this.formList[0].controls.rwPermission['hidden'] = false;
|
||||
this.formList[0].controls.snmpCollectAddr['hidden'] = false;
|
||||
this.formList[0].controls.snmpCollectPort['hidden'] = false;
|
||||
this.formList[0].controls.teamName['hidden'] = false;
|
||||
} else {
|
||||
this.formList[0].controls.resourceVersion['hidden'] = true;
|
||||
this.formList[0].controls.rwPermission['hidden'] = true;
|
||||
this.formList[0].controls.snmpCollectAddr['hidden'] = true;
|
||||
this.formList[0].controls.snmpCollectPort['hidden'] = true;
|
||||
this.formList[0].controls.teamName['hidden'] = true;
|
||||
}
|
||||
break;
|
||||
|
||||
@@ -3,8 +3,8 @@
|
||||
<div>
|
||||
<el-steps :active="active" finish-status="success">
|
||||
<el-step title="基本信息"></el-step>
|
||||
<el-step title="监控信息"></el-step>
|
||||
<el-step title="信息确认"></el-step>
|
||||
<el-step title="脚本策略"></el-step>
|
||||
<el-step title="策略确认"></el-step>
|
||||
</el-steps>
|
||||
<!-- 内容区 -->
|
||||
<div style="margin-top: 30px;">
|
||||
@@ -171,7 +171,8 @@
|
||||
index: this.addNum,
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
localAddress: {label: `源文件${currentIndex + 1 + this.addNum}地址格式`, span: 12, type: 'radio', required: true, options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
|
||||
localAddress: {label: `源文件${currentIndex + 1 + this.addNum}地址格式`, span: 12, type: 'radio', required: true,
|
||||
warningTitle: '注意:当文件大小超过100M时,请选择【外网HTTP(S)】地址格式', options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
|
||||
btn: {label: '', span: 12, slotName: 'btnType', btnName: '删除', btnType: 'delete', parentKey: newKey},
|
||||
serverPort: {label: `源文件${currentIndex + 1 + this.addNum}地址`, span: 12, type: 'input'}
|
||||
},
|
||||
|
||||
152
src/views/disRevenue/resource/topology/gplot.vue
Normal file
152
src/views/disRevenue/resource/topology/gplot.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div style="width:100%;height: calc(100vh - 115px);margin: 30px auto 0;" class="textAlignCenter">
|
||||
<div class="w100">
|
||||
<el-input v-model="resName" placeholder="请输入你需要搜索的交换机名称或服务器节点名称入内容" style="width: 80%;" @keyup.enter.native="handleQuery"></el-input>
|
||||
<el-button type="primary" class="ml10" icon="Search" @click="handleQuery(1)">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="handleQuery(2)">重置</el-button>
|
||||
</div>
|
||||
<div id="gplotChart" class="w100 h100"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import {resNameBtType, listAllTopology} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: 'gplot',
|
||||
data() {
|
||||
return {
|
||||
level1Img: require('@/assets/images/level1.png'),
|
||||
level2Img: require('@/assets/images/level2.png'),
|
||||
level3Img: require('@/assets/images/level3.png'),
|
||||
level2ImgTrue: require('@/assets/images/level2True.png'),
|
||||
level3ImgTrue: require('@/assets/images/level3True.png'),
|
||||
switchNameList: {},
|
||||
resName: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.switchList();
|
||||
},
|
||||
mounted() {
|
||||
// this.$nextTick(() => {
|
||||
// this.getList();
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
// 获取详情
|
||||
getList(res,lightVal) {
|
||||
const gplotChartLine = echarts.init(document.getElementById('gplotChart'));
|
||||
let seriesNodes = [
|
||||
{
|
||||
id: 'cloud',
|
||||
name: '云',
|
||||
// symbolSize: 80,
|
||||
symbol: `image://${this.level1Img}`,
|
||||
symbolSize: [40, 40], // 图片宽高
|
||||
x: 250,
|
||||
y: 300
|
||||
},
|
||||
];
|
||||
let links = [];
|
||||
if (res.params) {
|
||||
Object.keys(res.params).forEach((item,index) => {
|
||||
links.push({source: 'cloud', target: item, lineStyle: { width: 2 }});
|
||||
seriesNodes.push({
|
||||
id: item,
|
||||
name: item,
|
||||
// symbol: 'rect',
|
||||
// symbolSize: 60,
|
||||
symbol: `image://${lightVal && lightVal[item] ? this.level2ImgTrue : this.level2Img}`,
|
||||
symbolSize: [40, 40], // 图片宽高
|
||||
x: 400,
|
||||
y: 200 * (index + 1)
|
||||
});
|
||||
res.params[item].forEach((val,indexVal) => {
|
||||
if (val && val.serverName) {
|
||||
links.push({source: item, target: val.serverName, lineStyle: { width: 2 }});
|
||||
seriesNodes.push({
|
||||
id: val.serverName,
|
||||
name: val.serverName,
|
||||
// symbol: 'rect',
|
||||
// symbolSize: 60,
|
||||
symbol: `image://${lightVal && lightVal[val.serverName] ? this.level3ImgTrue : this.level3Img}`,
|
||||
symbolSize: [40, 40], // 图片宽高
|
||||
x: 900,
|
||||
y: 60 * (indexVal + 1)
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
let option = {
|
||||
title: {
|
||||
text: '',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'graph', // 关系图类型
|
||||
layout: 'none', // 关闭力导向布局,使用固定位置
|
||||
roam: true, // 不允许鼠标缩放和平移
|
||||
label: {
|
||||
show: false, // 显示节点标签
|
||||
},
|
||||
// 节点数据 - 增加了固定的x和y坐标
|
||||
nodes: seriesNodes,
|
||||
links: links
|
||||
},
|
||||
],
|
||||
};
|
||||
gplotChartLine.setOption(option);
|
||||
},
|
||||
// 获取交换机下拉
|
||||
switchList(val) {
|
||||
let params = {};
|
||||
if (val && val.resourceName) {
|
||||
params = val;
|
||||
}
|
||||
listAllTopology(params).then(res => {
|
||||
let params = {};
|
||||
res && res.data.forEach(item => {
|
||||
if (params.hasOwnProperty(item.switchName)) {
|
||||
params[item.switchName].push(item);
|
||||
} else {
|
||||
params[item.switchName] = [item];
|
||||
}
|
||||
});
|
||||
if (val && val.resourceName) {
|
||||
let newParam = {};
|
||||
Object.keys(params).forEach(item => {
|
||||
newParam[item] = true;
|
||||
params[item].forEach(val => {
|
||||
newParam[val.serverName] = true;
|
||||
});
|
||||
});
|
||||
console.log('newParam==',newParam);
|
||||
this.getList(this.switchNameList,newParam);
|
||||
} else {
|
||||
this.switchNameList = {params: params};
|
||||
this.getList({params: params});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleQuery(num){
|
||||
if (num === 2) {
|
||||
this.resName = '';
|
||||
this.switchList();
|
||||
} else {
|
||||
let params = {};
|
||||
if (this.resName) {
|
||||
params = {resourceName: this.resName};
|
||||
}
|
||||
this.switchList(params);
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -64,6 +64,7 @@
|
||||
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'disRevenue:resource:topology:add'},
|
||||
{content: '删除', fnCode: 'delete', type: 'danger', icon: 'el-icon-delete', hasPermi: 'disRevenue:resource:topology:detele'},
|
||||
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:topology:export'},
|
||||
{content: '拓扑展示', fnCode: 'echarts', type: 'warning', icon: 'el-icon-picture-outline-round', hasPermi: 'disRevenue:resource:topology:echarts'},
|
||||
],
|
||||
line: [
|
||||
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'disRevenue:resource:topology:edit'},
|
||||
@@ -126,6 +127,14 @@
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {});
|
||||
break;
|
||||
case 'echarts':
|
||||
this.$router.push({
|
||||
path:'/disRevenue/resource/topology/gplot/index',
|
||||
query:{
|
||||
id: rowData.id
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'export':
|
||||
// let dataList = [];
|
||||
// Object.keys(this.columns).forEach(item => {
|
||||
|
||||
Reference in New Issue
Block a user