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


{% block body %}

<script type="text/javascript" src="/static/vibration.js"></script>
<div style="overflow: hidden;">
    <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="select_boxes">
        <div id="tower-img">
            <select class="select-item" id="tower" onChange="show_tower_info();">
            </select>
        </div>
    </div>
    <div class="state">
        <div class="row">
            <div class="col-lg-8 pe-0">
                <div class="card h-100">
                    <div>
                        <div style="float:left;" class="device">
                            <h1 style="color:#002e86;" class="fw-bold mb-0">設備狀態:<span style="color: #078B07;">健康<i
                                        class="fas fa-check-circle ps-1"></i></span></h1>
                            <!-- <h1 style="color: #078B07;"></h1> -->
                        </div>
                        <div style="float:left;" class="Connect">
                            <h1 style="color:#002e86;" class="fw-bold mb-0">連線狀態:<span style="color: #078B07;">正常<i
                                        class="fas fa-check-circle ps-1"></i></span></h1>
                        </div>
                        <div style="float:left; margin-top: 15px;">
                            <p class="mb-0">最後更新時間:2021/09/15 18:09</p>
                        </div>
                    </div>
                    <h1 class="my-0 py-0">
                        <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
                    </h1>
                    <div>
                        <div class="row px-0 mx-0">
                            <div class="col-lg-6">
                                <img class="img-fluid w-100 mt-4" src="/static/img/dev001.png" alt="">
                            </div>
                            <div class="col-lg-3">
                                <img class="img-fluid mt-2" src="/static/img/dev001-pic1.png" alt="">
                                <img class="img-fluid mt-2" src="/static/img/dev001-pic2.png" alt="">
                            </div>
                            <div style="color:#002e86" class="col-lg-3 py-3 px-0 fw-bold">
                                <div style="margin-top: 50px;">
                                    <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>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 ps-0">
                <div class="card h-100">
                    <h1 style="color:#002e86">通道雷達圖</h1>
                    <h1 class="my-0 py-0">
                        <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <div id='test'></div>
    
    <div class="my-5">
        <div class="row">
            <div class="col-lg-5 pe-0">
                <div class="card h-100">
                    <h1 style="color:#002e86;">通道照片</h1>
                    <h1 class="my-0 py-0">
                        <hr class="my-1" style="background:#002e86; height: 1px; opacity: 1;">
                    </h1>
                    <div style="padding: 15px;">
                        <img class="img-fluid mt-3" src="/static/img/dev001-chl.png" alt="">
                    </div>
                </div>
            </div>
            <div class="col-lg-7 ps-0">
                <div class="card h-100">
                    <h1 class="pb-0" style="color:#002e86;">通道列表</h1>
                    <div style="padding:15px;">
                        <table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center">
                            <thead style="background:#e4f8ff; color:#4c6caa;">
                                <tr>
                                    <th class="border-0">編號</th>
                                    <th class="border-0">vrms(mm/s)</th>
                                    <th class="border-0">健康狀態</th>
                                    <th class="border-0">健康指標</th>
                                    <th class="border-0">連線運作狀態</th>
                                </tr>
                            <tbody id="tower_info">
            
                            </tbody>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
    
        </div>
    </div>
    <div id='tower_perfrom'></div>
</div>


<script>
    function navlinkactive() {
        $('#nav-vibration').addClass('active');
    }
    navlinkactive();
</script>
{% endblock %}