wsd
/
resistancemonitor


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
							<%@ page import="org.apache.commons.lang3.StringUtils" %>
<%@ page import="java.sql.Timestamp" %>
<%--
  Created by IntelliJ IDEA.
  User: SamRichard
  Date: 2017/1/12 0012
  Time: 13:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    Integer fullscreen = 0;
    String strFullscreen = (String) request.getParameter("fullscreen");
    if (StringUtils.isNotBlank(strFullscreen)){
        fullscreen = Integer.parseInt(strFullscreen);
    }
    String[] strTaskName = request.getParameterValues("taskname");
    String strStartTime = (String)request.getParameter("starttime");
    String strEndTime = (String)request.getParameter("endtime");
    Integer charttype = null;
    String strType = (String)request.getParameter("type");
    if (StringUtils.isNotBlank(strType)){
        charttype = Integer.parseInt(strType);
    }
    if (charttype == null && StringUtils.isNotBlank(strStartTime) && StringUtils.isNotBlank(strEndTime)){
        try {
            Timestamp a = Timestamp.valueOf(strStartTime);
            Timestamp b = Timestamp.valueOf(strEndTime);
            Long iDif = (b.getTime() - a.getTime()) / 1000;
            System.out.println(a.toString() + ":" + b.toString() + ":" + iDif.toString());
            if (iDif <= 0){

            } else if (iDif <= 2 * 3600){
                charttype = 0;
            } else if (iDif <= 2 * 86400){
                charttype = 1;
            } else if (iDif <= 60 * 86400){
                charttype = 2;
            } else {
                charttype = 3;
            }
        } catch (Exception e){
            e.printStackTrace();
        }
    }
    if (charttype == null){
        charttype = 0;
    }
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>车流量报表</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/select2.min.css">
    <link rel="stylesheet" href="css/select2-bootstrap.css">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link href="css/sweetalert2.min.css" rel="stylesheet">
    <link rel="icon" href="../favicon.ico">
</head>
<body>
<div id="pagebody" class="container-fluid">
    <br>
    <form class="row form-inline" id="t2">
        <fieldset>
            <div class="col-md-1 form-group" style="padding-right: 5px;">
                <label class="sr-only" for="js-data-ajax-subinfo">分中心</label>
                <select id="js-data-ajax-subinfo" class="form-control" style="width:100%"></select>
            </div>
            <div class="col-md-3 form-group" style="padding-right: 5px;">
                <label class="sr-only" for="js-data-ajax-taskinfo">通道名称:</label>
                <select id="js-data-ajax-taskinfo" class="form-control" style="width: 100%;height: 34px;" multiple="multiple"></select>
            </div>
            <div class="col-md-1 form-group" style="padding-right: 5px;">
                <label for="timequickselect" class="sr-only">选择时间</label>
                <select class="form-control" id="timequickselect" style="width: 100%;height: 34px;">
                    <option value="1">最近一小时</option>
                    <option value="2">&nbsp;&nbsp;今&nbsp;&nbsp;天&nbsp;&nbsp;</option>
                    <option value="3">&nbsp;&nbsp;本&nbsp;&nbsp;周&nbsp;&nbsp;</option>
                    <option value="4">&nbsp;&nbsp;本&nbsp;&nbsp;月&nbsp;&nbsp;</option>
                    <option value="5">&nbsp;&nbsp;本&nbsp;&nbsp;年&nbsp;&nbsp;</option>
                    <option value="6">&nbsp;&nbsp;自定义&nbsp;&nbsp;</option>
                </select>
            </div>
            <div class="col-md-3 form-group">
                <label for="dtp_input1" class="control-label">始于:</label>
                    <div class="input-group date form_datetime" data-date="2016/09/16 00:00:00+0800" data-date-format="yyyy-mm-dd hh:ii:00" data-link-field="dtp_input1" id="starttime">
                        <input class="form-control" size="16" type="text" value="" readonly>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                    </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
            <div class="col-md-3 form-group">
                <label for="dtp_input2" class="control-label">终于:</label>
                <div class="input-group date form_datetime" data-date="22016-09-16T05:25:07+08:00" data-date-format="yyyy-mm-dd hh:ii:00" data-link-field="dtp_input2" id="endtime">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
            <div class="col-md-1 form-group">
                <button id="getinfo" type="button" class="btn btn-primary btn-block">查看</button>
            </div>
        </fieldset>
    </form>
    <br>
    <div id="info" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/highcharts.src.js"></script>
