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

main.py

@@ -26,7 +26,6 @@ from random import randint,uniform
 # authorize
 from passlib.context import CryptContext
 pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
-
 import jwt
 from fastapi_jwt_auth import AuthJWT
 from fastapi_jwt_auth.exceptions import AuthJWTException
@@ -272,6 +271,15 @@ async def vibration(request: Request, Authorize: AuthJWT = Depends()):
         return RedirectResponse('/login')
     return templates.TemplateResponse(name='vibration_test.html', context={'request': request})
 
+@app.get('/channel', response_class=HTMLResponse)
+async def vibration(request: Request, Authorize: AuthJWT = Depends()):
+    try:
+        Authorize.jwt_required()
+    except Exception as e:
+        print(e)
+        return RedirectResponse('/login')
+    return templates.TemplateResponse(name='channel.html', context={'request': request})
+
 @app.get('/channel/{tower_id}/{channel_id}', response_class=HTMLResponse)
 async def vibration(request: Request,tower_id:str,channel_id:str,Authorize: AuthJWT = Depends()):
     try:
@@ -308,6 +316,18 @@ async def vibration(request: Request,tower_id:str,channel_id:str,Authorize: Auth
     result = get_predect_data(find_vibration_id(tower_id,channel_id))
     return json.dumps(result,ensure_ascii=False, cls = dateEncode)
 
+@app.get('/channel_frequency/{tower_id}/{channel_id}', response_class=HTMLResponse)
+async def vibration(request: Request,tower_id:str,channel_id:str,Authorize: AuthJWT = Depends()):
+    try:
+        Authorize.jwt_required()
+    except Exception as e:
+        print(e)
+        return RedirectResponse('/login')
+    
+    #print(find_vibration_id(tower_id,channel_id))
+    result = get_frequency(find_vibration_id(tower_id,channel_id))
+    return json.dumps(result,ensure_ascii=False, cls = dateEncode)
+
 
 @app.get('/history', response_class=HTMLResponse)
 async def history(request: Request, Authorize: AuthJWT = Depends()):
@@ -967,14 +987,14 @@ def find_vibration_id(tower_id:str,channel_id:str):
 def get_channel_info(vibration_id):
     db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/Water_tower?charset=utf8mb4')
     cmd = 'SELECT * FROM  `record_diagnosis` where vibration_id = "'+vibration_id+'"'
-    result = {'CVIndex':'','threshold':''}
+    result = {}
     for row in db.query(cmd) :
         for col in db['record_diagnosis'].columns :
                 result[col] = row[col]
         cmd2='SELECT CVIndex,threshold FROM  `vibration` where id = "'+vibration_id+'"'
         for row2 in db.query(cmd2) :
-            result['CVIndex'] = row['CVIndex']
-            result['threshold'] = row['threshold']
+            result['CVIndex'] = row2['CVIndex']
+            result['threshold'] = row2['threshold']
     print(result)
     return result
 
@@ -1000,6 +1020,16 @@ def get_predect_data(vibration_id:str):
 
     return result
 
+def get_frequency(vibration_id:str):
+    db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/Water_tower?charset=utf8mb4')
+    result = {'Hz':[],'value':[]}
+    print(vibration_id)
+    cmd = 'SELECT * FROM record_frequency where vibration_id = "'+vibration_id+'"'
+    for row in db.query(cmd) :
+        result['Hz'].append(row['MFHz'])
+        result['value'].append(row['MFValue'])
+    return result
+
 
 def add_data():
     db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/Water_tower?charset=utf8mb4')
@@ -1011,4 +1041,10 @@ def add_data():
         for i in range(0,7):
             time_del = timedelta(days=i)
             date=loc_dt-time_del
-            db['record_health'].insert(dict(time_stamp=date, CV_index=uniform(0.6, 0.8), Vrms=uniform(1,3),Grms = uniform(1,3),RPM=uniform(1,3),vibration_id = j))
+            db['record_health'].insert(dict(time_stamp=date, CV_index=uniform(0.6, 0.8), Vrms=uniform(1,3),Grms = uniform(1,3),RPM=uniform(1,3),vibration_id = j))
+
+    cmd = "TRUNCATE TABLE record_frequency"
+    db.query(cmd)
+    for i in range(0,5000):
+        print(i)
+        db['record_frequency'].insert(dict(time_stamp=loc_dt_format, MFHz=i, MFValue=uniform(0,0.12),vibration_id = 1))

static/channel.js

@@ -1,12 +1,150 @@
+obj="";
+obj2 = "";
+get_org();
+function get_org(){
+    var xhr = new XMLHttpRequest();
+    var url = "/org";
+   
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj = JSON.parse(xhr.responseText);
+        //insertHTML();
+        start();
+        onChangeColumn1();
+        onChangeColumn2();
+        onChangeColumn3();
+
+    click_button();
+
+};
+xhr.send();
+}
+
+function insertHTML2(data){
+    
+    //aria.innerHTML=data[0].tower_name;
+    var inner='';
+    for(var i=0;i<data.length;i++){
+        inner+='<option value="'+data[i].tower_name+'">'+data[i].tower_name+'</option>';
+    }
+    document.getElementById("tower").innerHTML=inner;
+}
+
+function click_button() {
+    //alert("click");
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    if(companySelect.value!=0 && factorySelect.value!=0 && departmentSelect.value!=0 && towerGroupSelect.value!=0){
+        var url2 = "tower/?company="+ companySelect.value + "&factory=" +  factorySelect.value + "&department=" +departmentSelect.value + "&towerGroup=" +towerGroupSelect.value ;
+        var xhr2 = new XMLHttpRequest();
+        xhr2.open("GET",url2);
+        xhr2.onload = function(){
+            obj2 = JSON.parse(xhr2.responseText);
+            insertHTML2(obj2);
+            console.log(obj2);
+            
+        };
+        xhr2.send();
+    }
+    
+  }
+
+  function start(){
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    var inner='';
+    var company_arr = new Array();
+    
+    for(var i=0;i<obj.length;i++){
+        if(company_arr.indexOf(obj[i].company)==-1 && obj[i].able==1){
+            inner=inner+'<option value="'+obj[i].company+'">公司'+obj[i].company+'</option>';
+            company_arr.push(obj[i].company);
+        }
+    }
+    
+    //innerHTML 賦值inner給這element屬性
+    companySelect.innerHTML=inner;
+}
+//製造一個字串，以html的語法填入院的陣列
+
+
+
+function onChangeColumn1() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    factorySelect.innerHTML='';
+    let factory_arr = new Array();
+    let factory_inner = '';
+    for(var i=0;i<obj.length;i++){
+        
+        if( companySelect.value == obj[i].company){
+            if(factory_arr.indexOf(obj[i].factory)==-1 && obj[i].able==1){
+                factory_inner=factory_inner+'<option value="'+obj[i].factory+'">廠區'+obj[i].factory+'</option>';
+                factory_arr.push(obj[i].factory);
+            }
+        }
+        //alert(companySelect.value);
+    }
+    
+    factorySelect.innerHTML=factory_inner;
+}
+
+function onChangeColumn2() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    departmentSelect.innerHTML='';
+    let department_arr = new Array();
+    let department_inner = '';
+    for(var i=0;i<obj.length;i++){
+        if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory){
+            if(department_arr.indexOf(obj[i].department)==-1 && obj[i].able==1){
+                department_inner=department_inner+'<option value="'+obj[i].department+'">課'+obj[i].department+'</option>';
+                department_arr.push(obj[i].department);
+            }
+        }
+        
+    }
+    document.getElementById("department-list").innerHTML=department_inner;
+}
+
+function onChangeColumn3() {
+    companySelect=document.getElementById("company-list");
+    factorySelect=document.getElementById("factory-list");
+    departmentSelect=document.getElementById("department-list");
+    towerGroupSelect=document.getElementById("towerGroup-list");
+    towerGroupSelect.innerHTML='';
+    let towerGroup_inner = '';
+    for(var i=0;i<obj.length;i++){
+        if( companySelect.value == obj[i].company && factorySelect.value == obj[i].factory && departmentSelect.value == obj[i].department){
+            if( obj[i].able==1){
+                for(var ii=0;ii<obj[i].group.length;ii++){
+                    towerGroup_inner=towerGroup_inner+'<option value="'+obj[i].group[ii]+'">機組'+obj[i].group[ii]+'</option>';
+                }
+            }
+        }
+        
+    }
+    document.getElementById("towerGroup-list").innerHTML= towerGroup_inner;
+}
+
 function get_data(){
     var xhr = new XMLHttpRequest();
     var url = "channel/dev001/ch01";
-    obj="";
+    obj3="";
 
     xhr.open("GET",url);
     xhr.onload = function(){
-        obj = JSON.parse(xhr.responseText);
-        insertHTML(obj);
+        obj3 = JSON.parse(xhr.responseText);
+        insertHTML(obj3);
+        console.log(obj3);
 };
 xhr.send();
 }
