|
|
@@ -6,279 +6,382 @@
|
|
|
|
|
|
|
|
|
{% block body %}
|
|
|
-<script type="text/javascript" src="/static/tower3.js"></script>
|
|
|
+<script type="text/javascript" src="/static/tower.js"></script>
|
|
|
+
|
|
|
<div id='select_boxes'>
|
|
|
- <select class="select-item" id="company-list" onChange="onChangeColumn1();">
|
|
|
- <option value=0>公司</option>
|
|
|
- </select>
|
|
|
- <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
|
|
|
- <option value=0>工廠</option>
|
|
|
- </select>
|
|
|
- <select class="select-item" id="department-list" onChange="onChangeColumn3();">
|
|
|
- <option value=0>廠區</option>
|
|
|
- </select>
|
|
|
- <select class="select-item" id="towerGroup-list">
|
|
|
- <option value=0>機組</option>
|
|
|
- </select>
|
|
|
- <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
|
|
|
+ <select class="select-item" id="company-list" onChange="onChangeColumn1();">
|
|
|
+ <option value=0>公司</option>
|
|
|
+ </select>
|
|
|
+ <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
|
|
|
+ <option value=0>工廠</option>
|
|
|
+ </select>
|
|
|
+ <select class="select-item" id="department-list" onChange="onChangeColumn3();">
|
|
|
+ <option value=0>廠區</option>
|
|
|
+ </select>
|
|
|
+ <select class="select-item" id="towerGroup-list">
|
|
|
+ <option value=0>機組</option>
|
|
|
+ </select>
|
|
|
+ <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
|
|
|
</div>
|
|
|
- <div id="tower_temperature">
|
|
|
- <div id="tower_temperature">
|
|
|
- <div scr="hot_water" style="width: 100px;height:100px;color: #26b72b;float:left">熱水溫度</div>
|
|
|
- <font size="1">{{ x }}</font><br>
|
|
|
- <div id="cold_water" style="width: 100px;height:100px;color: #8600FF;float:left">冷水溫度</div>
|
|
|
- <font size="1">{{ y }}</font><br>
|
|
|
- <div id="wet_water" style="width: 100px;height:100px;color: #737300;float:left">濕球溫度</div>
|
|
|
- <font size="1">{{ z }}</font><br>
|
|
|
- </div>
|
|
|
- <style>
|
|
|
-table {
|
|
|
- font-family: arial, sans-serif;
|
|
|
- border-collapse: collapse;
|
|
|
- width: 50%;
|
|
|
-}
|
|
|
-
|
|
|
-td, th {
|
|
|
- border: 1px solid #dddddd;
|
|
|
- text-align: left;
|
|
|
- padding: 8px;
|
|
|
-}
|
|
|
|
|
|
-tr:nth-child(even) {
|
|
|
- background-color: #dddddd;
|
|
|
-}
|
|
|
-</style>
|
|
|
<body>
|
|
|
-<table>
|
|
|
- <tr>
|
|
|
- <th>當前狀態</th>
|
|
|
- <th></th>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>水流量</td>
|
|
|
- <td>{{ x }} M*3/H</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>風扇數</td>
|
|
|
- <td>{{ x }} 台</td>
|
|
|
- </tr>
|
|
|
-</table>
|
|
|
+ <div id="tower_temperature">
|
|
|
+ <div id="tower_temperature">
|
|
|
+ <div class="row px-0 mx-0">
|
|
|
+ <div class="col-lg-4">
|
|
|
+ <div scr="hot_water" class="fw-bold">
|
|
|
+ <h1><i style="color:#FF0000;" class="fas fa-thermometer-half me-2"></i>熱水溫度(°C)</h1>
|
|
|
+ <div id="hot_water_data">
|
|
|
+ <font size="1">{{ x }}</font><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 text-center">
|
|
|
+ <div id="cold_water" class="fw-bold">
|
|
|
+ <h1><i style="color:#0174c7;" class="fas fa-thermometer-half me-2"></i>冷水溫度(°C)</h1>
|
|
|
+ <font size="1">{{ y }}</font><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-4 text-end">
|
|
|
+ <div id="wet_water" class="fw-bold">
|
|
|
+ <h1><i style="color:#3dba1e;" class="fas fa-thermometer-half me-2"></i>濕球溫度(°C)</h1>
|
|
|
+ <font size="1">{{ z }}</font><br>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ const chart = echarts.init(document.getElementById("hot_water_data"));
|
|
|
+ chart.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "liquidFill",
|
|
|
+ data: [0.6, 0.5, 0.4, 0.3]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ const chart2 = echarts.init(document.getElementById("cold_water_data"));
|
|
|
+ chart2.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "liquidFill",
|
|
|
+ data: [0.6, 0.5, 0.4, 0.3]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ <script>
|
|
|
+ const chart3 = echarts.init(document.getElementById("wet_water_data"));
|
|
|
+ chart3.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "liquidFill",
|
|
|
+ data: [0.6, 0.5, 0.4, 0.3]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <!-- css -->
|
|
|
+ <!-- <style>
|
|
|
+ table {
|
|
|
+ font-family: arial, sans-serif;
|
|
|
+ border-collapse: collapse;
|
|
|
+ width: 50%;
|
|
|
+ }
|
|
|
|
|
|
-<table>
|
|
|
- <tr>
|
|
|
- <th>效能最佳化</th>
|
|
|
- <th></th>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <th>目前溫度</th>
|
|
|
- <th>{{ x }} 度C</th>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>流量建議調整為</td>
|
|
|
- <td>{{ x }} M*3/H</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>可節省水費</td>
|
|
|
- <td>{{ x }} 元/天</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>風扇建議調整為</td>
|
|
|
- <td>{{ x }} 台</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>可節省電費</td>
|
|
|
- <td>{{ x }} 元/天</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td>總節省費用</td>
|
|
|
- <td>{{ x }} 元/天</td>
|
|
|
- </tr>
|
|
|
-</table>
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ border: 1px solid #dddddd;
|
|
|
+ text-align: left;
|
|
|
+ padding: 8px;
|
|
|
+ }
|
|
|
|
|
|
+ tr:nth-child(even) {
|
|
|
+ background-color: #dddddd;
|
|
|
+ }
|
|
|
+ </style> -->
|
|
|
|
|
|
- <script type="text/javascript">
|
|
|
- var hot_water = echarts.init(document.getElementById("hot_water"));
|
|
|
- var cold_water = echarts.init(document.getElementById("cold_water"));
|
|
|
- var wet_water = echarts.init(document.getElementById("wet_water"));
|
|
|
-
|
|
|
- let date = transform_time_to_string(new Date());
|
|
|
- fetch(`/temperature/date=${date}`)
|
|
|
- .then(function(response) {
|
|
|
- return response.json();
|
|
|
- })
|
|
|
- .then(function(myJson) {
|
|
|
- // 配置圖表資訊
|
|
|
- console.log(myJson);
|
|
|
- option = {
|
|
|
- series: [{
|
|
|
- type: 'liquidFill',
|
|
|
- data: myJson['hot_water']
|
|
|
- }]
|
|
|
- };
|
|
|
- hot_water.setOption(option);
|
|
|
- option = {
|
|
|
- series: [{
|
|
|
- type: 'liquidFill',
|
|
|
- data: myJson['cold_water']
|
|
|
- }]
|
|
|
- };
|
|
|
- cold_water.setOption(option);
|
|
|
- option = {
|
|
|
- series: [{
|
|
|
- type: 'liquidFill',
|
|
|
- data: myJson['wet_water']
|
|
|
- }]
|
|
|
- };
|
|
|
- wet_water.setOption(option);
|
|
|
-
|
|
|
- });
|
|
|
+ <section class="tower_data my-3">
|
|
|
+ <div class="card">
|
|
|
+ <div class="row px-0 mx-0">
|
|
|
+ <div class="col-lg-6">
|
|
|
+ <h1 class="ps-0">當前狀態</h1>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-6">
|
|
|
+ <h1 class="ps-0">校能最佳化</h1>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row px-0 mx-0">
|
|
|
+ <div class="col-lg-6">
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <td>水流量</td>
|
|
|
+ <td>{{ x }} M*3/H</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>風扇數</td>
|
|
|
+ <td>{{ x }} 台</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="col-lg-6">
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <th>目前溫度</th>
|
|
|
+ <th>{{ x }} 度C</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>流量建議調整為</td>
|
|
|
+ <td>{{ x }} M*3/H</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>可節省水費</td>
|
|
|
+ <td>{{ x }} 元/天</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>風扇建議調整為</td>
|
|
|
+ <td>{{ x }} 台</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>可節省電費</td>
|
|
|
+ <td>{{ x }} 元/天</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>總節省費用</td>
|
|
|
+ <td>{{ x }} 元/天</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <!-- <script src="/static/echarts.min.js"></script>
|
|
|
+ <script src="/static/echarts-liquidfill.js"></script>
|
|
|
+ <script>
|
|
|
|
|
|
- </script>
|
|
|
+ // const chart = echarts.init(document.getElementById("app"));
|
|
|
+ var hot_water = echarts.init(document.getElementById("app"));
|
|
|
+ var cold_water = echarts.init(document.getElementById("app2"));
|
|
|
+ var wet_water = echarts.init(document.getElementById("app3"));
|
|
|
+ let date = transform_time_to_string(new Date());
|
|
|
+ fetch(`/temperature/date=${date}`)
|
|
|
+ .then(function (response) {
|
|
|
+ return response.json();
|
|
|
+ })
|
|
|
+ .then(function (myJson) {
|
|
|
+ console.log(myJson);
|
|
|
+ console.log(1);
|
|
|
+ hot_water.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "liquidFill",
|
|
|
+ data: [0.6, 0.5, 0.4, 0.3]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ cold_water.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "liquidFill",
|
|
|
+ data: [0.6, 0.5, 0.4, 0.3]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ wet_water.setOption({
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "liquidFill",
|
|
|
+ data: [0.6, 0.5, 0.4, 0.3]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ });
|
|
|
|
|
|
- <script>$(function() {
|
|
|
- $('.progress-fill span').each(function(){
|
|
|
- var percent = $(this).html();
|
|
|
- $(this).parent().css('width', percent);
|
|
|
- });
|
|
|
- $('.progress-fill2 span').each(function(){
|
|
|
- var percent = $(this).html();
|
|
|
- $(this).parent().css('width', percent);
|
|
|
- });
|
|
|
- $('.progress-fill3 span').each(function(){
|
|
|
- var percent = $(this).html();
|
|
|
- $(this).parent().css('width', percent);
|
|
|
- });
|
|
|
- $('.progress-fill4 span').each(function(){
|
|
|
- var percent = $(this).html();
|
|
|
- $(this).parent().css('width', percent);
|
|
|
- });
|
|
|
- });</script>
|
|
|
- <style>
|
|
|
-.container {
|
|
|
- width: 500px;
|
|
|
- margin: 20px;
|
|
|
- background: #fff;
|
|
|
- padding: 20px;
|
|
|
- overflow: hidden;
|
|
|
- float: left;
|
|
|
-}
|
|
|
+ </script> -->
|
|
|
+
|
|
|
+ <!-- <script type="text/javascript">
|
|
|
+ var hot_water = echarts.init(document.getElementById("hot_water"));
|
|
|
+ var cold_water = echarts.init(document.getElementById("cold_water"));
|
|
|
+ var wet_water = echarts.init(document.getElementById("wet_water"));
|
|
|
+
|
|
|
+ let date = transform_time_to_string(new Date());
|
|
|
+ fetch(`/temperature/date=${date}`)
|
|
|
+ .then(function (response) {
|
|
|
+ return response.json();
|
|
|
+ })
|
|
|
+ .then(function (myJson) {
|
|
|
+ // 配置圖表資訊
|
|
|
+ console.log(myJson);
|
|
|
+ option = {
|
|
|
+ series: [{
|
|
|
+ type: 'liquidFill',
|
|
|
+ data: myJson['hot_water']
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ hot_water.setOption(option);
|
|
|
+ option = {
|
|
|
+ series: [{
|
|
|
+ type: 'liquidFill',
|
|
|
+ data: myJson['cold_water']
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ cold_water.setOption(option);
|
|
|
+ option = {
|
|
|
+ series: [{
|
|
|
+ type: 'liquidFill',
|
|
|
+ data: myJson['wet_water']
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ wet_water.setOption(option);
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ </script> -->
|
|
|
+ <!-- css -->
|
|
|
+ <!-- <style>
|
|
|
+ .horizontal .progress-bar {
|
|
|
+ float: left;
|
|
|
+ height: 50px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 3px 0;
|
|
|
+ }
|
|
|
|
|
|
-.horizontal .progress-bar {
|
|
|
- float: left;
|
|
|
- height: 18px;
|
|
|
- width: 100%;
|
|
|
- padding: 3px 0;
|
|
|
-}
|
|
|
+ .horizontal .progress-track {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ background: #ebebeb;
|
|
|
+ }
|
|
|
|
|
|
-.horizontal .progress-track {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 20px;
|
|
|
- background: #ebebeb;
|
|
|
-}
|
|
|
+ .horizontal .progress-fill {
|
|
|
+ position: relative;
|
|
|
+ background: #2883fa;
|
|
|
+ height: 50px;
|
|
|
+ width: 50%;
|
|
|
+ color: #080707;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "Lato", "Verdana", sans-serif;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
|
|
|
-.horizontal .progress-fill {
|
|
|
- position: relative;
|
|
|
- background: #2883fa;
|
|
|
- height: 20px;
|
|
|
- width: 50%;
|
|
|
- color: #080707;
|
|
|
- text-align: center;
|
|
|
- font-family: "Lato","Verdana",sans-serif;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
+ .horizontal .progress-fill2 {
|
|
|
+ position: relative;
|
|
|
+ background: #ba711e;
|
|
|
+ height: 50px;
|
|
|
+ width: 50%;
|
|
|
+ color: #080707;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "Lato", "Verdana", sans-serif;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
|
|
|
-.horizontal .progress-fill2 {
|
|
|
- position: relative;
|
|
|
- background: #ba711e;
|
|
|
- height: 20px;
|
|
|
- width: 50%;
|
|
|
- color: #080707;
|
|
|
- text-align: center;
|
|
|
- font-family: "Lato","Verdana",sans-serif;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
+ .horizontal .progress-fill3 {
|
|
|
+ position: relative;
|
|
|
+ background: #3dba1e;
|
|
|
+ height: 50px;
|
|
|
+ width: 50%;
|
|
|
+ color: #080707;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "Lato", "Verdana", sans-serif;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
|
|
|
-.horizontal .progress-fill3 {
|
|
|
- position: relative;
|
|
|
- background: #3dba1e;
|
|
|
- height: 20px;
|
|
|
- width: 50%;
|
|
|
- color: #080707;
|
|
|
- text-align: center;
|
|
|
- font-family: "Lato","Verdana",sans-serif;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
+ .horizontal .progress-fill4 {
|
|
|
+ position: relative;
|
|
|
+ background: #f0ff1f;
|
|
|
+ height: 50px;
|
|
|
+ width: 50%;
|
|
|
+ color: #080707;
|
|
|
+ text-align: center;
|
|
|
+ font-family: "Lato", "Verdana", sans-serif;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
|
|
|
-.horizontal .progress-fill4 {
|
|
|
- position: relative;
|
|
|
- background: #f0ff1f;
|
|
|
- height: 20px;
|
|
|
- width: 50%;
|
|
|
- color: #080707;
|
|
|
- text-align: center;
|
|
|
- font-family: "Lato","Verdana",sans-serif;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 20px;
|
|
|
-}
|
|
|
+ .progress-label {
|
|
|
+ width: 170px;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
|
|
|
-.progress-group {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
+ .progress-group {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
|
|
|
-.progress-label {
|
|
|
- width: 170px;
|
|
|
- text-align: right;
|
|
|
- padding-right: 10px;
|
|
|
-}
|
|
|
+ .progress-label::after {
|
|
|
+ content: ":";
|
|
|
+ }
|
|
|
+ </style> -->
|
|
|
|
|
|
-.progress-label::after {
|
|
|
- content: ":";
|
|
|
-}
|
|
|
- </style>>
|
|
|
-<div class="container horizontal flat">
|
|
|
- <h2>測試驗證</h2>
|
|
|
- <div class="progress-group">
|
|
|
- <div class="progress-label">水流量</div>
|
|
|
- <div class="progress-bar horizontal">
|
|
|
- <div class="progress-track">
|
|
|
- <div class="progress-fill">
|
|
|
- <span>100%</span>
|
|
|
+ <div class="card mt-5">
|
|
|
+ <div class="horizontal flat">
|
|
|
+ <h1><i style="color:#0174c7;" class="far fa-chart-bar me-1"></i>測試驗證</h1>
|
|
|
+ <div class="progress-group">
|
|
|
+ <div class="progress-label d-flex align-items-center justify-content-end">水流量</div>
|
|
|
+ <div class="progress-bar horizontal my-2">
|
|
|
+ <div class="progress-track">
|
|
|
+ <div class="progress-fill d-flex align-items-center justify-content-center">
|
|
|
+ <span>100%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="progress-group">
|
|
|
- <div class="progress-label">風扇數</div>
|
|
|
- <div class="progress-bar horizontal">
|
|
|
- <div class="progress-track">
|
|
|
- <div class="progress-fill2">
|
|
|
- <span>75%</span>
|
|
|
+ <div class="progress-group">
|
|
|
+ <div class="progress-label d-flex align-items-center justify-content-end">風扇數</div>
|
|
|
+ <div class="progress-bar horizontal my-2">
|
|
|
+ <div class="progress-track">
|
|
|
+ <div class="progress-fill2 d-flex align-items-center justify-content-center">
|
|
|
+ <span>75%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="progress-group">
|
|
|
- <div class="progress-label">濕求溫度</div>
|
|
|
- <div class="progress-bar horizontal">
|
|
|
- <div class="progress-track">
|
|
|
- <div class="progress-fill3">
|
|
|
- <span>60%</span>
|
|
|
+ <div class="progress-group">
|
|
|
+ <div class="progress-label d-flex align-items-center justify-content-end">濕求溫度</div>
|
|
|
+ <div class="progress-bar horizontal my-2">
|
|
|
+ <div class="progress-track">
|
|
|
+ <div class="progress-fill3 d-flex align-items-center justify-content-center">
|
|
|
+ <span>60%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="progress-group">
|
|
|
- <div class="progress-label">熱水溫度</div>
|
|
|
- <div class="progress-bar horizontal">
|
|
|
- <div class="progress-track">
|
|
|
- <div class="progress-fill4">
|
|
|
- <span>20%</span>
|
|
|
+ <div class="progress-group">
|
|
|
+ <div class="progress-label d-flex align-items-center justify-content-end">熱水溫度</div>
|
|
|
+ <div class="progress-bar horizontal my-2">
|
|
|
+ <div class="progress-track">
|
|
|
+ <div class="progress-fill4 d-flex align-items-center justify-content-center">
|
|
|
+ <span>20%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-{% endblock %}
|
|
|
+ <script>$(function () {
|
|
|
+ $('.progress-fill span').each(function () {
|
|
|
+ var percent = $(this).html();
|
|
|
+ $(this).parent().css('width', percent);
|
|
|
+ });
|
|
|
+ $('.progress-fill2 span').each(function () {
|
|
|
+ var percent = $(this).html();
|
|
|
+ $(this).parent().css('width', percent);
|
|
|
+ });
|
|
|
+ $('.progress-fill3 span').each(function () {
|
|
|
+ var percent = $(this).html();
|
|
|
+ $(this).parent().css('width', percent);
|
|
|
+ });
|
|
|
+ $('.progress-fill4 span').each(function () {
|
|
|
+ var percent = $(this).html();
|
|
|
+ $(this).parent().css('width', percent);
|
|
|
+ });
|
|
|
+ });</script>
|
|
|
+
|
|
|
+ {% endblock %}
|
jeter20131220
