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-23 20:03:01 +08:00
parent 9e9184a91c
commit 78fab1a2ca
8 changed files with 568 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -180,15 +180,15 @@ export function resNameList() {
// 查询列表
export function listMonitorTemp(query) {
return request({
url: '/system/management/list',
url: '/rocketmq/template/list',
method: 'post',
data: query
})
}
// 查询资源注册详细
// 查询详细
export function getMonitorTemp(Id) {
return request({
url: '/system/management/' + Id,
url: '/rocketmq/template/' + Id,
method: 'get'
})
}
@@ -201,19 +201,19 @@ export function getMonitorTempList(query) {
})
}
// 新增资源注册
// 新增
export function addMonitorTemp(data) {
return request({
url: '/system/management',
url: '/rocketmq/template',
method: 'post',
data: data
})
}
// 修改资源注册
// 修改
export function updateMonitorTemp(data) {
return request({
url: '/system/management',
url: '/rocketmq/template',
method: 'put',
data: data
})
@@ -221,7 +221,7 @@ export function updateMonitorTemp(data) {
// 删除
export function delMonitorTemp(Ids) {
return request({
url: '/system/management/' + Ids,
url: '/rocketmq/template/' + Ids,
method: 'delete'
})
}

2
src/components/form/index.vue
View File

@@ -166,7 +166,7 @@
</div>
</template>
<script setup>
<script>
export default {
name: 'Form',
props: {

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

@@ -10,7 +10,8 @@
<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="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 @selection-change="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" />
<!-- 展开列内容 -->
<el-table-column v-if="config && config.expand" type="expand">
@@ -112,7 +113,8 @@
ids: [],
selectList: [],
isProcessing: false, // 防止事件循环的标志位
checkColumns: []
checkColumns: [],
typeParent: false
}
},
// 监听showSearch的变化，并且把变化后的值传给父组件
@@ -158,6 +160,8 @@
/** 多选框选中数据 */
handleSelectionChange(selection) {
if (this.typeParent) return
console.log('selection=====',selection);
if (this.config && this.config['tableKey']) {
this.selectList = [];
this.ids = [];
@@ -202,6 +206,84 @@
data: [...this.selectList] // 选中的数据
};
},
// 提供给父组件调用的方法：全选所有行
selectAllRows() {
this.typeParent = true;
const table = this.$refs[`tableRef_${this.config.tableKey}`];
if (!table) return;
// 清空现有选中状态
this.selectList = [];
this.ids = [];
// 遍历所有行，执行选中
this.tableList.forEach(row => {
// 跳过不可选的行（根据selectable配置）
// const isSelectable = !(this.config && this.config.selectable);
// if (isSelectable) {
table.toggleRowSelection(row, true); // 选中行
this.selectList.push(row); // 同步到选中列表
this.ids.push(row.id); // 同步到选中ID列表
// }
});
},
// 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}`];
this.selectList = [];
this.ids = [];
if (tableInstance) {
if (rows) {
rows.forEach(row => {
tableInstance.toggleRowSelection(row, true);
this.selectList.push(row);
this.ids.push(row.id);
});
} else {
tableInstance.clearSelection();
}
}
},
renderList() {
this.$emit("fnRenderList");
},

33
src/views/disRevenue/resource/group/details.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="app-container">
<Form ref="formRes" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
<Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
</div>
</template>
@@ -88,20 +88,23 @@
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;
// case 'includedDevicesId':
// console.log('dataVal==',dataVal);
// 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(() => {
// console.log('vvv===',this.$refs.formRef.$refs.ruleForm.model.includedDevicesId);
// }).catch(() => {
// console.log('cccccc====');
// });
// }
// });
// }
// break;
default:
}
}

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

