<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!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.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>工作台</title>
<link rel="stylesheet"	href="${ctx}/css/plugin/bootstrap/bootstrap.css">
<link rel="stylesheet"	href="${ctx}/css/plugin/animate/animate.min.css">
<link rel="stylesheet"	href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
<link rel="stylesheet"	href="${ctx}/css/basic.css">
	<style>
		.clearUi:after{
			content: "";
			display: block;
			clear: both;
		}
		.nav > li > a {
			padding: 3px 15px;
		}
	</style>
</head>
<body class="container-fluid">
	<div class="row">
		<div class="col-sm-12 col-md-12">
			<div class="clearUi displayNone">
				<div class="fr mt10 ml10  ">
					<form class="form-inline ">
						<label class="form-group">值类型选择：</label>
						<div class="form-group has-feedback">
							<select class="form-control" id="interval">
								<option value="one">一次值</option>
								<option value="two">二次值</option>
							</select>
						</div>
						<button type="button" class="btn themeBGColor" id="analysis">高级分析</button>
					</form>
				</div>
			</div>
			<ul id="myTab" class="nav nav-tabs">
				<li class="active"><a href="#instance" data-toggle="tab">瞬时波形</a></li>
				<li><a href="#RMSD"  data-toggle="tab">RMS波形</a></li>
			</ul>
            <div  class="tab-content">
                <div id="instance" class="tab-pane fade in active">
                    <div id="wave" class="mb10" ></div>
                </div>
                <div id="RMSD" class="tab-pane fade in">
                    <div id="rms"  ></div>
                </div>
            </div>
		</div>
		<%--Common Modal --%>
		<canvas id='canvasipal' width='2000' height='900' style='display: none'></canvas>  
	</div>
	<script src="${ctx}/js/plugin/jquery.min.js"></script>
	<script	src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
	<script src="${ctx}/js/plugin/highchart/highstock.js"></script>
	<script src="${ctx}/js/plugin/highchart/export.js"></script>
	<script src="${ctx}/js/plugin/highchart/offline-exporting.js"></script>
	<script src="${ctx}/js/plugin/layui/layer.js"></script>
	<script src="${ctx}/js/plugin/layui/layui.js"></script>
	<script src="${ctx}/jspJS/utils/loading.js"></script>
	<script src="${ctx}/js/color.js"></script>
	<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
    $(document).ready(function() {
        var height=$(window).height();
        height=height-90;
        var $wave=$("#wave");
        var $rms=$("#rms");
        $wave.eq(0).css("height",height);
        $rms.eq(0).css("height",height);
        var idea ;
        $.ajax({
            type : "POST",
            url : "/pqs9900/offdata/showWave",
            dataType : "json",
            beforeSend: function () {
                idea = ityzl_SHOW_LOAD_LAYER();
            },
            success : function(data) {
                if (data.code === 500) {
                    layer.msg("没有获取到该事件的波形文件", {
                        icon : 5,
                        time : 3000
                    });
                    initWaves(null);
                } else{
                    initWaves(data.body);
                }
                //***********关闭loading
                ityzl_CLOSE_LOAD_LAYER(idea);
            }
        });
    });


    //波形的总体数据
    var shunData,rmsData;
    //一次值事件波形
    var waveSA = [],waveSB = [],waveSC = [];
    //一次值RMS波形
    var RMSSA = [],RMSSB = [],RMSSC = [];

    //瞬时一次值最大最小值
    var instantS={};
    var RMSS={};
    //时间
    var time,type,severity,pt;

    //根据后台查询的数据，清洗数据
    function initWaves(wp) {
        if (null != wp) {
            shunData=wp.sunData;
            rmsData=wp.rmsData;

            var ismax,ismin,rsmax,rsmin;
            //给瞬时付个初始值
            if(shunData.length>0){
                ismax=shunData[0][1];
                ismin=shunData[0][1];
            }
            //给RMS付个初始值
            if(rmsData.length>0){
                rsmax=rmsData[0][1];
                rsmin=rmsData[0][1];
            }

            //瞬时值
            for (var shun=0;shun<shunData.length;shun++) {
                var shunSecondA=shunData[shun][1];
                var shunSecondB=shunData[shun][2];
                var shunSecondC=shunData[shun][3];
                waveSA.push([shunData[shun][0],shunSecondA]);
                waveSB.push([shunData[shun][0],shunSecondB]);
                waveSC.push([shunData[shun][0],shunSecondC]);
                ismax=getMax(ismax,shunSecondA,shunSecondB,shunSecondC);
                ismin=getMin(ismin,shunSecondA,shunSecondB,shunSecondC);
            }

            //RMS值
            for (var rms=0;rms<rmsData.length;rms++) {
                var rmsSecondA=rmsData[rms][1];
                var rmsSecondB=rmsData[rms][2];
                var rmsSecondC=rmsData[rms][3];
                RMSSA.push([rmsData[rms][0],rmsSecondA]);
                RMSSB.push([rmsData[rms][0],rmsSecondB]);
                RMSSC.push([rmsData[rms][0],rmsSecondC]);
                rsmax=getMax(rsmax,rmsSecondA,rmsSecondB,rmsSecondC);
                rsmin=getMin(rsmin,rmsSecondA,rmsSecondB,rmsSecondC);
            }

            //赋值对应的最大最小值
            instantS.max =ismax;
            instantS.min =ismin;
            RMSS.max =rsmax;
            RMSS.min =rsmin;

            waveSA = waveSA.slice(0);
            waveSB = waveSB.slice(0);
            waveSC = waveSC.slice(0);
            RMSSA = RMSSA.slice(0);
            RMSSB = RMSSB.slice(0);
            RMSSC = RMSSC.slice(0);
            time = wp.time;
			initWave( waveSA, waveSB, waveSC, time, RMSSA, RMSSB, RMSSC)
        } else {
            initWave( waveSA, waveSB, waveSC, time, RMSSA, RMSSB, RMSSC)
        }
    }

    //根据多个值的比较返回其中最大值
    function getMax(temp,tempA,tempB,tempC){
        temp=temp>tempA?temp:tempA;
        temp=temp>tempB?temp:tempB;
        temp=temp>tempC?temp:tempC;
        return temp;
    }
    //根据多个值的比较返回其中最小值
    function getMin(temp,tempA,tempB,tempC){
        temp=temp<tempA?temp:tempA;
        temp=temp<tempB?temp:tempB;
        temp=temp<tempC?temp:tempC;
        return temp;
    }
    //开始画图
    function initWave( adata, bdata, cdata, time, radata, rbdata, rcdata) {
        //设置暂降触发点的位置 一次值与二次值Y轴不同（不是计算出来的）
        var cu,title,unit,max,min;
        max = instantS.max;
        min = instantS.min;
        cu = [['0', min]];
        unit = 'V';
        //描述暂降事件的标题
        if (adata.length === 0) {
            cu = [];
            title='该事件暂无波形图';
        }else{
            // title=time ;
			title="";
        }

        //绘制瞬时波形图
		Highcharts.stockChart('wave', {
            title: {
                text: title,
                floating:true,
                style:{fontSize: "14px"}
            },
            chart: {
                type: 'spline',
            },
            tooltip: {
                borderColor:grey,
                backgroundColor:'rgba(105,105,105,0.7)',
                style:{
                    color:'white',
                    fontSize: "15px",
                    padding: 10,
                },
                formatter: function () {
                    var s = '<b>时刻：' + this.x + 'ms</b>';
                    $.each(this.points, function () {
                        s += '<br/>' + this.series.name + ': ' +
                            this.y.toFixed(2)+ unit;
                    });
                    return s;
                },
                shared: true
            },
            rangeSelector:{
                enabled:false,
            },
            //导航器各项属性设置
            navigator: {
                margin: 1,
                xAxis: {
                    labels: {
                        formatter: function () {
                            return this.value ;
                        }
                    }
                },
                series: [{
                    data: adata
                }, {
                    data: bdata
                }, {
                    data: cdata
                }]
            },
            scrollbar : {
                enabled : false
            },
            credits:false,
            colors:[yellow,green,red],
            xAxis:{
                title:{
                    text:'ms',
                    enabled:true,
                    align: 'high'
                },
                labels: {
                    formatter: function () {
                        return this.value ;
                    }
                }
            },
            yAxis: {
                title: {
                    align: 'high',
                    offset: 0,
                    text: unit,
                    rotation: 0,
                    y: -10
                },
                max:max,
                min:min,
                opposite:false
            },
            legend: {
                align: 'left',
                verticalAlign: 'top',
                enabled:true
            },
            series: [{
                marker: {
                    symbol: 'circle'
                },
                name: 'A相',
                data: adata
            }, {
                marker: {
                    symbol: 'circle'
                },
                name: 'B相',
                data: bdata
            }, {
                marker: {
                    symbol: 'circle'
                },
                name: 'C相',
                data: cdata
            }, {
                type:'scatter',
                name: '暂降触发点',
                marker: {
                    symbol: 'url(/pqs9900/images/point.png)',
                    width: 16,
                    height: 16
                },
                data: cu
            }
            ],
        });

        //绘制RMS波形
        var rmscu;
        rmscu = [['0',RMSS.min]];
        if (radata.length === 0) {
            rmscu = [];
            title='该事件暂无波形图';
        }
        Highcharts.stockChart('rms', {
            title: {
                text: title,
                floating:true,
                style:{fontSize: "14px"}
            },
            chart: {
                type: 'spline',
            },
            tooltip: {
                borderColor:grey,
                backgroundColor:'rgba(105,105,105,0.7)',
                style:{
                    color:'white',
                    fontSize: "15px",
                    padding: 10,
                },
                formatter: function () {
                    var s = '<b>时刻：' + this.x + 'ms</b>';
                    $.each(this.points, function () {
                        s += '<br/>' + this.series.name + ': ' +
                            this.y.toFixed(2)+ unit;
                    });
                    return s;
                },
                shared: true
            },
            rangeSelector:{
                enabled:false,
            },
            //导航器各项属性设置
            navigator: {
                margin: 1,
                xAxis: {
                    labels: {
                        formatter: function () {
                            return this.value ;
                        }
                    }
                },
                series: [{
                    data: radata
                }, {
                    data: rbdata
                }, {
                    data: rcdata
                }]

            },
            scrollbar : {
                enabled : false
            },
            credits:false,
            colors:[yellow,green,red],
            xAxis:{
                title:{
                    text:'ms',
                    enabled:true,
                    align: 'high'
                },
                labels: {
                    formatter: function () {
                        return this.value ;
                    }
                }
            },
            yAxis: {
                title: {
                    align: 'high',
                    offset: 0,
                    text: unit,
                    rotation: 0,
                    y: -10
                },
                opposite:false
            },
            legend: {
                align: 'left',
                verticalAlign: 'top',
                enabled:true
            },
            series: [{
                marker: {
                    symbol: 'circle'
                },
                name: 'A相',
                data: radata
            }, {
                marker: {
                    symbol: 'circle'
                },
                name: 'B相',
                data: rbdata
            }, {
                marker: {
                    symbol: 'circle'
                },
                name: 'C相',
                data: rcdata
            }, {
                type:'scatter',
                name: '暂降触发点',
                marker: {
                    symbol: 'url(/pqs9900/images/point.png)',
                    width: 16,
                    height: 16
                },
                data: rmscu
            }
            ],
        });
    }
</script>
</body>
</html>