monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit afc7b5ae63ef89d0c57cc4ceac285b9ebfc86ed4 1 parent 1b162652

数据中心的机房布局

Inline Side-by-side
Showing 39 changed files with 802 additions and 31 deletions
... ... @@ -101,8 +101,8 @@
<td><img ></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-6</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-5</span></a></td>
<td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-4</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-3</span></a></td>
<td><a href="/h5/machineroomDetail/FB-4.html"><img src="img/cabinet.png"class="cabinet"><span class="zaibei cabinetId">FB-4</span></a></td>
<td><a href="/h5/machineroomDetail/FB-3.html"><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-3</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-2</span></a></td>
<td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="zaibei cabinetId">FB-1</span></a></td>
<td><img/></td>
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/Details.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='all'>
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-server'>
<!-- 第一个物理服务器 -->
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<!-- 第二个物理服务器 -->
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<!-- 第三个物理服务器 -->
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧机柜详细信息 -->
<div class='info'>
<!-- 机柜信息 -->
<div class='info-top'>
<div class='info-contain'>
<div class='info-text'>机柜信息</div>
<div class='info-text-bot'>
<p>机 房：萧山7号机</p>
<p>机柜编号：E07</p>
<p>机柜容量：42U</p>
<p>设备数量：3台</p>
<p>告警量：无告警</p>
</div>
</div>
</div>
<!-- 设备信息 -->
<div class='info-bottom'>
<div class='info-contain'>
<div class='info-text'>设备信息</div>
<div class='info-text-bot'>
<p>品 牌：曙光</p>
<p>型 号：I840—G25</p>
<p>序 列 号：9800076500643112</p>
<p>管 理 IP：80.12.92.21</p>
<p>业 务 IP：80.12.92.31</p>
<p>用 途：发票系统使用</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/FB-3.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='all'>
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-serve'>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<!-- 第二个物理服务器 -->
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
<!-- 第三个物理服务器 -->
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
... ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/FB-4.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='all'>
<!-- 左侧机柜效果图 -->
<div class='contain'>
<!-- 机柜内部服务器 -->
<div class='contain-serve'>
<div class='serve'>
<div class='img-serve'>
<img src="img/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='lamp'>
<img src="img/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/nocolor.png" alt="">
<img src="img/greenColor.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
... ...
body{
background-image: url(../img/img-bg.png);
background-size: 100%;
}
li{
list-style: none
}
.all{
display:flex;
}
/* 左侧机柜样式 */
.contain{
width:400px;
height:710px;
margin-left:15%;
margin-top:5%;
/* background-color: red; */
background-image: url(../img/img-no-machine.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
.contain-server{
position: absolute;
width:365px;
height:40%;
margin-left:18px;
bottom:7%;
display: flex;
justify-content: space-between;
flex-direction:column;
/* background-color: red; */
}
.serve{
width:370px;
height:78px;
margin-left:-3px;
background-image: url(../img/img-4Uservice.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img-serve{
width:340px;
height:50px;
margin:12px auto;
display: flex;
}
.lamp{
display:flex;
}
.img-lamp{
margin-left:15px;
margin-top:10px
}
/* 服务器状态图片样式 */
.state{
width:35px;
height:35px;
margin-top:8px;
margin-left:4px;
}
.img-serve-text{
color:#fff;
line-height: 50px;
margin-left:10px;
}
.img-weblog{
margin-left:50px;
margin-top:15px;
width:30px;
height:20px;
}
/* 右侧机柜详细信息样式 */
.info{
width:500px;
height:700px;
margin-left:8%;
margin-top:5%;
/* background-color: red; */
}
.info-top{
height:340px;
margin-top:-10px;
background-image: url(../img/img-machineInfo-bg.png);
}
.info-bottom{
height:340px;
margin-top:10px;
background-image: url(../img/img-deviceInfo-bg.png);
}
.info-contain{
width:90%;
display:inline-block;
height:250px;
margin-top:60px;
margin-left: 60px;
}
.info-text{
height:50px;
font-weight: bolder;
font-size: 20px;
color:#fff
/* background-color: rgb(59, 185, 8); */
}
.info-text-bot{
margin-top:-15px;
height:200px;
font-size: 16px;
letter-spacing: 2px;
color:#fff
/* background-color: rgb(93, 15, 196); */
}
... ...
body{
background-image: url(../img/img-bg.png);
background-size: 100%;
}
.all{
display:flex;
}
/* 机柜样式 */
.contain{
width:400px;
height:710px;
margin-left:37%;
margin-top:5%;
/* background-color: red; */
background-image: url(../img/img-no-machine.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
.contain-serve{
position: absolute;
margin-top:60%;
width:365px;
height:40%;
margin-left:18px;
display: flex;
justify-content: space-between;
flex-direction:column;
}
.serve{
width:370px;
height:78px;
margin-left:-3px;
background-image: url(../img/img-4Uservice.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img-serve{
width:340px;
height:50px;
margin:12px auto;
display: flex;
}
.lamp{
display:flex;
}
.img-lamp{
margin-left:15px;
margin-top:10px
}
.state{
width:35px;
height:35px;
margin-top:8px;
margin-left:4px;
}
.img-serve-text{
color:#fff;
line-height: 50px;
margin-left:10px;
}
.img-weblog{
margin-left:50px;
margin-top:15px;
width:30px;
height:20px;
}
... ...
body{
background-image: url(../img/img-bg.png);
background-size: 100%;
}
.all{
display:flex;
}
/* 机柜样式 */
.contain{
width:400px;
height:710px;
margin-left:37%;
margin-top:5%;
/* background-color: red; */
background-image: url(../img/img-no-machine.png);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
}
.contain-serve{
position: absolute;
margin-top:50%;
width:365px;
height:40%;
margin-left:18px;
display: flex;
justify-content: space-between;
flex-direction:column;
}
.serve{
width:370px;
height:78px;
margin-left:-3px;
background-image: url(../img/img-4Uservice.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img-serve{
width:340px;
height:50px;
margin:12px auto;
display: flex;
}
.lamp{
display:flex;
}
.img-lamp{
margin-left:15px;
margin-top:10px
}
/* 服务器状态图样式 */
.state{
width:35px;
height:35px;
margin-top:8px;
margin-left:4px;
}
.img-serve-text{
color:#fff;
line-height: 50px;
margin-left:10px;
}
.img-weblog{
margin-left:50px;
margin-top:15px;
width:30px;
height:20px;
}
... ...
<div class="machine-room">
<div class="room-top">
<el-tabs type="card" @tab-click="handleCommand" v-model="commandVal">
<el-tab-pane v-for="item in commandNameData" :label="item.name" :name="item.val"></el-tab-pane>
</el-tabs>
<!--<el-dropdown @command="handleCommand" class="elSelf" :popper-append-to-body="false">
<span class="el-dropdown-link">
{{commandName}}
<i class="icon-arrow"></i>
</span>
<template #dropdown>
<el-dropdown-menu class="cpuDropdown">
<el-dropdown-item v-for="item in commandNameData" :command="item.val">{{item.name}}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>-->
</div>
<div class="room-html">
<el-row>
<el-col class="video-item" :span="24" >
<MachineRoom v-if="src" :src="src"></MachineRoom>
</el-col>
</el-row>
</div>
</div>
\ No newline at end of file
... ...
export default {
name: 'machineRoom',
template: '',
components: {
'MachineRoom': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/machineRoom/index')
),
},
props:['commandNameData'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
commandName:'',//下拉选择默认显示名称
htmlName:'',//机房组件名称-html名称
commandVal:'',//下拉选择选中值
src:'',//机房布局html地址
changeIndex:1//每点击tab的值变化
}
},
watch:{
changeIndex(newValue, oldValue) {
console.log("changeIndex",newValue)
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
proxy.htmlName=Vue.ref();
proxy.commandVal=Vue.ref()
proxy.commandName=Vue.ref();
proxy.src=Vue.ref();
// 挂载完
Vue.onMounted(() => {
proxy.commandVal='one';
proxy.getMachine(proxy.commandVal);
})
//初始获取默认机房选择信息
const getMachine=(command)=>{
//commandNameData机房机柜数据
props.commandNameData.map((item,index)=>{
if(command==item.val){
proxy.htmlName=item.htmlName;
proxy.commandName=item.name;
proxy.commandVal=item.val;
}
})
proxy.src='/h5/machineroom/'+proxy.htmlName+'.html?access_token='+proxy.accessToken+'&changeIndex='+proxy.changeIndex
console.log("htmlName",proxy.htmlName,proxy.src)
}
const handleCommand=(command,event)=>{
proxy.changeIndex++;
proxy.commandVal=command.props.name;
proxy.getMachine(proxy.commandVal)
// proxy.innerVisible=true;
}
return{
getMachine,
handleCommand
}
}
}
\ No newline at end of file
... ...
<iframe v-if="src" style="width:1100px;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>
... ...
export default {
name: 'machineRoom',
template: '',
components: {},
props:['src'],
data(){
return {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
// src:'/h5/machineroom/huzhouzaibeione.html?access_token='+this.accessToken
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
// 挂载完
Vue.onMounted(() => {
})
return{
// src:'/h5/machineroom/'+props.htmlName+'.html?access_token='+proxy.accessToken
}
}
}
\ No newline at end of file
... ...
... ... @@ -35,21 +35,8 @@
</el-dialog>
<!--机房布局-->
<el-dialog v-model="outerVisible" title="机房布局" width="60%">
<el-row>
<el-col :span="11"></el-col>
<el-col :span="2">过道</el-col>
<el-col :span="11"></el-col>
</el-row>
<template #default>
<el-dialog
v-model="innerVisible"
width="60%"
title="Inner Dialog"
append-to-body
>
</el-dialog>
</template>
<el-dialog v-model="outerVisible" :title="dialogMachineName" width="60%" @close="closeDialog">
<GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
</el-dialog>
... ...
export default {
name: 'dataCenter',
template: '',
components: {},
components: {
'GetMachineRoom': Vue.defineAsyncComponent(
() => myImport('views/commonComponents/getMachineRoom/index')
),
},
data(){
return {
domainName:sessionStorage.getItem('domainName'),
... ... @@ -9,10 +13,53 @@ export default {
apiUrl:'/api-web/bigScreen/getMachineRoomInfoList',
jfdata:'',
dialogMachineName:'',
commandNameData:'',
commandNameDataH:[
{
name:'湖州灾备机房一',
htmlName:'huzhouzaibeione',
val:'one'
},
{
name:'湖州灾备机房二',
htmlName:'huzhouzaibeitwo',
val:'two'
},
{
name:'湖州灾备机房三',
htmlName:'huzhouzaibeithree',
val:'three'
}
],//机房布局html数据
commandNameDataX:[
{
name:'萧山IDC二号机房',
htmlName:'xiaoshansecond',
val:'one'
},
{
name:'萧山IDC三号机房',
htmlName:'xiaoshanthird',
val:'two'
},
{
name:'萧山IDC七号机房',
htmlName:'xiaoshanseven',
val:'three'
}
],
commandName:'',//下拉选择默认显示名称
htmlName:'',//机房组件名称-html名称
commandVal:'',//下拉选择选中值
src:'',//机房布局html地址
}
},
setup(props, {attrs, slots, emit}) {
const {proxy} = Vue.getCurrentInstance();
proxy.htmlName=Vue.ref();
proxy.commandVal=Vue.ref()
proxy.commandName=Vue.ref();
proxy.src=Vue.ref();
// 挂载完
Vue.onMounted(() => {
... ... @@ -37,31 +84,36 @@ export default {
});*/
}
})
proxy.jfdata=[
{machineRoomName:'兴议机房',wd:'0',sd:'0',area:'0'},
{machineRoomName:'湖州机房',wd:'0',sd:'0',area:'0'}
]
})
const isShow=(item)=>{
console.log("999",item)
proxy.dialogMachineName=item.machineRoomName
proxy.centerDialogVisible = true
proxy.dialogMachineName=item.machineRoomName;
proxy.centerDialogVisible = true;
}
const isShowOuter=(item)=>{
console.log(";;;",item)
if(item.layout == 1){
proxy.outerVisible = true
}
proxy.dialogMachineName=item.machineRoomName;
proxy.outerVisible = true;
if(item.layout == 0){
proxy.commandNameData=proxy.commandNameDataH;//湖州机房布局数据
}else{
// proxy.commandNameData=proxy.commandNameDataX;//兴议机房布局数据
}
}
//关闭弹框时清空数据
const closeDialog=()=>{
proxy.commandNameData=Vue.ref();
}
return{
centerDialogVisible: Vue.ref(false),
outerVisible: Vue.ref(false),
innerVisible: Vue.ref(false),
isShowOuter,
isShow
isShow,
closeDialog
}
}
}
... ...