634 lines
35 KiB
Plaintext
634 lines
35 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();
|
|
|
|
$.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> |