{% 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 class="me-0" 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 pb-5">
        <h1 style="color:#002e86">監控區</h1>
        <h1 class="my-0 py-0">
            <hr class="mt-1 mb-5" style="background:#002e86; height: 1px; opacity: 1;">
        </h1>
        <div class="text-center">
            <img style="width: 60%;" src="/static/img/1631004814192.jpg" class="img-fluid" alt="...">
        </div>
    </div>
    <div style="padding: 15px;">
        <h1 style="color:#002e86">水塔資訊</h1>
        <div style="padding: 15px;">
            <div id="tower"></div>
        </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 style="color:#002e86">水塔效能趨勢圖</h1>
    <h1 class="my-0 py-0">
        <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
    </h1>
    <div style="padding: 15px;">
        <canvas style="width: 50%;" id="channel_predict"></canvas>
    </div>
</div>

<script>
    function navlinkactive() {
        $('#nav-tower').addClass('active');
    }
    navlinkactive();

  

</script>
{% endblock %}