优化界面显示

This commit is contained in:
GoEdgeLab
2021-01-19 10:21:53 +08:00
parent f3ddd61aa2
commit 7d55f61660
4 changed files with 83 additions and 54 deletions

View File

@@ -119,6 +119,13 @@ pre:not(.CodeMirror-line) {
tbody { tbody {
background: transparent; background: transparent;
} }
.table-box {
margin-top: 1em;
overflow-x: auto;
}
.table-box::-webkit-scrollbar {
height: 6px;
}
.table.width30 { .table.width30 {
width: 30em !important; width: 30em !important;
} }
@@ -128,6 +135,9 @@ tbody {
.table.width40 { .table.width40 {
width: 40em !important; width: 40em !important;
} }
.table.width1024 {
width: 1024px !important;
}
.table th, .table th,
.table td { .table td {
font-size: 0.9em !important; font-size: 0.9em !important;

File diff suppressed because one or more lines are too long

View File

@@ -45,6 +45,15 @@ tbody {
background: transparent; background: transparent;
} }
.table-box {
margin-top: 1em;
overflow-x: auto;
}
.table-box::-webkit-scrollbar {
height: 6px;
}
.table.width30 { .table.width30 {
width: 30em !important; width: 30em !important;
} }
@@ -57,6 +66,10 @@ tbody {
width: 40em !important; width: 40em !important;
} }
.table.width1024 {
width: 1024px !important;
}
.table th, .table td { .table th, .table td {
font-size: 0.9em !important; font-size: 0.9em !important;
} }

View File

@@ -6,58 +6,64 @@
<p class="comment" v-if="nodes.length == 0">暂时还没有节点。</p> <p class="comment" v-if="nodes.length == 0">暂时还没有节点。</p>
<table class="ui table selectable celled" v-if="nodes.length > 0"> <div class="table-box">
<thead> <table class="ui table selectable celled" v-if="nodes.length > 0">
<tr> <thead>
<th>节点名称</th> <tr>
<th>GRPC访问地址</th> <th>节点名称</th>
<th>HTTP访问地址</th> <th>GRPC访问地址</th>
<th class="width6 center">版本号</th> <th>HTTP访问地址</th>
<th class="width5 center">CPU</th> <th class="width6 center">版本号</th>
<th class="width5 center">内存</th> <th class="width5 center">CPU</th>
<th class="center width10">状态</th> <th class="width5 center">内存</th>
<th class="two op">操作</th> <th class="center width10">状态</th>
</tr> <th class="two op">操作</th>
</thead> </tr>
<tr v-for="node in nodes"> </thead>
<td>{{node.name}}</td> <tr v-for="node in nodes">
<td> <td>{{node.name}}</td>
<div v-if="node.accessAddrs != null && node.accessAddrs.length > 0"> <td>
<span class="ui label tiny basic" v-for="addr in node.accessAddrs" style="margin-bottom: 0.5em">{{addr}}</span> <div v-if="node.accessAddrs != null && node.accessAddrs.length > 0">
</div> <div v-for="addr in node.accessAddrs">
<div v-else class="disabled">-</div> <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
</td> </div>
<td> </div>
<div v-if="node.restAccessAddrs != null && node.restAccessAddrs.length > 0"> <div v-else class="disabled">-</div>
<span class="ui label tiny basic" v-for="addr in node.restAccessAddrs" style="margin-bottom: 0.5em">{{addr}}</span> </td>
</div> <td>
<div v-else class="disabled">-</div> <div v-if="node.restAccessAddrs != null && node.restAccessAddrs.length > 0">
</td> <div v-for="addr in node.restAccessAddrs">
<td class="center"> <span class="ui label tiny basic" style="margin-bottom: 0.5em">{{addr}}</span>
<span v-if="node.status.buildVersion.length > 0">v{{node.status.buildVersion}}</span> </div>
<span v-else class="disabled">-</span> </div>
</td> <div v-else class="disabled">-</div>
<td class="center"> </td>
<span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.80}">{{node.status.cpuUsageText}}</span> <td class="center">
<span v-else class="disabled">-</span> <span v-if="node.status.buildVersion.length > 0">v{{node.status.buildVersion}}</span>
</td> <span v-else class="disabled">-</span>
<td class="center"> </td>
<span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span> <td class="center">
<span v-else class="disabled">-</span> <span v-if="node.status.isActive" :class="{red:node.status.cpuUsage > 0.80}">{{node.status.cpuUsageText}}</span>
</td> <span v-else class="disabled">-</span>
<td class="center"> </td>
<span v-if="!node.isOn"><label-on :v-is-on="node.isOn"></label-on></span> <td class="center">
<div v-else-if="node.status.isActive"> <span v-if="node.status.isActive" :class="{red:node.status.memUsage > 0.80}">{{node.status.memUsageText}}</span>
<span class="green">运行中</span> <span v-else class="disabled">-</span>
</div> </td>
<span v-else-if="node.status.updatedAt > 0" class="red">已断开</span> <td class="center">
<span v-else-if="node.status.updatedAt == 0" class="red">未连接</span> <span v-if="!node.isOn"><label-on :v-is-on="node.isOn"></label-on></span>
</td> <div v-else-if="node.status.isActive">
<td> <span class="green">运行中</span>
<a :href="'/api/node?nodeId=' + node.id">详情</a> &nbsp; </div>
<a href="" @click.prevent="deleteNode(node.id)">删除</a> <span v-else-if="node.status.updatedAt > 0" class="red">已断开</span>
</td> <span v-else-if="node.status.updatedAt == 0" class="red">未连接</span>
</tr> </td>
</table> <td>
<a :href="'/api/node?nodeId=' + node.id">详情</a> &nbsp;
<a href="" @click.prevent="deleteNode(node.id)">删除</a>
</td>
</tr>
</table>
</div>
<div class="page" v-html="page"></div> <div class="page" v-html="page"></div>