Skip to content

I
IT-monitor
Commit 25a5f652 authored by 11528's avatar 11528
Browse files
Options

Merge remote-tracking branch 'origin/master' into master

parents a297a995 43710f03
Hide whitespace changes
Inline Side-by-side
Showing with 1504 additions and 36 deletions
src/views/IntegratedMonitor/equipment.vue
View file @ 25a5f652
...@@ -67,7 +67,14 @@ ...@@ -67,7 +67,14 @@
:expand-row-keys="expand" :expand-row-keys="expand"
:tree-props="{children: 'child'}" :tree-props="{children: 'child'}"
> >
<el-table-column label="名称" prop="name" show-overflow-tooltip /> <el-table-column label="名称" prop="name" show-overflow-tooltip>
<template slot-scope="scope">
<img v-if="scope.row.noIcon !== '1'" :src="scope.row.icon" class="name-icon">
<span v-if="scope.row.noIcon === '1' && scope.row.color === 'green'" class="square-green" />
<span v-if="scope.row.noIcon === '1' && scope.row.color === 'yellow'" class="square-yellow" />
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="IP" prop="ip" show-overflow-tooltip /> <el-table-column label="IP" prop="ip" show-overflow-tooltip />
<el-table-column label="类型" prop="type" show-overflow-tooltip /> <el-table-column label="类型" prop="type" show-overflow-tooltip />
<el-table-column label="最新数据时间" prop="newTime" show-overflow-tooltip /> <el-table-column label="最新数据时间" prop="newTime" show-overflow-tooltip />
...@@ -146,16 +153,48 @@ export default { ...@@ -146,16 +153,48 @@ export default {
countDataList: [], countDataList: [],
showList: false, showList: false,
dataList: [ dataList: [
{ id: '1', name: '127.0.0.1', ip: '127.0.0.1', type: '容器', newTime: '2022-05-06 15:36:43', describe: '', { id: '1', icon: require('@/assets/image/shebei.png'), name: '127.0.0.1', ip: '', type: '容器', newTime: '2022-05-06 15:36:43', describe: '',
child: [ child: [
{ id: '11', name: '虚拟设备', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '', { id: '11', icon: require('@/assets/image/shebei9-guzhang.png'), name: '虚拟化平台', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '111', icon: require('@/assets/image/shebei2-zhengchang.png'), name: '智盘服务器10.1.1.50', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1111', color: 'green', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1112', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1113', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' }
] },
{ id: '112', icon: require('@/assets/image/shebei2-guzhang.png'), name: 'shebei2-guzhang.png', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1121', color: 'yellow', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1122', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1123', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' }
] }
] },
{ id: '12', icon: require('@/assets/image/shebei9-weixian.png'), name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [ child: [
{ id: '111', name: 'ping', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '', { id: '121', icon: require('@/assets/image/shebei2-zhengchang.png'), name: '运维服务器_192.168.6.16', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [ child: [
{ id: '1111', name: 'ping 192.168.8.20', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' } { id: '1211', color: 'green', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1212', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1213', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' }
] },
{ id: '122', icon: require('@/assets/image/shebei2-guzhang.png'), name: '人脸应用服务器-10.1.1.53', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1221', color: 'yellow', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '进程', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1222', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '进程', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1223', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '进程', newTime: '2022-05-06 15:36:43', describe: '' }
] } ] }
] }, ] },
{ id: '12', name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '' } { id: '13', icon: require('@/assets/image/shebei3-zhengchang.png'), name: '192.168.90.31', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '131', color: 'green', noIcon: '1', name: '内存监视量', ip: '10.1.1.50', type: 'JVM操作系统', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '132', color: 'green', noIcon: '1', name: 'HTTP通道监控量', ip: '10.1.1.50', type: 'HTTP通道监控量', newTime: '2022-05-06 15:36:43', describe: '' }
] },
{ id: '14', icon: require('@/assets/image/shebei1-zhengchang.png'), name: '10.164.171.190', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '141', color: 'green', noIcon: '1', name: 'Ping 10.164.171.190', ip: '10.1.1.50', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '142', color: 'green', noIcon: '1', name: 'mk_ejb_server1', ip: '10.1.1.50', type: '状态信息', newTime: '2022-05-06 15:36:43', describe: '' }
] }
] } ] }
], ],
// 获取row的key值 // 获取row的key值
...@@ -296,7 +335,26 @@ export default { ...@@ -296,7 +335,26 @@ export default {
border-left: 4px solid transparent; border-left: 4px solid transparent;
} }
.mointorBody{ .mointorBody{
.name-icon{
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
.square-green{
background-color: #3db58d;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
.square-yellow{
background-color: #edb845;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
} }
.mointorHead{ .mointorHead{
padding-top: 10px; padding-top: 10px;
......
src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue 0 → 100644
View file @ 25a5f652
<template>
<div id="container_max" class="logicalClass">
<div class="logicalHead">
<div class="logicalBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="logicalBody">
<el-table
:data="dataList"
border
:row-key="getKeys"
:expand-row-keys="expand"
:tree-props="{children: 'child'}"
>
<el-table-column label="公司" prop="company" show-overflow-tooltip />
<el-table-column label="类型" prop="type" show-overflow-tooltip />
<el-table-column width="300px" label="操作">
<!-- <template slot-scope="scope">-->
<el-link @click="addGroup">添加逻辑组</el-link>
<el-link @click="addObject">添加对象</el-link>
<el-link @click="updateRow">编辑</el-link>
<el-link @click="deleteRow">移除</el-link>
<!-- </template>-->
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'LogicalGroup',
data() {
return {
dataList: [
{ id: '1', name: '127.0.0.1', type: '容器', describe: '',
child: [
{ id: '11', name: '虚拟设备', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '111', name: 'ping', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1111', name: 'ping 192.168.8.20', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' }
] }
] },
{ id: '12', name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '' }
] }
],
// 获取row的key值
getKeys(row) {
return row.id
},
// 要展开的行，数值的元素是row的key值
expand: [],
}
},
mounted() {
this.handleExpand() // 全屏
this.handleExpandList() // 展开列表
},
created() {
},
methods: {
handleExpandList() {
this.expand.push(this.dataList[0].id)
},
refresh() {
window.location.reload() // 刷新页面
},
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
}
}
}
</script>
<style lang="scss">
.logicalClass{
.logicalHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.logicalBtns{
float: right;
.headBtn{
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW{
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
}
</style>
src/views/IntegratedMonitor/viewExhibition/monitorView.vue
View file @ 25a5f652
...@@ -25,7 +25,12 @@ ...@@ -25,7 +25,12 @@
border border
style="width: 100%;padding-top: 20px" style="width: 100%;padding-top: 20px"
> >
<el-table-column label="设备" prop="equipment" show-overflow-tooltip /> <el-table-column label="设备" prop="equipment" show-overflow-tooltip>
<template slot-scope="scope">
<img :src="scope.row.icon" class="name-icon">
<span>{{ scope.row.equipment }}</span>
</template>
</el-table-column>
<el-table-column label="监测点" prop="point" show-overflow-tooltip /> <el-table-column label="监测点" prop="point" show-overflow-tooltip />
<el-table-column label="" prop="value" show-overflow-tooltip /> <el-table-column label="" prop="value" show-overflow-tooltip />
<el-table-column label="" prop="value2" show-overflow-tooltip /> <el-table-column label="" prop="value2" show-overflow-tooltip />
...@@ -50,7 +55,7 @@ ...@@ -50,7 +55,7 @@
</el-tab-pane> </el-tab-pane>
<el-tab-pane name="searchBtn"> <el-tab-pane name="searchBtn">
<span slot="label"> <span slot="label">
<el-form ref="searchForm" :inline="true" label-width="auto" :model="searchForm"> <el-form ref="searchForm" :inline="true" label-width="auto" :model="searchForm">
<el-form-item label="设备标题:"> <el-form-item label="设备标题:">
<el-select <el-select
v-model="searchForm.title" v-model="searchForm.title"
...@@ -111,9 +116,9 @@ export default { ...@@ -111,9 +116,9 @@ export default {
type: '' type: ''
}, },
tableData: [ tableData: [
{ equipment: '智盘服务器10.1.1.50', point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '连接' }, { equipment: '智盘服务器10.1.1.50', icon: require('@/assets/image/shebei2-zhengchang.png'), point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '连接' },
{ equipment: '总部24F-机柜8-17U-16U-电票系统', point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '/dev/sda2 (/media/disk)' }, { equipment: '总部24F-机柜8-17U-16U-电票系统', icon: require('@/assets/image/shebei2-guzhang.png'), point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '/dev/sda2 (/media/disk)' },
{ equipment: '人脸识别服务器-10.1.1.52', point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: 'Snmp连接检测' } { equipment: '人脸识别服务器-10.1.1.52', icon: require('@/assets/image/shebei2-zhengchang.png'), point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: 'Snmp连接检测' }
], ],
tableData2: [ tableData2: [
{ equipment: '餐厅服务器-10.1.1.61', point: 'C:', value: '1', value2: '磁盘使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' }, { equipment: '餐厅服务器-10.1.1.61', point: 'C:', value: '1', value2: '磁盘使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
...@@ -121,10 +126,11 @@ export default { ...@@ -121,10 +126,11 @@ export default {
{ equipment: '餐厅服务器-10.1.1.61', point: '虚拟内存', value: '1', value2: '内存使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' } { equipment: '餐厅服务器-10.1.1.61', point: '虚拟内存', value: '1', value2: '内存使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' }
], ],
equipmentList: [ equipmentList: [
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' }, { img: require('@/assets/image/shebei1-weizhi.png'), name: '' },
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' }, { img: require('@/assets/image/shebei2-zhengchang.png'), name: '智盘服务器10.1.1.50' },
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' }, { img: require('@/assets/image/shebei2-guzhang.png'), name: '智盘服务器10.1.1.50' },
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' } { img: require('@/assets/image/shebei2-guzhang.png'), name: '智盘服务器10.1.1.50' },
{ img: require('@/assets/image/shebei2-zhengchang.png'), name: '智盘服务器10.1.1.50' }
], ],
activeName: 'first', activeName: 'first',
data: [{ data: [{
...@@ -202,6 +208,12 @@ export default { ...@@ -202,6 +208,12 @@ export default {
<style lang="scss"> <style lang="scss">
.monitorView{ .monitorView{
.name-icon{
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
.el-form-item__label-wrap{ .el-form-item__label-wrap{
line-height: 10px!important; line-height: 10px!important;
} }
...@@ -216,7 +228,6 @@ export default { ...@@ -216,7 +228,6 @@ export default {
width: 110px; width: 110px;
height: 110px; height: 110px;
padding: 29px; padding: 29px;
border-radius: 50%;
cursor: pointer; cursor: pointer;
background-size: 55px auto; background-size: 55px auto;
background-repeat: no-repeat; background-repeat: no-repeat;
......
src/views/IntegratedMonitor/warning/warningFault.vue 0 → 100644
View file @ 25a5f652
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="addWarnFault">添加</el-button>
<el-button class="headBtn" @click="updateWarnFault">修改</el-button>
<el-button class="headBtn" @click="deleteWarnFault">删除</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">告警压缩视图</span>
<el-tabs v-model="activeName" type="card" style="margin-top: 20px">
<el-tab-pane label="未告警处理" name="first">
<el-table
ref="multipleTable1"
:data="tableData1"
border
style="width: 100%;padding-top: 20px"
@selection-change="handleSelectionChange1"
>
<el-table-column type="selection" />
<el-table-column label="级别" prop="level" show-overflow-tooltip />
<el-table-column label="设备名称" prop="devName" show-overflow-tooltip />
<el-table-column label="监测点" prop="monPoint" show-overflow-tooltip />
<el-table-column label="次数" prop="times" show-overflow-tooltip width="90" />
<el-table-column label="持续时间" prop="duration" show-overflow-tooltip />
<el-table-column label="开始时间" prop="startTime" show-overflow-tooltip />
<el-table-column label="最新时间" prop="newTime" show-overflow-tooltip />
<el-table-column label="操作" width="90">
<template slot-scope="scope">
<el-link style="color: deepskyblue" @click="updateRow(scope.row)">处理</el-link>
<el-link style="color: red" @click="deleteRow(scope.row)">忽略</el-link>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleAllSelection1">全选</el-button>
<el-button @click="toggleSelection1">反选</el-button>
<el-button @click="clearSelection1">全不选</el-button>
<el-link style="margin-left: 10px" @click="updateRow">处理</el-link>
<el-link style="margin-left: 10px" @click="deleteRow">忽略</el-link>
</div>
</el-tab-pane>
<el-tab-pane label="正在告警处理" name="second">
<el-table
ref="multipleTable2"
:data="tableData2"
border
style="width: 100%;padding-top: 20px"
@selection-change="handleSelectionChange2"
>
<el-table-column type="selection" />
<el-table-column label="级别" prop="level" show-overflow-tooltip />
<el-table-column label="设备名称" prop="devName" show-overflow-tooltip />
<el-table-column label="监测点" prop="monPoint" show-overflow-tooltip />
<el-table-column label="次数" prop="times" show-overflow-tooltip width="90" />
<el-table-column label="持续时间" prop="duration" show-overflow-tooltip />
<el-table-column label="开始时间" prop="startTime" show-overflow-tooltip :formatter="changeTime" />
<el-table-column label="最新时间" prop="newTime" show-overflow-tooltip :formatter="changeTime" />
<el-table-column label="操作" width="90">
<template slot-scope="scope">
<el-link style="color: deepskyblue" @click="updateRow(scope.row)">处理</el-link>
<el-link style="color: red" @click="deleteRow(scope.row)">忽略</el-link>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleAllSelection2">全选</el-button>
<el-button @click="toggleSelection2">反选</el-button>
<el-button @click="clearSelection2">全不选</el-button>
<el-link style="margin-left: 10px" @click="updateRow">备注</el-link>
<el-link style="margin-left: 10px" @click="deleteRow">确认</el-link>
</div>
</el-tab-pane>
</el-tabs>
</div>
<el-dialog class="addGroup" width="50%" title="添加页面" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :model="addWarnForm">
<el-form-item label="组名称：">
<el-input v-model="addWarnForm.name" />
</el-form-item>
<el-form-item label="每页显示告警条数：">
<el-input-number v-model="warningNum" style="width: 100%" controls-position="right" @change="handleChange" />
</el-form-item>
<el-form-item label="选择设备：">
<div class="treebody1">
<el-tree
:data="data1"
show-checkbox
:props="defaultProps"
/>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</span>
</el-dialog>
<el-dialog class="updateGroup" width="50%" title="编辑页面" :visible.sync="updateDialog">
<el-form ref="updateWarnForm" label-width="auto" :model="updateWarnForm">
<el-form-item label="组名称：">
<el-input v-model="updateWarnForm.name" />
</el-form-item>
<el-form-item label="每页显示告警条数：">
<el-input-number v-model="warningNum2" style="width: 100%" controls-position="right" @change="handleChange2" />
</el-form-item>
<el-form-item label="选择设备：">
<div class="treebody1">
<el-tree
:data="data1"
show-checkbox
:props="defaultProps"
/>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeUpdateDialog">确定</el-button>
<el-button @click="closeUpdateDialog">取消</el-button>
</span>
</el-dialog>
<el-dialog class="handleGroup" width="50%" title="备注" :visible.sync="handleDialog">
<el-form ref="updateWarnForm" label-width="auto" :model="handleWarnForm">
<el-form-item label="追加内容：">
<el-input v-model="handleWarnForm.textArea" type="textarea" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeHandleDialog">确定</el-button>
<el-button @click="closeHandleDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import moment from 'moment'
export default {
name: 'WarningFault',
data() {
return {
activeName: 'first',
tableData1: [
{
level: '1级',
devName: '测试设备1',
monPoint: '1号监测点',
times: '2',
duration: '133天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备2',
monPoint: '',
times: '3',
duration: '32天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '1级',
devName: '测试设备3',
monPoint: '',
times: '1',
duration: '156天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备4',
monPoint: '',
times: '2',
duration: '7天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '1级',
devName: '测试设备5',
monPoint: '2号监测点',
times: '2',
duration: '56天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: ''
},
{
level: '1级',
devName: '测试设备6',
monPoint: '',
times: '2',
duration: '56天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: ''
},
{
level: '1级',
devName: '测试设备7',
monPoint: '1号监测点',
times: '5',
duration: '55天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备1',
monPoint: '',
times: '6',
duration: '146天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备4',
monPoint: '3号监测点',
times: '4',
duration: '676天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备7',
monPoint: '6号监测点',
times: '9',
duration: '345天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
}
],
tableData2: [
{
level: '1级',
devName: '测试设备6',
monPoint: '',
times: '2',
duration: '56天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: ''
},
{
level: '1级',
devName: '测试设备7',
monPoint: '1号监测点',
times: '5',
duration: '55天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备1',
monPoint: '',
times: '6',
duration: '146天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备4',
monPoint: '3号监测点',
times: '4',
duration: '676天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备7',
monPoint: '6号监测点',
times: '9',
duration: '345天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm'),
newTime: moment(Date()).format('YYYY-MM-DD HH:mm')
}
],
multipleSelection1: [],
multipleSelection2: [],
addWarnForm: {
name: ''
},
addDialog: false,
warningNum: 100,
updateWarnForm: {
name: ''
},
updateDialog: false,
warningNum2: 100,
defaultProps: {
children: 'children',
label: 'label'
},
data1: [{
id: 1,
label: '本机容器',
children: [{
id: 2,
label: '虚拟化平台',
children: [{
id: 5,
label: '三级 1-1-1'
}, {
id: 6,
label: '三级 1-1-2'
}]
}, {
id: 3,
label: '虚拟设备',
children: [{
id: 7,
label: '三级 2-1'
}, {
id: 8,
label: '三级 2-2'
}]
}, {
id: 4,
label: '虚拟化平台'
}]
}],
handleWarnForm: {
textArea: ''
},
handleDialog: false
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
handleChange() {},
refresh() {
window.location.reload() // 刷新页面
},
updateRow() {
this.handleDialog = true
},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
addWarnFault() {
this.addDialog = true
},
updateWarnFault() {
this.updateDialog = true
},
closeUpdateDialog() {
this.updateDialog = false
},
deleteWarnFault() {
this.$confirm('此操作将删除数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
handleSelectionChange1(val) {
this.multipleSelection1 = val
},
toggleAllSelection1() {
this.$refs.multipleTable1.toggleAllSelection()
},
clearSelection1() {
this.$refs.multipleTable1.clearSelection()
},
toggleSelection1() {
this.tableData1.forEach((ele) => {
if (this.multipleSelection1.indexOf(ele) >= 0) {
this.$refs.multipleTable1.toggleRowSelection(ele, false)
} else {
this.$refs.multipleTable1.toggleRowSelection(ele, true)
}
})
},
handleSelectionChange2(val) {
this.multipleSelection2 = val
},
toggleAllSelection2() {
this.$refs.multipleTable2.toggleAllSelection()
},
clearSelection2() {
this.$refs.multipleTable2.clearSelection()
},
toggleSelection2() {
this.tableData2.forEach((ele) => {
if (this.multipleSelection2.indexOf(ele) >= 0) {
this.$refs.multipleTable2.toggleRowSelection(ele, false)
} else {
this.$refs.multipleTable2.toggleRowSelection(ele, true)
}
})
},
closeDialog() {
this.addDialog = false
},
closeHandleDialog() {
this.handleDialog = false
},
// changeTime(row, column) {
// const data = row[column.property]
// if (data === undefined) { return '' }
// return moment(data).format('YYYY-MM-DD')
// }
}
}
</script>
<style lang="scss">
.warnModule {
.strategyRow {
padding: 5px 0;
}
.treebody1{
border: solid 1px #d7d7d7;
font-size: 12px;
padding: 6px;
overflow-y: scroll;
height: 200px;
}
.warnHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns {
float: right;
.headBtn {
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW {
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.warnBody {
padding: 15px;
}
}
</style>
src/views/IntegratedMonitor/warning/warningFaultLog.vue 0 → 100644
View file @ 25a5f652
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="exportWarning">导出报表</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">告警故障查询</span>
<el-radio-group v-model="selectBtn" @change="customBtnFun">
<el-radio-button label="今天"></el-radio-button>
<el-radio-button label="昨天"></el-radio-button>
<el-radio-button label="自定义"></el-radio-button>
</el-radio-group>
<el-table
:data="tableData1"
border
style="width: 100%;padding-top: 20px">
<el-table-column label="级别" prop="level" show-overflow-tooltip />
<el-table-column label="设备名称" prop="devName" show-overflow-tooltip />
<el-table-column label="监测点" prop="monPoint" show-overflow-tooltip />
<el-table-column label="次数" prop="times" show-overflow-tooltip width="90" />
<el-table-column label="开始时间" prop="startTime" show-overflow-tooltip />
<el-table-column label="持续时间" prop="duration" show-overflow-tooltip />
</el-table>
</div>
<el-dialog class="customClass" width="50%" title="查询时间" :visible.sync="customDialog" @close="closeCustomDialog">
<el-form ref="customForm" label-width="auto">
<el-form-item label="开始时间：">
<div class="pickBody">
<el-date-picker
v-model="startTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="结束日期：">
<div class="pickBody">
<el-date-picker
v-model="endTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="监测点：">
<div class="treebody3">
<el-tree
:data="data1"
show-checkbox
:props="defaultProps"
/>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeCustomDialog">确认</el-button>
<el-button @click="closeCustomDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import moment from 'moment'
export default {
name: 'WarningFaultLog',
data() {
return {
activeName: 'first',
tableData1: [
{
level: '1级',
devName: '测试设备1',
monPoint: '1号监测点',
times: '2',
duration: '133天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备2',
monPoint: '',
times: '3',
duration: '32天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '1级',
devName: '测试设备3',
monPoint: '',
times: '1',
duration: '156天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备4',
monPoint: '',
times: '2',
duration: '7天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '1级',
devName: '测试设备5',
monPoint: '2号监测点',
times: '2',
duration: '56天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '1级',
devName: '测试设备6',
monPoint: '',
times: '2',
duration: '56天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '1级',
devName: '测试设备7',
monPoint: '1号监测点',
times: '5',
duration: '55天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备1',
monPoint: '',
times: '6',
duration: '146天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备4',
monPoint: '3号监测点',
times: '4',
duration: '676天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
},
{
level: '2级（危险）',
devName: '测试设备7',
monPoint: '6号监测点',
times: '9',
duration: '345天',
startTime: moment(Date()).format('YYYY-MM-DD HH:mm')
}
],
selectBtn: '今天',
customDialog: false,
data1: [{
id: 1,
label: '本机容器',
children: [{
id: 2,
label: '虚拟化平台',
children: [{
id: 5,
label: '三级 1-1-1'
}, {
id: 6,
label: '三级 1-1-2'
}]
}, {
id: 3,
label: '虚拟设备',
children: [{
id: 7,
label: '三级 2-1'
}, {
id: 8,
label: '三级 2-2'
}]
}, {
id: 4,
label: '虚拟化平台'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
startTime: new Date(),
endTime: new Date()
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
customBtnFun(val) {
if (val === '自定义') {
this.customDialog = true
}
},
changeTime(row, column) {},
exportWarning() {
this.$confirm('是否导出数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
closeCustomDialog() {
this.customDialog = false
this.selectBtn = '今天'
}
}
}
</script>
<style lang="scss">
.warnModule {
.strategyRow {
padding: 5px 0;
}
.treebody3{
border: solid 1px #d7d7d7;
font-size: 12px;
padding: 6px;
overflow-y: scroll;
}
.warnHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns {
float: right;
.headBtn {
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW {
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.warnBody {
padding: 15px;
}
}
</style>
src/views/IntegratedMonitor/warning/warningFloodControl.vue 0 → 100644
View file @ 25a5f652
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">告警泛滥控制</span>
<el-link type="primary" @click="addWarnFlood">新增</el-link>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="名称" prop="name" show-overflow-tooltip />
<el-table-column label="类型" prop="type" show-overflow-tooltip />
<el-table-column label="范围" prop="range" show-overflow-tooltip />
<el-table-column label="状态" prop="state" show-overflow-tooltip />
<el-table-column label="操作">
<template slot-scope="scope">
<el-link @click="updateWarning(scope.row)" style="color: cornflowerblue">编辑</el-link>
<el-link @click="deleteRow(scope.row)" style="color: red">删除</el-link>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog class="addWarnClass" width="50%" title="添加告警泛滥设置" :visible.sync="addWarnDialog">
<el-form ref="addForm" label-width="auto" :model="addForm">
<el-form-item label="名称:">
<el-input v-model="addWarnForm.name" />
</el-form-item>
<el-form-item label="策略:">
<span>告警泛滥的阈值是</span>
<el-input class="lineInput" v-model="threshold.num1" style="display: inline"></el-input>
<span>次/分钟,如果有连续</span>
<el-input class="lineInput" v-model="threshold.num2" style="display: inline"></el-input>
<span>次检测到告警的频率超过阈值,则进入告警泛滥状态,此时的告警都不发送.若告警泛滥期间又检测到有连续</span>
<el-input class="lineInput" v-model="threshold.num3" style="display: inline"></el-input>
<span>次告警的频率低于阈值,则退出告警泛滥状态,此时告警又可以正常发送.</span><br><br>
<el-checkbox v-model="checked">在进入和退出告警泛滥状态时发送一次告警</el-checkbox>
</el-form-item>
<el-form-item label="类型:">
<el-radio-group v-model="styleRadio">
<el-radio :label="1">短信</el-radio>
<el-radio :label="2">邮件</el-radio>
<el-radio :label="3">声音</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="目标:">
<el-radio-group v-model="stateRadio">
<el-radio :label="1">所有其它，没有单独指定的所有目标</el-radio>
<el-radio :label="2">单独指定</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeAddDialog">确认</el-button>
<el-button @click="closeAddDialog">取消</el-button>
</span>
</el-dialog>
<el-dialog class="addGroup" width="50%" title="编辑告警泛滥设置" :visible.sync="updateDialog">
<el-form ref="addWarnForm" label-width="auto" :model="updateWarnForm">
<el-form-item label="名称:">
<el-input v-model="updateWarnForm.name" />
</el-form-item>
<el-form-item label="策略:">
<span>告警泛滥的阈值是</span>
<el-input class="lineInput" v-model="threshold.num1" style="display: inline"></el-input>
<span>次/分钟,如果有连续</span>
<el-input class="lineInput" v-model="threshold.num2" style="display: inline"></el-input>
<span>次检测到告警的频率超过阈值,则进入告警泛滥状态,此时的告警都不发送.若告警泛滥期间又检测到有连续</span>
<el-input class="lineInput" v-model="threshold.num3" style="display: inline"></el-input>
<span>次告警的频率低于阈值,则退出告警泛滥状态,此时告警又可以正常发送.</span><br><br>
<el-checkbox v-model="checked">在进入和退出告警泛滥状态时发送一次告警</el-checkbox>
</el-form-item>
<el-form-item label="类型:">
<el-radio-group v-model="styleRadio">
<el-radio :label="1">短信</el-radio>
<el-radio :label="2">邮件</el-radio>
<el-radio :label="3">声音</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="目标:">
<el-radio-group v-model="stateRadio">
<el-radio :label="1">所有其它，没有单独指定的所有目标</el-radio>
<el-radio :label="2">单独指定</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeUpdateDialog">确定</el-button>
<el-button @click="closeUpdateDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'WarningFloodControl',
data() {
return {
styleRadio: 1,
stateRadio: 1,
updateWarnForm: {
name: '',
strategy: '',
type: '',
target: ''
},
addWarnForm: {
name: '',
strategy: '',
type: '',
target: ''
},
threshold: {
num1: 10,
num2: 10,
num3: 3
},
addWarnDialog: false,
updateDialog: false,
tableData: [
{ name: '邮件', type: '短信', range: '其余所有', state: '允许' },
{ name: '存储', type: '邮件', range: '特指某项', state: '禁用' },
{ name: '光报警', type: '声音', range: '其余所有', state: '允许' },
{ name: '测试', type: '声音', range: '其余所有', state: '允许' },
{ name: '测试存储', type: '邮件', range: '特指某项', state: '禁用' },
{ name: '测试光报警', type: '短信', range: '其余所有', state: '允许' },
{ name: '报警', type: '短信', range: '特指某项', state: '禁用' },
{ name: '声报警', type: '声音', range: '其余所有', state: '允许' },
{ name: '电报警', type: '邮件', range: '特指某项', state: '禁用' },
{ name: '测试报警', type: '声音', range: '其余所有', state: '允许' }
]
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
closeAddDialog() {
this.addWarnDialog = false
},
refresh() {
window.location.reload() // 刷新页面
},
updateWarning() {
this.updateDialog = true
},
closeUpdateDialog() {
this.updateDialog = false
},
addWarnFlood() {
this.addWarnDialog = true
},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
}
}
}
</script>
<style lang="scss">
.warnModule {
.strategyRow {
padding: 5px 0;
}
.el-input__inner {
padding: 0 0 0 9px;
}
.lineInput {
/deep/ .el-input__inner{
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
border-bottom-width: 1px;
border-radius: 0;
text-align: center;
width: 70px;
}
}
.warnHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns {
float: right;
.headBtnW {
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.warnBody {
padding: 15px;
}
}
</style>
src/views/IntegratedMonitor/warning/warningLog.vue 0 → 100644
View file @ 25a5f652
<template>
<div id="container_max" class="warnModule">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="exportWarning">导出报表</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="warnBody">
<span style="font-size:24px;margin-right: 10px ">告警日志查询</span>
<el-radio-group v-model="selectBtn" @change="customBtnFun">
<el-radio-button label="今天"></el-radio-button>
<el-radio-button label="昨天"></el-radio-button>
<el-radio-button label="自定义"></el-radio-button>
</el-radio-group>
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="告警名称" prop="name" show-overflow-tooltip />
<el-table-column label="告警时间" prop="wTime" show-overflow-tooltip />
<el-table-column label="管理对象" prop="wObj" show-overflow-tooltip />
<el-table-column label="监测点名称" prop="monPoint" show-overflow-tooltip />
<el-table-column label="状态" prop="state" show-overflow-tooltip />
<el-table-column label="发送方式" prop="sendMeth" show-overflow-tooltip />
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-link @click="deleteRow(scope.row)" style="color: red">删除</el-link>
</template>
</el-table-column>
<el-table-column label="备注" prop="remarks" show-overflow-tooltip />
</el-table>
</div>
<el-dialog class="customClass" width="50%" title="查询时间" :visible.sync="customDialog" @close="closeCustomDialog">
<el-form ref="customForm" label-width="auto">
<el-form-item label="开始时间：">
<div class="pickBody">
<el-date-picker
v-model="startTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="结束日期：">
<div class="pickBody">
<el-date-picker
v-model="endTime"
type="date"
placeholder="选择日期"
style="width: 100%">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="监测点：">
<div class="treebody4">
<el-tree
:data="data1"
show-checkbox
:props="defaultProps"
/>
</div>
</el-form-item>
<el-form-item label="告警方式：">
<div>
<el-select v-model="value" style="width: 100%">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="告警组：">
<div class="treebody4">
<el-tree
:data="data2"
show-checkbox
:props="defaultProps"
node-key="id"
:default-expanded-keys="[1,1]"
/>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeCustomDialog">确认</el-button>
<el-button @click="closeCustomDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'WarningLog',
data() {
return {
data1: [{
id: 1,
label: '本机容器',
children: [{
id: 2,
label: '虚拟化平台',
children: [{
id: 5,
label: '三级 1-1-1'
}, {
id: 6,
label: '三级 1-1-2'
}]
}, {
id: 3,
label: '虚拟设备',
children: [{
id: 7,
label: '三级 2-1'
}, {
id: 8,
label: '三级 2-2'
}]
}, {
id: 4,
label: '虚拟化平台'
}]
}],
data2: [{
id: 1,
label: '总容器',
children: [{
id: 2,
label: '默认告警组',
children: [{
id: 4,
label: '三级 1-1-1'
}, {
id: 5,
label: '三级 1-1-2'
}]
}, {
id: 3,
label: 'wwww组',
children: [{
id: 6,
label: '三级级 2-1'
}, {
id: 7,
label: '三级 2-2'
}]
}]
}],
selectBtn: '今天',
options: [{
value: 1,
label: '全部'
}, {
value: 2,
label: '短信'
}, {
value: 3,
label: '钉钉'
}, {
value: 4,
label: '邮件'
}, {
value: 5,
label: '声音'
}, {
value: 6,
label: '通告'
}],
value: 1,
customDialog: false,
startTime: new Date(),
endTime: new Date(),
defaultProps: {
children: 'children',
label: 'label'
},
tableData: [
{ name: '测试存储', wTime: '2022-03-10', wObj: '', monPoint: '1号监测点', state: '禁用', sendMeth: '短信', remarks: '' },
{ name: '报警', wTime: '2022-04-30', wObj: '', monPoint: '2号监测点', state: '启动', sendMeth: '声音', remarks: '' },
{ name: '声报警', wTime: '2022-03-11', wObj: '管理员', monPoint: '2号监测点', state: '启动', sendMeth: '', remarks: '' },
{ name: '测试报警', wTime: '2022-05-10', wObj: '', monPoint: '1号监测点', state: '启动', sendMeth: '邮件', remarks: '测试报警功能' },
{ name: '邮件', wTime: '2022-01-10', wObj: '', monPoint: '5号监测点', state: '禁用', sendMeth: '', remarks: '' },
{ name: '光报警', wTime: '2021-03-10', wObj: '用户', monPoint: '4号监测点', state: '禁用', sendMeth: '', remarks: '' },
{ name: '测试光报警', wTime: '2021-03-10', wObj: '', monPoint: '1号监测点', state: '禁用', sendMeth: '短信', remarks: '测试报警功能' },
{ name: '测试', wTime: '2021-03-11', wObj: '', monPoint: '6号监测点', state: '禁用', sendMeth: '', remarks: '测试报警功能' },
{ name: '存储', wTime: '2021-03-12', wObj: 'admin', monPoint: '3号监测点', state: '禁用', sendMeth: '', remarks: '' },
{ name: '电报警', wTime: '2021-03-24', wObj: 'sys', monPoint: '6号监测点', state: '禁用', sendMeth: '', remarks: '' }
]
}
},
created() {
},
mounted() {
if (this.$route.query.type === '1') {
this.addWarnDialog = true
}
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
closeCustomDialog() {
this.customDialog = false
this.selectBtn = '今天'
},
customBtnFun(val) {
if (val === '自定义') {
this.customDialog = true
}
},
exportWarning() {
this.$confirm('是否导出数据', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
},
deleteRow() {
this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {})
}
}
}
</script>
<style lang="scss">
.warnModule {
.strategyRow {
padding: 5px 0;
}
.treebody4{
border: solid 1px #d7d7d7;
font-size: 12px;
padding: 6px;
overflow-y: scroll;
}
.warnHead {
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.warnBtns {
float: right;
.headBtn {
line-height: 10px;
color: #fff;
border-color: #768398;
background-color: #768398;
}
.headBtnW {
border-radius: 4px;
line-height: 22px;
font-size: 12px;
padding: 0 10px;
margin: 0 5px;
}
}
}
.warnBody {
padding: 15px;
}
}
</style>
src/views/IntegratedMonitor/warning/warningSetup.vue
View file @ 25a5f652
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<el-table-column label="名称" prop="name" show-overflow-tooltip /> <el-table-column label="名称" prop="name" show-overflow-tooltip />
<el-table-column label="状态" prop="type" show-overflow-tooltip /> <el-table-column label="状态" prop="type" show-overflow-tooltip />
<el-table-column label="动作数量" prop="count" show-overflow-tooltip /> <el-table-column label="动作数量" prop="count" show-overflow-tooltip />
<el-table-column label="发送方式" prop="sendMode" show-overflow-tooltip />\ <el-table-column label="发送方式" prop="sendMode" show-overflow-tooltip />
<el-table-column label="操作"> <el-table-column label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-link @click="update(scope.row)">编辑</el-link> <el-link @click="update(scope.row)">编辑</el-link>
...@@ -73,10 +73,17 @@ ...@@ -73,10 +73,17 @@
:data="data" :data="data"
show-checkbox show-checkbox
node-key="id" node-key="id"
:default-expanded-keys="[2, 3]" :default-expanded-keys="[1, 3]"
:default-checked-keys="[5]" :default-checked-keys="[5]"
:props="defaultProps" :props="defaultProps"
/> >
<template slot-scope="{ node, data }">
<span>
<img :src="data.icon" class="treeIcon">
<label>{{ node.label }}</label>
</span>
</template>
</el-tree>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="告警描述:"> <el-form-item label="告警描述:">
...@@ -160,31 +167,36 @@ export default { ...@@ -160,31 +167,36 @@ export default {
return { return {
data: [{ data: [{
id: 1, id: 1,
icon: require('@/assets/image/shebei.png'),
label: '本机容器', label: '本机容器',
children: [{ children: [{
id: 4, id: 11,
icon: require('@/assets/image/shebei9-guzhang.png'),
label: '虚拟化平台', label: '虚拟化平台',
children: [{ children: [{
id: 9, id: 111,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-1' label: '三级 1-1-1'
}, { }, {
id: 10, id: 112,
icon: require('@/assets/image/shebei2-zhengchang.png'),
label: '三级 1-1-2'
}]
},
{
id: 12,
icon: require('@/assets/image/shebei9-weixian.png'),
label: '虚拟化平台',
children: [{
id: 121,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-1'
}, {
id: 122,
icon: require('@/assets/image/shebei2-guzhang.png'),
label: '三级 1-1-2' label: '三级 1-1-2'
}] }]
}] }]
}, {
id: 2,
label: '虚拟设备',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '虚拟化平台'
}], }],
defaultProps: { defaultProps: {
children: 'children', children: 'children',
...@@ -300,6 +312,10 @@ export default { ...@@ -300,6 +312,10 @@ export default {
padding: 6px; padding: 6px;
height: 250px; height: 250px;
overflow-y: scroll; overflow-y: scroll;
.treeIcon{
width: 17px;
height: 17px;
}
} }
.ninthSteps{ .ninthSteps{
padding: 10px 30px 30px; padding: 10px 30px 30px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment