頁面更新

static/index.css

@@ -129,4 +129,77 @@
     border-color: #002e86;
     padding-top: .5rem;
     padding-bottom: .5rem;
+}
+
+/* 版本一 */
+body{
+    background: #f8f9fb;
+}
+.option{
+    background: #0174c7;
+    color:#000;
+}
+.tower-data{
+    width: 80vw;
+    margin: 0 auto;
+}
+#select_boxes{
+    padding: 10px 25px;
+}
+.select-item{
+    width: 20%;
+    padding: 10px;
+    margin: 10px;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border:none;
+
+}
+#tower_btn{
+    padding: 8px 15px;
+    margin: 10px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border:none;
+    border-radius: 5px;
+    background: #fff;
+    color:#0174c7;
+    transition: 0.3s;
+}
+#tower_btn:hover{
+    background: #0174c7;
+    color:#fff;
+}
+#tower-box{
+    padding: 10px;
+}
+#tower{
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border:none;
+
+}
+h1{
+    font-size: 1.6rem;
+    font-weight: 900;
+    padding: 15px;
+   
+}
+p{
+  font-size: 2.4vmin;
+}
+
+.card{
+    margin: 2.3vmin;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+    border-radius:15px;
+    padding: 15px;
+}
+.unit{
+    font-size: 25px;
+    font-weight: 900;
+}
+.data-title{
+    color:#495057;
 }

static/tower.js

