425 lines
16 KiB
Plaintext
425 lines
16 KiB
Plaintext
<%@ page contentType="text/html;charset=UTF-8" %>
|
||
<%@ include file="/webpage/include/taglib.jsp"%>
|
||
<html>
|
||
<head>
|
||
<title>磐石市供热信息化平台 - 后台展示页</title>
|
||
<link href="${ctxStatic}/common/jeeplus.css" type="text/css" rel="stylesheet" />
|
||
<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
|
||
<script src="${ctxStatic}/common/jeeplus.js" type="text/javascript"></script>
|
||
<script src="${ctxStatic}/echarts-2.2.7/build/dist/echarts-all.js"></script>
|
||
<style>
|
||
body{
|
||
font-family: "open sans", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
|
||
font-size: 13px;
|
||
}
|
||
a {
|
||
color: #23B1BB;
|
||
text-decoration: none;
|
||
}
|
||
table,tbody,tfoot,thead,tr,th,td {
|
||
margin:0;
|
||
padding:0;
|
||
outline:0;
|
||
font-size:100%;
|
||
vertical-align:baseline;
|
||
background:#fff;
|
||
border-collapse:collapse;
|
||
border-spacing:0;
|
||
border-top:0px;
|
||
}
|
||
.tablebox1 {
|
||
width:50%;
|
||
height:250px;
|
||
overflow:hidden;
|
||
}
|
||
.tablebox1 table {
|
||
width:100%;
|
||
}
|
||
.tablebox1 table th,.tablebox1 table td {
|
||
font-size:12px;
|
||
text-align:center;
|
||
line-height:36px;
|
||
}
|
||
.tablebox1 table th {
|
||
background-color:#FFFFFF;
|
||
}
|
||
.tablebox1 table td img {
|
||
display:inline-block;
|
||
vertical-align:middle;
|
||
}
|
||
.tablebox1 table tbody tr:nth-child(even) {
|
||
background-color:#fff;
|
||
}
|
||
.tablebox1.table_md table td,.tablebox1.table_md table th {
|
||
line-height:40px;
|
||
}
|
||
.tablebox2 {
|
||
width:100%;
|
||
height:452px;
|
||
overflow:hidden;
|
||
}
|
||
.tablebox2 table {
|
||
width:100%;
|
||
}
|
||
.tablebox2 table th,.tablebox2 table td {
|
||
font-size:12px;
|
||
text-align:center;
|
||
line-height:36px;
|
||
}
|
||
.tablebox2 table th {
|
||
background-color:#FFFFFF;
|
||
}
|
||
.tablebox2 table td img {
|
||
display:inline-block;
|
||
vertical-align:middle;
|
||
}
|
||
.tablebox2 table tbody tr:nth-child(even) {
|
||
background-color:#fff;
|
||
}
|
||
.tablebox2.table_md table td,.tablebox2.table_md table th {
|
||
line-height:40px;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
function reload(){
|
||
window.location.reload();
|
||
}
|
||
setInterval(reload, 1000 * 60 * 3);
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="tablebox1" style="float: left; background: white;">
|
||
<table id="tableId2" cellspacing="0" cellpadding="0" border="0">
|
||
<thead>
|
||
<tr>
|
||
<th colspan="3" style="text-align:left;"> 告警数据</th>
|
||
<th colspan="2">一次网</th>
|
||
<th colspan="2">二次网</th>
|
||
</tr>
|
||
<tr>
|
||
<th style="border-bottom:1px solid #e7eaec">序号</th>
|
||
<th style="border-bottom:1px solid #e7eaec">热源/换热站</th>
|
||
<th style="border-bottom:1px solid #e7eaec">数据时间</th>
|
||
<th style="border-bottom:1px solid #e7eaec">供水温度</th>
|
||
<th style="border-bottom:1px solid #e7eaec">回水温度</th>
|
||
<th style="border-bottom:1px solid #e7eaec">供水温度</th>
|
||
<th style="border-bottom:1px solid #e7eaec">回水温度</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<c:forEach var="data" items="${alarm}" varStatus="state">
|
||
<tr>
|
||
<td style="border-top:1px solid #e7eaec">${state.count}</td>
|
||
<td style="border-top:1px solid #e7eaec">
|
||
<a href="JavaScript:openDialogView('查看管网温压监测数据', '${ctx}/heatanalysis/history/form?id=${data.id}&view002=${data.view002}&view004=${data.view004}&datatime=<fmt:formatDate value="${data.datatime}" pattern="yyyy-MM-dd HH:mm:ss"/>','800px', '500px')" title="查看">
|
||
${data.station}
|
||
</a>
|
||
</td>
|
||
<td style="border-top:1px solid #e7eaec"><fmt:formatDate value="${data.datatime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
|
||
<td style="border-top:1px solid #e7eaec">${data.view005}</td>
|
||
<td style="border-top:1px solid #e7eaec">${data.view006}</td>
|
||
<td style="border-top:1px solid #e7eaec">${data.view009}</td>
|
||
<td style="border-top:1px solid #e7eaec">${data.view010}</td>
|
||
</tr>
|
||
</c:forEach>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div id="main" style="width:49%; height:250px; overflow:hidden; float:right;"></div>
|
||
<div class="tablebox2" style="margin-top:10px; float:left; background: white;">
|
||
<table id="tableId" cellspacing="0" cellpadding="0">
|
||
<thead>
|
||
<tr>
|
||
<th colspan="5" style="text-align:left"> 实时数据</th>
|
||
<th colspan="4">一次网</th>
|
||
<th colspan="4">二次网</th>
|
||
</tr>
|
||
<tr>
|
||
<th style="border-bottom:1px solid #e7eaec">序号</th>
|
||
<th style="border-bottom:1px solid #e7eaec">热力公司</th>
|
||
<th style="border-bottom:1px solid #e7eaec">热源名称</th>
|
||
<th style="border-bottom:1px solid #e7eaec">换热站名称</th>
|
||
<th style="border-bottom:1px solid #e7eaec">数据时间</th>
|
||
<th style="border-bottom:1px solid #e7eaec">供水温度</th>
|
||
<th style="border-bottom:1px solid #e7eaec">回水温度</th>
|
||
<th style="border-bottom:1px solid #e7eaec">供水压力</th>
|
||
<th style="border-bottom:1px solid #e7eaec">回水压力</th>
|
||
<th style="border-bottom:1px solid #e7eaec">供水温度</th>
|
||
<th style="border-bottom:1px solid #e7eaec">回水温度</th>
|
||
<th style="border-bottom:1px solid #e7eaec">供水压力</th>
|
||
<th style="border-bottom:1px solid #e7eaec">回水压力</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<c:forEach var="data" items="${list}" varStatus="state">
|
||
<tr>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${state.count}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">
|
||
<a href="JavaScript:openDialogView('查看管网温压监测数据', '${ctx}/heatanalysis/heatanalysis/form?id=${data.id}&view002=${data.view002}&view004=${data.view004}&datatime=<fmt:formatDate value="${data.datatime}" pattern="yyyy-MM-dd HH:mm:ss"/>','800px', '500px')" title="查看">
|
||
${data.company}
|
||
</a>
|
||
</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.source}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.station}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec"><fmt:formatDate value="${data.datatime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view005}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view006}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view007}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view008}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view009}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view010}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view011}</td>
|
||
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view012}</td>
|
||
</tr>
|
||
</c:forEach>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</body>
|
||
<script>
|
||
// 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
|
||
tableScroll('tableId', 452, 30, 10);
|
||
tableScroll2('tableId2', 250, 30, 5);
|
||
|
||
|
||
//基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
// 指定图表的配置项和数据
|
||
option = {
|
||
backgroundColor: "#FFF",
|
||
title: {
|
||
text: '<c:if test="${fn:length(lowest) > 0}">${lowest[0].station}</c:if>',
|
||
padding:[230, 228],
|
||
textStyle:{
|
||
fontWeight:'bold',
|
||
fontSize:14
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['一次网供水温度','一次网回水温度','二次网供水温度','二次网回水温度']
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
feature: {
|
||
dataZoom: {
|
||
yAxisIndex: 'none'
|
||
},
|
||
dataView: {readOnly: false},
|
||
magicType: {type: ['line', 'bar']},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: [<c:forEach var="data" items="${lowest}" varStatus="state"><c:choose><c:when test="${state.count == 1}">'<fmt:formatDate value="${data.datatime}" pattern="yyyy-MM-dd HH:mm:ss"/>'</c:when><c:otherwise>,'<fmt:formatDate value="${data.datatime}" pattern="yyyy-MM-dd HH:mm:ss"/>'</c:otherwise></c:choose></c:forEach>],
|
||
axisLabel: {
|
||
formatter:function(value){
|
||
return value.replace(" ", "\n");
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value} °C'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name:'一次网供水温度',
|
||
type:'line',
|
||
data:[<c:forEach var="data" items="${lowest}" varStatus="state"><c:choose><c:when test="${state.count == 1}">'${data.view005}'</c:when><c:otherwise>,'${data.view005}'</c:otherwise></c:choose></c:forEach>],
|
||
markPoint: {
|
||
data: [
|
||
{type: 'max', name: '最大值'},
|
||
{type: 'min', name: '最小值'}
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name:'一次网回水温度',
|
||
type:'line',
|
||
data:[<c:forEach var="data" items="${lowest}" varStatus="state"><c:choose><c:when test="${state.count == 1}">'${data.view006}'</c:when><c:otherwise>,'${data.view006}'</c:otherwise></c:choose></c:forEach>],
|
||
markPoint: {
|
||
data: [
|
||
{type: 'max', name: '最大值'},
|
||
{type: 'min', name: '最小值'}
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name:'二次网供水温度',
|
||
type:'line',
|
||
data:[<c:forEach var="data" items="${lowest}" varStatus="state"><c:choose><c:when test="${state.count == 1}">'${data.view009}'</c:when><c:otherwise>,'${data.view009}'</c:otherwise></c:choose></c:forEach>],
|
||
markPoint: {
|
||
data: [
|
||
{type: 'max', name: '最大值'},
|
||
{type: 'min', name: '最小值'}
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name:'二次网回水温度',
|
||
type:'line',
|
||
data:[<c:forEach var="data" items="${lowest}" varStatus="state"><c:choose><c:when test="${state.count == 1}">'${data.view010}'</c:when><c:otherwise>,'${data.view010}'</c:otherwise></c:choose></c:forEach>],
|
||
markPoint: {
|
||
data: [
|
||
{type: 'max', name: '最大值'},
|
||
{type: 'min', name: '最小值'}
|
||
]
|
||
},
|
||
markLine: {
|
||
data: [
|
||
{type: 'average', name: '平均值'}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
|
||
|
||
var MyMarhq;
|
||
var MyMarhq2;
|
||
|
||
function tableScroll(tableid, hei, speed, len) {
|
||
clearTimeout(MyMarhq);
|
||
$('#' + tableid).parent().find('.tableid_').remove()
|
||
$('#' + tableid).parent().prepend(
|
||
'<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
|
||
).css({
|
||
'position': 'relative',
|
||
'overflow': 'hidden',
|
||
'height': hei + 'px'
|
||
})
|
||
$(".tableid_").find('th').each(function(i) {
|
||
$(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
|
||
});
|
||
$(".tableid_").css({
|
||
'position': 'absolute',
|
||
'top': 0,
|
||
'left': 0,
|
||
'z-index': 9
|
||
})
|
||
$('#' + tableid).css({
|
||
'position': 'absolute',
|
||
'top': 0,
|
||
'left': 0,
|
||
'z-index': 1
|
||
})
|
||
|
||
if ($('#' + tableid).find('tbody tr').length > len) {
|
||
$('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
|
||
$(".tableid_").css('top', 0);
|
||
$('#' + tableid).css('top', 0);
|
||
var tblTop = 0;
|
||
var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
|
||
|
||
function Marqueehq() {
|
||
if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
|
||
tblTop = 0;
|
||
} else {
|
||
tblTop -= 1;
|
||
}
|
||
$('#' + tableid).css('margin-top', tblTop + 'px');
|
||
clearTimeout(MyMarhq);
|
||
MyMarhq = setTimeout(function() {
|
||
Marqueehq()
|
||
}, speed);
|
||
}
|
||
|
||
MyMarhq = setTimeout(Marqueehq, speed);
|
||
$('#' + tableid).find('tbody').hover(function() {
|
||
clearTimeout(MyMarhq);
|
||
}, function() {
|
||
clearTimeout(MyMarhq);
|
||
if ($('#' + tableid).find('tbody tr').length > len) {
|
||
MyMarhq = setTimeout(Marqueehq, speed);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
function tableScroll2(tableid, hei, speed, len) {
|
||
clearTimeout(MyMarhq2);
|
||
$('#' + tableid).parent().find('.tableid_').remove()
|
||
$('#' + tableid).parent().prepend(
|
||
'<table class="tableid_"><thead>' + $('#' + tableid + ' thead').html() + '</thead></table>'
|
||
).css({
|
||
'position': 'relative',
|
||
'overflow': 'hidden',
|
||
'height': hei + 'px'
|
||
})
|
||
$(".tableid_").find('th').each(function(i) {
|
||
$(this).css('width', $('#' + tableid).find('th:eq(' + i + ')').width());
|
||
});
|
||
$(".tableid_").css({
|
||
'position': 'absolute',
|
||
'top': 0,
|
||
'left': 0,
|
||
'z-index': 9
|
||
})
|
||
$('#' + tableid).css({
|
||
'position': 'absolute',
|
||
'top': 0,
|
||
'left': 0,
|
||
'z-index': 1
|
||
})
|
||
|
||
if ($('#' + tableid).find('tbody tr').length > len) {
|
||
$('#' + tableid).find('tbody').html($('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html() + $('#' + tableid).find('tbody').html());
|
||
$(".tableid_").css('top', 0);
|
||
$('#' + tableid).css('top', 0);
|
||
var tblTop = 0;
|
||
var outerHeight = $('#' + tableid).find('tbody').find("tr").outerHeight();
|
||
|
||
function Marqueehq2() {
|
||
if (tblTop <= -outerHeight * $('#' + tableid).find('tbody').find("tr").length) {
|
||
tblTop = 0;
|
||
} else {
|
||
tblTop -= 1;
|
||
}
|
||
$('#' + tableid).css('margin-top', tblTop + 'px');
|
||
clearTimeout(MyMarhq2);
|
||
MyMarhq2 = setTimeout(function() {
|
||
Marqueehq2()
|
||
}, speed);
|
||
}
|
||
|
||
MyMarhq2 = setTimeout(Marqueehq2, speed);
|
||
$('#' + tableid).find('tbody').hover(function() {
|
||
clearTimeout(MyMarhq2);
|
||
}, function() {
|
||
clearTimeout(MyMarhq2);
|
||
if ($('#' + tableid).find('tbody tr').length > len) {
|
||
MyMarhq2 = setTimeout(Marqueehq2, speed);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
</html> |