224 lines
12 KiB
Plaintext
224 lines
12 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8" %>
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
|
<%--<%String contextPath = request.getContextPath();%>--%>
|
|
|
|
<!DOCTYPE html>
|
|
<!-- <html lang="zh-CN"> -->
|
|
<!-- BEGIN HEAD -->
|
|
|
|
<head>
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
|
</title>
|
|
|
|
<!-- 引用页头及CSS页-->
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|
<style type="text/css">
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
let windowHeight = $(window).height();
|
|
$('#main').css("height", (windowHeight - 30) + "px");
|
|
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/process/dataPatrol/getTreeJson.do",
|
|
dataType: 'json',
|
|
data: {
|
|
unitId: unitId
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
// console.log(data)
|
|
let typeNum1 = 0;
|
|
let typeNum2 = 0;
|
|
let typeNum3 = 0;
|
|
let typeNum4 = 0;
|
|
let typeNum5 = 0;
|
|
let typeNum6 = 0;
|
|
if (data.length > 0) {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let mainContent = data[i];
|
|
// console.log(mainContent)
|
|
let mainName = mainContent.text;
|
|
let rows = 1;
|
|
if (mainContent.nodes != null) {
|
|
rows = Math.ceil((mainContent.nodes.length / 4));
|
|
}
|
|
let totalHeight = (rows + 1) * 50;
|
|
if (totalHeight < 200) {
|
|
totalHeight = 200;
|
|
}
|
|
|
|
let html = "<div style='float: left;width:100%;height: " + totalHeight + "px;margin-top: 15px;background: #ffffff;border-radius: 8px;' >";
|
|
html += "<div style='float: left;width:100%;height: 50px;padding-left: 20px;line-height: 50px;color: #40a3ff;font-size: 24px;' >" + mainName + "</div>";
|
|
|
|
if (mainContent.nodes != null) {
|
|
let detailContents = mainContent.nodes;
|
|
for (let j = 0; j < detailContents.length; j++) {
|
|
let detailContent = detailContents[j];
|
|
let detailName = detailContent.text;
|
|
let resultColor = "#ECF0F5";
|
|
if (detailContent.resultColor != null) {
|
|
resultColor = detailContent.resultColor;
|
|
}
|
|
let mpid = "";
|
|
if (detailContent.mpid != null) {
|
|
mpid = detailContent.mpid;
|
|
}
|
|
let value = "";
|
|
if (detailContent.value != null) {
|
|
value = detailContent.value;
|
|
}
|
|
let unit = "";
|
|
if (detailContent.unit != null) {
|
|
unit = detailContent.unit;
|
|
}
|
|
|
|
if (detailContent.resultType != null) {
|
|
let resultType = detailContent.resultType;
|
|
if (resultType == '0') {
|
|
typeNum1++;
|
|
} else if (resultType == '1') {
|
|
typeNum2++;
|
|
} else if (resultType == '2') {
|
|
typeNum3++;
|
|
} else if (resultType == '3') {
|
|
typeNum4++;
|
|
} else if (resultType == '4') {
|
|
typeNum5++;
|
|
} else if (resultType == '5') {
|
|
typeNum6++;
|
|
}
|
|
}
|
|
|
|
html += "<div style='float: left;width:25%;height: 50px;padding-left: 30px;padding-right: 10px;line-height: 50px;color: #bcbcbc;font-size: 24px;' >";
|
|
|
|
html += "<div style='float:left;width: 22px;padding-top: 14px;'>";
|
|
html += "<div style='float:left;width: 22px;height: 22px;background: " + resultColor + ";border-radius: 50%;'></div>";
|
|
html += "</div>";
|
|
html += "<div style='float:left;width: calc((100% - 52px)*0.5);height: 100%;padding-left: 10px;'>" + detailName + "</div>";
|
|
html += "<div style='float:left;width: calc((100% - 52px)*0.5);height: 100%;padding-left: 10px;'>" + value + ""+unit+"</div>";
|
|
html += "<div style='float:left;width: 30px;'>";
|
|
html += "<i style='cursor: pointer;' class='fa fa-line-chart' onclick=\"showCurve('" + mpid + "');\"></i>";
|
|
html += "</div>";
|
|
|
|
html += "</div>";
|
|
|
|
}
|
|
}
|
|
|
|
html += "</div>";
|
|
|
|
$('#content').append(html);
|
|
|
|
}
|
|
|
|
$('#typeNum1').html(typeNum1);
|
|
$('#typeNum2').html(typeNum2);
|
|
$('#typeNum3').html(typeNum3);
|
|
$('#typeNum4').html(typeNum4);
|
|
$('#typeNum5').html(typeNum5);
|
|
$('#typeNum6').html(typeNum6);
|
|
|
|
}
|
|
|
|
}
|
|
});
|
|
// getData("");
|
|
})
|
|
|
|
function showCurve(mpid) {
|
|
if (mpid != '') {
|
|
$.post(ext.contextPath + '/process/dataPatrol/showCurve.do', {
|
|
mpcode: mpid,
|
|
unitId: unitId
|
|
}, function (data) {
|
|
$("#subDiv").html(data);
|
|
openModal('curveModal');
|
|
});
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
|
<div class="wrapper">
|
|
<!-- 引用top -->
|
|
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
|
|
<!-- 菜单栏 -->
|
|
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
|
|
<div class="content-wrapper">
|
|
<!-- Main content -->
|
|
<section class="content container-fluid">
|
|
<div id="mainAlertdiv"></div>
|
|
<div id="subDiv"></div>
|
|
|
|
<div id="main">
|
|
<div style="float:left;width: 100%;height: 68px;background: #ffffff;border-radius: 8px;">
|
|
<div style="float:left;width: 130px;height: 100%;line-height: 68px;padding-left: 10px;">
|
|
<div style="float:left;width: 22px;padding-top: 23px;">
|
|
<div style="float:left;width: 22px;height: 22px;background: #00ff00;border-radius: 50%;"></div>
|
|
</div>
|
|
<div style="float:left;width: 98px;padding-left: 5px;">正常(<span id="typeNum1"></span>)</div>
|
|
</div>
|
|
<div style="float:left;width: 130px;height: 100%;line-height: 68px;padding-left: 10px;">
|
|
<div style="float:left;width: 22px;padding-top: 23px;">
|
|
<div style="float:left;width: 22px;height: 22px;background: #EA2208;border-radius: 50%;"></div>
|
|
</div>
|
|
<div style="float:left;width: 98px;padding-left: 5px;">超上限(<span id="typeNum2"></span>)</div>
|
|
</div>
|
|
<div style="float:left;width: 130px;height: 100%;line-height: 68px;padding-left: 10px;">
|
|
<div style="float:left;width: 22px;padding-top: 23px;">
|
|
<div style="float:left;width: 22px;height: 22px;background: #E5007F;border-radius: 50%;"></div>
|
|
</div>
|
|
<div style="float:left;width: 98px;padding-left: 5px;">超下限(<span id="typeNum3"></span>)</div>
|
|
</div>
|
|
<div style="float:left;width: 130px;height: 100%;line-height: 68px;padding-left: 10px;">
|
|
<div style="float:left;width: 22px;padding-top: 23px;">
|
|
<div style="float:left;width: 22px;height: 22px;background: #FEFE00;border-radius: 50%;"></div>
|
|
</div>
|
|
<div style="float:left;width: 98px;padding-left: 5px;">数据静止(<span id="typeNum4"></span>)</div>
|
|
</div>
|
|
<div style="float:left;width: 130px;height: 100%;line-height: 68px;padding-left: 10px;">
|
|
<div style="float:left;width: 22px;padding-top: 23px;">
|
|
<div style="float:left;width: 22px;height: 22px;background: #00B8EE;border-radius: 50%;"></div>
|
|
</div>
|
|
<div style="float:left;width: 98px;padding-left: 5px;">数据为0(<span id="typeNum5"></span>)</div>
|
|
</div>
|
|
<div style="float:left;width: 130px;height: 100%;line-height: 68px;padding-left: 10px;">
|
|
<div style="float:left;width: 22px;padding-top: 23px;">
|
|
<div style="float:left;width: 22px;height: 22px;background: #01FEFF;border-radius: 50%;"></div>
|
|
</div>
|
|
<div style="float:left;width: 98px;padding-left: 5px;">异常趋势(<span id="typeNum6"></span>)</div>
|
|
</div>
|
|
</div>
|
|
<div id="content" style="float:left;width: 100%;">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
|
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>e
|
|
</div>
|
|
</body>
|
|
<!-- 引入ChartJS-->
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/chart.js/dist/Chart.min.js"
|
|
charset="utf-8"></script>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/chart.js/dist/Chart.bundle.min.js"
|
|
charset="utf-8"></script>
|
|
<!-- 引入daterangepicker-->
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
|
charset="utf-8"></script>
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
|
charset="utf-8"></script>
|
|
</html> |