浏览代码

上傳檔案到 ''

miacheng913 3 年之前
父节点
当前提交
a6192e9733
共有 1 个文件被更改,包括 273 次插入0 次删除
  1. 273 0
      home.js

+ 273 - 0
home.js

@@ -0,0 +1,273 @@
+start();
+user_role = '';
+data = '';
+obj = '';
+check = 0;
+// 之後透過 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();
+    check = 0;
+    for(var i=0;i<obj[1].length;i++){
+        if(company_arr.indexOf(obj[1][i].company)==-1){
+            inner+="<button class='btn text-white m-1' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
+            inner += ">公司"+obj[1][i].company+"</button>";
+            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 class="fw-bold">廠區資訊:</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 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 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 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="<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="";
+    
+// }
+function factory_show(company){
+    var inner='<p class="fw-bold">廠區資訊</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 type='button' class='btn text-white m-1' id='factory " +obj[1][i].factory+ "' onclick=\"change_map(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
+            inner += ">廠區"+obj[1][i].factory+"</button><button onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"> 查看</button>";
+            factory_arr.push(obj[1][i].factory);
+        }
+    }
+    //測試用
+    inner+="<button type='button' class='btn btn btn-outline-success m-1' id='factory B' onclick=\"change_map(\'"+obj[1][0].company+"\',\'B\');\"";
+    inner += ">廠區B</button> <button onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\">查看 </button>";
+    inner+="<button type='button' class='btn btn btn-outline-success m-1' id='factory C' onclick=\"change_map(\'"+obj[1][0].company+"\',\'C\');\"";
+    inner += ">廠區C</button><button onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"> 查看</button>";
+    document.getElementById('company').innerHTML="";
+    clear();
+    document.getElementById('company_text').innerHTML=company;
+    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="";
+    
+}
+
+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 selected 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");
+    clear();
+    document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"factory_show('"+company+"');\">返回</button> 目前位置: 公司 " + company+ " 廠區"+ factory + "";
+    document.getElementById("department_list").style.display="";
+    department_change();
+}
+
+function change_map(company,factory){
+    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);
+    }
+}
+
+
+function department_change(){
+    console.log("change");
+    check = 0 ;
+    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 class="btn btn-primary m-1" onclick=\"towerGroup_show();\">查看</button></td></tr>' ;
+            tower_group_arr.push(obj[1][i].group);
+            console.log(inner);
+        }
+    }
+    inner += '</table>';
+    document.getElementById('department_text').innerHTML=document.getElementById("department_list").value;
+    document.getElementById('department_show').innerHTML=inner;
+    
+}
+
+function towerGroup_show(){
+    check = 1;
+    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);
+        }
+    }
+    clear();
+    company = document.getElementById('company_text').innerHTML
+    factory= document.getElementById('factory_text').innerHTML
+    document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"department_show('"+company+"','" + factory+"');\">返回</button>目前位置: 公司 " + company+ " 廠區 " + factory+ " 課"+ document.getElementById("department_list").value + "";
+    document.getElementById('towergroup').innerHTML=inner;
+}
+
+function tower(tower_group){
+    //顯示tower
+    var inner= '<p class="fw-bold">機組'+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><button class="btn btn-primary m-1">查看</button></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";//隱藏
+}