update

static/home.js

@@ -56,7 +56,7 @@ function company_show(){
     
     for(var i=0;i<obj[1].length;i++){
         if(company_arr.indexOf(obj[1][i].company)==-1){
-            inner+="<button id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
+            inner+="<button class='btn text-white' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
             inner += ">公司"+obj[1][i].company+"</button><br>";
             company_arr.push(obj[1][i].company);
             console.log(obj[1][i].company);
@@ -82,22 +82,22 @@ function company_health(company_arr){
 }
 
 function factory_show(company){
-    var inner='<p>廠區資訊</p><br>';
+    var inner='<p>廠區資訊</p>';
     var factory_arr = new Array();
     for(var i=0;i<obj[1].length;i++){
         if(factory_arr.indexOf(obj[1][i].factory)==-1 && obj[1][i].company==company){
-            inner+="<button id='factory " +obj[1][i].factory+ "' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
+            inner+="<button class='btn text-white m-1' id='factory " +obj[1][i].factory+ "' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
             inner += ">廠區"+obj[1][i].factory+"</button><br>";
             factory_arr.push(obj[1][i].factory);
         }
     }
     //測試用
-    inner+="<button id='factory B' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\"";
+    inner+="<button class='btn btn btn-outline-success m-1' id='factory B' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\"";
     inner += ">廠區B</button><br>";
-    inner+="<button id='factory C' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"";
+    inner+="<button class='btn btn btn-outline-success m-1' id='factory C' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"";
     inner += ">廠區C</button><br>";
     document.getElementById('company').innerHTML="";
-    document.getElementById('company_name').innerHTML="公司 "+ company + "<button onclick=\"company_show();\">返回</button>";
+    document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"company_show();\">返回</button> 公司"+ company + "";
     document.getElementById('factory_select').innerHTML=inner;
     factory_health(factory_arr);
     document.getElementById("map").style.display="";
@@ -146,11 +146,11 @@ function department_show(company,factory){
 
 function department_change(){
     console.log("change");
-    var inner='<table><tr><td>機組</td><td>健康狀態</td><td>查看</td></tr>';
+    var inner='<table style="font-size: 16px;" class="table text-center"><thead><tr><th>機組</th><th>健康狀態</th><th>查看</th></tr></thead>';
     var tower_group_arr = new Array();
     for(var i=0;i<obj[1].length;i++){
         if(tower_group_arr.indexOf(obj[1][i].group)==-1 && obj[1][i].company==document.getElementById('company_text').innerHTML&& obj[1][i].factory==document.getElementById('factory_text').innerHTML&& obj[1][i].department==document.getElementById("department_list").value){
-            inner+='<tr><td>' + obj[1][i].group + '</td><td>健康</td><td><button onclick=\"towerGroup_show();\">更多</button></td></tr>' ;
+            inner+='<tr><td>' + obj[1][i].group + '</td><td>健康</td><td><button class="btn btn-primary m-1" onclick=\"towerGroup_show();\">更多</button></td></tr>' ;
             tower_group_arr.push(obj[1][i].group);
         }
     }
@@ -175,7 +175,7 @@ function towerGroup_show(){
 
 function tower(tower_group){
     //顯示tower
-    var inner= '<p>機組'+tower_group +'</p><br><table><tr><td>設備</td><td>馬達效能</td><td>查看</td></tr>';
+    var inner= '<p>機組'+tower_group +'</p><table style="font-size: 16px;" class="table text-center"><tr><th>設備</th><th>馬達效能</th><th>查看</th></tr>';
     for(var i=0;i<obj[1].length;i++){
         if(obj[1][i].company==document.getElementById('company_text').innerHTML&& obj[1][i].factory==document.getElementById('factory_text').innerHTML&& obj[1][i].department==document.getElementById("department_text").innerHTML&&obj[1][i].group==tower_group){
             inner+='<tr><td>' + obj[1][i].tower + '</td><td>健康</td><td>更多</td></tr>';

static/index.css

@@ -214,9 +214,7 @@ color:#495057;
 }
 
 #map{
-    position: absolute;
-    left: 300px;
-    top: 500px;
+    position:relative;
     width: 450px;
     height: 450px;
 }
@@ -229,16 +227,16 @@ table {
     width: 50%;
   }
 
-  td,
+  /* td,
   th {
     border: 1px solid #dddddd;
     text-align: left;
     padding: 8px;
-  }
+  } */
 
-  tr:nth-child(even) {
+  /* tr:nth-child(even) {
     background-color: #dddddd;
-  }
+  } */
 #tower_temperature{
     padding: 10px 25px;
     
@@ -335,9 +333,17 @@ h1{
 
   .progress-label::after {
     content: ":";
+   
   }
 
   #app {
     width: 400px;
     height: 400px;
+  }
+
+  #system-table{
+    border:none !important;
+  }
+  th{
+    border:none !important;
   }

static/table.js

@@ -3,14 +3,14 @@ function creatTable(){
     //這個函式的引數可以是從後臺傳過來的也可以是從其他任何地方傳過來的
     //這裡我假設這個data是一個長度為5的字串陣列 我要把他放在表格的一行裡面，分成五列
     //alert("eee");
-    var tableData = "<table><thead><tr><th>單位分類</th><th>使用者分類</th><th>帳號</th><th>電子郵件</th><th>權限設定</th><th>備註</th><th>+新增</th></tr></thead><tbody>"
+    var tableData = '<div class="border rounded-3 py-3"><table style="font-size: 18px;" id="system-table" class="table text-center table-borderless"><thead><tr><th>單位分類</th><th>使用者分類</th><th>帳號</th><th>電子郵件</th><th>權限設定</th><th>備註</th><th>+新增</th></tr></thead><tbody></div>'
   
     //動態增加5個td,並且把data陣列的五個值賦給每個td
     // for(var i=0;i < data.length;i++){
     //     tableData += "<td>" + data[i] + "</td>"
     // }
     for(var i = 0; i < data.length; i++) {
-        tableData += "<tr>";
+        tableData += "<tr class='bg-transparent'>";
         str = "";
         str2="";
         if(data[i].roleType==1){
@@ -38,7 +38,7 @@ function creatTable(){
                      "<td>" + str2 + "</td>" +
                      "<td>" + data[i].username + "</td>" +
                      "<td></td>" +           
-                     "<td><button onclick=\"member_auth(\'"+data[i].username+"\');\">設定</button></td>" +
+                     "<td><button class='btn btn-primary m-2' onclick=\"member_auth(\'"+data[i].username+"\');\"><i style='color:#fff;' class='fas fa-cog me-2'></i>設定</button></td>"+
                      "<td></td>" +
                      "<td></td>" ;
         tableData += "</tr>";
@@ -50,16 +50,37 @@ function creatTable(){
     $("#info_table").html(tableData);
 }
 
+// function member_auth(username){
+//     $("#info_table").html("");
+//     inner = "<p>請設定以下權限:</p><br>";
+//     inner += "<table class='table table-borderless' id = \"change\"> <tr> <th>帳號</th><th>管理員</th><th>可用</th></tr>" +
+//              " <tr><td >" + username + "</td><td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isAdmin\" >"+ " </td><td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isEnable\" ></td></tr></table>";
+
+//     inner += "<br><button type='button' class='btn btn-primary me-3' onclick=\"put();\">確認 </button>" + "<button type='button' class='btn btn-primary me-3' onclick=\"start();\">取消 </button>"
+//     $("#member_auth").html(inner);
+//     console.log($("#isAdmin").prop('checked'));
+
+// }
 function member_auth(username){
     $("#info_table").html("");
-    inner = "<p>請設定以下權限:</p><br>";
-    inner += "<table id = \"change\"> <tr> <th>帳號</th><th>管理員</th><th>可用</th></tr>" +
-             " <tr><td >" + username + "</td><td><input type=\"checkbox\" id=\"isAdmin\" >"+ " </td><td><input type=\"checkbox\" id=\"isEnable\" ></td></tr></table>";
-
-    inner += "<br><button onclick=\"put();\">確認 </button>" + "<button onclick=\"start();\">取消 </button>"
+    inner = "<p>請設定以下權限:</p>\
+    <div style='font-size: 16px;' class='border rounded-3 py-3'>\
+    <table class='table table-borderless' id = \"change\"> <tr> <th>帳號</th><th>管理員</th><th>可用</th></tr>\
+    <tr>\
+    <td >" + username + "</td>\
+    <td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isAdmin\" >"+ " </td>\
+    <td><input class='form-check-input ms-3' type='checkbox' type=\"checkbox\" id=\"isEnable\" ></td>\
+    </tr>\
+    </table>\
+    </div>\
+    <div class='mt-4 pb-3'>\
+    <button type='button' class='btn btn-primary me-3' onclick=\"put();\">確認 </button>\
+    <button type='button' class='btn btn-primary me-3' onclick=\"start();\">取消 </button>\
+    </div>\
+    ";
+  
     $("#member_auth").html(inner);
     console.log($("#isAdmin").prop('checked'));
-
 }
 
 function put(){

templates/home.html

@@ -11,30 +11,33 @@
 <p id="factory_text" hidden></p>
 <p id="department_text" hidden></p>
 <p id="towergroup_text" hidden></p>
-
+<div class="card">
     <div id='company'>
-        
+    
     </div>
     <div id='factory'>
         <p id='company_name'></p>
-        
-        <div id="map"></div>
-        <div id='factory_select'>
-
+        <div class="row px-0 mx-0">
+            <div class="col-lg-6">
+                <div id='factory_select'> </div>
+            </div>
+            <div class="col-lg-6">
+                <div id="map"></div>
+            </div>
         </div>
     </div>
     <div id='department'>
-        <select id="department_list" onChange="department_change();" >
+        <select id="department_list" onChange="department_change();">
         </select>
         <div id='department_show'>
-
+    
         </div>
     </div>
     <div id='towergroup'>
-        
-    </div>
-    <script type="text/javascript" src="static/home.js"></script>
     
-      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNaWlcg9y27m2ZpzXQ2EhH1BZW2WAxA6E&callback=initMap"
-      async defer></script>
+    </div>
+</div>
+<script type="text/javascript" src="static/home.js"></script>
+
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNaWlcg9y27m2ZpzXQ2EhH1BZW2WAxA6E&callback=initMap" asyncdefer></script>
 {% endblock %}

templates/optim.html

@@ -53,7 +53,7 @@
       </div>
     </div>
     <script>
-      var hot = '{{x}}'
+    var hot = '{{x}}'
     var cold = '{{y}}'
     var wet = '{{z}}'
     console.log(hot)

templates/system.html

@@ -6,18 +6,20 @@
 
 
 {% block body %}
-    <div id="tmp">
-        <button>使用者</button>
-        <button>聯絡人</button>
-        <button>環境設置</button>
-        <button>LINE群組設定</button>
-
-    </div>
-    <div id="info_table">
-        
-    </div>
-    <div id="member_auth">
-
+    <div class="card">
+        <div id="tmp" class="mb-4">
+            <button type="button" class="btn btn-outline-primary me-3">使用者</button>
+            <button type="button" class="btn btn-outline-primary me-3">聯絡人</button>
+            <button type="button" class="btn btn-outline-primary me-3">環境設置</button>
+            <button type="button" class="btn btn-outline-primary me-3">LINE群組設定</button>
+    
+        </div>
+        <div id="info_table">
+            
+        </div>
+        <div style="width: 40vw;" id="member_auth">
+    
+        </div>
     </div>
     <script type="text/javascript" src="static/table.js"></script>
 {% endblock %}