Skip to content

I
IT-monitor
Commit 587a365f authored by 张伯涛's avatar 张伯涛
Browse files
Options

修改

parent acc21ff3
Show whitespace changes
Inline Side-by-side
Showing with 251 additions and 0 deletions
src/views/IntegratedMonitor/viewExhibition/monitorView.vue 0 → 100644
View file @ 587a365f
<template>
<div class="monitorView">
<div class="warnHead">
<div class="warnBtns">
<el-button class="headBtn" @click="handleAdd">添加</el-button>
<el-button class="headBtn" @click="handleAdd">修改</el-button>
<el-button class="headBtn">删除</el-button>
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="monitorViewBody">
<el-form style="width: 50%" :inline="true" ref="searchForm" label-width="auto" :model="searchForm">
<el-form-item label="设备标题:">
<el-select
style="width: 50%"
v-model="searchForm.title"
>
<el-option value="名称" label="名称" />
<el-option value="ip地址" label="ip地址" />
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-select
style="width: 50%"
v-model="searchForm.type"
>
<el-option value="故障" label="故障" />
<el-option value="危险" label="危险" />
<el-option value="正常" label="正常" />
</el-select>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="设备视图" name="first">
<div v-for="(item,index) in equipmentList" :key="index" class="bigIcon">
<div>
<img class="iconIme" :src="item.img">
<div class="titleName">{{ item.name }}</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="监测点视图" name="second">
<el-table
:data="tableData"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="设备" prop="equipment" show-overflow-tooltip />
<el-table-column label="监测点" prop="point" show-overflow-tooltip />
<el-table-column label="" prop="value" show-overflow-tooltip />
<el-table-column label="" prop="value2" show-overflow-tooltip />
<el-table-column label="" prop="value3" show-overflow-tooltip />
</el-table>
</el-tab-pane>
<el-tab-pane label="数据列表" name="third">
<el-table
:data="tableData2"
border
style="width: 100%;padding-top: 20px"
>
<el-table-column label="设备" prop="equipment" show-overflow-tooltip />
<el-table-column label="监测点" prop="point" show-overflow-tooltip />
<el-table-column label="状态" prop="value" show-overflow-tooltip />
<el-table-column label="指标" prop="value2" show-overflow-tooltip />
<el-table-column label="值" prop="value3" show-overflow-tooltip />
<el-table-column label="危险阈值" prop="value4" show-overflow-tooltip />
<el-table-column label="故障阈值" prop="value5" show-overflow-tooltip />
<el-table-column label="最后更新时间" prop="value6" show-overflow-tooltip />
</el-table>
</el-tab-pane>
</el-tabs>
</div>
<el-dialog class="addGroup" width="50%" title="添加页面" :visible.sync="addDialog">
<el-form ref="addWarnForm" label-width="auto" :model="addForm">
<el-form-item label="名称:">
<el-input v-model="addForm.name" />
</el-form-item>
<el-form-item label="选择设备:">
<div class="equipmentDiv">
<el-tree
:data="data"
show-checkbox
node-key="id"
:default-expanded-keys="[2, 3]"
:default-checked-keys="[5]"
:props="defaultProps"
/>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="closeDialog">确定</el-button>
<el-button @click="closeDialog">取消</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'MonitorView',
data() {
return {
searchForm: {
title: '',
type: ''
},
tableData: [
{ equipment: '智盘服务器10.1.1.50', point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '连接' },
{ equipment: '总部24F-机柜8-17U-16U-电票系统', point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: '/dev/sda2 (/media/disk)' },
{ equipment: '人脸识别服务器-10.1.1.52', point: '/dev/sda1 (/boot)', value: '物理内存', value2: 'Ping', value3: 'Snmp连接检测' }
],
tableData2: [
{ equipment: '餐厅服务器-10.1.1.61', point: 'C:', value: '1', value2: '磁盘使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: 'alg.exe', value: '1', value2: '进程数(个)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' },
{ equipment: '餐厅服务器-10.1.1.61', point: '虚拟内存', value: '1', value2: '内存使用率(%)', value3: '16.250', value4: '> 90', value5: '> 95', value6: '2022-04-20 23:50:00' }
],
equipmentList: [
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' },
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' },
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' },
{ img: require('@/assets/image/img.png'), name: '智盘服务器10.1.1.50' }
],
activeName: 'first',
data: [{
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'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
addDialog: false,
addForm: {
name: '',
equipment: ''
}
}
},
created() {
},
mounted() {
this.handleExpand() // 全屏
},
methods: {
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
},
refresh() {
window.location.reload() // 刷新页面
},
handleAdd() {
this.addDialog = true
},
closeDialog() {
this.addDialog = false
}
}
}
</script>
<style lang="scss">
.monitorView{
.monitorViewBody{
padding: 15px 30px;
.bigIcon{
width: 150px;
margin: 15px 30px 15px 30px;
float: left;
position: relative;
.iconIme{
width: 110px;
height: 110px;
padding: 29px;
border-radius: 50%;
cursor: pointer;
background-size: 55px auto;
background-repeat: no-repeat;
}
.titleName{
font-size: 14px;
width: 150px;
height: 22px;
overflow: hidden;
display: block;
}
}
}
.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;
}
}
}
}
</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