@@ -46,24 +46,153 @@
         inner = "";
         for(var i=0;i<obj2.length;i++){
             if(obj2[i].tower_name == tower){
-                inner = '<p> DCS </P> '+
-                        '<p> 入水溫度 = '+ obj2[i].tower_data.DCS.hotTemp + ' </P> '   + 
-                        '<p> 出水溫度 = '+ obj2[i].tower_data.DCS.coldTemp + ' </P> '   + 
-                        '<p> 水流量 = '+ obj2[i].tower_data.DCS.waterFlow + ' </P> '   + 
-                        '<p> 風扇馬達電流 = '+ obj2[i].tower_data.DCS.fanMotorCur + ' </P> '   + 
-                        '<p> 風扇馬達轉速頻率 = '+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + ' </P><br> '   + 
-                        '<p> 風扇震動 </P> '+
-                        '<p> 馬達震動 = '+ obj2[i].tower_data.Moter.ch01.Vrms + ' </P> '   + 
-                        '<p> 減速機震動 = '+ obj2[i].tower_data.Fan.reducer + ' </P> '   + 
-                        '<p> 靜壓機 = '+ obj2[i].tower_data.Fan.staticPressure + ' </P> '   +
-                        '<p> 水流量 = '+ obj2[i].tower_data.Fan.waterFlow + ' </P> '   + 
-                        '<p> 濕求溫度 = '+ obj2[i].tower_data.Fan.wetTemp + ' </P> '   + 
-                        '<p> 水冷槽溫度1 = '+ obj2[i].tower_data.Fan.coldTempData1 + ' </P> '   +
-                        '<p> 水冷槽溫度2 = '+ obj2[i].tower_data.Fan.coldTempData2 + ' </P><br> '   +
-                        '<p> 馬達震動 </P> '+
-                        '<p> ch001,通道1'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+' </P> '   + 
-                        '<p> ch002,通道2'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+' </P> '
-                        ;
+                // inner = '<p> DCS </P> '+
+                //         '<p> 入水溫度 = '+ obj2[i].tower_data.DCS.hotTemp + ' </P> '   + 
+                //         '<p> 出水溫度 = '+ obj2[i].tower_data.DCS.coldTemp + ' </P> '   + 
+                //         '<p> 水流量 = '+ obj2[i].tower_data.DCS.waterFlow + ' </P> '   + 
+                //         '<p> 風扇馬達電流 = '+ obj2[i].tower_data.DCS.fanMotorCur + ' </P> '   + 
+                //         '<p> 風扇馬達轉速頻率 = '+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + ' </P><br> '   + 
+                //         '<p> 風扇震動 </P> '+
+                //         '<p> 馬達震動 = '+ obj2[i].tower_data.Moter.ch01.Vrms + ' </P> '   + 
+                //         '<p> 減速機震動 = '+ obj2[i].tower_data.Fan.reducer + ' </P> '   + 
+                //         '<p> 靜壓機 = '+ obj2[i].tower_data.Fan.staticPressure + ' </P> '   +
+                //         '<p> 水流量 = '+ obj2[i].tower_data.Fan.waterFlow + ' </P> '   + 
+                //         '<p> 濕求溫度 = '+ obj2[i].tower_data.Fan.wetTemp + ' </P> '   + 
+                //         '<p> 水冷槽溫度1 = '+ obj2[i].tower_data.Fan.coldTempData1 + ' </P> '   +
+                //         '<p> 水冷槽溫度2 = '+ obj2[i].tower_data.Fan.coldTempData2 + ' </P><br> '   +
+                //         '<p> 馬達震動 </P> '+
+                //         '<p> ch001,通道1'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+' </P> '   + 
+                //         '<p> ch002,通道2'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+' </P> '
+                //         ;
+                        inner =' <h1 class="ms-3"><i style="  color:#0174c7;" class="fas fa-file-signature me-1"></i>中控室DSC訊號</h1>\
+                        <div class="row px-0 mx-0">\
+                            <div class="card col-lg-2">\
+                                <p class="data-title fw-bold">'+ obj2[i].tower_data.DCS.hotTemp + '</p>\
+                                <div>\
+                                    <h2 class="text-center">31.612</h2>\
+                                    <P class="unit text-end">°C</P>\
+                                </div>\
+                            </div>\
+                            <div class="card col-lg-2">\
+                                <p class="data-title fw-bold">出水溫度</p>\
+                                <div>\
+                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.coldTemp + '</h2>\
+                                    <P class="unit text-end">°C</P>\
+                                </div>\
+                            </div>\
+                            <div class="card col-lg-2">\
+                                <p class="data-title fw-bold ">水流量</p>\
+                                <div>\
+                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.waterFlow + '</h2>\
+                                    <P class="unit text-end">M³/H</P>\
+                                </div>\
+                            </div>\
+                            <div class="card col-lg-2">\
+                                <p class="data-title fw-bold">風扇馬達電流</p>\
+                                <div>\
+                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorCur + '</h2>\
+                                    <P class="unit text-end">A</P>\
+                                </div>\
+                            </div>\
+                            <div class="card col-lg-2">\
+                                <p class="data-title fw-bold ">風扇馬達轉速頻率</p>\
+                                <div>\
+                                    <h2 class="text-center">'+ obj2[i].tower_data.DCS.fanMotorSpeedFreq + '&ensp;</h2>\
+                                    <P class="unit text-end">Hz</P>\
+                                </div>\
+                            </div>\
+                        </div>\
+                        <div class="card mt-5">\
+                            <div class="row">\
+                                <div class="col-lg-6">\
+                                    <h1><i style="  color:#0174c7;" class="fas fa-tachometer-alt me-2"></i>風扇震動</h1>\
+                                </div>\
+                                <div class="col-lg-6">\
+                                    <h1><i style="  color:#0174c7;" class="fas fa-cogs me-2"></i>馬達震動</h1>\
+                                </div>\
+                            </div>\
+                            <div>\
+                                <div class="row px-0 mx-0">\
+                                    <div class="col-lg-6">\
+                                        <table class="table">\
+                                            <thead>\
+                                              <tr>\
+                                                <th scope="col">數據名稱</th>\
+                                                <th scope="col">值</th>\
+                                                <th scope="col">單位</th>\
+                                              </tr>\
+                                            </thead>\
+                                            <tbody>\
+                                              <tr>\
+                                                <td>馬達震動</td>\
+                                                <td>'+ obj2[i].tower_data.Moter.ch01.Vrms + '</td>\
+                                                <td>mm/s</td>\
+                                              </tr>\
+                                              <tr>\
+                                                <td>減速機震動</td>\
+                                                <td>'+ obj2[i].tower_data.Fan.reducer + '</td>\
+                                                <td>mm/s</td>\
+                                              </tr>\
+                                              <tr>\
+                                                <td>靜壓機</td>\
+                                                <td>'+ obj2[i].tower_data.Fan.staticPressure + '</td>\
+                                                <td>pa</td>\
+                                              </tr>\
+                                              <tr>\
+                                                <td>水流量</td>\
+                                                <td>'+ obj2[i].tower_data.Fan.waterFlow + '</td>\
+                                                <td>M³/H</td>\
+                                              </tr>\
+                                              <tr>\
+                                                <td>濕求溫度</td>\
+                                                <td>'+ obj2[i].tower_data.Fan.wetTemp + '</td>\
+                                                <td>°C</td>\
+                                              </tr>\
+                                              <tr>\
+                                                <td>水冷槽溫度1</td>\
+                                                <td>'+ obj2[i].tower_data.Fan.coldTempData1 + '</td>\
+                                                <td>°C</td>\
+                                              </tr>\
+                                              <tr>\
+                                                <td>水冷槽溫度2</td>\
+                                                <td>'+ obj2[i].tower_data.Fan.coldTempData2 + '</td>\
+                                                <td>°C</td>\
+                                              </tr>\
+                                            </tbody>\
+                                          </table>\
+                                    </div>\
+                                    <div class="col-lg-6">\
+                                        <div class="row px-0 mx-0">\
+                                            <div class="card col-lg-5">\
+                                                <p class="fw-bold ">ch001,通道1</p>\
+                                                <div>\
+                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+'</p>\
+                                                </div>\
+                                            </div>\
+                                            <div class="card col-lg-5">\
+                                                <p class="fw-bold ">ch002,通道2</p>\
+                                                <div>\
+                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
+                                                </div>\
+                                            </div>\
+                                            <div class="card col-lg-5">\
+                                                <p class="fw-bold ">ch002,通道3</p>\
+                                                <div>\
+                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch01.Vrms + ',' + obj2[i].tower_data.Moter.ch01.CV+'</p>\
+                                                </div>\
+                                            </div>\
+                                            <div class="card col-lg-5">\
+                                                <p class="fw-bold ">ch002,通道4</p>\
+                                                <div>\
+                                                    <p class="text-center">'+ obj2[i].tower_data.Moter.ch02.Vrms + ',' + obj2[i].tower_data.Moter.ch02.CV+'</p>\
+                                                </div>\
+                                            </div>\
+                                        </div>\
+                                    </div>\
+                                </div>\
+                            </div>\
+                        </div>';
+                        
             }
         }
         document.getElementById("tower_info").innerHTML = inner;

