aaron-1015
/
mechanical


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


{% block body %}
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js" integrity="sha512-+UYTD5L/bU1sgAfWA0ELK5RlQ811q8wZIocqI7+K0Lhh8yVdIoAMEs96wJAIbgFvzynPm36ZCXtkydxu1cs27w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../static/optim.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 class="me-0" id="tower_btn" onclick="click_button();"><i class="fas fa-search me-3"></i>搜尋</button>
</div>

<body>
  <div>
    <div style="padding: 15px;">
      <h1 class="mb-0" style="color:#002e86">機組1 總共有{{count}}座水塔</h1>
    </div>
    <div class="card">
      <p  style="color:#002e86; padding: 15px;">濕球溫度預測:預測未來72小時濕球溫度不會低於下限</p>
      <canvas  id="optim-predict"></canvas>
    </div>
    <div class="row px-0 mx-0 mb-5">
      <div class="col-lg-8">
        <div class="card2 h-100">
          <div class="fw-bold">
            <h1 class="mb-0" style="color:#002e86">水塔效能最佳化</h1>

            <h1 class="mt-0 pt-0">
              <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
            </h1>
          </div>
          <div class="row px-0 mx-0">
            <div class="col-lg-4 text-center">
              <div scr="hot_water" class="fw-bold">
                <!-- <h1><i style="color:#FF0000;" class="fas fa-thermometer-half me-2"></i>熱水溫度(°C)</h1> -->
                <p style="color:#002e86;">熱水溫度(°C)</p>

                <!-- <font size="1">{{ x }}</font><br> -->
                <div style="margin-top: -60px;" id="app" class="chart"></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> -->
                <p style="color:#002e86;">冷水溫度(°C)</p>

                <!-- <font size="1">{{ y }}</font><br> -->
                <div style="margin-top: -60px;" style="margin-top: -80px;" id="app2"></div>
              </div>
            </div>
            <div class="col-lg-4 text-center">
              <div id="wet_water" class="fw-bold">
                <!-- <h1><i style="color:#3dba1e;" class="fas fa-thermometer-half me-2"></i>濕球溫度(°C)</h1> -->
                <p style="color:#002e86;">濕球溫度(°C)</p>

                <!-- <font size="1">{{ z }}</font><br> -->
                <div style="margin-top: -60px;" id="app3"></div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="card2 h-100">
          <h1 style="color:#002e86" class="mb-0">當前狀態</h1>
          <h1 class="my-0 py-0">
            <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
          </h1>
          <div style="font-weight:normal; padding: 15px;">
            <table class="table table-borderless">
              <tr>
                <td>水流量</td>
                <td>{{ waterflow }} M*3/H</td>
              </tr>
              <tr>
                <td>風扇數</td>
                <td>{{ fannum }} 台</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <section class="tower_data my-3 mb-5">
      <div class="row px-0 mx-0">
        <div class="col-lg-6">
          <div class="card2 h-100">
            <h1 style="color:#002e86">效能最佳化</h1>
            <h1 class="my-0 py-0">
              <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
            </h1>
            <div style="padding: 15px;">
              <table class="table">
                <tr>
                  <td>目前溫度</td>
                  <td>{{ x }} 度C</td>
                </tr>
                <tr>
                  <td>流量建議調整為</td>
                  <td>{{ flowchange }} M*3/H</td>
                </tr>
                <tr>
                  <td>可節省水費</td>
                  <td>{{ savewater }} 元/天</td>
                </tr>
                <tr>
                  <td>風扇建議調整為</td>
                  <td>{{ fanchange }} 台</td>
                </tr>
                <tr>
                  <td>可節省電費</td>
                  <td>{{ saveelec }} 元/天</td>
                </tr>
                <tr>
                  <td>總節省費用</td>
                  <td>{{ total }} 元/天</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="card2 h-100">
            <div class="horizontal flat">
              <!-- <h1><i style="color:#0174c7;" class="far fa-chart-bar me-1"></i>測試驗證</h1> -->
              <h1 style="color:#002e86">測試驗證</h1>
              <h1 class="my-0 py-0">
                <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
              </h1>
              <div class="progress-content" style="padding: 15px;">
                <p class="mb-0">水流量:</p>
                <div class="progress-group mb-2">
                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">水流量</div> -->
                  <!-- <span>100%</span> -->
                  <div class="progress-bar horizontal my-1">
                    <div class="progress-track">
                      <div class="progress-fill d-flex align-items-center justify-content-center">
                        <span>100%</span>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="mb-0">風扇數:</p>

                <div class="progress-group mb-2">
                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">風扇數</div> -->
                  <div class="progress-bar horizontal my-1">
                    <div class="progress-track">
                      <div class="progress-fill2 d-flex align-items-center justify-content-center">
                        <span>75%</span>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="mb-0">濕求溫度:</p>

                <div class="progress-group mb-2">
                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">濕求溫度</div> -->
                  <div class="progress-bar horizontal my-1">
                    <div class="progress-track">
                      <div class="progress-fill3 d-flex align-items-center justify-content-center">
                        <span>60%</span>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="mb-0">熱水溫度:</p>

                <div class="progress-group">
                  <!-- <div class="progress-label d-flex align-items-center justify-content-end">熱水溫度</div> -->
                  <div class="progress-bar horizontal my-1">
                    <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>
        </div>
      </div>
    </section>
    <script src="/static/echarts.min.js"></script>
    <script src="/static/echarts-liquidfill.js"></script>
    <script>
      function navlinkactive() {
        $('#nav-optim').addClass('active');

      };
      navlinkactive();
    </script>
    <script>
      var hot = '{{x}}'
      var cold = '{{y}}'
      var wet = '{{z}}'
      console.log(hot);
      console.log(cold);
      console.log(wet);
      var chart = echarts.init(document.getElementById("app"));
      chart.setOption({
        series: [
          {
            type: "liquidFill",
            name: 'Liquid Fill',
            data: [{
              name: 'First Data',
              value: 0.6,
              itemStyle: {
                color: '#FF0000'
              },
            }],
            radius: '70%',
            outline: {
              show: false
            },
            radius: '70%',
            outline: {
              show: false
            },
            outline: {
              show: false
            },
            label: {
              formatter: function (param) {
                return hot;
              },
              fontSize: 28
            }
          }
        ],
      });
    </script>
    <script>
      var hot = '{{x}}'
      var cold = '{{y}}'
      var wet = '{{z}}'
      console.log(hot);
      console.log(cold);
      console.log(wet);
      const chart2 = echarts.init(document.getElementById("app2"));
      chart2.setOption({
        series: [
          {
            type: "liquidFill",
            name: 'Liquid Fill',
            data: [{
              name: 'First Data',
              value: 0.6,
              itemStyle: {
                color: '#0174c7'
              },
            }],
            radius: '70%',
            outline: {
              show: false
            },
            radius: '70%',
            outline: {
              show: false
            },
            outline: {
              show: false
            },
            label: {
              formatter: function (param) {
                return cold;
              },
              fontSize: 28
            }
          }
        ],
      });
    </script>
    <script>
      var hot = '{{x}}'
      var cold = '{{y}}'
      var wet = '{{z}}'
      console.log(hot);
      console.log(cold);
      console.log(wet);
      const chart3 = echarts.init(document.getElementById("app3"));
      chart3.setOption({
        series: [
          {
            type: "liquidFill",
            name: 'Liquid Fill',
            data: [{
              name: 'First Data',
              value: 0.6,
              itemStyle: {
                color: '#3dba1e'
              },
            }],
            radius: '70%',
            outline: {
              show: false
            },
            outline: {
              show: false
            },
            label: {
              formatter: function (param) {
                return wet;
              },
              fontSize: 28
            }
          }
        ],
      });
    </script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"
      integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q=="
      crossorigin="anonymous" referrerpolicy="no-referrer"></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%;
        padding: 15px !important;
      }

      td,
      th {
        border: none !important;
        text-align: left;
        padding: 8px;
        font-size: 2.4vmin;
      }

      tr:nth-child(even) {
        background-color: #e4f8ff;
      }
    </style>


    <!-- <script src="/static/echarts.min.js"></script>
    <script src="/static/echarts-liquidfill.js"></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) {
        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> -->

    <!-- <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-track {
        position: relative;
        width: 100%;
        height: 50px;
        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-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-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-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;
      }

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

      .progress-group {
        display: flex;
      }

      .progress-label::after {
        content: ":";
      }
    </style> -->

    <!-- <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 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 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 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> -->
    <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>
    <!-- <script></script> -->
    {% endblock %}