Skip to content

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

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

parents 38338240 366bb8c3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 654 additions and 135 deletions
src/views/IntegratedMonitor/logMonitor/snmpTrapJournal.vue
View file @ a66c1937
......@@ -46,6 +46,7 @@
<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">
......@@ -230,6 +231,9 @@ export default {
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
/** 查询登录日志 */
getList() {
this.loading = true
......
src/views/businessMonitoring/businessList.vue 0 → 100644
View file @ a66c1937
<template>
<div id="sylog-container" class="app-container-Sylog">
<!-- <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-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">
<span v-if="scope.row.status === '1'" class="st-square" style="background-color: #3db58d;" />
<span v-else class="st-square" style="background-color: #eb5d5d;" />
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="健康度" align="center" prop="ipAddress">
<template slot-scope="scope">
<div :style="{ color: scope.row.status === '1' ? '#3db58d' : '#eb5d5d'}">
{{ scope.row.health || '-' }}
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="可用性" align="center" prop="ipAddress">
<template slot-scope="scope">
<div :style="{ color: scope.row.status === '1' ? '#3db58d' : '#eb5d5d'}">
{{ scope.row.useful || '-' }}
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="繁忙度" align="center" prop="ipAddress">
<template slot-scope="scope">
<div :style="{ color: scope.row.status === '1' ? '#3db58d' : '#eb5d5d'}">
{{ scope.row.busy || '-' }}
</div>
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警（关键）" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.warnKey || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警（重要）" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.warnImportant || '-' }}
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="告警（普通）" align="center" prop="ipAddress">
<template slot-scope="scope">
{{ scope.row.warnNormal || '-' }}
</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: 'OA业务部',
status: '1',
health: '97%',
useful: '25%',
busy: '2%',
warnKey: '0',
warnImportant: '0',
warnNormal: '1'
},
{
name: '市场部',
status: '0',
health: '0%',
useful: '0%',
busy: '100%',
warnKey: '0',
warnImportant: '0',
warnNormal: '1'
},
{
name: '职能部',
status: '1',
health: '97%',
useful: '45%',
busy: '2%',
warnKey: '0',
warnImportant: '0',
warnNormal: '1'
},
{
name: '开发部',
status: '1',
health: '85%',
useful: '25%',
busy: '2%',
warnKey: '0',
warnImportant: '0',
warnNormal: '1'
},
{
name: '测试部',
status: '0',
health: '0%',
useful: '0%',
busy: '100%',
warnKey: '16',
warnImportant: '0',
warnNormal: '1'
},
{
name: '运维部',
status: '0',
health: '0%',
useful: '0%',
busy: '100%',
warnKey: '5',
warnImportant: '0',
warnNormal: '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: {
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
}
.st-square{
cursor: pointer;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
</style>
src/views/businessMonitoring/businessManagement.vue
View file @ a66c1937
......@@ -78,10 +78,10 @@
<el-form-item label="繁忙度模板：">
<el-select v-model="dialogForm1.busyDegree" placeholder="请选择">
<el-option
v-for="item in busyDegreeList"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in dialogForm7"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
<el-link style="margin-left: 20px; color: cornflowerblue" @click="drawer = true">编辑模板</el-link>
......@@ -338,10 +338,10 @@
<el-form-item label="繁忙度模板：">
<el-select v-model="dialogForm5.busyDegree" placeholder="请选择">
<el-option
v-for="item in busyDegreeList"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in dialogForm7"
:key="item.name"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
<el-link style="margin-left: 20px; color: cornflowerblue" @click="drawer = true">编辑模板</el-link>
......@@ -501,9 +501,80 @@
</span>
</el-dialog>
<el-dialog class="dialog7" width="50%" title="编辑繁忙度模版" :visible.sync="drawer">
弹
<el-tabs tab-position="left">
<el-tab-pane v-for="(template, index) in dialogForm7" :key="index" :label="template.name">
<el-form ref="dialogForm7" label-width="auto" :model="template">
<el-form-item label="名称：">
<el-input v-model="template.name" style="width: 50%"/>
</el-form-item>
<el-form-item v-for="(temObj, index1) in template.indexList" :key="index1" :label="temObj.type">
<el-input v-model="temObj.inputJiXian" placeholder="请输入内容" style="width: 30%"></el-input>%
<el-link @click="deleteTemObj(index ,index1)">删除</el-link>
</el-form-item>
<el-button @click="addTem1">添加指标</el-button>
<el-button type="primary" @click="confirmTem1">确定</el-button>
<el-button @click="deleteTem(index)">删除</el-button>
</el-form>
</el-tab-pane>
<el-tab-pane label="添加模板">
<el-form ref="dialogForm7" label-width="auto" :model="addTemObj">
<el-form-item label="名称：">
<el-input v-model="addTemObj.name" style="width: 50%"/>
</el-form-item>
<el-form-item v-for="(temObj, index) in addTemObj.indexList" :key="index" :label="temObj.type">
<el-input v-model="temObj.inputJiXian" placeholder="请输入内容" style="width: 30%"></el-input>%
<el-link @click="deleteTemObj1(index)">删除</el-link>
</el-form-item>
<el-button @click="addTem">添加指标</el-button>
<el-button type="primary" @click="confirmTem">确定</el-button>
</el-form>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDrawer">确定</el-button>
<el-button @click="closeDrawer">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog7" width="50%" title="添加繁忙度计算指标" :visible.sync="addDialog">
<el-form ref="dialogForm8" label-width="auto" :model="dialogForm8">
<el-form-item label="指标类型：">
<el-select v-model="dialogForm8.type" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.label"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="基线值：">
<el-input v-model="dialogForm8.inputJiXian" placeholder="请输入内容" style="width: 30%"></el-input>%
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="confirmZhibiao">确定</el-button>
<el-button @click="cancleZhibiao">取消</el-button>
</span>
</el-dialog>
<el-dialog class="dialog7" width="50%" title="添加繁忙度计算指标" :visible.sync="addDialog1">
<el-form ref="dialogForm8" label-width="auto" :model="dialogForm8">
<el-form-item label="指标类型：">
<el-select v-model="dialogForm8.type" placeholder="请选择">
<el-option
v-for="item in typeList"
:key="item.label"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="基线值：">
<el-input v-model="dialogForm8.inputJiXian" placeholder="请输入内容" style="width: 30%"></el-input>%
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
弹
<el-button type="primary" @click="confirmZhibiao1">确定</el-button>
<el-button @click="cancleZhibiao1">取消</el-button>
</span>
</el-dialog>
</div>
......@@ -683,11 +754,13 @@ export default {
dialogOpen4: false,
dialogOpen5: false,
dialogOpen6: false,
addDialog: false,
addDialog1: false,
dialogForm1: {
name: '',
typeChange: 1,
usability: 1,
busyDegree: 1,
busyDegree: '默认繁忙度计算模板',
value1: 1,
input1: '',
input2: '',
......@@ -722,7 +795,7 @@ export default {
name: '',
typeChange: 1,
usability: 1,
busyDegree: 1,
busyDegree: '默认繁忙度计算模板',
value1: 1,
input1: '',
input2: '',
......@@ -747,6 +820,34 @@ export default {
input5: '',
input6: ''
},
dialogForm7: [
{
name: '默认繁忙度计算模板',
indexList: []
}
],
dialogForm8: {
type: '',
inputJiXian: ''
},
typeList: [
{
label: '测试指标1'
},
{
label: '测试指标2'
},
{
label: '测试指标3'
},
{
label: '测试指标4'
}
],
addTemObj: {
name: '',
indexList: []
},
warningChangeList: [{ value: 1, label: '危险或故障' }, { value: 2, label: '危险' }]
}
},
......@@ -819,6 +920,78 @@ export default {
},
closeDialog6() {
this.dialogOpen6 = false
},
closeDrawer() {
this.drawer = false
},
addTem() {
this.addDialog = true
},
addTem1() {
this.addDialog1 = true
},
confirmTem() {
this.$confirm('添加成功！', '提示', {
confirmButtonText: '确定',
type: 'success'
}).then(() => {
this.dialogForm7.push(this.addTemObj)
this.addTemObj = {
name: '',
indexList: []
}
})
},
deleteTem(index) {
this.$confirm('是否删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.dialogForm7.splice(index, 1)
})
},
confirmTem1() {
this.$confirm('修改成功！', '提示', {
confirmButtonText: '确定',
type: 'success'
}).then(() => {})
},
cancleZhibiao() {
this.addDialog = false
},
cancleZhibiao1() {
this.addDialog1 = false
},
confirmZhibiao() {
this.addTemObj.indexList.push(this.dialogForm8)
this.dialogForm8 = {}
this.addDialog = false
},
confirmZhibiao1() {
this.dialogForm7.forEach((ele) => {
ele.indexList.push(this.dialogForm8)
})
this.dialogForm8 = {}
this.addDialog1 = false
},
deleteTemObj(index, index1) {
this.$confirm('是否删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.dialogForm7[index].indexList.splice(index1, 1)
})
},
deleteTemObj1(index) {
this.$confirm('是否删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.addTemObj.indexList.splice(index, 1)
})
}
}
}
......
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