546 lines
24 KiB
Plaintext
546 lines
24 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" %>
|
||
<!DOCTYPE html>
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||
</title>
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
||
|
||
<style type="text/css">
|
||
|
||
/*
|
||
标题样式
|
||
*/
|
||
.titleDiv {
|
||
color: white;
|
||
padding: 24px 0px 0px 5px;
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
}
|
||
|
||
/*
|
||
短线
|
||
*/
|
||
.line1 {
|
||
width: 80px;
|
||
height: 1px;
|
||
border-bottom: rgba(196, 226, 230, 1) 2px solid;
|
||
}
|
||
|
||
/*
|
||
长线
|
||
*/
|
||
.line2 {
|
||
width: 100%;
|
||
height: 1px;
|
||
border-bottom: rgba(196, 226, 230, 1) 2px solid;
|
||
}
|
||
|
||
#u389_div {
|
||
border-width: 0px;
|
||
/*position: absolute;*/
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 123px;
|
||
height: 40px;
|
||
background: inherit;
|
||
background-color: rgba(28, 53, 106, 1);
|
||
box-sizing: border-box;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
border-color: rgba(200, 200, 200, 1);
|
||
border-radius: 3px;
|
||
-moz-box-shadow: none;
|
||
-webkit-box-shadow: none;
|
||
box-shadow: none;
|
||
color: #FFFFFF;
|
||
float: left;
|
||
padding: 9px 0px 0px 15px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#u389 .text {
|
||
/*position: absolute;*/
|
||
align-self: center;
|
||
padding: 2px 2px 2px 2px;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
}
|
||
|
||
#u389_text {
|
||
border-width: 0px;
|
||
word-wrap: break-word;
|
||
text-transform: none;
|
||
}
|
||
|
||
.u19_input {
|
||
/*position: absolute;*/
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 104px;
|
||
height: 30px;
|
||
padding: 2px 2px 2px 2px;
|
||
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-size: 16px;
|
||
letter-spacing: normal;
|
||
color: #000000;
|
||
vertical-align: none;
|
||
text-align: left;
|
||
text-transform: none;
|
||
/*background-color: transparent;*/
|
||
border-color: transparent;
|
||
}
|
||
|
||
/*
|
||
修改table标题字体颜色，加载过程中由于是反转卡片方式，导致无法赋值字体颜色
|
||
*/
|
||
.fixed-table-body thead th .th-inner {
|
||
color: white;
|
||
}
|
||
|
||
/*
|
||
根据不同分辨率显示不同px的文字大小
|
||
*/
|
||
@media (min-width: 400px) and (min-height: 300px) {
|
||
|
||
}
|
||
|
||
@media (min-width: 768px) and (min-height: 432px) {
|
||
#auto1, #auto2, #auto3, #auto4, #hand1, #hand2, #hand3, #hand4 {
|
||
width: 60px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
#flowDiv1, #flowDiv2, #flowDiv3, #flowDiv4 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
#flowInput1, #flowInput2, #flowInput3, #flowInput4 {
|
||
width: 80px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 992px) and (min-height: 558px) {
|
||
#auto1, #auto2, #auto3, #auto4, #hand1, #hand2, #hand3, #hand4 {
|
||
width: 60px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
#flowDiv1, #flowDiv2, #flowDiv3, #flowDiv4 {
|
||
font-size: 12px;
|
||
}
|
||
|
||
#flowInput1, #flowInput2, #flowInput3, #flowInput4 {
|
||
width: 80px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) and (min-height: 675px) {
|
||
/*#auto1{width: 72px;font-size:12px;}
|
||
#auto2{width: 72px}
|
||
#auto3{width: 72px}
|
||
#auto4{width: 72px}
|
||
#hand1{width: 72px}
|
||
#hand2{width: 72px}
|
||
#hand3{width: 72px}
|
||
#hand4{width: 72px}*/
|
||
}
|
||
|
||
@media (min-width: 1400px) and (min-height: 877px) {
|
||
#auto1, #auto2, #auto3, #auto4, #hand1, #hand2, #hand3, #hand4 {
|
||
width: 86px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
#flowDiv1, #flowDiv2, #flowDiv3, #flowDiv4 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
#flowInput1, #flowInput2, #flowInput3, #flowInput4 {
|
||
width: 100px;
|
||
}
|
||
|
||
#leftDiv, #rightDiv {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1600px) and (min-height: 1075px) {
|
||
#auto1, #auto2, #auto3, #auto4, #hand1, #hand2, #hand3, #hand4 {
|
||
width: 100px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
#flowDiv1, #flowDiv2, #flowDiv3, #flowDiv4 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
#flowInput1, #flowInput2, #flowInput3, #flowInput4 {
|
||
width: 100px;
|
||
}
|
||
|
||
#leftDiv, #rightDiv {
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
|
||
body {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
</style>
|
||
|
||
<script type="text/javascript">
|
||
|
||
function doCompute() {
|
||
layer.msg('调试中...');
|
||
}
|
||
|
||
// 自动调度background-color: #00A5FF;
|
||
// 手动调度background-color: #F4F4F4;
|
||
/*
|
||
切换到自动
|
||
*/
|
||
function doauto(type) {
|
||
$('#auto' + type).css("background-color", "#00A5FF").css("color", "white");
|
||
$('#hand' + type).css("background-color", "#F4F4F4").css("color", "black");
|
||
$('#flowDiv' + type).css("display", "none");
|
||
}
|
||
|
||
/*
|
||
切换到手动
|
||
*/
|
||
function dohand(type) {
|
||
$('#auto' + type).css("background-color", "#F4F4F4").css("color", "black");
|
||
$('#hand' + type).css("background-color", "#00A5FF").css("color", "white");
|
||
$('#flowDiv' + type).css("display", "block");
|
||
}
|
||
|
||
window.onresize = function () {
|
||
//获取高度
|
||
var hei = $(window).height();
|
||
$('#maxDiv').height(hei);
|
||
|
||
// var wid = $(window).width();
|
||
// var hei = $(window).height();
|
||
// $('#width_input').val(wid);
|
||
// $('#height_input').val(hei);
|
||
|
||
var myDiv = document.getElementById('u389_div');
|
||
myDiv.addEventListener('mouseenter', function () {
|
||
document.getElementById('u389_div').style.backgroundColor = 'rgba(22, 145, 255, 1)';
|
||
});
|
||
myDiv.addEventListener('mouseleave', function () {
|
||
document.getElementById('u389_div').style.backgroundColor = 'rgba(28, 53, 106, 1)';
|
||
});
|
||
}
|
||
|
||
function initMenu1() {
|
||
//获取高度
|
||
var hei = $(window).height();
|
||
$('#maxDiv').height(hei);
|
||
|
||
// var wid = $(window).width();
|
||
// var hei = $(window).height();
|
||
// $('#width_input').val(wid);
|
||
// $('#height_input').val(hei);
|
||
|
||
$("#table").bootstrapTable({ // 对应table标签的id
|
||
url: ext.contextPath + '/modelData/getSetData.do', // 获取表格数据的url
|
||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||
striped: false, //表格显示条纹，默认为false
|
||
pagination: true, // 在表格底部显示分页组件，默认false
|
||
pageList: [24], // 设置页面可以显示的数据条数
|
||
pageSize: 24, // 页面数据条数
|
||
pageNumber: 1, // 首页页码
|
||
sidePagination: 'server', // 设置为服务器端分页
|
||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||
return {
|
||
rows: params.limit, // 每页要显示的数据条数
|
||
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
|
||
sort: params.sort, // 要排序的字段
|
||
order: params.order,
|
||
unitId: unitId
|
||
}
|
||
},
|
||
sortName: 'id', // 要排序的字段
|
||
sortOrder: 'desc', // 排序规则
|
||
onClickRow: function (row) {//单击行事件,执行查看功能
|
||
//viewFun(row.mpointcode);
|
||
},
|
||
// 动态修改行的背景颜色
|
||
rowStyle: function (row, index) { //row：行对象， index ：第几行
|
||
// 逻辑
|
||
return {css: {"color": 'rgb(255,255,255)'}};
|
||
},
|
||
cellStyle: function (value, row, index) {// value：单元格值，row：行对象，index：第几行
|
||
// 逻辑
|
||
return {css: {"color": 'rgb(255,255,255)'}};
|
||
},
|
||
columns: [
|
||
{
|
||
field: 'dt', // 返回json数据中的name
|
||
title: '时间', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width: '32%'
|
||
}, {
|
||
field: 'val', // 返回json数据中的name
|
||
title: '潮汐液位', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width: '17%'
|
||
}, {
|
||
field: 'maxVal', // 返回json数据中的name
|
||
title: '调度压力上限', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width: '17%'
|
||
}, {
|
||
field: 'minVal', // 返回json数据中的name
|
||
title: '调度压力下限', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width: '17%'
|
||
}, {
|
||
field: 'controlVal', // 返回json数据中的name
|
||
title: '控制目标', // 表格表头显示文字
|
||
align: 'center', // 左右居中
|
||
valign: 'middle',
|
||
width: '17%'
|
||
}
|
||
],
|
||
onLoadSuccess: function () { //加载成功时执行
|
||
adjustBootstrapTableView("table");
|
||
$("#table").bootstrapTable('toggleView');
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.info("加载数据失败");
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
</script>
|
||
</head>
|
||
|
||
<body onload="initMenu1();" style="background-color: #0A2D5E;">
|
||
|
||
<%--<input id="width_input" type="text" value="" />--%>
|
||
<%--<input id="height_input" type="text" value="" />--%>
|
||
|
||
<div id="maxDiv">
|
||
<%--左边div--%>
|
||
<div style="width: 60%;height: 100%;float: left;" id="leftDiv">
|
||
<div style="width: 100%;height: 100%;">
|
||
<%--调度指令 + 产线分配--%>
|
||
<div style="width: 100%;height: 55%;position: relative;">
|
||
<div style="width: 3%;height: 100%;float:left;"></div>
|
||
<div style="width: 47%;height: 100%;float:left;">
|
||
<div style="width: 90%;height: 90%;margin: auto;">
|
||
<div style="width: 100%;height: 52px;">
|
||
<div class="titleDiv">
|
||
指令调度
|
||
</div>
|
||
</div>
|
||
<div class="line1"></div>
|
||
<div class="line2"></div>
|
||
<div style="width: 100%;height: 100%;color: white;">
|
||
<div style="width: 100%;height: 20%;float: left;">
|
||
<div style="width: 100px;height: 100%;padding: 38px 0px 0px 5px;float: left;">
|
||
调度指令
|
||
</div>
|
||
<div style="width: 200px;height: 100%;padding: 35px 0px 0px 5px;float: left;">
|
||
<input type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);"> kPa
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 60%;float: left;">
|
||
<div style="width: 100%;height: 20%;padding: 8px 0px 0px 5px;">配水模式
|
||
</div>
|
||
<div style="width: 100%;height: 40%;padding: 5px 0px 0px 100px;">
|
||
<div style="width: 100%;height: 65%;">
|
||
<div style="float:left;width: 10%;height: 50%;"><input id="u22_input" type="radio" value="radio" name="配水模式" class="selected"
|
||
checked="checked"
|
||
style="zoom:2;float:left;"></div>
|
||
<div style="float:left;width: 90%;height: 50%;padding-top: 9px;">基于水厂稳态运行模式</div>
|
||
</div>
|
||
<div style="width: 100%;height: 35%;">
|
||
液位区间
|
||
|
||
<input type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);width: 68px;">
|
||
~
|
||
<input type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);width: 68px;">
|
||
|
||
m
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 40%;padding: 5px 0px 0px 100px;">
|
||
<div style="width: 100%;height: 65%;">
|
||
<div style="float:left;width: 10%;height: 50%;"><input id="u23_input" type="radio" value="radio" name="配水模式" class="selected"
|
||
style="zoom:2;float:left;"></div>
|
||
<div style="float:left;width: 90%;height: 50%;padding-top: 9px;">基于清水库高液位模式</div>
|
||
</div>
|
||
<div style="width: 100%;height: 35%;">
|
||
目标液位
|
||
|
||
<input type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);width: 68px;">
|
||
|
||
m
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 47%;height: 100%;float:left;">
|
||
<div style="width: 90%;height: 90%;margin: auto;">
|
||
<div style="width: 100%;height: 52px;">
|
||
<div class="titleDiv">
|
||
产线分配
|
||
</div>
|
||
</div>
|
||
<div class="line1"></div>
|
||
<div class="line2"></div>
|
||
<div style="width: 100%;height: 100%;color: white;">
|
||
<div style="width: 100%;height: 10%;float: left;"></div>
|
||
<div style="width: 100%;height: 10%;float: left;">一期</div>
|
||
<div style="width: 100%;height: 15%;float: left;margin: 0px 0px 0px 40px;">
|
||
<div style="width: 50%;height: 100%;float: left;">
|
||
1线
|
||
<button id="auto1" type="button" class="btn btn-primary"
|
||
style="margin: 0px 0px 0px 20px;background-color: #00A5FF;border-top-right-radius: 0;border-bottom-right-radius: 0;"
|
||
onclick="doauto('1');">
|
||
自动调度
|
||
</button>
|
||
<button id="hand1" type="button" class="btn btn-default"
|
||
style="margin: 0px 0px 0px -5px;background-color: #F4F4F4;border-top-left-radius: 0;border-bottom-left-radius: 0;"
|
||
onclick="dohand('1');">
|
||
手动调度
|
||
</button>
|
||
</div>
|
||
<div id="flowDiv1" style="width: 50%;height: 100%;float: left;display: none;">
|
||
调度流量
|
||
<input id="flowInput1" type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);"> m3/h
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 15%;float: left;margin: 0px 0px 0px 40px;">
|
||
<div style="width: 50%;height: 100%;float: left;">
|
||
2线
|
||
<button id="auto2" type="button" class="btn btn-primary"
|
||
style="margin: 0px 0px 0px 20px;background-color: #00A5FF;border-top-right-radius: 0;border-bottom-right-radius: 0;"
|
||
onclick="doauto('2');">
|
||
自动调度
|
||
</button>
|
||
<button id="hand2" type="button" class="btn btn-default"
|
||
style="margin: 0px 0px 0px -5px;background-color: #F4F4F4;border-top-left-radius: 0;border-bottom-left-radius: 0;"
|
||
onclick="dohand('2');">
|
||
手动调度
|
||
</button>
|
||
</div>
|
||
<div id="flowDiv2" style="width: 50%;height: 100%;float: left;display: none;">
|
||
调度流量
|
||
<input id="flowInput2" type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);"> m3/h
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 10%;float: left;">二期</div>
|
||
<div style="width: 100%;height: 15%;float: left;margin: 0px 0px 0px 40px;">
|
||
<div style="width: 50%;height: 100%;float: left;">
|
||
3线
|
||
<button id="auto3" type="button" class="btn btn-primary"
|
||
style="margin: 0px 0px 0px 20px;background-color: #00A5FF;border-top-right-radius: 0;border-bottom-right-radius: 0;"
|
||
onclick="doauto('3');">
|
||
自动调度
|
||
</button>
|
||
<button id="hand3" type="button" class="btn btn-default"
|
||
style="margin: 0px 0px 0px -5px;background-color: #F4F4F4;border-top-left-radius: 0;border-bottom-left-radius: 0;"
|
||
onclick="dohand('3');">
|
||
手动调度
|
||
</button>
|
||
</div>
|
||
<div id="flowDiv3" style="width: 50%;height: 100%;float: left;display: none;">
|
||
调度流量
|
||
<input id="flowInput3" type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);"> m3/h
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 15%;float: left;margin: 0px 0px 0px 40px;">
|
||
<div style="width: 50%;height: 100%;float: left;">
|
||
4线
|
||
<button id="auto4" type="button" class="btn btn-primary"
|
||
style="margin: 0px 0px 0px 20px;background-color: #00A5FF;border-top-right-radius: 0;border-bottom-right-radius: 0;"
|
||
onclick="doauto('4');">
|
||
自动调度
|
||
</button>
|
||
<button id="hand4" type="button" class="btn btn-default"
|
||
style="margin: 0px 0px 0px -5px;background-color: #F4F4F4;border-top-left-radius: 0;border-bottom-left-radius: 0;"
|
||
onclick="dohand('4');">
|
||
手动调度
|
||
</button>
|
||
</div>
|
||
<div id="flowDiv4" style="width: 50%;height: 100%;float: left;display: none;">
|
||
调度流量
|
||
<input id="flowInput4" type="text" value="" class="u19_input"
|
||
style="color: rgb(153, 153, 153);"> m3/h
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;height: 10%;float: left;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 3%;height: 100%;float:left;"></div>
|
||
</div>
|
||
<div style="width: 100%;height: 45%;">
|
||
<div style="width: 90%;height: 90%;margin: auto;">
|
||
<div class="line2"></div>
|
||
<div style="width: 100%;height:100%;margin: 40px 10px 40px 60%;color: white;font-size: 16px;">
|
||
<div>
|
||
<div style="float: left;padding: 10px 20px 0px 0px;">请确认参数设置完成</div>
|
||
<div id="u389_div" onclick="doCompute();">
|
||
<div id="u389_text" class="text ">
|
||
<p style=""><span>仿真评估计算</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<%--右边div--%>
|
||
<div style="width: 40%;height: 100%;float: left;" id="rightDiv">
|
||
<div style="width: 90%;height: 90%;margin: auto;">
|
||
<div style="width: 100%;height: 52px;">
|
||
<div class="titleDiv">
|
||
相关数据查询
|
||
</div>
|
||
</div>
|
||
<div class="line1"></div>
|
||
<div class="line2"></div>
|
||
<div style="width: 100%;">
|
||
<table id="table" style="table-layout:fixed" class="table table-condensed"></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
</html> |