monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 赵鹏军
Commit 99f2051b787a0f60e18dc5726a026644bda20844 2 parents c166e2da 79a2a4f2

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

数据中心的机房布局样式修改



See merge request !114
Inline Side-by-side
Showing 13 changed files with 295 additions and 29 deletions
@@ -11,7 +11,7 @@ html @@ -11,7 +11,7 @@ html
11 font-size:14px; 11 font-size:14px;
12 font-family:Arial, Helvetica, sans-serif; 12 font-family:Arial, Helvetica, sans-serif;
13 -webkit-text-size-adjust:none; 13 -webkit-text-size-adjust:none;
14 - background-image:url("../img/img-beijing.png"); 14 + background-image:url("../img/img-beijing-dp.png");
15 background-repeat: no-repeat; 15 background-repeat: no-repeat;
16 background-position: center; 16 background-position: center;
17 } 17 }
@@ -36,7 +36,8 @@ body @@ -36,7 +36,8 @@ body
36 36
37 } 37 }
38 .outlinediv span { 38 .outlinediv span {
39 - color: rgba(0, 0, 0, 0.89); 39 + /*color: rgba(0, 0, 0, 0.89);*/
  40 + color: rgba(255, 255, 255, 0.89);
40 line-height: 20px; 41 line-height: 20px;
41 font-size: 14px; 42 font-size: 14px;
42 } 43 }
@@ -74,7 +74,7 @@ @@ -74,7 +74,7 @@
74 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td> 74 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E4</span></a></td>
75 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E5</span></a></td> 75 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E5</span></a></td>
76 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E6</span></a></td> 76 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E6</span></a></td>
77 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td> 77 + <td><a href="/h5/machineroomDetail/Details.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E7</span></a></td>
78 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E8</span></a></td> 78 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E8</span></a></td>
79 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E9</span></a></td> 79 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E9</span></a></td>
80 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a> 80 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a>
@@ -25,8 +25,8 @@ @@ -25,8 +25,8 @@
25 <td><img/></td> 25 <td><img/></td>
26 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td> 26 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E10</span></a></td>
27 <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td> 27 <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E11</span></a></td>
28 - <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>  
29 - <td><a href=""><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td> 28 + <td><a href="/h5/machineroomDetail/Details-E12.html"><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E12</span></a></td>
  29 + <td><a href="/h5/machineroomDetail/Details-E13.html"><img src="img/cabinet.png"class="cabinet"><span class="cabinetId">E13</span></a></td>
