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


{% 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 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" class="text-white">
            <select class="select-item" id="tower" onChange="show_tower_info();">
            </select>
        </div>
    </div>

    <div id='channel_health'>
        <div class="row">
            <div class="col-lg-4">
                <div class="h-100">
                    <div class="card">
                        <h1 style="color:#002e86;" class="pb-0">健康指數:<span style="color:#078B07;">86 &ensp;健康<i
                                    style="color: #078B07;" class="fas fa-check-circle ps-1"></i></span></h1>
                        <h1 class="my-0 py-0">
                            <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
                        </h1>
                        <canvas id="foo"></canvas>
                        <!-- <h1 style="color: #078B07;" class="text-center">86 &ensp;健康<i style="color: #078B07;"
                                class="fas fa-check-circle ps-1"></i></h1> -->
                    </div>
                    <div class="card mb-0">
                        <h1 style="color:#002e86;" class='pb-0'>預測健康指標:<span style="color:#078B07">89</span></h1>
                        <h1 class="my-0 py-0">
                            <hr class="mt-1 mb-3" style="background:#002e86; height: 1px; opacity: 1;">
                        </h1>
                        <canvas id="foo2"></canvas>
                        <!-- <h1 style="color: #078B07;">89</h1> -->
                    </div>
                </div>
            </div>
            <div class="col-lg-8">
                <div id='channel' style="height: 97%;" class="card pb-0"></div>
            </div>
        </div>
    </div>
    <div id='chart_info'></div>
    </h1>
    <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>
        <p style="color:#002e86; padding-left: 15px; font-weight: 900;">預測結果:<span
                style="color: #078B07;">&ensp;正常</span> 未來1125筆後CV值:<span style="color: #078B07;">&ensp;0.801</span></p>
        <div style="padding:15px;">
            <canvas id="channel_predict"></canvas>
        </div>
    </div>
    <div class="card">
        <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 id="channel_frequency"></canvas>
        </div>
    </div>

    <div class="card">
        <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:30px">
            <canvas id="CV_index"></canvas>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <h1 style="color:#002e86;">七日內 Vrms 累計圖表 (mm/s)</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 id="RPM"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <h1 style="color:#002e86;">七日內 RMS 累計圖表 (g)</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 id="Vrms"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<div id='tower_perfrom'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gauge.js/1.3.7/gauge.min.js"
    integrity="sha512-J0d1VfdfTSDoDPEsahCtf2nC+groXdWkuQFyJjS+s3CpKj63X9Hf3pMEJtjIJt/ODh0QwTRx2/OioL+9fMoqSA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    // 儀錶板
    var opts = {
        angle: 0, // The span of the gauge arc
        lineWidth: 0.5, // The line thickness
        radiusScale: 1, // Relative radius
        pointer: {
            length: 0.6, // // Relative to gauge radius
            strokeWidth: 0.035, // The thickness
            color: '#000000' // Fill color
        },
        staticZones: [
            { strokeStyle: "#F03E3E", min: 0, max: 30 }, // Red from 100 to 130
            { strokeStyle: "#FFDD00", min: 30, max: 50 }, // Yellow
            { strokeStyle: "#30B32D", min: 50, max: 100 }, // Green
        ],
        staticLabels: {
            font: "16px sans-serif",  // Specifies font
            labels: [30, 50, 100],  // Print labels at these values
            color: "#000000",  // Optional: Label text color
            fractionDigits: 0  // Optional: Numerical precision. 0=round off.
        },
        limitMax: false,     // If false, max value increases automatically if value > maxValue
        limitMin: false,     // If true, the min value of the gauge will be fixed
        colorStart: '#6FADCF',   // Colors
        colorStop: '#8FC0DA',    // just experiment with them
        strokeColor: '#E0E0E0',  // to see which ones work best for you
        generateGradient: true,
        highDpiSupport: true,     // High resolution support

    };
    var target = document.getElementById('foo'); // your canvas element
    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
    gauge.maxValue = 100; // set max gauge value
    gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 1; // set animation speed (32 is default value)
    gauge.set(86); // set actual valu
</script>
<script>
    // 儀錶板
    var opts = {
        angle: 0, // The span of the gauge arc
        lineWidth: 0.5, // The line thickness
        radiusScale: 1, // Relative radius
        pointer: {
            length: 0.6, // // Relative to gauge radius
            strokeWidth: 0.035, // The thickness
            color: '#000000' // Fill color
        },
        staticZones: [
            { strokeStyle: "#F03E3E", min: 0, max: 30 }, // Red from 100 to 130
            { strokeStyle: "#FFDD00", min: 30, max: 50 }, // Yellow
            { strokeStyle: "#30B32D", min: 50, max: 100 }, // Green
        ],
        staticLabels: {
            font: "16px sans-serif",  // Specifies font
            labels: [30, 50, 100],  // Print labels at these values
            color: "#000000",  // Optional: Label text color
            fractionDigits: 0  // Optional: Numerical precision. 0=round off.
        },
        limitMax: false,     // If false, max value increases automatically if value > maxValue
        limitMin: false,     // If true, the min value of the gauge will be fixed
        colorStart: '#6FADCF',   // Colors
        colorStop: '#8FC0DA',    // just experiment with them
        strokeColor: '#E0E0E0',  // to see which ones work best for you
        generateGradient: true,
        highDpiSupport: true,     // High resolution support

    };
    var target = document.getElementById('foo2'); // your canvas element
    var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
    gauge.maxValue = 100; // set max gauge value
    gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
    gauge.animationSpeed = 1; // set animation speed (32 is default value)
    gauge.set(89); // set actual valu
</script>


{% endblock %}