rita
/
CoffeeProject


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Smart Coffee - Chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!--
    <script src="../static/js/sign_in.js"></script>

    <link rel="stylesheet" href="../static/css/sign_in.css">
    -->
    <!--引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.3.0/Chart.Zoom.min.js"></script>

    <script language="JavaScript">
        var tank = '{{tank}}';
        var sensor_name = '{{sensor_name}}';
        var tid = '{{tid}}';
        $(document).ready(function(){
            $("#coffee_title").text(tank + tid + ' 乾燥出料儲豆槽感測器圖表');
        });
    </script>
</head>

<body>
    <div id="wrapper">
        <div id="coffee_header">
            <!-- 匯入共同使用的 header.html 內容 -->
            {% include 'header.html' %}
        </div>
        <!--
        <a href="/dry">返回乾燥槽介面</a>
        <div style="text-align: center; margin-top:0px; font-size: 24px;">
            Smart Coffee
        </div>
        -->
        <!--
        <form action="/chart/SHT11_Temp/{{tid}}" method="post">
            <div class="form-group" style="margin-top: 30px; text-align: center;">
        -->
        <table style="margin: auto; border:3px gray solid; width: 80%; text-align: center;" cellpadding="6" rules='ALL'>
            <tr>
                <td>
                    {% if tid == '2'%}
                    <select id="tank_num">
                        <option value="DI1">乾燥出料儲豆槽_1</option>
                        <option value="DI2" selected>乾燥出料儲豆槽_2</option>
                    </select>
                    {% else %}
                    <select id="tank_num">
                        <option value="DI1" selected>乾燥出料儲豆槽_1</option>
                        <option value="DI2">乾燥出料儲豆槽_2</option>
                    </select>
                    {% endif %}

                    <select id="sensors">
                        <option value="UltraSonic">乾燥出料儲豆槽咖啡生豆高度</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    時間間隔:
                    <select name="time-interval" class="text-right">
                        <option value="month">逐月</option>
                        <option value="day">逐日</option>
                        <option value="hour">逐時</option>
                    </select>
                    &nbsp;
                    <!--
                            從&nbsp;
                            <input type="datetime-local" name="sensor_starttime" id="sensor_starttime" value={{starttime}}>
                            &nbsp;到&nbsp;
                            <input type="datetime-local" name="sensor_endtime" id="sensor_endtime" value={{endtime}}>
                            &nbsp;為止
                        -->
                    <span>從</span>
                    <label for="querydate-start"></label><input id="querydate-start" type="date">
                    <span>到</span>
                    <label for="querydate-end"></label><input id="querydate-end" type="date">
                    <span>為止</span>
                </td>

            </tr>
            <tr>
                <td>
                    資料類型:
                    <label><input type="checkbox" name="data-type" value="max">最大值</label>
                    <label><input type="checkbox" name="data-type" value="avg">平均值</label>
                    <label><input type="checkbox" name="data-type" value="min">最小值</label>
                    <br>

                </td>
            </tr>
            <tr>
                <td>
                    <!--
                            <button type="submit" name="charting">繪製圖表</button>
                            <button type="submit" onclick="" id="btn_save_chart" style="display: none;">儲存圖表</button>
                            -->
                    <input type="button" value="查詢" onclick="ShowInfo()">
                    <input type="button" value="匯出" onclick="downloadFile()">
                    <input type="button" value="刪除" onclick="">

                    <script>
                        function ShowInfo() {
                            // 取得桶號、感測器名稱
                            tid = document.getElementById("tank_num").value
                            console.log('tid: ' + tid)
                            sensor_name = document.getElementById("sensors").value
                            console.log('sensor_name: ' + sensor_name)

                            // 數據整理
                            Echart(sensor_name, tid)
                            // 顯示圖表
                        };

                        function downloadFile() {
                            tid = document.getElementById("tank_num").value
                            sensor_name = document.getElementById("sensors").value

                            //藉型別陣列建構的 blob 來建立 URL
                            let fileName = "ChartData_" + tid + "_" + sensor_name + ".csv";
                            //"\ufeff"解決打開CSV中文亂碼問題
                            const data = "\ufeff" + getData();
                            let blob = new Blob([data], {
                                type: 'text/csv,charset=UTF-8'
                            });
                            var href = URL.createObjectURL(blob);
                            // 從 Blob 取出資料
                            var link = document.createElement("a");
                            document.body.appendChild(link);
                            link.href = href;
                            link.download = fileName;
                            link.click();
                        };

                        //所有資料函數
                        function getData() {
                            var header = "日期," + data_name + "\n";
                            var data = "";
                            var length = all_datetime.length;

                            for (var i = 0; i < length; i++) {
                                data = data + all_datetime[i] + ',' + all_data[i] + '\n';
                            };

                            return header + data;
                        };

                        //最大最小平均資料函數
                        function getData() {
                            var header = data_name + "\n日期,";
                            if (max_data) {
                                console.log(max_data);
                                header = header + "最大值,";
                            };
                            if (avg_data) {
                                header = header + "平均值,";
                            };
                            if (min_data) {
                                header = header + "最小值,";
                            };
                            header = header + "\n";
                            var data = "";
                            var length = xAxis_data.length;

                            for (var i = 0; i < length; i++) {
                                data = data + xAxis_data[i] + ',';
                                if (max_data) {
                                    data = data + max_data[i] + ',';
                                };
                                if (avg_data) {
                                    data = data + avg_data[i] + ',';
                                };
                                if (min_data) {
                                    data = data + min_data[i] + ',';
                                };
                                data = data + '\n';
                            };

                            return header + data;
                        };

                    </script>
                </td>
            </tr>
            <tr>
                <td>
                    <!--
                            <img src={{ url }}>
                        -->
                    <div id="" class="show-info" style="text-align: center;">
                        <center>
                            <div class="show-chart" style="height: 420px; width: 100%; text-align: center;">
                                圖表
                            </div>
                        </center>
                    </div>
                </td>
            </tr>
        </table>

        <!--
            </div>
        </form>
        -->
        <div id="coffee_footer">
            <!-- 匯入共同使用的 footer.html 內容 -->
            {% include 'footer.html' %}
        </div>
    </div>
</body>

<script>
    var all_datetime = 0;   // 所有資料時間 ?
    var all_data = 0;       // 所有感測器數據 ?
    var data_name = 0;      // 感測器名稱       // "溫溼度"
    var xAxis_data = 0;     // x 軸資料
    var max_data = 0;       // 
    var min_data = 0;       // 
    var avg_data = 0;       // 

    function Echart(sensor_name, tid) {
        // Echart(sensor_name, tid)

        //將echarts圖形銷毀
        $(".show-chart").removeAttr("_echarts_instance_").empty();

        // Rita：sensor 與 data_name 重複
        // var sensor = evt.substring(2);

        if (!$("input[value=avg]").prop('checked') && !$("input[value=min]").prop('checked') && !$("input[value=max]").prop('checked')) {
            alert("請至少選擇一種資料類型!");
            return false;
        };

        if ($("#querydate-start").val() == '' || $("#querydate-end").val() == '') {
            alert("請選擇日期範圍!");
            return false;
        };
        //基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementsByClassName('show-chart')[0]);  // class="col-10 show-chart"

        var date_start = $("#querydate-start").val();
        var date_end = $("#querydate-end").val();
        var avg = 0;
        var max = 0;
        var min = 0;
        var time_interval = $("select[name=time-interval]").val();
        var legend = new Array();
        var color = new Array();
        var series = new Array();

        if ($("input[value=max]").prop('checked')) {
            max = 1;
            legend.push("最大值");
            color.push("#1e88e5");      // 水藍色
        };

        if ($("input[value=avg]").prop('checked')) {
            avg = 1;
            legend.push("平均值");
            color.push("#43a047");      // 草綠色
        };

        if ($("input[value=min]").prop('checked')) {
            min = 1;
            legend.push("最小值");
            color.push("#e64a19");      // 橘紅色
        };

        var json = {
            'tid': tid,
            'sensor_name': sensor_name,
            'avg': avg,
            'max': max,
            'min': min,
            'time-interval': time_interval,
            'date-start': date_start,
            'date-end': date_end
        };

        console.log('json___' + 
            'tid: ' + tid +
            'sensor_name: ' + sensor_name +
            'avg: ' + avg +
            'max: ' + max +
            'min: ' + min +
            'time-interval: ' + time_interval +
            'date-start: ' + date_start +
            'date-end: ' + date_end
        )


        $.get('/history_data_new', json, function (resText) {
            if (resText.max) {
                var max_series = {
                    'name': '最大值',
                    'type': 'scatter',
                    'data': resText.max.map(function (item) { return item[1]; }),
                    'itemStyle': { 'normal': { 'lineStyle': { 'color': '#1e88e5' } } },
                };
                series.push(max_series);        // 把上面的 dict 加入 series array 內
                xAxis_data = resText.max.map(function (item) { return item[0]; });
                max_data = resText.max.map(function (item) { return item[1]; });
            };
            if (resText.avg) {
                var avg_series = { 'name': '平均值', 'type': 'scatter', 'data': resText.avg.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#43a047' } } }, };
                series.push(avg_series);
                xAxis_data = resText.avg.map(function (item) { return item[0]; });
                console.log('xAxis_data: ' + xAxis_data)                             // 2021-07-09 10:00:00,2021-07-20 09:00:00,2021-07-22 15:00:00,2021-07-26 15:00:00,2021-07-26 16:00:00
                avg_data = resText.avg.map(function (item) { return item[1]; });
                console.log('avg_data: ' + avg_data)                                 // 91.0,98.0,11.0,15.2,30.5
            };
            if (resText.min) {
                var min_series = { 'name': '最小值', 'type': 'scatter', 'data': resText.min.map(function (item) { return item[1]; }), 'itemStyle': { 'normal': { 'lineStyle': { 'color': '#e64a19' } } }, };
                series.push(min_series);
                xAxis_data = resText.min.map(function (item) { return item[0]; });      // all
                min_data = resText.min.map(function (item) { return item[1]; });        // min
            };

            //獲取日期內所有數據
            all_datetime = resText.all.map(function (item) { return item[0]; });        // all
            all_data = resText.all.map(function (item) { return item[1]; });

            //指定圖表的配置項和資料

            option = {
                title: {
                    text: '', // 'Data History'
                    left: '1%'
                },
                tooltip: {
                    trigger: 'axis'
                },
                color: color,
                legend: {
                    data: legend,
                },
                xAxis: {
                    data: xAxis_data,
                },
                yAxis: {
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: ''
                        }
                    }
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: [{
                    startValue: '2021-01-01'
                }, {
                    type: 'inside'
                }],
                series: series,
                /*
                series: [
                    {
                        name: '最大值',
                        type: 'line',
                        data: resText.max.map(function (item) {
                            return item[1];
                        }),
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#1e88e5'
                                }
                            }
                        },
                    },
                    {
                        name: '平均值',
                        type: 'line',
                        data: [20.0, 20.0, 20.0, 20.0, 20.0, 20.0],
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#43a047'
                                }
                            }
                        },
                    },
                    {
                        name: '最小值',
                        type: 'line',
                        data: [15.0, 15.0, 15.0, 15.0, 15.0, 15.0],
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#e64a19'
                                }
                            }
                        }
                    },
                ]
                */

            };
            console.log('SHOW myChart')
            //使用剛指定的配置項和資料顯示圖表
            myChart.setOption(option);
        }, 'json');

    } // Echart(sensor_name, tid)


</script>

</html>