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{ @@ -58,12 +58,97 @@ li{
58 background-size: 100% 100%; 58 background-size: 100% 100%;
59 background-repeat: no-repeat; 59 background-repeat: no-repeat;
60 margin-bottom: 10px; 60 margin-bottom: 10px;
  61 + position: absolute;
  62 + bottom: 0;
  63 +}
  64 +.serve-4u-1{
  65 + bottom: 66px;
  66 +}
  67 +.serve-4u-2{
  68 + bottom: 132px;
  69 +}
  70 +.serve-4u-3{
  71 + bottom: 198px;
  72 +}
  73 +.serve-4u-4{
  74 + bottom: 264px;
  75 +}
  76 +.serve-4u-5{
  77 + bottom: 330px;
  78 +}
  79 +.serve-4u-6{
  80 + bottom: 396px;
  81 +}
  82 +.serve-4u-7{
  83 + bottom: 462px;
  84 +}
  85 +.serve-4u-8{
  86 + bottom: 528px;
  87 +}
  88 +.serve-4u-9{
  89 + bottom: 594px;
  90 +}
  91 +.serve-4u-10{
  92 + bottom: 660px;
  93 +}
  94 +.serve-8u-1{
  95 + bottom: 137px;
  96 +}
  97 +.serve-8u-2{
  98 + bottom: 274px;
  99 +}
  100 +.serve-8u-3{
  101 + bottom: 411px;
  102 +}
  103 +.serve-8u-4{
  104 + bottom: 548px;
  105 +}
  106 +.serve-8u-5{
  107 + bottom: 878px;
  108 +}
  109 +.img-serve-1{
  110 + background-image: url(/vue3/src/assets/images/machineRoom/img-1Uservice.png);
  111 + height:17px;
  112 + width:383px;
  113 +}
  114 +.img-serve-2{
  115 + background-image: url(/vue3/src/assets/images/machineRoom/img-2Uservice.png);
  116 + height:34px;
  117 + width:383px;
  118 +}
  119 +.img-serve-6{
  120 + background-image: url(/vue3/src/assets/images/machineRoom/img-6Uservice.png);
  121 + height:100px;
  122 + width:383px;
61 } 123 }
62 .img-serve-8{ 124 .img-serve-8{
63 background-image: url(/vue3/src/assets/images/machineRoom/img-8Uservice.png); 125 background-image: url(/vue3/src/assets/images/machineRoom/img-8Uservice.png);
64 height:127px; 126 height:127px;
65 width:383px; 127 width:383px;
66 } 128 }
  129 +.img-serve-10{
  130 + background-image: url(/vue3/src/assets/images/machineRoom/img-10Uservice.png);
  131 + height:157px;
  132 + width:383px;
  133 +}
  134 +.img-serve-1 .img-serve-text{
  135 + font-size: 11px;
  136 + line-height: 17px;
  137 +}
  138 +.img-serve-1 .state{
  139 + height: 16px;
  140 + width: 16px;
  141 + margin: 0;
  142 +}
  143 +.img-serve-2 .state{
  144 + height: 20px;
  145 + width: 20px;
  146 + margin: 0;
  147 +}
  148 +.img-serve-2 .img-serve-text{
  149 + font-size: 11px;
  150 + line-height: 34px;
  151 +}
