monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 王涛
Commit 491d8fc61e22744282ffd98398a80eff5b860cb0 2 parents e231c151 87329661

Merge branch 'master-v32-lushangqing' into 'master' 

大屏数据中心的机柜组件



See merge request !126
Inline Side-by-side
Showing 6 changed files with 246 additions and 43 deletions
... ... @@ -58,12 +58,97 @@ li{
background-size: 100% 100%;
background-repeat: no-repeat;
margin-bottom: 10px;
position: absolute;
bottom: 0;
}
.serve-4u-1{
bottom: 66px;
}
.serve-4u-2{
bottom: 132px;
}
.serve-4u-3{
bottom: 198px;
}
.serve-4u-4{
bottom: 264px;
}
.serve-4u-5{
bottom: 330px;
}
.serve-4u-6{
bottom: 396px;
}
.serve-4u-7{
bottom: 462px;
}
.serve-4u-8{
bottom: 528px;
}
.serve-4u-9{
bottom: 594px;
}
.serve-4u-10{
bottom: 660px;
}
.serve-8u-1{
bottom: 137px;
}
.serve-8u-2{
bottom: 274px;
}
.serve-8u-3{
bottom: 411px;
}
.serve-8u-4{
bottom: 548px;
}
.serve-8u-5{
bottom: 878px;
}
.img-serve-1{
background-image: url(/vue3/src/assets/images/machineRoom/img-1Uservice.png);
height:17px;
width:383px;
}
.img-serve-2{
background-image: url(/vue3/src/assets/images/machineRoom/img-2Uservice.png);
height:34px;
width:383px;
}
.img-serve-6{
background-image: url(/vue3/src/assets/images/machineRoom/img-6Uservice.png);
height:100px;
width:383px;
}
.img-serve-8{
background-image: url(/vue3/src/assets/images/machineRoom/img-8Uservice.png);
height:127px;
width:383px;
}
.img-serve-10{
background-image: url(/vue3/src/assets/images/machineRoom/img-10Uservice.png);
height:157px;
width:383px;
}
.img-serve-1 .img-serve-text{
font-size: 11px;
line-height: 17px;
}
.img-serve-1 .state{
height: 16px;
width: 16px;
margin: 0;
}
.img-serve-2 .state{
height: 20px;
width: 20px;
margin: 0;
}
.img-serve-2 .img-serve-text{
font-size: 11px;
line-height: 34px;
}
.img-serve{
/*width:340px;
... ... @@ -79,6 +164,8 @@ li{
.lamp{
display:flex;
width:58%;
justify-content: space-around;
align-items: center;
}
.server-flex{
... ... @@ -88,14 +175,17 @@ li{
}
.img-lamp{
/*margin-left:15px;*/
margin-top:10px
/*margin-top:10px*/
display: flex;
justify-content: space-around;
width: 50%;
}
/* 服务器状态图片样式 */
.state{
width:35px;
height:35px;
margin-top:8px;
/*margin-top:8px;*/
margin-left:4px;
}
... ... @@ -107,8 +197,8 @@ li{
.img-weblog{
margin-left:50px;
margin-top:15px;
margin-left:34px;
/*margin-top:15px;*/
width:30px;
height:20px;
... ...
<div :class="['all',{'flex-center':isCenter}]">
<div :class="['all']">
<!-- 左侧机柜效果图 -->
<div class='contain'>
... ... @@ -7,11 +7,12 @@
<!-- 第一个物理服务器 -->
<div :class="['serve',{'img-serve-8':infoData.cabinetCapacity=='8U'}]"@click="showDevice" v-for="(item,index) in serviceData">
<!-- <div :class="['serve',{'img-serve-8':item.uPosition=='1-8U'}]"@click="showDevice(item)" v-for="(item,index) in serviceData">-->
<div :class="'serve '+item.serviceClass " :style="item.uClass" @click="showDevice(item)" v-for="(item,index) in serviceData">
<div class='img-serve' >
<img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
<div class='img-serve-text'>物理服务器</div>
<div class='img-serve-text'>{{item.name}}</div>
<div class='lamp'>
<img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
<div class='img-lamp'>
... ... @@ -27,7 +28,7 @@
</div>
</div>
<!-- 右侧机柜详细信息 -->
<div class='info' v-if="!isCenter">
<div class='info' >
<!-- 机柜信息 -->
<div class='info-top'>
... ... @@ -49,12 +50,12 @@
<div class='info-contain'>
<div class='info-text'>设备信息</div>
<div class='info-text-bot'>
<p>资源名称：{{infoData.resName}}</p>
<p>品 牌：{{infoData.brandName}}</p>
<p>型 号：{{infoData.model}}</p>
<p>序 列 号：{{infoData.serialNumber}}</p>
<p>业 务 IP：{{infoData.ServiceIP}}</p>
<p>用 途：{{infoData.purpose}}</p>
<p>资源名称：{{deviceDataInfo.resName}}</p>
<p>品 牌：{{deviceDataInfo.brandName}}</p>
<p>型 号：{{deviceDataInfo.model}}</p>
<p>序 列 号：{{deviceDataInfo.serialNumber}}</p>
<p>业 务 IP：{{deviceDataInfo.ServiceIP}}</p>
<p>用 途：{{deviceDataInfo.purpose}}</p>
</div>
</div>
</div>
... ... @@ -65,14 +66,3 @@
</div>
<!--
</body>
</html>
<script>
var eleInfo=document.getElementsByClassName('serve');
eleInfo[0].onclick = function() {
var eleBottom=document.getElementById("info-bottom")
eleBottom.setAttribute('style','display:block')
}
</script>-->
... ...
... ... @@ -12,43 +12,153 @@ export default {
domainName:sessionStorage.getItem('domainName'),
accessToken:localStorage.getItem('access_token'),
isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
serviceData:[],//服务器数据
deviceData: [
serviceData:[],//机柜的服务器数据
deviceDataInfo:'',//设备详细信息
deviceDatas: [
{
name:'E12',
cabinetCapacity :'42U',
deviceData:[
{
name:'物理服务器',
resName:'管理决策二包(数据集市39)',
brandName:'浪潮',
model:'TS860',
serialNumber:'216365930',
ServiceIP:'80.12.73.39',
purpose:'管理决策二包使用',
cabinetCapacity :'8U',
uPosition:'1-8U',
}
],
deviceNum:'1',
alarmNum:'0'
},
{
name:'E13',
cabinetCapacity :'42U',
deviceData:[
{
name:'物理服务器',
resName:'管理决策二包(数据集市38)',
brandName:'浪潮',
model:'TS860',
serialNumber:'216365928',
ServiceIP:'80.12.73.38',
purpose:'管理决策二包使用',
cabinetCapacity :'8U',
uPosition:'1-8U',
}
],
deviceNum:'1',
alarmNum:'0'
},
{
name:'FB-3',
deviceData:[
{
name:'物理服务器1',
resName:'1',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'1-1U',
},
{
name:'物理服务器2',
resName:'2',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'5-7U',
},
{
name:'物理服务器3',
resName:'3',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'10-16U',
},
{
name:'物理服务器3',
resName:'3',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'17-25U',
},
{
name:'物理服务器5',
resName:'5',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'26-30U',
},
{
name:'物理服务器10',
resName:'5',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'31-41U',
}
],
deviceNum:'3',
cabinetCapacity :'4U',
cabinetCapacity :'42U',
},
{
name:'FB-4',
deviceData:[
{
name:'物理服务器',
resName:'',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'1-4U',
},
{
name:'物理服务器',
resName:'23',
brandName:'浪潮',
model:'TS860',
serialNumber:'',
ServiceIP:'',
purpose:'管理决策二包使用',
uPosition:'6-16U',
}
],
deviceNum:'1',
cabinetCapacity :'4U',
cabinetCapacity :'42U',
},
],//设备信息
],//服务器设备信息
infoData:'',//设备详细信息
// isShowDevice:false,//是否显示设备信息
... ... @@ -72,25 +182,38 @@ export default {
})
const getDeviceInfo=()=>{
proxy.deviceData.map((item,index)=>{
proxy.deviceDatas.map((item,index)=>{
if(CabinetNum==item.name){
proxy.infoData=item;
proxy.serviceData=item.deviceData
item.deviceData.map((itemD,indexD)=>{
let strArr=itemD.uPosition.split("U");//[0]1-4 [1]U
let leftStrArr=strArr[0].split('-');//[0]1 [1]4
let leftStr=leftStrArr[0];
let rightStr=leftStrArr[1];
itemD.serviceHeight=rightStr;//nU的设备
let serveNum=1;
if(leftStr==1){
serveNum=rightStr
}else{
serveNum=rightStr-leftStr;
}
itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
itemD.uClass='';
if(leftStr>1){
let bottom=(leftStr-1)*17;
itemD.uClass='bottom:'+bottom+'px';
}
})
for(let i=0;i<proxy.infoData.deviceNum;i++){
proxy.serviceData.push({
name:'物理服务器'
})
}
})
}
const showDevice=()=>{
console.log("iscenter",proxy.isCenter)
if(!proxy.isCenter){
console.log("lalala")
const showDevice=(item)=>{
proxy.isShowDevice=true;
}
proxy.deviceDataInfo=item;
}
return{
... ...