<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<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/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/jquery/jquery-ui.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/datatimepicker/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrapSwitch/bootstrap-switch.min.css">
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
            background-color: #F9F9F9 !important;
        }

        .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: 0px;
            left: 5px;
            width:280px;
        }

        #tj {
            min-height: 550px;
        }

        @media screen and (min-width: 1000px) and (max-width: 1400px) and (max-height: 500px) {
            #tj {
                min-height: 500px;
            }
        }

        .nav > li > a {
            padding: 3px 15px;
        }

        .middlediv {
            background: #FFFFFF;
            float: left;
            position: absolute;
            left: 285px;
        }

        .middleleft {
            border: 1px solid rgb(0, 106, 106);
            margin-bottom: 1px;
            margin-top: 1px;
            float: left;
            width: 220px;
        }

        .imgarrow {
            float: left;
            margin-left: 0px;
            margin-top: 1px;
        }

        .mainright {
            float: left;
            margin-left: 1px;
            width: 300px;
        }

        #middle_tree {
        }
    </style>
</head>
<body class="pd5">
<div id="middle_tree" style="float:left;">
    <div id="middle_left" class="left-menu fl" style="color:#333;bottom:0;">
            	<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>
							<div class="form-group">
								<button type="button" id="export"
										class="btn-primary"
										onclick="javascript: getExport()"
										style="height: 25px; width: 55px; border-radius: 4px; border: 1px solid;">
									<i class="glyphicon glyphicon-share"></i>导出
								</button>
							</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:auto;margin-left: -8px;"></div>
        </div>
    </div>
</div>
<div class="row" style="background:#fff;">
    <!--中间操作区域-->
    <div id="middle_div" class="middlediv">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active"><a href="#zlpg" id="zlpg" data-toggle="tab">电能质量综合评估</a></li>
            <li><a href="#wtzb" id="wtzb" data-toggle="tab">稳态指标合格率分析</a></li>
            <li><a href="#yxzt" id="yxzt" data-toggle="tab">运行状态统计</a></li>
            <li><a href="#wtqs" id="wtqs" data-toggle="tab">稳态趋势分析</a></li>
            <shiro:hasPermission name="/pqs9000/business/monitor/#">
                <li><a href="#sssj" id="sssj" data-toggle="tab">实时数据</a></li>
            </shiro:hasPermission>
	        <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>
        <iframe class="mainright" id="main_right"
                name="main_right" frameborder="0"></iframe>
    </div>
</div>
<input type="hidden" id="lineIndex" name="lineIndex">
<input type="hidden" id="lineName" name="lineName">
<input type="hidden" id="middlesrc" name="middlesrc">
<%--Common Modal --%>
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/js/plugin/jquery/jquery.contextMenu.js"></script>
<script src="${ctx}/js/plugin/jquery/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.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${ctx}/js/plugin/bootstrapSwitch/bootstrap-switch.min.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/deviceTree.js"></script>
<script src="${ctx}/jspJS/utils/timeControl.js"></script>
<script src="${ctx}/jspJS/monitor/monitor.js"></script>
<script type="text/javascript">
    $('#myTab').find('li').click(function () {
        var index = $(this).index();
        (index) ? $('#right-arr').hide() : $('#right-arr').show();
    });

    $('#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');
        }
    })

	function getExport(){
    	let i;
		$.ajax({
			type: "get",
			url: "/pqs9000/device/exportDev",
			beforeSend: function () {
				i = ityzl_SHOW_LOAD_LAYER();
			},
			success: function (data) {
				if (data.code === 500) {
					layer.msg(data.message, {icon: 2, time: 2000})
				}else {
					window.location.href="/pqs9000/device/exportDevMain";
				}
				//***********关闭loading
				ityzl_CLOSE_LOAD_LAYER(i);
			}
		})
	}

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