监控模版调试修改
This commit is contained in:
@@ -180,15 +180,15 @@ export function resNameList() {
|
|||||||
// 查询列表
|
// 查询列表
|
||||||
export function listMonitorTemp(query) {
|
export function listMonitorTemp(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/management/list',
|
url: '/rocketmq/template/list',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: query
|
data: query
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 查询资源注册详细
|
// 查询详细
|
||||||
export function getMonitorTemp(Id) {
|
export function getMonitorTemp(Id) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/management/' + Id,
|
url: '/rocketmq/template/' + Id,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -201,19 +201,19 @@ export function getMonitorTempList(query) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新增资源注册
|
// 新增
|
||||||
export function addMonitorTemp(data) {
|
export function addMonitorTemp(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/management',
|
url: '/rocketmq/template',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改资源注册
|
// 修改
|
||||||
export function updateMonitorTemp(data) {
|
export function updateMonitorTemp(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/management',
|
url: '/rocketmq/template',
|
||||||
method: 'put',
|
method: 'put',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
@@ -221,7 +221,7 @@ export function updateMonitorTemp(data) {
|
|||||||
// 删除
|
// 删除
|
||||||
export function delMonitorTemp(Ids) {
|
export function delMonitorTemp(Ids) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/management/' + Ids,
|
url: '/rocketmq/template/' + Ids,
|
||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -166,7 +166,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'Form',
|
name: 'Form',
|
||||||
props: {
|
props: {
|
||||||
|
|||||||
@@ -10,7 +10,8 @@
|
|||||||
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
|
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
|
||||||
</el-row>
|
</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.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">
|
<el-table-column v-if="config && config.expand" type="expand">
|
||||||
@@ -112,7 +113,8 @@
|
|||||||
ids: [],
|
ids: [],
|
||||||
selectList: [],
|
selectList: [],
|
||||||
isProcessing: false, // 防止事件循环的标志位
|
isProcessing: false, // 防止事件循环的标志位
|
||||||
checkColumns: []
|
checkColumns: [],
|
||||||
|
typeParent: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 监听showSearch的变化,并且把变化后的值传给父组件
|
// 监听showSearch的变化,并且把变化后的值传给父组件
|
||||||
@@ -158,6 +160,8 @@
|
|||||||
|
|
||||||
/** 多选框选中数据 */
|
/** 多选框选中数据 */
|
||||||
handleSelectionChange(selection) {
|
handleSelectionChange(selection) {
|
||||||
|
if (this.typeParent) return
|
||||||
|
console.log('selection=====',selection);
|
||||||
if (this.config && this.config['tableKey']) {
|
if (this.config && this.config['tableKey']) {
|
||||||
this.selectList = [];
|
this.selectList = [];
|
||||||
this.ids = [];
|
this.ids = [];
|
||||||
@@ -202,6 +206,84 @@
|
|||||||
data: [...this.selectList] // 选中的数据
|
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() {
|
renderList() {
|
||||||
this.$emit("fnRenderList");
|
this.$emit("fnRenderList");
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -88,7 +88,8 @@
|
|||||||
case 'cancle':
|
case 'cancle':
|
||||||
this.$router.push("/resource/group");
|
this.$router.push("/resource/group");
|
||||||
break;
|
break;
|
||||||
case 'includedDevicesId':
|
// case 'includedDevicesId':
|
||||||
|
// console.log('dataVal==',dataVal);
|
||||||
// if (formVal && formVal === 'right') {
|
// if (formVal && formVal === 'right') {
|
||||||
// exitsResourceById({resourceIds: dataVal.join(',')}).then(res => {
|
// exitsResourceById({resourceIds: dataVal.join(',')}).then(res => {
|
||||||
// console.log('res=',res.msg);
|
// console.log('res=',res.msg);
|
||||||
@@ -96,12 +97,14 @@
|
|||||||
// let content = '<p style="font-size: 1rem;font-weight: 600;">资源从其他分组移动到此组</p>' +
|
// let content = '<p style="font-size: 1rem;font-weight: 600;">资源从其他分组移动到此组</p>' +
|
||||||
// '<p style="height: 0px;margin:10px 0 50px;">资源移动到此组后,将在原来到组中消失,相关的监控策略也会消失</p>';
|
// '<p style="height: 0px;margin:10px 0 50px;">资源移动到此组后,将在原来到组中消失,相关的监控策略也会消失</p>';
|
||||||
// this.$modal.confirm(content).then(() => {
|
// this.$modal.confirm(content).then(() => {
|
||||||
//
|
// console.log('vvv===',this.$refs.formRef.$refs.ruleForm.model.includedDevicesId);
|
||||||
// }).catch(() => {});
|
// }).catch(() => {
|
||||||
|
// console.log('cccccc====');
|
||||||
|
// });
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
break;
|
// break;
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,18 +17,18 @@
|
|||||||
<el-tabs type="border-card" v-model="activeTypeName" @tab-click="handleClick">
|
<el-tabs type="border-card" v-model="activeTypeName" @tab-click="handleClick">
|
||||||
<!-- 2-1 -->
|
<!-- 2-1 -->
|
||||||
<el-tab-pane label="Linux系统" name="linux">
|
<el-tab-pane label="Linux系统" name="linux">
|
||||||
<el-tabs v-model="linuxActiveName" @tab-click="handleClick">
|
<el-tabs v-model="linuxActiveName">
|
||||||
<!-- 2-1-1 -->
|
<!-- 2-1-1 -->
|
||||||
<el-tab-pane label="监控项" name="monitorItem">
|
<el-tab-pane label="监控项" name="monitorItem">
|
||||||
<el-collapse v-model="activeNames">
|
<el-collapse v-model="activeNames">
|
||||||
<el-collapse-item v-for="(item,index) of linuxSystem.monitorItem['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">
|
<template slot="title">
|
||||||
{{item.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>
|
</template>
|
||||||
<el-checkbox-group v-model="checkParams[item.modelName]" @change="(checkValList) => handleCheckedCitiesChange(checkValList, item)" style="padding: 0 20px;">
|
<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">
|
<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.metricKey}}</span>
|
<span style="width: 200px" class="disInlineBlock">{{city.id}}-{{city.metricKey}}</span>
|
||||||
<span>{{city.metricName}}</span>
|
<span>{{city.metricName}}</span>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
@@ -39,10 +39,14 @@
|
|||||||
<el-tab-pane label="自动发现项" name="autodiscoverItem">
|
<el-tab-pane label="自动发现项" name="autodiscoverItem">
|
||||||
<el-collapse v-model="activeNames">
|
<el-collapse v-model="activeNames">
|
||||||
<el-collapse-item v-for="(item,index) of linuxSystem.autodiscoverItem['dataList']" :title="item.title" :name="index">
|
<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;">
|
<div style="display: flex;justify-content: center;">
|
||||||
<el-checkbox-group v-model="checkParams[item.modelName]" style="padding: 0 20px;">
|
<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">
|
<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.metricKey}}</span>
|
<span style="width: 200px" class="disInlineBlock">{{city.id}}-{{city.metricKey}}</span>
|
||||||
<span>{{city.metricName}}</span>
|
<span>{{city.metricName}}</span>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
@@ -61,7 +65,7 @@
|
|||||||
<i class="el-icon-question"></i>
|
<i class="el-icon-question"></i>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</span>
|
</span>
|
||||||
<el-tabs v-model="hwActiveName" @tab-click="handleClick">
|
<el-tabs v-model="hwActiveName">
|
||||||
<!-- 2-2-1 -->
|
<!-- 2-2-1 -->
|
||||||
<el-tab-pane label="监控项" name="monitorItem">
|
<el-tab-pane label="监控项" name="monitorItem">
|
||||||
<template v-for="(item,index) of monitorTable['nodeOne']">
|
<template v-for="(item,index) of monitorTable['nodeOne']">
|
||||||
@@ -96,13 +100,15 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import Form from '@/components/form/index.vue';
|
import Form from '@/components/form/index.vue';
|
||||||
import TableList from "@/components/table/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'
|
import MonitorTempView from './view'
|
||||||
export default {
|
export default {
|
||||||
name: 'MonitorTempDetails',
|
name: 'MonitorTempDetails',
|
||||||
components: {Form, TableList, MonitorTempView},
|
components: {Form, TableList, MonitorTempView},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
paramsData: {},
|
||||||
|
tempContent: {},
|
||||||
active: 0,
|
active: 0,
|
||||||
activeNames: [0, 1,2,3],
|
activeNames: [0, 1,2,3],
|
||||||
activeTypeName: 'linux', // 两个系统
|
activeTypeName: 'linux', // 两个系统
|
||||||
@@ -114,11 +120,7 @@
|
|||||||
allSelectedData: {},
|
allSelectedData: {},
|
||||||
synthesisList: {},
|
synthesisList: {},
|
||||||
// 第一节点
|
// 第一节点
|
||||||
ruleFormData: {
|
ruleFormData: {},
|
||||||
id: null,
|
|
||||||
switchName: '',
|
|
||||||
serverPort: ''
|
|
||||||
},
|
|
||||||
config: {
|
config: {
|
||||||
buttonGroup: []
|
buttonGroup: []
|
||||||
},
|
},
|
||||||
@@ -126,8 +128,8 @@
|
|||||||
config: {title: ''},
|
config: {title: ''},
|
||||||
controls: {
|
controls: {
|
||||||
id: {label: 'ID',hidden: true},
|
id: {label: 'ID',hidden: true},
|
||||||
switchName: {label: '模版名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
|
templateName: {label: '模版名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
|
||||||
serverPort: {label: '描述', span: 12, type: 'textarea'}
|
description: {label: '描述', span: 12, type: 'textarea'}
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
// 第二节点 1栏
|
// 第二节点 1栏
|
||||||
@@ -152,16 +154,16 @@
|
|||||||
autodiscoverItem: {
|
autodiscoverItem: {
|
||||||
firstTitle: 'Linux系统', title: '自动发现项',
|
firstTitle: 'Linux系统', title: '自动发现项',
|
||||||
dataList:[{
|
dataList:[{
|
||||||
title: '发现挂载文件系统', modelName: 'point', checkAll: false, isIndeterminate: false, disabled: true,
|
title: '发现挂载文件系统', modelName: 'vfs', checkAll: true, isIndeterminate: false, disabled: true,
|
||||||
checkList: []
|
checkList: []
|
||||||
}, {
|
}, {
|
||||||
title: '发现网络接口', modelName: 'net', checkAll: false, isIndeterminate: false, disabled: true,
|
title: '发现网络接口', modelName: 'net', checkAll: true, isIndeterminate: false, disabled: true,
|
||||||
checkList: []
|
checkList: []
|
||||||
}, {
|
}, {
|
||||||
title: '发现硬盘设备', modelName: 'disk', checkAll: false, isIndeterminate: false, disabled: true,
|
title: '发现硬盘设备', modelName: 'disk', checkAll: true, isIndeterminate: false, disabled: true,
|
||||||
checkList: []
|
checkList: []
|
||||||
}, {
|
}, {
|
||||||
title: '发现docker', modelName: 'docker', checkAll: false, isIndeterminate: false, disabled: true,
|
title: '发现docker', modelName: 'docker', checkAll: true, isIndeterminate: false, disabled: true,
|
||||||
checkList: []
|
checkList: []
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
@@ -169,7 +171,7 @@
|
|||||||
},
|
},
|
||||||
// 第二节点 2栏 列显隐信息
|
// 第二节点 2栏 列显隐信息
|
||||||
switchColumns: {
|
switchColumns: {
|
||||||
id: { label: `ID`, visible: false },
|
id: { label: `ID`, visible: true },
|
||||||
metricKey: { label: `监控标识`, visible: true},
|
metricKey: { label: `监控标识`, visible: true},
|
||||||
metricName: { label: `监控名称`, visible: true},
|
metricName: { label: `监控名称`, visible: true},
|
||||||
oid: { label: `监控OID`, 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: 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: ''},
|
// {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',
|
firstTitle: '华为交换机', secondTitle: '自动发现项',title: '风扇发现', classType: 'checkHidden',
|
||||||
tableList: [],
|
tableList: [],
|
||||||
config: {tableKey: 'web2', colTopHiddenIcon: true, selectable: true}
|
config: {tableKey: 'web3', colTopHiddenIcon: true, selectable: true}
|
||||||
},
|
},
|
||||||
]},
|
]},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
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 => {
|
Object.keys(this.linuxSystem).forEach(res => {
|
||||||
this.linuxSystem[res]['dataList'].forEach(item => {
|
this.linuxSystem[res]['dataList'].forEach(item => {
|
||||||
this.checkAllParams[item.modelName] = {
|
this.checkAllParams[item.modelName] = {
|
||||||
@@ -225,32 +232,110 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
fnGetMonitorTempList(params) {
|
||||||
let towType = this.hwActiveName;
|
|
||||||
towType = this.linuxActiveName;
|
|
||||||
getMonitorTempList(params).then(res => {
|
getMonitorTempList(params).then(res => {
|
||||||
// console.log('data====',res);
|
// console.log('data====',res,'params==',params);
|
||||||
if (this.activeTypeName === 'linux') {
|
if (this.activeTypeName === 'linux') {
|
||||||
if (this.linuxActiveName === 'monitorItem'){
|
if (params.itemType === 'monitorItem'){
|
||||||
this.linuxSystem[this.linuxActiveName].dataList[0].checkList = res.data && res.data.cpu;
|
this.linuxSystem[params.itemType].dataList[0].checkList = res.data && res.data.cpu;
|
||||||
this.linuxSystem[this.linuxActiveName].dataList[1].checkList = res.data && res.data.other;
|
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[this.linuxActiveName].dataList[0]);
|
this.handleCheckAllChange(true, this.linuxSystem[params.itemType].dataList[0]);
|
||||||
} else {
|
} else {
|
||||||
this.checkParams.point = res.data.point.map(item => item.id);
|
this.linuxSystem[params.itemType].dataList[0].checkAll = false;
|
||||||
this.checkParams.net = res.data.net.map(item => item.id);
|
// let newLinuxOne = {...this.linuxSystem[params.itemType].dataList[0]};
|
||||||
this.checkParams.disk = res.data.disk.map(item => item.id);
|
// newLinuxOne['checkList'] = this.tempContent['linux'] && this.tempContent['linux'].cpu;
|
||||||
this.checkParams.docker = res.data.docker.map(item => item.id);
|
// let checkData = this.tempContent && this.tempContent['linux'] ? newLinuxOne : this.linuxSystem[params.itemType].dataList[0];
|
||||||
this.linuxSystem[this.linuxActiveName].dataList[0].checkList = res.data && res.data.point;
|
// // 全选操作 this.tempContent['linux'].cpu
|
||||||
this.linuxSystem[this.linuxActiveName].dataList[1].checkList = res.data && res.data.net;
|
// this.handleCheckAllChange(true, checkData);
|
||||||
this.linuxSystem[this.linuxActiveName].dataList[2].checkList = res.data && res.data.disk;
|
}
|
||||||
this.linuxSystem[this.linuxActiveName].dataList[3].checkList = res.data && res.data.docker;
|
// 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.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 {
|
} else {
|
||||||
if (params.itemType === 'monitorItem') {
|
if (params.itemType === 'monitorItem') {
|
||||||
let defaultNum = 0;
|
let defaultNum = 0;
|
||||||
let relevance = {id: []};
|
let relevance = {id: []};
|
||||||
res.data.system.forEach((item,index) => {
|
res.data.switchOther.forEach((item,index) => {
|
||||||
if (item && item.filterValue === '9') {
|
if (item && item.filterValue === '9') {
|
||||||
defaultNum = index;
|
defaultNum = index;
|
||||||
}
|
}
|
||||||
@@ -258,12 +343,31 @@
|
|||||||
relevance['id'].push(item.id);
|
relevance['id'].push(item.id);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
res.data.system[defaultNum]['relevance'] = relevance;
|
res.data.switchOther[defaultNum]['relevance'] = relevance;
|
||||||
this.monitorTable.nodeOne[0].tableList = res.data.system;
|
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 {
|
} else {
|
||||||
this.monitorTable.nodeTow[0].tableList = res.data.netport;
|
this.monitorTable.nodeTow[0].tableList = res.data.switchNet;
|
||||||
this.monitorTable.nodeTow[1].tableList = res.data.lightmodule;
|
this.monitorTable.nodeTow[1].tableList = res.data.switchModule;
|
||||||
this.monitorTable.nodeTow[2].tableList = res.data.fan;
|
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 {
|
} else {
|
||||||
if (this.active === 0 && !await this.fnFormValid()) {
|
if (this.active === 0 && !await this.fnFormValid()) {
|
||||||
return;
|
return;
|
||||||
|
} else if (this.active === 1) {
|
||||||
|
this.selectAllChange();
|
||||||
} else {
|
} else {
|
||||||
this.handleClick();
|
this.handleClick();
|
||||||
}
|
}
|
||||||
if (this.active === 1) {
|
|
||||||
this.selectAllChange();
|
|
||||||
}
|
|
||||||
this.active++;
|
this.active++;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleClick() {
|
handleClick() {
|
||||||
let params = {};
|
let itemTypeList = ['monitorItem', 'autodiscoverItem'];
|
||||||
if (this.activeTypeName === 'linux') {
|
itemTypeList.forEach(item => {
|
||||||
params = {resourceType: this.activeTypeName, itemType: this.linuxActiveName};
|
let params = {resourceType: this.activeTypeName, itemType: item};
|
||||||
} else {
|
|
||||||
params = {resourceType: this.activeTypeName, itemType: this.hwActiveName};
|
|
||||||
}
|
|
||||||
this.fnGetMonitorTempList(params);
|
this.fnGetMonitorTempList(params);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
// form验证
|
// form验证
|
||||||
fnFormValid() {
|
fnFormValid() {
|
||||||
@@ -331,14 +432,20 @@
|
|||||||
},
|
},
|
||||||
// 最后一步展示
|
// 最后一步展示
|
||||||
lastStepView() {
|
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) {
|
handleCheckAllChange(checked, itemAll, isIndetBool) {
|
||||||
let arrList = itemAll.checkList.map(item => {return item.id});
|
// console.log('itemAll===',itemAll.checkList);
|
||||||
|
let arrList = itemAll && itemAll.checkList && itemAll.checkList.map(item => {return item.metricKey});
|
||||||
this.checkParams[itemAll.modelName] = checked ? arrList : [];
|
this.checkParams[itemAll.modelName] = checked ? arrList : [];
|
||||||
this.checkAllParams[itemAll.modelName].data = checked ? itemAll.checkList : [];
|
this.checkAllParams[itemAll.modelName].data = checked ? itemAll.checkList : [];
|
||||||
itemAll.isIndeterminate = false;
|
itemAll.isIndeterminate = isIndetBool ? true : false;
|
||||||
},
|
},
|
||||||
// 单个选择按钮
|
// 单个选择按钮
|
||||||
handleCheckedCitiesChange(checkValList, iteListAll) {
|
handleCheckedCitiesChange(checkValList, iteListAll) {
|
||||||
@@ -346,11 +453,31 @@
|
|||||||
iteListAll.isIndeterminate = checkValList.length > 0 && checkValList.length < iteListAll['checkList'].length;
|
iteListAll.isIndeterminate = checkValList.length > 0 && checkValList.length < iteListAll['checkList'].length;
|
||||||
// this.checkParams[iteListAll.modelName] = checkValList;
|
// this.checkParams[iteListAll.modelName] = checkValList;
|
||||||
this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'].filter(item =>
|
this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'].filter(item =>
|
||||||
checkValList.includes(item.id)
|
checkValList.includes(item.metricKey)
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
// 提交
|
// 提交
|
||||||
submit() {
|
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('ruleFormData==',this.ruleFormData);
|
||||||
console.log('synthesisList==',this.synthesisList);
|
console.log('synthesisList==',this.synthesisList);
|
||||||
},
|
},
|
||||||
@@ -379,7 +506,14 @@
|
|||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
font-size: 1rem;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
<div class="app-container pageTopForm">
|
<div class="app-container pageTopForm">
|
||||||
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="130px">
|
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="130px">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-form-item label="模版名称" prop="switchName">
|
<el-form-item label="模版名称" prop="templateName">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="queryParams.switchName"
|
v-model="queryParams.templateName"
|
||||||
placeholder="请输入模版名称"
|
placeholder="请输入模版名称"
|
||||||
clearable
|
clearable
|
||||||
@keyup.enter="handleQuery"/>
|
@keyup.enter="handleQuery"/>
|
||||||
@@ -45,11 +45,11 @@
|
|||||||
// 列显隐信息
|
// 列显隐信息
|
||||||
columns: {
|
columns: {
|
||||||
id: { label: `ID`,width: '50'},
|
id: { label: `ID`,width: '50'},
|
||||||
switchName: { label: `模版名称`,minWidth: '150', visible: true },
|
templateName: { label: `模版名称`,minWidth: '150', visible: true },
|
||||||
switchSn: { label: `描述`,visible: false, minWidth: '200'},
|
description: { label: `描述`,visible: false, minWidth: '200'},
|
||||||
interfaceName: { label: `监控项`, minWidth: '100', visible: true },
|
monitorItems: { label: `监控项`, minWidth: '100', visible: true },
|
||||||
connectedDeviceType: { label: `自动发现项`, minWidth: '100', visible: true },
|
discoveryRules: { label: `自动发现项`, minWidth: '100', visible: true },
|
||||||
serverName: { label: `包含资源`, minWidth: '200'},
|
resourceGroupName: { label: `包含资源`, minWidth: '200'},
|
||||||
createTime: { label: `创建时间`, minWidth: '160'},
|
createTime: { label: `创建时间`, minWidth: '160'},
|
||||||
updateTime:{ label: `修改时间`, minWidth: '160'}
|
updateTime:{ label: `修改时间`, minWidth: '160'}
|
||||||
},
|
},
|
||||||
@@ -75,14 +75,19 @@
|
|||||||
created() {
|
created() {
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
|
activated() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList();
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/** 查询列表 */
|
/** 查询列表 */
|
||||||
getList() {
|
getList() {
|
||||||
this.loading = true;
|
this.$modal.loading();
|
||||||
listMonitorTemp(this.queryParams).then(response => {
|
listMonitorTemp(this.queryParams).then(response => {
|
||||||
this.tableList = response.rows;
|
this.tableList = response.rows;
|
||||||
this.queryParams.total = response.total;
|
this.queryParams.total = response.total;
|
||||||
this.loading = false;
|
this.$modal.closeLoading();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
// 处理子组件传递的新值
|
// 处理子组件传递的新值
|
||||||
|
|||||||
@@ -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">
|
<div v-if="item && item.lastTitle && item.tableKey" class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
|
||||||
{{item.lastTitle}}
|
{{item.lastTitle}}
|
||||||
</div>
|
</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 class="mt10 mb10">
|
||||||
<div v-if="item && item.tableKey">
|
<div v-if="item && item.tableKey">
|
||||||
<template v-if="item.lastTitle">
|
<template v-if="item.lastTitle">
|
||||||
@@ -18,10 +21,10 @@
|
|||||||
<TableList :config="config" :columns="columns" :queryParams="{total: 0}" :tableList="item.data" @fnClick="callback"></TableList>
|
<TableList :config="config" :columns="columns" :queryParams="{total: 0}" :tableList="item.data" @fnClick="callback"></TableList>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="plr-20">
|
<div v-else class="w80 plr-20 m0Auto">
|
||||||
<div v-for="(val,valIndex) of item.data" class="disInlineBlock w45">
|
<div v-for="(val,valIndex) of item.data" class="disInlineBlock w100 mb10">
|
||||||
<span style="width: 200px" class="disInlineBlock">{{val.name}}</span>
|
<span style="width: 45%;color: #b3b3b3;" class="disInlineBlock">{{val.metricName}}</span>
|
||||||
<span>{{val.towName}}</span>
|
<span>{{val.metricKey}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -49,24 +52,23 @@
|
|||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
formList: [{
|
formList: [{
|
||||||
config: {title: '基本信息'},
|
config: {title: '基本信息',readonly: true},
|
||||||
controls: {
|
controls: {
|
||||||
id: {label: 'ID',hidden: true},
|
id: {label: 'ID',hidden: true},
|
||||||
switchName: {label: '模版名称', span: 12, type: 'input', disabled: true, rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
|
templateName: {label: '模版名称', span: 24, type: 'input', required: true},
|
||||||
resourceName: {label: '包含资源', span: 12, type: 'input', disabled: true},
|
description: {label: '描述', span: 24, type: 'textarea'}
|
||||||
serverPort: {label: '描述', span: 12, type: 'textarea', disabled: true,}
|
|
||||||
}
|
}
|
||||||
}],
|
}],
|
||||||
paramsData: {},
|
paramsData: {},
|
||||||
columns: {
|
columns: {
|
||||||
id: { label: `ID`, visible: false },
|
id: { label: `ID`, visible: false },
|
||||||
ident: { label: `监控标识`, visible: true},
|
metricKey: { label: `监控标识`, visible: true},
|
||||||
name: { label: `监控名称`, visible: true},
|
metricName: { label: `监控名称`, visible: true},
|
||||||
monitor: { label: `监控OID`, visible: true },
|
oid: { label: `监控OID`, visible: true },
|
||||||
filter: { label: `过滤值`},
|
filterValue: { label: `过滤值`, visible: true},
|
||||||
explain: { label: `监控说明`, visible: true}
|
monitorDescription: { label: `自动监控说明`, visible: true}
|
||||||
},
|
},
|
||||||
config: {colHiddenCheck: true}
|
config: {colHiddenCheck: true, colTopHiddenIcon: true}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|||||||
231
src/views/disRevenue/resource/serverScript/dynamicForm.vue
Normal file
231
src/views/disRevenue/resource/serverScript/dynamicForm.vue
Normal 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>
|
||||||
Reference in New Issue
Block a user