monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 鲁尚清
Commit e592a0381e1178e8fdc72563bc2e84873949ff47 1 parent 75a05288

故障诊断中的正常占比的位置调整为垂直居中，进度条上的文字居中与进度条

Inline Side-by-side
Showing 5 changed files with 26 additions and 11 deletions
@@ -58,6 +58,7 @@ @@ -58,6 +58,7 @@
58 .progress-con{ 58 .progress-con{
59 width:80%; 59 width:80%;
60 margin:0 20px; 60 margin:0 20px;
  61 + position: relative;
61 } 62 }
62 .program-text{ 63 .program-text{
63 color:#666666; 64 color:#666666;
@@ -134,3 +135,13 @@ @@ -134,3 +135,13 @@
134 right:0; 135 right:0;
135 top:0; 136 top:0;
136 } 137 }
  138 +.progress-con-text{
  139 + text-align: center;
  140 + position: absolute;
  141 + z-index: 9;
  142 + left: 0;
  143 + right: 0;
  144 + color: #fff;
  145 + font-size: 14px;
  146 + line-height: 28px;
  147 +}
@@ -44,10 +44,11 @@ @@ -44,10 +44,11 @@
44 </div> 44 </div>
45 </div> 45 </div>
46 </div> 46 </div>
47 - <div class="d-flex" style="flex: 1"> 47 + <div class="d-flex" style="flex: 1;align-items: center;">
48 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div> 48 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
49 <div class="progress-con"> 49 <div class="progress-con">
50 - <el-progress :text-inside="true" :stroke-width="26" 50 + <div class="progress-con-text">{{dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0}}%</div>
  51 + <el-progress :show-text="false" :stroke-width="26"
51 :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0" 52 :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
52 color="#64A64C"/> 53 color="#64A64C"/>
53 </div> 54 </div>
@@ -54,11 +54,12 @@ @@ -54,11 +54,12 @@
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 - <div class="d-flex" style="flex: 1"> 57 + <div class="d-flex" style="flex: 1;align-items: center;">
58 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div> 58 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
59 <div class="progress-con"> 59 <div class="progress-con">
60 - <el-progress :text-inside="true" :stroke-width="26"  
61 - :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0" 60 + <div class="progress-con-text">{{dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0}}%</div>
  61 + <el-progress :show-text="false" :stroke-width="26"
  62 + :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
62 color="#64A64C"/> 63 color="#64A64C"/>
63 </div> 64 </div>
64 </div> 65 </div>
@@ -54,11 +54,12 @@ @@ -54,11 +54,12 @@
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 - <div class="d-flex" style="flex: 1"> 57 + <div class="d-flex" style="flex: 1;align-items: center;">
58 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div> 58 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
59 <div class="progress-con"> 59 <div class="progress-con">
60 - <el-progress :text-inside="true" :stroke-width="26"  
61 - :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0" 60 + <div class="progress-con-text">{{dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0}}%</div>
  61 + <el-progress :show-text="false" :stroke-width="26"
  62 + :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
62 color="#64A64C"/> 63 color="#64A64C"/>
63 </div> 64 </div>
64 </div> 65 </div>
@@ -54,11 +54,12 @@ @@ -54,11 +54,12 @@
54 </div> 54 </div>
55 </div> 55 </div>
56 </div> 56 </div>
57 - <div class="d-flex" style="flex: 1"> 57 + <div class="d-flex" style="flex: 1;align-items: center;">
58 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div> 58 <div style="color: #666666;font-size: 16px;margin-left:30px;min-width: 80px">正常占比</div>
59 <div class="progress-con"> 59 <div class="progress-con">
60 - <el-progress :text-inside="true" :stroke-width="26"  
61 - :percentage="dialTest && dialTest.normalProportion?dialTest.normalProportion*100:0" 60 + <div class="progress-con-text">{{dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0}}%</div>
  61 + <el-progress :show-text="false" :stroke-width="26"
  62 + :percentage="dialTest && dialTest.normalProportion ? dialTest.normalProportion*100 : 0"
62 color="#64A64C"/> 63 color="#64A64C"/>
63 </div> 64 </div>
64 </div> 65 </div>