TRKJ/profitManage1.1
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

开发服务器注册、服务器监控策略

Browse Source
This commit is contained in:
康冉冉
2025-10-21 18:13:00 +08:00
parent ee4d43c55a
commit 140f746ba9
10 changed files with 798 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -584,3 +584,21 @@ export function delSwitchInterface(Ids) {
method: 'delete'
})
}
/** --------------服务器资源注册-------------- */
// 查询列表
export function addMachine(query) {
return request({
url: '/system/machine',
method: 'post',
data: query
})
}
export function getRegistList(query) {
return request({
url: '/system/registration/getRegistList',
method: 'post',
data: query
})
}

15
src/router/index.js
View File

@@ -429,6 +429,21 @@ export const dynamicRoutes = [
}
]
},
// 服务器监控策略
{
path: '/resource/serverMonitorStrat/details',
component: Layout,
hidden: true,
permissions: ['resource:serverMonitorStrat:edit'],
children: [
{
path: 'index/:id?',
component: () => import('@/views/resource/serverMonitorStrat/monitorStrategy'),
name: 'serverMonitorStratdit',
meta: { title: '服务器监控策略信息', activeMenu: '/resource/serverMonitorStrat' }
}
]
},
// 交换机监控策略
{
path: '/resource/switchMonitorStrat/details',

401
src/views/resource/serverMonitorStrat/monitorStrategy.vue Normal file
View File

@@ -0,0 +1,401 @@
<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>
<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,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-for="(item,key,index) of firstData">
<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 style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
<el-button type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</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: "serverMonitorStratdit",
components: {Form},
dicts: ['collection_cycle', 'policy_status'],
props: {
open: {
type: String,
default: () => {}
}
},
watch: {
open: {
handler(val) {
if (val === 'type_false') {
// 清空form
this.$refs['formRef'].$refs.ruleForm.resetFields();
}
},
deep: true,
immediate: true
},
},
data() {
return {
activeName: 'first',
activeTwoName: [0,1,2,3,4],
timeOptions: [],
ruleFormData: {},
formList: [],
firstData: {
cpu: {title: 'CPU监控', time: '',
checkList: []
},
other: {title: '其他监控',
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;
console.log('paramsData===',this.paramsData);
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: 15, 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: 'date', hidden: this.paramsData && this.paramsData.readonly ? false : true},
createTime: {label: '创建时间', span: 12, type: 'date', 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){
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;
}
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 || [];
}
}
})
},
// 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>

