optim.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. {% extends "index.html" %}
  2. {% block title %}智能最佳化{% endblock %}
  3. {% block head %}
  4. {{ super() }}
  5. {% endblock %}
  6. {% block body %}
  7. <div id="select_histories">
  8. <div id="select_histories_1">
  9. <select>
  10. <option></option>
  11. </select>
  12. <button id="search">搜尋</button>
  13. </div>
  14. </div>
  15. <div id="tower_temperature">
  16. <div id="tower_temperature">
  17. <div scr="hot_water" style="width: 300px;height:300px;color: #26b72b;float:left">熱水溫度</div>
  18. <font size="1">Hot temp: {{ temp }}</font><br>
  19. <div id="cold_water" style="width: 300px;height:300px;color: #8600FF;float:left">冷水溫度</div>
  20. <font size="1">Cold temp: {{ temp2 }}</font><br>
  21. <div id="wet_water" style="width: 300px;height:300px;color: #737300;float:left">濕球溫度</div>
  22. <font size="1">Wet temp: {{ temp3 }}</font><br>
  23. </div>
  24. <style>
  25. table {
  26. font-family: arial, sans-serif;
  27. border-collapse: collapse;
  28. width: 50%;
  29. }
  30. td, th {
  31. border: 1px solid #dddddd;
  32. text-align: left;
  33. padding: 8px;
  34. }
  35. tr:nth-child(even) {
  36. background-color: #dddddd;
  37. }
  38. </style>
  39. <body>
  40. <table>
  41. <tr>
  42. <th>當前狀態</th>
  43. <th></th>
  44. </tr>
  45. <tr>
  46. <td>水流量</td>
  47. <td>M*3/H</td>
  48. </tr>
  49. <tr>
  50. <td>風扇數</td>
  51. <td>台</td>
  52. </tr>
  53. </table>
  54. <table>
  55. <tr>
  56. <th>效能最佳化</th>
  57. <th></th>
  58. </tr>
  59. <tr>
  60. <th>目前溫度</th>
  61. <th>度C</th>
  62. </tr>
  63. <tr>
  64. <td>流量建議調整為</td>
  65. <td>M*3/H</td>
  66. </tr>
  67. <tr>
  68. <td>可節省水費</td>
  69. <td>元/天</td>
  70. </tr>
  71. <tr>
  72. <td>風扇建議調整為</td>
  73. <td>台</td>
  74. </tr>
  75. <tr>
  76. <td>可節省電費</td>
  77. <td>元/天</td>
  78. </tr>
  79. <tr>
  80. <td>總節省費用</td>
  81. <td>元/天</td>
  82. </tr>
  83. </table>
  84. <script type="text/javascript">
  85. var hot_water = echarts.init(document.getElementById("hot_water"));
  86. var cold_water = echarts.init(document.getElementById("cold_water"));
  87. var wet_water = echarts.init(document.getElementById("wet_water"));
  88. let date = transform_time_to_string(new Date());
  89. fetch(`/temperature/date=${date}`)
  90. .then(function(response) {
  91. return response.json();
  92. })
  93. .then(function(myJson) {
  94. // 配置圖表資訊
  95. console.log(myJson);
  96. option = {
  97. series: [{
  98. type: 'liquidFill',
  99. data: myJson['hot_water']
  100. }]
  101. };
  102. hot_water.setOption(option);
  103. option = {
  104. series: [{
  105. type: 'liquidFill',
  106. data: myJson['cold_water']
  107. }]
  108. };
  109. cold_water.setOption(option);
  110. option = {
  111. series: [{
  112. type: 'liquidFill',
  113. data: myJson['wet_water']
  114. }]
  115. };
  116. wet_water.setOption(option);
  117. });
  118. </script>
  119. {% endblock %}