<%@ 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>
    <meta name="description" content="">
    <meta name="author" content="">
    <!--加载地图文件-->
    <link rel="stylesheet" href="${ctx}/css/plugin/map/SearchInfoWindow_min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/map/bmap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.min.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/dataTables.bootstrap.css">
	<link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #rightContent label {
            max-width: none;
        }

        .dg-sub b.red {

            border-bottom: solid 1px #98af9f;
            font-weight: bold;
        }

        .dg-sub b {
            padding: 2px 5px;
            color: #666;
            font-weight: normal;
        }
        .left-menu {
            top:40px;
            left: 5px;
            width: 280px;

        }
        .nav > li > a {
            padding: 3px 15px;
        }
    </style>
</head>

<body class="pd10">
<div class="row" >
   <ul id="myTab" class="nav nav-tabs">
       <li class="active"><a href="#index" data-toggle="tab">导航</a></li>
       <li><a href="#tongji" id="tj1" data-toggle="tab">事件统计</a></li>
       <li><a href="#fenxi" id="fx1" data-toggle="tab">事件分析</a></li>
       <li><a href="#shebei" id="gl1" data-toggle="tab">运行情况</a></li>
       <li style="float: right;margin-right:10px;">
	       <button id="query" type="button" class="btn themeBGColor" onclick="showInfo()">
				<i class="glyphicon glyphicon-list-alt"></i>监测点详情
			</button>
       </li>
       <li style="float: right;"><a href="javascript:void(0)"  id="pointInfo" style="font:12px;"><font color="#ff0000">所选监测点:</font></a></li>
   </ul>
   <div id="myTabContent" class="tab-content">
       <div id="index" class="tab-pane fade in active">
           <div id="jcd-index">
			    <div id="middle_left" class="left-menu fl" style="color:#333;bottom:0;overflow:auto;">
			            	<div class="has-feedback" style="width:100%;">
						            <form class="form-inline" style="padding-top: 5px;padding-bottom: 5px;">
			        					<label style="font-size:12px;font-weight: 500;">分类方式:</label>
										<div class="form-group">
											<select id="datatype" style="width: 145px;padding-bottom: 3px;padding-top: 3px">
											<option selected value="0">电网拓扑</option>
											<option value="1">终端厂家</option>
											<option value="2">电压等级</option>
											<option value="3">干扰源类型</option>
											</select>
										</div>
									</form>
			        			</div>
					<div id="search">
						<input style="width: 200px; height: 25px;" id="search_value"
							type="text" value="" placeholder="请输入关键词" autocomplete="off"
							oninput="valueChange(this.value)" />
						<button type="button" id="serchB"
							class="btn-primary"
							onclick="javascript: searchNode(search_value.value)"
							style="height: 25px; width: 55px; border-radius: 4px; border: 1px solid;">
							<i class="glyphicon glyphicon-search"></i>搜索
						</button>
						<button type="button" id="resetB"
							class="btn-primary"
							onclick="resetTree()"
							style="padding: 0 5px; height: 25px; width: 55px; border-radius: 4px; border: 1px solid;display:none;">
							<i class="glyphicon glyphicon-refresh"></i>重置
						</button>
					</div>
			        <div style="width:280px;">
			            <div id="tree" class="ztree" style="overflow:hidden;margin-left: -8px;"></div>
			        </div>
			    </div>
               <div id="rightContent" style="position:absolute;left:285px;right:20px;top:40px;bottom:0;z-index:1;"></div>
           </div>
       </div>
       <div id="tongji" class="pr tab-pane fade in" style="z-index:9;">
			<iframe id="tj" src="" width="100%" scrolling-Y="yes"frameborder="0"></iframe>
       </div>
       <div id="fenxi" class="pr tab-pane fade in" style="z-index:9;">
           <iframe id="fx" src="" width="100%" scrolling-Y="yes" frameborder="0" ></iframe>
       </div>
       <div id="shebei" class="pr tab-pane fade in" style="z-index:9;">
           <iframe id="sb" src=""  width="100%"  scrolling-Y="yes" frameborder="0"></iframe>
       </div>
   </div>
