告警管理、告警日志、文件管理
This commit is contained in:
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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;
|
||||
|
||||
72
src/views/disRevenue/resource/alarmLog/alarmLogDetails.vue
Normal file
72
src/views/disRevenue/resource/alarmLog/alarmLogDetails.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
340
src/views/disRevenue/resource/fileManage/fileManage.vue
Normal file
340
src/views/disRevenue/resource/fileManage/fileManage.vue
Normal 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>
|
||||
@@ -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: []
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user