193
src/views/resource/serverMonitorStrat/serverMonitorStrat.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<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="queryName">
<el-input
v-model="queryParams.queryName"
placeholder="请输入策略名称/ClientID"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="策略状态" prop="status">
<el-select
v-model="queryParams.status"
placeholder="请选择策略状态"
clearable>
<el-option
v-for="dict in dict.type.policy_status"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item class="lastBtnSty">
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-form>
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="tableList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempStatus="{ row, column }">
<dict-tag :options="dict.type.policy_status" :value="row.status"/>
</template>
</TableList>
</div>
</template>
<script setup>
import TableList from "@/components/table/index.vue"
import {listMonitorPolicy, delMonitorPolicy, getMonitorPolicyList} from "@/api/disRevenue/resource"
export default {
name: 'serverMonitorStrat',
components: {TableList},
dicts: ['policy_status'],
data() {
return {
loading: true,
showSearch: true,
tableList: [],
queryParams: {
total: 0,
pageNum: 1,
pageSize: 10
},
// 列显隐信息
columns: {
id: { label: `ID`,width: '50'},
policyName: { label: `策略名称`, minWidth: '250', visible: true },
description: { label: `描述`,minWidth: '200',visible: true},
deployDevice: { label: `部署设备`,minWidth: '200',visible: true},
priority: { label: `优先级`,minWidth: '150', visible: true },
connected: { label: `策略内容`,minWidth: '200'},
status: { label: `策略状态`, minWidth: '100', slotName: 'tempStatus', visible: true },
deployTime: { label: `下发策略时间`,minWidth: '160'},
updateTime:{ label: `创建人`,minWidth: '160'},
createTime: { label: `创建时间`,minWidth: '160'},
},
config: {
tableButton: {
top: [
{content: '新增', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:serverMonitorStrat:add'},
{content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:serverMonitorStrat:export'},
],
line: [
{content: '修改', fnCode: 'edit', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-edit', hasPermi: 'resource:serverMonitorStrat:edit'},
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:serverMonitorStrat:details'},
{content: '删除', fnCode: 'delete', type: 'text', showName: 'status', showVal: '0', icon: 'el-icon-delete', hasPermi: 'resource:serverMonitorStrat:detele'},
{}
]
}
}
}
},
created() {
this.getList();
},
activated() {
this.$nextTick(() => {
this.getList();
});
},
methods: {
/** 查询列表 */
getList() {
// this.$modal.loading();
listMonitorPolicy(Object.assign({}, this.queryParams, {resourceType: 'linux'})).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
// this.$modal.closeLoading();
}).catch(err => {
// this.$modal.closeLoading();
})
},
// 处理子组件传递的新值
handleValueChange(newValue) {
// 父组件更新自身数据，实现同步
this.showSearch = newValue;
// console.log('父组件拿到新值:', newValue);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryRef");
this.handleQuery();
},
callback(result, rowData, selectChange, selectList) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
this.$router.push({
path:'/resource/serverMonitorStrat/details/index'});
break;
case 'edit':
this.$router.push({
path:'/resource/serverMonitorStrat/details/index',
query:{
id: rowData.id
}
});
break;
case 'details':
this.$router.push({
path:'/resource/serverMonitorStrat/details/index',
query:{
id: rowData.id,
readonly: true
}
});
break;
case 'delete':
this.$modal.confirm('是否确认删除数据项？').then(function() {
return delMonitorPolicy(rowData.id)
}).then(() => {
this.getList();
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 => {
// if (item.visible) {
// dataList.push(item.prop);
// }
// });
// this.download("/system/monitorStategy/export", {properties: dataList,}, `拓扑管理_${new Date().getTime()}.xlsx`);
let paramsList = Object.assign({}, this.queryParams,rowData);
this.download("rocketmq/monitorPolicy/export", paramsList, `资源监控策略_${new Date().getTime()}.xlsx`, null, 'json');
break;
default:
}
}
}
}
}
</script>
<style scoped>
::v-deep .lastBtnSty .el-form-item__content{
margin-left: 10px!important;
}
</style>

2
src/views/resource/serverRegister/firstMonitor.vue
View File

@@ -6,7 +6,7 @@
</div>
</div>
<div v-for="item of chartList" class="w100 mt10 mb10" style="height: 200px;border-top: 1px solid #d8dce5">
<EchartsLine class="w100 h100" :lineData="item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
<EchartsLine class="w100 h100" :lineData="item && item.dataVal" :dateDataTrans="item.dateDataTrans" :dateShowType="item.dateShowType" :title="item.title" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)"></EchartsLine>
</div>
</div>
</template>

39
src/views/resource/serverRegister/handle.vue
View File

