TRKJ/profitManage
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

资源监控策略

Browse Source
This commit is contained in:
康冉冉
2025-09-24 20:58:25 +08:00
parent 78fab1a2ca
commit 9782011cd2
8 changed files with 619 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/api/disRevenue/resource.js
View File

@@ -225,3 +225,67 @@ export function delMonitorTemp(Ids) {
method: 'delete'
})
}
/** ----------------资源监控策略------------ */
// 查询列表
export function listMonitorPolicy(query) {
return request({
url: '/rocketmq/monitorPolicy/list',
method: 'post',
data: query
})
}
// 查询详细
export function getMonitorPolicy(Id) {
return request({
url: '/rocketmq/monitorPolicy/' + Id,
method: 'get'
})
}
// 查询资源监控项
export function getMonitorPolicyList(query) {
return request({
url: '/rocketmq/monitorPolicy/issuePolicy',
method: 'post',
data: query
})
}
// 新增
export function addMonitorPolicy(data) {
return request({
url: '/rocketmq/monitorPolicy',
method: 'post',
data: data
})
}
// 修改
export function updateMonitorPolicy(data) {
return request({
url: '/rocketmq/monitorPolicy',
method: 'put',
data: data
})
}
// 删除
export function delMonitorPolicy(Ids) {
return request({
url: '/rocketmq/monitorPolicy/' + Ids,
method: 'delete'
})
}
// 关联监控模板下拉接口
export function getMonitorPolicyTemp() {
return request({
url: '/rocketmq/template/getAllTemplate',
method: 'get'
})
}
// 关联资源组下拉接口
export function getResMonitorGroup() {
return request({
url: '/system/resourceMonitor/resourceGroupList ',
method: 'get'
})
}

71
src/components/table/index.vue
View File

