Skip to content

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

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

parents fcaf8ba2 87c90a6b
Hide whitespace changes
Inline Side-by-side
Showing with 2550 additions and 36 deletions
src/layout/components/Sidebar/Logo.vue
View file @ 23236685
......@@ -25,7 +25,7 @@ export default {
data() {
return {
title: 'IT监控系统',
logo: require('@/assets/image/menulogo.png')
logo: require('@/assets/image/logo2.png')
}
}
}
......
src/layout/components/Sidebar/index.vue
View file @ 23236685
......@@ -14,6 +14,10 @@
>
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
<div onclick="handleWindowOpen()" class="menuLinkDiv">
<i class="el-icon-view" />
<span class="menuLink">机房可视化</span>
</div>
</el-scrollbar>
</div>
</template>
......@@ -49,8 +53,45 @@ export default {
isCollapse() {
return !this.sidebar.opened
}
},
mounted() {
window.handleWindowOpen = this.handleWindowOpen
},
methods: {
handleWindowOpen() {
window.open('http://47.110.242.76:8088/')
}
}
}
</script>
<style lang="scss">
.sidebar-menu{
.menuLinkDiv{
height: 56px;
line-height: 56px;
font-size: 14px;
//padding: 0 20px;
list-style: none;
box-sizing: border-box;
white-space: nowrap;
cursor: pointer;
position: relative;
.el-icon-view{
position: relative;
top: 3px;
margin-left: 17px;
margin-right: 15px;
font-size: 20px;
color: rgb(255, 255, 255);
}
.menuLink{
line-height: 56px;
font-size: 14px;
color: rgb(255, 255, 255);
}
&:hover {
background: #1A2137;
}
}
}
</style>
src/views/IntegratedMonitor/equipment.vue
View file @ 23236685
......@@ -96,10 +96,10 @@
<el-table-column label="描述" prop="describe" show-overflow-tooltip />
<el-table-column width="300px" label="操作">
<template slot-scope="scope">
<el-link @click="addEquipment">添加设备</el-link>
<el-link @click="addRow">添加组</el-link>
<el-link @click="addRow">编辑</el-link>
<el-link @click="deleteRow">删除</el-link>
<el-link type="primary" @click="addEquipment">添加设备</el-link>
<el-link type="primary" @click="addRow">添加组</el-link>
<el-link type="primary" @click="addRow">编辑</el-link>
<el-link type="primary" @click="deleteRow">删除</el-link>
<el-popover
placement="bottom"
width="200"
......@@ -108,7 +108,7 @@
<div onclick="clickLinux()" class="tooltipText">配置Linux自定义监测</div>
<div class="tooltipText" @click="addWarn">添加告警</div>
<div onclick="prohibit()" class="tooltipText">临时禁止</div>
<el-link slot="reference">更多
<el-link type="primary" slot="reference">更多
<div class="caretDown" />
</el-link>
</el-popover>
......
src/views/IntegratedMonitor/logMonitor/snmpTrapJournal.vue
View file @ 23236685
......@@ -45,8 +45,8 @@
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
</el-form-item>
<el-button id="fullScreen" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button style="float: right;margin: 0 10px" @click="refresh">刷新</el-button>
<el-button id="fullScreen" type="primary" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button type="primary" style="float: right;margin: 0 10px" @click="refresh">刷新</el-button>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
......
src/views/IntegratedMonitor/logMonitor/sylogJournal.vue
View file @ 23236685
......@@ -45,7 +45,7 @@
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
</el-form-item>
<el-button id="fullScreen" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button id="fullScreen" type="primary" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
......
src/views/IntegratedMonitor/reportStatistics/flowStatistics.vue 0 → 100644
View file @ 23236685
<template>
<div id="sylog-container" class="flowStatistics-container">
<div style="padding: 10px;text-align: right">
<el-button type="primary" @click="changeTime">添加</el-button>
<el-button type="primary" @click="changeTime">修改</el-button>
<el-button type="primary" @click="handleDelete">删除</el-button>
<el-button type="primary" @click="handleExport">导出报表</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button id="fullScreen" type="primary">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
</div>
<div class="placeholder" />
<div class="app-container-realTime">
<div style="font-weight: bold">设备管理列表</div>
<el-form ref="queryForm" style="padding: 0 0 0 10px;margin-top: 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>今天</el-button>
<el-button>昨天</el-button>
<el-button>三天</el-button>
<el-button>一个月</el-button>
<el-button @click="changeCustom">自定义</el-button>
</el-button-group>
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button @click="handleChangeCharts('0')">柱状图</el-button>
<el-button @click="handleChangeCharts('1')">数据</el-button>
</el-button-group>
</el-form>
<div style="padding: 10px">
<div id="echarts-one" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_one" ref="chart_one" style="height: 35vh" />
</div>
<div v-show="echartsFlag === '1'" style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="data"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="监测时间" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.monitorTime || '-' }}
</template>
</el-table-column>
<el-table-column label="4__ethernet-csmacd_FastEthernet0/3/1">
<el-table-column :show-overflow-tooltip="true" label="接收流量(kb/s)" align="center" prop="monitorName">
<template slot-scope="scope">
{{ scope.row.send1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送流量(kb/s)" align="center" width="100" prop="logContent">
<template slot-scope="scope">
{{ scope.row.get1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="总收流量(kb/s)" align="center" prop="cpu">
<template slot-scope="scope">
{{ scope.row.sum1 || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="6__softwareLoopback_Loopback0">
<el-table-column :show-overflow-tooltip="true" label="接收流量(kb/s)" align="center" prop="monitorName">
<template slot-scope="scope">
{{ scope.row.send1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送流量(kb/s)" align="center" width="100" prop="logContent">
<template slot-scope="scope">
{{ scope.row.get1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="总收流量(kb/s)" align="center" prop="cpu">
<template slot-scope="scope">
{{ scope.row.sum1 || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="2__ethernet-csmacd_GigabitEthernet0/1">
<el-table-column :show-overflow-tooltip="true" label="接收流量(kb/s)" align="center" prop="monitorName">
<template slot-scope="scope">
{{ scope.row.send1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送流量(kb/s)" align="center" width="100" prop="logContent">
<template slot-scope="scope">
{{ scope.row.get1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="总收流量(kb/s)" align="center" prop="cpu">
<template slot-scope="scope">
{{ scope.row.sum1 || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="3__ethernet-csmacd_FastEthernet0/3/0">
<el-table-column :show-overflow-tooltip="true" label="接收流量(kb/s)" align="center" prop="monitorName">
<template slot-scope="scope">
{{ scope.row.send1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送流量(kb/s)" align="center" width="100" prop="logContent">
<template slot-scope="scope">
{{ scope.row.get1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="总收流量(kb/s)" align="center" prop="cpu">
<template slot-scope="scope">
{{ scope.row.sum1 || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column label="5__other_Null0">
<el-table-column :show-overflow-tooltip="true" label="接收流量(kb/s)" align="center" prop="monitorName">
<template slot-scope="scope">
{{ scope.row.send1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送流量(kb/s)" align="center" width="100" prop="logContent">
<template slot-scope="scope">
{{ scope.row.get1 || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="总收流量(kb/s)" align="center" prop="cpu">
<template slot-scope="scope">
{{ scope.row.sum1 || '-' }}
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
<div v-show="echartsFlag === '0'" style="padding: 10px 10px 10px 0">
<el-table
v-loading="loading"
border
:data="initialData"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="颜色" width="80" align="center" prop="monitorObject">
<template slot-scope="scope">
<div v-if="scope.row.id === '1'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#b2d48d"></div>
<div v-if="scope.row.id === '2'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#89a3ec"></div>
<div v-if="scope.row.id === '3'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#5fb9c9"></div>
<div v-if="scope.row.id === '4'" style="cursor:pointer;height:24px;width:50px;margin:5px auto;background-color:#ec89bc"></div>
</template>
</el-table-column>
<el-table-column type="index" label="名次" width="55" align="center" />
<el-table-column :show-overflow-tooltip="true" label="管理对象" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.object || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.point || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="流量总和(Gb)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.flowSum || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="接收最大值(kb/s)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.getMax || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="接收最小值(kb/s)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.getMin || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="接收最小值(kb/s)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.getAve || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送最大值(kb/s)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.sendMax || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送最小值(kb/s)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.sendMin || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送最小值(kb/s)" align="center" prop="monitorObject">
<template slot-scope="scope">
{{ scope.row.sendAve || '-' }}
</template>
</el-table-column>
</el-table>
</div>
<el-dialog :visible.sync="open" title="添加报告" width="700px">
<el-form label-width="110px">
<el-form-item label="名称">
<el-input />
</el-form-item>
<el-form-item label="搜索">
<el-input
placeholder="请输入关键词"
prefix-icon="el-icon-search"
/>
</el-form-item>
<el-form-item label="选择监测点">
<div class="equipmentDiv">
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
/>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="customOpen" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</div>
</template>
<script>
import screenfull from 'screenfull'
import * as echarts from 'echarts'
export default {
name: 'Sylog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 是否显示弹出层
customOpen: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
echartsFlag: '0',
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
currentTab: '1',
data: [
{
monitorTime: '2022-05-25 00:00:00',
get1: '0.00',
send1: '15266.00',
sum1: '15266.00'
},
{
monitorTime: '2022-05-25 01:00:00',
get1: '0.00',
send1: '0.00',
sum1: '0.00'
},
{
monitorTime: '2022-05-25 02:00:00',
get1: '0.00',
send1: '2455.00',
sum1: '2455.00'
},
{
monitorTime: '2022-05-25 03:00:00',
get1: '2455.00',
send1: '0.00',
sum1: '2455.00'
},
{
monitorTime: '2022-05-25 04:00:00',
get1: '0.00',
send1: '54545.00',
sum1: '54545.00'
},
{
monitorTime: '2022-05-25 05:00:00',
get1: '34.00',
send1: '15266.00',
sum1: '15300.00'
},
{
monitorTime: '2022-05-25 06:00:00',
get1: '24.00',
send1: '15266.00',
sum1: '15290.00'
},
{
monitorTime: '2022-05-25 07:00:00',
get1: '15234.00',
send1: '15266.00',
sum1: '30500.00'
},
{
monitorTime: '2022-05-25 08:00:00',
get1: '0.00',
send1: '15266.00',
sum1: '15266.00'
},
{
monitorTime: '2022-05-25 09:00:00',
get1: '0.00',
send1: '15266.00',
sum1: '15266.00'
}
],
initialData: [
{
id: '1',
object: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
point: '5__other_Null0',
flowSum: '20.00',
getMax: '28.042',
getMin: '0.000',
getAve: '14.021',
sendMax: '29.000',
sendMin: '13.000',
sendAve: '20.000'
},
{
id: '2',
object: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
point: '3__ethernet-csmacd_FastEthernet0/3/0',
flowSum: '18.00',
getMax: '28.042',
getMin: '0.000',
getAve: '14.021',
sendMax: '29.000',
sendMin: '13.000',
sendAve: '20.000'
},
{
id: '3',
object: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
point: '2__ethernet-csmacd_GigabitEthernet0/1',
flowSum: '0.22',
getMax: '28.042',
getMin: '0.000',
getAve: '14.021',
sendMax: '29.000',
sendMin: '13.000',
sendAve: '20.000'
},
{
id: '4',
object: '10.1.1.13(总部24-机柜2-16U-去贵阳的核心路由)',
point: '6__softwareLoopback_Loopback0',
flowSum: '0.00',
getMax: '0.000',
getMin: '0.000',
getAve: '0.000',
sendMax: '29.000',
sendMin: '13.000',
sendAve: '20.000'
}
],
treeData: [{
id: 1,
label: '本机容器',
children: [{
id: 4,
label: '虚拟化平台',
children: [{
id: 9,
label: '虚拟设备'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '服务器硬件',
children: [{
id: 5,
label: '云打印服务器'
}, {
id: 6,
label: '服务器'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
this.genderStatistics3()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-one'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_one')).resize()
})
})
},
methods: {
/** 饼状图（1）*/
genderStatistics3() {
const myChartGender = echarts.init(document.getElementById('dataCharts_one'))
var optionEnter3 = {
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: [
{
name: '接收流量(KB)',
position: 'left',
nameLocation: 'end',
type: 'value',
axisLabel: {
formatter: (v) => { return Math.abs(v) }
}
},
{
name: '发送流量(KB)',
nameLocation: 'start',
position: 'left',
type: 'value',
axisLabel: {
formatter: (v) => { return Math.abs(v) }
}
}
],
series: [
{
data: [24, 21, 22, 22.5, 20.3, 24.4, 21.1],
stack: 'x',
type: 'bar',
label: {
normal: {
formatter: (v) => { return Math.abs(v.data) }
}
}
},
{
data: [18, 29, 25.3, 21, 25.8, 20, 21.1],
stack: 'x',
type: 'bar',
label: {
normal: {
formatter: (v) => { return Math.abs(v.data) }
}
}
},
{
data: [-2, -61, -8, -21, -20.8, -20.6, -55],
stack: 'x',
type: 'bar'
},
{
data: [-20, -21, -21.3, -21, -20.8, -20.6, -20.1],
stack: 'x',
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter3)
},
handleChangeCharts(value) {
this.echartsFlag = value
},
handleExport() {
window.location.href = process.env.BASE_URL + 'exportFile.xls'
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleDelete() {
const h = this.$createElement
this.$confirm(h('p', null, [
h('span', null, '确定删除本报告吗？ '),
h('br', null),
h('span', { style: 'font-size: 8px' }, '提示：该操作无法恢复')
]), '', {
customClass: 'custom-confirm',
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
changeCustom() {
this.customOpen = !this.customOpen
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.flowStatistics-container{
.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;
}
}
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.app-container-realTime {
padding: 0px 20px 10px;
font-size: 18px;
.equipmentDiv{
max-height: 200px;
height: 200px;
overflow: auto;
border: 1px solid #d2d6de;
padding: 10px 0;
border-radius: 4px;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
}
</style>
src/views/IntegratedMonitor/reportStatistics/realTimeReport.vue
View file @ 23236685
<template>
<div id="sylog-container" class="realTime-container">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="changeTime">添加</el-button>
<el-button class="headBtn" @click="changeTime">修改</el-button>
<el-button class="headBtn" @click="handleDelete">删除</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullScreen" class="headBtnW">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
</div>
<div style="padding: 10px;text-align: right">
<el-button type="primary" @click="changeTime">添加</el-button>
<el-button type="primary" @click="changeTime">修改</el-button>
<el-button type="primary" @click="handleDelete">删除</el-button>
<el-button type="primary" @click="handleExport">导出报表</el-button>
<el-button type="primary" @click="refresh">刷新</el-button>
<el-button id="fullScreen" type="primary">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
</div>
<div class="placeholder" />
<div class="app-container-realTime">
<el-tabs v-model="currentTab" type="card">
<el-tab-pane label="实时报告" name="1">
......@@ -108,9 +108,12 @@
</div>
</el-form-item>
<el-form-item label="选择监测点类型">
<span style="font-weight: bold">监测点类型</span>
<span style="font-weight: bold;width: 100%">监测点类型</span>
<br/>
<el-select />
<br/>
<span style="font-weight: bold">监测指标</span>
<br/>
<el-select placeholder="请选择" />
</el-form-item>
</el-form>
......@@ -364,6 +367,9 @@ export default {
type: 'warning'
})
},
handleExport() {
window.location.href = process.env.BASE_URL + 'exportFile.xls'
},
/** 查询登录日志 */
getList() {
this.loading = true
......@@ -417,6 +423,11 @@ export default {
}
}
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.app-container-realTime {
padding: 0 20px;
font-size: 18px;
......@@ -428,11 +439,6 @@ export default {
padding: 10px 0;
border-radius: 4px;
}
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
.st-square{
cursor: pointer;
margin-right: 6px;
......
src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue
View file @ 23236685
......@@ -28,11 +28,11 @@
<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="addWarn">添加告警</el-link>
<el-link @click="addObject">添加对象</el-link>
<el-link @click="addGroup">编辑</el-link>
<el-link @click="deleteRow">移除</el-link>
<el-link type="primary" @click="addGroup">添加逻辑组</el-link>
<el-link type="primary" @click="addWarn">添加告警</el-link>
<el-link type="primary" @click="addObject">添加对象</el-link>
<el-link type="primary" @click="addGroup">编辑</el-link>
<el-link type="primary" @click="deleteRow">移除</el-link>
<!-- </template>-->
</el-table-column>
</el-table>
......
src/views/assetManagement/assetList.vue
View file @ 23236685
......@@ -65,8 +65,8 @@
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-link @click="updateRow(scope.row)">编辑</el-link>
<el-link @click="deleteRow(scope.row)">删除</el-link>
<el-link type="primary" @click="updateRow(scope.row)">编辑</el-link>
<el-link type="primary" @click="deleteRow(scope.row)">删除</el-link>
</template>
</el-table-column>
</el-table>
......
src/views/businessMonitoring/businessList.vue
View file @ 23236685
......@@ -3,8 +3,8 @@
<!-- <div class="placeholder" />-->
<div style="padding: 10px">
<div class="mb12 font-small-bold" style="width: 100px;display: inline-block">业务列表</div>
<el-button id="fullScreen" style="float: right;margin: -5px 10px 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button style="float: right;margin: -5px 10px 10px" @click="refresh">刷新</el-button>
<el-button id="fullScreen" type="primary" style="float: right;margin: -5px 10px 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button type="primary" style="float: right;margin: -5px 10px 10px" @click="refresh">刷新</el-button>
<el-table
v-loading="loading"
border
......
src/views/login/login.vue
View file @ 23236685
<template>
<div class="login">
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
<img class="fy-logo" src="../../assets/image/loginLogo.png">
<img class="fy-logo" src="../../assets/image/rongchuanglogo.png">
<div class="title">网络设备监控管理平台</div>
<div class="login-form-content">
<el-form-item prop="username">
......@@ -59,7 +59,9 @@
</div>
</el-form>
<!-- 底部 -->
<div class="el-login-footer" />
<div class="el-login-footer">
<span>Copyright 天津市融创软通科技股份有限公司</span>
</div>
</div>
</template>
......@@ -214,7 +216,7 @@ export default {
}
}
.blue-btn{
background-color: #093F8F;
background-color: #A22A48;
width: 100%;
height: 40px;
border-radius: 4px;
......@@ -251,7 +253,7 @@ export default {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
bottom: 10px;
width: 100%;
text-align: center;
color: #fff;
......
src/views/movingRingMonitoring/powerCab.vue 0 → 100644
View file @ 23236685
<template>
<div id="sylog-container" class="app-container-Sylog">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-form-item prop="logContent">
<el-input
v-model="queryParams.logContent"
placeholder="监测点名称"
clearable
:maxlength="30"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
</el-form-item>
<el-button id="fullScreen" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button style="float: right;margin: 0 10px" @click="refresh">刷新</el-button>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
<el-table
v-loading="loading"
border
:data="data"
:header-cell-style="{textAlign: 'center'}"
@selection-change="handleSelectionChange"
>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.name || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.pointName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测项名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.projectName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测值" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.value || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="采集时间" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.createTime | transformDateByFormat('yyyy-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="当前状态" align="center" prop="ipAddress">
<template slot-scope="scope">
<div :style="{ backgroundColor: scope.row.status === '1' ? '#3db58d' : '#eb5d5d', borderRadius: '10px'}" style="text-align: center;width: 80px;color: white;height: 30px;line-height: 30px;margin: 4px 0;">
{{ scope.row.status === '1' ? '正常' : '告警' }}
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警信息" align="center" prop="logContent">
<template>
<el-button @click="goWarn">历史告警</el-button>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="运行曲线" align="center" prop="logContent">
<template>
<el-button @click="goHistory">历史</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<el-dialog :visible.sync="open" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'SnmpTrapLog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
data: [
{
name: '23层配电柜',
status: '1',
projectName: '电压',
value: '告警',
createTime: '2022-05-17 00:59:01',
pointName: '23层配电柜'
},
{
name: '1层配电柜',
status: '0',
projectName: '电压',
value: '正常',
createTime: '2022-05-17 00:59:01',
pointName: '1层配电柜'
}
],
initialData: [
{
ipAddress: '39.100.39.54',
createTime: '2022-05-17 00:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: PAM 1 more authentication failure; logname= uid=0 euid=0 tty=ssh ruser= rhost=171.44.81.37 user=root'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 22:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: Disconnected from 171.44.81.37 port 19840 [preauth]'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 20:59:01',
logContent: 'Apr 8 18:01:01 mxsoft run-parts(/etc/cron.hourly)[1255 finished 0anacron'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-14 22:59:01',
logContent: 'Apr 8 18:01:01 mxsoft systemd: Started Session 10 of user root.'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-11 22:59:01',
logContent: 'Apr 8 18:00:01 mxsoft CROND[12308]: (root) CMD (/usr/lib64/sa/sa1 1 1)'
}
]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
},
methods: {
goWarn(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '1'
}
})
},
goHistory(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '2'
}
})
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.app-container-Sylog {
padding: 0;
font-size: 18px;
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
}
</style>
src/views/movingRingMonitoring/somkeDetection.vue 0 → 100644
View file @ 23236685
<template>
<div id="sylog-container" class="app-container-Sylog">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-form-item prop="logContent">
<el-input
v-model="queryParams.logContent"
placeholder="监测点名称"
clearable
:maxlength="30"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
</el-form-item>
<el-button id="fullScreen" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button style="float: right;margin: 0 10px" @click="refresh">刷新</el-button>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
<el-table
v-loading="loading"
border
:data="data"
:header-cell-style="{textAlign: 'center'}"
@selection-change="handleSelectionChange"
>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.name || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.pointName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测项名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.projectName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测值" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.value || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="采集时间" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.createTime | transformDateByFormat('yyyy-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="当前状态" align="center" prop="ipAddress">
<template slot-scope="scope">
<div :style="{ backgroundColor: scope.row.status === '1' ? '#3db58d' : '#eb5d5d', borderRadius: '10px'}" style="text-align: center;width: 80px;color: white;height: 30px;line-height: 30px;margin: 4px 0;">
{{ scope.row.status === '1' ? '正常' : '告警' }}
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警信息" align="center" prop="logContent">
<template>
<el-button @click="goWarn">历史告警</el-button>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="运行曲线" align="center" prop="logContent">
<template>
<el-button @click="goHistory">历史</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<el-dialog :visible.sync="open" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'SnmpTrapLog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
data: [
{
name: '烟感',
status: '1',
projectName: '状态',
value: '告警',
createTime: '2022-05-17 00:59:01',
pointName: '烟感'
},
{
name: '火警',
status: '0',
projectName: '状态',
value: '正常',
createTime: '2022-05-17 00:59:01',
pointName: '火警'
}
],
initialData: [
{
ipAddress: '39.100.39.54',
createTime: '2022-05-17 00:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: PAM 1 more authentication failure; logname= uid=0 euid=0 tty=ssh ruser= rhost=171.44.81.37 user=root'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 22:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: Disconnected from 171.44.81.37 port 19840 [preauth]'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 20:59:01',
logContent: 'Apr 8 18:01:01 mxsoft run-parts(/etc/cron.hourly)[1255 finished 0anacron'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-14 22:59:01',
logContent: 'Apr 8 18:01:01 mxsoft systemd: Started Session 10 of user root.'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-11 22:59:01',
logContent: 'Apr 8 18:00:01 mxsoft CROND[12308]: (root) CMD (/usr/lib64/sa/sa1 1 1)'
}
]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
},
methods: {
goWarn(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '1'
}
})
},
goHistory(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '2'
}
})
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.app-container-Sylog {
padding: 0;
font-size: 18px;
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
}
</style>
src/views/movingRingMonitoring/tempHumidity.vue 0 → 100644
View file @ 23236685
<template>
<div id="sylog-container" class="app-container-Sylog">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-form-item prop="logContent">
<el-input
v-model="queryParams.logContent"
placeholder="监测点名称"
clearable
:maxlength="30"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
</el-form-item>
<el-button id="fullScreen" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button style="float: right;margin: 0 10px" @click="refresh">刷新</el-button>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
<el-table
v-loading="loading"
border
:data="data"
:header-cell-style="{textAlign: 'center'}"
@selection-change="handleSelectionChange"
>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.name || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.pointName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测项名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.projectName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测值" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.value || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="采集时间" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.createTime | transformDateByFormat('yyyy-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="当前状态" align="center" prop="ipAddress">
<template slot-scope="scope">
<div :style="{ backgroundColor: scope.row.status === '1' ? '#3db58d' : '#eb5d5d', borderRadius: '10px'}" style="text-align: center;width: 80px;color: white;height: 30px;line-height: 30px;margin: 4px 0;">
{{ scope.row.status === '1' ? '正常' : '告警' }}
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警信息" align="center" prop="logContent">
<template>
<el-button @click="goWarn">历史告警</el-button>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="运行曲线" align="center" prop="logContent">
<template>
<el-button @click="goHistory">历史</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<el-dialog :visible.sync="open" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'SnmpTrapLog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
data: [
{
name: '温湿度1号',
status: '1',
projectName: '温度',
value: '告警',
createTime: '2022-05-17 00:59:01',
pointName: '温湿度1号'
},
{
name: '温湿度2号',
status: '0',
projectName: '湿度',
value: '正常',
createTime: '2022-05-17 00:59:01',
pointName: '温湿度2号'
}
],
initialData: [
{
ipAddress: '39.100.39.54',
createTime: '2022-05-17 00:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: PAM 1 more authentication failure; logname= uid=0 euid=0 tty=ssh ruser= rhost=171.44.81.37 user=root'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 22:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: Disconnected from 171.44.81.37 port 19840 [preauth]'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 20:59:01',
logContent: 'Apr 8 18:01:01 mxsoft run-parts(/etc/cron.hourly)[1255 finished 0anacron'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-14 22:59:01',
logContent: 'Apr 8 18:01:01 mxsoft systemd: Started Session 10 of user root.'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-11 22:59:01',
logContent: 'Apr 8 18:00:01 mxsoft CROND[12308]: (root) CMD (/usr/lib64/sa/sa1 1 1)'
}
]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
},
methods: {
goWarn(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '1'
}
})
},
goHistory(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '2'
}
})
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.app-container-Sylog {
padding: 0;
font-size: 18px;
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
}
</style>
src/views/movingRingMonitoring/warnNotes.vue 0 → 100644
View file @ 23236685
<template>
<div id="sylog-container" class="app-container-Sylog">
<div class="mb12 font-small-bold">告警记录</div>
<el-tabs v-model="activeTab" type="card">
<el-tab-pane label="概述" name="1">
<el-form>
<el-row>
<el-col :span="12">
<el-row>
<el-col :span="6">
<el-form-item label-width="80px" label="监测频率:">
<span>
1分钟
</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="130px" label="最新数据时间:">
<span>
2019-12-13 14:02:43
</span>
</el-form-item></el-col>
<el-col :span="6">
<el-form-item label-width="80px" label="类型:">
<span>
温湿度
</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label-width="80px" label="任务计划:">
<span>
7*24
</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="130px" label="持续时间:">
<span>
0秒
</span>
</el-form-item></el-col>
<el-col :span="6">
<el-form-item label-width="80px" label="重要性:">
<span>
普通指标
</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label-width="80px" label="告警:">
<span>
已设置
</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="130px" label="错误后重试次数:">
<span>
3
</span>
</el-form-item></el-col>
<el-col :span="6">
<el-form-item label-width="80px" label="错误频率:">
<span>
未设置
</span>
</el-form-item>
</el-col>
</el-row>
<el-form-item label-width="80px" label="ID:">
<span>
MXSE.1.SD.137.SubMonitor.jdrk_humiture_
</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="padding: 10px">
<el-table
v-loading="loading"
border
:data="initialData"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="监测时间" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.index || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="值" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.value }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="危险阈值" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.danger }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="故障阈值" align="center" prop="logContent">
<template slot-scope="scope">
{{ scope.row.error || '-' }}
</template>
</el-table-column>
</el-table>
</div>
<div class="mb12 font-small-bold" style="font-size: 30px">今日告警 ()</div>
<div style="padding: 10px">
<el-table
v-loading="loading"
border
:data="theData"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column :show-overflow-tooltip="true" label="告警时间" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.time || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警名称" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.name }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="状态" align="center" prop="createTime">
<template>
<span class="st-square" style="background-color: #3db58d;" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="发送方式" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.way }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="备注" align="center" prop="logContent">
<template slot-scope="scope">
{{ scope.row.error || '-' }}
</template>
</el-table-column>
</el-table>
</div>
</el-tab-pane>
<el-tab-pane label="报告" name="2">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>最近40条</el-button>
<el-button>今天</el-button>
<el-button>昨天</el-button>
<el-button>三天</el-button>
<el-button @click="changeTime">自定义时间</el-button>
</el-button-group>
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>日对比</el-button>
<el-button>月对比</el-button>
</el-button-group>
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button @click="handleChangeCharts('0')">柱状图</el-button>
<el-button @click="handleChangeCharts('1')">面积图</el-button>
</el-button-group>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
<el-row :gutter="12">
<el-col :span="12">
<div id="echarts-enter" class="span_1">
<div v-show="echartsFlag === '1'" id="dataCharts_enter" ref="chart_enter" style="height: 35vh" />
</div>
<div id="echarts-one" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_one" ref="chart_one" style="height: 35vh" />
</div>
</el-col>
<el-col :span="12">
<div id="echarts-enter2" class="span_1">
<div v-show="echartsFlag === '1'" id="dataCharts_enter2" ref="chart_enter2" style="height: 35vh" />
</div>
<div id="echarts-two" class="span_1">
<div v-show="echartsFlag === '0'" id="dataCharts_two" ref="chart_two" style="height: 35vh" />
</div>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane label="数据" name="3">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>最近40条</el-button>
<el-button>今天</el-button>
<el-button>三天</el-button>
<el-button>7天</el-button>
<el-button>30天</el-button>
<el-button @click="changeTime">自定义</el-button>
</el-button-group>
<el-button-group style="margin-right: 10px;padding-bottom: 10px">
<el-button>全部</el-button>
<el-button>正常</el-button>
<el-button>危险</el-button>
<el-button>故障</el-button>
<el-button>其他</el-button>
</el-button-group>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
<el-table
v-loading="loading"
border
:data="data"
:header-cell-style="{textAlign: 'center'}"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column :show-overflow-tooltip="true" label="监测时间" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.monitorTime || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="状态" align="center" prop="ipAddress">
<template>
<span class="st-square" style="background-color: #3db58d;" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="温度（°C）" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.temp }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="湿度（%RH）" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.rh }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="备注" align="center" prop="logContent">
<template slot-scope="scope">
{{ scope.row.logContent || '-' }}
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
</el-tab-pane>
</el-tabs>
<el-dialog :visible.sync="open" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
import * as echarts from 'echarts'
export default {
name: 'SnmpTrapLog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
// 表单参数
activeTab: this.$route.query.tabs || '1',
// 表单参数
echartsFlag: '1',
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
data: [
{
monitorTime: '2019-12-13 14:01:39',
temp: '21.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:03:39',
temp: '26.10',
rh: '24.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:04:30',
temp: '26.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 15:01:39',
temp: '26.10',
rh: '24.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '21.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '21.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '21.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '21.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '21.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '21.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '25.10',
rh: '23.60',
logContent: ''
},
{
monitorTime: '2019-12-13 14:01:39',
temp: '22.10',
rh: '25.60',
logContent: ''
}
],
initialData: [
{
index: '湿度 (%RH)',
value: '23.700',
danger: '',
error: ''
},
{
index: '温度 (°C)',
value: '20.900',
danger: '>= 25',
error: '>= 27'
}
],
theData: [
{
time: '2019-12-14 14:01:39',
name: '高温告警',
way: '互联网',
error: ''
},
{
time: '2019-12-13 14:22:39',
name: '低温告警',
way: '互联网',
error: ''
},
{
time: '2019-12-13 13:01:39',
name: '高湿度告警',
way: '互联网',
error: ''
},
{
time: '2019-12-13 12:01:39',
name: '高温告警',
way: '互联网',
error: ''
},
{
time: '2019-12-13 11:01:39',
name: '高温告警',
way: '互联网',
error: ''
}
]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.genderStatistics()
this.genderStatistics2()
// this.genderStatistics3()
// this.genderStatistics4()
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-enter'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter')).resize()
})
})
erd.listenTo(document.getElementById('echarts-enter2'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_enter2')).resize()
})
})
erd.listenTo(document.getElementById('echarts-one'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_one')).resize()
})
})
erd.listenTo(document.getElementById('echarts-two'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_two')).resize()
})
})
},
methods: {
/** 饼状图（1）*/
genderStatistics() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter'))
var optionEnter = {
tooltip: {
trigger: 'item'
},
title: {
left: 'center',
text: '温度（°C）'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
color: '#3DB58D',
series: [
{
data: [20, 21, 21.3, 21, 20.8, 20.6, 20.1],
type: 'line',
areaStyle: {}
}
]
}
myChartGender.setOption(optionEnter)
},
/** 饼状图（2）*/
genderStatistics2() {
const myChartGender = echarts.init(document.getElementById('dataCharts_enter2'))
var optionEnter2 = {
tooltip: {
trigger: 'item'
},
title: {
left: 'center',
text: '湿度（°C）'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
color: '#3DB58D',
series: [
{
data: [24, 23.8, 23.9, 24.4, 24.2, 24.6, 23.9],
type: 'line',
areaStyle: {}
}
]
}
myChartGender.setOption(optionEnter2)
},
/** 饼状图（1）*/
genderStatistics3() {
const myChartGender = echarts.init(document.getElementById('dataCharts_one'))
var optionEnter3 = {
tooltip: {
trigger: 'item'
},
title: {
left: 'center',
text: '温度（°C）'
},
xAxis: {
type: 'category',
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
color: '#3DB58D',
series: [
{
data: [20, 21, 21.3, 21, 20.8, 20.6, 20.1],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter3)
},
/** 饼状图（2）*/
genderStatistics4() {
const myChartGender = echarts.init(document.getElementById('dataCharts_two'))
var optionEnter4 = {
tooltip: {
trigger: 'item'
},
title: {
left: 'center',
text: '湿度（°C）'
},
xAxis: {
type: 'category',
data: ['13:25:00\n19-12-13', '13:30:00\n19-12-13', '13:35:00\n19-12-13', '13:40:00\n19-12-13', '13:45:00\n19-12-13', '13:50:00\n19-12-13', '13:55:00\n19-12-13']
},
yAxis: {
type: 'value'
},
color: '#3DB58D',
series: [
{
data: [20, 21, 21.3, 21, 20.8, 20.6, 20.1],
type: 'bar'
}
]
}
myChartGender.setOption(optionEnter4)
},
handleChangeCharts(value) {
this.echartsFlag = value
this.$nextTick(() => {
if (value === '1') {
this.$nextTick(() => {
this.genderStatistics()
this.genderStatistics2()
})
} else {
this.$nextTick(() => {
this.genderStatistics3()
this.genderStatistics4()
})
}
})
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.app-container-Sylog {
::v-deep .el-form-item__label {
text-align: left;
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
padding: 10px;
font-size: 18px;
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
}
</style>
src/views/movingRingMonitoring/waterDetection.vue 0 → 100644
View file @ 23236685
<template>
<div id="sylog-container" class="app-container-Sylog">
<el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :style="{ paddingTop: isScreen ? '20px' : '0' }" :inline="true" label-width="68px">
<el-form-item prop="logContent">
<el-input
v-model="queryParams.logContent"
placeholder="监测点名称"
clearable
:maxlength="30"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="handleQuery">查询</el-button>
</el-form-item>
<el-button id="fullScreen" style="float: right;margin: 0 10px">{{ isScreen ? '退出全屏' : '全屏' }}</el-button>
<el-button style="float: right;margin: 0 10px" @click="refresh">刷新</el-button>
</el-form>
<div class="placeholder" />
<div style="padding: 10px">
<el-table
v-loading="loading"
border
:data="data"
:header-cell-style="{textAlign: 'center'}"
@selection-change="handleSelectionChange"
>
<el-table-column :show-overflow-tooltip="true" label="设备名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.name || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测点名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.pointName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测项名称" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.projectName || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="监测值" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.value || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="采集时间" align="center" prop="createTime">
<template slot-scope="scope">
{{ scope.row.createTime | transformDateByFormat('yyyy-MM-DD HH:mm:ss') }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="当前状态" align="center" prop="ipAddress">
<template slot-scope="scope">
<div :style="{ backgroundColor: scope.row.status === '1' ? '#3db58d' : '#eb5d5d', borderRadius: '10px'}" style="text-align: center;width: 80px;color: white;height: 30px;line-height: 30px;margin: 4px 0;">
{{ scope.row.status === '1' ? '正常' : '告警' }}
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警信息" align="center" prop="logContent">
<template>
<el-button @click="goWarn">历史告警</el-button>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="运行曲线" align="center" prop="logContent">
<template>
<el-button @click="goHistory">历史</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.rows"
@pagination="getList"
/>
<el-dialog :visible.sync="open" title="自定义时间" width="500px">
<el-form label-width="100px">
<el-form-item label="开始日期">
<el-date-picker
v-model="queryParams.startTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
<el-form-item label="结束日期">
<el-date-picker
v-model="queryParams.endTime"
type="datetime"
size="small"
value-format="yyyy-MM-DD HH:MM:SS"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取消</el-button>
<el-button type="primary" @click="open = false">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'SnmpTrapLog',
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 总条数
total: 0,
// 表格数据
list: [],
// 是否显示弹出层
open: false,
// 表单参数
form: {},
// 表单参数
isScreen: false,
// 查询参数
queryParams: {
page: 1,
rows: 10,
status: 1,
startTime: '',
endTime: '',
ipAddress: '',
logContent: ''
},
data: [
{
name: '水浸1号',
status: '1',
projectName: '状态',
value: '告警',
createTime: '2022-05-17 00:59:01',
pointName: '水浸1号'
},
{
name: '水浸2号',
status: '0',
projectName: '状态',
value: '正常',
createTime: '2022-05-17 00:59:01',
pointName: '水浸2号'
}
],
initialData: [
{
ipAddress: '39.100.39.54',
createTime: '2022-05-17 00:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: PAM 1 more authentication failure; logname= uid=0 euid=0 tty=ssh ruser= rhost=171.44.81.37 user=root'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 22:59:01',
logContent: 'Apr 8 17:43:28 mxsoft sshd[8366]: Disconnected from 171.44.81.37 port 19840 [preauth]'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-16 20:59:01',
logContent: 'Apr 8 18:01:01 mxsoft run-parts(/etc/cron.hourly)[1255 finished 0anacron'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-14 22:59:01',
logContent: 'Apr 8 18:01:01 mxsoft systemd: Started Session 10 of user root.'
},
{
ipAddress: '39.100.39.54',
createTime: '2022-05-11 22:59:01',
logContent: 'Apr 8 18:00:01 mxsoft CROND[12308]: (root) CMD (/usr/lib64/sa/sa1 1 1)'
}
]
}
},
/** 路由离开前存储筛选条件*/
beforeRouteLeave(to, from, next) {
this.$store.dispatch('searchSave/searchParamsSet', {
path: this.$route.path,
param: {
...this.queryParams
}
})
next()
},
created() {
this.getList()
},
mounted() {
this.handleExpand()
window.onresize = () => {
this.isScreen = screenfull.isFullscreen
}
},
methods: {
goWarn(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '1'
}
})
},
goHistory(path) {
this.$router.push({
path: '/movingRingMonitoring/warnNotes',
query: {
tabs: '2'
}
})
},
handleExpand() {
const element = document.getElementById('sylog-container')// 指定全屏区域元素
document.getElementById('fullScreen').addEventListener('click', () => {
if (screenfull.isEnabled && this.isScreen === false) {
screenfull.request(element)
} else {
screenfull.exit()
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
/** 查询登录日志 */
getList() {
this.loading = true
setTimeout(() => {
this.loading = false
}, 500)
},
/** 查询按钮操作 */
changeTime() {
this.open = !this.open
},
/** 查询按钮操作 */
handleQuery() {
this.queryParams.page = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = ''
this.resetForm('queryForm')
this.handleQuery()
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.operId)
}
}
}
</script>
<style lang="scss" scoped>
.app-container-Sylog {
padding: 0;
font-size: 18px;
.placeholder{
height:14px;
background-color: #F4F4F4;
margin-bottom:10px
}
}
</style>
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