rita
/
CoffeeProject


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

<head>
    <meta charset="UTF-8">
    <title>Aisky-coffee</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>

    <!--可用來建立使用者小圖示-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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>


    <style>
        body {
            margin: 0;
        }

        .navbar-dark .navbar-nav .nav-link {
            color: white;
            cursor: pointer;
            text-decoration: none;
            width: 110px;
            height: 46px;
        }

        .nav-top {
            line-height: 40px;
            background-color: #C4C4C4;
        }

        .website_title {
            font-family: Roboto;
            font-style: normal;
            font-weight: normal;
            font-size: 30px;
            color: #000000;
        }

        .navbar-nav>li {
            float: none;
            display: inline-block;
            width: 100px;
            margin: 0 auto;
            text-align: center;
        }

        .navbar-nav>li a {
            font-size: 20px;
        }

        .main-page {
            margin-top: 200px;
        }

        .page-title {
            font-family: Roboto;
            font-style: normal;
            font-weight: bold;
            font-size: 36px;
            color: #000000;
        }


        .flex {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
        }


        .item-title {
            display: inline-block;
            margin-top: 20px;
            margin-left: 20px;
            font-family: Roboto;
            font-style: normal;
            font-weight: bold;
            font-size: 24px;
            color: #000000;
        }

        .set-schedule {
            width: 200px;
            height: 45px;
            background: #008CBA;
            border: 1px solid #CFCFCF;
            box-sizing: border-box;
            color: #FFFFFF;
            border-radius: 5px;
            font-size: 17px;
            margin-left: 20px;

        }

        .set-link {
            width: 300px;
            height: 100px;
            background: #008CBA;
            border: 1px solid #CFCFCF;
            box-sizing: border-box;
            color: #FFFFFF;
            border-radius: 5px;
            font-size: 36px;
            margin-left: 5px;
            margin-right: 5px;
        }

        .sensor_status {
            width: 300px;
            height: 250px;
            background: #FFFFFF;
            border: 1px solid #CFCFCF;
            box-sizing: border-box;
            color: #000000;
            border-radius: 5px;
            font-size: 24px;
            margin: auto;

        }


        .div_title {
            width: 100%;
            height: 80px;
            font-size: 1em;
            font-weight: bold;
            color: black;
            margin: 0 auto;
            display: table;
            text-align: center;
            transform: translate(0, 10%);
        }

        .td_in {
            font-size: 30px;
            margin-top: 10%;
            border-radius: 15px;
            text-align: center;
            background-color: #C4C4C4;
            width: 250px;
            height: 150px;
            margin: auto;
            line-height: 150px;
            cursor: pointer;
        }

        .show-info {
            position: absolute;
            background-color: #FFFFFF;
            border: 1px solid #949494;
            box-sizing: border-box;
            z-index: 3;
            left: 8%;
        }

        .show-info>h1 {
            text-align: center;
        }

        .show-chart {
            height: 500px;
            border: 2px solid #FFF;
            background: #C4C4C4;
        }

        .btn-input input {
            background: #008CBA;
            border: 1px solid #CFCFCF;
            box-sizing: border-box;
            border-radius: 5px;
            width: 120px;
            height: 58px;
            text-align: center;
            line-height: 58px;
            font-size: 20px;
            margin-top: 50px;
            color: #FFFFFF;
        }


        @media(max-width:373px) {
            .card {
                margin-right: 0px;
            }

            .col {
                padding-left: 0px;
                padding-right: 0px;
            }
        }

        @media(max-width:577px) {}

        @media(min-width:576px) {}

        @media(min-width:768px) {
            .navbar-nav>li {
                margin-left: 0px;
            }

            .navbar-nav .li-block {
                display: none;
            }
        }

        @media(min-width:991px) {
            .navbar-nav>li {
                margin-left: 20px;
            }

            .navbar-nav .li-block {
                display: none;
            }
        }

        @media(min-width:1200px) {
            .navbar-nav>li {
                margin-left: 50px;
            }

            .navbar-nav .li-block {
                display: inline-block;
                width: 100px;
            }
        }

        @media(min-width:1400px) {
            .navbar-nav .li-block {
                display: inline-block;
                width: 200px;
            }
        }


        @media(min-width:1689px) {
            .navbar-nav>li {
                margin-left: 50px;
            }

            .navbar-nav .li-block {
                display: inline-block;
                width: 500px;
            }
        }
    </style>


</head>