@@ -15,11 +153,11 @@ function insertHTML(data){
     console.log(data);
     //aria.innerHTML=data[0].tower_name;
     var inner='<table> <tr> <th>主軸分析 </th><th>軸承分析 </th><th>馬達分析 </th><th>齒輪分析 </th> </tr> <tr>';
-    inner+='<td> 不平衡 '+data.DW_Unbalance+'</td><td>油膜旋震 '+data.DW_Whirl+'</td><td>氣隙不均 '+data.DW_AirGap+'</td><td>齒輪不對中 '+data.DW_GMisalignment+'</td></tr><tr>';
-    inner+='<td> 軸彎曲 '+data.DW_Unbalance+'</td><td>油膜晃蕩 '+data.DW_Whirl+'</td><td>轉子條斷裂 '+data.DW_AirGap+'</td><td>齒輪斷齒 '+data.DW_GMisalignment+'</td></tr><tr>';
-    inner+='<td> 不對中 '+data.DW_Unbalance+'</td><td>內還損傷 '+data.DW_Whirl+'</td><td>相位問題 '+data.DW_AirGap+'</td><td>齒輪磨損 '+data.DW_GMisalignment+'</td></tr><tr>';
-    inner+='<td> 鬆動 '+data.DW_Unbalance+'</td><td>外環損傷 '+data.DW_Whirl+'</td><td></td><td>齒輪彎曲 '+data.DW_GMisalignment+'</td></tr><tr>';
-    inner+='<td> </td><td>滾珠損傷 '+data.DW_Whirl+'</td><td></td><td>齒輪偏心 '+data.DW_GMisalignment+'</td></tr><tr>';
+    inner+='<td>正常 不平衡 '+data.DW_Unbalance+'</td><td>正常 油膜旋震 '+data.DW_Whirl+'</td><td>正常 氣隙不均 '+data.DW_AirGap+'</td><td>正常 齒輪不對中 '+data.DW_GMisalignment+'</td></tr><tr>';
+    inner+='<td>正常 軸彎曲 '+data.DW_Unbalance+'</td><td>正常 油膜晃蕩 '+data.DW_Whirl+'</td><td>正常 轉子條斷裂 '+data.DW_AirGap+'</td><td>正常 齒輪斷齒 '+data.DW_GMisalignment+'</td></tr><tr>';
+    inner+='<td>正常 不對中 '+data.DW_Unbalance+'</td><td>正常 內還損傷 '+data.DW_Whirl+'</td><td>正常 相位問題 '+data.DW_AirGap+'</td><td>正常 齒輪磨損 '+data.DW_GMisalignment+'</td></tr><tr>';
+    inner+='<td>正常 鬆動 '+data.DW_Unbalance+'</td><td>正常 外環損傷 '+data.DW_Whirl+'</td><td></td><td>正常 齒輪彎曲 '+data.DW_GMisalignment+'</td></tr><tr>';
+    inner+='<td> </td><td>正常 滾珠損傷 '+data.DW_Whirl+'</td><td></td><td>正常 齒輪偏心 '+data.DW_GMisalignment+'</td></tr><tr>';
     
     document.getElementById("channel").innerHTML=inner;
 }
