Merge branch 'master' of http://git.choozmo.com:3000/aaron-1015/mechanical into master

main.py

@@ -183,20 +183,27 @@ async def tower(request: Request,company:str,factory:str,department:str,towerGro
 @app.get('/optim', response_class=HTMLResponse)
 async def optim(request: Request, Authorize: AuthJWT = Depends()):
     db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/Water_tower?charset=utf8mb4')
-    table=db['record_tower']
-    temp = table.find_one(key = 'hotTemp')
+    statement = 'SELECT  value FROM record_tower WHERE record_tower.key = "hotTemp"'
+    x = 0
+    y = 0
+    z = 0
+    for temp in db.query(statement):
+        print(temp['value'])
+        x=temp['value']
     statement2 = 'SELECT  value FROM record_tower WHERE record_tower.key = "coldTempData2"'
     for temp2 in db.query(statement2):
         print(temp2['value'])
+        y=temp2['value']
     statement3 = 'SELECT  value FROM record_tower WHERE record_tower.key = "wetTemp"'
     for temp3 in db.query(statement3):
         print(temp3['value'])
+        z=temp3['value']
     try:
         Authorize.jwt_required()
     except Exception as e:
         print(e)
         return RedirectResponse('/login')
-    return templates.TemplateResponse(name='optim.html',context={'request': request,"temp":temp,"temp2":temp2,"temp3":temp3})
+    return templates.TemplateResponse(name='optim.html',context={'request': request,"x":x,"y":y,"z":z})
 
 
 @app.get('/vibration', response_class=HTMLResponse)

static/home.js

@@ -0,0 +1,236 @@
+start();
+user_role = '';
+data = '';
+obj = '';
+// 之後透過 fetch 取得fastapi後端資料!
+function start(){
+    var xhr = new XMLHttpRequest();
+    var url = "home/show";
+    obj = "";
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj = JSON.parse(xhr.responseText);
+        data = obj ;
+        console.log(data);
+        document.getElementById('company_text').innerHTML=data[1][0].company;
+        document.getElementById('factory_text').innerHTML=data[1][0].factory;
+        document.getElementById('department_text').innerHTML=data[1][0].department;
+        if(data[0].user_role==1){
+            company_show();
+        }
+        else if(data[0].user_role==2){
+            factory_show(data[1][0].company);
+        }
+        else if(data[0].user_role==3){
+            department_show(data[1][0].company,data[1][0].department);
+            department_change();
+        }
+        else{
+            towerGroup_show();  
+        }
+            //insertHTML();
+    };
+    xhr.send();
+    
+    console.log('Start');
+}
+
+function get_user_role(){
+    user_role = data[0].user_role
+}
+
+function clear(){
+    document.getElementById('company').innerHTML='';
+    document.getElementById('towergroup').innerHTML='';
+    document.getElementById('company_name').innerHTML='';
+    document.getElementById('factory_select').innerHTML='';
+    document.getElementById("map").style.display="none";
+    document.getElementById('department_show').innerHTML="";
+    document.getElementById("department_list").style.display="none";
+}
+
+function company_show(){
+    //顯示company按鈕
+    var inner='';
+    var company_arr = new Array();
+    
+    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 += ">公司"+obj[1][i].company+"</button><br>";
+            company_arr.push(obj[1][i].company);
+            console.log(obj[1][i].company);
+        }
+    }
+    clear();
+    document.getElementById('company').innerHTML=inner;
+    company_health(company_arr);
+}
+
+function company_health(company_arr){
+    //使公司按鈕變色
+    for(var i=0;i<company_arr.length;i++){
+        //初始化(健康)
+        document.getElementById('company ' + company_arr[i]).style.background="green";
+    }
+    for(var i=0;i<obj[1].length;i++){
+        if(obj[1][i].health!=1 && obj[1][i].company==document.getElementById('company_text').innerHTML){
+            //有不健康的就改色
+            document.getElementById('company ' + obj[1][i].company).style.background="red";
+        }
+    }
+}
+
+function factory_show(company){
+    var inner='<p>廠區資訊</p><br>';
+    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 += ">廠區"+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 += ">廠區B</button><br>";
+    inner+="<button 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('factory_select').innerHTML=inner;
+    factory_health(factory_arr);
+    document.getElementById("map").style.display="";
+    
+}
+
+function factory_health(factory_arr){
+    //使工廠按鈕變色
+    for(var i=0;i<factory_arr.length;i++){
+        //初始化(健康)
+        document.getElementById('factory ' + factory_arr[i]).style.background="green";
+    }
+    for(var i=0;i<obj[1].length;i++){
+        if(obj[1][i].health!=1){
+            //有不健康的改色
+            document.getElementById('factory ' + obj[1][i].factory).style.background="red";
+        }
+    }
+}
+
+function department_show(company,factory){
+    var inner='';
+    var department_arr = new Array();
+    for(var i=0;i<obj[1].length;i++){
+        if(department_arr.indexOf(obj[1][i].department)==-1 && obj[1][i].company==company&& obj[1][i].factory==factory){
+            inner+='<option value="'+obj[1][i].department+'">課'+obj[1][i].department+'</option>';
+            department_arr.push(obj[1][i].department);
+        }
+    }
+    document.getElementById('company_text').innerHTML=company;
+    document.getElementById('factory_text').innerHTML=factory;
+    document.getElementById('department_list').innerHTML=inner;
+    console.log("click");
+    if(factory==='A'){
+        newLocation(25.0339031,121.5623212);
+    }
+    else if(factory==='B'){
+        newLocation(24.42,121.42);
+    }
+    else if(factory==='C'){
+        newLocation(24.12,121.42);
+    }
+    document.getElementById("department_list").style.display="";
+    department_change();
+}
+
+function department_change(){
+    console.log("change");
+    var inner='<table><tr><td>機組</td><td>健康狀態</td><td>查看</td></tr>';
+    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>' ;
+            tower_group_arr.push(obj[1][i].group);
+        }
+    }
+    inner += '</table>'
+    document.getElementById('department_text').innerHTML=document.getElementById("department_list").value;
+    document.getElementById('department_show').innerHTML=inner;
+    
+}
+
+function towerGroup_show(){
+    var inner= '';
+    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_text").innerHTML){
+            inner += tower(obj[1][i].group);
+            tower_group_arr.push(obj[1][i].group);
+        }
+    }
+    
+    document.getElementById('towergroup').innerHTML=inner;
+}
+
+function tower(tower_group){
+    //顯示tower
+    var inner= '<p>機組'+tower_group +'</p><br><table><tr><td>設備</td><td>馬達效能</td><td>查看</td></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>';
+        }
+    }
+
+    inner += '</table>'
+    return inner;
+}
+
+function newLocation(newLat,newLng)
+{
+	map.setCenter({
+		lat : newLat,
+		lng : newLng
+	});
+    addmarker(newLat,newLng);
+}
+
+var map;
+function initMap() {
+    var position = {
+        lat: 25.0339031,
+        lng: 121.5623212
+    };
+    map = new google.maps.Map(document.getElementById('map'), {
+        center: position,
+        zoom: 14
+    });
+    var marker = new google.maps.Marker({
+    position: position,
+    map: map
+  });
+}
+
+function addmarker(lat,lng){
+    var myLatlng = new google.maps.LatLng(lat,lng);
+    var marker = new google.maps.Marker({
+        position: myLatlng,
+    });
+    console.log("yes");
+    // To add the marker to the map, call setMap();
+    marker.setMap(map);
+}
+
+function clearMarkers(lat,lng) {
+    var myLatlng = new google.maps.LatLng(lat,lng);
+    marker = google.maps.Marker({
+        position: myLatlng,
+        title:"Hello World!"
+    });
+    markers.setMap(null);
+     
+}
+
+function hide(){
+    document.getElementById("map").style.display="none";//隱藏
+}

