first commit
This commit is contained in:
831
WebRoot/jsp/digitalProcess/homePageBG.jsp
Normal file
831
WebRoot/jsp/digitalProcess/homePageBG.jsp
Normal file
@ -0,0 +1,831 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user