first commit
This commit is contained in:
634
WebRoot/jsp/process/dataPatrolNewView.jsp
Normal file
634
WebRoot/jsp/process/dataPatrolNewView.jsp
Normal file
@ -0,0 +1,634 @@
|
||||
<%@ 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();
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + "/process/dataPatrol/getResultDataNewTime.do",
|
||||
// dataType: 'json',
|
||||
data: {
|
||||
unitId: unitId
|
||||
},
|
||||
async: true,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
// console.log(data)
|
||||
$('#newRTime').text(data);
|
||||
}
|
||||
});
|
||||
|
||||
// $('#main').css("height", (windowHeight - 30) + "px");
|
||||
// let nowWidth = $("#main").width();
|
||||
// let widthNum = parseInt(nowWidth / 340);
|
||||
// let widthDiff = nowWidth - widthNum * 340;
|
||||
// let widthDiffPx = widthDiff / (widthNum - 1);
|
||||
|
||||
$.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;//异常趋势
|
||||
|
||||
if (data.length > 0) {
|
||||
|
||||
let barNum = 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 ckMStyle = "";
|
||||
// if (Number(barNum) > (widthNum - 1)) {
|
||||
// barNum = 0;
|
||||
// }
|
||||
// if (barNum != 0) {
|
||||
// ckMStyle += "margin-left:" + widthDiffPx + "px;";
|
||||
// }
|
||||
// if (Number(barNum) == (widthNum - 1)) {
|
||||
// barNum = 0;
|
||||
// } else {
|
||||
// barNum++;
|
||||
// }
|
||||
|
||||
|
||||
// let widthPx = 340;
|
||||
// let divWidthNum = 1;
|
||||
let detailContentHtml = "";
|
||||
let rows = 1;
|
||||
if (mainContent.nodes != null) {
|
||||
rows = Math.ceil((mainContent.nodes.length / 4));
|
||||
}
|
||||
let totalHeight = (rows + 1) * 50;
|
||||
if (totalHeight < 200) {
|
||||
totalHeight = 200;
|
||||
}
|
||||
|
||||
detailContentHtml += "<div style='float: left;width:100%;height: " + totalHeight + "px;margin-top: 15px;background: #ffffff;border-radius: 8px;' >";
|
||||
// detailContentHtml += "<div style='float: left;width:100%;height: 50px;padding-left: 20px;line-height: 50px;color: #40a3ff;font-size: 24px;' >" + mainName + "</div>";
|
||||
detailContentHtml += "<div style='float: left;width: 100%;height:4px;border:1px solid #d7dbe2;background: #5c9fd1;border-radius: 4px 4px 0px 0px;'></div>";
|
||||
detailContentHtml += "<div style='float: left;width: 100%;height:40px;border-bottom:1px solid #d7dbe2;line-height: 40px;font-size: 16px;padding-left: 20px;'>" + 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 = "#00FF80";
|
||||
// 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++;
|
||||
resultColor = "#00FF80";
|
||||
} else if (resultType == '1') {
|
||||
typeNum2++;
|
||||
resultColor = "#C40000";
|
||||
} else if (resultType == '2') {
|
||||
typeNum3++;
|
||||
resultColor = "#8F4300";
|
||||
} else if (resultType == '3') {
|
||||
typeNum4++;
|
||||
resultColor = "#FF6F00";
|
||||
} else if (resultType == '4') {
|
||||
typeNum4++;
|
||||
resultColor = "#FF6F00";
|
||||
} else if (resultType == '5') {
|
||||
typeNum5++;
|
||||
resultColor = "#FFCC00";
|
||||
}
|
||||
}
|
||||
|
||||
detailContentHtml += "<div style='float: left;width:25%;height: 50px;padding-left: 30px;padding-right: 10px;line-height: 50px;color: #bcbcbc;font-size: 24px;' >";
|
||||
|
||||
detailContentHtml += "<div style='float:left;width: 22px;padding-top: 14px;'>";
|
||||
detailContentHtml += "<div style='float:left;width: 22px;height: 22px;background: " + resultColor + ";border-radius: 50%;'></div>";
|
||||
detailContentHtml += "</div>";
|
||||
detailContentHtml += "<div style='float:left;width: calc((100% - 52px)*0.5);height: 100%;padding-left: 10px;'>" + detailName + "</div>";
|
||||
detailContentHtml += "<div style='float:left;width: calc((100% - 52px)*0.5);height: 100%;padding-left: 10px;'>" + value + "" + unit + "</div>";
|
||||
detailContentHtml += "<div style='float:left;width: 30px;'>";
|
||||
detailContentHtml += "<i style='cursor: pointer;' class='fa fa-line-chart' onclick=\"showCurve('" + mpid + "');\"></i>";
|
||||
detailContentHtml += "</div>";
|
||||
|
||||
detailContentHtml += "</div>";
|
||||
|
||||
|
||||
<%--if ((detailContents.length % 7) == 0) {--%>
|
||||
<%-- divWidthNum = parseInt(detailContents.length / 7);--%>
|
||||
<%--} else {--%>
|
||||
<%-- divWidthNum = parseInt(detailContents.length / 7) + 1;--%>
|
||||
<%--}--%>
|
||||
<%--if (detailContents.length > 7) {--%>
|
||||
<%-- widthPx = 340 * divWidthNum + widthDiffPx;--%>
|
||||
<%-- barNum++;--%>
|
||||
<%--}--%>
|
||||
|
||||
<%--for (let n = 0; n < divWidthNum; n++) {--%>
|
||||
<%-- detailContentHtml += "<div style='float: left;width: " + (100 / divWidthNum) + "%;height:100%;'>";--%>
|
||||
<%-- let jNum = 7;--%>
|
||||
<%-- if (n == (divWidthNum - 1)) {--%>
|
||||
<%-- jNum = detailContents.length - n * 7;--%>
|
||||
<%-- }--%>
|
||||
<%-- for (let j = n * 7; j < n * 7 + jNum; j++) {--%>
|
||||
<%-- let detailContent = detailContents[j];--%>
|
||||
<%-- let detailName = detailContent.text;--%>
|
||||
<%-- let value = detailContent.value;--%>
|
||||
<%-- let unit = " ";--%>
|
||||
<%-- if (detailContent.unit != null) {--%>
|
||||
<%-- unit = detailContent.unit;--%>
|
||||
<%-- }--%>
|
||||
<%-- // let resultColor = "#ECF0F5";--%>
|
||||
<%-- // if (detailContent.resultColor != null) {--%>
|
||||
<%-- // resultColor = detailContent.resultColor;--%>
|
||||
<%-- // }--%>
|
||||
<%-- let mpid = "";--%>
|
||||
<%-- if (detailContent.mpid != null) {--%>
|
||||
<%-- mpid = detailContent.mpid;--%>
|
||||
<%-- }--%>
|
||||
<%-- let valueStyle = "";--%>
|
||||
<%-- if (detailContent.resultType != null) {--%>
|
||||
<%-- let resultType = detailContent.resultType;--%>
|
||||
<%-- if (resultType == '0') {--%>
|
||||
<%-- typeNum1++;--%>
|
||||
<%-- } else if (resultType == '1') {--%>
|
||||
<%-- valueStyle = "color: #FFFFFF;background-color: #C40000;border: 1px solid #ff0000;border-radius: 4px;";--%>
|
||||
<%-- typeNum2++;--%>
|
||||
<%-- } else if (resultType == '2') {--%>
|
||||
<%-- valueStyle = "color: #FFFFFF;background-color: #8F4300;border: 1px solid #9E3F00;border-radius: 4px;";--%>
|
||||
<%-- typeNum3++;--%>
|
||||
<%-- } else if (resultType == '3') {--%>
|
||||
<%-- valueStyle = "color: #FFFFFF;background-color: #FF6F00;border: 1px solid #F69C00;border-radius: 4px;";--%>
|
||||
<%-- typeNum4++;--%>
|
||||
<%-- } else if (resultType == '4') {--%>
|
||||
<%-- valueStyle = "color: #FFFFFF;background-color: #FF6F00;border: 1px solid #F69C00;border-radius: 4px;";--%>
|
||||
<%-- typeNum4++;--%>
|
||||
<%-- } else if (resultType == '5') {--%>
|
||||
<%-- valueStyle = "color: #FFFFFF;background-color: #FFCC00;border: 1px solid #FFDD00;border-radius: 4px;";--%>
|
||||
<%-- typeNum5++;--%>
|
||||
<%-- }--%>
|
||||
<%-- }--%>
|
||||
|
||||
<%-- detailContentHtml += "<div style='float: left;width: 100%;height:42px;padding-left: 15px;padding-right: 15px;text-align: center;line-height: 42px;'>";--%>
|
||||
<%-- detailContentHtml += "<div title='" + detailName + "' style='float: left;width: 110px;height:100%;color: #B9B9B9;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;'>" + detailName + "</div>";--%>
|
||||
<%-- detailContentHtml += "<div title='" + value + "' style='float: left;width: 90px;height:100%;padding: 5px 5px 5px 5px;'><div style='float: left;width: 100%;height:100%;line-height: 32px;font-weight: 700;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;" + valueStyle + "'>" + value + "</div></div>";--%>
|
||||
<%-- detailContentHtml += "<div style='float: left;width: 50px;height:100%;color: #B9B9B9;'>" + unit + "</div>";--%>
|
||||
<%-- detailContentHtml += "<div onclick=\"showCurve('" + mpid + "');\" style='float: left;width: 20px;height:20px;margin-top:11px;margin-left:5px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/curve.png);background-size: 100% 100%;cursor: pointer'></div>";--%>
|
||||
<%-- detailContentHtml += "<div style='float: left;width: 20px;height:20px;margin-top:11px;margin-left:5px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/limite.png);background-size: 100% 100%;cursor: pointer;'></div>";--%>
|
||||
<%-- detailContentHtml += "</div>";--%>
|
||||
|
||||
<%-- }--%>
|
||||
<%-- detailContentHtml += "</div>";--%>
|
||||
<%--}--%>
|
||||
}
|
||||
}
|
||||
|
||||
detailContentHtml += "</div>";
|
||||
$('#content').append(detailContentHtml);
|
||||
|
||||
// let ckhtml = "";
|
||||
|
||||
// ckhtml += "<div style='float: left;width:" + widthPx + "px;height: 352px;border:1px solid #d7dbe2;background: #ffffff;border-radius: 4px;margin-top: 10px;" + ckMStyle + "'>";
|
||||
// ckhtml += "<div style='float: left;width: 100%;height:4px;border:1px solid #d7dbe2;background: #5c9fd1;border-radius: 4px 4px 0px 0px;'></div>";
|
||||
// ckhtml += "<div style='float: left;width: 100%;height:40px;border-bottom:1px solid #d7dbe2;line-height: 40px;font-size: 16px;padding-left: 20px;'>" + mainName + "</div>";
|
||||
// ckhtml += "" + detailContentHtml + "";
|
||||
// ckhtml += "</div>";
|
||||
|
||||
// $('#content').append(ckhtml);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$('#typeNum2').text(typeNum2);
|
||||
$('#typeNum3').text(typeNum3);
|
||||
$('#typeNum4').text(typeNum4);
|
||||
$('#typeNum5').text(typeNum5);
|
||||
|
||||
let nowTime = getNowTime();
|
||||
let lastMonth = getPlusTime(nowTime, "-1", "month");
|
||||
|
||||
let nowMonth_typeNum2 = 0;
|
||||
let nowMonth_typeNum3 = 0;
|
||||
let nowMonth_typeNum4 = 0;
|
||||
let nowMonth_typeNum5 = 0;
|
||||
let lastMonth_typeNum2 = 0;
|
||||
let lastMonth_typeNum3 = 0;
|
||||
let lastMonth_typeNum4 = 0;
|
||||
let lastMonth_typeNum5 = 0;
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + "/process/dataPatrol/getViewMonthData.do",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
unitId: unitId,
|
||||
inDate: nowTime
|
||||
},
|
||||
async: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
// console.log(data)
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let content = data[i];
|
||||
if (content.result == '1') {
|
||||
nowMonth_typeNum2 = content.num;
|
||||
} else if (content.result == '2') {
|
||||
nowMonth_typeNum3 = content.num;
|
||||
} else if (content.result == '3') {
|
||||
nowMonth_typeNum4 += content.num;
|
||||
} else if (content.result == '4') {
|
||||
nowMonth_typeNum4 += content.num;
|
||||
} else if (content.result == '5') {
|
||||
nowMonth_typeNum5 = content.num;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + "/process/dataPatrol/getViewMonthData.do",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
unitId: unitId,
|
||||
inDate: lastMonth
|
||||
},
|
||||
async: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
// console.log(data)
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
let content = data[i];
|
||||
if (content.result == '1') {
|
||||
lastMonth_typeNum2 = content.num;
|
||||
} else if (content.result == '2') {
|
||||
lastMonth_typeNum3 = content.num;
|
||||
} else if (content.result == '3') {
|
||||
lastMonth_typeNum4 += content.num;
|
||||
} else if (content.result == '4') {
|
||||
lastMonth_typeNum4 += content.num;
|
||||
} else if (content.result == '5') {
|
||||
lastMonth_typeNum5 = content.num;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + "/process/dataPatrol/getViewYearData.do",
|
||||
dataType: 'json',
|
||||
data: {
|
||||
unitId: unitId,
|
||||
inDate: nowTime
|
||||
},
|
||||
async: true,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
// console.log(data)
|
||||
let out1 = data[0];
|
||||
let out2 = data[1];
|
||||
let out3 = data[2];
|
||||
let out4 = data[3];
|
||||
let xdata = data[4];
|
||||
getChart2(out1, out2, out3, out4,xdata);
|
||||
}
|
||||
});
|
||||
|
||||
$('#nowMonth_typeNum2').text(nowMonth_typeNum2 + "次");
|
||||
$('#nowMonth_typeNum3').text(nowMonth_typeNum3 + "次");
|
||||
$('#nowMonth_typeNum4').text(nowMonth_typeNum4 + "次");
|
||||
$('#nowMonth_typeNum5').text(nowMonth_typeNum5 + "次");
|
||||
$('#lastMonth_typeNum2').text(lastMonth_typeNum2 + "次");
|
||||
$('#lastMonth_typeNum3').text(lastMonth_typeNum3 + "次");
|
||||
$('#lastMonth_typeNum4').text(lastMonth_typeNum4 + "次");
|
||||
$('#lastMonth_typeNum5').text(lastMonth_typeNum5 + "次");
|
||||
|
||||
getChart1(nowMonth_typeNum2, nowMonth_typeNum3, nowMonth_typeNum4, nowMonth_typeNum5);
|
||||
getChart2();
|
||||
|
||||
}
|
||||
});
|
||||
// getData("");
|
||||
})
|
||||
|
||||
function getChart1(nowMonth_typeNum2, nowMonth_typeNum3, nowMonth_typeNum4, nowMonth_typeNum5) {
|
||||
let myChart1 = echarts.init(document.getElementById("chart1"));
|
||||
let option1 = {
|
||||
color: ['#C40000', '#8F4300', '#FF6F00', '#FFCC00'],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold'
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: nowMonth_typeNum2, name: '数据中断'},
|
||||
{value: nowMonth_typeNum3, name: '数据停滞'},
|
||||
{value: nowMonth_typeNum4, name: '数据超限'},
|
||||
{value: nowMonth_typeNum5, name: '异常趋势'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart1.setOption(option1, true);
|
||||
}
|
||||
|
||||
function getChart2(out1, out2, out3, out4,xdata) {
|
||||
let myChart2 = echarts.init(document.getElementById("chart2"));
|
||||
let option2 = {
|
||||
color: ['#C40000', '#8F4300', '#FF6F00', '#FFCC00'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['数据中断', '数据停滞', '数据超限', '异常趋势'],
|
||||
bottom: '0px',
|
||||
left: 'center'
|
||||
},
|
||||
grid: {
|
||||
top: '10px',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '25px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// prettier-ignore
|
||||
data: xdata
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '数据中断',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
data: out1
|
||||
},
|
||||
{
|
||||
name: '数据停滞',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
data: out2
|
||||
}, {
|
||||
name: '数据超限',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
data: out3
|
||||
},
|
||||
{
|
||||
name: '异常趋势',
|
||||
type: 'bar',
|
||||
stack: 'one',
|
||||
barWidth: 30,
|
||||
data: out4
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart2.setOption(option2, true);
|
||||
}
|
||||
|
||||
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"
|
||||
style="background-size: 100% 100%;">
|
||||
<!-- 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: 60px;background-color: #FFFFFF;border: 1px solid #d7dbe2;border-radius: 4px;padding-left: 50px;">
|
||||
<div style="float: left;width: 230px;height:100%;line-height: 60px;">
|
||||
<span style="float:left;color: #B9B9B9;">最新刷新时间:</span>
|
||||
<span id="newRTime"
|
||||
style="float:left;color: #000000;font-weight: 700;margin-left: 15px;"></span>
|
||||
</div>
|
||||
<div style="float: left;width: 140px;height:100%;line-height: 60px;">
|
||||
<span style="float:left;color: #B9B9B9;">刷新频率：</span>
|
||||
<span style="float:left;color: #000000;font-weight: 700;margin-left: 15px;">5min</span>
|
||||
</div>
|
||||
<div style="float: left;height:100%;line-height: 60px;margin-left: 20px;">
|
||||
<span style="float:left;color: #B9B9B9;">图例：</span>
|
||||
<%-- <span style="float:left;color: #000000;font-weight: 700;margin-left: 15px;">数据正常</span>//#00FF80--%>
|
||||
<div style="float: left;width:80px;height:36px;margin-top: 12px;margin-left: 20px;background: #00FF80;border: 1px solid #00FF80;border-radius: 4px;padding-left: 12px;">
|
||||
<span style="float:left;color: #ffffff;height: 100%;line-height: 34px;">数据正常</span>
|
||||
</div>
|
||||
<div style="float: left;width:110px;height:36px;margin-top: 12px;margin-left: 20px;background: #c40000;border: 1px solid #ff0000;border-radius: 4px;padding-left: 12px;">
|
||||
<span style="float:left;color: #ffffff;height: 100%;line-height: 34px;">数据中断：</span>
|
||||
<span id="typeNum2"
|
||||
style="float:left;color: #ffffff;height: 100%;line-height: 34px;">0</span>
|
||||
</div>
|
||||
<div style="float: left;width:110px;height:36px;margin-top: 12px;margin-left: 20px;background: #8F4300;border: 1px solid #9E3F00;border-radius: 4px;padding-left: 12px;">
|
||||
<span style="float:left;color: #ffffff;height: 100%;line-height: 34px;">数据停滞：</span>
|
||||
<span id="typeNum3"
|
||||
style="float:left;color: #ffffff;height: 100%;line-height: 34px;">0</span>
|
||||
</div>
|
||||
<div style="float: left;width:110px;height:36px;margin-top: 12px;margin-left: 20px;background: #FF6F00;border: 1px solid #F69C00;border-radius: 4px;padding-left: 12px;">
|
||||
<span style="float:left;color: #ffffff;height: 100%;line-height: 34px;">数据超限：</span>
|
||||
<span id="typeNum4"
|
||||
style="float:left;color: #ffffff;height: 100%;line-height: 34px;">0</span>
|
||||
</div>
|
||||
<div style="float: left;width:110px;height:36px;margin-top: 12px;margin-left: 20px;background: #FFCC00;border: 1px solid #FFDD00;border-radius: 4px;padding-left: 12px;">
|
||||
<span style="float:left;color: #ffffff;height: 100%;line-height: 34px;">异常趋势：</span>
|
||||
<span id="typeNum5"
|
||||
style="float:left;color: #ffffff;height: 100%;line-height: 34px;">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: 10px;"></div>
|
||||
<div id="content" style="float: left;width:100%;">
|
||||
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height: 10px;"></div>
|
||||
<div style="float: left;width:100%;height: 400px;border:1px solid #d7dbe2;background: #ffffff;border-radius: 4px;">
|
||||
<div style="float: left;width: 100%;height:4px;border:1px solid #d7dbe2;background: #5c9fd1;border-radius: 4px 4px 0px 0px;"></div>
|
||||
<div style="float: left;width: 100%;height:40px;border-bottom:1px solid #d7dbe2;line-height: 40px;font-size: 16px;padding-left: 20px;">
|
||||
数据巡视异常统计
|
||||
</div>
|
||||
<div style="float: left;width: 100%;height:calc(100% - 44px);padding: 20px;">
|
||||
<div style="float: left;width: 280px;height:100%;">
|
||||
<table style="width: 100%;height: 100%;text-align: center;">
|
||||
<tr>
|
||||
<td width="120px" style="color: #A0A0A0;">时间范围:</td>
|
||||
<td width="80px" style="color: #A0A0A0;">本月</td>
|
||||
<td width="80px" style="color: #A0A0A0;">上月</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 20px;">
|
||||
<div style="width: 80px;height: 36px;color: #FFFFFF;background-color: #C40000;border: 1px solid #ff0000;border-radius: 4px;text-align: center;line-height: 36px;">
|
||||
数据中断
|
||||
</div>
|
||||
</td>
|
||||
<td id="nowMonth_typeNum2"></td>
|
||||
<td id="lastMonth_typeNum2"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 20px;">
|
||||
<div style="width: 80px;height: 36px;color: #FFFFFF;background-color: #8F4300;border: 1px solid #9E3F00;border-radius: 4px;text-align: center;line-height: 36px;">
|
||||
数据停滞
|
||||
</div>
|
||||
</td>
|
||||
<td id="nowMonth_typeNum3"></td>
|
||||
<td id="lastMonth_typeNum3"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 20px;">
|
||||
<div style="width: 80px;height: 36px;color: #FFFFFF;background-color: #FF6F00;border: 1px solid #F69C00;border-radius: 4px;text-align: center;line-height: 36px;">
|
||||
数据超限
|
||||
</div>
|
||||
</td>
|
||||
<td id="nowMonth_typeNum4"></td>
|
||||
<td id="lastMonth_typeNum4"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="padding-left: 20px;">
|
||||
<div style="width: 80px;height: 36px;color: #FFFFFF;background-color: #FFCC00;border: 1px solid #FFDD00;border-radius: 4px;text-align: center;line-height: 36px;">
|
||||
异常趋势
|
||||
</div>
|
||||
</td>
|
||||
<td id="nowMonth_typeNum5"></td>
|
||||
<td id="lastMonth_typeNum5"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div id="chart1" style="float: left;width: 400px;height:100%;"></div>
|
||||
<div id="chart2" style="float: left;width: calc(100% - 680px);height:100%;"></div>
|
||||
</div>
|
||||
</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