monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit fbf661882b0c6173e6db7c39aea8d20ad10022b9 1 parent dc40dad2

【973】 阿里云和深信服负载均衡详情页优化-深信服负载均衡详情页优化

Inline Side-by-side
Showing 2 changed files with 50 additions and 36 deletions
@@ -91,24 +91,27 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function @@ -91,24 +91,27 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function
91 } 91 }
92 }) 92 })
93 for (let nodeInfo of nodeInfoList) { 93 for (let nodeInfo of nodeInfoList) {
  94 + // lsq 详情页节电池样式修改 2022-08-08
94 htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}"> 95 htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}">
95 <div class="vs-title"> 96 <div class="vs-title">
96 <p>${nodeInfo.nodeName}</p> 97 <p>${nodeInfo.nodeName}</p>
97 </div> 98 </div>
98 - <div class="vs-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">  
99 - <div class="vs-icon"></div> 99 + <div class="vs-flex">
  100 + <div class="vs-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">
  101 + <div class="vs-icon"></div>
  102 + </div>
  103 + <ul class="vs-info">
  104 + <li>
  105 + ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}
  106 + </li>
  107 + <li>
  108 + 当前连接数: ${nodeInfo.currentConnections}
  109 + </li>
  110 + <li>
  111 + 新增连接数: ${nodeInfo.newConnections}
  112 + </li>
  113 + </ul>
100 </div> 114 </div>
101 - <ul class="vs-info">  
102 - <li>  
103 - ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}  
104 - </li>  
105 - <li>  
106 - 当前连接数: ${nodeInfo.currentConnections}  
107 - </li>  
108 - <li>  
109 - 新增连接数: ${nodeInfo.newConnections}  
110 - </li>  
111 - </ul>  
112 </div>` 115 </div>`
113 } 116 }
114 $vsDiv.html(htmlStr) 117 $vsDiv.html(htmlStr)
@@ -168,27 +171,30 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function @@ -168,27 +171,30 @@ layui.define(['laypage', 'commonDetail', 'common', 'element', 'admin'], function
168 } 171 }
169 }) 172 })
170 for (let nodeInfo of nodeInfoList) { 173 for (let nodeInfo of nodeInfoList) {
  174 + // lsq 详情页节电池样式修改 2022-08-08
171 htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}"> 175 htmlStr += `<div class="detail-loadbalancing-vs" data-flag="${nodeInfo.flag}">
172 <div class="vs-title"> 176 <div class="vs-title">
173 <p>${nodeInfo.nodeName}</p> 177 <p>${nodeInfo.nodeName}</p>
174 </div> 178 </div>
175 - <div class="node-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">  
176 - <div class="node-icon"></div> 179 + <div class="vs-flex">
  180 + <div class="node-icon-div ${nodeInfo.healthStatus == 'normal' ? 'vs-icon-up' : 'vs-icon-down'}">
  181 + <div class="node-icon"></div>
  182 + </div>
  183 + <ul class="vs-info">
  184 + <li>
  185 + ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}
  186 + </li>
  187 + <li>
  188 + 当前连接数: ${nodeInfo.currentConnections}
  189 + </li>
  190 + <li>
  191 + 新增连接数: ${nodeInfo.newConnections}
  192 + </li>
  193 + <li>
  194 + ${nodeInfo.ipAddr}:${nodeInfo.port}
  195 + </li>
  196 + </ul>
177 </div> 197 </div>
178 - <ul class="vs-info">  
179 - <li>  
180 - ${nodeInfo.configStatus == 'enable' ? '<i class="iconfont icon-size good">\ue659</i> 已启用' : '<i class="iconfont icon-size serious">\ue668</i> 未启用'}  
181 - </li>  
182 - <li>  
183 - 当前连接数: ${nodeInfo.currentConnections}  
184 - </li>  
185 - <li>  
186 - 新增连接数: ${nodeInfo.newConnections}  
187 - </li>  
188 - <li>  
189 - ${nodeInfo.ipAddr}:${nodeInfo.port}  
190 - </li>  
191 - </ul>  
192 </div>` 198 </div>`
193 } 199 }
194 $vsDiv.html(htmlStr) 200 $vsDiv.html(htmlStr)
@@ -7992,12 +7992,13 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { @@ -7992,12 +7992,13 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
7992 /*通知页面中间统计图布局样式*/ 7992 /*通知页面中间统计图布局样式*/
7993 7993
7994 .detail-loadbalancing-vs { 7994 .detail-loadbalancing-vs {
7995 - width: calc(12.5% - 22px); 7995 + /*lsq 详情页节电池样式修改 2022-08-08*/
  7996 + width: calc(14% - 0px);
7996 height: 115px; 7997 height: 115px;
7997 margin: 5px; 7998 margin: 5px;
7998 float: left; 7999 float: left;
7999 border: 1px solid #dcdcdc; 8000 border: 1px solid #dcdcdc;
8000 - padding: 10px 20px; 8001 + padding: 10px;
8001 border-radius: 5px; 8002 border-radius: 5px;
8002 cursor: pointer; 8003 cursor: pointer;
8003 } 8004 }
@@ -8006,15 +8007,20 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { @@ -8006,15 +8007,20 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
8006 font-size: 15px; 8007 font-size: 15px;
8007 font-weight: bold; 8008 font-weight: bold;
8008 height: 30px; 8009 height: 30px;
  8010 + word-wrap: break-word;
8009 } 8011 }
8010 8012
8011 .detail-loadbalancing-vs .vs-title { 8013 .detail-loadbalancing-vs .vs-title {
8012 margin-bottom: 10px; 8014 margin-bottom: 10px;
8013 } 8015 }
8014 - 8016 +/*lsq 详情页节点池样式修改 2022-08-08*/
  8017 +.detail-loadbalancing-vs .vs-flex{
  8018 + display: flex;
  8019 + align-items: center;
  8020 +}
8015 .detail-loadbalancing-vs div.vs-icon-div { 8021 .detail-loadbalancing-vs div.vs-icon-div {
8016 - width: 55px;  
8017 - height: 55px; 8022 + width: 45px;
  8023 + height: 45px;
8018 padding: 4px; 8024 padding: 4px;
8019 float: left; 8025 float: left;
8020 border-radius: 10px; 8026 border-radius: 10px;
@@ -8030,8 +8036,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { @@ -8030,8 +8036,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
8030 } 8036 }
8031 8037
8032 .detail-loadbalancing-vs div.vs-icon { 8038 .detail-loadbalancing-vs div.vs-icon {
8033 - width: 50px;  
8034 - height: 50px; 8039 + width: 40px;
  8040 + height: 40px;
8035 background-repeat: no-repeat; 8041 background-repeat: no-repeat;
8036 background-position: center; 8042 background-position: center;
8037 background-image: url(/src/style/img/icon-db.png); 8043 background-image: url(/src/style/img/icon-db.png);
@@ -8062,6 +8068,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now { @@ -8062,6 +8068,8 @@ table.table-duty tbody td div.table-duty-td-day .duty-td-div-now {
8062 width: 61%; 8068 width: 61%;
8063 float: left; 8069 float: left;
8064 padding-left: 10px; 8070 padding-left: 10px;
  8071 + /*lsq 详情页节点池样式修改 2022-08-08*/
  8072 + flex:1;
8065 } 8073 }
8066 8074
8067 .detail-loadbalancing-vs .vs-info li { 8075 .detail-loadbalancing-vs .vs-info li {