<script src="js/exporting.js"></script>
<script src="js/dark-unica.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/select2-zh-CN.js"></script>
<script src="js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="js/sweetalert2.min.js"></script>
<script src="js/es6-promise.auto.min.js"></script>

<script>
    //设置宽高
    if (<%=fullscreen%>){
        $("#pagebody").removeClass("container-fluid");
        $("br").remove();
        $("#t2").remove();
        $("#info").height(document.documentElement.clientHeight);
        $("#info").width(document.documentElement.clientWidth);
    } else {
        var hchartsheight = document.documentElement.clientHeight - $("br").height() * 2 - $("fieldset")[0].clientHeight - 14 * 2;
        if (hchartsheight > 100){
            $("#info").height(hchartsheight);
        }
    }

    //设置中文
    Highcharts.setOptions({
        lang:{
            contextButtonTitle:"图表导出菜单",
            decimalPoint:".",
            downloadJPEG:"下载JPEG图片",
            downloadPDF:"下载PDF文件",
            downloadPNG:"下载PNG文件",
            downloadSVG:"下载SVG文件",
            drillUpText:"返回 {series.name}",
            loading:"加载中",
            months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
            noData:"没有数据",
            numericSymbols: [ "千" , "兆" , "G" , "T" , "P" , "E"],
            printChart:"打印图表",
            resetZoom:"恢复缩放",
            resetZoomTitle:"恢复图表",
            //shortMonths: [ "Jan" , "Feb" , "Mar" , "Apr" , "May" , "Jun" , "Jul" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec"],
            shortMonths: [ "1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" , "9" , "10" , "11" , "12"],
            thousandsSep:",",
            weekdays: ["星期一", "星期二", "星期三", "星期三", "星期四", "星期五", "星期六","星期天"]
        },
        global : {
            useUTC : false
        }
    });

    //图表属性
    var options = {
        chart: {
            renderTo:"info",
            type: 'spline'
        },
        title: {
            text: '车流量曲线'
        },
        subtitle: {
            text: '类型:日曲线'
        },
        xAxis:[{
            type : 'datetime',
            title : {
                text : "时间"
            },
            // dateTimeLabelFormats: {
            //    millisecond:"%M:%S.%L",
            //second:"%H:%M:%S",
            //minute:"%d %H:%M",
            //hour:", %m-%d %H",
            //day:"%Y-%m-%d,%A",
            //week:"%A",
            //month:"%Y-%M",
            //year:"%Y"
            // },
            labels : {
                enabled : true,
                //step : 2,
                formatter : function(){
                    var date = new Date(this.value);
                    switch (type){
                        case 0:
                            //分
                            return date.getHours() + ":" + date.getMinutes();
                        case 1:
                            //时
                            return date.getHours() + ":00";
                        case 2:
                            //天
                            return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
                        case 3:
                            //月
                            return date.getFullYear() + "-" + (date.getMonth() + 1);
                        default:
                            return this.value;
                    }
                }
            },
            crosshair: true
        }],
        yAxis: {
            title: {
                text: '车流量'
            }
        },
        /*

         plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
        */

        tooltip: {
            crosshairs: [true, true],
            shared: true,
            formatter : function(){
                this;
            },
        },
        credits:{
            enabled:true, // 版权信息
            text:"杭州慧景科技股份有限公司",
            href:"http://www.hzhjkj.com/"
        },
        series: []
    };