@@ -7,7 +7,7 @@
<script setup>
import Form from '@/components/form/index.vue';
import {listHandle, resNameBtType, addTopology, getTopology, updateTopology, postInterFaceName} from "@/api/disRevenue/resource"
import {listHandle, resNameBtType, addMachine, getTopology, updateTopology, getRegistList} from "@/api/disRevenue/resource"
export default {
name: 'serverRegisterEdit',
components: {Form},
@@ -29,7 +29,7 @@
if (this.paramsData && this.paramsData.id) {
// this.getFormDataList(this.paramsData.id);
}
this.switchList();
this.registList();
this.fnFormList();
},
@@ -51,7 +51,26 @@
one5: {label: 'IP1-mac地址', span: 12, type: 'input'},
one6: {label: 'IP1-接口类型', span: 12, type: 'input'},
one7: {label: 'IP1-IPv4地址', span: 12, type: 'input'},
one8: {label: '管理网-运营商', span: 12, type: 'input'},
one8: {label: 'IP1-网光', span: 12, type: 'input'},
two: {label: 'IP2-运营商', span: 12, type: 'input'},
two1: {label: 'IP2-省', span: 12, type: 'input'},
two2: {label: 'IP2-市', span: 12, type: 'input'},
two3: {label: 'IP2-业务公网', span: 12, type: 'input'},
two4: {label: 'IP2-接口名称', span: 12, type: 'input'},
two5: {label: 'IP2-mac地址', span: 12, type: 'input'},
two6: {label: 'IP2-接口类型', span: 12, type: 'input'},
two7: {label: 'IP2-IPv4地址', span: 12, type: 'input'},
two8: {label: 'IP2-网光', span: 12, type: 'input'},
three: {label: 'IP3-运营商', span: 12, type: 'input'},
three1: {label: 'IP3-省', span: 12, type: 'input'},
three2: {label: 'IP3-市', span: 12, type: 'input'},
three3: {label: 'IP3-业务公网', span: 12, type: 'input'},
three4: {label: 'IP3-接口名称', span: 12, type: 'input'},
three5: {label: 'IP3-mac地址', span: 12, type: 'input'},
three6: {label: 'IP3-接口类型', span: 12, type: 'input'},
three7: {label: 'IP3-IPv4地址', span: 12, type: 'input'},
three8: {label: 'IP3-网光', span: 12, type: 'input'},
one80: {label: '管理网-运营商', span: 12, type: 'input'},
one9: {label: '管理网-省', span: 12, type: 'input'},
one10: {label: '管理网-市', span: 12, type: 'input'},
one11: {label: '管理网-公网IP', span: 12, type: 'input'},
@@ -83,12 +102,10 @@
}];
}
},
// 获取交换机下拉
switchList() {
resNameBtType({resourceType: 2}).then(val => {
this.switchNameList = val && val;
this.formList[0].controls.clientId['options'] = val && val.map(item => {
return Object.assign({label: item.resourceName, value: item.resourceName});
registList() {
getRegistList({resourceType: 1}).then(res => {
this.formList[0].controls.clientId['options'] = res && res.data.map(item => {
return Object.assign({label: item.clientId, value: item.id});
});
});
},
@@ -96,7 +113,7 @@
getFormDataList(id) {
getTopology(id).then(val => {
this.ruleForm = val && val.data;
this.switchList();
this.registList();
this.fnServerNameList();
}).catch(() => {
this.$modal.msgError("操作失败")
@@ -110,7 +127,7 @@
let content = '<p style="font-size: 1rem;font-weight: 600;">确认添加machineCode</p>' +
'<p style="height: 0px;margin-bottom: 50px;">一旦添加machineCode后，将不能修改</p>';
this.$modal.confirm(content, {submitTitle: '确认添加'}).then(() => {
let fnType = addTopology;
let fnType = addMachine;
if (dataVal && dataVal.id) {
fnType = updateTopology;
}

146
src/views/resource/serverRegister/index.vue
View File

@@ -121,20 +121,33 @@
</el-timeline>
</div>
</el-dialog>
<!-- 下发业务 -->
<el-dialog :title="title" :visible.sync="issueOpen" width="800px" append-to-body style="padding-bottom: 20px;">
<Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="{labelWidth: '140px', buttonGroup: []}" @fnClick="callback"></Form>
<div style="text-align: right;margin-right: 20px;margin-bottom: 20px;">
<el-button type="primary" style="margin-left: 10px;" @click="submit">提交</el-button>
<el-button @click="callback({fnCode: 'cancel'})">取消</el-button>
</div>
</el-dialog>
<el-dialog title="添加监控策略" :visible.sync="stratOpen" width="1000px" append-to-body>
<MonitorStrategy :open="`type_${stratOpen}`" @dialogResult="fnDialogResult"></MonitorStrategy>
</el-dialog>
</div>
</template>
<script setup name="Register">
import Form from '@/components/form/index.vue';
import {listSwitchManage} from '@/api/disRevenue/resource';
import TableList from '@/components/table/index.vue';
import MonitorStrategy from './monitorStrategy';
import MonitorStrategy from '../serverMonitorStrat/monitorStrategy';
export default {
name: 'ServerRegister',
components: {TableList, MonitorStrategy},
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state'],
components: {TableList, MonitorStrategy,Form},
dicts: ['rm_register_resource_type', 'rm_register_protocol', 'rm_register_status', 'rm_register_port', 'rm_register_online_state', 'policy_method'],
data() {
return {
open: false,
stratOpen: false,
roleList: [],
loading: true,
showSearch: true,
@@ -197,6 +210,11 @@
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-11 12:12:12'},
{content: '【服务器节点名称1】执行脚本命令', time: '2025-12-10 12:12:12'}
],
issueOpen: false,
title: '',
formList: [],
ruleForm: {},
}
},
created() {
@@ -245,10 +263,10 @@
this.multiple = !selection.length;
},
fnDialogResult(res){
this.open = false;
this.stratOpen = false;
},
callback(result, rowData, selectChange) {
// console.log('result==',result);
console.log('result==',result);
if (result && result.fnCode) {
switch (result.fnCode) {
case 'add':
@@ -281,6 +299,89 @@
this.$modal.msgError("操作失败")
});
break;
case 'issueBusiness':
this.issueOpen = true;
this.title = '下发业务任务';
this.formList = [{
config: {title: '',labelWidth: '140px', colSpan: 'disBlock m0Auto'},
controls: {
id: {label: 'ID',hidden: true},
clientId: {label: '任务名称', span: 18, type: 'input', required: true},
name: {label: '业务名称', span: 18, type: 'select',options: [], required: true},
scriptName: {label: '脚本名称', span: 18, type: 'select',options: [], required: true},
adress: {label: '脚本文件地址', span: 18, type: 'input', disabled: true, required: true},
params: {label: '脚本参数', span: 18, type: 'input',options: [], required: true},
machineCode: {label: '部署设备', span: 18, type: 'textarea',rows: 15, required: true},
}
}];
this.ruleForm = {
id: '',
clientId: '',
name: '',
scriptName: '',
adress: '',
params: '',
machineCode: ''
};
this.$nextTick(() => {
this.$refs['formRef'].initFormData();
// 5. 最后执行重置
if (this.$refs['formRef']?.$refs.ruleForm) {
this.$refs['formRef'].$refs.ruleForm.resetFields();
}
});
break;
case 'issueScript':
this.issueOpen = true;
this.title = '添加脚本策略';
this.formList = [{
config: {title: '',labelWidth: '140px', colSpan: 'disBlock m0Auto'},
controls: {
id: {label: 'ID',hidden: true},
clientId: {label: '策略名称', span: 18, type: 'input', required: true},
remarks: {label: '描述', span: 18, type: 'textarea', required: true},
machineCode: {label: '部署设备', span: 18, type: 'textarea',rows: 15, required: true},
scriptName: {label: '脚本名称', span: 18, type: 'select',options: [], required: true},
adress: {label: '脚本文件地址', span: 18, type: 'input', disabled: true, required: true},
params: {label: '脚本参数', span: 18, type: 'input',options: [], required: true},
executionMethod: {label: '执行方式', span: 18, type: 'select',eventName:'change', options: this.dict.type.policy_method},
scheduledTime: {label: '定时时间', span: 18, type: 'date', hidden: true},
}
}];
this.ruleForm = {
id: '',
clientId: '',
remarks: '',
scriptName: '',
adress: '',
params: '',
machineCode: '',
executionMethod: '',
scheduledTime: ''
};
this.$nextTick(() => {
this.$refs['formRef'].initFormData();
// 5. 最后执行重置
if (this.$refs['formRef']?.$refs.ruleForm) {
this.$refs['formRef'].$refs.ruleForm.resetFields();
}
});
break;
case 'executionMethod':
if (rowData && rowData === '1') {
this.formList[0].controls.scheduledTime['hidden'] = false;
} else {
this.formList[0].controls.scheduledTime['hidden'] = true;
}
break;
case 'issueMonitor':
this.stratOpen = true;
break;
case 'submit':
break;
case 'cancel':
this.issueOpen = false;
break;
case 'export':
// let dataList = [];
// Object.keys(this.columns).forEach(item => {
@@ -296,6 +397,39 @@
}
}
},
// form验证
fnFormValid() {
return new Promise((resolve) => {
this.ruleFormData = {};
const formValid = this.$refs.formRef.$refs.ruleForm;
// 3. 操作form（如验证）
formValid.validate((valid) => {
if (valid) {
formValid.model.deployDevice = formValid.model.deployDevice.join('/n');
this.ruleFormData = formValid.model;
resolve(true);
} else {
resolve(false);
}
});
});
},
async submit(){
if (!await this.fnFormValid()) return;
let fnType = addMachine;
if (dataVal && dataVal.id) {
fnType = updateTopology;
}
if(this.loading) return;
this.loading = true;
fnType(dataVal).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/resource/serverRegister");
this.loading = false;
}).catch(() => {
this.$modal.msgError("操作失败")
});
}
}
}
@@ -306,7 +440,7 @@
margin-left: 10px!important;
}
::v-deep .el-dialog__body {
padding: 0px!important;
padding: 0 0 10px!important;
}
::v-deep .el-timeline .el-timeline-item:last-child .el-timeline-item__tail {
display: block!important;

1
src/views/resource/switchMonitorStrat/monitorStrategy.vue
View File

@@ -362,7 +362,6 @@
case 'submit':
break;
case 'cancel':
this.$router.push("/resource/switchRegister");
break;
default:

4
src/views/resource/switchMonitorStrat/switchMonitorStrat.vue
View File

@@ -5,7 +5,7 @@
<el-form-item label="搜索" prop="queryName">
<el-input
v-model="queryParams.queryName"
placeholder="请输入策略名称/部署设备"
placeholder="请输入策略名称/ClientID"
clearable
@keyup.enter.native="handleQuery"
/>
@@ -102,7 +102,7 @@
/** 查询列表 */
getList() {
// this.$modal.loading();
listMonitorPolicy(this.queryParams).then(response => {
listMonitorPolicy(Object.assign({}, this.queryParams, {resourceType: 'switch'})).then(response => {
this.tableList = response.rows;
this.queryParams.total = response.total;
// this.$modal.closeLoading();

239
src/views/resource/switchRegister/monitorStrategy.vue
View File

@@ -1,239 +0,0 @@
<template>
<div class="app-container">
<div style="width: 80%; margin: auto;">
<Form ref="formRef" :formList="formList" :config="{labelWidth: '140px',buttonGroup: []}" :ruleFormData="ruleFormData" @fnClick="callback"></Form>
</div>
<div>
<h3 style="background: #d4e3fc;padding: 15px 10px;">策略内容</h3>
<el-tabs v-model="activeName" class="plr-20">
<el-tab-pane label="监控项" name="first">
<div v-for="item of firstData">
<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>
</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 === '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="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>
</div>
<el-button style="float: right;margin-top: 12px;margin-left: 10px;" @click="cancel">取消</el-button>
<el-button type="primary" style="float: right;margin-top: 12px;" @click="submit">提交</el-button>
</div>
</template>
<script>
import Form from '@/components/form/index.vue';
export default {
name: "MonitorStrategy",
components: {Form},
dicts: ['rm_register_resource_type', 'collection_cycle'],
props: {
open: {
type: Boolean,
default: false
}
},
watch: {
open: {
handler(val) {
if (!val) {
// 清空form
this.$refs['formRef'].$refs.ruleForm.resetFields();
}
},
deep: true,
immediate: true
},
},
data() {
return {
activeName: 'first',
activeTwoName: [0,1,2,3,4],
timeOptions: [],
ruleFormData: {},
formList: [],
firstData: [
{checkList: [
{id: '1', metricKey: 'sysDescr', metricName: '系统描述', time: ''},
{id: '2', metricKey: 'sysObjectID', metricName: '系统ObjectID', time: ''},
{id: '3', metricKey: 'sysUpTime', metricName: '系统运行时间', time: ''},
{id: '4', metricKey: 'hwStackSystemMac', metricName: '系统MAC地址', time: ''},
{id: '5', metricKey: 'entPhysicalSoftwareRev', metricName: '设备软件版本', time: ''},
{id: '6', metricKey: 'hwEntityMemUsage', metricName: '设备内存使用率(%)', time: ''},
]}
],
secondData: {
switchNet: {title: '网络端口发现', time: '300',
checkList: [
{id: '11', metricKey: 'ifIndex', metricName: '端口索引'},
{id: '12', metricKey: 'ifHCOutOctets', metricName: '端口发送Bites总数'},
{id: '13', metricKey: 'ifRevRate', metricName: '端口实时接收速率(bites/sec)'},
{id: '14', metricKey: 'ifSentRate', metricName: '端口实时发送速率(bites/sec)'},
]
},
switchModule: {title: '光模块发现', time: '',
checkList: [
{id: '15', metricKey: 'fiberEntIndex', metricName: '光模块端口索引'},
{id: '16', metricKey: 'hwEntityOpticalTxLowThreshold', metricName: '光模块发送光衰阈值(dBm)'},
{id: '17', metricKey: 'hwEntityOpticalRxLowThreshold', metricName: '光模块接收光衰阈值(dBm)'},
{id: '18', metricKey: 'hwEntityOpticalTxPower', metricName: '光模块发送功率(dBm)'},
]
},
switchMpu: {title: 'MPU发现', time: '',
checkList: [
{id: '19', metricKey: 'mpuEntIndex', metricName: 'MPU索引'},
{id: '20', metricKey: 'mpuEntityCpuUsage', metricName: 'MPU的CPU使用率'},
{id: '21', metricKey: 'mpuEntityMemUsage', metricName: 'MPU的内存使用率'},
{id: '22', metricKey: 'mpuPhysicalSoftwareRev', metricName: 'MPU的操作系统'},
]
},
switchPwr: {title: '电源发现', time: '',
checkList: [
{id: '23', metricKey: 'pwrEntIndex', metricName: '电源索引'},
{id: '24', metricKey: 'pwrName', metricName: '电源名称'},
{id: '25', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
{id: '26', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
]
},
switchFan: {title: '风扇发现', time: '',
checkList: [
{id: '27', metricKey: 'fanEntIndex', metricName: '风扇索引'},
{id: '28', metricKey: 'pwrEntityPwrState', metricName: '电源状态'},
{id: '29', metricKey: 'pwrEntityPwrCurrent', metricName: '电源电流(mA)'},
{id: '30', metricKey: 'pwrEntityPwrVoltage', metricName: '电源电压(mV)'},
]
},
}
}
},
created() {
console.log('dddd===');
this.timeOptions = this.dict.type.collection_cycle;
this.fnFormList();
},
methods: {
// formList集合
fnFormList(objVal) {
this.formList = [{
config: {},
controls: {
id: {label: 'ID',hidden: true},
switchName: {label: '策略名称', span: 24, type: 'input', required: true},
hardwareSn: {label: '描述', span: 24, type: 'textarea'},
resourceType: {label: '交换机类型', span: 24, type: 'select', required: true, options: this.dict.type.rm_register_resource_type},
bushu: {label: '部署设备', span: 24, type: 'textarea', rows: 15},
}
}];
},
// 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 = [];
this.firstData.forEach(item => {
item && item.checkList.forEach(ids => {
if (ids && ids.time) {
idsList.push({id: ids.id, collectionCycle: ids.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);
this.$emit("dialogResult", {open: false});
},
cancel() {
this.$emit("dialogResult", {open: false});
},
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'submit':
let fnType = addHandle;
if (dataVal && dataVal.id) {
fnType = updateHandle;
}
fnType(dataVal).then(response => {
this.$modal.msgSuccess(response.msg);
this.$router.push("/resource/switchRegister");
}).catch(() => {
this.$modal.msgError("操作失败")
});
break;
case 'cancel':
this.$router.push("/resource/switchRegister");
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>