67 .img-serve{ 152 .img-serve{
68 153
69 /*width:340px; 154 /*width:340px;
@@ -79,6 +164,8 @@ li{ @@ -79,6 +164,8 @@ li{
79 .lamp{ 164 .lamp{
80 display:flex; 165 display:flex;
81 width:58%; 166 width:58%;
  167 + justify-content: space-around;
  168 + align-items: center;
82 } 169 }
83 170
84 .server-flex{ 171 .server-flex{
@@ -88,14 +175,17 @@ li{ @@ -88,14 +175,17 @@ li{
88 } 175 }
89 .img-lamp{ 176 .img-lamp{
90 /*margin-left:15px;*/ 177 /*margin-left:15px;*/
91 - margin-top:10px 178 + /*margin-top:10px*/
  179 + display: flex;
  180 + justify-content: space-around;
  181 + width: 50%;
92 } 182 }
93 183
94 /* 服务器状态图片样式 */ 184 /* 服务器状态图片样式 */
95 .state{ 185 .state{
96 width:35px; 186 width:35px;
97 height:35px; 187 height:35px;
98 - margin-top:8px; 188 + /*margin-top:8px;*/
99 margin-left:4px; 189 margin-left:4px;
100 } 190 }
101 191
@@ -107,8 +197,8 @@ li{ @@ -107,8 +197,8 @@ li{
107 197
108 198
109 .img-weblog{ 199 .img-weblog{
110 - margin-left:50px;  
111 - margin-top:15px; 200 + margin-left:34px;
  201 + /*margin-top:15px;*/
112 width:30px; 202 width:30px;
113 height:20px; 203 height:20px;
114 204
1 -<div :class="['all',{'flex-center':isCenter}]"> 1 +<div :class="['all']">
2 <!-- 左侧机柜效果图 --> 2 <!-- 左侧机柜效果图 -->
3 <div class='contain'> 3 <div class='contain'>
4 4
@@ -7,11 +7,12 @@ @@ -7,11 +7,12 @@
7 7
8 8
9 <!-- 第一个物理服务器 --> 9 <!-- 第一个物理服务器 -->
10 - <div :class="['serve',{'img-serve-8':infoData.cabinetCapacity=='8U'}]"@click="showDevice" v-for="(item,index) in serviceData"> 10 +<!-- <div :class="['serve',{'img-serve-8':item.uPosition=='1-8U'}]"@click="showDevice(item)" v-for="(item,index) in serviceData">-->
  11 + <div :class="'serve '+item.serviceClass " :style="item.uClass" @click="showDevice(item)" v-for="(item,index) in serviceData">
11 <div class='img-serve' > 12 <div class='img-serve' >
12 13
13 <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'> 14 <img src="/vue3/src/assets/images/machineRoom/icon-state.png" alt="" class='state'>
14 - <div class='img-serve-text'>物理服务器</div> 15 + <div class='img-serve-text'>{{item.name}}</div>
15 <div class='lamp'> 16 <div class='lamp'>
16 <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'> 17 <img src="/vue3/src/assets/images/machineRoom/icon-weblogical.png" alt="" class='img-weblog'>
17 <div class='img-lamp'> 18 <div class='img-lamp'>
@@ -27,7 +28,7 @@ @@ -27,7 +28,7 @@
27 </div> 28 </div>
28 </div> 29 </div>
29 <!-- 右侧机柜详细信息 --> 30 <!-- 右侧机柜详细信息 -->
30 - <div class='info' v-if="!isCenter"> 31 + <div class='info' >
31 32
32 <!-- 机柜信息 --> 33 <!-- 机柜信息 -->
33 <div class='info-top'> 34 <div class='info-top'>
@@ -49,12 +50,12 @@ @@ -49,12 +50,12 @@
49 <div class='info-contain'> 50 <div class='info-contain'>
50 <div class='info-text'>设备信息</div> 51 <div class='info-text'>设备信息</div>
51 <div class='info-text-bot'> 52 <div class='info-text-bot'>
52 - <p>资源名称：{{infoData.resName}}</p>  
53 - <p>品 牌：{{infoData.brandName}}</p>  
54 - <p>型 号：{{infoData.model}}</p>  
55 - <p>序 列 号：{{infoData.serialNumber}}</p>  
56 - <p>业 务 IP：{{infoData.ServiceIP}}</p>  
57 - <p>用 途：{{infoData.purpose}}</p> 53 + <p>资源名称：{{deviceDataInfo.resName}}</p>
  54 + <p>品 牌：{{deviceDataInfo.brandName}}</p>
  55 + <p>型 号：{{deviceDataInfo.model}}</p>
  56 + <p>序 列 号：{{deviceDataInfo.serialNumber}}</p>
  57 + <p>业 务 IP：{{deviceDataInfo.ServiceIP}}</p>
  58 + <p>用 途：{{deviceDataInfo.purpose}}</p>
58 </div> 59 </div>
59 </div> 60 </div>
60 </div> 61 </div>
@@ -65,14 +66,3 @@ @@ -65,14 +66,3 @@
65 66
66 </div> 67 </div>
67 68
68 -<!--  
69 -</body>  
70 -  
71 -</html>  
72 -<script>  
73 - var eleInfo=document.getElementsByClassName('serve');  
74 - eleInfo[0].onclick = function() {  
75 - var eleBottom=document.getElementById("info-bottom")  
76 - eleBottom.setAttribute('style','display:block')  
77 - }  
78 -</script>-->  
@@ -12,43 +12,153 @@ export default { @@ -12,43 +12,153 @@ export default {
12 domainName:sessionStorage.getItem('domainName'), 12 domainName:sessionStorage.getItem('domainName'),
13 accessToken:localStorage.getItem('access_token'), 13 accessToken:localStorage.getItem('access_token'),
14 isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房 14 isCenter:false,//是否居中--true代表湖州机房，false代表萧山机房
15 - serviceData:[],//服务器数据  
16 - deviceData: [ 15 + serviceData:[],//机柜的服务器数据
  16 + deviceDataInfo:'',//设备详细信息
  17 + deviceDatas: [
17 { 18 {
18 name:'E12', 19 name:'E12',
  20 +
  21 + cabinetCapacity :'42U',
  22 + deviceData:[
  23 + {
  24 + name:'物理服务器',
19 resName:'管理决策二包(数据集市39)', 25 resName:'管理决策二包(数据集市39)',
20 brandName:'浪潮', 26 brandName:'浪潮',
21 model:'TS860', 27 model:'TS860',
22 serialNumber:'216365930', 28 serialNumber:'216365930',
23 ServiceIP:'80.12.73.39', 29 ServiceIP:'80.12.73.39',
24 purpose:'管理决策二包使用', 30 purpose:'管理决策二包使用',
25 - cabinetCapacity :'8U', 31 + uPosition:'1-8U',
  32 + }
  33 + ],
26 deviceNum:'1', 34 deviceNum:'1',
27 alarmNum:'0' 35 alarmNum:'0'
28 }, 36 },
29 { 37 {
30 name:'E13', 38 name:'E13',
  39 + cabinetCapacity :'42U',
  40 + deviceData:[
  41 + {
  42 + name:'物理服务器',
31 resName:'管理决策二包(数据集市38)', 43 resName:'管理决策二包(数据集市38)',
32 brandName:'浪潮', 44 brandName:'浪潮',
33 model:'TS860', 45 model:'TS860',
34 serialNumber:'216365928', 46 serialNumber:'216365928',
35 ServiceIP:'80.12.73.38', 47 ServiceIP:'80.12.73.38',
36 purpose:'管理决策二包使用', 48 purpose:'管理决策二包使用',
37 - cabinetCapacity :'8U', 49 + uPosition:'1-8U',
  50 +
  51 + }
  52 +
  53 + ],
38 deviceNum:'1', 54 deviceNum:'1',
39 alarmNum:'0' 55 alarmNum:'0'
40 }, 56 },
41 { 57 {
42 name:'FB-3', 58 name:'FB-3',
  59 + deviceData:[
  60 + {
  61 + name:'物理服务器1',
  62 + resName:'1',
  63 + brandName:'浪潮',
  64 + model:'TS860',
  65 + serialNumber:'',
  66 + ServiceIP:'',
  67 + purpose:'管理决策二包使用',
  68 + uPosition:'1-1U',
  69 +
  70 + },
  71 + {
  72 + name:'物理服务器2',
  73 + resName:'2',
  74 + brandName:'浪潮',
  75 + model:'TS860',
  76 + serialNumber:'',
  77 + ServiceIP:'',
  78 + purpose:'管理决策二包使用',
  79 + uPosition:'5-7U',
  80 +
  81 + },
  82 + {
  83 + name:'物理服务器3',
  84 + resName:'3',
  85 + brandName:'浪潮',
  86 + model:'TS860',
  87 + serialNumber:'',
  88 + ServiceIP:'',
  89 + purpose:'管理决策二包使用',
  90 + uPosition:'10-16U',
  91 +
  92 + },
  93 + {
  94 + name:'物理服务器3',
  95 + resName:'3',
  96 + brandName:'浪潮',
  97 + model:'TS860',
  98 + serialNumber:'',
  99 + ServiceIP:'',
  100 + purpose:'管理决策二包使用',
  101 + uPosition:'17-25U',
  102 +
  103 + },
  104 + {
  105 + name:'物理服务器5',
  106 + resName:'5',
  107 + brandName:'浪潮',
  108 + model:'TS860',
  109 + serialNumber:'',
  110 + ServiceIP:'',
  111 + purpose:'管理决策二包使用',
  112 + uPosition:'26-30U',
  113 +
  114 + },
  115 + {
  116 + name:'物理服务器10',
  117 + resName:'5',
  118 + brandName:'浪潮',
  119 + model:'TS860',
  120 + serialNumber:'',
  121 + ServiceIP:'',
  122 + purpose:'管理决策二包使用',
  123 + uPosition:'31-41U',
  124 +
  125 + }
  126 +
  127 + ],
43 deviceNum:'3', 128 deviceNum:'3',
44 - cabinetCapacity :'4U', 129 + cabinetCapacity :'42U',
45 }, 130 },
46 { 131 {
47 name:'FB-4', 132 name:'FB-4',
  133 + deviceData:[
  134 + {
  135 + name:'物理服务器',
  136 + resName:'',
  137 + brandName:'浪潮',
  138 + model:'TS860',
  139 + serialNumber:'',
  140 + ServiceIP:'',
  141 + purpose:'管理决策二包使用',
  142 + uPosition:'1-4U',
  143 +
  144 + },
  145 + {
  146 + name:'物理服务器',
  147 + resName:'23',
  148 + brandName:'浪潮',
  149 + model:'TS860',
  150 + serialNumber:'',
  151 + ServiceIP:'',
  152 + purpose:'管理决策二包使用',
  153 + uPosition:'6-16U',
  154 +
  155 + }
  156 +
  157 + ],
48 deviceNum:'1', 158 deviceNum:'1',
49 - cabinetCapacity :'4U', 159 + cabinetCapacity :'42U',
50 }, 160 },
51 - ],//设备信息 161 + ],//服务器设备信息
52 infoData:'',//设备详细信息 162 infoData:'',//设备详细信息
53 // isShowDevice:false,//是否显示设备信息 163 // isShowDevice:false,//是否显示设备信息
54 164
@@ -72,25 +182,38 @@ export default { @@ -72,25 +182,38 @@ export default {
72 182
73 }) 183 })
74 const getDeviceInfo=()=>{ 184 const getDeviceInfo=()=>{
75 - proxy.deviceData.map((item,index)=>{ 185 + proxy.deviceDatas.map((item,index)=>{
76 if(CabinetNum==item.name){ 186 if(CabinetNum==item.name){
77 proxy.infoData=item; 187 proxy.infoData=item;
  188 + proxy.serviceData=item.deviceData
  189 + item.deviceData.map((itemD,indexD)=>{
  190 + let strArr=itemD.uPosition.split("U");//[0]1-4 [1]U
  191 + let leftStrArr=strArr[0].split('-');//[0]1 [1]4
  192 + let leftStr=leftStrArr[0];
  193 + let rightStr=leftStrArr[1];
  194 + itemD.serviceHeight=rightStr;//nU的设备
  195 + let serveNum=1;
  196 + if(leftStr==1){
  197 + serveNum=rightStr
  198 + }else{
  199 + serveNum=rightStr-leftStr;
  200 +
  201 + }
  202 + itemD.serviceClass='img-serve-'+serveNum;//设备的css的class
  203 + itemD.uClass='';
  204 + if(leftStr>1){
  205 + let bottom=(leftStr-1)*17;
  206 + itemD.uClass='bottom:'+bottom+'px';
78 207
79 } 208 }
80 - })  
81 - for(let i=0;i<proxy.infoData.deviceNum;i++){  
82 - proxy.serviceData.push({  
83 - name:'物理服务器'  
84 }) 209 })
85 } 210 }
  211 + })
  212 +
86 } 213 }
87 - const showDevice=()=>{  
88 - console.log("iscenter",proxy.isCenter)  
89 - if(!proxy.isCenter){  
90 - console.log("lalala") 214 + const showDevice=(item)=>{
91 proxy.isShowDevice=true; 215 proxy.isShowDevice=true;
92 - }  
93 - 216 + proxy.deviceDataInfo=item;
94 } 217 }
95 218
96 return{ 219 return{