@@ -17,18 +17,18 @@
<el-tabs type="border-card" v-model="activeTypeName" @tab-click="handleClick">
<!-- 2-1 -->
<el-tab-pane label="Linux系统" name="linux">
<el-tabs v-model="linuxActiveName" @tab-click="handleClick">
<el-tabs v-model="linuxActiveName">
<!-- 2-1-1 -->
<el-tab-pane label="监控项" name="monitorItem">
<el-collapse v-model="activeNames">
<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" :disabled="item.disabled" class="ml20" @change="(checked) => handleCheckAllChange(checked,item)">全选</el-checkbox>
<el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" 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" :disabled="item.disabled" class="w45 mt10 mb10">
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
<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>{{city.metricName}}</span>
</el-checkbox>
</el-checkbox-group>
@@ -39,10 +39,14 @@
<el-tab-pane label="自动发现项" name="autodiscoverItem">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(item,index) of linuxSystem.autodiscoverItem['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>
</template>
<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.id" :key="city.id" class="mt10 mb10 disBlock">
<span style="width: 200px" class="disInlineBlock">{{city.metricKey}}</span>
<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>{{city.metricName}}</span>
</el-checkbox>
</el-checkbox-group>
@@ -61,7 +65,7 @@
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-tabs v-model="hwActiveName" @tab-click="handleClick">
<el-tabs v-model="hwActiveName">
<!-- 2-2-1 -->
<el-tab-pane label="监控项" name="monitorItem">
<template v-for="(item,index) of monitorTable['nodeOne']">
@@ -96,13 +100,15 @@
<script setup>
import Form from '@/components/form/index.vue';
import TableList from "@/components/table/index.vue"
import {getMonitorTempList} from "@/api/disRevenue/resource"
import {getMonitorTempList, addMonitorTemp, updateMonitorTemp, getMonitorTemp} from "@/api/disRevenue/resource"
import MonitorTempView from './view'
export default {
name: 'MonitorTempDetails',
components: {Form, TableList, MonitorTempView},
data() {
return {
paramsData: {},
tempContent: {},
active: 0,
activeNames: [0, 1,2,3],
activeTypeName: 'linux', // 两个系统
@@ -114,11 +120,7 @@
allSelectedData: {},
synthesisList: {},
// 第一节点
ruleFormData: {
id: null,
switchName: '',
serverPort: ''
},
ruleFormData: {},
config: {
buttonGroup: []
},
@@ -126,8 +128,8 @@
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'}
templateName: {label: '模版名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
description: {label: '描述', span: 12, type: 'textarea'}
}
}],
// 第二节点 1栏
@@ -152,16 +154,16 @@
autodiscoverItem: {
firstTitle: 'Linux系统', title: '自动发现项',
dataList:[{
title: '发现挂载文件系统', modelName: 'point', checkAll: false, isIndeterminate: false, disabled: true,
title: '发现挂载文件系统', modelName: 'vfs', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}, {
title: '发现网络接口', modelName: 'net', checkAll: false, isIndeterminate: false, disabled: true,
title: '发现网络接口', modelName: 'net', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}, {
title: '发现硬盘设备', modelName: 'disk', checkAll: false, isIndeterminate: false, disabled: true,
title: '发现硬盘设备', modelName: 'disk', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}, {
title: '发现docker', modelName: 'docker', checkAll: false, isIndeterminate: false, disabled: true,
title: '发现docker', modelName: 'docker', checkAll: true, isIndeterminate: false, disabled: true,
checkList: []
}
]
@@ -169,7 +171,7 @@
},
// 第二节点 2栏 列显隐信息
switchColumns: {
id: { label: `ID`, visible: false },
id: { label: `ID`, visible: true },
metricKey: { label: `监控标识`, visible: true},
metricName: { label: `监控名称`, visible: true},
oid: { label: `监控OID`, visible: true },
@@ -202,17 +204,22 @@
// {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}
// config: {tableKey: 'web3', colTopHiddenIcon: true, selectable: true}
// },
{
firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', classType: 'checkHidden',
tableList: [],
config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
config: {tableKey: 'web3', colTopHiddenIcon: true, selectable: true}
},
]},
}
},
created() {
this.paramsData = this.$route && this.$route.query;
console.log('paramsData===',this.paramsData);
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
}
Object.keys(this.linuxSystem).forEach(res => {
this.linuxSystem[res]['dataList'].forEach(item => {
this.checkAllParams[item.modelName] = {
@@ -225,32 +232,110 @@
})
},
methods: {
// 获取详情
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;
this.tempContent[val.data.template.resourcyType] = val.data[val.data.template.resourcyType];
}
}).catch(() => {
// this.$modal.msgError("操作失败")
});
},
fnGetMonitorTempList(params) {
let towType = this.hwActiveName;
towType = this.linuxActiveName;
getMonitorTempList(params).then(res => {
// console.log('data====',res);
// console.log('data====',res,'params==',params);
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]);
if (params.itemType === 'monitorItem'){
this.linuxSystem[params.itemType].dataList[0].checkList = res.data && res.data.cpu;
this.linuxSystem[params.itemType].dataList[1].checkList = res.data && res.data.other;
if (this.tempContent && this.tempContent['linux']) {
// cpu
if (this.tempContent['linux'] && this.tempContent['linux'].cpu && this.tempContent['linux'].cpu.length > 0) {
this.linuxSystem[params.itemType].dataList[0].checkAll = true;
// 全选操作
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[0]);
} else {
this.linuxSystem[params.itemType].dataList[0].checkAll = false;
// let newLinuxOne = {...this.linuxSystem[params.itemType].dataList[0]};
// newLinuxOne['checkList'] = this.tempContent['linux'] && this.tempContent['linux'].cpu;
// let checkData = this.tempContent && this.tempContent['linux'] ? newLinuxOne : this.linuxSystem[params.itemType].dataList[0];
// // 全选操作 this.tempContent['linux'].cpu
// this.handleCheckAllChange(true, checkData);
}
// other
if (res.data && res.data.other && res.data.other.length === this.tempContent['linux'] && this.tempContent['linux'].other && this.tempContent['linux'].other.length) {
this.linuxSystem[params.itemType].dataList[1].checkAll = true;
// 全选操作
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[1]);
} else {
this.linuxSystem[params.itemType].dataList[1].checkAll = false;
let newLinuxOne = {...this.linuxSystem[params.itemType].dataList[1]};
newLinuxOne['checkList'] = [];
this.tempContent['linux'].other.some(item => {
this.linuxSystem[params.itemType].dataList[1].checkList.some(val => {
if (item.metricKey === val.metricKey){
newLinuxOne['checkList'].push(val);
return true;
}
});
});
// 全选操作
this.handleCheckAllChange(true, newLinuxOne, true);
}
} else {
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].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;
this.linuxSystem[params.itemType].dataList[0].checkList = res.data && res.data.vfs;
this.linuxSystem[params.itemType].dataList[1].checkList = res.data && res.data.net;
this.linuxSystem[params.itemType].dataList[2].checkList = res.data && res.data.disk;
this.linuxSystem[params.itemType].dataList[3].checkList = res.data && res.data.docker;
if (this.paramsData && this.paramsData.id) {
// vfs
if (this.tempContent['linux'] && this.tempContent['linux'].vfs && this.tempContent['linux'].vfs.length > 0) {
this.linuxSystem[params.itemType].dataList[0].checkAll = true;
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[0]);
} else {
this.linuxSystem[params.itemType].dataList[0].checkAll = false;
}
// net
if (this.tempContent['linux'] && this.tempContent['linux'].net && this.tempContent['linux'].net.length > 0) {
this.linuxSystem[params.itemType].dataList[1].checkAll = true;
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[1]);
} else {
this.linuxSystem[params.itemType].dataList[1].checkAll = false;
}
// disk
if (this.tempContent['linux'] && this.tempContent['linux'].disk && this.tempContent['linux'].disk.length > 0) {
this.linuxSystem[params.itemType].dataList[2].checkAll = true;
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[2]);
} else {
this.linuxSystem[params.itemType].dataList[2].checkAll = false;
}
// docker
if (this.tempContent['linux'] && this.tempContent['linux'].docker && this.tempContent['linux'].docker.length > 0) {
this.linuxSystem[params.itemType].dataList[3].checkAll = true;
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[3]);
} else {
this.linuxSystem[params.itemType].dataList[3].checkAll = false;
}
} else {
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[0]);
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[1]);
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[2]);
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[3]);
}
}
} else {
if (params.itemType === 'monitorItem') {
let defaultNum = 0;
let relevance = {id: []};
res.data.system.forEach((item,index) => {
res.data.switchOther.forEach((item,index) => {
if (item && item.filterValue === '9') {
defaultNum = index;
}
@@ -258,12 +343,31 @@
relevance['id'].push(item.id);
}
});
res.data.system[defaultNum]['relevance'] = relevance;
this.monitorTable.nodeOne[0].tableList = res.data.system;
res.data.switchOther[defaultNum]['relevance'] = relevance;
this.monitorTable.nodeOne[0].tableList = res.data.switchOther;
if (this.paramsData && this.paramsData.id) {
let tabDefSel = [];
this.tempContent['switch'].switchOther.some(item => {
res.data.switchOther.some(val => {
if (item.metricKey === val.metricKey) {
tabDefSel.push(val);
return;
}
});
});
setTimeout(() => {
this.$refs[`tableRef_web`][0].defaultSelectRows(tabDefSel);
},500);
}
} 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;
this.monitorTable.nodeTow[0].tableList = res.data.switchNet;
this.monitorTable.nodeTow[1].tableList = res.data.switchModule;
this.monitorTable.nodeTow[2].tableList = res.data.switchFan;
setTimeout(() => {
this.$refs[`tableRef_web1`][0].selectAllRows();
this.$refs[`tableRef_web2`][0].selectAllRows();
this.$refs[`tableRef_web3`][0].selectAllRows();
},500);
}
}
});
@@ -275,23 +379,20 @@
} else {
if (this.active === 0 && !await this.fnFormValid()) {
return;
} else if (this.active === 1) {
this.selectAllChange();
} else {
this.handleClick();
}
if (this.active === 1) {
this.selectAllChange();
}
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);
let itemTypeList = ['monitorItem', 'autodiscoverItem'];
itemTypeList.forEach(item => {
let params = {resourceType: this.activeTypeName, itemType: item};
this.fnGetMonitorTempList(params);
});
},
// form验证
fnFormValid() {
@@ -331,14 +432,20 @@
},
// 最后一步展示
lastStepView() {
this.synthesisList = Object.assign({}, this.checkAllParams, this.allSelectedData);
if (this.activeTypeName === 'linux') {
this.synthesisList = Object.assign({}, this.checkAllParams);
} else {
this.synthesisList = Object.assign({}, this.allSelectedData);
}
},
// 全选按钮
handleCheckAllChange(checked, itemAll) {
let arrList = itemAll.checkList.map(item => {return item.id});
handleCheckAllChange(checked, itemAll, isIndetBool) {
// console.log('itemAll===',itemAll.checkList);
let arrList = itemAll && itemAll.checkList && itemAll.checkList.map(item => {return item.metricKey});
this.checkParams[itemAll.modelName] = checked ? arrList : [];
this.checkAllParams[itemAll.modelName].data = checked ? itemAll.checkList : [];
itemAll.isIndeterminate = false;
itemAll.isIndeterminate = isIndetBool ? true : false;
},
// 单个选择按钮
handleCheckedCitiesChange(checkValList, iteListAll) {
@@ -346,11 +453,31 @@
iteListAll.isIndeterminate = checkValList.length > 0 && checkValList.length < iteListAll['checkList'].length;
// this.checkParams[iteListAll.modelName] = checkValList;
this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'].filter(item =>
checkValList.includes(item.id)
checkValList.includes(item.metricKey)
);
},
// 提交
submit() {
let params = Object.assign({}, {monitorIds: '', resourceType: this.activeTypeName}, this.ruleFormData);
let idList = [];
Object.keys(this.synthesisList).forEach(item => {
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) {
fnType = updateMonitorTemp;
}
fnType(params).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/resource/monitorTemp");
this.$modal.closeLoading();
}).catch(() => {
this.$modal.closeLoading();
this.$modal.msgError("操作失败")
});
console.log('ruleFormData==',this.ruleFormData);
console.log('synthesisList==',this.synthesisList);
},
@@ -379,7 +506,14 @@
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;
/* 视觉禁用效果 */
.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>

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

