更新 'templates/optim.html'

templates/optim.html

@@ -90,7 +90,7 @@ tr:nth-child(even) {
 </table>
 
 
-    <script type="text/javascript">
+     <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"));
@@ -129,4 +129,113 @@ tr:nth-child(even) {
     
     </script> 
 
+    <script>$(function() {
+      $('.progress-fill 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: #666;
+  height: 20px;
+  width: 50%;
+  color: #fff;
+  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-fill">
+          <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-fill">
+          <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-fill">
+          <span>20%</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-fill">
+          <span>34%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
 {% endblock %}