Skip to content

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

修改

parent 800dcd4f
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 7 deletions
src/views/IntegratedMonitor/equipment.vue
View file @ 96146fb5
......@@ -67,7 +67,14 @@
:expand-row-keys="expand"
:tree-props="{children: 'child'}"
>
<el-table-column label="名称" prop="name" show-overflow-tooltip />
<el-table-column label="名称" prop="name" show-overflow-tooltip>
<template slot-scope="scope">
<img v-if="scope.row.noIcon !== '1'" :src="scope.row.icon" class="name-icon">
<span v-if="scope.row.noIcon === '1' && scope.row.color === 'green'" class="square-green" />
<span v-if="scope.row.noIcon === '1' && scope.row.color === 'yellow'" class="square-yellow" />
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="IP" prop="ip" show-overflow-tooltip />
<el-table-column label="类型" prop="type" show-overflow-tooltip />
<el-table-column label="最新数据时间" prop="newTime" show-overflow-tooltip />
......@@ -146,16 +153,48 @@ export default {
countDataList: [],
showList: false,
dataList: [
{ id: '1', name: '127.0.0.1', ip: '127.0.0.1', type: '容器', newTime: '2022-05-06 15:36:43', describe: '',
{ id: '1', icon: require('@/assets/image/shebei.png'), name: '127.0.0.1', ip: '', type: '容器', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '11', name: '虚拟设备', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
{ id: '11', icon: require('@/assets/image/shebei9-guzhang.png'), name: '虚拟化平台', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '111', icon: require('@/assets/image/shebei2-zhengchang.png'), name: '智盘服务器10.1.1.50', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1111', color: 'green', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1112', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1113', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' }
] },
{ id: '112', icon: require('@/assets/image/shebei2-guzhang.png'), name: 'shebei2-guzhang.png', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1121', color: 'yellow', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1122', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1123', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' }
] }
] },
{ id: '12', icon: require('@/assets/image/shebei9-weixian.png'), name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '111', name: 'ping', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '',
{ id: '121', icon: require('@/assets/image/shebei2-zhengchang.png'), name: '运维服务器_192.168.6.16', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1111', name: 'ping 192.168.8.20', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' }
{ id: '1211', color: 'green', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1212', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1213', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '磁盘', newTime: '2022-05-06 15:36:43', describe: '' }
] },
{ id: '122', icon: require('@/assets/image/shebei2-guzhang.png'), name: '人脸应用服务器-10.1.1.53', ip: '10.1.1.50', type: 'SSH Linux', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1221', color: 'yellow', noIcon: '1', name: 'ping 192.168.8.20', ip: '', type: '进程', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1222', color: 'green', noIcon: '1', name: '/dev/sda1 (/boot)', ip: '', type: '进程', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '1223', color: 'green', noIcon: '1', name: 'tmpfs (/dev/shm)', ip: '', type: '进程', newTime: '2022-05-06 15:36:43', describe: '' }
] }
] },
{ id: '12', name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '' }
{ id: '13', icon: require('@/assets/image/shebei3-zhengchang.png'), name: '192.168.90.31', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '131', color: 'green', noIcon: '1', name: '内存监视量', ip: '10.1.1.50', type: 'JVM操作系统', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '132', color: 'green', noIcon: '1', name: 'HTTP通道监控量', ip: '10.1.1.50', type: 'HTTP通道监控量', newTime: '2022-05-06 15:36:43', describe: '' }
] },
{ id: '14', icon: require('@/assets/image/shebei1-zhengchang.png'), name: '10.164.171.190', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '141', color: 'green', noIcon: '1', name: 'Ping 10.164.171.190', ip: '10.1.1.50', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' },
{ id: '142', color: 'green', noIcon: '1', name: 'mk_ejb_server1', ip: '10.1.1.50', type: '状态信息', newTime: '2022-05-06 15:36:43', describe: '' }
] }
] }
],
// 获取row的key值
......@@ -296,7 +335,26 @@ export default {
border-left: 4px solid transparent;
}
.mointorBody{
.name-icon{
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
.square-green{
background-color: #3db58d;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
.square-yellow{
background-color: #edb845;
margin-right: 6px;
width: 9px;
height: 9px;
display: inline-block;
}
}
.mointorHead{
padding-top: 10px;
......
src/views/IntegratedMonitor/viewExhibition/logicalGroup.vue 0 → 100644
View file @ 96146fb5
<template>
<div id="container_max" class="logicalClass">
<div class="logicalHead">
<div class="logicalBtns">
<el-button class="headBtnW" @click="refresh">刷新</el-button>
<el-button id="fullscreen_btn" class="headBtnW">全屏</el-button>
</div>
</div>
<div class="logicalBody">
<el-table
:data="dataList"
border
:row-key="getKeys"
:expand-row-keys="expand"
:tree-props="{children: 'child'}"
>
<el-table-column label="公司" prop="company" show-overflow-tooltip />
<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="addObject">添加对象</el-link>
<el-link @click="updateRow">编辑</el-link>
<el-link @click="deleteRow">移除</el-link>
<!-- </template>-->
</el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
name: 'LogicalGroup',
data() {
return {
dataList: [
{ id: '1', name: '127.0.0.1', type: '容器', describe: '',
child: [
{ id: '11', name: '虚拟设备', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '111', name: 'ping', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '',
child: [
{ id: '1111', name: 'ping 192.168.8.20', ip: '', type: 'Ping', newTime: '2022-05-06 15:36:43', describe: '' }
] }
] },
{ id: '12', name: '服务器系统', ip: '', type: '组', newTime: '2022-05-06 15:36:43', describe: '' }
] }
],
// 获取row的key值
getKeys(row) {
return row.id
},
// 要展开的行，数值的元素是row的key值
expand: [],
}
},
mounted() {
this.handleExpand() // 全屏
this.handleExpandList() // 展开列表
},
created() {
},
methods: {
handleExpandList() {
this.expand.push(this.dataList[0].id)
},
refresh() {
window.location.reload() // 刷新页面
},
handleExpand() {
const element = document.getElementById('container_max')// 指定全屏区域元素
document.getElementById('fullscreen_btn').addEventListener('click', () => {
if (screenfull.isEnabled) {
screenfull.request(element)
}
})// 实现模块全屏
}
}
}
</script>
<style lang="scss">
.logicalClass{
.logicalHead{
height: 58px;
padding: 15px 20px 10px 20px;
background-color: #edeef3 !important;
border-bottom: 1px solid #DBDDE3;
.logicalBtns{
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