@@ -35,8 +173,124 @@ function get_chart_data(){
     xhr.open("GET",url);
     xhr.onload = function(){
         obj = JSON.parse(xhr.responseText);
-        document.getElementById("chart_info").innerHTML=obj;
-        console.log(obj[0]);
+        for(var i=0;i<obj.length;i++){
+            var Data = {
+                labels: ["9/18", "9/19", "9/20", "9/21", "9/22", "9/23", "9/24"], //顯示區間名稱
+                datasets: [{
+                    label: obj[i].name, // tootip 出現的名稱
+                    lineTension: 0, // 曲線的彎度，設0 表示直線
+                    backgroundColor: "#ea464d",
+                    borderColor: "#ea464d",
+                    borderWidth: 5,
+                    data:obj[i].data, // 資料
+                    fill: false, // 是否填滿色彩
+                },]
+            };
+            var ctx = document.getElementById(obj[i].name).getContext("2d");
+            drawLineCanvas(ctx,Data);
+
+        }
 };
 xhr.send();
+}
+
+
+
+
+// var lineChartData = {
+//     labels: ["9/18", "9/19", "9/20", "9/21", "9/22", "9/23", "9/24"], //顯示區間名稱
+//     datasets: [{
+//         label: '未曾使用', // tootip 出現的名稱
+//         lineTension: 0, // 曲線的彎度，設0 表示直線
+//         backgroundColor: "#ea464d",
+//         borderColor: "#ea464d",
+//         borderWidth: 5,
+//         data: [10, 12, 15, 18, 22, 33, 50, 60, 130], // 資料
+//         fill: false, // 是否填滿色彩
+//     },]
+// };
+
+function drawLineCanvas(ctx,data) {
+    window.myLine = new Chart(ctx, {  //先建立一個 chart
+        type: 'line', // 型態
+        data: data,
+        options: {
+                responsive: true,
+                legend: { //是否要顯示圖示
+                    display: true,
+                },
+                tooltips: { //是否要顯示 tooltip
+                    enabled: true
+                },
+                scales: {  //是否要顯示 x、y 軸
+                    xAxes: [{
+                        display: true
+                    }],
+                    yAxes: [{
+                        display: true
+                    }]
+                },
+            }
+    });
+};
+
+// window.onload = function () {
+//     var ctx = document.getElementById("canvas").getContext("2d");
+//     drawLineCanvas(ctx,lineChartData);
+// };
+get_predict();
+function get_predict(){
+    var xhr = new XMLHttpRequest();
+    var url = "channel_predict/dev001/ch01";
+    obj3="";
+
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj3 = JSON.parse(xhr.responseText);
+        labels = new Array();
+        for(var i=0;i<obj3.data.length;i++){
+            labels.push(i);
+        }
+        var Data = {
+            labels: labels, //顯示區間名稱
+            datasets: [{
+                label: "predict", // tootip 出現的名稱
+                lineTension: 0, // 曲線的彎度，設0 表示直線
+                backgroundColor: "#ea464d",
+                borderColor: "#ea464d",
+                borderWidth: 5,
+                data:obj3.data, // 資料
+                fill: false, // 是否填滿色彩
+            },]
+        };
+        var ctx = document.getElementById("channel_predict").getContext("2d");
+        drawLineCanvas(ctx,Data);
+    };
+    xhr.send();
+}
+get_frequency();
+function get_frequency(){
+    var xhr = new XMLHttpRequest();
+    var url = "channel_frequency/dev001/ch01";
+    obj4="";
+
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj4 = JSON.parse(xhr.responseText);
+        var Data = {
+            labels: obj4.Hz, //顯示區間名稱
+            datasets: [{
+                label: "frequency", // tootip 出現的名稱
+                lineTension: 0, // 曲線的彎度，設0 表示直線
+                backgroundColor: "#ea464d",
+                borderColor: "#ea464d",
+                borderWidth: 5,
+                data:obj4.value, // 資料
+                fill: false, // 是否填滿色彩
+            },]
+        };
+        var ctx = document.getElementById("channel_frequency").getContext("2d");
+        drawLineCanvas(ctx,Data);
+    };
+    xhr.send();
 }