static/index.css

@@ -209,4 +209,12 @@ font-weight: 900;
 }
 .data-title{
 color:#495057;
-}
+}
+
+#map{
+    position: absolute;
+    left: 300px;
+    top: 500px;
+    width: 450px;
+    height: 450px;
+}

templates/home.html

@@ -6,21 +6,35 @@
 
 
 {% block body %}
-    <div id='select_boxes'>
-        <select>
-            <option value="公司">選擇公司</option>
-            <option value="公司1">公司1</option>
-            <option value="公司2">公司2</option>
-        </select>
-        <select>
-            <option value="廠區">選擇廠區</option>
-            <option value="廠區1">廠區1</option>
-            <option value="廠區2">廠區2</option>
-        </select>
-        <select>
-            <option value="課">選擇課</option>
-            <option value="課1">課1</option>
-            <option value="課2">課2</option>
+
+<p id="company_text" hidden></p>
+<p id="factory_text" hidden></p>
+<p id="department_text" hidden></p>
+<p id="towergroup_text" hidden></p>
+
+    <div id='company'>
+        
+    </div>
+    <div id='factory'>
+        <p id='company_name'></p>
+        
+        <div id="map"></div>
+        <div id='factory_select'>
+
+        </div>
+    </div>
+    <div id='department'>
+        <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>
 {% endblock %}

