wsd
/
resistancemonitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
							<%--
  Created by IntelliJ IDEA.
  User: SamRichard
  Date: 2019/7/19
  Time: 14:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ page import="org.apache.commons.lang3.StringUtils" %>
<%
    String IMEI = (String)request.getParameter("IMEI");
    String strStartTime = (String)request.getParameter("starttime");
    String strEndTime = (String)request.getParameter("endtime");
    String strName = (String)request.getParameter("name");
    String strSrc = (String)request.getParameter("src");
%>
<!DOCTYPE html>
<html lang="ch">
<head>
    <title>阻力监控后台管理系统-设备管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="css/gfonts1.css" rel="stylesheet" type="text/css">
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/simple-line-icons.min.css" rel="stylesheet">
    <link href="css/bootstrap-editable.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- END GLOBAL MANDATORY STYLES -->
    <!-- BEGIN PAGE LEVEL STYLES -->
    <!-- BEGIN THEME STYLES -->
    <link href="css/components.css" id="style_components" rel="stylesheet">
    <link href="css/plugins.css" rel="stylesheet" type="text/css">
    <link href="css/layout.css" rel="stylesheet" type="text/css">
    <link href="css/default.css" rel="stylesheet" id="style_color">
    <link href="css/sweetalert.css" rel="stylesheet">
    <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <!-- END THEME STYLES -->
    <!-- js -->
    <!-- Load jQuery -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery-migrate.min.js" type="text/javascript"></script>
    <!-- IMPORTANT! Load jquery-ui-1.10.3.custom.min.js before bootstrap.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
    <script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="js/metronic.js"></script>
    <script src="js/scripts/layout.js"></script>
    <script src="js/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
    <script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
    <script src="js/jquery.blockui.min.js" type="text/javascript"></script>
    <script src="js/jquery.cokie.min.js" type="text/javascript"></script>
    <script src="js/jquery.uniform.min.js" type="text/javascript"></script>
    <script src="js/morris.min.js" type="text/javascript"></script>
    <script src="js/raphael-min.js" type="text/javascript"></script>
    <script src="js/jquery.sparkline.min.js" type="text/javascript"></script>
    <script src="js/highcharts/highcharts.js"></script>
    <script src="js/highcharts/boost.js"></script>
    <!-- END CORE PLUGINS -->
    <script src="js/sweetalert.min.js"></script>
    <script src="js/jBox.min.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/highcharts/no-data-to-display.js"></script>
    <!-- END PAGE LEVEL PLUGINS -->
    <!-- test -->
    <link rel="shortcut icon" href="favicon.ico">
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<!-- DOC: Apply "page-header-menu-fixed" class to set the mega menu fixed  -->
<!-- DOC: Apply "page-header-top-fixed" class to set the top menu fixed  -->
<body>
<!-- BEGIN PAGE CONTAINER -->
<div class="page-container">
    <!-- BEGIN PAGE HEAD -->
    <jsp:include page="frame_head.jsp" flush="false"></jsp:include>
    <!-- END PAGE HEAD -->
    <!-- BEGIN PAGE CONTENT -->
    <div class="page-content">
        <div class="container">
            <form class="row form-inline" id="t2" style="margin-top: 15px;margin-bottom: 14px;padding-left: 15px;">
                <fieldset>
                    <div class="col-md-3 form-group">
                        <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">
                        <div class="input-group date form_datetime" data-date="2016-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-3 form-group">
                        <button id="getdata" type="button" class="btn btn-primary btn-block">查看</button>
                    </div>
                    <div class="col-md-3 form-group">
                        <button type="button" class="btn btn-primary btn-block" onclick="JavaScript:history.go(-1)">返回</button>
                    </div>
                </fieldset>
            </form>
            <div id="temphumi" class="col-md-12"></div>
        </div>
    </div>
    <!-- END PAGE CONTENT -->
    <!-- END PAGE CONTENT -->
    <jsp:include page="frame_tail.jsp" flush="false"></jsp:include>
    <!-- END PAGE CONTAINER -->