@@ -10,7 +10,7 @@
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
</el-row>
<!-- 表格数据 -->
<el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="tableList" :ref="config && config.tableKey ? `tableRef_${config.tableKey}` : `selChangeList`" :key="tableKey" highlight-selection-row @select-all="handleSelectAll" @select="handleSelectionChange">
<!-- :selectable="() => config && config.selectable ? false : true" -->
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" :selectable="() => config && config.selectable ? false : true" align="center" />
<!-- 展开列内容 -->
@@ -113,8 +113,7 @@
ids: [],
selectList: [],
isProcessing: false, // 防止事件循环的标志位
checkColumns: [],
typeParent: false
checkColumns: []
}
},
// 监听showSearch的变化，并且把变化后的值传给父组件
@@ -160,8 +159,6 @@
/** 多选框选中数据 */
handleSelectionChange(selection) {
if (this.typeParent) return
console.log('selection=====',selection);
if (this.config && this.config['tableKey']) {
this.selectList = [];
this.ids = [];
@@ -192,13 +189,24 @@
this.isProcessing = false;
});
this.selectList.forEach(val => {
this.$refs.selChangeList.toggleRowSelection(val,true);
this.$refs[`tableRef_${this.config.tableKey}`].toggleRowSelection(val,true);
});
} else {
this.selectList = selection;
this.ids = selection.map(item => item.id);
}
},
// 全选按钮操作
handleSelectAll(tabAll){
// 资源监控策略和资源监控模块使用 selectable: 控制列是否可选，值为false则不可选--this.config.selectable为判断
if (this.config && this.config.tableKey && this.config.selectable === true) {
if (tabAll && tabAll.length > 0) {
this.defaultSelectRows([]); // 取消全选
} else {
this.selectAllRows(); // 全选
}
}
},
// 提供给父组件调用的方法：返回当前表格的选中数据 资源监控策略和资源监控模块使用
getSelectedData() {
return {
@@ -206,10 +214,9 @@
data: [...this.selectList] // 选中的数据
};
},
// 提供给父组件调用的方法：全选所有行
// 提供给父组件调用的方法：全选所有行 资源监控策略和资源监控模块使用
selectAllRows() {
this.typeParent = true;
const table = this.$refs[`tableRef_${this.config.tableKey}`];
const table = this.config && this.config.tableKey ? this.$refs[`tableRef_${this.config.tableKey}`] : this.$refs.selChangeList;
if (!table) return;
// 清空现有选中状态
this.selectList = [];
@@ -225,55 +232,13 @@
// }
});
},
// selectAllRows() {
// const table = this.$refs[`tableRef_${this.config.tableKey}`];
// if (!table) return;
//
// // 1. 筛选出所有可选的行（根据selectable配置）
// const selectableRows = this.tableList.filter(row => {
// // 如果有自定义选中规则，使用规则判断
// if (this.config?.selectable && typeof this.config.selectable === 'function') {
// return this.config.selectable(row);
// }
// // 默认全部可选
// return true;
// });
//
// // 2. 清空现有选中状态
// table.clearSelection(); // 使用表格内置方法清空，保证状态同步
// this.selectList = [];
// this.ids = [];
//
// // 3. 选中所有可选行
// selectableRows.forEach(row => {
// table.toggleRowSelection(row, true);
// this.selectList.push(row);
// this.ids.push(row.id);
// });
//
// // 4. 同步表格内部的全选状态（关键修复）
// this.$nextTick(() => {
// // 当所有可选行都被选中时，更新表格的全选状态
// if (selectableRows.length > 0 && this.selectList.length === selectableRows.length) {
// // 获取表头的全选复选框DOM
// const headerCheckbox = table.$el.querySelector('.el-table__header-wrapper .el-checkbox__input');
// if (headerCheckbox) {
// // 触发表格内部的状态更新（模拟用户点击全选框的行为）
// headerCheckbox.click();
// // 强制更新表格视图
// table.$forceUpdate();
// }
// }
// });
// },
// 提供给父组件调用的方法：默认选中值
defaultSelectRows(rows){
this.typeParent = true;
const tableInstance = this.$refs[`tableRef_${this.config.tableKey}`];
const tableInstance = this.config && this.config.tableKey ? this.$refs[`tableRef_${this.config.tableKey}`] : this.$refs.selChangeList;
this.selectList = [];
this.ids = [];
if (tableInstance) {
if (rows) {
if (rows && rows.length > 0) {
rows.forEach(row => {
tableInstance.toggleRowSelection(row, true);
this.selectList.push(row);

408
src/views/disRevenue/resource/monitorStategy/details.vue
View File

@@ -3,7 +3,7 @@
<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-steps>
<!-- 内容区 -->
@@ -16,21 +16,21 @@
<div v-show="active === 1">
<el-tabs type="border-card">
<!-- 2-1 -->
<el-tab-pane v-if="ruleFormData.monitorTemp === 1" label="Linux系统">
<el-tab-pane v-if="resourceType === 'linux'" label="Linux系统">
<el-tabs v-model="linuxActiveName">
<!-- 2-1-1 -->
<el-tab-pane label="监控项" name="first">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(item,index) of linuxSystem.monitorList" :title="item.title" :name="index">
<el-collapse-item v-for="(item,index) of linuxSystem.monitorItem" :title="item.title" :name="index">
<template v-if="item.modelName === 'other'">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
<div class="disInlineBlock w45">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
<span>{{city.metricName}}</span>
</div>
<div class="disInlineBlock" style="color: #606266">
采集周期：<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
@@ -41,15 +41,15 @@
<template slot="title">
{{item.title}}
<div style="font-size: 13px;margin-left: 15%;">
采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
采集周期：<el-select v-model="item['time']" placeholder="请选择" clearable @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
</template>
<div class="plr-50">
<div v-for="city of item.checkList" class="w45 mt10 mb10 disInlineBlock fontSize15">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
<span>{{city.metricName}}</span>
</div>
</div>
</template>
@@ -59,11 +59,11 @@
<!-- 2-1-2 -->
<el-tab-pane label="自动发现项" name="second">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(item,index) of linuxSystem.autoFindList" :title="item.title" :name="index">
<el-collapse-item v-for="(item,index) of linuxSystem.autodiscoverItem" :title="item.title" :name="index">
<template slot="title">
{{item.title}}
<div style="font-size: 13px;margin-left: 15%;">
采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
采集周期：<el-select v-model="item['time']" id="selDisabled" clearable :disabled="item.modelName === 'net' ? true : false" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
@@ -71,8 +71,8 @@
<div style="display: flex;justify-content: center;">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
<span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
<span>{{city.towName}}</span>
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
<span>{{city.metricName}}</span>
</div>
</div>
</div>
@@ -82,7 +82,7 @@
</el-tabs>
</el-tab-pane>
<!-- 2-2 -->
<el-tab-pane v-if="ruleFormData.monitorTemp === 2" label="华为交换机">
<el-tab-pane v-if="resourceType === 'switch'" label="华为交换机">
<span slot="label">
华为交换机
<el-tooltip trigger="click" effect="dark" placement="top">
@@ -97,11 +97,11 @@
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
<div class="disInlineBlock w60">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
<span>{{city.metricName}}</span>
</div>
<div class="disInlineBlock" style="color: #606266">
采集周期：<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
@@ -116,7 +116,7 @@
<template slot="title">
{{item.title}}
<div style="font-size: 13px;margin-left: 15%;">
采集周期：<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
采集周期：<el-select v-model="item['time']" id="selDisabled" clearable :disabled="item.modelName === 'switchNet' ? true : false" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
@@ -124,8 +124,8 @@
<div style="display: flex;justify-content: center;">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
<span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
<span>{{city.towName}}</span>
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
<span>{{city.metricName}}</span>
</div>
</div>
</div>
@@ -137,7 +137,7 @@
</el-tabs>
</div>
<!-- active:3 -->
<div v-show="active === 2">
<div v-if="active === 2">
<MonitorStategyView :ruleForm="ruleFormData" :otherList="synthesisList"></MonitorStategyView>
</div>
</div>
@@ -153,114 +153,241 @@
import Form from '@/components/form/index.vue';
import TableList from "@/components/table/index.vue"
import MonitorStategyView from './view'
import {addMonitorPolicy, updateMonitorPolicy,getMonitorTemp, getMonitorPolicy, getMonitorPolicyTemp, getResMonitorGroup} from "@/api/disRevenue/resource"
export default {
name: 'MonitorStategyDetails',
components: {Form, TableList, MonitorStategyView},
dicts: ['collection_cycle'],
data() {
return {
active: 0,
activeNames: [0, 1],
activeNames: [0, 1,2,3,4],
linuxActiveName: 'first',
hwActiveName: 'first',
resourceType: '',
checkAllParams: {},
checkParams: {week: '',cpu: [], other: [], mount: [], netPort:[]},
allSelectedData: {},
synthesisList: {},
tempContent: {},
// 第一节点
ruleFormData: {
monitorTemp: 1,
},
ruleFormData: {},
config: {
buttonGroup: []
},
formList: [{
config: {title: ''},
controls: {
id: {label: 'ID',hidden: true},
switchName: {label: '策略名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
serverPort: {label: '描述', span: 12, type: 'textarea', style: 'display: block;margin: 0 auto;'},
monitorTemp: {label: '关联监控模版', span: 12, type: 'select', style: 'display: block;margin: 0 auto;'},
resourceGroup: {label: '关联资源组', span: 12, type: 'select'}
}
}],
policyTemp: {},
formList: [],
paramsList: [],
// 第二节点 1栏
option: [{label: '60min', value: '60'},{label: '15min', value: '15'}],
option: [],
linuxSystem: {
monitorList: [{
monitorItem: [{
firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '',
checkList: [
{id: '1', name: 'system.cpu.load.avg1', towName: 'CPU的1分钟负载'},
{id: '2', name: 'system.cpu.util.normal', towName: 'CPU正常运行时间'},
{id: '3', name: 'system.cpu.load.avg5', towName: 'CPU的5分钟负载'},
{id: '4', name: 'system.cpu.utilee.idle', towName: 'CPU空闲时间'},
{id: '5', name: 'system.cpu.load.avg15', towName: 'CPU的15分钟负载'},
]
checkList: []
},{
firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other',
checkList: [
{id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间（字节）',time: ''},
{id: '7', name: 'proc.num.run', towName: '正在运行的进程数',time: ''},
{id: '8', name: 'memory.utilization', towName: '内存利用率',time: ''},
{id: '9', name: 'system.users.num', towName: '登录用户数',time: ''},
{id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比',time: ''},
]
}],
autoFindList: [{
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现挂载文件系统', modelName: 'mount', time: '',
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: '某个挂载点（如/）的空间利用率'},
]},{
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现网络接口', modelName: 'netPort', time: '',
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）的接收流量'}
]
checkList: []
}],
autodiscoverItem: [{
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现挂载文件系统', modelName: 'vfs', time: '',
checkList: []
},{
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现网络接口', modelName: 'net', time: '300',
checkList: []
},{
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现硬盘设备', modelName: 'disk', time: '',
checkList: []
}, {
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现docker', modelName: 'docker', time: '',
checkList: []
}],
},
// 第二节点 2栏 列显隐信息
monitorTable: {
nodeOne: [{
firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'other',
checkList: [
{id: '1', name: 'net.if.in.dropped', towName: '某个网络接口（如interface eth0）的入站丢包',time: ''},
{id: '2', name: 'net.if.out.dropped', towName: '某个网络接口（如interface eth0）的出站丢包',time: ''},
{id: '3', name: 'net.if.out', towName: '某个网络接口（如interface eth0）的发送流量',time: ''},
{id: '4', name: 'net.if.out.type', towName: '某个网络接口（如interface eth0）的接口类型',time: ''},
{id: '5', name: 'net.if.in', towName: '某个网络接口（如interface eth0）的接收流量',time: ''}
]
}],
nodeOne: [{firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'other', checkList: []}],
nodeTow: [
{
firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', modelName: 'server', time: '',
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: '某个挂载点（如/）的空间利用率'},
]
},
{
firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现', modelName: 'light', time: '',
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: '可用交换空间百分比'},
]
},
{firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', modelName: 'switchNet', time: '300', checkList: []},
{firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现', modelName: 'switchModule', time: '', checkList: []},
{firstTitle: '华为交换机', secondTitle: '自动发现项',title: 'MPU发现', modelName: 'switchMpu', time: '', checkList: []},
{firstTitle: '华为交换机', secondTitle: '自动发现项',title: '电源发现', modelName: 'switchPwr', time: '', checkList: []},
{firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', modelName: 'switchFan', time: '', checkList: []},
]},
}
},
created() {},
created() {
this.option = this.dict.type.collection_cycle;
this.paramsData = this.$route && this.$route.query;
// console.log('paramsData===',this.paramsData);
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
}
this.fnFormList();
this.fnResMonitorGroup();
this.fnMonitorPolicyTemp();
},
methods: {
fnFormList(){
this.formList = [{
config: {title: ''},
controls: {
id: {label: 'ID',hidden: true},
policyName: {label: '策略名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', required: true},
description: {label: '描述', span: 12, type: 'textarea', style: 'display: block;margin: 0 auto;'},
templateId: {label: '关联监控模版', span: 12, type: 'select', required: true, options: [], eventName: 'change', style: 'display: block;margin: 0 auto;'},
resourceGroupId: {label: '关联资源组', span: 12, type: 'select', required: true, options:[]}
}
}];
},
// 资源组
fnResMonitorGroup(){
getResMonitorGroup().then(res => {
if (res && res.data) {
this.formList[0].controls['resourceGroupId']['options']= res && res.data.map(item => {
return Object.assign({label: item.groupName, value: item.id});
});
}
});
},
// 监控模版
fnMonitorPolicyTemp(){
getMonitorPolicyTemp().then(res => {
if (res && res.data) {
this.policyTemp = {};
this.formList[0].controls['templateId']['options']= res && res.data.map(item => {
this.policyTemp[item.id] = item;
return Object.assign({label: item.templateName, value: item.id});
});
}
});
},
// 获取详情
getFormDataList(id) {
this.tempContent = {};
getMonitorPolicy(id).then(val => {
console.log('val===',val);
if (val && val.data) {
// this.activeTypeName = val.data.template.resourcyType;
this.ruleFormData = val.data.policy;
this.resourceType = val.data.resourceType;
this.tempContent[val.data.resourceType] = val.data[val.data.resourceType];
console.log('tempContent====',this.tempContent);
}
}).catch(() => {
// this.$modal.msgError("操作失败")
});
},
// 通过监控模版选项 查询监控策略展示项
fnGetMonitorTempList(id) {
getMonitorTemp(id).then(res => {
console.log('res===',res);
if (res && res.data) {
if (this.resourceType === 'linux') {
// cpu 详情
this.linuxSystem.monitorItem[0].checkList = res.data && res.data['linux'] && res.data['linux'].cpu || [];
if (this.tempContent['linux'] && this.tempContent['linux'].cpu && this.tempContent['linux'].cpu.length > 0) {
if (this.tempContent['linux'].cpu[0] && this.tempContent['linux'].cpu[0].collectionCycle) {
this.linuxSystem.monitorItem[0].time = this.tempContent['linux'].cpu[0].collectionCycle.toString();
this.handleCheckedCitiesChange(this.linuxSystem.monitorItem[0].time, this.linuxSystem.monitorItem[0]);
}
}
// other
if (this.tempContent['linux'] && this.tempContent['linux'].other && this.tempContent['linux'].other.length > 0) {
this.tempContent['linux'].other.forEach(item => {
if (item && item.collectionCycle) {
item.time = item.collectionCycle.toString();
}
});
this.linuxSystem.monitorItem[1].checkList = this.tempContent['linux'].other;
} else {
this.linuxSystem.monitorItem[1].checkList = res.data && res.data['linux'] && res.data['linux'].other || [];
}
// 自动发现项
let linuxArr = [];
// 1
if (res.data && res.data['linux'] && res.data['linux'].vfs && res.data['linux'].vfs.length > 0) {
this.linuxSystem.autodiscoverItem[0].checkList = res.data && res.data['linux'] && res.data['linux'].vfs;
// 详情
if (this.tempContent['linux'] && this.tempContent['linux'].vfs && this.tempContent['linux'].vfs.length > 0) {
if (this.tempContent['linux'].vfs[0] && this.tempContent['linux'].vfs[0].collectionCycle) {
this.linuxSystem.autodiscoverItem[0].time = this.tempContent['linux'].vfs[0].collectionCycle.toString();
this.handleCheckedCitiesChange(this.linuxSystem.autodiscoverItem[0].time, this.linuxSystem.autodiscoverItem[0]);
}
}
linuxArr.push(this.linuxSystem.autodiscoverItem[0]);
}
// 2
if (res.data && res.data['linux'] && res.data['linux'].net && res.data['linux'].net.length > 0) {
this.linuxSystem.autodiscoverItem[1].checkList = res.data && res.data['linux'] && res.data['linux'].net;
linuxArr.push(this.linuxSystem.autodiscoverItem[1]);
// 带有默认时间的情况下，调用指定方法进行存储
if (this.linuxSystem.autodiscoverItem[1].time) {
this.handleCheckedCitiesChange(this.linuxSystem.autodiscoverItem[1].time, this.linuxSystem.autodiscoverItem[1]);
}
}
// 3
if (res.data && res.data['linux'] && res.data['linux'].disk && res.data['linux'].disk.length > 0) {
this.linuxSystem.autodiscoverItem[2].checkList = res.data && res.data['linux'] && res.data['linux'].disk;
if (this.tempContent['linux'] && this.tempContent['linux'].disk && this.tempContent['linux'].disk.length > 0) {
if (this.tempContent['linux'].disk[0] && this.tempContent['linux'].disk[0].collectionCycle) {
this.linuxSystem.autodiscoverItem[2].time = this.tempContent['linux'].disk[0].collectionCycle.toString();
this.handleCheckedCitiesChange(this.linuxSystem.autodiscoverItem[2].time, this.linuxSystem.autodiscoverItem[2]);
}
}
linuxArr.push(this.linuxSystem.autodiscoverItem[2]);
}
// 4
if (res.data && res.data['linux'] && res.data['linux'].docker && res.data['linux'].docker.length > 0) {
this.linuxSystem.autodiscoverItem[3].checkList = res.data && res.data['linux'] && res.data['linux'].docker;
if (this.tempContent['linux'] && this.tempContent['linux'].docker && this.tempContent['linux'].docker.length > 0) {
if (this.tempContent['linux'].docker[0] && this.tempContent['linux'].docker[0].collectionCycle) {
this.linuxSystem.autodiscoverItem[3].time = this.tempContent['linux'].docker[0].collectionCycle.toString();
this.handleCheckedCitiesChange(this.linuxSystem.autodiscoverItem[3].time, this.linuxSystem.autodiscoverItem[3]);
}
}
linuxArr.push(this.linuxSystem.autodiscoverItem[3]);
}
this.linuxSystem.autodiscoverItem = linuxArr;
} else {
// one
if (res.data && res.data['switch'] && res.data['switch'].switchOther && res.data['switch'].switchOther.length > 0) {
this.monitorTable.nodeOne[0].checkList = res.data && res.data['switch'] && res.data['switch'].switchOther;
}
let newArr = [];
// tow-1
if (res.data && res.data['switch'] && res.data['switch'].switchNet && res.data['switch'].switchNet.length > 0) {
this.monitorTable.nodeTow[0].checkList = res.data && res.data['switch'] && res.data['switch'].switchNet;
newArr.push(this.monitorTable.nodeTow[0]);
if (this.monitorTable.nodeTow[0].time) {
this.handleCheckedCitiesChange(this.monitorTable.nodeTow[0].time, this.monitorTable.nodeTow[0]);
}
}
// tow-2
if (res.data && res.data['switch'] && res.data['switch'].switchModule && res.data['switch'].switchModule.length > 0) {
this.monitorTable.nodeTow[1].checkList = res.data && res.data['switch'] && res.data['switch'].switchModule;
newArr.push(this.monitorTable.nodeTow[1]);
}
// tow-3
if (res.data && res.data['switch'] && res.data['switch'].switchMpu && res.data['switch'].switchMpu.length > 0) {
this.monitorTable.nodeTow[2].checkList = res.data && res.data['switch'] && res.data['switch'].switchMpu;
newArr.push(this.monitorTable.nodeTow[2]);
}
// tow-4
if (res.data && res.data['switch'] && res.data['switch'].switchPwr && res.data['switch'].switchPwr.length > 0) {
this.monitorTable.nodeTow[3].checkList = res.data && res.data['switch'] && res.data['switch'].switchPwr;
newArr.push(this.monitorTable.nodeTow[3]);
}
// tow-5
if (res.data && res.data['switch'] && res.data['switch'].switchNet && res.data['switch'].switchNet.length > 0) {
this.monitorTable.nodeTow[4].checkList = res.data && res.data['switch'] && res.data['switch'].switchFan;
newArr.push(this.monitorTable.nodeTow[4]);
}
this.monitorTable.nodeTow = newArr;
}
}
});
},
async next(num) {
console.log('num==',num,'active====',this.active);
if (num === '-1') {
this.active--;
} else {
@@ -269,6 +396,7 @@
return;
} else {
this.dataProcess();
this.fnGetMonitorTempList(this.ruleFormData.templateId);
}
}
if (this.active === 1) {
@@ -280,7 +408,7 @@
// 数据处理
dataProcess() {
let typeVal = {};
if (this.ruleFormData && this.ruleFormData['monitorTemp'] === 1) {
if (this.resourceType === 'linux') {
typeVal = this.linuxSystem;
} else {
typeVal = this.monitorTable;
@@ -315,39 +443,66 @@
},
// 点击下一步，获取多个table列表中所选中的行数据
selectAllChange () {
// this.allSelectedData = {};
// Object.keys(this.monitorTable).forEach(res => {
// this.monitorTable[res].forEach(item => {
// // 获取子组件的ref（格式：tableRef_${tableKey}）
// const tableRef = this.$refs[`tableRef_${item.config.tableKey}`];
// if (tableRef && tableRef.length && tableRef[0].ids.length) {
// // 调用子组件的方法获取选中数据
// const selectedData = tableRef[0].getSelectedData();
// // firstTitle: '华为交换机', secondTitle: '监控项',
// selectedData['firstTitle'] = item.firstTitle;
// selectedData['secondTitle'] = item.secondTitle;
// selectedData['lastTitle'] = item.title;
// this.allSelectedData[selectedData.tableKey] = selectedData;
// }
// });
// });
this.lastStepView();
},
// 最后一步展示
lastStepView() {
let obj = {};
this.option.forEach(item => {
obj[item.value] = item.label;
});
this.paramsList = [];
Object.keys(this.checkAllParams).forEach(item => {
if (this.checkAllParams[item].data && this.checkAllParams[item].data.length > 0) {
if (this.checkAllParams[item].time) {
this.checkAllParams[item]['timeLabel'] = obj[this.checkAllParams[item].time];
// 摘取数据 {id: '', collectionCycle: ''}
this.checkAllParams[item].data.forEach(val => {
this.paramsList.push({id: val.id,collectionCycle: this.checkAllParams[item].time});
});
} else {
let lastTimeList = [];
this.checkAllParams[item].data.forEach(val => {
if (val && val.time) {
val['timeLabel'] = obj[val.time];
lastTimeList.push(val);
this.paramsList.push({id: val.id,collectionCycle: val.time});
}
});
this.checkAllParams[item].data = lastTimeList;
}
}
});
console.log('params===',this.paramsList);
this.synthesisList = Object.assign({}, this.checkAllParams);
},
// 单个选择按钮
handleCheckedCitiesChange(changeVal,iteListAll) {
if (iteListAll && iteListAll.time) {
this.checkAllParams[iteListAll.modelName].time = iteListAll && iteListAll.time;
console.log('changeVal==',changeVal, 'iteListAll===',iteListAll, 'cvvvv===','time' in iteListAll);
if ('time' in iteListAll) {
if (changeVal) {
this.checkAllParams[iteListAll.modelName].time = iteListAll && iteListAll.time;
} else {
delete this.checkAllParams[iteListAll.modelName];
}
} else {
this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'];
}
this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'];
},
// 提交
submit() {
console.log('ruleFormData==',this.ruleFormData);
console.log('synthesisList==',this.synthesisList);
let params = Object.assign({resourceType: this.resourceType}, {collectionAndIdList: this.paramsList}, this.ruleFormData);
let fnType = addMonitorPolicy;
if (this.paramsData && this.paramsData.id) {
fnType = updateMonitorPolicy;
}
this.$modal.loading();
fnType(params).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/resource/monitorStategy");
this.$modal.closeLoading();
}).catch(error => {
this.$modal.closeLoading();
this.$modal.msgError("操作失败")
});
},
// 返回
goBack() {
@@ -357,8 +512,10 @@
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'submit':
console.log('dataVal===',dataVal);
case 'templateId':
if (dataVal) {
this.resourceType = this.policyTemp[dataVal].resourceType;
}
break;
default:
}
@@ -374,4 +531,7 @@
padding-left: 20px;
font-size: 1rem;
}
::v-deep #selDisabled{
color: #303133!important;
}
</style>

46
src/views/disRevenue/resource/monitorStategy/index.vue
View File

@@ -12,9 +12,9 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="策略状态" prop="bandwidthType">
<el-form-item label="策略状态" prop="status">
<el-select
v-model="queryParams.bandwidthType"
v-model="queryParams.status"
placeholder="请选择策略状态"
clearable>
<el-option
@@ -42,7 +42,7 @@
<script setup>
import TableList from "@/components/table/index.vue"
import {listMonitorTemp, delMonitorTemp} from "@/api/disRevenue/resource"
import {listMonitorPolicy, delMonitorPolicy} from "@/api/disRevenue/resource"
export default {
name: 'MonitorStategy',
components: {TableList},
@@ -60,14 +60,14 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
switchName: { label: `策略名称`, minWidth: '250', visible: true },
switchSn: { label: `描述`,minWidth: '200',visible: false},
interfaceName: { label: `关联资源组`,minWidth: '150', visible: true },
serverName: { label: `包含设备`,minWidth: '200'},
connectedDeviceType: { label: `关联监控模版`,minWidth: '150', visible: true },
policyName: { label: `策略名称`, minWidth: '250', visible: true },
description: { label: `描述`,minWidth: '200',visible: false},
resourceGroupId: { label: `关联资源组`,minWidth: '150', visible: true },
includedDevicesName: { label: `包含设备`,minWidth: '200'},
templateId: { label: `关联监控模版`,minWidth: '150', visible: true },
connected: { label: `策略内容`,minWidth: '200'},
type: { label: `策略状态`, minWidth: '100', visible: true },
conType: { label: `下发策略时间`,minWidth: '160'},
status: { label: `策略状态`, minWidth: '100', visible: true },
deployTime: { label: `下发策略时间`,minWidth: '160'},
createTime: { label: `创建时间`,minWidth: '160'},
updateTime:{ label: `修改时间`,minWidth: '160'}
},
@@ -84,8 +84,9 @@
line: [
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'disRevenue:resource:monitorStategy:edit'},
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:monitorStategy:details'},
{content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:monitorStategy:copy'},
// {content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:monitorStategy:copy'},
{content: '下发策略', fnCode: 'strategy', type: 'text', icon: 'el-icon-sort-down', hasPermi: 'disRevenue:resource:monitorStategy:strategy'},
{}
]
}
}
@@ -94,14 +95,21 @@
created() {
this.getList();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
listMonitorTemp(this.queryParams).then(response => {
this.$modal.loading();
listMonitorPolicy(this.queryParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
this.$modal.closeLoading();
}).catch(err => {
this.$modal.closeLoading();
})
},
// 处理子组件传递的新值
@@ -122,7 +130,7 @@
this.handleQuery();
},
callback(result, rowData, selectChange) {
callback(result, rowData, selectChange, selectList) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
@@ -146,8 +154,12 @@
});
break;
case 'delete':
if (selectList && selectList.length <= 0) {
this.$modal.msgWarning("请选择数据！");
return;
}
this.$modal.confirm('是否确认删除数据项？').then(function() {
return delMonitorTemp(selectChange)
return delMonitorPolicy(selectChange)
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功")
@@ -162,7 +174,7 @@
// });
// this.download("/system/monitorStategy/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("system/monitorStategy/export", paramsList, `资源监控策略_${new Date().getTime()}.xlsx`, null, 'json');
this.download("rocketmq/monitorPolicy/export", paramsList, `资源监控策略_${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
}

64
src/views/disRevenue/resource/monitorStategy/view.vue
View File

@@ -8,29 +8,31 @@
<div class="disInlineBlock w30" style="color: #000;font-weight: 600;">
{{item.firstTitle}}>>{{item.secondTitle}}<span v-if="item && item.lastTitle">>>{{item.lastTitle}}</span>
</div>
<span class="disInlineBlock" style="font-size: 14px;color: #000;" v-if="item.hasOwnProperty('time')">当前所有子项的采集周期均为{{item.time || 0}}分钟</span>
<span class="disInlineBlock" style="font-size: 14px;color: #000;" v-if="item.hasOwnProperty('timeLabel')">当前所有子项的采集周期均为{{item.timeLabel || 0}}</span>
</div>
<div class="w70" style="margin: auto;">
<div class="plr-50">
<div v-for="city of item.data" class="w100 mt10 mb10 disInlineBlock fontSize15">
<div class="disInlineBlock w80">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
<span>{{city.metricName}}</span>
</div>
<div v-if="city && city['time']" class="disInlineBlock" style="color: #606266">
采集周期为{{city['time']}}分钟
<div v-if="city && city['timeLabel']" class="disInlineBlock" style="color: #606266">
采集周期为{{city['timeLabel']}}
</div>
</div>
</div>
</div>
</div>
</div>
<el-button v-if="this.paramsData && this.paramsData.readonly" type="primary" @click="handleReset" class="fr mb10">返回</el-button>
</div>
</template>
<script setup>
import Form from '@/components/form/index.vue';
import TableList from "@/components/table/index.vue"
import {getMonitorPolicyTemp, getResMonitorGroup} from "@/api/disRevenue/resource"
export default {
name: 'MonitorStategyView',
components: {Form,TableList},
@@ -46,16 +48,7 @@
},
data() {
return {
formList: [{
config: {title: '基本信息'},
controls: {
id: {label: 'ID',hidden: true},
switchName: {label: '策略名称', span: 12, type: 'input', disabled: true, rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
serverPort: {label: '描述', span: 12, type: 'textarea', disabled: true, style: 'display: block;'},
monitorTemp: {label: '关联监控模版', span: 12, type: 'select', disabled: true, hidden: true, style: 'display: block;margin: 0 auto;'},
resourceGroup: {label: '关联资源组', span: 12, type: 'select', disabled: true,}
}
}],
formList: [],
paramsData: {},
columns: {
id: { label: `ID`, visible: false },
@@ -71,8 +64,49 @@
created() {
this.paramsData = this.$route && this.$route.query;
console.log('otherList=',this.otherList);
this.fnFormList();
this.fnResMonitorGroup();
this.fnMonitorPolicyTemp();
},
methods: {
fnFormList(){
this.formList = [{
config: {title: '', readonly: true},
controls: {
id: {label: 'ID',hidden: true},
policyName: {label: '策略名称', span: 24, type: 'input', required: true},
description: {label: '描述', span: 24, type: 'textarea'},
templateId: {label: '关联监控模版', span: 24, type: 'select',options: [], eventName: 'change', style: 'display: block;margin: 0 auto;'},
resourceGroupId: {label: '关联资源组', span: 24, type: 'select', options:[]}
}
}];
},
// 资源组
fnResMonitorGroup(){
getResMonitorGroup().then(res => {
if (res && res.data) {
this.formList[0].controls['resourceGroupId']['options']= res && res.data.map(item => {
return Object.assign({label: item.groupName, value: item.id});
});
}
});
},
// 监控模版
fnMonitorPolicyTemp(){
getMonitorPolicyTemp().then(res => {
if (res && res.data) {
this.policyTemp = {};
this.formList[0].controls['templateId']['options']= res && res.data.map(item => {
this.policyTemp[item.id] = item;
return Object.assign({label: item.templateName, value: item.id});
});
}
});
},
// 返回
handleReset() {
this.$router.push("/resource/monitorStategy");
},
// 监听事件
callback(result, dataVal, formVal) {}
}

26
src/views/disRevenue/resource/monitorTemp/details.vue
View File

@@ -28,7 +28,7 @@
</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.metricKey" :key="city.metricKey" :disabled="item.disabled" class="w45 mt10 mb10">
<span style="width: 200px" class="disInlineBlock">{{city.id}}-{{city.metricKey}}</span>
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
<span>{{city.metricName}}</span>
</el-checkbox>
</el-checkbox-group>
@@ -46,7 +46,7 @@
<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" :disabled="item.disabled" :label="city.metricKey" :key="city.metricKey" class="mt10 mb10 disBlock">
<span style="width: 200px" class="disInlineBlock">{{city.id}}-{{city.metricKey}}</span>
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
<span>{{city.metricName}}</span>
</el-checkbox>
</el-checkbox-group>
@@ -171,7 +171,7 @@
},
// 第二节点 2栏 列显隐信息
switchColumns: {
id: { label: `ID`, visible: true },
id: { label: `ID`},
metricKey: { label: `监控标识`, visible: true},
metricName: { label: `监控名称`, visible: true},
oid: { label: `监控OID`, visible: true },
@@ -216,7 +216,7 @@
},
created() {
this.paramsData = this.$route && this.$route.query;
console.log('paramsData===',this.paramsData);
// console.log('paramsData===',this.paramsData);
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
}
@@ -236,7 +236,6 @@
getFormDataList(id) {
this.tempContent = {};
getMonitorTemp(id).then(val => {
console.log('val====',val);
if (val && val.data) {
this.activeTypeName = val.data.template.resourcyType;
this.ruleFormData = val.data.template;
@@ -373,7 +372,7 @@
});
},
async next(num) {
console.log('num====',num,'this.active===',this.active);
// console.log('num====',num,'this.active===',this.active);
if (num === '-1') {
this.active--;
} else {
@@ -464,7 +463,6 @@
idList = idList.concat(this.synthesisList[item].data.map(val => val.id));
});
params['monitorIds'] = idList;
console.log('params===',params);
this.$modal.loading();
let fnType = addMonitorTemp;
if (this.paramsData && this.paramsData.id) {
@@ -478,8 +476,8 @@
this.$modal.closeLoading();
this.$modal.msgError("操作失败")
});
console.log('ruleFormData==',this.ruleFormData);
console.log('synthesisList==',this.synthesisList);
// console.log('ruleFormData==',this.ruleFormData);
// console.log('synthesisList==',this.synthesisList);
},
// 返回
goBack() {
@@ -506,14 +504,4 @@
padding-left: 20px;
font-size: 1rem;
}
/* 视觉禁用效果 */
.el-table__body-wrapper .el-checkbox__input .is-checked .el-checkbox__inner {
background-color: #e4e7ed;
border-color: #e4e7ed;
}
.el-table__body-wrapper .el-checkbox__input .el-checkbox__inner {
background-color: #f5f5f5;
border-color: #dcdfe6;
cursor: not-allowed;
}
</style>

15
src/views/disRevenue/resource/monitorTemp/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="130px">
<el-col :span="6">
<el-col :span="12">
<el-form-item label="模版名称" prop="templateName">
<el-input
v-model="queryParams.templateName"
@@ -66,7 +66,7 @@
line: [
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'disRevenue:resource:monitorTemp:edit'},
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:monitorTemp:details'},
{content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:monitorTemp:copy'},
// {content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-document-copy', hasPermi: 'disRevenue:resource:monitorTemp:copy'},
]
}
}
@@ -108,7 +108,7 @@
this.handleQuery();
},
callback(result, rowData, selectChange) {
callback(result, rowData, selectChange, selectList) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
@@ -127,11 +127,16 @@
this.$router.push({
path:'/disRevenue/resource/monitorTemp/view/index',
query:{
id: rowData.id
id: rowData.id,
readonly: true
}
});
break;
case 'delete':
if (selectList && selectList.length <= 0) {
this.$modal.msgWarning("请选择数据！");
return;
}
this.$modal.confirm('是否确认删除数据项？').then(function() {
return delMonitorTemp(selectChange)
}).then(() => {
@@ -148,7 +153,7 @@
// });
// this.download("/system/monitorTemp/export", {properties: dataList}, `拓扑管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("system/monitorTemp/export", paramsList, `监控模版_${new Date().getTime()}.xlsx`, null, 'json');
this.download("rocketmq/template/export", paramsList, `监控模版_${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
}

173
src/views/disRevenue/resource/monitorTemp/view.vue
View File

@@ -1,14 +1,13 @@
<template>
<div class="app-container">
<Form :config="{buttonGroup: []}" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
<div v-for="(item, key, index) of otherList" style="margin-top: 20px">
<Form :config="{buttonGroup: []}" :formList="formList" :ruleFormData="this.paramsData && this.paramsData.readonly ? ruleFormData : ruleForm" @fnClick="callback"></Form>
<div v-for="(item, key, index) of renderList" style="margin-top: 20px">
<div v-if="item.data && item.data.length > 0">
<!-- {{item}}-->
<div v-if="item && item.lastTitle && item.tableKey" class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
<div v-if="item && item.lastTitle && item.tableKey" class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px;margin: unset;">
{{item.lastTitle}}
</div>
<div v-else class="form-header h4" style="padding: 15px 10px;">
<div v-else class="form-header h4" style="padding: 15px 10px;margin: unset;">
{{item.firstTitle}}-{{item && item.lastTitle ? item.lastTitle : item.secondTitle}}
</div>
<div class="mt10 mb10">
@@ -30,12 +29,14 @@
</div>
</div>
</div>
<el-button v-if="this.paramsData && this.paramsData.readonly" type="primary" @click="handleReset" class="fr mb10">返回</el-button>
</div>
</template>
<script setup>
import Form from '@/components/form/index.vue';
import TableList from "@/components/table/index.vue"
import TableList from "@/components/table/index.vue";
import {getMonitorTemp} from "@/api/disRevenue/resource";
export default {
name: 'MonitorTempView',
components: {Form,TableList},
@@ -51,15 +52,10 @@
},
data() {
return {
formList: [{
config: {title: '基本信息',readonly: true},
controls: {
id: {label: 'ID',hidden: true},
templateName: {label: '模版名称', span: 24, type: 'input', required: true},
description: {label: '描述', span: 24, type: 'textarea'}
}
}],
ruleFormData: {},
otherListData: {},
paramsData: {},
formList: [],
columns: {
id: { label: `ID`, visible: false },
metricKey: { label: `监控标识`, visible: true},
@@ -68,13 +64,160 @@
filterValue: { label: `过滤值`, visible: true},
monitorDescription: { label: `自动监控说明`, visible: true}
},
config: {colHiddenCheck: true, colTopHiddenIcon: true}
config: {colHiddenCheck: true, colTopHiddenIcon: true},
linuxSystem: {
monitorItem: {
firstTitle: 'Linux系统', title: '监控项',
dataList: [{
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正常运行时间'},
{id: '3', name: 'system.cpu.load.avg5', towName: 'CPU的5分钟负载'},
{id: '4', name: 'system.cpu.utilee.idle', towName: 'CPU空闲时间'},
{id: '5', name: 'system.cpu.load.avg15', towName: 'CPU的15分钟负载'},
]},
{
title: '其他监控', modelName: 'other', checkAll: false, isIndeterminate: false,
checkList: []
}
],
},
autodiscoverItem: {
firstTitle: 'Linux系统', title: '自动发现项',
dataList:[{
title: '发现挂载文件系统', modelName: 'vfs', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}, {
title: '发现网络接口', modelName: 'net', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}, {
title: '发现硬盘设备', modelName: 'disk', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}, {
title: '发现docker', modelName: 'docker', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}
]
},
},
checkAllParams: {},
checkSwitchParams: {},
monitorTable: {
nodeOne: [{
firstTitle: '华为交换机', secondTitle: '监控项',
tableList: [],
config: {tableKey: 'web', colTopHiddenIcon: true}
}],
nodeTow: [
{
firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', classType: 'checkHidden',
tableList: [],
config: {tableKey: 'web1', colTopHiddenIcon: true, selectable: true}
},
{
firstTitle: '华为交换机', secondTitle: '自动发现项',title: 'MPU发现', classType: 'checkHidden',
tableList: [],
config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
},
// {
// 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: 'web3', colTopHiddenIcon: true, selectable: true}
// },
{
firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', classType: 'checkHidden',
tableList: [],
config: {tableKey: 'web3', colTopHiddenIcon: true, selectable: true}
},
]},
}
},
computed: {
renderList() {
// 优先用 props 传入的 otherList，其次用接口加载的 otherListData
const sourceList = this.paramsData && this.paramsData.readonly ? this.otherListData : this.otherList;
// 将 Object 转为 Array（键名作为 key，值作为 item），避免循环顺序问题
return sourceList;
}
},
created() {
this.paramsData = this.$route && this.$route.query;
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
}
this.fnFormList();
// linux
Object.keys(this.linuxSystem).forEach(res => {
this.linuxSystem[res]['dataList'].forEach(item => {
this.checkAllParams[item.modelName] = {
firstTitle: this.linuxSystem[res].firstTitle,
secondTitle: this.linuxSystem[res].title,
lastTitle: item.title,
data: []
}
});
});
// switch
Object.keys(this.monitorTable).forEach(res => {
this.monitorTable[res].forEach(item => {
this.checkSwitchParams[item.config.tableKey] = {
firstTitle: item.firstTitle,
secondTitle: item.secondTitle,
lastTitle: item.title,
tableKey: item.config.tableKey,
data: []
}
});
});
},
methods: {
fnFormList(){
this.formList = [{
config: {title: '基本信息',readonly: true},
controls: {
id: {label: 'ID',hidden: true},
templateName: {label: '模版名称', span: 24, type: 'input', required: true},
description: {label: '描述', span: 24, type: 'textarea'},
includedDevicesName: {label: '包含设备', span: 24, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true}
}
}]
},
// 获取详情
getFormDataList(id) {
this.$modal.loading();
getMonitorTemp(id).then(val => {
if (val && val.data) {
this.ruleFormData = val.data.template;
if (val.data.template.resourcyType === 'linux') {
Object.keys(this.checkAllParams).forEach(item => {
this.checkAllParams[item].data = item && val.data['linux'][item] || [];
});
this.otherListData = {...this.checkAllParams};
} else {
this.checkSwitchParams['web'].data = val.data['switch'].switchOther;
this.checkSwitchParams['web1'].data = val.data['switch'].switchNet;
this.checkSwitchParams['web2'].data = val.data['switch'].switchModule;
this.checkSwitchParams['web3'].data = val.data['switch'].switchFan;
this.otherListData = {...this.checkSwitchParams};
}
}
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
// this.$modal.msgError("操作失败")
});
},
// 返回
handleReset() {
this.$router.push("/resource/monitorTemp");
},
// 监听事件
callback(result, dataVal, formVal) {}
}