templates/tower.html

@@ -7,7 +7,7 @@
 
 {% block body %}
 <script type="text/javascript">
-    
+
     // var xhr = new XMLHttpRequest();
     // var url = "tower/org";
     // var obj="";
@@ -19,31 +19,36 @@
     // xhr.send();
 
     // function insertHTML(){
-        
+
     //     var aria = document.getElementById('test');
     //     aria.innerHTML=xhr.responseText;
-        
+
     // }
 </script>
 <script type="text/javascript" src="/static/tower.js"></script>
-    <div id='select_boxes'>
-        <select id = "company-list" onChange="onChangeColumn1();">
-        </select>
-        <select id = "factory-list" onChange="onChangeColumn2();">
-            <option value=0>請選擇工廠</option>
+<div id='select_boxes'>
+    <select class="select-item" id="company-list" onChange="onChangeColumn1();">
+        <option value=0>公司A</option>
+    </select>
+    <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
+        <option value=0>工廠A</option>
+    </select>
+    <select class="select-item" id="department-list" onChange="onChangeColumn3();">
+        <option value=0>廠區A</option>
+    </select>
+    <select class="select-item" id="towerGroup-list">
+        <option value=0>機組1</option>
+    </select>
+    <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
+</div>
+<div id="tower-box">
+    <div id="tower-img" class="card text-white">
+        <select id="tower" class="mb-3" onChange="tower_info();">
+            <option value=0>dev001(水塔名稱)</option>
         </select>
-        <select id = "department-list" onChange="onChangeColumn3();">
-            <option value=0>請選擇廠區</option>
-        </select>
-        <select id = "towerGroup-list">
-            <option value=0>請選擇機組</option>
-        </select>
-        <button id="tower_btn" onclick="click_button();">搜尋</button>
-        
+        <img src="./img/1630987167905@2x.jpg" class="img-fluid" alt="...">
     </div>
-    <select id = "tower" onChange="tower_info();">
-            <option value=0>請選擇水塔</option>
-        </select>
-    <div id='test'></div>
-    <div id='tower_info'></div>
+</div>
+<div id='test'></div>
+<div id='tower_info'></div>
 {% endblock %}