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> |