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

<div id='channel_health'>
    <div class="row px-0 mx-0">
        <div class="col-lg-6 text-center">
            <div>
                <h1>健康指數</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>
        <div class="col-lg-6 text-center">
            <div>
                <h1>預測健康指標</h1>
                <canvas id="foo2"></canvas>
                <h1 style="color: #078B07;">89</h1>
            </div>
        </div>
    </div>
</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>

<div id='channel' class="card"></div>
<div id='chart_info'></div>

<h1 class="ps-3">預測資訊 預測結果 <span style="color: #078B07;">正常</span> 未來1125筆後CV值<span style="color: #078B07;">0.801</span> </h1>
<div class="card">
    <canvas id="channel_predict"></canvas>
</div>
<div class="card">
    <canvas id="channel_frequency"></canvas>
</div>

<div class="card">
    <div class="row px-0 mx-0">
        <div class="col-lg-12">
            <canvas id="CV_index"></canvas>
        </div>
        <div class="col-lg-6">
            <canvas id="RPM"></canvas>
        </div>
        <div class="col-lg-6">
            <canvas id="Vrms"></canvas>
        </div>
    </div>
</div>
<div id='tower_perfrom'></div>
{% endblock %}