30 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td> 30 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E14</span></a></td>
31 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td> 31 <td><a href=""><img src="img/cabinet.png" class="cabinet"><span class="cabinetId">E15</span></a></td>
32 </tr> 32 </tr>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/Details.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 +<div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-server'>
  19 +
  20 +
  21 + <!-- 第一个物理服务器 -->
  22 + <div class='serve img-serve-8'>
  23 + <div class='img-serve' >
  24 +
  25 + <img src="img/icon-state.png" alt="" class='state'>
  26 + <div class='img-serve-text'>物理服务器</div>
  27 + <div class='lamp'>
  28 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  29 + <div class='img-lamp'>
  30 + <img src="img/nocolor.png" alt="">
  31 + <img src="img/nocolor.png" alt="">
  32 + <img src="img/nocolor.png" alt="">
  33 + <img src="img/greenColor.png" alt="">
  34 + </div>
  35 + </div>
  36 +
  37 + </div>
  38 + </div>
  39 +
  40 +
  41 + </div>
  42 +
  43 +
  44 + </div>
  45 +
  46 +
  47 +
  48 + <!-- 右侧机柜详细信息 -->
  49 + <div class='info'>
  50 +
  51 + <!-- 机柜信息 -->
  52 + <div class='info-top'>
  53 + <div class='info-contain'>
  54 + <div class='info-text'>机柜信息</div>
  55 + <div class='info-text-bot'>
  56 + <p>机 房：萧山三号机房</p>
  57 + <p>机柜编号：E12</p>
  58 + <p>机柜容量：8U</p>
  59 + <p>设备数量：1台</p>
  60 + <p>告警量：无告警</p>
  61 + </div>
  62 + </div>
  63 + </div>
  64 +
  65 + <!-- 设备信息 -->
  66 + <div class='info-bottom' id="info-bottom">
  67 + <div class='info-contain'>
  68 + <div class='info-text'>设备信息</div>
  69 + <div class='info-text-bot'>
  70 + <p>资源名称：管理决策二包(数据集市39)</p>
  71 + <p>品 牌：浪潮</p>
  72 + <p>型 号：TS860</p>
  73 + <p>序 列 号：216365930</p>
  74 + <p>业 务 IP：80.12.73.39</p>
  75 + <p>用 途：管理决策二包使用</p>
  76 + </div>
  77 + </div>
  78 + </div>
  79 +
  80 +
  81 + </div>
  82 +
  83 +
  84 +</div>
  85 +
  86 +</body>
  87 +
  88 +</html>
  89 +<script>
  90 + var eleInfo=document.getElementsByClassName('serve');
  91 + eleInfo[0].onclick = function() {
  92 + var eleBottom=document.getElementById("info-bottom")
  93 + eleBottom.setAttribute('style','display:block')
  94 + }
  95 +</script>
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +
  4 +<head>
  5 + <meta charset="UTF-8">
  6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 + <title>Document</title>
  9 + <link href="css/Details.css" rel="stylesheet" type="text/css" />
  10 +</head>
  11 +
  12 +<body>
  13 +<div class='all'>
  14 + <!-- 左侧机柜效果图 -->
  15 + <div class='contain'>
  16 +
  17 + <!-- 机柜内部服务器 -->
  18 + <div class='contain-server'>
  19 +
  20 +
  21 + <!-- 第一个物理服务器 -->
  22 + <div class='serve img-serve-8'>
  23 + <div class='img-serve' >
  24 + <div class="server-flex">
  25 + <img src="img/icon-state.png" alt="" class='state'>
  26 + <div class='img-serve-text'>物理服务器</div>
  27 + </div>
  28 +
  29 +
  30 + <div class='lamp'>
  31 + <img src="img/icon-weblogical.png" alt="" class='img-weblog'>
  32 + <div class='img-lamp'>
  33 + <img src="img/nocolor.png" alt="">
  34 + <img src="img/nocolor.png" alt="">
  35 + <img src="img/nocolor.png" alt="">
  36 + <img src="img/greenColor.png" alt="">
  37 + </div>
  38 + </div>
  39 +
  40 + </div>
  41 + </div>
  42 +
  43 +
  44 + </div>
  45 +
  46 +
  47 + </div>
  48 +
  49 +
  50 +
  51 + <!-- 右侧机柜详细信息 -->
  52 + <div class='info'>
  53 +
  54 + <!-- 机柜信息 -->
  55 + <div class='info-top'>
  56 + <div class='info-contain'>
  57 + <div class='info-text'>机柜信息</div>
  58 + <div class='info-text-bot'>
  59 + <p>机 房：萧山三号机房</p>
  60 + <p>机柜编号：E13</p>
  61 + <p>机柜容量：8U</p>
  62 + <p>设备数量：1台</p>
  63 + <p>告警量：无告警</p>
  64 + </div>
  65 + </div>
  66 + </div>
  67 +
  68 + <!-- 设备信息 -->
  69 + <div class='info-bottom' id="info-bottom">
  70 + <div class='info-contain'>
  71 + <div class='info-text'>设备信息</div>
  72 + <div class='info-text-bot'>
  73 + <p>资源名称：管理决策二包(数据集市38)</p>
  74 + <p>品 牌：浪潮</p>
  75 + <p>型 号：TS860</p>
  76 + <p>序 列 号：216365928</p>
  77 + <p>业 务 IP：80.12.73.38</p>
  78 + <p>用 途：管理决策二包使用</p>
  79 + </div>
  80 + </div>
  81 + </div>
  82 +
  83 +
  84 + </div>
  85 +
  86 +
  87 +</div>
  88 +
  89 +</body>
  90 +
  91 +</html>
  92 +<script>
  93 + var eleInfo=document.getElementsByClassName('serve');
  94 + eleInfo[0].onclick = function() {
  95 + var eleBottom=document.getElementById("info-bottom")
  96 + eleBottom.setAttribute('style','display:block')
  97 + }
  98 +</script>