static/tower.js

@@ -347,4 +347,59 @@ function tower_perform_show(obj_tmp){
 
     document.getElementById('tower_perfrom').innerHTML=inner;
 
-}
+}
+
+get_predict();
+function get_predict(){
+    var xhr = new XMLHttpRequest();
+    var url = "channel_predict/dev001/ch01";
+    obj3="";
+
+    xhr.open("GET",url);
+    xhr.onload = function(){
+        obj3 = JSON.parse(xhr.responseText);
+        labels = new Array();
+        for(var i=0;i<obj3.data.length;i++){
+            labels.push(i);
+        }
+        console.log(obj3)
+        var Data = {
+            labels: labels, //顯示區間名稱
+            datasets: [{
+                label: "predict", // tootip 出現的名稱
+                lineTension: 0, // 曲線的彎度，設0 表示直線
+                backgroundColor: "#ea464d",
+                borderColor: "#ea464d",
+                borderWidth: 5,
+                data:obj3.data, // 資料
+                fill: false, // 是否填滿色彩
+            },]
+        };
+        var ctx = document.getElementById("channel_predict").getContext("2d");
+        drawLineCanvas(ctx,Data);
+    };
+    xhr.send();
+}
+function drawLineCanvas(ctx,data) {
+    window.myLine = new Chart(ctx, {  //先建立一個 chart
+        type: 'line', // 型態
+        data: data,
+        options: {
+                responsive: true,
+                legend: { //是否要顯示圖示
+                    display: true,
+                },
+                tooltips: { //是否要顯示 tooltip
+                    enabled: true
+                },
+                scales: {  //是否要顯示 x、y 軸
+                    xAxes: [{
+                        display: true
+                    }],
+                    yAxes: [{
+                        display: true
+                    }]
+                },
+            }
+    });
+};

