optim.html 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  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 scr="hot_water" style="width: 300px;height:300px;color: #26b72b;float:left">熱水溫度</div>
  17. <div id="cold_water" style="width: 300px;height:300px;color: #8600FF;float:left">冷水溫度</div>
  18. <div id="wet_water" style="width: 300px;height:300px;color: #737300;float:left">濕球溫度</div>
  19. </div>
  20. <style>
  21. table {
  22. font-family: arial, sans-serif;
  23. border-collapse: collapse;
  24. width: 50%;
  25. }
  26. td, th {
  27. border: 1px solid #dddddd;
  28. text-align: left;
  29. padding: 8px;
  30. }
  31. tr:nth-child(even) {
  32. background-color: #dddddd;
  33. }
  34. </style>
  35. <body>
  36. <table>
  37. <tr>
  38. <th>當前狀態</th>
  39. <th></th>
  40. </tr>
  41. <tr>
  42. <td>水流量</td>
  43. <td>M*3/H</td>
  44. </tr>
  45. <tr>
  46. <td>風扇數</td>
  47. <td>台</td>
  48. </tr>
  49. </table>
  50. <table>
  51. <tr>
  52. <th>效能最佳化</th>
  53. <th></th>
  54. </tr>
  55. <tr>
  56. <th>目前溫度</th>
  57. <th>度C</th>
  58. </tr>
  59. <tr>
  60. <td>流量建議調整為</td>
  61. <td>M*3/H</td>
  62. </tr>
  63. <tr>
  64. <td>可節省水費</td>
  65. <td>元/天</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. </table>
  80. <script type="text/javascript">
  81. var hot_water = echarts.init(document.getElementById("hot_water"));
  82. var cold_water = echarts.init(document.getElementById("cold_water"));
  83. var wet_water = echarts.init(document.getElementById("wet_water"));
  84. let date = transform_time_to_string(new Date());
  85. fetch(`/temperature/date=${date}`)
  86. .then(function(response) {
  87. return response.json();
  88. })
  89. .then(function(myJson) {
  90. // 配置圖表資訊
  91. console.log(myJson);
  92. option = {
  93. series: [{
  94. type: 'liquidFill',
  95. data: myJson['hot_water']
  96. }]
  97. };
  98. hot_water.setOption(option);
  99. option = {
  100. series: [{
  101. type: 'liquidFill',
  102. data: myJson['cold_water']
  103. }]
  104. };
  105. cold_water.setOption(option);
  106. option = {
  107. series: [{
  108. type: 'liquidFill',
  109. data: myJson['wet_water']
  110. }]
  111. };
  112. wet_water.setOption(option);
  113. });
  114. </script>
  115. {% endblock %}