831 lines
36 KiB
Plaintext
831 lines
36 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">
|
|
let beginTimeStore1 = '';
|
|
let endTimeStore1 = '';
|
|
|
|
let myChart1 = "";
|
|
let option1 = [];
|
|
let series1 = [];
|
|
|
|
let myChart2 = "";
|
|
let option2 = [];
|
|
let series2 = [];
|
|
|
|
let myChart3 = "";
|
|
let option3 = [];
|
|
let series3 = [];
|
|
|
|
let myChart4 = "";
|
|
let option4 = [];
|
|
let series4 = [];
|
|
|
|
let websocket = null;
|
|
let modelIp = "${modelIp}";
|
|
|
|
$(function () {
|
|
let windowHeight = $(window).height();
|
|
$('#main').css("height", (windowHeight - 30) + "px");
|
|
|
|
initDate1();
|
|
|
|
// if ('WebSocket' in window) {
|
|
// // 创建websocket对象
|
|
// websocket = new WebSocket("ws://" + modelIp + "/modelComputerWebSocketEnd/");
|
|
// // console.log("ws://"+modelIp+"/modelComputerWebSocketEnd/")
|
|
// registerEvent();
|
|
// } else {
|
|
// alert('当前浏览器不支持websocket')
|
|
// }
|
|
// $(window).unload(function () {
|
|
// console.log("websocket关闭");
|
|
// websocket.close();
|
|
// });
|
|
|
|
myChart1 = echarts.init(document.getElementById("chart1"));
|
|
option1 = {
|
|
color: [
|
|
"#00DB16"
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
left: 'right',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
data: ['潮汐']
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '1%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
yAxis: {
|
|
name: 'cm',
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#fff',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: series1
|
|
};
|
|
myChart1.setOption(option1, true);
|
|
|
|
myChart2 = echarts.init(document.getElementById("chart2"));
|
|
option2 = {
|
|
color: [
|
|
"#00DB16", "#4875E8"
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
left: 'right',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
data: ['实测CI', '预测CI']
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '1%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
yAxis: {
|
|
name: 'ppm',
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#fff',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: series2
|
|
};
|
|
myChart2.setOption(option2, true);
|
|
|
|
myChart3 = echarts.init(document.getElementById("chart3"));
|
|
option3 = {
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
// legend: {
|
|
// left: 'right',
|
|
// textStyle: {
|
|
// color: '#fff'
|
|
// },
|
|
// data: ['潮汐']
|
|
// },
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '1%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
formatter: function (params) {
|
|
let outContent = "";
|
|
for (let item of params) {
|
|
// <span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:rgba(0,0,0,0);\"></span>
|
|
let time = item.value[0];
|
|
let value = item.value[1];
|
|
if (value == 0) {
|
|
outContent = time + '：关';
|
|
} else if (value == 1) {
|
|
outContent = time + '：开';
|
|
} else {
|
|
outContent = '';
|
|
}
|
|
}
|
|
return outContent
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
// boundaryGap: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
}
|
|
// data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
max: 2,
|
|
min: -1,
|
|
minInterval: 1,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
type: 'dashed'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
formatter: function (value, index) {
|
|
if (value == 0) {
|
|
value = '关';
|
|
} else if (value == 1) {
|
|
value = '开';
|
|
} else {
|
|
value = '';
|
|
}
|
|
return value;
|
|
}
|
|
}
|
|
},
|
|
visualMap: [
|
|
{
|
|
show: false,
|
|
// type: 'piecewise',
|
|
// splitNumber: 2,
|
|
pieces: [
|
|
{gt: 1, lte: 2, label: '开（自定义特殊颜色）', color: '#00DB16'},
|
|
{gt: -1, lte: 0, label: '关（自定义特殊颜色）', color: 'red'}
|
|
]
|
|
},
|
|
],
|
|
series: series3
|
|
};
|
|
myChart3.setOption(option3, true);
|
|
|
|
myChart4 = echarts.init(document.getElementById("chart4"));
|
|
option4 = {
|
|
color: [
|
|
"#00DB16", "#4875E8"
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
left: 'right',
|
|
textStyle: {
|
|
color: '#fff'
|
|
},
|
|
data: ['实测液位', '预测液位']
|
|
},
|
|
grid: {
|
|
left: '2%',
|
|
right: '2%',
|
|
bottom: '1%',
|
|
top: '15%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
yAxis: {
|
|
name: 'ppm',
|
|
type: 'value',
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#fff',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: series4
|
|
};
|
|
myChart4.setOption(option4, true);
|
|
|
|
getData("");
|
|
// getWeatherData();
|
|
})
|
|
|
|
function initDate1() {
|
|
let locale = {
|
|
"format": 'YYYY-MM-DD HH:mm',
|
|
"separator": " ~ ",
|
|
"applyLabel": "确定",
|
|
"cancelLabel": "取消",
|
|
"fromLabel": "起始时间",
|
|
"toLabel": "结束时间'",
|
|
"customRangeLabel": "自定义",
|
|
"weekLabel": "W",
|
|
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
|
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
|
"firstDay": 1
|
|
};
|
|
|
|
beginTimeStore1 = moment().subtract(15, 'days').format('YYYY-MM-DD') + " 00:00";
|
|
endTimeStore1 = moment().subtract(-15, 'days').format('YYYY-MM-DD') + " 23:59";
|
|
$('#date1').val(beginTimeStore1 + locale.separator + endTimeStore1);
|
|
|
|
$('#date1').daterangepicker({
|
|
"timePicker": true,
|
|
"timePicker24Hour": true,
|
|
"linkedCalendars": false,
|
|
"autoUpdateInput": false,
|
|
"timePickerIncrement": 10,
|
|
"opens": 'left', //日期选择框的弹出位置
|
|
"locale": locale,
|
|
//汉化按钮部分
|
|
ranges: {
|
|
// '今日': [moment(), moment().subtract(-1, 'days')],
|
|
'昨日': [moment().subtract(1, 'days'), moment()],
|
|
'最近7日': [moment().subtract(7, 'days'), moment()],
|
|
'本月': [moment().startOf('month'), moment().endOf('month')],
|
|
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
|
},
|
|
startDate: beginTimeStore1,
|
|
endDate: endTimeStore1
|
|
}, function (start, end, label) {
|
|
beginTimeStore1 = start.format(this.locale.format);
|
|
endTimeStore1 = end.format(this.locale.format);
|
|
if (!this.startDate) {
|
|
this.element.val('');
|
|
} else {
|
|
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
|
|
function registerEvent() {
|
|
websocket.onopen = function (event) {
|
|
console.log("已连接");
|
|
}
|
|
|
|
websocket.onmessage = function (event) {
|
|
if (event != null) {
|
|
// console.log(event.data)
|
|
let modelType = event.data;
|
|
if (modelType != 'model_status') {
|
|
getData(modelType);
|
|
}
|
|
}
|
|
};
|
|
websocket.onclose = function (event) {
|
|
console.log("已断开");
|
|
reconnect();
|
|
};
|
|
//连接发生错误的回调方法
|
|
websocket.onerror = function () {
|
|
reconnect();
|
|
};
|
|
}
|
|
|
|
function reconnect() {
|
|
websocket = new WebSocket("ws://" + modelIp + "/modelComputerWebSocketEnd/");
|
|
websocket.onopen = function (event) {
|
|
console.log("已连接");
|
|
}
|
|
|
|
websocket.onmessage = function (event) {
|
|
};
|
|
|
|
websocket.onclose = function (event) {
|
|
setTimeout("reconnect();", 8000);
|
|
};
|
|
//连接发生错误的回调方法 `1
|
|
websocket.onerror = function () {
|
|
websocket.close();
|
|
};
|
|
}
|
|
|
|
function getWeatherData() {
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/work/weather/getList.do",
|
|
dataType: 'json',
|
|
data: {
|
|
bizid: unitId,
|
|
time: getNowTime().substring(0, 13) + ":00",
|
|
type: '0',//0 为实时数据
|
|
page: 1,
|
|
rows: 1
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
// console.log(data)
|
|
if (data.rows.length > 0) {
|
|
let weatherData = data.rows[0];
|
|
let qw = weatherData.temp;
|
|
0
|
|
let qy = weatherData.pressure;
|
|
let fs = weatherData.windspeed;
|
|
let fx = weatherData.wind;
|
|
let jyqd = weatherData.precip;
|
|
|
|
$('#kep_QW').html(qw);
|
|
$('#kep_QY').html(qy);
|
|
$('#kep_FS').html(fs);
|
|
$('#kep_FX').html(fx);
|
|
$('#kep_JYQD').html(jyqd);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
let chart1Points = "";
|
|
let chart2Points = "";
|
|
let chart3Points = "";
|
|
let chart4Points = "";
|
|
let chartDetailPointsSt = 1;
|
|
|
|
let willMpoints = "";
|
|
let will2Mpoints = 0;
|
|
|
|
function getData(modelType) {
|
|
let nowHourTime = getNowTime().substring(0, 13);
|
|
|
|
series1 = [];
|
|
series2 = [];
|
|
series3 = [];
|
|
series4 = [];
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getBGJspData.do",
|
|
dataType: 'json',
|
|
data: {
|
|
unitId: unitId,
|
|
jspId: 'homePageBG',
|
|
modelType: modelType,
|
|
sdt: beginTimeStore1,
|
|
edt: endTimeStore1
|
|
},
|
|
async: true,
|
|
error: function () {
|
|
return false;
|
|
},
|
|
success: function (data) {
|
|
if (data.length > 0) {
|
|
for (let i = 0; i < data.length; i++) {
|
|
let content = data[i];
|
|
// console.log(content)
|
|
if (content.getValueType == 'getMpMainValue') {
|
|
if (content.mPoint != null) {
|
|
let outValue = toThousands(content.mPoint.parmvalue);
|
|
// if(isNumber(outValue)){
|
|
// outValue = toThousands(outValue);
|
|
// }
|
|
if (content.visualCacheData != null) {
|
|
if (content.visualCacheData.unit != null) {
|
|
outValue += content.visualCacheData.unit;
|
|
}
|
|
}
|
|
$('.' + content.elementCode).text(outValue);
|
|
$("#" + content.elementCode).on("click", function () {
|
|
showDetailLine(content.visualCacheData.mpcode, '99');
|
|
});
|
|
} else {
|
|
$('.' + content.elementCode).text('-');
|
|
}
|
|
} else if (content.getValueType == 'getRedisData') {
|
|
if (content.value != null) {
|
|
let redisValue = eval("(" + content.value + ")");
|
|
// console.log(redisValue)
|
|
let outValue = redisValue.mpvalue;
|
|
if (isNumber(outValue)) {
|
|
if (content.visualCacheData != null) {
|
|
if (content.visualCacheData.numtail != null) {
|
|
outValue = Number(outValue).toFixed(Number(content.visualCacheData.numtail));
|
|
}
|
|
}
|
|
outValue = toThousands(outValue);
|
|
}
|
|
if (content.visualCacheData != null) {
|
|
if (content.visualCacheData.unit != null) {
|
|
outValue += content.visualCacheData.unit;
|
|
}
|
|
}
|
|
$('.' + content.elementCode).text(outValue);
|
|
$("#" + content.elementCode).on("click", function () {
|
|
showDetailLine(content.visualCacheData.mpcode, '99');
|
|
});
|
|
} else {
|
|
$('.' + content.elementCode).text('-');
|
|
}
|
|
} else if (content.getValueType == 'getHourHistory') {
|
|
if (content.elementCode == '1chart') {
|
|
if (chart1Points == '') {
|
|
chart1Points += content.visualCacheData.mpcode + ",";
|
|
}
|
|
series1.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: content.jsonArray
|
|
})
|
|
willMpoints+=content.visualCacheData.mpcode+",";
|
|
} else if (content.elementCode == '2chart') {
|
|
if (chart2Points == '') {
|
|
chart2Points += content.visualCacheData.mpcode + ",";
|
|
}
|
|
series2.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: content.jsonArray
|
|
})
|
|
if(will2Mpoints==0){
|
|
willMpoints+=content.visualCacheData.mpcode+",";
|
|
}
|
|
will2Mpoints++;
|
|
} else if (content.elementCode == '3chart') {
|
|
if (chart3Points == '') {
|
|
chart3Points += content.visualCacheData.mpcode + ",";
|
|
}
|
|
series3.push({
|
|
type: 'line',
|
|
step: 'middle',
|
|
symbol: 'none',
|
|
markLine: {
|
|
lineStyle: {
|
|
type: 'solid'
|
|
},
|
|
label: {
|
|
color: '#ffffff'
|
|
},
|
|
data: [
|
|
{
|
|
name: 'today',
|
|
xAxis: nowHourTime
|
|
}
|
|
]
|
|
},
|
|
data: content.jsonArray
|
|
})
|
|
willMpoints+=content.visualCacheData.mpcode+",";
|
|
} else if (content.elementCode == '4chart') {
|
|
if (chart4Points == '') {
|
|
chart4Points += content.visualCacheData.mpcode + ",";
|
|
}
|
|
series4.push({
|
|
name: content.name,
|
|
type: 'line',
|
|
symbol: 'none',
|
|
data: content.jsonArray
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
if (chartDetailPointsSt == 1) {
|
|
$("#chart1DetailLine").on("click", function () {
|
|
showDetailLine(chart1Points, '1');
|
|
});
|
|
$("#chart2DetailLine").on("click", function () {
|
|
showDetailLine(chart2Points, '2');
|
|
});
|
|
$("#chart3DetailLine").on("click", function () {
|
|
showDetailLine(chart3Points, '3');
|
|
});
|
|
$("#chart4DetailLine").on("click", function () {
|
|
showDetailLine(chart4Points, '4');
|
|
});
|
|
chartDetailPointsSt = 2;
|
|
}
|
|
|
|
if (series1.length > 0) {
|
|
option1.series = series1;
|
|
myChart1.setOption(option1, true);
|
|
}
|
|
if (series2.length > 0) {
|
|
option2.series = series2;
|
|
myChart2.setOption(option2, true);
|
|
}
|
|
if (series3.length > 0) {
|
|
option3.series = series3;
|
|
myChart3.setOption(option3, true);
|
|
}
|
|
if (series4.length > 0) {
|
|
option4.series = series4;
|
|
myChart4.setOption(option4, true);
|
|
}
|
|
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function showDetailLine(mpcodes, type) {
|
|
if(type=='98'){
|
|
mpcodes=willMpoints;
|
|
}
|
|
// console.log(mpcodes)
|
|
$.post(ext.contextPath + '/digitalProcess/digitalTechnologist/homePageBGDetailLine.do', {
|
|
mpcodes: mpcodes,
|
|
type: type
|
|
}, 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-color: #070030;">
|
|
<!-- 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: 20%;padding-bottom: 10px;">
|
|
<div style="float: left;width:calc((100% - 20px)*0.6);height: 100%;background-color: #4C74E4;border-radius: 4px;box-shadow: 2px 4px 4px 0px #00278a;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="color:#FFFFFF;height: 40%;vertical-align: center;">
|
|
<td>库液水位(m)</td>
|
|
<td>水库余氯总氯(PPm)</td>
|
|
<td>水库蓝藻(PPm)</td>
|
|
<td>水库PH</td>
|
|
<td>水库电导率(µs/cm)</td>
|
|
</tr>
|
|
<tr style="color:#00F0FF;height: 60%;vertical-align: top;font-size: 40px;">
|
|
<td id="kep_SKSW" class="kep_SKSW" style="cursor: pointer;"></td>
|
|
<td id="SK_YLZD" class="SK_YLZD" style="cursor: pointer;"></td>
|
|
<td id="SK_LZ" class="SK_LZ" style="cursor: pointer;"></td>
|
|
<td id="SK_ph" class="SK_ph" style="cursor: pointer;"></td>
|
|
<td id="SK_DDL" class="SK_DDL" style="cursor: pointer;"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div style="float: left;width:20px;height: 100%;"></div>
|
|
<div style="float: left;width:calc((100% - 20px)*0.4);height: 100%;background-color: #4C74E4;border-radius: 4px;box-shadow: 2px 4px 4px 0px #00278a;">
|
|
<table style="width: 100%;height: 100%;text-align: center;">
|
|
<tr style="color:#FFFFFF;height: 40%;vertical-align: center;">
|
|
<td>长江Cl浓度(PPm)</td>
|
|
<td>长江氨氮(PPm)</td>
|
|
<td>长江PH</td>
|
|
<td>长江电导率(µs/cm)</td>
|
|
</tr>
|
|
<tr style="color:#00F0FF;height: 60%;vertical-align: top;font-size: 40px;">
|
|
<td id="CJ_LLZND" class="CJ_LLZND" style="cursor: pointer;"></td>
|
|
<td id="CJ_ADND" class="CJ_ADND" style="cursor: pointer;"></td>
|
|
<td id="CJ_ph" class="CJ_ph" style="cursor: pointer;"></td>
|
|
<td id="CJ_DDL" class="CJ_DDL" style="cursor: pointer;"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width:100%;height: 80%;">
|
|
<div style="float: left;width:100%;height: 35px;">
|
|
<div style="float: right;width:370px;height: 25px;color: #FFFFFF;text-align: center;line-height: 22px;">
|
|
<div style="float: left;width:265px;height: 22px;border: 1px solid #ffffff;border-radius: 4px 0px 0px 4px;">
|
|
<input type="text" class="form-control pull-left" id="date1"
|
|
style="width:100%;height: 100%;border: 0px;background-color: transparent;color: #FFFFFF;">
|
|
</div>
|
|
<div style="float: left;width:40px;height: 22px;border: 1px solid #ffffff;border-radius: 0px 4px 4px 0px;cursor: pointer;"
|
|
onclick="getData();">
|
|
查询
|
|
</div>
|
|
<div style="float: left;width:40px;height: 22px;border: 1px solid #ffffff;border-radius: 4px 4px 4px 4px;cursor: pointer;margin-left: 5px;"
|
|
onclick="showDetailLine('','98');">
|
|
预测
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width:100%;height: calc((100% - 35px)*0.5);padding-bottom: 10px;">
|
|
<div style="float: left;width:33.3%;height: 100%;padding-right: 15px;">
|
|
<div style="float: left;width:100%;height: 100%;border: 2px solid #4875e8;border-radius: 4px;box-shadow: 2px 4px 4px 0px #00278a;padding: 5px;">
|
|
<div style="float: left;width:100%;height: 100%;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/BGWaterPIC.jpg);background-size: 100% 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width:33.3%;height: 100%;padding-right: 15px;">
|
|
<div id="chart1DetailLine"
|
|
style="float: left;width:100%;height: 35px;font-size: 20px;color: #ffffff;line-height: 24px;text-align: left;cursor: pointer;">
|
|
潮汐曲线
|
|
</div>
|
|
<div id="chart1" style="float: left;width:100%;height: calc(100% - 35px);"></div>
|
|
</div>
|
|
<div style="float: left;width:33.3%;height: 100%;">
|
|
<div id="chart2DetailLine"
|
|
style="float: left;width:100%;height: 35px;font-size: 20px;color: #ffffff;line-height: 24px;text-align: left;cursor: pointer;">
|
|
长江口取水水质实测&预测曲线
|
|
</div>
|
|
<div id="chart2" style="float: left;width:100%;height: calc(100% - 35px);"></div>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width:100%;height: calc((100% - 35px)*0.5);padding-top: 10px;">
|
|
<div style="float: left;width:33.3%;height: 100%;padding-right: 15px;">
|
|
<div style="float: left;width:100%;height: 100%;border-radius: 4px;box-shadow: 2px 4px 4px 0px #68738d;padding-left: 20px;">
|
|
<table style="width: 100%;height: 100%;text-align: left;vertical-align: center;color: #ffffff;">
|
|
<tr>
|
|
<td>当前气温(℃)</td>
|
|
<td id="kep_QW" class="kep_QW"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>当前气压(kPa)</td>
|
|
<td id="kep_QY" class="kep_QY"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>当前风速(m/s)</td>
|
|
<td id="kep_FS" class="kep_FS"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>当前风向(° )</td>
|
|
<td id="kep_FX" class="kep_FX"></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>今日降雨强度(mm/h)</td>
|
|
<td id="kep_JYQD" class="kep_JYQD"></td>
|
|
<td></td>
|
|
</tr>
|
|
<%-- <tr>--%>
|
|
<%-- <td>排污时间</td>--%>
|
|
<%-- <td>-</td>--%>
|
|
<%-- <td><img style="width: 24px;height: 24px;"--%>
|
|
<%-- src="<%=request.getContextPath()%>/IMG/digitalProcess/edit.png" alt="">--%>
|
|
<%-- </td>--%>
|
|
<%-- </tr>--%>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div style="float: left;width:33.3%;height: 100%;padding-right: 15px;">
|
|
<div id="chart3DetailLine"
|
|
style="float: left;width:100%;height: 35px;font-size: 20px;color: #ffffff;line-height: 24px;text-align: left;cursor: pointer;">
|
|
取水时段预测曲线
|
|
</div>
|
|
<div id="chart3" style="float: left;width:100%;height: calc(100% - 35px);"></div>
|
|
</div>
|
|
<div style="float: left;width:33.3%;height: 100%;">
|
|
<div id="chart4DetailLine"
|
|
style="float: left;width:100%;height: 35px;font-size: 20px;color: #ffffff;line-height: 24px;text-align: left;cursor: pointer;">
|
|
水库液位实测&预测曲线
|
|
</div>
|
|
<div id="chart4" style="float: left;width:100%;height: calc(100% - 35px);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /.content -->
|
|
</div>
|
|
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
|
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
|
</div>
|
|
</body>
|
|
<!-- 引入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> |