261 lines
9.7 KiB
Plaintext
261 lines
9.7 KiB
Plaintext
<div class="row my-5">
|
||
<div class="tree w-100">
|
||
<ul>
|
||
<li class=" w-100">
|
||
<div class="mx-auto" style="width: 20%;">
|
||
<div class="card border m-auto m-lg-0" id="Invertercard">
|
||
<div> <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="..."> </div>
|
||
<div class="card-body d-flex justify-content-between pb-0 px-2">
|
||
<h4 class="font-weight-bold" style="line-height: 27px;" id="Invertercard-Name"> <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed"> <i class="fal fa-check"></i> </a> 新竹巨城站</h4>
|
||
<p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x" id="Invertercard-weathericon"></i></p>
|
||
</div>
|
||
<div class="list-group list-group-flush">
|
||
<div class="list-group-item px-2">
|
||
<div class=" d-flex justify-content-between">
|
||
<p>發電量</p>
|
||
<p><span class="color-info-700 font-weight-bold" id="Invertercard-kwh">185</span> kWh</p>
|
||
<p id="Invertercard-Temp">27°C</p>
|
||
</div>
|
||
<div class=" d-flex justify-content-between">
|
||
<p>發電金額</p>
|
||
<p><span class="color-info-700 font-weight-bold" id="Invertercard-money">2,5840</span> NT</p>
|
||
<p class="color-info-700 font-weight-bold" id="Invertercard-type">自建躉售</p>
|
||
</div>
|
||
<div class=" d-flex justify-content-between">
|
||
<p>PR值</p>
|
||
<p><span class="color-info-700 font-weight-bold" id="Invertercard-pr">90</span> %</p>
|
||
<p class="small" id="Invertercard-date">17:50:36</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<ul id="ullist">
|
||
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal fade" id="inverterdetailmodal" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title" id="inverterInfo-name">逆變器：022020001010001</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true"><i class="fal fa-times"></i></span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<table class="table table-bordered mb-3 text-center">
|
||
<thead class="thead-themed">
|
||
<tr>
|
||
<th>供應商</th>
|
||
<th>型號</th>
|
||
<th>廠商序號</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="inverterInfo-Detail">
|
||
<tr>
|
||
<td>SOLAREDGE</td>
|
||
<td>SE82.8K</td>
|
||
<td>20210831002</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<table class="table table-bordered mb-3 text-center">
|
||
<thead class="thead-themed">
|
||
<tr>
|
||
<th colspan="3">交流</th>
|
||
</tr>
|
||
<tr>
|
||
<th>組別</th>
|
||
<th>電壓(V)</th>
|
||
<th>電流(A)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="inverterInfo-AC">
|
||
<tr>
|
||
<td>A</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
</tr>
|
||
<tr>
|
||
<td>B</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
</tr>
|
||
<tr>
|
||
<td>C</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="3">輸出功率 <span class="color-info-700 font-weight-bold">4800</span> KW</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="3">PR <span class="color-info-700 font-weight-bold">96.23</span> %</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<table class="table table-bordered mb-3 text-center">
|
||
<thead class="thead-themed">
|
||
<tr>
|
||
<th colspan="5">直流</th>
|
||
</tr>
|
||
<tr>
|
||
<th>組別</th>
|
||
<th>電壓(V)</th>
|
||
<th>電流(A)</th>
|
||
<th>功率 KW</th>
|
||
<th>RA %</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="inverterInfo-DC">
|
||
<tr>
|
||
<td>1</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
<td>3.66</td>
|
||
<td>89.12</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
<td>3.66</td>
|
||
<td>89.12</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
<td>3.66</td>
|
||
<td>89.12</td>
|
||
</tr>
|
||
<tr>
|
||
<td>4</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
<td>3.66</td>
|
||
<td>89.12</td>
|
||
</tr>
|
||
<tr>
|
||
<td>5</td>
|
||
<td>230.6</td>
|
||
<td>3.66</td>
|
||
<td>3.66</td>
|
||
<td>89.12</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="5">直流功率 <span class="color-info-700 font-weight-bold">5200</span> KW</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<style>
|
||
/*Now the CSS Created by R.S*/
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.tree ul {
|
||
padding-top: 20px;
|
||
position: relative;
|
||
transition: all 0.5s;
|
||
-webkit-transition: all 0.5s;
|
||
-moz-transition: all 0.5s;
|
||
}
|
||
|
||
.tree li {
|
||
float: left;
|
||
text-align: center;
|
||
list-style-type: none;
|
||
position: relative;
|
||
padding: 20px 0.75rem 0 0.75rem;
|
||
transition: all 0.5s;
|
||
-webkit-transition: all 0.5s;
|
||
-moz-transition: all 0.5s;
|
||
}
|
||
|
||
/*We will use ::before and ::after to draw the connectors*/
|
||
|
||
.tree li::before, .tree li::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 50%;
|
||
border-top: 1px solid #ccc;
|
||
width: 50%;
|
||
height: 20px;
|
||
}
|
||
|
||
.tree li::after {
|
||
right: auto;
|
||
left: 50%;
|
||
border-left: 1px solid #ccc;
|
||
}
|
||
|
||
/*We need to remove left-right connectors from elements without
|
||
any siblings*/
|
||
.tree li:only-child::after, .tree li:only-child::before {
|
||
display: none;
|
||
}
|
||
|
||
/*Remove space from the top of single children*/
|
||
.tree li:only-child {
|
||
padding-top: 0;
|
||
}
|
||
|
||
/*Remove left connector from first child and
|
||
right connector from last child*/
|
||
.tree li:first-child::before, .tree li:last-child::after {
|
||
border: 0 none;
|
||
}
|
||
/*Adding back the vertical connector to the last nodes*/
|
||
.tree li:last-child::before {
|
||
border-right: 1px solid #ccc;
|
||
border-radius: 0 5px 0 0;
|
||
-webkit-border-radius: 0 5px 0 0;
|
||
-moz-border-radius: 0 5px 0 0;
|
||
}
|
||
|
||
.tree li:first-child::after {
|
||
border-radius: 5px 0 0 0;
|
||
-webkit-border-radius: 5px 0 0 0;
|
||
-moz-border-radius: 5px 0 0 0;
|
||
}
|
||
|
||
/*Time to add downward connectors from parents*/
|
||
.tree ul ul::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 50%;
|
||
border-left: 1px solid #ccc;
|
||
width: 0;
|
||
height: 20px;
|
||
}
|
||
|
||
.tree li a:hover + ul li::after,
|
||
.tree li a:hover + ul li::before,
|
||
.tree li a:hover + ul::before,
|
||
.tree li a:hover + ul ul::before {
|
||
border-color: #94a0b4;
|
||
}
|
||
|
||
/*Thats all. I hope you enjoyed it.
|
||
Thanks :)*/
|
||
</style> |