1 1
2 body{ 2 body{
3 - background-image: url(../img/img-bg.png); 3 + background-image: url(../img/img-bg-1.png);
4 background-size: 100%; 4 background-size: 100%;
5 5
6 } 6 }
@@ -10,6 +10,8 @@ li{ @@ -10,6 +10,8 @@ li{
10 10
11 .all{ 11 .all{
12 display:flex; 12 display:flex;
  13 + justify-content: space-between;
  14 + overflow: hidden;
13 } 15 }
14 16
15 17
@@ -17,10 +19,10 @@ li{ @@ -17,10 +19,10 @@ li{
17 19
18 .contain{ 20 .contain{
19 21
20 - width:400px; 22 + width:413px;
21 height:710px; 23 height:710px;
22 - margin-left:15%;  
23 - margin-top:5%; 24 + /*margin-left:3%;*/
  25 + /*margin-top:5%;*/
24 /* background-color: red; */ 26 /* background-color: red; */
25 background-image: url(../img/img-no-machine.png); 27 background-image: url(../img/img-no-machine.png);
26 background-size: 100%; 28 background-size: 100%;
@@ -30,14 +32,15 @@ li{ @@ -30,14 +32,15 @@ li{
30 } 32 }
31 33
32 .contain-server{ 34 .contain-server{
33 - position: absolute;  
34 - width:365px;  
35 - height:40%;  
36 - margin-left:18px;  
37 - bottom:7%; 35 + /*position: absolute;*/
  36 + /*width:365px;*/
  37 + /*height:40%;*/
  38 + /*margin-left:18px;*/
  39 + /*bottom:7%; */
38 display: flex; 40 display: flex;
39 justify-content: space-between; 41 justify-content: space-between;
40 flex-direction:column; 42 flex-direction:column;
  43 + align-items: center;
41 /* background-color: red; */ 44 /* background-color: red; */
42 45
43 } 46 }
@@ -53,22 +56,37 @@ li{ @@ -53,22 +56,37 @@ li{
53 56
54 57
55 } 58 }
  59 +.img-serve-8{
  60 + background-image: url(../img/img-8Uservice.png);
  61 + height:127px;
  62 + width:383px;
  63 + margin-bottom: 10px;
  64 +
  65 +}
56 .img-serve{ 66 .img-serve{
57 67
58 - width:340px; 68 + /*width:340px;
59 height:50px; 69 height:50px;
60 - margin:12px auto; 70 + margin:12px auto;*/
61 display: flex; 71 display: flex;
  72 + justify-content: space-around;
  73 + align-items: center;
  74 + height: 100%;
62 75
63 } 76 }
64 77
65 .lamp{ 78 .lamp{
66 display:flex; 79 display:flex;
  80 + width:58%;
67 } 81 }
68 82
69 - 83 +.server-flex{
  84 + display: flex;
  85 + justify-content: space-around;
  86 + width:42%;
  87 +}
70 .img-lamp{ 88 .img-lamp{
71 - margin-left:15px; 89 + /*margin-left:15px;*/
72 margin-top:10px 90 margin-top:10px
73 } 91 }
74 92
@@ -83,7 +101,7 @@ li{ @@ -83,7 +101,7 @@ li{
83 .img-serve-text{ 101 .img-serve-text{
84 color:#fff; 102 color:#fff;
85 line-height: 50px; 103 line-height: 50px;
86 - margin-left:10px; 104 + /*margin-left:10px;*/
87 } 105 }
88 106
89 107
@@ -103,26 +121,33 @@ li{ @@ -103,26 +121,33 @@ li{
103 .info{ 121 .info{
104 width:500px; 122 width:500px;
105 height:700px; 123 height:700px;
106 - margin-left:8%;  
107 - margin-top:5%; 124 + margin-right:8%;
  125 + /*margin-top:5%;*/
108 /* background-color: red; */ 126 /* background-color: red; */
  127 + display: flex;
  128 + flex-flow: column;
  129 + justify-content: center;
109 130
110 } 131 }
111 132
112 133
113 .info-top{ 134 .info-top{
114 height:340px; 135 height:340px;
115 - margin-top:-10px; 136 + /*margin-top:-10px;*/
116 background-image: url(../img/img-machineInfo-bg.png); 137 background-image: url(../img/img-machineInfo-bg.png);
117 138
118 } 139 }
119 140
120 .info-bottom{ 141 .info-bottom{
121 height:340px; 142 height:340px;
122 - margin-top:10px; 143 + margin-top:20px;
123 background-image: url(../img/img-deviceInfo-bg.png); 144 background-image: url(../img/img-deviceInfo-bg.png);
124 } 145 }
125 - 146 +.contain{
  147 + display: flex;
  148 + justify-content: center;
  149 + align-items: end;
  150 +}
126 .info-contain{ 151 .info-contain{
127 width:90%; 152 width:90%;
128 display:inline-block; 153 display:inline-block;
@@ -149,3 +174,25 @@ li{ @@ -149,3 +174,25 @@ li{
149 color:#fff 174 color:#fff
150 /* background-color: rgb(93, 15, 196); */ 175 /* background-color: rgb(93, 15, 196); */
151 } 176 }
  177 +.img-serve{
  178 + cursor: pointer;
  179 +}
  180 +.info-bottom{
  181 + display:none;
  182 +}
  183 +body::-webkit-scrollbar{
  184 + width:15px;
  185 +}
  186 +/* 垂直滚动条的滑动块 */
  187 +body::-webkit-scrollbar-thumb:vertical {
  188 + border-radius: 4px;
  189 + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  190 + background-color:#169db2;
  191 +}
  192 +/*修改滚动条的下面的样式*/
  193 +body::-webkit-scrollbar-track{
  194 + background-color:#05235c;
  195 + -webkit-borderd-radius:2em;
  196 + -moz-borderd-radius:2em;
  197 + borderd-radius:2em;
  198 +}
1 1
2 body{ 2 body{
3 - background-image: url(../img/img-bg.png); 3 + background-image: url(../img/img-bg-1.png);
4 background-size: 100%; 4 background-size: 100%;
5 5
6 } 6 }
1 1
2 body{ 2 body{
3 - background-image: url(../img/img-bg.png); 3 + background-image: url(../img/img-bg-1.png);
4 background-size: 100%; 4 background-size: 100%;
5 5
6 } 6 }
@@ -82,4 +82,29 @@ @@ -82,4 +82,29 @@
82 } 82 }
83 .imgDiv-video{ 83 .imgDiv-video{
84 width: 24px; 84 width: 24px;
85 -}  
  85 +}
  86 +.dataCenter-container .el-dialog{
  87 + background-image: url("/h5/machineroom/img/img-beijing-dp.png");
  88 +}
  89 +.dataCenter-container .el-dialog__title{
  90 + color:#FFFFFF;
  91 +}
  92 +.dataCenter-container .machine-room .el-tabs__item{
  93 + color:#FFFFFF;
  94 +}
  95 +.dataCenter-container .machine-room .el-tabs__item:hover,.dataCenter-container .machine-room .el-tabs__item.is-active{
  96 + color:#3B91FF;
  97 +
  98 +}
  99 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  100 + border-bottom-color: #0b122c;
  101 +}
  102 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__item{
  103 + border-left-color: #00ccff;
  104 +}
  105 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header{
  106 + border-bottom-color: #00ccff;;
  107 +}
  108 +.dataCenter-container .machine-room .el-tabs--card>.el-tabs__header .el-tabs__nav{
  109 + border-color: #00ccff;
  110 +}
1 -<iframe v-if="src" style="width:1100px;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe> 1 +<iframe v-if="src" style="width:90%;height:720px;" :src="src" frameborder="0" ref="machineIframe" ></iframe>
@@ -35,7 +35,7 @@ @@ -35,7 +35,7 @@
35 </el-dialog> 35 </el-dialog>
36 36
37 <!--机房布局--> 37 <!--机房布局-->
38 - <el-dialog v-model="outerVisible" :title="dialogMachineName" width="60%" @close="closeDialog"> 38 + <el-dialog v-model="outerVisible" :title="dialogMachineName" width="70%" @close="closeDialog" top="4vh">
39 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom> 39 <GetMachineRoom v-if="commandNameData" :commandNameData="commandNameData"></GetMachineRoom>
40 40
41 </el-dialog> 41 </el-dialog>