templates/index.html

@@ -14,7 +14,6 @@
       <script type="text/javascript" charset="utf-8" src="/static/echarts.js "></script>
       <script type="text/javascript" src="/static/time.js"></script>
       <!-- <script type="text/javascript" charset="utf-8" src="static/echarts-liquidfill.js"></script> -->
-      
       <title set-lan="html:title">機械所水塔監控網站 - {% block title %}{% endblock %}</title>
   </head>
 

templates/optim.html

@@ -6,24 +6,30 @@
 
 
 {% block body %}
-<div id="select_histories">
-        <div id="select_histories_1">
-            <select>
-                <option></option>
-            </select>
-         
-            <button id="search">搜尋</button>
-        </div>
-        
-    </div>
+<script type="text/javascript" src="/static/tower3.js"></script>
+<div id='select_boxes'>
+    <select class="select-item" id="company-list" onChange="onChangeColumn1();">
+        <option value=0>公司</option>
+    </select>
+    <select class="select-item" id="factory-list" onChange="onChangeColumn2();">
+        <option value=0>工廠</option>
+    </select>
+    <select class="select-item" id="department-list" onChange="onChangeColumn3();">
+        <option value=0>廠區</option>
+    </select>
+    <select class="select-item" id="towerGroup-list">
+        <option value=0>機組</option>
+    </select>
+    <button id="tower_btn" onclick="click_button();"><i class="fas fa-search me-2"></i>搜尋</button>
+</div>
      <div id="tower_temperature">
         <div id="tower_temperature">
-        <div scr="hot_water" style="width: 300px;height:300px;color: #26b72b;float:left">熱水溫度</div>
-          <font size="1">Hot temp: {{ temp }}</font><br>
-        <div id="cold_water" style="width: 300px;height:300px;color: #8600FF;float:left">冷水溫度</div>
-          <font size="1">Cold temp: {{ temp2 }}</font><br>
-        <div id="wet_water" style="width: 300px;height:300px;color: #737300;float:left">濕球溫度</div>
-          <font size="1">Wet temp: {{ temp3 }}</font><br>
+        <div scr="hot_water" style="width: 100px;height:100px;color: #26b72b;float:left">熱水溫度</div>
+          <font size="1">{{ x }}</font><br>
+        <div id="cold_water" style="width: 100px;height:100px;color: #8600FF;float:left">冷水溫度</div>
+          <font size="1">{{ y }}</font><br>
+        <div id="wet_water" style="width: 100px;height:100px;color: #737300;float:left">濕球溫度</div>
+          <font size="1">{{ z }}</font><br>
     </div>
     <style>
 table {
@@ -50,11 +56,11 @@ tr:nth-child(even) {
   </tr>
   <tr>
     <td>水流量</td>
-    <td>M*3/H</td>
+    <td>{{ x }}  M*3/H</td>
   </tr>
   <tr>
     <td>風扇數</td>
-    <td>台</td>
+    <td>{{ x }}  台</td>
   </tr>
 </table>
 
@@ -65,27 +71,27 @@ tr:nth-child(even) {
   </tr>
   <tr>
     <th>目前溫度</th>
-    <th>度C</th>
+    <th>{{ x }}  度C</th>
   </tr>
   <tr>
     <td>流量建議調整為</td>
-    <td>M*3/H</td>
+    <td>{{ x }}  M*3/H</td>
   </tr>
   <tr>
     <td>可節省水費</td>
-    <td>元/天</td>
+    <td>{{ x }}  元/天</td>
   </tr>
   <tr>
     <td>風扇建議調整為</td>
-    <td>台</td>
+    <td>{{ x }}  台</td>
   </tr>
    <tr>
     <td>可節省電費</td>
-    <td>元/天</td>
+    <td>{{ x }}  元/天</td>
   </tr>
    <tr>
     <td>總節省費用</td>
-    <td>元/天</td>
+    <td>{{ x }}  元/天</td>
   </tr>
 </table>