449 lines
20 KiB
Vue
449 lines
20 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<div style="display: flex; justify-content: center;">
|
||
<div class="w100">
|
||
<Form ref="formRef" :formList="formList" :config="{labelWidth: '140px',buttonGroup: []}" :ruleFormData="ruleFormData" @fnClick="callback"></Form>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 style="padding: 15px 10px;border-bottom: 1px solid #ddd;">策略内容</h3>
|
||
<template v-if="!(paramsData && paramsData.readonly)">
|
||
<el-tabs v-model="activeName" class="plr-20">
|
||
<el-tab-pane label="监控项" name="first">
|
||
<el-collapse v-model="activeTwoName">
|
||
<el-collapse-item v-for="(item,key,index) of firstData" :title="item.title" :name="index">
|
||
<template v-if="key === 'cpu'">
|
||
<template slot="title">
|
||
<span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
|
||
<div style="font-size: 13px;margin-left: 10%;">
|
||
采集周期：<el-select v-model="item['time']" id="selDisabled" :disabled="key === 'switchNet' ? true : false" clearable placeholder="请选择">
|
||
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<div class="plr-50">
|
||
<div v-for="city of item.checkList" class="w50 mt10 mb10 disInlineBlock fontSize15">
|
||
<span style="width: 250px" class="disInlineBlock">{{city.metricKey}}</span>
|
||
<span>{{city.metricName}}</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<template slot="title">
|
||
<span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
|
||
<div style="font-size: 13px;margin-left: 10%;">
|
||
采集周期：<el-select v-model="item.groupTime" id="selDisabled" clearable placeholder="请选择" @change="handleChangeTime(item)">
|
||
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<div>
|
||
<div class="plr-50">
|
||
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
|
||
<div class="disInlineBlock w50">
|
||
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
|
||
<span>{{city.metricName}}</span>
|
||
</div>
|
||
<div class="disInlineBlock" style="color: #606266">
|
||
采集周期：<el-select v-model="city['time']" placeholder="请选择" clearable>
|
||
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="自动发现项" name="second">
|
||
<el-collapse v-model="activeTwoName">
|
||
<el-collapse-item v-for="(item,key,index) of secondData" :title="item.title" :name="index">
|
||
<template slot="title">
|
||
<span class="disInlineBlock" style="width: 15%;">{{item.title}}</span>
|
||
<div style="font-size: 13px;margin-left: 10%;">
|
||
采集周期：<el-select v-model="item['time']" id="selDisabled" :disabled="key === 'net' ? true : false" clearable placeholder="请选择">
|
||
<el-option v-for="val in timeOptions" :key="val.value" :label="val.label" :value="val.value"></el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<div class="plr-50">
|
||
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
|
||
<span style="width: 300px" class="disInlineBlock">{{city.metricKey}}</span>
|
||
<span>{{city.metricName}}</span>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</template>
|
||
<template v-else>
|
||
<el-collapse v-model="activeTwoName">
|
||
<template v-for="(item,key,index) of firstData">
|
||
<el-collapse-item v-if="item.checkList && item.checkList.length > 0" :title="'监控项'" :name="index">
|
||
<template slot="title">
|
||
<span><span v-if="ruleFormData.priority === '1'">监控项>></span>{{item.title}}</span>
|
||
</template>
|
||
<div v-if="key === 'cpu'" class="plr-50">
|
||
<div class="plr-50">
|
||
<div>当前所有子项的采集周期均为{{item.timeLabel}}</div>
|
||
<div v-for="city of item.checkList" class="w50 mt10 mb10 disInlineBlock fontSize15">
|
||
<span style="width: 250px" class="disInlineBlock">{{city.metricKey}}</span>
|
||
<span>{{city.metricName}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<div class="plr-50">
|
||
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
|
||
<div class="disInlineBlock w50">
|
||
<span style="width: 200px" class="disInlineBlock">{{ city.metricKey }}</span>
|
||
<span>{{city.metricName}}</span>
|
||
</div>
|
||
<div class="disInlineBlock" style="color: #606266">
|
||
采集周期为{{city.timeLabel}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</template>
|
||
<template v-for="(item,key,index) of secondData">
|
||
<el-collapse-item v-if="item.checkList && item.checkList.length > 0" :title="item.title" :name="index">
|
||
<template slot="title">
|
||
<span>自动发现项>>{{item.title}}</span>
|
||
</template>
|
||
<div class="plr-50">
|
||
当前所有子项的采集周期均为{{item.timeLabel}}
|
||
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
|
||
<span style="width: 300px" class="disInlineBlock">{{city.metricKey}}</span>
|
||
<span>{{city.metricName}}</span>
|
||
</div>
|
||
</div>
|
||
</el-collapse-item>
|
||
</template>
|
||
</el-collapse>
|
||
</template>
|
||
</div>
|
||
<el-button v-if="!(paramsData && paramsData.readonly)" style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
|
||
<el-button v-if="!(paramsData && paramsData.readonly)" type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</el-button>
|
||
<el-button v-if="paramsData && paramsData.readonly" style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">返回</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import Form from '@/components/form/index.vue';
|
||
import {addResourcePolicy, updateResourcePolicy,getMonitorTempList, getMonitorPolicy, listAllSwitchName, getResMonitorGroup} from "@/api/disRevenue/resource"
|
||
export default {
|
||
name: "LinuxMonitorStratEdit",
|
||
components: {Form},
|
||
dicts: ['collection_cycle', 'policy_status'],
|
||
props: {
|
||
open: {
|
||
type: String,
|
||
default: () => {}
|
||
},
|
||
dialogRowData: {
|
||
type: Object,
|
||
default: (() => {})
|
||
}
|
||
},
|
||
watch: {
|
||
open: {
|
||
handler(val) {
|
||
if (val === 'type_true') {
|
||
this.paramsData = {};
|
||
this.$set(this.ruleFormData, 'deployDevice', this.dialogRowData.clientId);
|
||
} else if (val === 'type_false') {
|
||
// 清空form
|
||
this.$refs['formRef'].$refs.ruleForm.resetFields();
|
||
}
|
||
},
|
||
deep: true,
|
||
immediate: true
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
activeName: 'first',
|
||
firstChangeTime: '',
|
||
activeTwoName: [0,1,2,3,4,5],
|
||
timeOptions: [],
|
||
ruleFormData: {},
|
||
formList: [],
|
||
firstData: {
|
||
cpu: {title: 'CPU监控', time: '',
|
||
checkList: []
|
||
},
|
||
other: {title: '其他监控', groupTime: '',
|
||
checkList: []
|
||
},
|
||
},
|
||
tempContent: {},
|
||
paramsData: {},
|
||
secondData: {
|
||
vfs: {title: '发现挂载文件系统', time: '',
|
||
checkList: []
|
||
},
|
||
net: {title: '发现网络接口', time: '300',
|
||
checkList: []
|
||
},
|
||
disk: {title: '发现硬盘设备', time: '',
|
||
checkList: []
|
||
},
|
||
docker: {title: '发现docker', time: '',
|
||
checkList: []
|
||
},
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.timeOptions = this.dict.type.collection_cycle;
|
||
this.paramsData = this.$route && this.$route.query;
|
||
if (this.open) {
|
||
this.paramsData = {};
|
||
this.$set(this.ruleFormData, 'deployDevice', this.dialogRowData.clientId);
|
||
}
|
||
if (this.paramsData && this.paramsData.id) {
|
||
this.getFormDataList(this.paramsData.id);
|
||
} else {
|
||
this.getDataList();
|
||
}
|
||
this.fnFormList();
|
||
},
|
||
methods: {
|
||
// formList集合
|
||
fnFormList(objVal) {
|
||
if (this.open) {
|
||
this.formList = [{
|
||
config: {},
|
||
controls: {
|
||
id: {label: 'ID',hidden: true},
|
||
policyName: {label: '策略名称', span: 18, type: 'input', required: true},
|
||
description: {label: '描述', span: 18, type: 'textarea'},
|
||
deployDevice: {label: '部署设备', span: 18, type: 'textarea', rows: 2, required: true},
|
||
}
|
||
}];
|
||
} else {
|
||
this.formList = [{
|
||
config: {readonly: this.paramsData && this.paramsData.readonly, colSpan: this.paramsData && this.paramsData.readonly ? '' : 'disBlock'},
|
||
controls: {
|
||
id: {label: 'ID',hidden: true},
|
||
policyName: {label: '策略名称', span: 12, type: 'input', required: true},
|
||
priority: {label: '优先级', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
|
||
status: {label: '策略状态', span: 12, type: 'select',options: this.dict.type.policy_status, hidden: this.paramsData && this.paramsData.readonly ? false : true},
|
||
deployTime: {label: '下发策略时间', span: 12, type: 'datetime', hidden: this.paramsData && this.paramsData.readonly ? false : true},
|
||
createTime: {label: '创建时间', span: 12, type: 'datetime', hidden: this.paramsData && this.paramsData.readonly ? false : true},
|
||
createBy: {label: '创建人', span: 12, type: 'input',hidden: this.paramsData && this.paramsData.readonly ? false : true},
|
||
deployDevice: {label: '部署设备', span: 12, type: 'textarea', rows:15, required: true},
|
||
description: {label: '描述', span: 12, type: 'textarea'},
|
||
}
|
||
}];
|
||
}
|
||
},
|
||
// 获取详情
|
||
getFormDataList(id) {
|
||
this.tempContent = {};
|
||
getMonitorPolicy(id).then(val => {
|
||
if (val && val.data) {
|
||
if (val.data && val.data.policy){
|
||
if (this.paramsData && this.paramsData.readonly) {
|
||
val.data.policy.deployDevice = val.data.policy.deployDevice.replace(/\n/g, '<br>');
|
||
}
|
||
this.ruleFormData = val.data.policy;
|
||
}
|
||
this.tempContent = val.data['linux'];
|
||
}
|
||
this.getDataList();
|
||
}).catch(() => {
|
||
this.getDataList();
|
||
// this.$modal.msgError("操作失败")
|
||
});
|
||
},
|
||
getDataList() {
|
||
let itemTypeList = ['monitorItem', 'autodiscoverItem'];
|
||
itemTypeList.forEach(item => {
|
||
let params = {resourceType: 'linux', itemType: item};
|
||
this.fnGetMonitorTempList(params);
|
||
});
|
||
},
|
||
// 通过监控模版选项 查询监控策略展示项
|
||
fnGetMonitorTempList(params) {
|
||
let obj = {};
|
||
this.timeOptions.forEach(item => {
|
||
obj[item.value] = item.label;
|
||
});
|
||
getMonitorTempList(params).then(res => {
|
||
if (res && res.data) {
|
||
if (params.itemType === 'monitorItem') {
|
||
// cpu
|
||
if (this.tempContent?.cpu && this.tempContent?.cpu.length > 0) {
|
||
this.firstData['cpu'].time = this.tempContent.cpu[0].collectionCycle.toString();
|
||
this.firstData['cpu'].timeLabel = obj[this.tempContent.cpu[0].collectionCycle.toString()];
|
||
this.tempContent['cpu'].timeLabel = obj[this.tempContent.cpu[0].collectionCycle.toString()];
|
||
}
|
||
this.firstData['cpu'].checkList = this.paramsData && this.paramsData.readonly ? this.tempContent?.cpu : res.data?.cpu || [];
|
||
// other
|
||
let otherData = res.data?.other || [];
|
||
if (this.tempContent?.other) {
|
||
this.tempContent['other'].forEach(item => {
|
||
otherData.some(val => {
|
||
if (item.metricKey === val.metricKey) {
|
||
val['time'] = item.collectionCycle.toString();
|
||
val['timeLabel'] = obj[item.collectionCycle.toString()];
|
||
item['timeLabel'] = obj[item.collectionCycle.toString()];
|
||
return true;
|
||
}
|
||
})
|
||
});
|
||
}
|
||
this.firstData['other'].checkList = this.paramsData && this.paramsData.readonly ? this.tempContent['other'] : otherData;
|
||
// 假设从接口获取firstData后，初始化每个city的time属性
|
||
this.firstData['other'].checkList.forEach(city => {
|
||
// 显式初始化time（若原本没有），确保响应式
|
||
if (city.time === undefined) {
|
||
this.$set(city, 'time', ''); // 用$set添加响应式属性
|
||
}
|
||
});
|
||
}
|
||
if (params.itemType === 'autodiscoverItem') {
|
||
if (this.tempContent?.vfs && this.tempContent?.vfs.length > 0) {
|
||
this.secondData['vfs'].time = this.tempContent.vfs[0].collectionCycle.toString();
|
||
this.secondData['vfs'].timeLabel = obj[this.tempContent.vfs[0].collectionCycle.toString()];
|
||
this.tempContent['vfs'].timeLabel = obj[this.tempContent.vfs[0].collectionCycle.toString()];
|
||
}
|
||
this.secondData['vfs'].checkList = this.paramsData && this.paramsData.readonly ? this.tempContent?.vfs : res.data?.vfs || [];
|
||
|
||
if (this.tempContent?.net && this.tempContent?.net.length > 0) {
|
||
this.secondData['net'].time = this.tempContent.net[0].collectionCycle.toString();
|
||
this.secondData['net'].timeLabel = obj[this.tempContent.net[0].collectionCycle.toString()];
|
||
}
|
||
this.secondData['net'].checkList = this.paramsData && this.paramsData.readonly ? this.tempContent?.net : res.data?.net || [];
|
||
|
||
if (this.tempContent?.disk && this.tempContent?.disk.length > 0) {
|
||
this.secondData['disk'].time = this.tempContent.disk[0].collectionCycle.toString();
|
||
this.secondData['disk'].timeLabel = obj[this.tempContent.disk[0].collectionCycle.toString()];
|
||
}
|
||
this.secondData['disk'].checkList = this.paramsData && this.paramsData.readonly ? this.tempContent?.disk : res.data?.disk || [];
|
||
|
||
if (this.tempContent?.docker && this.tempContent?.docker.length > 0) {
|
||
this.secondData['docker'].time = this.tempContent.docker[0].collectionCycle.toString();
|
||
this.secondData['docker'].timeLabel = obj[this.tempContent.docker[0].collectionCycle.toString()];
|
||
}
|
||
this.secondData['docker'].checkList = this.paramsData && this.paramsData.readonly ? this.tempContent?.docker : res.data?.docker || [];
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 同步所有city的time为firstChangeTime的值
|
||
handleChangeTime(item) {
|
||
// 遍历firstData中的每一项
|
||
item.checkList.forEach(city => {
|
||
// 遍历当前项的checkList中的每个city 直接赋值，因为city是响应式对象
|
||
city.time = item.groupTime;
|
||
});
|
||
},
|
||
// form验证
|
||
fnFormValid() {
|
||
return new Promise((resolve) => {
|
||
this.ruleFormData = {};
|
||
const formValid = this.$refs.formRef.$refs.ruleForm;
|
||
// 3. 操作form（如验证）
|
||
formValid.validate((valid) => {
|
||
if (valid) {
|
||
this.ruleFormData = formValid.model;
|
||
resolve(true);
|
||
} else {
|
||
resolve(false);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
async submit() {
|
||
if (!await this.fnFormValid()) return;
|
||
// 监控项
|
||
let idsList = [];
|
||
Object.keys(this.firstData).forEach(key => {
|
||
if (key === 'other') {
|
||
this.firstData[key] && this.firstData[key].checkList.forEach(ids => {
|
||
if (ids && ids.time) {
|
||
idsList.push({id: ids.id, collectionCycle: ids.time});
|
||
}
|
||
});
|
||
} else {
|
||
if (this.firstData[key].time) {
|
||
this.firstData[key] && this.firstData[key].checkList.forEach(ids => {
|
||
idsList.push({id: ids.id, collectionCycle: this.firstData[key].time});
|
||
});
|
||
}
|
||
}
|
||
});
|
||
// 自动发现项
|
||
let autoIds = [];
|
||
Object.keys(this.secondData).forEach(key => {
|
||
if (this.secondData[key].time) {
|
||
this.secondData[key] && this.secondData[key].checkList.forEach(ids => {
|
||
autoIds.push({id: ids.id, collectionCycle: this.secondData[key].time});
|
||
});
|
||
}
|
||
});
|
||
// console.log('ruleFormData===',this.ruleFormData);
|
||
// console.log('idsList===',idsList);
|
||
// console.log('autoIds===',autoIds);
|
||
|
||
let paramsList = idsList.concat(autoIds);
|
||
let params = Object.assign(this.ruleFormData, {resourceType: 'linux'},{collectionAndIdList: paramsList});
|
||
let fnType = addResourcePolicy;
|
||
if (this.paramsData && this.paramsData.id) {
|
||
fnType = updateResourcePolicy;
|
||
}
|
||
this.$modal.loading();
|
||
fnType(params).then(response => {
|
||
this.$modal.msgSuccess(response.msg);
|
||
if (this.open) {
|
||
this.$emit("dialogResult", {open: false});
|
||
} else {
|
||
this.$router.push("/resource/serverMonitorStrat");
|
||
}
|
||
this.$modal.closeLoading();
|
||
}).catch(error => {
|
||
this.$modal.closeLoading();
|
||
});
|
||
},
|
||
cancel() {
|
||
if (this.open) {
|
||
this.$emit("dialogResult", {open: false});
|
||
} else {
|
||
this.$router.push("/resource/serverMonitorStrat");
|
||
}
|
||
},
|
||
// 监听事件
|
||
callback(result, dataVal, formVal) {
|
||
if (result && result.fnCode) {
|
||
switch (result.fnCode) {
|
||
case 'submit':
|
||
break;
|
||
case 'cancel':
|
||
break;
|
||
default:
|
||
|
||
}
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
::v-deep #selDisabled{
|
||
color: #303133!important;
|
||
}
|
||
::v-deep .el-collapse-item__header {
|
||
background-color: #d4e3fc!important;
|
||
/*color: #fff!important;*/
|
||
padding-left: 20px;
|
||
font-size: 1rem;
|
||
}
|
||
</style>
|