aaron-1015
/
mechanical


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284
							{% extends "index.html" %}
{% block title %}智能最佳化{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}


{% block body %}
<script type="text/javascript" src="/static/tower3.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>
</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>

<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>


     <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> 

    <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;
}

.horizontal .progress-bar {
  float: left;
  height: 18px;
  width: 100%;
  padding: 3px 0;
}

.horizontal .progress-track {
  position: relative;
  width: 100%;
  height: 20px;
  background: #ebebeb;
}

.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: 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: 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: 20px;
  width: 50%;
  color: #080707;
  text-align: center;
  font-family: "Lato","Verdana",sans-serif;
  font-size: 12px;
  line-height: 20px;
}

.progress-group {
  display: flex;
}

.progress-label {
  width: 170px;
  text-align: right;
  padding-right: 10px;
}

.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>
      </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>
      </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>
      </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>
      </div>
    </div>
  </div>
{% endblock %}