告警管理、告警日志、文件管理

This commit is contained in:
康冉冉
2025-09-12 18:05:02 +08:00
parent 30e80bb06c
commit ce79c4ee87
13 changed files with 651 additions and 305 deletions

View File

@@ -139,9 +139,9 @@ aside {
//main-container全局样式
.app-container {
height: calc(100vh - 132px);
//height: calc(100vh - 132px);
padding: 8px 20px 20px;
overflow: scroll;
//overflow: scroll;
}
.app-viewContent {
height: calc(100vh - 85px);
@@ -241,6 +241,9 @@ aside {
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w70 {
width: 70%;
}

View File

@@ -13,27 +13,27 @@
<el-input
v-model="ruleForm[key]"
:clearable="formVal.clearable !== false"
:disabled="toBoolean(formVal.disabled)"
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
:class="toBoolean(formVal.disabled) ? 'cursorAuto' : ''"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请输入${formVal.label}`"
:class="toBoolean(formVal.disabled || formItem.config.readonly) ? 'cursorAuto' : ''"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"></el-input>
</template>
<template v-if="formVal.type === 'textarea'">
<el-input
v-model="ruleForm[key]"
:disabled="toBoolean(formVal.disabled)"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
type="textarea"
:rows="formVal.rows"
:clearable="formVal.clearable !== false"
:class="toBoolean(formVal.disabled) ? 'cursorAuto' : ''"
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"></el-input>
:class="toBoolean(formVal.disabled || formItem.config.readonly) ? 'cursorAuto' : ''"
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请输入${formVal.label}`"></el-input>
</template>
<template v-else-if="formVal.type === 'select'">
<el-select
v-model="ruleForm[key]"
:disabled="toBoolean(formVal.disabled)"
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请输入${formVal.label}`"
:clearable="formVal.clearable !== false"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)">
<el-option
@@ -45,7 +45,7 @@
</template>
<template v-else-if="formVal.type === 'radio'">
<el-radio-group v-model="ruleForm[key]" :disabled="toBoolean(formVal.disabled)" @[formVal.eventName]="(val) => handleChange(key,val,formVal)">
<el-radio-group v-model="ruleForm[key]" :disabled="toBoolean(formVal.disabled || formItem.config.readonly)" @[formVal.eventName]="(val) => handleChange(key,val,formVal)">
<el-radio
v-for="option in formVal.options"
:key="option.value"
@@ -56,7 +56,7 @@
</template>
<template v-else-if="formVal.type === 'checkbox'">
<el-checkbox-group v-model="ruleForm[key]" :disabled="toBoolean(formVal.disabled)" @[formVal.eventName]="(val) => handleChange(key,val,formVal)">
<el-checkbox-group v-model="ruleForm[key]" :disabled="toBoolean(formVal.disabled || formItem.config.readonly)" @[formVal.eventName]="(val) => handleChange(key,val,formVal)">
<el-checkbox
v-for="option in formVal.options"
:key="option.value"
@@ -70,8 +70,8 @@
<el-date-picker
v-model="ruleForm[key]"
:type="formVal.type || 'date'"
:disabled="toBoolean(formVal.disabled)"
:placeholder="toBoolean(formVal.disabled) ? null : formVal.placeholder || `请输入${formVal.label}`"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? null : formVal.placeholder || `请输入${formVal.label}`"
:format="formVal.format || 'yyyy-MM-dd'"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"
></el-date-picker>
@@ -81,7 +81,7 @@
<el-date-picker
v-model="ruleForm[key]"
:type="formVal.type || 'date'"
:disabled="toBoolean(formVal.disabled)"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:format="formVal.format || 'yyyy-MM'"
:value-format="formVal.valueFormat || 'yyyy-MM'"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"
@@ -92,7 +92,7 @@
<el-date-picker
v-model="ruleForm[key]"
:type="formVal.type || 'date'"
:disabled="toBoolean(formVal.disabled)"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:format="formVal.format || 'yyyy-MM-dd'"
:value-format="formVal.valueFormat || 'yyyy-MM-dd'"
:range-separator="formVal.separator || '至'"
@@ -105,7 +105,7 @@
<template v-else-if="formVal.type === 'monthrange'">
<el-date-picker v-model="ruleForm[key]"
:type="formVal.type || 'date'"
:disabled="toBoolean(formVal.disabled)"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:format="formVal.format || 'yyyy-MM'"
:value-format="formVal.valueFormat || 'yyyy-MM'"
:range-separator="formVal.separator || '至'"
@@ -119,8 +119,8 @@
<el-transfer
v-model="ruleForm[key]"
:data="formVal.options"
:disabled="toBoolean(formVal.disabled)"
:placeholder="toBoolean(formVal.disabled) ? formVal.placeholder || `请输入${formVal.label}` : null"
:disabled="toBoolean(formVal.disabled || formItem.config.readonly)"
:placeholder="toBoolean(formVal.disabled || formItem.config.readonly) ? formVal.placeholder || `请输入${formVal.label}` : null"
@[formVal.eventName]="(val) => handleChange(key,val,formVal)"
></el-transfer>
</template>
@@ -133,11 +133,18 @@
</el-col>
</el-row>
<!-- 表单操作按钮 -->
<el-row v-if="!config['buttonGroup']" style="float: right;">
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="handleReset">返回</el-button>
</el-form-item>
<el-row v-if="!config['buttonGroup'] || config['buttonGroup'].length !== 0" style="float: right;">
<template v-if="config['buttonGroup'].length > 0">
<el-form-item>
<el-button v-for="item of config['buttonGroup']" :type="item.type" @click="fnEventChange(item)">{{item.title}}</el-button>
</el-form-item>
</template>
<template v-else>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="handleReset">返回</el-button>
</el-form-item>
</template>
</el-row>
</el-form>
</div>
@@ -230,7 +237,17 @@
return true;
}
return false;
}
},
fnEventChange(result){
if (result && result.fnCode) {
switch (result.fnCode) {
case 'goBack':
this.handleReset();
break;
default:
}
}
},
}
}
</script>

View File

@@ -10,7 +10,7 @@
<right-toolbar v-if="!(config && config.colTopHiddenIcon)" :showSearch.sync="showSearch" @queryTable="renderList" @columnsChange="columnsChange" :columns="columns"></right-toolbar>
</el-row>
<!-- 表格数据 -->
<el-table height="80%" v-loading="loading" :data="tableList" ref="selChangeList" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
<el-table v-loading="loading" :data="tableList" ref="selChangeList" :key="tableKey" highlight-selection-row @selection-change="handleSelectionChange">
<el-table-column v-if="!(config && config.colHiddenCheck)" fixed="left" type="selection" width="55" align="center" />
<template v-for="(column, key, index) of columns">
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">

View File

@@ -197,20 +197,20 @@ export const dynamicRoutes = [
}
]
},
{
path: '/disRevenue/earnManage/server/graphicAnalysis',
component: Layout,
hidden: true,
permissions: ['disRevenue:earnManage:server:graphicAnalysis'],
children: [
{
path: 'index/:dialogVal?',
component: () => import('@/views/disRevenue/earnManage/server/dialogView'),
name: 'DialogView',
meta: { title: '图形分析', activeMenu: '/disRevenue/earnManage/server' }
}
]
},
// {
// path: '/disRevenue/earnManage/server/graphicAnalysis',
// component: Layout,
// hidden: true,
// permissions: ['disRevenue:earnManage:server:graphicAnalysis'],
// children: [
// {
// path: 'index/:dialogVal?',
// component: () => import('@/views/disRevenue/earnManage/server/dialogView'),
// name: 'DialogView',
// meta: { title: '图形分析', activeMenu: '/disRevenue/earnManage/server' }
// }
// ]
// },
// 交换机带宽收益
{
path: '/disRevenue/earnManage/switch/list',
@@ -335,7 +335,7 @@ export const dynamicRoutes = [
{
path: 'index/:id?',
component: () => import('@/views/disRevenue/resource/monitorTemp/view'),
name: 'monitorTempEdit',
name: 'monitorTempView',
meta: { title: '监控模版信息', activeMenu: '/disRevenue/resource/monitorTemp' }
}
]
@@ -350,7 +350,7 @@ export const dynamicRoutes = [
{
path: 'index/:id?',
component: () => import('@/views/disRevenue/resource/monitorStategy/details'),
name: 'resMonitorEdit',
name: 'monitorStategyEdit',
meta: { title: '资源监控策略信息', activeMenu: '/disRevenue/resource/monitorStategy' }
}
]
@@ -364,7 +364,7 @@ export const dynamicRoutes = [
{
path: 'index/:id?',
component: () => import('@/views/disRevenue/resource/monitorStategy/view'),
name: 'resMonitorEdit',
name: 'monitorStategyView',
meta: { title: '监控模版信息', activeMenu: '/disRevenue/resource/monitorStategy' }
}
]
@@ -427,6 +427,21 @@ export const dynamicRoutes = [
}
]
},
// 告警日志
{
path: '/disRevenue/resource/alarmLog/details',
component: Layout,
hidden: true,
permissions: ['disRevenue:resource:alarmLog:details'],
children: [
{
path: ':id?',
component: () => import('@/views/disRevenue/resource/alarmLog/alarmLogDetails'),
name: 'alarmLogDetails',
meta: { title: '告警日志信息', activeMenu: '/disRevenue/resource/alarmLog' }
}
]
},
// agent采集数据
{
path: '/agentCollect/cpuData/view',

View File

@@ -1,5 +1,5 @@
<template>
<div class="app-container">
<div class="app-container" style="height: calc(100vh)!important">
<div style="height: 90px;">
<el-form ref="noticeRef" :model="form" label-width="80px">
<el-form-item label="节点名称" prop="noticeType">
@@ -16,7 +16,7 @@
</el-form>
<el-switch v-for="item of switchData" v-model="item.checkType" :activeText="item.label" class="mr20" />
</div>
<div style="height: calc(100vh - 130px);overflow: scroll;">
<div style="height: calc(100vh - 100px);overflow: scroll;">
<template v-for="(item,index) of echartListData">
<template v-if="item && item.dateShowType === 'day'">
<EchartsLine v-show="switchData[item.indexVal].checkType" :chartData="(valData) => chartDataEvent(valData, item.fnEvent)" :dateShowType="item.dateShowType"

View File

@@ -41,7 +41,7 @@
<!-- 修改-->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="noticeRef" :model="formList" label-width="90px">
<el-form-item label="节点名称">
<el-form-item label="节点名称" prop="nodeName">
<el-input v-model="formList.nodeName" :disabled="true" />
</el-form-item>
<el-form-item label="业务名称" prop="businessName">

View File

@@ -128,12 +128,12 @@
if (result && result.fnCode) {
switch (result.fnCode) {
case 'details':
// this.$router.push({
// path:'/disRevenue/resource/alarmManage/details',
// query:{
// id: rowData.id
// }
// });
this.$router.push({
path:'/disRevenue/resource/alarmLog/details',
query:{
id: rowData.id
}
});
break;
case 'handle':
break;

View File

@@ -0,0 +1,72 @@
<template>
<div class="app-container">
<Form :formList="formList" :ruleFormData="ruleForm" :config="config" @fnClick="callback"></Form>
</div>
</template>
<script setup name="Handle">
import Form from '@/components/form/index.vue';
import {addGroup, getGroup, updateGroup, resNameList} from "@/api/disRevenue/resource"
export default {
name: 'AlarmLogDetails',
components: {Form},
data() {
return {
ruleForm: {},
formList: [],
config: {
buttonGroup: [{title: '返回', fnCode: 'goBack'}]
},
paramsData: {}
}
},
created() {
this.paramsData = this.$route && this.$route.query;
if (this.paramsData && this.paramsData.id) {
this.getFormDataList(this.paramsData.id);
}
this.fnFormList();
},
methods: {
// formList集合
fnFormList(objVal) {
this.formList = [{
config: {title: '基本信息',readonly: true},
controls: {
id: {label: 'ID',hidden: true},
groupName: {label: '资源名称', span: 24, type: 'input', rules: [{required: true, message: '请输入名称', trigger: 'blur'}]},
ip: {label: '源IP', span: 24, type: 'input'},
time: {label: '发生时间', span: 24, type: 'date'},
num: {label: '重复次数', span: 24, type: 'input'},
type: {label: '状态', span: 24, type: 'input'},
description: {label: '内容', span: 24, type: 'textarea'}
}
}];
},
// 获取详情
getFormDataList(id) {
getGroup(id).then(val => {
if (val && val.data) {
val.data['includedDevices'] = val.data['includedDevices'].split(',');
this.ruleForm = val.data;
}
}).catch(() => {
this.$modal.msgError("操作失败")
});
},
// 监听事件
callback(result, dataVal, formVal) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'cancle':
this.$router.push("/resource/alarmLog");
break;
default:
}
}
}
}
}
</script>
<style>
</style>

View File

@@ -1,144 +1,61 @@
<template>
<div class="app-container">
<div>
<div class="w100">
<el-steps :active="active" finish-status="success">
<el-step title="基本信息"></el-step>
<el-step title="监控信息"></el-step>
<el-step title="信息确认"></el-step>
<el-step title="告警策略"></el-step>
<el-step title="策略确认"></el-step>
</el-steps>
<!-- 内容区 -->
<div style="margin-top: 30px;">
<div style="margin-top: 30px;height: 90%;">
<!-- active:0 -->
<div v-show="active === 0">
<Form ref="formRef" style="text-align: center;" :formList="formList" :ruleFormData="ruleFormData" :config="config" @fnClick="callback"></Form>
</div>
<!-- active:2 -->
<div v-show="active === 1">
<el-tabs type="border-card">
<!-- 2-1 -->
<el-tab-pane v-if="ruleFormData.monitorTemp === 1" label="Linux系统">
<el-tabs v-model="linuxActiveName">
<!-- 2-1-1 -->
<el-tab-pane label="监控项" name="first">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(item,index) of linuxSystem.monitorList" :title="item.title" :name="index">
<template v-if="item.modelName === 'other'">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
<div class="disInlineBlock w45">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
</div>
<div class="disInlineBlock" style="color: #606266">
采集周期<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
</div>
</div>
<div v-show="active === 1" class="w100" style="height: 94%;">
<el-tabs type="border-card" class="w100 h100">
<!-- 2-1 -->
<el-tab-pane v-if="ruleFormData.monitorTemp === 1" label="Linux系统" class="w100 h100">
<div v-for="(item,index) of linuxSystem" class="plr-50">
<template v-for="city in item.checkList">
<div class="w100 h100 mt10">
<el-checkbox v-model="city.checked" :label="city.name" :key="city.name" class="disInlineBlock" style="width: 56%;margin-right: 0px!important;white-space: break-spaces;">
{{ city.name }}
</el-checkbox>
<div v-if="city && (city.num || city.towName)" class="disInlineBlock" style="color: #606266; width: 44%;">
<template v-if="city.num">
<el-select v-model="city['typeSelect']" size="small" placeholder="选择操作" style="width: 120px;" class="mr10">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
<el-input-number v-model="city['num']" :min="1" label="描述文字" size="small" class="mr10"></el-input-number>
<el-link :underline="false"><span v-if="city && city.numType === 'percent'">%</span>上报告警信息</el-link>
</template>
<template v-else>
<template slot="title">
{{item.title}}
<div style="font-size: 13px;margin-left: 15%;">
采集周期<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :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="w45 mt10 mb10 disInlineBlock fontSize15">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
</div>
</div>
<el-link :underline="false">{{city.towName}}: </el-link>
<el-input v-model="city.typeInput" style="width: 120px;margin-left: 5px"></el-input>
<el-link :underline="false" style="color: #e1e1e2;font-size: 12px;">{{city.title}}: </el-link>
</template>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
<!-- 2-1-2 -->
<el-tab-pane label="自动发现项" name="second">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(item,index) of linuxSystem.autoFindList" :title="item.title" :name="index">
<template slot="title">
{{item.title}}
<div style="font-size: 13px;margin-left: 15%;">
采集周期<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
</template>
<div style="display: flex;justify-content: center;">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
<span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
<span>{{city.towName}}</span>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
<!-- 2-2 -->
<el-tab-pane v-if="ruleFormData.monitorTemp === 2" label="华为交换机">
<span slot="label">
华为交换机
<el-tooltip trigger="click" effect="dark" placement="top">
<template #content>针对CloudEngine 58&68&78&88&98系列</template>
<i class="el-icon-question"></i>
</el-tooltip>
</span>
<el-tabs v-model="hwActiveName">
<!-- 2-2-1 -->
<el-tab-pane label="监控项" name="first">
<template v-for="(item,index) of monitorTable['nodeOne']">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
<div class="disInlineBlock w45">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
</div>
<div class="disInlineBlock" style="color: #606266">
采集周期<el-select v-model="city['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
</div>
</div>
</template>
</el-tab-pane>
<!-- 2-2-2 -->
<el-tab-pane label="自动发现项" name="second">
<el-collapse v-model="activeNames">
<el-collapse-item v-for="(item,index) of monitorTable['nodeTow']" :title="item.title" :name="index">
<template slot="title">
{{item.title}}
<div style="font-size: 13px;margin-left: 15%;">
采集周期<el-select v-model="item['time']" placeholder="请选择" @change="(changeVal) => handleCheckedCitiesChange(changeVal, item)">
<el-option v-for="val in option" :key="val.value" :label="val.label" :value="val.value"></el-option>
</el-select>
</div>
</template>
<div style="display: flex;justify-content: center;">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disBlock fontSize15">
<span style="width: 200px" class="disInlineBlock">{{city.name}}</span>
<span>{{city.towName}}</span>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
</div>
</template>
</div>
</el-tab-pane>
<!-- 2-2 -->
<el-tab-pane v-if="ruleFormData.monitorTemp === 2" label="华为交换机" class="w100 h100">
<div style="padding: 50px">
接收来自交换机的snmp Trap信息:
<el-radio-group v-model="switchType">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</div>
</el-tab-pane>
</el-tabs>
</div>
<!-- active:3 -->
<div v-show="active === 2">
<!-- <MonitorStategyView :ruleForm="ruleFormData" :otherList="synthesisList"></MonitorStategyView>-->
<div v-if="active === 2" class="w100" style="height: 94%;margin-top: -15px;">
<AlarmManageView :ruleForm="ruleFormData" :otherList="synthesisList"></AlarmManageView>
</div>
</div>
</div>
@@ -152,23 +69,18 @@
<script setup>
import Form from '@/components/form/index.vue';
import TableList from "@/components/table/index.vue"
// import MonitorStategyView from './view'
import AlarmManageView from './alarmManageView'
export default {
name: 'AlarmManageDetails',
components: {Form, TableList},
components: {Form, TableList, AlarmManageView},
data() {
return {
active: 0,
activeNames: [0, 1],
linuxActiveName: 'first',
hwActiveName: 'first',
checkAllParams: {},
checkParams: {week: '',cpu: [], other: [], mount: [], netPort:[]},
allSelectedData: {},
checkParams: {other: []},
synthesisList: {},
// 第一节点
ruleFormData: {
monitorTemp: 2,
monitorTemp: 1,
},
config: {
buttonGroup: []
@@ -180,82 +92,27 @@
switchName: {label: '策略名称', span: 12, type: 'input', style: 'display: block;margin: 0 auto;', rules: [{required: true, message: '请输入模版名称', trigger: 'blur'}]},
serverPort: {label: '描述', span: 12, type: 'textarea', style: 'display: block;margin: 0 auto;'},
// monitorTemp: {label: '关联监控模版', span: 12, type: 'select', style: 'display: block;margin: 0 auto;'},
resourceGroup: {label: '关联资源组', span: 12, type: 'select'}
monitorTemp: {label: '关联资源组', span: 12, type: 'select'}
}
}],
// 第二节点 1栏
option: [{label: '60min', value: '60'},{label: '15min', value: '15'}],
linuxSystem: {
monitorList: [{
firstTitle: 'Linux系统', secondTitle: '监控项', title: 'CPU监控', modelName: 'cpu',time: '',
checkList: [
{id: '1', name: 'system.cpu.load.avg1', towName: 'CPU的1分钟负载'},
{id: '2', name: 'system.cpu.util.normal', towName: 'CPU正常运行时间'},
{id: '3', name: 'system.cpu.load.avg5', towName: 'CPU的5分钟负载'},
{id: '4', name: 'system.cpu.utilee.idle', towName: 'CPU空闲时间'},
{id: '5', name: 'system.cpu.load.avg15', towName: 'CPU的15分钟负载'},
]
},{
firstTitle: 'Linux系统', secondTitle: '监控项', title: '其他监控', modelName: 'other',
checkList: [
{id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间(字节)',time: ''},
{id: '7', name: 'proc.num.run', towName: '正在运行的进程数',time: ''},
{id: '8', name: 'memory.utilization', towName: '内存利用率',time: ''},
{id: '9', name: 'system.users.num', towName: '登录用户数',time: ''},
{id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比',time: ''},
]
}],
autoFindList: [{
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现挂载文件系统', modelName: 'mount', time: '',
checkList: [
{id: '1', name: 'vfs.fs.type', towName: '某个挂载点(如/)的文件系统类型'},
{id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点(如/)的可用空间'},
{id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点(如/)的总空间'},
{id: '4', name: 'vfs.fs.util', towName: '某个挂载点(如/)的空间利用率'},
]},{
firstTitle: 'Linux系统', secondTitle: '自动发现项', title: '发现网络接口', modelName: 'netPort', time: '',
checkList: [
{id: '1', name: 'net.if.in.dropped', towName: '某个网络接口如interface eth0的入站丢包'},
{id: '2', name: 'net.if.out.dropped', towName: '某个网络接口如interface eth0的出站丢包'},
{id: '3', name: 'net.if.out', towName: '某个网络接口如interface eth0的发送流量'},
{id: '4', name: 'net.if.out.type', towName: '某个网络接口如interface eth0的接口类型'},
{id: '5', name: 'net.if.in', towName: '某个网络接口如interface eth0的接收流量'}
]
}],
},
option: [{label: '大于', value: '大于'},{label: '大于且等于', value: '大于且等于'},{label: '小于', value: '小于'},{label: '小于且等于', value: '小于且等于'}],
linuxSystem: [{
firstTitle: 'Linux系统', modelName: 'other',
checkList: [
{id: '1', name: 'Linux服务器的CPU使用率(system.cpu.uti)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
{id: '2', name: 'Linux服务器的内存利用率(memory.utilization)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
{id: '3', name: 'Linux服务器的可用交换空间百分比(system.swap.size.percent)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
{id: '4', name: 'Linux服务器的登录用户数(system.users.num)', checked: false, typeSelect: '大于', num: '9'},
{id: '5', name: 'Linux服务器的所有挂载点的空间利用率(vfs.fs.util)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
{id: '6', name: 'Linux服务器的所有网络接口的运行状态由UP转为DOWN(net.if.status)上报告警信息', checked: false,},
{id: '7', name: 'Linux服务器的所有的网络接口类型为【Ethernet】的且运行状态为【已连接】的网络接口的发送流量带宽使用率', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
{id: '8', name: 'Linux服务器的所有的容器的内存使用率(container.mem.util)', checked: false, typeSelect: '大于', num: '9', numType: 'percent'},
{id: '9', name: 'Linux服务器开放多余的端口上报告警信息', checked: false, towName: '端口白名单', typeInput: '', title: '以;分割,可以使用-表示连续范围例如1-1024'},
]
}],
// 第二节点 2栏 列显隐信息
monitorTable: {
nodeOne: [{
firstTitle: '华为交换机', secondTitle: '监控项', modelName: 'other',
checkList: [
{id: '1', name: 'net.if.in.dropped', towName: '某个网络接口如interface eth0的入站丢包',time: ''},
{id: '2', name: 'net.if.out.dropped', towName: '某个网络接口如interface eth0的出站丢包',time: ''},
{id: '3', name: 'net.if.out', towName: '某个网络接口如interface eth0的发送流量',time: ''},
{id: '4', name: 'net.if.out.type', towName: '某个网络接口如interface eth0的接口类型',time: ''},
{id: '5', name: 'net.if.in', towName: '某个网络接口如interface eth0的接收流量',time: ''}
]
}],
nodeTow: [
{
firstTitle: '华为交换机', secondTitle: '自动发现项', title: '网络端口发现', modelName: 'server', time: '',
checkList: [
{id: '1', name: 'vfs.fs.type', towName: '某个挂载点(如/)的文件系统类型'},
{id: '2', name: 'vfs.fs.size.free', towName: '某个挂载点(如/)的可用空间'},
{id: '3', name: 'vfs.fs.size.total', towName: '某个挂载点(如/)的总空间'},
{id: '4', name: 'vfs.fs.util', towName: '某个挂载点(如/)的空间利用率'},
]
},
{
firstTitle: '华为交换机', secondTitle: '自动发现项',title: '光模块发现', modelName: 'light', time: '',
checkList: [
{id: '6', name: 'system.swap.size.free', towName: '交换卷/文件的可用空间(字节)'},
{id: '7', name: 'proc.num.run', towName: '正在运行的进程数'},
{id: '8', name: 'memory.utilization', towName: '内存利用率'},
{id: '9', name: 'system.users.num', towName: '登录用户数'},
{id: '10', name: 'system.swap.size.percent', towName: '可用交换空间百分比'},
]
},
]},
switchType: '',
}
},
created() {},
@@ -267,8 +124,6 @@
if (this.active === 0) {
if (!await this.fnFormValid()) {
return;
} else {
this.dataProcess();
}
}
if (this.active === 1) {
@@ -277,26 +132,6 @@
this.active++;
}
},
// 数据处理
dataProcess() {
let typeVal = {};
if (this.ruleFormData && this.ruleFormData['monitorTemp'] === 1) {
typeVal = this.linuxSystem;
} else {
typeVal = this.monitorTable;
}
Object.keys(typeVal).forEach(res => {
typeVal[res].forEach(item => {
this.checkParams[item.modelName] = [];
this.checkAllParams[item.modelName] = {
firstTitle: item.firstTitle,
secondTitle: item.secondTitle,
lastTitle: item.title,
data: []
};
});
})
},
// form验证
fnFormValid() {
return new Promise((resolve) => {
@@ -315,34 +150,11 @@
},
// 点击下一步获取多个table列表中所选中的行数据
selectAllChange () {
// this.allSelectedData = {};
// Object.keys(this.monitorTable).forEach(res => {
// this.monitorTable[res].forEach(item => {
// // 获取子组件的ref格式tableRef_${tableKey}
// const tableRef = this.$refs[`tableRef_${item.config.tableKey}`];
// if (tableRef && tableRef.length && tableRef[0].ids.length) {
// // 调用子组件的方法获取选中数据
// const selectedData = tableRef[0].getSelectedData();
// // firstTitle: '华为交换机', secondTitle: '监控项',
// selectedData['firstTitle'] = item.firstTitle;
// selectedData['secondTitle'] = item.secondTitle;
// selectedData['lastTitle'] = item.title;
// this.allSelectedData[selectedData.tableKey] = selectedData;
// }
// });
// });
this.lastStepView();
},
// 最后一步展示
lastStepView() {
this.synthesisList = Object.assign({}, this.checkAllParams);
},
// 单个选择按钮
handleCheckedCitiesChange(changeVal,iteListAll) {
if (iteListAll && iteListAll.time) {
this.checkAllParams[iteListAll.modelName].time = iteListAll && iteListAll.time;
}
this.checkAllParams[iteListAll.modelName].data = iteListAll['checkList'];
this.synthesisList = Object.assign({}, {data: this.linuxSystem}, {switchType: this.switchType});
},
// 提交
submit() {
@@ -351,7 +163,7 @@
},
// 返回
goBack() {
this.$router.push({path:'/resource/monitorStategy'});
this.$router.push({path:'/resource/alarmManage'});
},
// 监听事件
callback(result, dataVal, formVal) {
@@ -374,4 +186,17 @@
padding-left: 20px;
font-size: 1rem;
}
.el-tabs__content {
height: 90%;
}
::v-deep .el-checkbox__label {
width: 97%!important;
vertical-align: top;
}
.el-link.el-link--default:hover {
color: #606266;
}
.el-link.el-link--default {
vertical-align: sub;
}
</style>

View File

@@ -0,0 +1,74 @@
<template>
<div class="app-container">
<Form :config="{buttonGroup: []}" :formList="formList" :ruleFormData="ruleForm" @fnClick="callback"></Form>
<div class="form-header h4" style="background: #d4e3fc;padding: 15px 10px;border-radius: 5px">
<div class="disInlineBlock w30" style="color: #000;font-weight: 600;">
策略内容
</div>
</div>
<template v-if="ruleForm.monitorTemp === 1">
<div v-for="(item, index) of otherList['data']" style="margin-top: 10px">
<div style="width: 90%;margin: auto;">
<div v-for="city in item.checkList" class="mt20">
{{city.name}}
<template v-if="city && (city.num || city.towName)">
<span v-if="city.towName">{{city.towName}} {{city.typeInput}}</span>
<span v-if="city.num">{{city.typeSelect}}{{city.num}}<span v-if="city && city.numType === 'percent'">%</span>上报告警信息</span>
</template>
</div>
</div>
</div>
</template>
<template v-else>
<div style="padding: 50px">
接收来自交换机的snmp Trap信息:
<el-radio-group v-model="otherList.switchType">
<el-radio :label="1"></el-radio>
<el-radio :label="0"></el-radio>
</el-radio-group>
</div>
</template>
</div>
</template>
<script setup>
import Form from '@/components/form/index.vue';
export default {
name: 'AlarmManageView',
components: {Form},
props: {
ruleForm: {
type: Object,
default: () => ({})
},
otherList: {
type: Object,
default: () => ({})
}
},
data() {
return {
formList: [{
config: {title: '基本信息',readonly: true},
controls: {
id: {label: 'ID',hidden: true},
switchName: {label: '策略名称', span: 12, type: 'input'},
serverPort: {label: '描述', span: 12, type: 'textarea'},
resourceGroup: {label: '关联资源组', span: 12, type: 'select'},
time: {label: '修改时间', span: 12, type: 'date'}
}
}],
paramsData: {},
}
},
created() {
this.paramsData = this.$route && this.$route.query;
},
methods: {
// 监听事件
callback(result, dataVal, formVal) {}
}
}
</script>
<style>
</style>

View File

@@ -0,0 +1,340 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
<!--部门数据-->
<pane size="16">
<el-col>
<div class="head-container">
<el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
</div>
<div class="head-container">
<el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
</div>
</el-col>
</pane>
<!--用户数据-->
<pane size="84">
<el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="80px">
<el-col :span="7">
<el-form-item label="名称" prop="switchName">
<el-input
v-model="queryParams.switchName"
placeholder="请输入名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="类型" prop="bandwidthType">
<el-select
v-model="queryParams.bandwidthType"
placeholder="请选择类型"
clearable>
<el-option
v-for="dict in dict.type.rm_topology_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item class="lastBtnSty">
<el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-col>
</el-form>
<input type="file" ref="fileInput" @change="handleFileChange" style="display: none;">
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempType="{ row, column }">
<div @click="fnDetails(row, '1')">
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.connectedDeviceType}}</a>
</div>
</template>
<template #tempAuto="{ row, column }">
<div @click="fnDetails(row)">
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.connectedDeviceType}}</a>
</div>
</template>
</TableList>
<!-- 新建文件夹 -->
<el-dialog title="新建文件夹" :visible.sync="open" width="500px" append-to-body>
<el-form ref="noticeRef" :rules="rules" :model="formList" label-width="90px">
<el-row>
<el-col :span="20">
<el-form-item label="名称" prop="fileName">
<el-input v-model="formList.fileName" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="20">
<el-form-item label="描述" prop="remarks">
<el-input v-model="formList.remarks" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm(1)"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
<!-- 移动 -->
<el-dialog class="towDialog" title="移动" :visible.sync="openMove" width="700px" append-to-body>
<div class="w100" style="height: 300px">
<div>
<template v-for="(item,index) of moveList">
<span>{{item.switchName}}<span v-if="index !== moveList.length - 1"></span></span>
</template>
</div>
<div class="w100 mt10">
<span style="width: 13%;">移动到</span>
<treeselect v-model="catalogList" :options="deptOptions" class="disInlineBlock" style="width: 87%;vertical-align: middle;" :show-count="true" placeholder="请选择目录" />
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm(2)"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</pane>
</splitpanes>
</el-row>
</div>
</template>
<script setup>
import TableList from "@/components/table/index.vue"
import EchartsPie from "@/components/echartsList/pie.vue"
import {listTopology, delTopology} from "@/api/disRevenue/resource"
import {deptTreeSelect } from "@/api/system/user"
import { Splitpanes, Pane } from "splitpanes"
import Treeselect from "@riophae/vue-treeselect"
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
import "splitpanes/dist/splitpanes.css"
export default {
name: 'Filemanage',
components: {TableList,EchartsPie, Splitpanes, Pane, Treeselect},
dicts: ['rm_topology_type'],
data() {
return {
loading: true,
// 部门名称
deptName: undefined,
// 所有部门树选项
deptOptions: undefined,
defaultProps: {
children: "children",
label: "label"
},
showSearch: true,
roleList: [],
queryParams: {
total: 0,
pageNum: 1,
pageSize: 10
},
// 列显隐信息
columns: {
id: { label: `ID`, width: '50', visible: false },
switchName: { label: `名称`, minWidth: '250', visible: true },
switchSn: { label: `类型`, minWidth: '200', visible: true},
interfaceName: { label: `大小(KB)`, minWidth: '100', visible: true },
connectedDeviceType: { label: `路径`, minWidth: '200', visible: true },
serverName: { label: `描述`, minWidth: '200', visible: true},
md5: { label: `md5值`, minWidth: '160', visible: true},
createBy: { label: `创建人`, minWidth: '160', visible: true},
createTime: { label: `创建时间`, minWidth: '160', visible: true},
serverPort: { label: `修改时间`,minWidth: '160', visible: true }
},
config: {
searcherForm: [
{label: '交换机名称', prop: 'roleName', type: 'selset', options: []}
],
tableButton: {
top: [
{content: '上传文件', fnCode: 'upload', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:fileManage:upload'},
{content: '新建文件夹', fnCode: 'newFile', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:fileManage:file'},
{content: '移动', fnCode: 'move', type: 'warning', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:fileManage:move'},
],
line: [
{content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:fileManage:details'},
{content: '修改', fnCode: 'edit', type: 'text', icon: 'el-icon-edit', hasPermi: 'disRevenue:resource:fileManage:edit'},
{content: '删除', fnCode: 'delete', type: 'text', icon: 'el-icon-delete', hasPermi: 'disRevenue:resource:fileManage:delete'},
{content: '移动', fnCode: 'move', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:fileManage:move'},
{content: '复制', fnCode: 'copy', type: 'text', icon: 'el-icon-view', hasPermi: 'disRevenue:resource:fileManage:copy'},
{content: '下载', fnCode: 'download', type: 'text', icon: 'el-icon-download', hasPermi: 'disRevenue:resource:fileManage:download'},
]
}
},
open: false,
openMove: false,
moveList: [],
catalogList: null,
formList:{
fileName: '',
remarks: ''
},
rules: {
fileName: [
{ required: true, message: '请输入名称', trigger: 'blur' },
]
}
}
},
watch: {
// 根据名称筛选部门树
deptName(val) {
this.$refs.tree.filter(val)
}
},
created() {
this.getList();
this.getDeptTree();
},
methods: {
// 处理文件选择
handleFileChange(e) {
console.log('e====',e);
// const file = e.target.files[0] // 获取第一个选中的文件
// if (file) {
// selectedFile = file
// selectedFileName = file.name // 显示文件名
// // 可选:自动上传
// // uploadFile()
// } else {
// clearFile() // 未选择文件时清空
// }
},
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then(response => {
this.deptOptions = response.data;
})
},
// 筛选节点
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
this.queryParams.deptId = data.id;
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = true;
listTopology(this.addDateRange(this.queryParams)).then(response => {
this.roleList = response.rows;
this.queryParams.total = response.total;
this.loading = false;
})
},
fnDetails(row,type) {
if (type && type === '1') {
this.$router.push({
path:'/disRevenue/resource/resMonitor/digitalSuper',
query:{
id: row.id
}
});
} else {
this.$router.push({
path:'/disRevenue/resource/resMonitor/digitalAutoFind',
query:{
id: row.id
}
});
}
},
// 处理子组件传递的新值
handleValueChange(newValue) {
// 父组件更新自身数据,实现同步
this.showSearch = newValue;
// console.log('父组件拿到新值:', newValue);
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryRef");
this.handleQuery();
},
submitForm(num){
if (num === 1) {
this.$refs['noticeRef'].validate((valid) => {
if (!valid) {
return false;
}
this.open = false;
});
} else {
console.log('ddd==',this.catalogList);
this.openMove = false;
}
},
/** 取消按钮 */
cancel() {
this.open = false;
},
callback(result, rowData, selectChange, selectList) {
if (result && result.fnCode) {
switch (result.fnCode) {
case 'upload':
this.$refs.fileInput.click();
break;
case 'newFile':
this.open = true;
this.$nextTick(() => {
this.$refs['noticeRef'].resetFields();
});
break;
case 'move':
console.log('rowData==',rowData);
this.openMove = true;
this.moveList = selectList;
break;
case 'details':
this.$router.push({
path:'/disRevenue/resource/resMonitor/details/index',
query:{
id: rowData.id
}
});
break;
case 'delete':
this.$modal.confirm('是否确认删除数据项?').then(function() {
return delTopology(selectChange)
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功")
}).catch(() => {});
break;
default:
}
}
}
}
}
</script>
<style scoped>
::v-deep .lastBtnSty .el-form-item__content{
margin-left: 10px!important;
}
</style>

View File

@@ -96,7 +96,7 @@
<template v-for="(item,index) of monitorTable['nodeOne']">
<div class="plr-50">
<div v-for="city of item.checkList" class="w100 mt10 mb10 disInlineBlock fontSize15">
<div class="disInlineBlock w45">
<div class="disInlineBlock w60">
<span style="width: 200px" class="disInlineBlock">{{ city.name }}</span>
<span>{{city.towName}}</span>
</div>
@@ -168,7 +168,7 @@
synthesisList: {},
// 第一节点
ruleFormData: {
monitorTemp: 2,
monitorTemp: 1,
},
config: {
buttonGroup: []

View File

@@ -77,7 +77,7 @@
</el-form-item>
</el-col>
</el-form>
<TableList style="height: calc(100vh - 302px);" :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<TableList :columns="columns" :config="config" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
<template #tempType="{ row, column }">
<div @click="fnDetails(row, '1')">
<a href="javascript:;" style="color: #51afff;text-decoration: underline;">{{row.connectedDeviceType}}</a>