262 lines
8.9 KiB
Plaintext
262 lines
8.9 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;
|
|||
|
|
}
|
|||
|
|
iframe{
|
|||
|
|
border: none;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.statisticsBlock{
|
|||
|
|
height: 65%;
|
|||
|
|
width: calc(50% - 10px);
|
|||
|
|
float: left;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
.tablebox2 {
|
|||
|
|
width:100%;
|
|||
|
|
height:50%;
|
|||
|
|
overflow:hidden;
|
|||
|
|
background-color: #FFF;
|
|||
|
|
}
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.automaticOmissionTd{
|
|||
|
|
white-space:nowrap;/*文本不会换行，在同一行显示*/
|
|||
|
|
overflow:hidden;/*超出隐藏 */
|
|||
|
|
text-overflow:ellipsis;/*省略号显示*/
|
|||
|
|
}
|
|||
|
|
.automaticOmissionSpan{
|
|||
|
|
width:15px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function reload(){
|
|||
|
|
if(parent && parent.$){
|
|||
|
|
//在iframe隐藏的时候不刷新，刷新会把图表挤成一坨
|
|||
|
|
if(!parent.$("[name='iframe00']").is(":hidden")){
|
|||
|
|
window.location.reload();
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
window.location.reload();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setInterval(reload, 1000 * 60 * 3);
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="row">
|
|||
|
|
<%-- 供水温度统计 --%>
|
|||
|
|
<div class="statisticsBlock">
|
|||
|
|
<iframe src="${ctx}/statistics/water/supply/showTemperaturePage"></iframe>
|
|||
|
|
</div>
|
|||
|
|
<%-- 气温统计 --%>
|
|||
|
|
<div class="statisticsBlock">
|
|||
|
|
<iframe src="${ctx}/statistics/weather/showPage"></iframe>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<%-- 回水温度统计 --%>
|
|||
|
|
<div class="statisticsBlock">
|
|||
|
|
<iframe src="${ctx}/statistics/water/backwater/showTemperaturePage" width="100%" height="100%"></iframe>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<%--重点小区投诉统计 --%>
|
|||
|
|
<div class="statisticsBlock">
|
|||
|
|
<iframe src="${ctx}/statistics/wenti/findStatisticsList" width="100%" height="100%"></iframe>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<%--换热站表格 --%>
|
|||
|
|
<div class="statisticsBlock">
|
|||
|
|
<div class="tablebox2">
|
|||
|
|
<table id="tableId" cellspacing="0" cellpadding="0">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th colspan="2" style="text-align: left;"><font style="margin-left: .5em;">实时数据检测</font></b></th>
|
|||
|
|
<!-- <th colspan="2">实时数据检测</th> -->
|
|||
|
|
<th colspan="2">一次网</th>
|
|||
|
|
<th colspan="2">二次网</th>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<th style="width:35px;">序号</th>
|
|||
|
|
<th style="width:150px;text-align: left;">站点名称</th>
|
|||
|
|
<th style="width:75px;">供水温度</th>
|
|||
|
|
<th style="width:75px;">回水温度</th>
|
|||
|
|
<th style="width:75px;">供水温度</th>
|
|||
|
|
<th style="width:75px;">回水温度</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;text-align: left;">${data.station}</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.view009}</td>
|
|||
|
|
<td style="<c:if test='${data.caveat == 1}'>background:#d7ad00;</c:if> border-top:1px solid #e7eaec">${data.view010}</td>
|
|||
|
|
</tr>
|
|||
|
|
</c:forEach>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="statisticsBlock">
|
|||
|
|
<div class="tablebox2">
|
|||
|
|
<table id="tableId2" cellspacing="0" cellpadding="0" style="table-layout: fixed;"><!--列宽由表格宽度和列宽度设定。table-layout: fixed-->
|
|||
|
|
<col style="width:35px;"/>
|
|||
|
|
<col style="width:50px;"/>
|
|||
|
|
<col style="width:100px;"/>
|
|||
|
|
<col style="width:100px;"/>
|
|||
|
|
<col style="width:100px;"/>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th colspan="5" style="text-align: left;"><font style="margin-left: .5em;">出勤公示牌</font></b></th>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<th>序号</th>
|
|||
|
|
<th>姓名</th>
|
|||
|
|
<th style="text-align: left;">事由</th>
|
|||
|
|
<th>开始时间</th>
|
|||
|
|
<th>结束时间</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<c:forEach var="data" items="${vacateAndGoOutList}" varStatus="state">
|
|||
|
|
<tr>
|
|||
|
|
<td style="border-top:1px solid #e7eaec">${state.count}</td>
|
|||
|
|
<td style="border-top:1px solid #e7eaec">${data.name}</td>
|
|||
|
|
<td class="automaticOmissionTd" style="text-align: left;border-top:1px solid #e7eaec" title="${data.cause}">${data.cause}</td>
|
|||
|
|
<%-- <td style="border-top:1px solid #e7eaec">${data.sectionName}</td> --%>
|
|||
|
|
<td style="border-top:1px solid #e7eaec"><fmt:formatDate value="${data.beginTime}" pattern="yyyy-MM-dd HH:mm"/></td>
|
|||
|
|
<td style="border-top:1px solid #e7eaec"><fmt:formatDate value="${data.endTime}" pattern="yyyy-MM-dd HH:mm"/></td>
|
|||
|
|
</tr>
|
|||
|
|
</c:forEach>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
// 参数1 tableID,参数2 div高度，参数3 速度，参数4 tbody中tr几条以上滚动
|
|||
|
|
//同页面中存在几个滚动表格，添加几个loop
|
|||
|
|
var loop,loop2;
|
|||
|
|
tableScroll('tableId', "100%", 30, 10,loop);
|
|||
|
|
tableScroll('tableId2', "100%", 30, 10,loop2);
|
|||
|
|
|
|||
|
|
function tableScroll(tableid, hei, speed, len,funName) {
|
|||
|
|
clearTimeout(funName);
|
|||
|
|
var $this = $('#' + tableid);
|
|||
|
|
var $thisp = $this.parent();
|
|||
|
|
$thisp.find('.tableid_').remove();
|
|||
|
|
$thisp.prepend(
|
|||
|
|
'<table class="tableid_' + tableid + '"><thead>' + $this.find('thead').html() + '</thead></table>'
|
|||
|
|
).css({
|
|||
|
|
'position': 'relative',
|
|||
|
|
'overflow': 'hidden',
|
|||
|
|
'height': hei
|
|||
|
|
});
|
|||
|
|
var $tableid = $(".tableid_" + tableid);
|
|||
|
|
$tableid.find('th').each(function(i) {
|
|||
|
|
$(this).css('width', $this.find('th:eq(' + i + ')').width());
|
|||
|
|
});
|
|||
|
|
$tableid.css({
|
|||
|
|
'position': 'absolute',
|
|||
|
|
'top': 0,
|
|||
|
|
'left': 0,
|
|||
|
|
'z-index': 9
|
|||
|
|
})
|
|||
|
|
$this.css({
|
|||
|
|
'position': 'absolute',
|
|||
|
|
'top': 0,
|
|||
|
|
'left': 0,
|
|||
|
|
'z-index': 1
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
if ($this.find('tbody tr').length > len) {
|
|||
|
|
$this.find('tbody').html($this.find('tbody').html() + $this.find('tbody').html() + $this.find('tbody').html() + $this.find('tbody').html());
|
|||
|
|
$tableid.css('top', 0);
|
|||
|
|
$this.css('top', 0);
|
|||
|
|
var tblTop = 0;
|
|||
|
|
var outerHeight = $this.find('tbody').find("tr").outerHeight();
|
|||
|
|
|
|||
|
|
function Marqueehq() {
|
|||
|
|
if (tblTop <= -outerHeight * $this.find('tbody').find("tr").length) {
|
|||
|
|
tblTop = 0;
|
|||
|
|
} else {
|
|||
|
|
tblTop -= 1;
|
|||
|
|
}
|
|||
|
|
$this.css('margin-top', tblTop + 'px');
|
|||
|
|
clearTimeout(funName);
|
|||
|
|
funName = setTimeout(function() {
|
|||
|
|
Marqueehq()
|
|||
|
|
}, speed);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
funName = setTimeout(Marqueehq, speed);
|
|||
|
|
$this.find('tbody').hover(function() {
|
|||
|
|
clearTimeout(funName);
|
|||
|
|
}, function() {
|
|||
|
|
clearTimeout(funName);
|
|||
|
|
if ($this.find('tbody tr').length > len) {
|
|||
|
|
funName = setTimeout(Marqueehq, speed);
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</html>
|