Skip to content

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

动环监控

parent cc459800
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
<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 @ 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