</div>
<input type="hidden" value="${sessionScope.line_index}" id="lineIndex" name="lineIndex">
<input type="hidden" id="longitude" name="longitude">
<input type="hidden" id="latitude" name="latitude">
<input type="hidden" id="image" name="image">
<input type="hidden" id="lineName" name="lineName">
<input type="hidden" id="tjsrc" name="tjsrc">
<input type="hidden" id="tjclick" name="tjclick" value="on">
<input type="hidden" id="fxsrc" name="fxsrc">
<input type="hidden" id="fxclick" name="fxclick" value="on">
<input type="hidden" id="sbsrc" name="sbsrc">
<input type="hidden" id="sbclick" name="sbclick" value="on">
<%--Common Modal --%>
<script type="text/javascript" src="${ctx}/js/plugin/map/map_load.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/SearchInfoWindow_min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/TextIconOverlay.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/MarkerClusterer.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/GeoUtils_min.js"></script>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/jquery.dataTables.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/dataTables.bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/js/plugin/jquery.contextMenu.js"></script>
<script src="${ctx}/js/plugin/jquery.cleverTabs.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.core.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.exhide.js"></script>
<script src="${ctx}/js/plugin/ztree/jquery.ztree.exhide.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<%--引入echarts3D文件--%>
<script src="${ctx}/js/plugin/echarts3D/echarts.js"></script>
<script src="${ctx}/js/plugin/echarts3D/echarts-gl.min.js"></script>
<%--引入echarts文件--%>
<script src="${ctx}/js/plugin/echarts/echarts.js"></script>
<script src="${ctx}/js/plugin/jquery.gallery.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script type="text/javascript" src="${ctx}/jspJS/monitor/devicemap.js"></script>
<script type="text/javascript" src="${ctx}/jspJS/utils/positionOffset.js"></script>
<script src="${ctx}/js/color.js"></script>
<script src="${ctx}/js/plugin/sbtree/sbtree.js"></script>
<script type="text/javascript">
	var loadColor;

    $(document).ready(function (){
        var height=$(window).height()-38;
        $("#tj").css('min-height',height);
        $("#fx").css('min-height',height);
        $("#sb").css('min-height',height);

    	getMonitorType();

        var lineIndex=$("#lineIndex").val();
        lineIndex=filterXSS(lineIndex);
        if(lineIndex.length!=0){
            var tjsrc="tongji?line_index="+lineIndex;
            var fxsrc="analyze?line_index="+lineIndex;
            var sbsrc="manage?line_index="+lineIndex;
            $("#tjsrc").val(tjsrc);
            $("#fxsrc").val(fxsrc);
            $("#sbsrc").val(sbsrc);
        }
    })
</script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script type="text/javascript">
	    $('#myTab').find('li').click(function(){
	        var index = $(this).index();
	        (index)?$('#right-arr').hide():$('#right-arr').show();
	    });
	    $('#tj1').click(function() {
	    	var tjclick=$("#tjclick").val();
	    	if(tjclick == 'on'){
		    	var tjsrc=$("#tjsrc").val();
				tjsrc=filterXSS(tjsrc);
		    	document.getElementById("tj").src = tjsrc;
		    	$("#tjclick").val('off');
	    	}
	    })

	    $('#fx1').click(function() {
	    	var fxclick=$("#fxclick").val();
	    	if(fxclick == 'on'){
		    	var fxsrc=$("#fxsrc").val();
				fxsrc=filterXSS(fxsrc);
		    	document.getElementById("fx").src = fxsrc;
		    	$("#fxclick").val('off');
	    	}
	    })

	    $('#gl1').click(function() {
	    	var sbclick=$("#sbclick").val();
	    	if(sbclick == 'on'){
		    	var sbsrc=$("#sbsrc").val();
				sbsrc=filterXSS(sbsrc);
		    	document.getElementById("sb").src = sbsrc;
		    	$("#sbclick").val('off');
	    	}
	    })

        function showInfo() {
        	var lineIndex=$("#lineIndex").val();
            lineIndex=filterXSS(lineIndex);
        	var longitude=$("#longitude").val();
        	var latitude=$("#latitude").val();
        	var image=$("#image").val();
        	if(lineIndex.length==0){
        		alert("请先选择监测点！");
        	}else{
	            layer.open({
	                type: 2,
	                title: '监测点详情',
	                maxmin: false,
	                shadeClose: true, //点击遮罩关闭层
	                area: ['100%', '100%'],
	                content: 'showdevicedetail?lineIndex='+lineIndex+'&longitude='+longitude+'&latitude='+latitude+'&image='+image,
	                scrollbar: false
	            });
        	}
        }

	    function getMonitorType(){
	    	$.ajax({
	            type: "POST",
	            url: "/pqs9200/theme/getThemeInfo",
	            async: false,
	            data: {},
	            dataType: 'json',
	            success: function (data) {
	            	var name = data.body.name + "上报";
	            	loadColor = data.body.value;
	            	var option = $("<option value='4'>"
	    					+ name + "</option>");
	    			$('#datatype').append(option);
	            }
	        })
	    }
</script>
</body>
</html>
