Skip to content

S
smart
Commit 5ab677de authored by wangqinghua's avatar wangqinghua
Browse files
Options

样式

parent d578fdf2
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 118 deletions
src/main/webapp/app/overAll/basic/basic-detail/basic-detail.component.html
View file @ 5ab677de
......@@ -23,9 +23,9 @@
<nz-spin [nzSpinning]="isSpinning">
<!-- 交换机 -->
<!-- <smart-switch></smart-switch>-->
<smart-switch></smart-switch>
<!-- 服务器-->
<smart-server></smart-server>
<!-- <smart-server></smart-server>-->
<!-- 数据库-->
<!-- <smart-database></smart-database>-->
</nz-spin>
src/main/webapp/app/overAll/modal/database/database.component.html
View file @ 5ab677de
<div>
<nz-row>
<nz-col span="12">
<div>
<nz-row>
<nz-col span="12">
<p class="host-item-title">数据库</p>
</nz-col>
<nz-col span="12">
<p class="host-item-title">指标列表</p>
<nz-row>
<div class="host-item-content">
<nz-col nzSpan="14"><span class="left">主键缓存大小(MB)：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">数据库存储引擎：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">最大连接数：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">缓存大小：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">主键命中率(%)：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">X活数：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">当前进程数：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">数据文件请求速率：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
<nz-col nzSpan="14"><span class="left">缓存命中率(%)：</span></nz-col>
<nz-col nzSpan="10"><span class="right">284</span></nz-col>
</div>
</nz-row>
</nz-col>
</nz-row>
</div>
<div>
</div>
</nz-col>
<nz-col span="12">
<div class="host-item-title">
告警总数趋势
</div>
<div></div>
</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="12">
<div>
<nz-row>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">数据库</p>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row>
<nz-col nzSpan="14">主键缓存大小(MB)：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">数据库存储引擎：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">最大连接数：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">缓存大小：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">主键命中率(%)：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">X活数：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">当前进程数：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">数据文件请求速率：</nz-col>
<nz-col nzSpan="10">284</nz-col>
<nz-col nzSpan="14">缓存命中率(%)：</nz-col>
<nz-col nzSpan="10">284</nz-col>
</nz-row>
</div>
</nz-col>
</nz-row>
</div>
<div>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">
告警总数趋势
</div>
<div></div>
</nz-col>
</nz-row>
</div>
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ 5ab677de
<div>
<nz-row>
<nz-col span="12">
<nz-col nzSpan="12">
<div class="padding-10" style="height: 20%;">
<p class="host-item-title">关键指标</p>
</div>
......@@ -9,62 +9,64 @@
</div>
<div class="padding-10" style="height: 40%;">
<nz-row>
<nz-col span="12">
<nz-col class="padding-right-10" nzSpan="12">
<p class="host-item-title">基本信息</p>
<div class="host-item-content">
<nz-col nzSpan="8"><span class="left">资源状态：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-row>
<nz-col nzSpan="8"><span >资源状态：</span></nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col>
<nz-col nzSpan="8"><span class="left">名称：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span >名称：</span></nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col>
<nz-col nzSpan="8"><span class="left">IP地址：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span >IP地址：</span></nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col>
<nz-col nzSpan="8"><span class="left">设备类型：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span >设备类型：</span></nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col>
<nz-col nzSpan="8"><span class="left">资产编号：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span >资产编号：</span></nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col>
<nz-col nzSpan="8"><span class="left">资源位置：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span >资源位置：</span></nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col>
<nz-col nzSpan="8"><span class="left">负责人：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8"><span >负责人：</span></nz-col>
<nz-col nzSpan="16"><span >100</span></nz-col>
</nz-row>
</div>
</nz-col>
<nz-col span="12">
<nz-col class="padding-left-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row >
<nz-col nzSpan="8"><span class="left">CPU利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-row>
<nz-col nzSpan="16" >CPU利用率(%)：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="8"><span class="left">Ping延时(ms)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="16" >Ping延时(ms)：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="8"><span class="left">内存利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="16" >内存利用率(%)：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="8"><span class="left">CPU个数：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="16" >CPU个数：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="8"><span class="left">接口数：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="16" >接口数：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="8"><span class="left">物理内存容量(GB)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="16" >物理内存容量(GB)：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
<nz-col nzSpan="8"><span class="left">MAC地址：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="16" >MAC地址：</nz-col>
<nz-col nzSpan="8" >100</nz-col>
</nz-row>
</div>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col span="12">
<nz-col nzSpan="12">
<div class="padding-10" style="height: 50%;">
<div class="host-item-title">
指标趋势
......
src/main/webapp/app/overAll/modal/switch/switch.component.html
View file @ 5ab677de
......@@ -10,23 +10,23 @@
<p class="host-item-title">基本信息</p>
<div class="host-item-content">
<nz-row>
<nz-col nzSpan="8"><span class="left">资源状态：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">名称：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">IP地址：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">设备类型：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">资产编号：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">负责人：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">100</nz-col>
</nz-row>
</div>
</div>
......@@ -34,20 +34,20 @@
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row >
<nz-col nzSpan="8"><span class="left">CPU利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">CPU利用率(%)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">Ping延时(ms)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">Ping延时(ms)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">丢包数：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">丢包数：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">内存利用率(%)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">内存利用率(%)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
<nz-col nzSpan="8"><span class="left">总流速(Kbps)：</span></nz-col>
<nz-col nzSpan="16"><span class="right">100</span></nz-col>
<nz-col nzSpan="8">总流速(Kbps)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
</nz-row>
</div>
......
src/main/webapp/content/scss/darkBlue.scss
View file @ 5ab677de
......@@ -30,17 +30,18 @@ $dark:#193250;
.host-item-content{
background-color: rgba(0,0,0,.2);
color: #b7cfea;
nz-col{
margin-bottom: 10px;
.left{
padding: 10px;
nz-row{
nz-col:nth-child(2n +1){
color: #ffffff;
text-align: right;
margin-bottom: 10px;
}
.right{
nz-col:nth-child(2n){
color: #7bcefb;
text-align: left;
margin-bottom: 10px;
}
}
nz-col[nzSpan='8'],nz-col[nzSpan='14']{
text-align: right;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment