coffeeproject20230512/coffeeproject/app/templates/sensor_chart_R.html

<!-- 宣告我們要套用模板 -->
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block script %}
    <!--引入 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 status = '{{status}}';
        var username = '{{username}}';
        var tid = '{{tid}}';
        $(document).ready(function(){
            $("#coffee_title_pc").text(' 中水槽感測器圖表');
            $("#coffee_title_phone").text(' 感測器');
            $('#navbarDropdown_user_pc').text(username);
            $('#navbarDropdown_user_phone').text(username);
        });
    </script>
{% endblock %}

{% block main %}
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-1 row-cols-md-1 g-3">
        <div class="col">
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="d-flex justify-content-between align-items-center">
        <table style="margin: auto; border:3px gray solid; width: 80%; text-align: center;" cellpadding="6" rules='ALL'>
            <tr>
                <td style="border:1px gray solid;">
                    {% if tid == '1'%}
                    <select id="tank_num">
                        <option value="R1">中水槽_1</option>
                    </select>
                    {% endif %}

                    <select id="sensors">
                        <option value="UltraSonic">水位</option>
                        <option value="Turbidity">濁度計</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td style="border:1px gray solid;">
                    時間間隔:
                    <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 style="border:1px gray solid;">
                    資料類型:
                    <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 style="border:1px gray solid;">
                    <!--
                            <button type="submit" name="charting">繪製圖表</button>
                            <button type="submit" onclick="" id="btn_save_chart" style="display: none;">儲存圖表</button>
                            -->
                    <input type="button" class="btn btn-secondary" value="查詢" onclick="ShowInfo()">
                    <input type="button" class="btn btn-secondary" value="匯出" onclick="downloadFile()">
            

                    <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>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block script2 %}
<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: {
                        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);
            window.addEventListener('resize', myChart.resize);
        }, 'json');

    } // Echart(sensor_name, tid)


</script>
{% endblock %}