static/vibration.js

@@ -57,7 +57,8 @@ function show_tower_info(){
     for(var i=0;i<obj2.length;i++){
         if(obj2[i].tower_name === tower){
             for(var ii=0;ii<obj2[i].tower_data.Moter.length;ii++){
-                inner += '<p >'+ obj2[i].tower_data.Moter[ii].DataValue + ',' + obj2[i].tower_data.Moter[ii].CVIndex+'</p>';
+                inner += '<p >編號' + obj2[i].tower_data.Moter[ii].channelName + '  Vrms:'+ obj2[i].tower_data.Moter[ii].DataValue + ',健康指標:健康 健康狀態' + obj2[i].tower_data.Moter[ii].CVIndex+'</p>';
+                inner += '<a href="/channel" target="_blank" title="通道資訊">通道資訊</a><br>';
             }
         }
     }

templates/channel.html

@@ -8,8 +8,35 @@
 {% block body %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
 <script type="text/javascript" src="/static/channel.js"></script>
-
+<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" onChange="show_tower_info();">
+        </select>
+    </div>
+</div>
 <div id='channel'></div>
+<div id='channel_health'><p>健康指數:86 預測健康指標:89</p></div>
 <div id='chart_info'></div>
+<p>預測資訊 預測結果 正常 未來1125筆後CV值 0.801</p>
+<canvas id="channel_predict" width="40" height="40"></canvas>
+<canvas id="channel_frequency" width="40" height="40"></canvas>
+<canvas id="CV_index" width="40" height="40"></canvas>
+<canvas id="RPM" width="40" height="40"></canvas>
+<canvas id="Vrms" width="40" height="40"></canvas>
 <div id='tower_perfrom'></div>
 {% endblock %}

templates/tower.html

@@ -26,6 +26,7 @@
     // }
 </script>
 <script type="text/javascript" src="/static/tower.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
 <div id='select_boxes'>
     <select class="select-item" id="company-list" onChange="onChangeColumn1();">
         <option value=0>公司A</option>
@@ -52,4 +53,5 @@
 <div id='test'></div>
 <div id='tower_info'></div>
 <div id='tower_perfrom'></div>
+<canvas id="channel_predict" width="40" height="40"></canvas>
 {% endblock %}

templates/vibration_test.html

@@ -0,0 +1,38 @@
+{% extends "index.html" %}
+{% block title %}水塔監控{% endblock %}
+{% block head %}
+{{ super() }}
+{% endblock %}
+
+
+{% block body %}
+
+<script type="text/javascript" src="/static/vibration.js"></script>
+<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" onChange="show_tower_info();">
+        </select>
+    </div>
+</div>
+<p>設備狀態:正常 連線狀態:正常</p><br>
+<p>設備位區:台塑 設備位置:公用四廠</p><br>
+<p>負責人:*** 最後更新時間:2021/09/15 18:09:</p><br>
+<div id='test'></div>
+<div id='tower_info'></div>
+<div id='tower_perfrom'></div>
+{% endblock %}