monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit b02b7f0456108f59c7e1ab8f319b3028a2e112ca 1 parent f96fe19b

故障诊断调整

Inline Side-by-side
Showing 10 changed files with 94 additions and 24 deletions
... ... @@ -55,6 +55,18 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xec1e;</span>
<div class="name">点</div>
<div class="code-name">&amp;#xec1e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8c4;</span>
<div class="name">216更多-竖向</div>
<div class="code-name">&amp;#xe8c4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67b;</span>
<div class="name">微信</div>
<div class="code-name">&amp;#xe67b;</div>
... ... @@ -1434,9 +1446,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1654501118919') format('woff2'),
url('iconfont.woff?t=1654501118919') format('woff'),
url('iconfont.ttf?t=1654501118919') format('truetype');
src: url('iconfont.woff2?t=1658918655869') format('woff2'),
url('iconfont.woff?t=1658918655869') format('woff'),
url('iconfont.ttf?t=1658918655869') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
... ... @@ -1463,6 +1475,24 @@
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-dian"></span>
<div class="name">
点
</div>
<div class="code-name">.icon-dian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gengduo-shuxiang"></span>
<div class="name">
216更多-竖向
</div>
<div class="code-name">.icon-gengduo-shuxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-weixin"></span>
<div class="name">
微信
... ... @@ -3534,6 +3564,22 @@
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dian"></use>
</svg>
<div class="name">点</div>
<div class="code-name">#icon-dian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gengduo-shuxiang"></use>
</svg>
<div class="name">216更多-竖向</div>
<div class="code-name">#icon-gengduo-shuxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-weixin"></use>
</svg>
<div class="name">微信</div>
... ...
@font-face {
font-family: "iconfont"; /* Project id 2843738 */
src: url('iconfont.woff2?t=1654501118919') format('woff2'),
url('iconfont.woff?t=1654501118919') format('woff'),
url('iconfont.ttf?t=1654501118919') format('truetype');
src: url('iconfont.woff2?t=1658918655869') format('woff2'),
url('iconfont.woff?t=1658918655869') format('woff'),
url('iconfont.ttf?t=1658918655869') format('truetype');
}
.iconfont {
... ... @@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-dian:before {
content: "\ec1e";
}
.icon-gengduo-shuxiang:before {
content: "\e8c4";
}
.icon-weixin:before {
content: "\e67b";
}
... ...
... ... @@ -6,6 +6,20 @@
"description": "",
"glyphs": [
{
"icon_id": "4933869",
"name": "点",
"font_class": "dian",
"unicode": "ec1e",
"unicode_decimal": 60446
},
{
"icon_id": "1727447",
"name": "216更多-竖向",
"font_class": "gengduo-shuxiang",
"unicode": "e8c4",
"unicode_decimal": 59588
},
{
"icon_id": "1206404",
"name": "微信",
"font_class": "weixin",
... ...
... ... @@ -2,10 +2,10 @@
<div class="d-flex">
<img src="../src/style/img/fault/base.gif">
<h3 style="margin-left: 10px">基础资源</h3>
<div style="width: calc(100% - 200px);line-height: 54px" class="align-right">
<!--<div style="width: calc(100% - 200px);line-height: 54px" class="align-right">
<a class="m-r-20" @click="allCard()">更多</a>
<a @click="closeCard()">收起</a>
</div>
</div>-->
</div>
<el-divider/>
<div class="d-flex" v-model="dialTest">
... ...
<el-divider/>
<div class="d-flex" v-model="dialTest">
<div class="d-flex align-center" style="width: 300px;justify-content: center;">
<span style="width: 10px;height: 10px;background-color: red;border-radius: 50%">&nbsp;</span>
<!--<span style="width: 10px;height: 10px;background-color: red;border-radius: 50%">&nbsp;</span>-->
<i class="iconfont icon-dian" style="font-size: 32px;color: red;"/>
<img class="m-l-6" src="../src/style/img/fault/base/resType/数据库.png">
<a class="m-l-6">数据库</a>
</div>
... ... @@ -59,43 +60,43 @@
<img src="../src/style/img/fault/base/基础-数据库-黄.png">
</el-col>
<el-col :span="16">
资源名称xxxxxx<br>
127.0.0.0.111111
这是资源名称啊啊啊啊啊啊啊<br>
IP地址：127.0.0.0.111111
</el-col>
<el-col :span="4">
<i class="iconfont">more</i>
<el-col :span="4" class="align-right">
<i class="iconfont icon-gengduo-shuxiang" style="font-size: 30px;"></i>
</el-col>
</el-row>
<el-row style="height: 70px;padding: 10px 30px;">
<el-col :span="4">
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/连接失败.png">
</el-col>
<el-col :span="1" style="line-height: 36px">
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
|
</el-col>
<el-col :span="4">
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/CPU-绿.png"><br/>
21%
</el-col>
<el-col :span="1" style="line-height: 36px">
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
|
</el-col>
<el-col :span="4">
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/内存.png"><br/>
21%
</el-col>
<el-col :span="1" style="line-height: 36px">
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
|
</el-col>
<el-col :span="4">
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/alarm.png"><br/>
21%
</el-col>
<el-col :span="1" style="line-height: 36px">
<el-col :span="1" style="line-height: 36px;color: gainsboro;">
|
</el-col>
<el-col :span="4">
<el-col :span="4" class="align-center">
<img src="../src/style/img/fault/base/时间-绿.png"><br/>
30分钟
</el-col>
... ...
<div style="text-align: left;overflow-y: auto;max-height: 100%;">
<div class="d-flex p-6">
<div style="width: calc(100% - 50px)">{{faultDetailDialogTitle}}</div>
<div class="d-flex p-6" style="position: fixed;z-index: 1000;width: 100%;background: aliceblue;">
<div style="width: calc(100% - 80px)">{{faultDetailDialogTitle}}</div>
<el-button type="text" size="small"
@click.prevent="$global.openReport('GZZDS',{faultNumber:faultDetailDetailInfo.faultNo},'60%','80%')">
<i class="iconfont iconfont-small icon-icon-rizhi"/> 报表
</el-button>
</div>
<div style="height: 44px"></div>
<el-timeline>
<el-timeline-item v-for="item in faultDetailDetailInfo.items" center :timestamp="item.faultTypeName"
... ...