</div>
<!--
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sweetalert2.min.js"></script>
-->
<!-- for IE support -->
<!--
<script src="js/es6-promise.auto.min.js"></script>
-->
<script>

    (function($){

        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth()+1,                 //月份
                "d+" : this.getDate(),                    //日
                "h+" : this.getHours(),                   //小时
                "m+" : this.getMinutes(),                 //分
                "s+" : this.getSeconds(),                 //秒
                "q+" : Math.floor((this.getMonth()+3)/3), //季度
                "S"  : this.getMilliseconds()             //毫秒
            };
            if(/(y+)/.test(fmt)) {
                fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
            }
            for(var k in o) {
                if(new RegExp("("+ k +")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                }
            }
            return fmt;
        }
    }(jQuery));

    jQuery(document).ready(function () {
        //Metronic.init(); // init metronic core components
        //Layout.init(); // init current layout

        // IE8 Fix: function.bind polyfill
        if (Metronic.isIE8() && !Function.prototype.bind) {
            Function.prototype.bind = function (oThis) {
                if (typeof this !== "function") {
                    // closest thing possible to the ECMAScript 5 internal IsCallable function
                    throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
                }

                var aArgs = Array.prototype.slice.call(arguments, 1),
                    fToBind = this,
                    fNOP = function () {
                    },
                    fBound = function () {
                        return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
                            aArgs.concat(Array.prototype.slice.call(arguments)));
                    };

                fNOP.prototype = this.prototype;
                fBound.prototype = new fNOP();

                return fBound;
            };
        }
    });

    //设置中文
    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: {
            zoomType: 'x',
        },
        boost: {
            useGPUTranslations: true
        },
        title: {
            text: '温湿度曲线图'
        },
        subtitle : {
            text: ""
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                //millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            },
        },
        tooltip: {
            shared: true,
            //crosshairs: true,
            positioner : function(width, height, point)
            {
                return {
                    x : 70,
                    y : 1
                }
            },
            dateTimeLabelFormats: {
                millisecond: '%H:%M:%S.%L',
                second: '%H:%M:%S',
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%Y-%m-%d',
                week: '%m-%d',
                month: '%Y-%m',
                year: '%Y'
            }
        },
        yAxis: [{
            title: {
                text: '温度值(℃)'
            }
        },{
            opposite:true,
            title: {
                text: '湿度值(RH)'
            }
        }],
        legend: {
            enabled: true
        },
        credits:{
            enabled:false, // 版权信息
            text:"杭州慧景科技股份有限公司",
            href:"http://www.hzhjkj.com/"
        },
        // animation：禁止动画
        // enableMouseTracking：禁止鼠标移到线上时，线条变粗
        plotOptions: {
            series: {
                animation: false,
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                },
                //enableMouseTracking: false,
                turboThreshold:100000
            }
        },// 优化性能损耗结束
        series: [],
    };

    var starttime = '<%=strStartTime%>';
    var endtime = '<%=strEndTime%>';

    var $startime = $("#starttime");
    var $endtime = $("#endtime");

    //初始函数
    $(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.getTime());
            date2.setHours(0);
            date2.setMinutes(0);
            date2.setSeconds(0);
            $startime.datetimepicker('update', date2);
            $endtime.datetimepicker('update', date);
            starttime = date2.toISOString();
            endtime = date.toISOString();
        };
    })

    var chart;
    //请求数据
    function queryData() {
        /*
        $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/usdeur.json&callback=?', function (data) {
            options.subtitle.text = (new Date(starttime)).toLocaleDateString();
            options.series[0].data = data;
            chart = new Highcharts.chart("resistance", options);
        });
        */
        var urladdr = "gettemphumi.cpp?starttime=" + encodeURI(starttime) + "&endtime=" + encodeURI(endtime) +
            "&IMEI=<%=IMEI%>&name=" + encodeURI("<%=strName%>") + "&timestamp=" + new Date().getTime();
        $.ajax({
            url: urladdr,
            type: "get",
            dataType: "json",
            success: function (data) {

                if (data === null || 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.subtitle.text = (new Date(starttime)).toLocaleDateString();
                var otext = "温湿度曲线图";
                if ('<%=strName%>' != 'undefined')
                    otext = '<%=strName%>_' + otext;
                options.title.text = otext;
                options.series = data.series;

                if (chart) {
                    chart = null;
                }
                chart = new Highcharts.chart("temphumi", options);
            }
        })
    }

    $("#getdata").click(function () {
        starttime = $("#dtp_input1").val();
        endtime = $("#dtp_input2").val();
        queryData();
    })

</script>
</body>
<!-- END BODY -->
</html>