资源监控策略、服务器脚本策略
This commit is contained in:
@@ -242,12 +242,11 @@ export function getMonitorPolicy(Id) {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查询资源监控项
|
||||
export function getMonitorPolicyList(query) {
|
||||
// 下发策略
|
||||
export function getMonitorPolicyList(Id) {
|
||||
return request({
|
||||
url: '/rocketmq/monitorPolicy/issuePolicy',
|
||||
method: 'post',
|
||||
data: query
|
||||
url: '/rocketmq/monitorPolicy/issuePolicy?id=' + Id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -289,3 +288,51 @@ export function getResMonitorGroup() {
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
/** ----------------脚本服务器策略------------ */
|
||||
// 查询列表
|
||||
export function listPolicy(query) {
|
||||
return request({
|
||||
url: '/rocketmq/policy/list',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
// 查询详细
|
||||
export function getPolicy(Id) {
|
||||
return request({
|
||||
url: '/rocketmq/policy/' + Id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 下发策略
|
||||
export function getPolicyList(Id) {
|
||||
return request({
|
||||
url: '/rocketmq/policy/issueDeploymentPolicy?id=' + Id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增
|
||||
export function addPolicy(data) {
|
||||
return request({
|
||||
url: '/rocketmq/policy',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改
|
||||
export function updatePolicy(data) {
|
||||
return request({
|
||||
url: '/rocketmq/policy',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 删除
|
||||
export function delPolicy(Ids) {
|
||||
return request({
|
||||
url: '/rocketmq/policy/' + Ids,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -351,7 +351,7 @@ export const dynamicRoutes = [
|
||||
path: 'index/:id?',
|
||||
component: () => import('@/views/disRevenue/resource/monitorTemp/view'),
|
||||
name: 'monitorTempView',
|
||||
meta: { title: '监控模版信息', activeMenu: '/disRevenue/resource/monitorTemp' }
|
||||
meta: { title: '监控模版详情', activeMenu: '/disRevenue/resource/monitorTemp' }
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -380,7 +380,7 @@ export const dynamicRoutes = [
|
||||
path: 'index/:id?',
|
||||
component: () => import('@/views/disRevenue/resource/monitorStategy/view'),
|
||||
name: 'monitorStategyView',
|
||||
meta: { title: '监控模版信息', activeMenu: '/disRevenue/resource/monitorStategy' }
|
||||
meta: { title: '资源监控策略详情', activeMenu: '/disRevenue/resource/monitorStategy' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -181,30 +181,20 @@
|
||||
// 第二节点 1栏
|
||||
option: [],
|
||||
linuxSystem: {
|
||||
monitorItem: [{
|
||||
firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '',
|
||||
checkList: []
|
||||
},{
|
||||
firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other',
|
||||
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: []
|
||||
}],
|
||||
monitorItem: [
|
||||
{firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '', checkList: []},
|
||||
{firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other', 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: []}],
|
||||
nodeOne: [{firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'switchOther', checkList: []}],
|
||||
nodeTow: [
|
||||
{firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', modelName: 'switchNet', time: '300', checkList: []},
|
||||
{firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现', modelName: 'switchModule', time: '', checkList: []},
|
||||
@@ -264,13 +254,10 @@
|
||||
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("操作失败")
|
||||
@@ -279,7 +266,6 @@
|
||||
// 通过监控模版选项 查询监控策略展示项
|
||||
fnGetMonitorTempList(id) {
|
||||
getMonitorTemp(id).then(res => {
|
||||
console.log('res===',res);
|
||||
if (res && res.data) {
|
||||
if (this.resourceType === 'linux') {
|
||||
// cpu 详情
|
||||
@@ -298,6 +284,7 @@
|
||||
}
|
||||
});
|
||||
this.linuxSystem.monitorItem[1].checkList = this.tempContent['linux'].other;
|
||||
this.handleCheckedCitiesChange(null, this.linuxSystem.monitorItem[1]);
|
||||
} else {
|
||||
this.linuxSystem.monitorItem[1].checkList = res.data && res.data['linux'] && res.data['linux'].other || [];
|
||||
}
|
||||
@@ -350,12 +337,27 @@
|
||||
} 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;
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchOther && this.tempContent['switch'].switchOther.length > 0) {
|
||||
this.tempContent['switch'].switchOther.forEach(item => {
|
||||
if (item && item.collectionCycle) {
|
||||
item.time = item.collectionCycle.toString();
|
||||
}
|
||||
});
|
||||
this.monitorTable.nodeOne[0].checkList = this.tempContent['switch'].switchOther;
|
||||
this.handleCheckedCitiesChange(null, this.monitorTable.nodeOne[0]);
|
||||
} else {
|
||||
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;
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchNet && this.tempContent['switch'].switchNet.length > 0) {
|
||||
if (this.tempContent['switch'].switchNet[0] && this.tempContent['switch'].switchNet[0].collectionCycle) {
|
||||
this.monitorTable.nodeTow[0].time = this.tempContent['switch'].switchNet[0].collectionCycle.toString();
|
||||
}
|
||||
}
|
||||
newArr.push(this.monitorTable.nodeTow[0]);
|
||||
if (this.monitorTable.nodeTow[0].time) {
|
||||
this.handleCheckedCitiesChange(this.monitorTable.nodeTow[0].time, this.monitorTable.nodeTow[0]);
|
||||
@@ -364,21 +366,45 @@
|
||||
// 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;
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchModule && this.tempContent['switch'].switchModule.length > 0) {
|
||||
if (this.tempContent['switch'].switchModule[0] && this.tempContent['switch'].switchModule[0].collectionCycle) {
|
||||
this.monitorTable.nodeTow[1].time = this.tempContent['switch'].switchModule[0].collectionCycle.toString();
|
||||
this.handleCheckedCitiesChange(this.monitorTable.nodeTow[1].time, this.monitorTable.nodeTow[1]);
|
||||
}
|
||||
}
|
||||
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;
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchMpu && this.tempContent['switch'].switchMpu.length > 0) {
|
||||
if (this.tempContent['switch'].switchMpu[0] && this.tempContent['switch'].switchMpu[0].collectionCycle) {
|
||||
this.monitorTable.nodeTow[2].time = this.tempContent['switch'].switchMpu[0].collectionCycle.toString();
|
||||
this.handleCheckedCitiesChange(this.monitorTable.nodeTow[2].time, this.monitorTable.nodeTow[2]);
|
||||
}
|
||||
}
|
||||
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;
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchPwr && this.tempContent['switch'].switchPwr.length > 0) {
|
||||
if (this.tempContent['switch'].switchPwr[0] && this.tempContent['switch'].switchPwr[0].collectionCycle) {
|
||||
this.monitorTable.nodeTow[3].time = this.tempContent['switch'].switchPwr[0].collectionCycle.toString();
|
||||
this.handleCheckedCitiesChange(this.monitorTable.nodeTow[3].time, this.monitorTable.nodeTow[3]);
|
||||
}
|
||||
}
|
||||
newArr.push(this.monitorTable.nodeTow[3]);
|
||||
}
|
||||
// tow-5
|
||||
if (res.data && res.data['switch'] && res.data['switch'].switchNet && res.data['switch'].switchNet.length > 0) {
|
||||
if (res.data && res.data['switch'] && res.data['switch'].switchFan && res.data['switch'].switchFan.length > 0) {
|
||||
this.monitorTable.nodeTow[4].checkList = res.data && res.data['switch'] && res.data['switch'].switchFan;
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchFan && this.tempContent['switch'].switchFan.length > 0) {
|
||||
if (this.tempContent['switch'].switchFan[0] && this.tempContent['switch'].switchFan[0].collectionCycle) {
|
||||
this.monitorTable.nodeTow[4].time = this.tempContent['switch'].switchFan[0].collectionCycle.toString();
|
||||
this.handleCheckedCitiesChange(this.monitorTable.nodeTow[4].time, this.monitorTable.nodeTow[4]);
|
||||
}
|
||||
}
|
||||
newArr.push(this.monitorTable.nodeTow[4]);
|
||||
}
|
||||
this.monitorTable.nodeTow = newArr;
|
||||
@@ -387,7 +413,6 @@
|
||||
});
|
||||
},
|
||||
async next(num) {
|
||||
console.log('num==',num,'active====',this.active);
|
||||
if (num === '-1') {
|
||||
this.active--;
|
||||
} else {
|
||||
@@ -469,15 +494,14 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log('params===',this.paramsList);
|
||||
this.synthesisList = Object.assign({}, this.checkAllParams);
|
||||
},
|
||||
// 单个选择按钮
|
||||
handleCheckedCitiesChange(changeVal,iteListAll) {
|
||||
console.log('changeVal==',changeVal, 'iteListAll===',iteListAll, 'cvvvv===','time' in iteListAll);
|
||||
if ('time' in iteListAll) {
|
||||
if (changeVal) {
|
||||
this.checkAllParams[iteListAll.modelName].time = iteListAll && iteListAll.time;
|
||||
this.checkAllParams[iteListAll.modelName]['time'] = iteListAll && iteListAll.time;
|
||||
this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'];
|
||||
} else {
|
||||
delete this.checkAllParams[iteListAll.modelName];
|
||||
}
|
||||
@@ -487,9 +511,7 @@
|
||||
},
|
||||
// 提交
|
||||
submit() {
|
||||
console.log('ruleFormData==',this.ruleFormData);
|
||||
console.log('synthesisList==',this.synthesisList);
|
||||
let params = Object.assign({resourceType: this.resourceType}, {collectionAndIdList: this.paramsList}, this.ruleFormData);
|
||||
let params = Object.assign(this.ruleFormData, {resourceType: this.resourceType}, {collectionAndIdList: this.paramsList});
|
||||
let fnType = addMonitorPolicy;
|
||||
if (this.paramsData && this.paramsData.id) {
|
||||
fnType = updateMonitorPolicy;
|
||||
@@ -501,7 +523,6 @@
|
||||
this.$modal.closeLoading();
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError("操作失败")
|
||||
});
|
||||
},
|
||||
// 返回
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
<div class="app-container pageTopForm">
|
||||
<el-form :model="queryParams" ref="queryRef" size="small" v-show="showSearch" label-width="auto">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="搜索" prop="switchName">
|
||||
<el-form-item label="搜索" prop="queryName">
|
||||
<el-input
|
||||
v-model="queryParams.switchName"
|
||||
placeholder="请输入模版名称/资源组名/监控模版名称"
|
||||
v-model="queryParams.queryName"
|
||||
placeholder="请输入策略名称/资源组名/监控模版名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
@@ -18,7 +18,7 @@
|
||||
placeholder="请选择策略状态"
|
||||
clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.eps_bandwidth_type"
|
||||
v-for="dict in dict.type.policy_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"/>
|
||||
@@ -33,8 +33,8 @@
|
||||
</el-col>
|
||||
</el-form>
|
||||
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
|
||||
<template #tempType="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
|
||||
<template #tempStatus="{ row, column }">
|
||||
<dict-tag :options="dict.type.policy_status" :value="row.status"/>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
@@ -42,11 +42,11 @@
|
||||
|
||||
<script setup>
|
||||
import TableList from "@/components/table/index.vue"
|
||||
import {listMonitorPolicy, delMonitorPolicy} from "@/api/disRevenue/resource"
|
||||
import {listMonitorPolicy, delMonitorPolicy, getMonitorPolicyList} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: 'MonitorStategy',
|
||||
components: {TableList},
|
||||
dicts: ['rm_topology_type','eps_bandwidth_type'],
|
||||
dicts: ['rm_topology_type','eps_bandwidth_type', 'policy_status'],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -62,11 +62,11 @@
|
||||
id: { label: `ID`,width: '50'},
|
||||
policyName: { label: `策略名称`, minWidth: '250', visible: true },
|
||||
description: { label: `描述`,minWidth: '200',visible: false},
|
||||
resourceGroupId: { label: `关联资源组`,minWidth: '150', visible: true },
|
||||
resourceGroupName: { label: `关联资源组`,minWidth: '150', visible: true },
|
||||
includedDevicesName: { label: `包含设备`,minWidth: '200'},
|
||||
templateId: { label: `关联监控模版`,minWidth: '150', visible: true },
|
||||
templateName: { label: `关联监控模版`,minWidth: '150', visible: true },
|
||||
connected: { label: `策略内容`,minWidth: '200'},
|
||||
status: { label: `策略状态`, minWidth: '100', visible: true },
|
||||
status: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
|
||||
deployTime: { label: `下发策略时间`,minWidth: '160'},
|
||||
createTime: { label: `创建时间`,minWidth: '160'},
|
||||
updateTime:{ label: `修改时间`,minWidth: '160'}
|
||||
@@ -85,7 +85,7 @@
|
||||
{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: 'strategy', type: 'text', icon: 'el-icon-sort-down', hasPermi: 'disRevenue:resource:monitorStategy:strategy'},
|
||||
{content: '下发策略', fnCode: 'strategy', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-sort-down', hasPermi: 'disRevenue:resource:monitorStategy:strategy'},
|
||||
{}
|
||||
]
|
||||
}
|
||||
@@ -149,7 +149,8 @@
|
||||
this.$router.push({
|
||||
path:'/disRevenue/resource/monitorStategy/view/index',
|
||||
query:{
|
||||
id: rowData.id
|
||||
id: rowData.id,
|
||||
readonly: true
|
||||
}
|
||||
});
|
||||
break;
|
||||
@@ -165,6 +166,18 @@
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
}).catch(() => {});
|
||||
break;
|
||||
case 'strategy':
|
||||
this.$modal.confirm('是否确认下发策略?').then(() => {
|
||||
this.$modal.loading();
|
||||
getMonitorPolicyList(rowData.id).then(res => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess(res.msg);
|
||||
this.$modal.closeLoading();
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
});
|
||||
}).catch(() => {});
|
||||
break;
|
||||
case 'export':
|
||||
// let dataList = [];
|
||||
// Object.keys(this.columns).forEach(item => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<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: 50px">
|
||||
<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: 50px">
|
||||
<div v-if="item.data && item.data.length > 0">
|
||||
<!-- {{item}}-->
|
||||
<div class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
|
||||
@@ -32,9 +32,10 @@
|
||||
<script setup>
|
||||
import Form from '@/components/form/index.vue';
|
||||
import TableList from "@/components/table/index.vue"
|
||||
import {getMonitorPolicyTemp, getResMonitorGroup} from "@/api/disRevenue/resource"
|
||||
import {getMonitorPolicyTemp, getResMonitorGroup,getMonitorPolicy} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: 'MonitorStategyView',
|
||||
dicts: ['collection_cycle'],
|
||||
components: {Form,TableList},
|
||||
props: {
|
||||
ruleForm: {
|
||||
@@ -50,23 +51,53 @@
|
||||
return {
|
||||
formList: [],
|
||||
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}
|
||||
ruleFormData: {},
|
||||
option: [],
|
||||
resourceType: '',
|
||||
checkAllParams: {},
|
||||
otherListData: {},
|
||||
linuxSystem: {
|
||||
monitorItem: [
|
||||
{firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '', checkList: []},
|
||||
{firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other', 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: []}
|
||||
],
|
||||
},
|
||||
config: {colHiddenCheck: true}
|
||||
// 第二节点 2栏 列显隐信息
|
||||
monitorTable: {
|
||||
nodeOne: [{firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'switchOther', checkList: []}],
|
||||
nodeTow: [
|
||||
{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: []},
|
||||
]},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
renderList() {
|
||||
// 优先用 props 传入的 otherList,其次用接口加载的 otherListData
|
||||
const sourceList = this.paramsData && this.paramsData.readonly ? this.otherListData : this.otherList;
|
||||
// 将 Object 转为 Array(键名作为 key,值作为 item),避免循环顺序问题
|
||||
return sourceList;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.option = this.dict.type.collection_cycle;
|
||||
this.paramsData = this.$route && this.$route.query;
|
||||
console.log('otherList=',this.otherList);
|
||||
if (this.paramsData && this.paramsData.readonly) {
|
||||
this.getFormDataList(this.paramsData.id);
|
||||
} else {
|
||||
this.fnFormList();
|
||||
this.fnResMonitorGroup();
|
||||
this.fnMonitorPolicyTemp();
|
||||
}
|
||||
// this.fnMonitorPolicyTemp();
|
||||
},
|
||||
methods: {
|
||||
fnFormList(){
|
||||
@@ -74,13 +105,95 @@
|
||||
config: {title: '', readonly: true},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
policyName: {label: '策略名称', span: 24, type: 'input', required: true},
|
||||
policyName: {label: '策略名称', span: this.paramsData && this.paramsData.readonly ? 12 : 24, type: 'input', required: true},
|
||||
// templateId: {label: '关联监控模版', span: 24, type: 'select',options: [], eventName: 'change', style: 'display: block;margin: 0 auto;'},
|
||||
resourceGroupId: {label: '关联资源组', span: this.paramsData && this.paramsData.readonly ? 12 : 24, type: 'select', options:[]},
|
||||
updateTime: {label: '修改时间', span: this.paramsData && this.paramsData.readonly ? 12 : 24, type: 'date'},
|
||||
deployTime: {label: '下发策略时间', span: 12, type: 'date',hidden: !(this.resourceType === 'switch' && this.paramsData && this.paramsData.readonly)},
|
||||
includedDevicesName: {label: '包含设备', span: 24, type: 'input', hidden: !(this.resourceType === 'switch' && this.paramsData && this.paramsData.readonly)},
|
||||
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:[]}
|
||||
}
|
||||
}];
|
||||
},
|
||||
// 获取详情
|
||||
getFormDataList(id) {
|
||||
getMonitorPolicy(id).then(val => {
|
||||
if (val && val.data) {
|
||||
this.ruleFormData = val.data.policy;
|
||||
this.resourceType = val.data.resourceType;
|
||||
this.fnFormList();
|
||||
this.fnResMonitorGroup();
|
||||
this.dataProcess();
|
||||
let obj = {};
|
||||
this.option.forEach(item => {
|
||||
obj[item.value] = item.label;
|
||||
});
|
||||
if (val.data.resourceType === 'linux') {
|
||||
Object.keys(this.checkAllParams).forEach(item => {
|
||||
if (item === 'other' && val.data['linux'] && val.data['linux'][item] && val.data['linux'][item].length > 0) {
|
||||
let otherTimes = [];
|
||||
val.data['linux'] && val.data['linux'][item].forEach(timeVal => {
|
||||
if (timeVal && timeVal.collectionCycle) {
|
||||
timeVal['timeLabel'] = obj[timeVal.collectionCycle.toString()];
|
||||
otherTimes.push(timeVal);
|
||||
}
|
||||
});
|
||||
this.checkAllParams[item].data = otherTimes || [];
|
||||
} else {
|
||||
if(item && val.data['linux'][item] && val.data['linux'][item].length > 0) {
|
||||
if (val.data['linux'][item][0] && val.data['linux'][item][0].collectionCycle) {
|
||||
this.checkAllParams[item]['timeLabel'] = obj[val.data['linux'][item][0].collectionCycle.toString()];
|
||||
this.checkAllParams[item].data = val.data['linux'][item];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
Object.keys(this.checkAllParams).forEach(item => {
|
||||
if (item === 'switchOther' && val.data['switch'] && val.data['switch'][item] && val.data['switch'][item].length > 0) {
|
||||
let switchOtherTime = [];
|
||||
val.data['switch'] && val.data['switch'][item].forEach(timeVal => {
|
||||
if (timeVal && timeVal.collectionCycle) {
|
||||
timeVal['timeLabel'] = obj[timeVal.collectionCycle.toString()];
|
||||
switchOtherTime.push(timeVal);
|
||||
}
|
||||
});
|
||||
this.checkAllParams[item].data = switchOtherTime || [];
|
||||
} else {
|
||||
if(item && val.data['switch'][item] && val.data['switch'][item].length > 0) {
|
||||
if (val.data['switch'][item][0] && val.data['switch'][item][0].collectionCycle) {
|
||||
this.checkAllParams[item]['timeLabel'] = obj[val.data['switch'][item][0].collectionCycle.toString()];
|
||||
this.checkAllParams[item].data = val.data['switch'][item];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
this.otherListData = {...this.checkAllParams};
|
||||
}
|
||||
}).catch(() => {
|
||||
// this.$modal.msgError("操作失败")
|
||||
});
|
||||
},
|
||||
// 数据处理
|
||||
dataProcess() {
|
||||
let typeVal = {};
|
||||
if (this.resourceType === 'linux') {
|
||||
typeVal = this.linuxSystem;
|
||||
} else {
|
||||
typeVal = this.monitorTable;
|
||||
}
|
||||
Object.keys(typeVal).forEach(res => {
|
||||
typeVal[res].forEach(item => {
|
||||
this.checkAllParams[item.modelName] = {
|
||||
firstTitle: item.firstTitle,
|
||||
secondTitle: item.secondTitle,
|
||||
lastTitle: item.title,
|
||||
data: []
|
||||
};
|
||||
});
|
||||
})
|
||||
},
|
||||
// 资源组
|
||||
fnResMonitorGroup(){
|
||||
getResMonitorGroup().then(res => {
|
||||
@@ -91,18 +204,18 @@
|
||||
}
|
||||
});
|
||||
},
|
||||
// 监控模版
|
||||
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});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// // 监控模版
|
||||
// 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");
|
||||
|
||||
@@ -358,6 +358,32 @@
|
||||
this.$refs[`tableRef_web`][0].defaultSelectRows(tabDefSel);
|
||||
},500);
|
||||
}
|
||||
} else {
|
||||
if (this.paramsData && this.paramsData.id) {
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchNet && this.tempContent['switch'].switchNet.length > 0) {
|
||||
this.monitorTable.nodeTow[0].tableList = this.tempContent['switch'].switchNet;
|
||||
setTimeout(() => {
|
||||
this.$refs[`tableRef_web1`][0].selectAllRows();
|
||||
},500);
|
||||
} else {
|
||||
this.monitorTable.nodeTow[0].tableList = res.data.switchNet;
|
||||
}
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchModule && this.tempContent['switch'].switchModule.length > 0) {
|
||||
this.monitorTable.nodeTow[1].tableList = this.tempContent['switch'].switchModule;
|
||||
setTimeout(() => {
|
||||
this.$refs[`tableRef_web2`][0].selectAllRows();
|
||||
},500);
|
||||
} else {
|
||||
this.monitorTable.nodeTow[1].tableList = res.data.switchModule;
|
||||
}
|
||||
if (this.tempContent['switch'] && this.tempContent['switch'].switchFan && this.tempContent['switch'].switchFan.length > 0) {
|
||||
this.monitorTable.nodeTow[2].tableList = this.tempContent['switch'].switchFan;
|
||||
setTimeout(() => {
|
||||
this.$refs[`tableRef_web3`][0].selectAllRows();
|
||||
},500);
|
||||
} else {
|
||||
this.monitorTable.nodeTow[2].tableList = res.data.switchFan;
|
||||
}
|
||||
} else {
|
||||
this.monitorTable.nodeTow[0].tableList = res.data.switchNet;
|
||||
this.monitorTable.nodeTow[1].tableList = res.data.switchModule;
|
||||
@@ -369,6 +395,7 @@
|
||||
},500);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
async next(num) {
|
||||
|
||||
@@ -149,7 +149,7 @@
|
||||
},
|
||||
created() {
|
||||
this.paramsData = this.$route && this.$route.query;
|
||||
if (this.paramsData && this.paramsData.id) {
|
||||
if (this.paramsData && this.paramsData.readonly) {
|
||||
this.getFormDataList(this.paramsData.id);
|
||||
}
|
||||
this.fnFormList();
|
||||
|
||||
@@ -1,69 +1,84 @@
|
||||
<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-form :model="form" ref="form" label-width="130px" class="dynamic-form">
|
||||
<el-col :span="14">
|
||||
<el-form-item :label="`源文件1地址格式`" prop="sourceFilePathType" :rules="[{ required: true, message: '请选择地址格式', trigger: 'change' }]">
|
||||
<el-radio-group v-model="form.sourceFilePathType" :disabled="readonly">
|
||||
<!-- <el-radio label="platform">平台文件地址</el-radio>-->
|
||||
<el-radio label="1">外网HTTP(S)</el-radio>
|
||||
</el-radio-group>
|
||||
<div class="tip">注意:当文件大小超过100M时,请选择【外网HTTP(S)】地址格式</div>
|
||||
<div class="error-tip" v-if="source.sizeError">您选择的文件已经超过100M,请更改文件地址格式选择</div>
|
||||
<!-- <div class="error-tip" v-if="source.sizeError">您选择的文件已经超过100M,请更改文件地址格式选择</div>-->
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
<!-- 添加源文件按钮 -->
|
||||
<el-col :span="10" style="vertical-align: top;" v-if="!readonly">
|
||||
<el-form-item style="margin-left: -130px;">
|
||||
<el-button type="primary" @click="addSource" class="add-btn">添加</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 源文件地址 -->
|
||||
<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-col :span="12">
|
||||
<el-form-item :label="`源文件1地址`" prop="sourceFilePath" :rules="[{ required: true, message: '请输入外网地址', trigger: 'change' }]">
|
||||
<el-input v-model="form.sourceFilePath" :disabled="readonly" placeholder="请输入外网地址" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 删除按钮 - 至少保留一个源文件 -->
|
||||
<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 v-for="(source, index) in form.sources" :key="index" class="source-item">
|
||||
<!-- 源文件地址格式 -->
|
||||
<el-col :span="14">
|
||||
<el-form-item :label="`源文件${index + 2}地址格式`" prop="sourceFilePathType" :rules="[{ required: true, message: '请选择地址格式', trigger: 'change' }]">
|
||||
<el-radio-group v-model="source.sourceFilePathType" :disabled="readonly">
|
||||
<!-- <el-radio label="platform">平台文件地址</el-radio>-->
|
||||
<el-radio label="1">外网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-col>
|
||||
<!-- 添加源文件按钮 -->
|
||||
<el-col :span="10" v-if="!readonly">
|
||||
<el-form-item style="margin-left: -130px;">
|
||||
<el-button type="danger" @click="removeSource(index)" class="delete-btn">删除</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- 源文件地址 -->
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="`源文件${index + 2}地址`" prop="sourceFilePath" :rules="[{ required: true, message: '请输入外网地址', trigger: 'change' }]">
|
||||
<el-input v-model="source.sourceFilePath" :disabled="readonly" placeholder="请输入外网地址" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
|
||||
<!-- 添加源文件按钮 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addSource" class="add-btn">添加源文件</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-col :span="24">
|
||||
<!-- 目标目录 -->
|
||||
<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 label="目标目录" prop="targetDirectory">
|
||||
<el-input v-model="form.targetDirectory" :disabled="readonly" placeholder="请输入目标目录路径" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<!-- 命令内容部分 -->
|
||||
<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>
|
||||
{{index + 1}}. <el-input v-model="cmd.commandContent" :disabled="readonly" class="ml5" placeholder="请输入命令" clearable></el-input>
|
||||
<el-button type="primary" @click="addCommand" v-if="readonly ? !readonly : index === 0" class="command-btn">添加</el-button>
|
||||
<el-button type="danger" @click="removeCommand(index)" v-if="readonly ? !readonly : index >= 1" class="command-btn">删除</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<!-- 执行方式 -->
|
||||
<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-form-item label="执行方式" prop="executionMethod">
|
||||
<el-select v-model="form.executionMethod" placeholder="请选择执行方式" :disabled="readonly" clearable>
|
||||
<el-option v-for="dict in dict.type.policy_method" :key="dict.value" :label="dict.label" :value="dict.value"/>
|
||||
</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 label="定时时间" v-if="form.executionMethod === '1'" prop="scheduledTime" :rules="[{ required: true, message: '请选择定时时间', trigger: 'change' }]">
|
||||
<el-date-picker v-model="form.scheduledTime" :disabled="readonly" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" style="width: 100%;"></el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
@@ -72,36 +87,46 @@
|
||||
<script>
|
||||
export default {
|
||||
name: 'DynamicForm',
|
||||
dicts: ['policy_method'],
|
||||
props: {
|
||||
formData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
sourceFilePathType: '1',
|
||||
sources: [], // 源文件数组,初始为空
|
||||
commands: [{commandContent: ''}], // 命令内容数组
|
||||
})
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听 props 变化,实时更新内部数据
|
||||
formData: {
|
||||
immediate: true, // 初始化时立即执行一次
|
||||
handler(newVal) {
|
||||
if (newVal && typeof newVal === 'object' && Object.keys(newVal).length === 0) {
|
||||
this.form = {sourceFilePathType: '1', sources: [], commands: [{commandContent: ''}]};
|
||||
} else {
|
||||
this.form = newVal;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
// 源文件数组,初始包含两个源文件
|
||||
sources: [
|
||||
{
|
||||
format: '', // 地址格式:platform/external
|
||||
address: '', // 文件地址
|
||||
sizeError: false // 文件大小错误标记
|
||||
},
|
||||
{
|
||||
format: '',
|
||||
address: '',
|
||||
sizeError: false
|
||||
}
|
||||
],
|
||||
targetDir: '', // 目标目录
|
||||
commands: [''], // 命令内容数组
|
||||
executionMode: '', // 执行方式
|
||||
scheduleTime: '' // 定时时间
|
||||
}
|
||||
form: this.formData
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 添加源文件
|
||||
addSource() {
|
||||
this.form.sources.push({
|
||||
format: '',
|
||||
address: '',
|
||||
sizeError: false
|
||||
sourceFilePathType: '1',
|
||||
sourceFilePath: '',
|
||||
// sizeError: false
|
||||
});
|
||||
},
|
||||
|
||||
@@ -112,7 +137,7 @@
|
||||
|
||||
// 添加命令
|
||||
addCommand() {
|
||||
this.form.commands.push('');
|
||||
this.form.commands.push({commandContent: ''});
|
||||
},
|
||||
|
||||
// 删除命令
|
||||
@@ -122,27 +147,31 @@
|
||||
|
||||
// 提交表单
|
||||
submitForm() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs.form.validate((valid) => {
|
||||
console.log('valid===',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('存在文件大小与地址格式不匹配的问题,请检查');
|
||||
}
|
||||
resolve(this.form);
|
||||
// // 在这里可以添加自定义验证逻辑,例如检查大文件是否使用了正确的地址格式
|
||||
// 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('表单验证失败,请检查必填项');
|
||||
reject(new Error('验证失败')); // 失败时返回错误
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
// 重置表单
|
||||
@@ -172,14 +201,14 @@
|
||||
</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);
|
||||
}
|
||||
/*.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;
|
||||
@@ -195,11 +224,11 @@
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.source-item {
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px dashed #e8e8e8;
|
||||
}
|
||||
/*.source-item {*/
|
||||
/* padding-bottom: 15px;*/
|
||||
/* margin-bottom: 15px;*/
|
||||
/* border-bottom: 1px dashed #e8e8e8;*/
|
||||
/*}*/
|
||||
|
||||
.source-item:last-child {
|
||||
border-bottom: none;
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="app-container pageTopForm">
|
||||
<el-form :model="queryParams" ref="queryRef" size="small" v-show="showSearch" label-width="auto">
|
||||
<el-col :span="8">
|
||||
<el-form-item label="策略名称" prop="switchName">
|
||||
<el-form-item label="策略名称" prop="policyName">
|
||||
<el-input
|
||||
v-model="queryParams.switchName"
|
||||
v-model="queryParams.policyName"
|
||||
placeholder="请输入策略名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
@@ -12,13 +12,13 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item label="策略状态" prop="bandwidthType">
|
||||
<el-form-item label="策略状态" prop="policyStatus">
|
||||
<el-select
|
||||
v-model="queryParams.bandwidthType"
|
||||
v-model="queryParams.policyStatus"
|
||||
placeholder="请选择策略状态"
|
||||
clearable>
|
||||
<el-option
|
||||
v-for="dict in dict.type.eps_bandwidth_type"
|
||||
v-for="dict in dict.type.policy_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"/>
|
||||
@@ -34,7 +34,7 @@
|
||||
</el-form>
|
||||
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
|
||||
<template #tempType="{ row, column }">
|
||||
<dict-tag :options="dict.type.rm_topology_type" :value="row.connectedDeviceType"/>
|
||||
<dict-tag :options="dict.type.policy_status" :value="row.policyStatus"/>
|
||||
</template>
|
||||
</TableList>
|
||||
</div>
|
||||
@@ -42,11 +42,11 @@
|
||||
|
||||
<script setup>
|
||||
import TableList from "@/components/table/index.vue"
|
||||
import {listMonitorTemp, delMonitorTemp} from "@/api/disRevenue/resource"
|
||||
import {listPolicy, delPolicy} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: 'ServerScript',
|
||||
components: {TableList},
|
||||
dicts: ['rm_topology_type','eps_bandwidth_type'],
|
||||
dicts: ['policy_status'],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
@@ -60,17 +60,17 @@
|
||||
// 列显隐信息
|
||||
columns: {
|
||||
id: { label: `ID`,width: '50'},
|
||||
switchName: { label: `策略名称`, minWidth: '250', visible: true },
|
||||
state: { label: `执行方式`,minWidth: '200',visible: true},
|
||||
interfaceName: { label: `关联资源组`,minWidth: '150', visible: true },
|
||||
serverName: { label: `包含设备`,minWidth: '200', visible: true},
|
||||
type: { label: `策略状态`, minWidth: '100', visible: true },
|
||||
connectedDeviceType: { label: `源文件路径`,minWidth: '150'},
|
||||
connected: { label: `目标目录`,minWidth: '200'},
|
||||
content: { label: `命令内容`,minWidth: '200'},
|
||||
time: { label: `定时时间`,minWidth: '200'},
|
||||
conType: { label: `下发策略时间`,minWidth: '160'},
|
||||
switchSn: { label: `描述`,minWidth: '200'},
|
||||
policyName: { label: `策略名称`, minWidth: '250', visible: true },
|
||||
executionMethod: { label: `执行方式`,minWidth: '200',visible: true},
|
||||
resourceGroupId: { label: `关联资源组`,minWidth: '150', visible: true },
|
||||
includedDevicesName: { label: `包含设备`,minWidth: '200', visible: true},
|
||||
policyStatus: { label: `策略状态`, minWidth: '100', slotName: 'tempType', visible: true },
|
||||
sourceFilePath: { label: `源文件路径`,minWidth: '150'},
|
||||
targetDirectory: { label: `目标目录`,minWidth: '200'},
|
||||
commandContent: { label: `命令内容`,minWidth: '200'},
|
||||
scheduledTime: { label: `定时时间`,minWidth: '200'},
|
||||
deployTime: { label: `下发策略时间`,minWidth: '160'},
|
||||
description: { label: `描述`,minWidth: '200'},
|
||||
createTime: { label: `创建时间`,minWidth: '160'},
|
||||
updateTime:{ label: `修改时间`,minWidth: '160'}
|
||||
},
|
||||
@@ -87,7 +87,7 @@
|
||||
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'},
|
||||
{content: '删除', fnCode: 'delete', type: 'text', icon: 'el-icon-delete', hasPermi: 'disRevenue:resource:monitorStategy:detele'},
|
||||
]
|
||||
@@ -102,7 +102,7 @@
|
||||
/** 查询列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listMonitorTemp(this.queryParams).then(response => {
|
||||
listPolicy(this.queryParams).then(response => {
|
||||
this.tableList = response.rows;
|
||||
this.queryParams.total = response.total;
|
||||
this.loading = false;
|
||||
@@ -145,7 +145,8 @@
|
||||
this.$router.push({
|
||||
path:'/disRevenue/resource/serverScript/view',
|
||||
query:{
|
||||
id: rowData.id
|
||||
id: rowData.id,
|
||||
readonly: true
|
||||
}
|
||||
});
|
||||
break;
|
||||
@@ -157,7 +158,7 @@
|
||||
delList = selectChange;
|
||||
}
|
||||
this.$modal.confirm('是否确认删除该数据?').then(function() {
|
||||
return delMonitorTemp(delList)
|
||||
return delPolicy(delList)
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.$modal.msgSuccess("删除成功")
|
||||
@@ -172,7 +173,7 @@
|
||||
// });
|
||||
// this.download("/system/monitorStategy/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
|
||||
let paramsList = Object.assign({}, this.queryParams,rowData);
|
||||
this.download("system/serverScript/export", paramsList, `资源监控策略_${new Date().getTime()}.xlsx`, null, 'json');
|
||||
this.download("rocketmq/policy/export", paramsList, `服务器脚本策略_${new Date().getTime()}.xlsx`, null, 'json');
|
||||
break;
|
||||
default:
|
||||
}
|
||||
|
||||
@@ -14,15 +14,11 @@
|
||||
</div>
|
||||
<!-- active:2 -->
|
||||
<div v-show="active === 1">
|
||||
<Form v-for="item of formListTow" ref="formTowRef" :formList="[item]" :ruleFormData="item.ruleFormData" :config="item.config" @fnClick="callback">
|
||||
<template v-slot:btnType="scope">
|
||||
<el-button type="primary" @click="btnClick(scope)">{{scope.field.btnName}}</el-button>
|
||||
</template>
|
||||
</Form>
|
||||
<DynamicForm ref="dyncForm" :formData="ruleFormDataTow"></DynamicForm>
|
||||
</div>
|
||||
<!-- active:3 -->
|
||||
<div v-show="active === 2">
|
||||
<!-- <MonitorStategyView :ruleForm="ruleFormData" :otherList="synthesisList"></MonitorStategyView>-->
|
||||
<DynamicForm :formData="ruleFormDataTow" :readonly="true"></DynamicForm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,10 +32,11 @@
|
||||
<script setup>
|
||||
import Form from '@/components/form/index.vue';
|
||||
import TableList from "@/components/table/index.vue"
|
||||
// import MonitorStategyView from './view'
|
||||
import DynamicForm from './dynamicForm'
|
||||
import {getPolicy, addPolicy, updatePolicy, getResMonitorGroup, resNameList} from "@/api/disRevenue/resource"
|
||||
export default {
|
||||
name: 'ServerScriptDetails',
|
||||
components: {Form, TableList},
|
||||
components: {Form, TableList, DynamicForm},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
@@ -51,83 +48,74 @@
|
||||
config: {
|
||||
buttonGroup: []
|
||||
},
|
||||
formList: [{
|
||||
config: {title: '', colSpan: 'disBlock m0Auto'},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
switchName: {label: '策略名称', span: 12, type: 'input', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
|
||||
serverPort: {label: '描述', span: 12, type: 'textarea'},
|
||||
monitorTemp: {label: '关联资源组', span: 12, type: 'select'},
|
||||
resourceGroup: {label: '包含设备', span: 12, type: 'select', multiple: true}
|
||||
}
|
||||
}],
|
||||
formList: [],
|
||||
// 第二节点 1栏
|
||||
formListTow: [],
|
||||
ruleFormDataTow: {},
|
||||
addNum: 0
|
||||
groupFormList: {},
|
||||
includedDevicesList: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.paramsData = this.$route && this.$route.query;
|
||||
// console.log('paramsData===',this.paramsData);
|
||||
if (this.paramsData && this.paramsData.id) {
|
||||
this.getFormDataList(this.paramsData.id);
|
||||
}
|
||||
this.formRender();
|
||||
this.fnResMonitorGroup();
|
||||
this.getResNameList();
|
||||
},
|
||||
methods: {
|
||||
formRender(){
|
||||
this.formListTow = [
|
||||
{
|
||||
config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
|
||||
this.formList = [{
|
||||
config: {title: '', colSpan: 'disBlock m0Auto'},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
localAddress: {label: '源文件1地址格式', span: 12, type: 'radio', required: true,
|
||||
warningTitle: '注意:当文件大小超过100M时,请选择【外网HTTP(S)】地址格式',
|
||||
options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
|
||||
btn: {label: '', span: 12, slotName: 'btnType', btnName: '添加', btnType: 'add'},
|
||||
serverPort: {label: '源文件1地址', span: 12, type: 'select'}
|
||||
},
|
||||
ruleFormData: {
|
||||
id: '',
|
||||
localAddress: '',
|
||||
serverPort: ''
|
||||
policyName: {label: '策略名称', span: 12, type: 'input', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
|
||||
description: {label: '描述', span: 12, type: 'textarea'},
|
||||
resourceGroupId: {label: '关联资源组', span: 12, type: 'select', options:[]},
|
||||
includedDevicesId: {label: '包含设备', span: 12, type: 'select', options:[], multiple: true}
|
||||
}
|
||||
},{
|
||||
config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
fileAddress: {label: '目标目录', span: 12, type: 'input'},
|
||||
}];
|
||||
},
|
||||
ruleFormData: {
|
||||
id: '',
|
||||
fileAddress: ''
|
||||
// 资源组
|
||||
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});
|
||||
});
|
||||
}
|
||||
},{
|
||||
config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
content: {label: '命令内容1', span: 24, type: 'input'},
|
||||
// btn: {label: '添加', span: 12, type: 'btn'},
|
||||
});
|
||||
},
|
||||
ruleFormData: {
|
||||
id: '',
|
||||
content: ''
|
||||
getResNameList() {
|
||||
resNameList().then(val => {
|
||||
if (val) {
|
||||
this.formList[0].controls['includedDevicesId']['options']= val && val.map(item => {
|
||||
this.includedDevicesList[item.id] = item;
|
||||
return Object.assign({label: item.resourceName, value: item.id});
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("操作失败")
|
||||
});
|
||||
},
|
||||
{
|
||||
config: {title: '', key: Math.floor(Math.random() * 9000),buttonGroup: []},
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
type: {label: '执行方式', span: 24, type: 'select'},
|
||||
date: {label: '定时时间', span: 12, type: 'date'},
|
||||
time: {label: '', span: 12, type: 'time'},
|
||||
},
|
||||
ruleFormData: {
|
||||
id: '',
|
||||
type: '',
|
||||
date: '',
|
||||
time: ''
|
||||
// 获取详情
|
||||
getFormDataList(id) {
|
||||
getPolicy(id).then(val => {
|
||||
// console.log('val==',val);
|
||||
if (val && val.data) {
|
||||
val.data.includedDevicesId = val.data.includedDevicesId.split(',').map(id => Number(id));
|
||||
this.ruleFormData = val.data;
|
||||
// this.resourceType = val.data.resourceType;
|
||||
// this.tempContent[val.data.resourceType] = val.data[val.data.resourceType];
|
||||
}
|
||||
}
|
||||
];
|
||||
}).catch(() => {
|
||||
// this.$modal.msgError("操作失败")
|
||||
});
|
||||
},
|
||||
async next(num) {
|
||||
// console.log('num==',num, 'active==',this.active);
|
||||
if (num === '-1') {
|
||||
this.active--;
|
||||
} else {
|
||||
@@ -136,6 +124,9 @@
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.active === 1) {
|
||||
this.formDataTow();
|
||||
}
|
||||
this.active++;
|
||||
}
|
||||
},
|
||||
@@ -147,6 +138,14 @@
|
||||
// 3. 操作form(如验证)
|
||||
formValid.validate((valid) => {
|
||||
if (valid) {
|
||||
formValid.model['includedDevicesName'] = [];
|
||||
if (formValid.model && formValid.model.includedDevicesId && formValid.model.includedDevicesId.length > 0) {
|
||||
formValid.model.includedDevicesId.forEach(item => {
|
||||
formValid.model['includedDevicesName'].push(this.includedDevicesList[item].resourceName);
|
||||
});
|
||||
}
|
||||
formValid.model['includedDevicesId'] = formValid.model['includedDevicesId'].join();
|
||||
formValid.model['includedDevicesName'] = formValid.model['includedDevicesName'].join();
|
||||
this.ruleFormData = formValid.model;
|
||||
resolve(true);
|
||||
} else {
|
||||
@@ -155,48 +154,55 @@
|
||||
});
|
||||
});
|
||||
},
|
||||
// 插槽按钮操作
|
||||
btnClick(row){
|
||||
const { field } = row;
|
||||
// 找到当前点击项在 formListTow 中的索引
|
||||
const currentIndex = this.formListTow.findIndex(
|
||||
item => item.config.key === field.parentKey // 需在子组件传递当前项的key
|
||||
);
|
||||
console.log('field===',field,'currentIndex===',currentIndex);
|
||||
if (field.btnType === 'add') {
|
||||
this.addNum++;
|
||||
const newKey = Math.floor(Math.random() * 9000);
|
||||
let slotForm = {
|
||||
config: {title: '', key: newKey,buttonGroup: []},
|
||||
index: this.addNum,
|
||||
controls: {
|
||||
id: {label: 'ID',hidden: true},
|
||||
localAddress: {label: `源文件${currentIndex + 1 + this.addNum}地址格式`, span: 12, type: 'radio', required: true,
|
||||
warningTitle: '注意:当文件大小超过100M时,请选择【外网HTTP(S)】地址格式', options: [{value: '1', label: '平台文件地址'}, {value: '2', label: '外网HTTP(s)'}]},
|
||||
btn: {label: '', span: 12, slotName: 'btnType', btnName: '删除', btnType: 'delete', parentKey: newKey},
|
||||
serverPort: {label: `源文件${currentIndex + 1 + this.addNum}地址`, span: 12, type: 'input'}
|
||||
},
|
||||
ruleFormData: {
|
||||
localAddress: '',
|
||||
serverPort: ''
|
||||
// 第二节点下的form值
|
||||
formDataTow() {
|
||||
let newFormVal = {commandContent: [], sourceFilePath: [], sourceFilePathType: []};
|
||||
this.$refs.dyncForm.submitForm().then(formData => {
|
||||
this.ruleFormDataTow = formData;
|
||||
newFormVal['sourceFilePath'].push(formData.sourceFilePath);
|
||||
newFormVal['sourceFilePathType'].push(formData.sourceFilePathType);
|
||||
if (formData && formData.commands && formData.commands.length > 0) {
|
||||
formData.commands.forEach(item => {
|
||||
newFormVal['commandContent'].push(item.commandContent);
|
||||
});
|
||||
}
|
||||
};
|
||||
this.formListTow.splice(currentIndex + 1 + this.addNum, 0, slotForm);
|
||||
} else if (row && row.field.btnType === 'delete'){
|
||||
// this.addNum--;
|
||||
this.formListTow = this.formListTow.filter(
|
||||
item => item.config.key !== field.parentKey
|
||||
);
|
||||
if (formData && formData.sources && formData.sources.length > 0) {
|
||||
formData.sources.forEach(item => {
|
||||
newFormVal['sourceFilePath'].push(item.sourceFilePath);
|
||||
newFormVal['sourceFilePathType'].push(item.sourceFilePathType);
|
||||
});
|
||||
}
|
||||
newFormVal['sourceFilePath'] = newFormVal['sourceFilePath'].join();
|
||||
newFormVal['sourceFilePathType'] = newFormVal['sourceFilePathType'].join();
|
||||
newFormVal['commandContent'] = newFormVal['commandContent'].join();
|
||||
this.groupFormList = Object.assign({},formData, newFormVal);
|
||||
// console.log('vvvv=====',formData,'newFormVal====',this.groupFormList);
|
||||
}).catch(error => {
|
||||
// 处理验证失败的情况
|
||||
console.error('表单提交失败:', error);
|
||||
});
|
||||
},
|
||||
// 提交
|
||||
submit() {
|
||||
console.log('ruleFormData==',this.ruleFormData);
|
||||
console.log('synthesisList==',this.synthesisList);
|
||||
let params = Object.assign({}, this.ruleFormData, this.groupFormList);
|
||||
// console.log('params==',params);
|
||||
// return;
|
||||
let fnType = addPolicy;
|
||||
if (this.paramsData && this.paramsData.id) {
|
||||
fnType = updatePolicy;
|
||||
}
|
||||
this.$modal.loading();
|
||||
fnType(params).then(response => {
|
||||
this.$modal.msgSuccess(response.msg);
|
||||
this.$router.push("/resource/serverScript");
|
||||
this.$modal.closeLoading();
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
});
|
||||
},
|
||||
// 返回
|
||||
goBack() {
|
||||
this.$router.push({path:'/resource/monitorStategy'});
|
||||
this.$router.push({path:'/resource/serverScript'});
|
||||
},
|
||||
// 监听事件
|
||||
callback(result, dataVal, formVal) {
|
||||
|
||||
Reference in New Issue
Block a user