first commit
This commit is contained in:
224
WebRoot/jsp/process/dataPatrolView.jsp
Normal file
224
WebRoot/jsp/process/dataPatrolView.jsp
Normal file
@ -0,0 +1,224 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user