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