{% 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="text-white p-3">
        <select id="tower" onChange="show_tower_info();">
        </select>
    </div>
</div>
<div class="state card">
    <div class="row px-0 mx-0">
        <div class="col-lg-6">
            <div class="device">
                <p class="fw-bold mb-0">設備狀態:</p>
                <h1 style="color: #078B07;">健康<i style="color: #078B07;" class="fas fa-check-circle ps-1"></i></h1>
            </div>
            <div class="Connect">
                <p class="fw-bold mb-0">連線狀態:</p>
                <h1 style="color: #078B07;">正常</h1>
            </div>
        </div>
        <div class="col-lg-6">
            <div>
                <p>設備位區:<span class="fw-bold">台塑</span></p>
            </div>
            <div>
                <p>設備位置:<span class="fw-bold">公用四廠</span></p>
            </div>
            <div>
                <p>負責人:<span class="fw-bold">***</span></p>
            </div>

        </div>
        <hr>
        <div>
            <p class="mb-0">最後更新時間:2021/09/15 18:09</p>
        </div>
    </div>
</div>
<div id='test'></div>
<div class="card mt-5">
    <h1>通道列表</h1>
    <table style="font-size: 16px;" class="table text-center">
        <thead>
            <tr>
                <th>編號</th>
                <th>vrms(mm/s)</th>
                <th>健康指標</th>
                <th>健康狀態</th>
                <th>連線運作狀態</th>
            </tr>
            <tbody id="tower_info">

            </tbody>
        </thead>
    </table>
</div>
<div id='tower_perfrom'></div>
{% endblock %}