{% extends "index.html" %}
{% block title %}水塔監控{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}


{% block body %}
<script type="text/javascript">

    // var xhr = new XMLHttpRequest();
    // var url = "tower/org";
    // var obj="";
    // xhr.open("GET",url);
    // xhr.onload = function(){
    //     obj = JSON.parse(xhr.responseText);
    //     insertHTML();
    // };
    // xhr.send();

    // function insertHTML(){

    //     var aria = document.getElementById('test');
    //     aria.innerHTML=xhr.responseText;

    // }
</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>
    </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">
        
        <img src="/static/img/1631004814192.jpg" class="img-fluid" alt="...">
        <div id="tower">
        </div>
    </div>
</div>
<div id='test'></div>
<div id='tower_info'></div>
<div class="mt-3" id='tower_perfrom'></div>
<div class="card mt-5">
    <h1 class="ms-3"><i style="color:#0174c7;" class="fas fa-chart-line me-2"></i>水塔效能趨勢圖</h1>
    <canvas style="width: 75%;" id="channel_predict"></canvas>
</div>
{% endblock %}