var refreshtimer;
var taskname = new Array();
<% if (strTaskName != null) {
        for (int i = 0; i < strTaskName.length; i++){ %>
            taskname[<%=i%>] = "<%=strTaskName[i]%>";
    <%}}%>
    var starttime = '<%=strStartTime%>';
    var endtime = '<%=strEndTime%>';
    var type = <%=charttype%>;


    var $subinfo = $("#js-data-ajax-subinfo");
    var $taskinfo = $("#js-data-ajax-taskinfo");
    var $timequick = $("#timequickselect");
    var $startime = $("#starttime");
    var $endtime = $("#endtime");

    var subinfo;
    var taskinfo;
    //修改输出
    //if (!Date.prototype.toISOString) {
        (function() {
            function pad(number) {
                if (number < 10) {
                    return '0' + number;
                }
                return number;
            }

            Date.prototype.toISOString = function() {
                return this.getFullYear() +
                    '-' + pad(this.getMonth() + 1) +
                    '-' + pad(this.getDate()) +
                    ' ' + pad(this.getHours()) +
                    ':' + pad(this.getMinutes()) +
                    ':' + pad(this.getSeconds())
                    ;
            };
        }());
    //}

    //初始函数
    $(function () {
        if (<%=StringUtils.isNotBlank(strStartTime) && StringUtils.isNotBlank(strEndTime)%>){
            var a = new Date(Date.parse('<%=strStartTime%>'.replace(/-/g, "/")));
            var b = new Date(Date.parse('<%=strEndTime%>'.replace(/-/g, "/")));
            $startime.datetimepicker('update', a);
            $endtime.datetimepicker('update', b);
            setType(a, b);
            $("#timequickselect").val(6).trigger("change");
        } else {
            var date = new Date();
            date.setSeconds(0);
            date.setMilliseconds(0);
            date.setMinutes(date.getMinutes() + 10);
            var date2 = new Date(date);
            date2.setHours(date.getHours() - 2);
            $startime.datetimepicker('update', date2);
            $endtime.datetimepicker('update', date);
            type = 0;
            starttime = date2.toISOString();
            endtime = date.toISOString();
        }

        queryData();

        $.get("getsubinfo.cpp", "", function (data) {
            subinfo = $subinfo.select2({
                language: "zh-CN",
                minimumResultsForSearch: Infinity,
                placeholder: "选择分中心",
                data : data
            });

            if (data.length > 0){
                $.get("gettaskinfo.cpp", { subno : data[0].id }, function (data2) {
                    taskinfo = $taskinfo.select2({
                        language: "zh-CN",
                        placeholder: "选择通道",
                        maximumSelectionLength: 10,
                        allowClear: true,
                        disabled : false,
                        data : data2
                    })
                })
            } else {
                taskinfo = $taskinfo.select2({
                    language: "zh-CN",
                    placeholder: "选择通道",
                    maximumSelectionLength: 10,
                    allowClear: true,
                    disabled : true,
                    data : null
                });
            }

            $timequick.select2({
                language: "zh-CN",
                minimumResultsForSearch: Infinity,
                placeholder: "选择时间",
            });
        });
    })

    var chart;

    //请求数据
    function queryData() {
        if (taskname.length === 0)
            return ;
            var urladdr = "getrtinfo.cpp?starttime=" + encodeURI(starttime) + "&endtime=" + encodeURI(endtime) + "&type=" + type + "&fullscreen=" + <%=fullscreen%> + "&timestamp=" + new Date().getTime();;
        for (var i = 0 ; i < taskname.length; i++)
        {
            urladdr += "&taskname=" + encodeURI(taskname[i]);
        }
        $.ajax({
            url : urladdr,
            type : "get",
            dataType : "json",
            success : function (data) {

                if (data.series.length === 0) {
                    clearTimeout(refreshtimer);
                    swal({
                        type: 'success',
                        title: '无数据',
                        timer: 3000
                    }).then(
                        function () {},
                        // handling the promise rejection
                        function (dismiss) {
                            if (dismiss === 'timer') {
                                console.log('I was closed by the timer')
                            }
                        }
                    )
                    return ;
                }
                options.series = data.series;
                if (type == 0){
                    options.subtitle.text = "分曲线";
                    options.yAxis.title.text = "车辆数(辆/分)";
                } else if (type == 1){
                    options.subtitle.text = "时曲线";
                    options.yAxis.title.text = "车辆数(辆/时)";
                } else if (type == 2){
                    options.subtitle.text = "日曲线";
                    options.yAxis.title.text = "车辆数(辆/日)";
                } else if (type == 3){
                    options.subtitle.text = "月曲线";
                    options.yAxis.title.text = "车辆数(辆/月)";
                } else {
                    alert(type);
                }

                if (chart) {
                    chart = null;
                }
                chart = new Highcharts.chart(options);
            }
        })
        //定时刷新
        var now = new Date();
        var date = new Date(Date.parse(starttime.replace(/-/g, "/")));
        var date2 = new Date(Date.parse(endtime.replace(/-/g, "/")));
        if (now >= date && now <= date2)
        {
            date.setMinutes(date.getMinutes() + 1);
            date2.setMinutes(date2.getMinutes() + 1);
            starttime = date.toISOString();
            endtime = date2.toISOString();
            refreshtimer = setTimeout("queryData()", 60000);
        }
    }

    $subinfo.on("select2:select", function (e) {
        inittaskinfo();
        $.get("gettaskinfo.cpp", { subno : e.params.data.id }, function (data) {
            taskinfo = $taskinfo.select2({
                language: "zh-CN",
                placeholder: "选择通道",
                maximumSelectionLength: 10,
                allowClear: true,
                disabled : false,
                data : data
            })
        })
    });

    function inittaskinfo() {
        //$taskinfo.select2("val", "");
        //$taskinfo.val(null).trigger("change");
        $taskinfo.select2({
            disabled : true,
            placeholder: "选择通道",
            data : null
        });
    }

    $timequick.on("select2:select", function (e) {
        console.log("SELECT " + e.params.data.id );

        var date = new Date();
        date.setSeconds(0);
        date.setMilliseconds(0);
        switch (e.params.data.id){
            case "1":
                var date2 = new Date(date);
                date2.setHours(date.getHours() - 1)
                $startime.datetimepicker('update', date2);
                $endtime.datetimepicker('update', date);
                type = 0;
                break;
            case "2":
                var date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 1);
                $startime.datetimepicker('update', date2);
                $endtime.datetimepicker('update', date);
                type = 1;
                break;
            case "3":
                var dateofweek = date.getDay();
                if (dateofweek == 0) { dateofweek = 7 };
                var date2 = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dateofweek + 1);
                $startime.datetimepicker('update', date2);
                $endtime.datetimepicker('update', date);
                type = 2;
                break;
            case "4":
                var date2 = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                $startime.datetimepicker('update', date2);
                $endtime.datetimepicker('update', date);
                type = 2;
                break;
            case "5":
                var date2 = new Date(date.getFullYear(), 0, 1, 0, 0, 0);
                $startime.datetimepicker('update', date2);
                $endtime.datetimepicker('update', date);
                type = 3;
                break;
            default:
        }


    });

    function newIEDate(dateStr) {
        // dateStr的格式：xxxx-xx-xx xx:xx:xx
        do {
            var date1 = dateStr.split(" ");
            if (date1.length != 2){
               break;
            }
            var date2 = date1[0].split("-");
            if (date2.length != 3){
                break;
            }
            var date3 = date1[1].split(":");
            if (date3.length != 3){
                break;
            }
            return new Date(date2[0], date2[1], date2[2], date3[0], date3[1], date3[2]);
        } while(0);
        return new Date();
    }

    $("#getinfo").click(function () {
        taskname = $taskinfo.select2("val");
        starttime = $("#dtp_input1").val();
        endtime = $("#dtp_input2").val();
        setType(new Date(Date.parse(starttime.replace(/-/g, "/"))), new Date(Date.parse(endtime.replace(/-/g, "/"))));
        queryData();
    })

    function setType(a, b) {
        var dif = (b.getTime() - a.getTime()) / 1000;
        if (dif <= 0){
            return;
        } else if (dif <= 2 * 3600){
            type = 0;
        } else if (dif <= 2 * 86400){
            type = 1;
        } else if (dif <= 60 * 86400){
            type = 2;
        } else {
            type = 3;
        }
    }

</script>
</body>
</html>