<body>
    <nav class="fixed-top">
        <nav class="navbar navbar-expand-md nav-top justify-content-center">
            <div>
                <span class="website_title">發酵槽{{params.tid}}</span>
            </div>
        </nav>
        <nav class="navbar navbar-expand-md bg-dark navbar-dark nav-bottom">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首頁</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">關於我們</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">資訊</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">聯絡方法</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/cargo_list">咖啡貨櫃</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/video">影像串流</a>
                    </li>
                    <li class="li-block"></li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fa fa-user-o"></i> {{params.username}}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">Logout</a>
                    </li>
                </ul>
            </div>
        </nav>
    </nav>
    <div class="main-page">
        <div class="text-center">
            <h1>感測器狀態</h1>
        </div>
        <form method="" action="">
            <div class="container-fluid" style="margin-top:100px;">
                <div class="row">
                    <div class="col flex">
                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
                            <div class="page-title text-center">
                                <div class="sensor_status">
                                    <div class="div_title" style="">
                                        <label>溫溼度</label>
                                    </div>
                                    <div class="td_in" style="" onclick="ShowInfo('溫濕度')">{{params.tank_tem.tem}}
                                        &#8451; </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"
                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
                            <div class="page-title text-center">
                                <div class="sensor_status">
                                    <div class="div_title" style="">
                                        <label>二氧化碳</label>
                                    </div>
                                    <div class="td_in" style="" onclick="ShowInfo('二氧化碳')"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
                            <div class="page-title text-center">
                                <div class="sensor_status">
                                    <div class="div_title" style="">
                                        <label>酸鹼值</label>
                                    </div>
                                    <div class="td_in" style="" onclick="ShowInfo('酸鹼值')">{{params.tank_ph.ph}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
                            <div class="page-title text-center">
                                <div class="sensor_status">
                                    <div class="div_title" style="">
                                        <label>攝影機</label>
                                    </div>
                                    <div class="td_in" style="" onclick="ShowInfo('攝影機')"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"
                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
                            <div class="page-title text-center">
                                <div class="sensor_status">
                                    <div class="div_title" style="">
                                        <label>大氣壓力</label>
                                    </div>
                                    <div class="td_in" style="" onclick="ShowInfo('大氣壓力')"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
                            <div class="page-title text-center">
                                <div class="sensor_status">
                                    <div class="div_title" style="">
                                        <label>超音波</label>
                                    </div>
                                    <div class="td_in" style="" onclick="ShowInfo('超音波')">{{params.tank_sonic.sonic}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-3  col-lg-6 col-md-6 col-sm-12 col-xs-12"
                            style="margin-right: 20px ; margin-top:20px; margin-bottom:20px;">
                            <div class="page-title text-center">
                                <div class="sensor_status">
                                    <div class="div_title" style="">
                                        <label>EC值</label>
                                    </div>
                                    <div class="td_in" style="" onclick="ShowInfo('EC值')">{{params.tank_ec.ec}}</div>
                                </div>
                            </div>
                        </div>

                        <div id="" class="show-info col-xl-10 col-lg-10 col-md-10 col-sm-10 col-xs-10"
                            style="display: none;">
                            <br>
                            <h1></h1>
                            <center>
                                資料類型:
                                <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>
                                時間間隔:
                                <select name="time-interval" class="text-right">
                                    <option value="month">逐月</option>
                                    <option value="day">逐日</option>
                                    <option value="hour">逐時</option>
                                </select>
                                <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>
                                <input type="button" value="查詢" onclick="Echart('');">
                            </center>
                            <div class="row">
                                <div class="col-1"></div>
                                <div class="col-10 show-chart" style="margin-top: 10px;text-align:center;"></div>
                                <div class="col-1"></div>
                            </div>
                            <div class="btn-input" style="text-align:center;">
                                <input type="button" value="關閉" style="margin-left:0px;" onclick="CloseInfo()">
                                <input class="" type="button" value="匯出">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    var all_datetime = 0;
    var all_data = 0;
    var data_name = 0;
    var xAxis_data = 0;
    var max_data = 0;
    var min_data = 0;
    var avg_data = 0;

    // Benson：此段無畫圖表處, 先註解後續再解決 (有 Error)
    // Rita： 2021/07/26 研究中


    function Echart(evt) {
        if (Number({{ params.tid }}) < 10) {
            data_name = evt.substring(2);
        } else {
            data_name = evt.substring(3);
        };

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

        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 = { 'evt': evt, 'avg': avg, 'max': max, 'min': min, 'time-interval': time_interval, 'date-start': date_start, 'date-end': date_end };

        $.get('/history_data', json, function (resText) {

            if (resText.max) {
                var max_series = { 'name': '最大值', 
                                    'type': 'line', 
                                    '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': 'line', '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': 'line', '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: resText.map(function (item) {
                        return item[0];
                    })
                },
*/                
                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.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'
                                }
                            }
                        }
                    },
                ]
*/
            };

            //使用剛指定的配置項和資料顯示圖表
            myChart.setOption(option);


        }, 'json');
    };


    //下載檔案函數
    function downloadFile() {
        //藉型別陣列建構的 blob 來建立 URL
        let fileName = "fileName.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;
    };


    function ShowInfo(sensor) {
        $(".show-info").css('display', 'block');
        $(".show-info h1").text(sensor);
        $("input[value=查詢]").attr('onclick', 'Echart(\'{{params.tid}}' + '-' + sensor + '\')');
        $("input[value=匯出]").attr('class', 'DownloadBtn');

        let DownloadBtn = document.querySelector(".DownloadBtn");
        DownloadBtn.addEventListener("click", downloadFile);

    };

    function CloseInfo() {
        //將echarts圖形銷毀
        $(".show-chart").removeAttr("_echarts_instance_").empty();
        //將複選框已選定的移除
        $("input[value=avg]").prop('checked', false);
        $("input[value=min]").prop('checked', false);
        $("input[value=max]").prop('checked', false);
        //將時間間隔回到月
        $("select[name=time-interval]").val('month');
        //將已選好的日期移除
        $("#querydate-start").val('');
        $("#querydate-end").val('');
        $(".show-info").css('display', 'none');
    };


</script>

</html>