@@ -2,9 +2,9 @@
<div class="app-container pageTopForm">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="130px">
<el-col :span="6">
<el-form-item label="模版名称" prop="switchName">
<el-form-item label="模版名称" prop="templateName">
<el-input
v-model="queryParams.switchName"
v-model="queryParams.templateName"
placeholder="请输入模版名称"
clearable
@keyup.enter="handleQuery"/>
@@ -45,11 +45,11 @@
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
switchName: { label: `模版名称`,minWidth: '150', visible: true },
switchSn: { label: `描述`,visible: false, minWidth: '200'},
interfaceName: { label: `监控项`, minWidth: '100', visible: true },
connectedDeviceType: { label: `自动发现项`, minWidth: '100', visible: true },
serverName: { label: `包含资源`, minWidth: '200'},
templateName: { label: `模版名称`,minWidth: '150', visible: true },
description: { label: `描述`,visible: false, minWidth: '200'},
monitorItems: { label: `监控项`, minWidth: '100', visible: true },
discoveryRules: { label: `自动发现项`, minWidth: '100', visible: true },
resourceGroupName: { label: `包含资源`, minWidth: '200'},
createTime: { label: `创建时间`, minWidth: '160'},
updateTime:{ label: `修改时间`, minWidth: '160'}
},
@@ -75,14 +75,19 @@
created() {
this.getList();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
methods: {
/** 查询列表 */
getList() {
this.loading = true;
this.$modal.loading();
listMonitorTemp(this.queryParams).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
this.$modal.closeLoading();
})
},
// 处理子组件传递的新值

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

