optim.html 3.0 KB

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