Skip to content

I
IT-monitor
Commit f866be93 authored by Asjoker's avatar Asjoker
Browse files
Options

动环监控

parent cc459800
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1808 additions and 0 deletions
src/views/movingRingMonitoring/powerCab.vue 0 → 100644
View file @ f866be93
<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 @ f866be93
<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 @ f866be93
<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 @ f866be93
This diff is collapsed.
src/views/movingRingMonitoring/waterDetection.vue 0 → 100644
View file @ f866be93
<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