@@ -7,7 +7,10 @@
<div v-if="item && item.lastTitle && item.tableKey" class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
{{item.lastTitle}}
</div>
<div v-else class="form-header h4" style="padding: 15px 10px;">{{item.firstTitle}}-{{item.secondTitle}}</div>
<div v-else class="form-header h4" style="padding: 15px 10px;">
{{item.firstTitle}}-{{item && item.lastTitle ? item.lastTitle : item.secondTitle}}
</div>
<div class="mt10 mb10">
<div v-if="item && item.tableKey">
<template v-if="item.lastTitle">
@@ -18,10 +21,10 @@
<TableList :config="config" :columns="columns" :queryParams="{total: 0}" :tableList="item.data" @fnClick="callback"></TableList>
</template>
</div>
<div v-else class="plr-20">
<div v-for="(val,valIndex) of item.data" class="disInlineBlock w45">
<span style="width: 200px" class="disInlineBlock">{{val.name}}</span>
<span>{{val.towName}}</span>
<div v-else class="w80 plr-20 m0Auto">
<div v-for="(val,valIndex) of item.data" class="disInlineBlock w100 mb10">
<span style="width: 45%;color: #b3b3b3;" class="disInlineBlock">{{val.metricName}}</span>
<span>{{val.metricKey}}</span>
</div>
</div>
</div>
@@ -49,24 +52,23 @@
data() {
return {
formList: [{
config: {title: '基本信息'},
config: {title: '基本信息',readonly: true},
controls: {
id: {label: 'ID',hidden: true},
switchName: {label: '模版名称', span: 12, type: 'input', disabled: true, rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
resourceName: {label: '包含资源', span: 12, type: 'input', disabled: true},
serverPort: {label: '描述', span: 12, type: 'textarea', disabled: true,}
templateName: {label: '模版名称', span: 24, type: 'input', required: true},
description: {label: '描述', span: 24, type: 'textarea'}
}
}],
paramsData: {},
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}
metricKey: { label: `监控标识`, visible: true},
metricName: { label: `监控名称`, visible: true},
oid: { label: `监控OID`, visible: true },
filterValue: { label: `过滤值`, visible: true},
monitorDescription: { label: `自动监控说明`, visible: true}
},
config: {colHiddenCheck: true}
config: {colHiddenCheck: true, colTopHiddenIcon: true}
}
},
created() {

231
src/views/disRevenue/resource/serverScript/dynamicForm.vue Normal file
View File

@@ -0,0 +1,231 @@
<template>
<div>
<el-form :model="form" label-width="120px" class="dynamic-form">
<!-- 动态源文件部分 -->
<div v-for="(source, index) in form.sources" :key="index" class="source-item">
<!-- 源文件地址格式 -->
<el-form-item :label="`源文件${index + 1}地址格式`" :prop="`sources.${index}.format`" :rules="[{ required: true, message: '请选择地址格式', trigger: 'change' }]">
<el-radio-group v-model="source.format">
<el-radio label="platform">平台文件地址</el-radio>
<el-radio label="external">外网HTTP(S)</el-radio>
</el-radio-group>
<div class="tip">注意：当文件大小超过100M时，请选择【外网HTTP(S)】地址格式</div>
<div class="error-tip" v-if="source.sizeError">您选择的文件已经超过100M，请更改文件地址格式选择</div>
</el-form-item>
<!-- 源文件地址 -->
<el-form-item :label="`源文件${index + 1}地址`" :prop="`sources.${index}.address`" :rules="[{ required: true, message: '请选择文件地址', trigger: 'change' }]">
<el-select v-model="source.address" placeholder="请选择或输入地址" filterable clearable>
<el-option label="系统默认文件1" value="system-default-1"></el-option>
<el-option label="系统默认文件2" value="system-default-2"></el-option>
<el-option label="用户上传文件1" value="user-upload-1"></el-option>
<el-option label="用户上传文件2" value="user-upload-2"></el-option>
</el-select>
</el-form-item>
<!-- 删除按钮 - 至少保留一个源文件 -->
<el-button type="danger" icon="el-icon-delete" @click="removeSource(index)" v-if="form.sources.length > 1" class="delete-btn">删除源文件{{ index + 1 }}</el-button>
</div>
<!-- 添加源文件按钮 -->
<el-form-item>
<el-button type="primary" icon="el-icon-plus" @click="addSource" class="add-btn">添加源文件</el-button>
</el-form-item>
<!-- 目标目录 -->
<el-form-item label="目标目录" prop="targetDir" :rules="[{ required: true, message: '请输入目标目录', trigger: 'blur' }]">
<el-input v-model="form.targetDir" placeholder="请输入目标目录路径" clearable></el-input>
</el-form-item>
<!-- 命令内容部分 -->
<el-form-item label="命令内容">
<div v-for="(cmd, index) in form.commands" :key="index" class="command-item">
<!-- <el-input v-model="cmd" placeholder="请输入命令" clearable></el-input>-->
<el-button type="primary" icon="el-icon-plus" @click="addCommand" v-if="index === form.commands.length - 1" class="command-btn">添加</el-button>
<el-button type="danger" icon="el-icon-delete" @click="removeCommand(index)" v-if="form.commands.length > 1" class="command-btn">删除</el-button>
</div>
</el-form-item>
<!-- 执行方式 -->
<el-form-item label="执行方式" prop="executionMode" :rules="[{ required: true, message: '请选择执行方式', trigger: 'change' }]">
<el-select v-model="form.executionMode" placeholder="请选择执行方式" clearable>
<el-option label="立即执行" value="immediate"></el-option>
<el-option label="定时执行" value="scheduled"></el-option>
<el-option label="手动触发" value="manual"></el-option>
</el-select>
</el-form-item>
<!-- 定时时间 -->
<el-form-item label="定时时间" v-if="form.executionMode === 'scheduled'" prop="scheduleTime" :rules="[{ required: true, message: '请选择定时时间', trigger: 'change' }]">
<el-date-picker v-model="form.scheduleTime" type="datetime" placeholder="选择日期时间" style="width: 100%;"></el-date-picker>
</el-form-item>
<!-- 提交按钮 -->
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'DynamicForm',
data() {
return {
form: {
// 源文件数组，初始包含两个源文件
sources: [
{
format: '', // 地址格式：platform/external
address: '', // 文件地址
sizeError: false // 文件大小错误标记
},
{
format: '',
address: '',
sizeError: false
}
],
targetDir: '', // 目标目录
commands: [''], // 命令内容数组
executionMode: '', // 执行方式
scheduleTime: '' // 定时时间
}
};
},
methods: {
// 添加源文件
addSource() {
this.form.sources.push({
format: '',
address: '',
sizeError: false
});
},
// 删除源文件
removeSource(index) {
this.form.sources.splice(index, 1);
},
// 添加命令
addCommand() {
this.form.commands.push('');
},
// 删除命令
removeCommand(index) {
this.form.commands.splice(index, 1);
},
// 提交表单
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 在这里可以添加自定义验证逻辑，例如检查大文件是否使用了正确的地址格式
const hasError = this.form.sources.some(source => {
// 假设这里有判断文件大小的逻辑
const fileSize = this.getFileSize(source.address); // 假设的方法
source.sizeError = fileSize > 100 && source.format === 'platform';
return source.sizeError;
});
if (!hasError) {
this.$message.success('表单提交成功');
console.log('表单数据:', this.form);
} else {
this.$message.error('存在文件大小与地址格式不匹配的问题，请检查');
}
} else {
this.$message.error('表单验证失败，请检查必填项');
return false;
}
});
},
// 重置表单
resetForm() {
this.$refs.form.resetFields();
// 重置数组类型的字段
this.form.sources = [
{ format: '', address: '', sizeError: false },
{ format: '', address: '', sizeError: false }
];
this.form.commands = [''];
},
// 模拟获取文件大小的方法
getFileSize(address) {
// 实际应用中这里应该是真实的文件大小获取逻辑
const sizeMap = {
'system-default-1': 50, // 50M
'system-default-2': 150, // 150M
'user-upload-1': 80, // 80M
'user-upload-2': 200 // 200M
};
return sizeMap[address] || 0;
}
},
}
</script>
<style scoped>
.dynamic-form {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.tip {
color: #faad14;
font-size: 12px;
margin-top: 5px;
line-height: 1.5;
}
.error-tip {
color: #f5222d;
font-size: 12px;
margin-top: 5px;
line-height: 1.5;
}
.source-item {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px dashed #e8e8e8;
}
.source-item:last-child {
border-bottom: none;
}
.delete-btn {
margin-left: 120px;
margin-top: -10px;
}
.add-btn {
margin-left: 120px;
}
.command-item {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.command-item .el-input {
flex: 1;
margin-right: 10px;
}
.command-btn {
white-space: nowrap;
}
</style>