407 lines
16 KiB
Plaintext
407 lines
16 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>
|
||
|
|
<!-- <html lang="zh-CN"> -->
|
||
|
|
<!-- BEGIN HEAD -->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
|
|
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
|
||
|
|
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"/> -->
|
||
|
|
<title>
|
||
|
|
<%= ServerObject.atttable.get("TOPTITLE")%>
|
||
|
|
</title>
|
||
|
|
<!-- 引用页头及CSS页-->
|
||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
|
<!-- bootstrap switch -->
|
||
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
||
|
|
charset="utf-8"></script>
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts5.0.2.js" charset="utf-8"></script>
|
||
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/iconfont-pump/iconfont.css" />
|
||
|
|
<style type="text/css">
|
||
|
|
.bgimg-map{
|
||
|
|
width: 949px;
|
||
|
|
height: 887px;
|
||
|
|
background-image: url(<%=request.getContextPath()%>/IMG/pump/dosage.png) ;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position:top center;
|
||
|
|
position: relative;
|
||
|
|
border-right: 3px solid #e1e1e1;
|
||
|
|
}
|
||
|
|
.bg_color{
|
||
|
|
background: #2d2d2d;
|
||
|
|
border:0;
|
||
|
|
}
|
||
|
|
.thumbnail, .nav>li>a {
|
||
|
|
padding: 0px;
|
||
|
|
}
|
||
|
|
.nav-tabs-custom>.nav-tabs {
|
||
|
|
border: 0;
|
||
|
|
border-bottom-color: #2d2d2d;
|
||
|
|
}
|
||
|
|
.nav-tabs-custom > .nav-tabs > li {
|
||
|
|
width: 170px;
|
||
|
|
height: 35px;
|
||
|
|
margin-bottom: 0;
|
||
|
|
margin-right: 20px;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
.nav-tabs-custom>.nav-tabs>li.active {
|
||
|
|
opacity: 1;
|
||
|
|
background: linear-gradient(180deg,rgba(0,238,255,0.00), rgba(0,246,251,0.15) 46%, #00fff6);
|
||
|
|
}
|
||
|
|
.nav-tabs-custom>.nav-tabs>li>a {
|
||
|
|
border-radius: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
opacity: 1;
|
||
|
|
font-size: 20px;
|
||
|
|
font-family: Source Han Sans CN, Source Han Sans CN-Bold;
|
||
|
|
font-weight: 700;
|
||
|
|
text-align: center;
|
||
|
|
color: #bfbfbf;
|
||
|
|
border: 0;
|
||
|
|
}
|
||
|
|
.nav-tabs-custom>.nav-tabs>li.active>a, .nav-tabs-custom>.nav-tabs>li.active:hover>a {
|
||
|
|
color: #ffffff;
|
||
|
|
background-color: inherit;
|
||
|
|
}
|
||
|
|
.pump-text{
|
||
|
|
font-size: 22px;
|
||
|
|
font-family: Source Han Sans CN, Source Han Sans CN-Regular;
|
||
|
|
font-weight: 400;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
.pump-text-small{
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
.pump-text-white{
|
||
|
|
font-size: 22px;
|
||
|
|
color: #ffffff;
|
||
|
|
padding: 0 11%;
|
||
|
|
}
|
||
|
|
.pump-text-blue{
|
||
|
|
color: #30d4ff;
|
||
|
|
}
|
||
|
|
.pump-text-red{
|
||
|
|
color: #d19bff;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var heightV =1;
|
||
|
|
$(function () {
|
||
|
|
getInitialization();
|
||
|
|
var tab1_ul_children = $("#tab1_ul").children(".active");
|
||
|
|
$("#jsp_id").val(tab1_ul_children.find("a").attr("id"));
|
||
|
|
if(unitId==null || unitId=='' || unitId==undefined){
|
||
|
|
unitId = '${unitId}';
|
||
|
|
}
|
||
|
|
var search_pid = unitId;
|
||
|
|
$("#tab1_ul li a").click(function(){
|
||
|
|
var href = $(this).attr('href');
|
||
|
|
if(!$(href+"_1").hasClass("active")){
|
||
|
|
$(href+"_1").addClass("active");
|
||
|
|
}
|
||
|
|
$(href+"_1").siblings().removeClass("active");
|
||
|
|
$("#jsp_id").val($(this).attr("id"));
|
||
|
|
getData(search_pid);
|
||
|
|
});
|
||
|
|
getData(search_pid);
|
||
|
|
$(window).resize(function() {
|
||
|
|
getInitialization();
|
||
|
|
getData(search_pid);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
function getInitialization(){
|
||
|
|
heightV = $(window).height()/1080;
|
||
|
|
$(".bgimg-map").css("height",887*heightV+30);
|
||
|
|
$(".bgimg-map").css("background-size",""+(949*heightV)+"px "+(887*heightV)+"px");
|
||
|
|
$(".chart_line").css("height",170*heightV);
|
||
|
|
}
|
||
|
|
function getData(bizid){
|
||
|
|
var jsp_id = $('#jsp_id').val();
|
||
|
|
var time_input = $('#time_input').val();
|
||
|
|
$.post(ext.contextPath + '/equipment/pump/getDosageData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
|
||
|
|
var arr= JSON.parse(data);
|
||
|
|
console.log(arr);
|
||
|
|
var low_dosage_dataseries=[];
|
||
|
|
var low_dosage_dataxAxis=[];
|
||
|
|
var low_WaterQuality_dataseries=[];
|
||
|
|
var low_WaterQuality_dataxAxis=[];
|
||
|
|
if(arr.rows!=null && arr.rows!=undefined && arr.rows!=''){
|
||
|
|
for(var i=0;i<arr.rows.length;i++){
|
||
|
|
var value =0;
|
||
|
|
var numtail=0;
|
||
|
|
var dataMax=0;
|
||
|
|
if(arr.rows[i].visualCacheData.value!=null
|
||
|
|
&& arr.rows[i].visualCacheData.value!=undefined
|
||
|
|
&& arr.rows[i].visualCacheData.value!=''){
|
||
|
|
value = arr.rows[i].visualCacheData.value;
|
||
|
|
if(arr.rows[i].visualCacheData.numtail!=null){
|
||
|
|
numtail = arr.rows[i].visualCacheData.numtail;
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
var mPoint = arr.rows[i].mPoint;
|
||
|
|
if(mPoint!=null ){
|
||
|
|
if(mPoint.parmvalue!=null){
|
||
|
|
value = mPoint.parmvalue;
|
||
|
|
}
|
||
|
|
if(mPoint.alarmmax!=null){
|
||
|
|
dataMax = mPoint.alarmmax;
|
||
|
|
}
|
||
|
|
if(mPoint.numtail!=null){
|
||
|
|
numtail = mPoint.numtail;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
value = parseFloat(value).toFixed(numtail);
|
||
|
|
if($("."+arr.rows[i].elementCode).length > 0){
|
||
|
|
$("."+arr.rows[i].elementCode).html(toThousands(value));
|
||
|
|
}
|
||
|
|
if(arr.rows[i].elementCode=='low_dosage'){
|
||
|
|
var mPointHistory = arr.rows[i].mPointHistory;
|
||
|
|
var dataseries =[];
|
||
|
|
for(var m=0;m<mPointHistory.length;m++){
|
||
|
|
var mPointData =[];
|
||
|
|
mPointData.push(mPointHistory[m].measuredt.substring(11,16));
|
||
|
|
mPointData.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
|
|
dataseries.push(mPointData);
|
||
|
|
}
|
||
|
|
low_dosage_dataseries[0]=dataseries;
|
||
|
|
}
|
||
|
|
if(arr.rows[i].elementCode=='low_dosage_forecast'){
|
||
|
|
var mPointHistory = arr.rows[i].mPointHistory;
|
||
|
|
var dataseries =[];
|
||
|
|
for(var m=0;m<mPointHistory.length;m++){
|
||
|
|
low_dosage_dataxAxis.push(mPointHistory[m].measuredt.substring(11,16));
|
||
|
|
var mPointData =[];
|
||
|
|
mPointData.push(mPointHistory[m].measuredt.substring(11,16));
|
||
|
|
mPointData.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
|
|
dataseries.push(mPointData);
|
||
|
|
}
|
||
|
|
low_dosage_dataseries[1]=dataseries;
|
||
|
|
}
|
||
|
|
if(arr.rows[i].elementCode=='low_WaterQuality'){
|
||
|
|
var mPointHistory = arr.rows[i].mPointHistory;
|
||
|
|
var dataseries =[];
|
||
|
|
for(var m=0;m<mPointHistory.length;m++){
|
||
|
|
dataseries.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
|
|
}
|
||
|
|
low_WaterQuality_dataseries[0]=dataseries;
|
||
|
|
}
|
||
|
|
if(arr.rows[i].elementCode=='low_WaterQuality_forecast'){
|
||
|
|
var mPointHistory = arr.rows[i].mPointHistory;
|
||
|
|
var dataseries =[];
|
||
|
|
for(var m=0;m<mPointHistory.length;m++){
|
||
|
|
low_WaterQuality_dataxAxis.push(mPointHistory[m].measuredt.substring(11,16));
|
||
|
|
dataseries.push(mPointHistory[m].parmvalue.toFixed(numtail));
|
||
|
|
}
|
||
|
|
low_WaterQuality_dataseries[1]=dataseries;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
showDoubleLine('low_dosage',low_dosage_dataxAxis,low_dosage_dataseries);
|
||
|
|
showDoubleLine('low_WaterQuality',low_WaterQuality_dataxAxis,low_WaterQuality_dataseries);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
function showDoubleLine(id,dataxAxis,dataseries){
|
||
|
|
var option = {
|
||
|
|
color: ['#30d4ff', '#d19bff'],
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
top:'5%',
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '3%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: dataxAxis,
|
||
|
|
splitLine: {
|
||
|
|
show: true ,
|
||
|
|
lineStyle: {
|
||
|
|
color: ['#aaa'] ,
|
||
|
|
type: 'dashed' ,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
splitLine: {
|
||
|
|
show: true ,
|
||
|
|
lineStyle: {
|
||
|
|
color: ['#aaa'] ,
|
||
|
|
type: 'dashed' ,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '实时值',
|
||
|
|
type: 'line',
|
||
|
|
areaStyle: {},
|
||
|
|
data: dataseries[0]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '预测值',
|
||
|
|
type: 'line',
|
||
|
|
data: dataseries[1]
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
var myChart = echarts.init(document.getElementById(id));
|
||
|
|
myChart.setOption(option, true);
|
||
|
|
}
|
||
|
|
function showBar(id,data,dataMax){
|
||
|
|
var option = {
|
||
|
|
grid: {
|
||
|
|
left: 0 ,
|
||
|
|
top: 0 ,
|
||
|
|
right: 0 ,
|
||
|
|
bottom: 0 ,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisLabel: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
axisLabel: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
max:dataMax,
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
data: [data],
|
||
|
|
type: 'bar',
|
||
|
|
itemStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(
|
||
|
|
0, 0, 0, 1,
|
||
|
|
[
|
||
|
|
{offset: 0, color: '#94EBFF'},
|
||
|
|
{offset: 0.5, color: '#62D1FF'},
|
||
|
|
{offset: 1, color: '#2AB4FF'}
|
||
|
|
]
|
||
|
|
)
|
||
|
|
},
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
var myChart = echarts.init(document.getElementById(id));
|
||
|
|
myChart.setOption(option, true);
|
||
|
|
}
|
||
|
|
//添加千分位符合
|
||
|
|
function toThousands(num) {
|
||
|
|
var nums =num;
|
||
|
|
var re=/\d{1,3}(?=(\d{3})+$)/g;
|
||
|
|
var n1=0;
|
||
|
|
if(nums!=null && nums!='' && nums!=undefined){
|
||
|
|
n1=nums.toString().replace(/^(\d+)((\.\d+)?)$/,function(s,s1,s2){return s1.replace(re,"$&,")+s2;});
|
||
|
|
}
|
||
|
|
return n1;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
|
|
<div class="wrapper">
|
||
|
|
<div class="content-wrapper bg_color" style=" overflow-x: auto;padding:10px 20px 0px 20px;">
|
||
|
|
<!-- BEGIN CONTAINER -->
|
||
|
|
<input type="hidden" name="todayAddnum" value="${todayAddnum}">
|
||
|
|
<input type="hidden" name="todonum" value="${todonum}">
|
||
|
|
<input type="hidden" name="donownum" value="${donownum}">
|
||
|
|
<input type="hidden" name="jsp_id" id="jsp_id" value="">
|
||
|
|
<input type="hidden" name="time_input" id="time_input" value="${nowDate}">
|
||
|
|
<div class="row" >
|
||
|
|
<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
|
||
|
|
<div class="bgimg-map">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
|
||
|
|
<div class="floattop_div_1 thumbnail bg_color" style="overflow:hidden;">
|
||
|
|
<div class="nav-tabs-custom bg_color" style="margin-bottom:0px;">
|
||
|
|
<ul class="nav nav-tabs" id="tab1_ul" >
|
||
|
|
<li id="tab_1_li" role="presentation" class="active" >
|
||
|
|
<a href="#tab_1" role="tab" data-toggle="tab" aria-expanded="true" id="CQBYT_Dosage">加药量计算</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="tab-content" style="padding: 10px;">
|
||
|
|
<div role="tabpanel" class="tab-pane active" id="tab_1">
|
||
|
|
<div class="row" >
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-blue">输入参数</label>
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-red">计算结果</label>
|
||
|
|
</div>
|
||
|
|
<div class="row" >
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-small pump-text-blue">总原水流量<span class="pump-text-white low_TotalRawWaterFlow_input">0</span>m³/h</label>
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-small pump-text-red">加药量<span class="pump-text-white low_dosage_calculation">0</span>mg/l</label>
|
||
|
|
</div>
|
||
|
|
<div class="row" >
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-small pump-text-blue">原水浊度<span class="pump-text-white low_RawWaterTurbidity_input">0</span>NTU</label>
|
||
|
|
</div>
|
||
|
|
<div class="row" >
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-small pump-text-blue">滤后水浊度<span class="pump-text-white low_TurbidityOfFilteredWater_input">0</span>NTU</label>
|
||
|
|
</div>
|
||
|
|
<div class="row" style="padding-top: 70px;">
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-blue"><i class="iconfont iconshishigailan pump-text-small"></i> 实时值</label>
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-red"><i class="iconfont iconyuce pump-text-small"></i> 预测值</label>
|
||
|
|
</div>
|
||
|
|
<div class="row" >
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-small pump-text-blue">加药量<span class="pump-text-white low_dosage">0</span>L/h</label>
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-small pump-text-red">加药量<span class="pump-text-white low_dosage_forecast">25</span>L/h</label>
|
||
|
|
</div>
|
||
|
|
<div class="chart_line" id="low_dosage" style="width: 650px;height: 150px;"></div>
|
||
|
|
<div class="row" style="padding-top: 40px;">
|
||
|
|
<label class="col-lg-6 col-md-6 col-sm-12 col-xs-12 pump-text pump-text-small pump-text-blue">水质曲线</label>
|
||
|
|
</div>
|
||
|
|
<div class="chart_line" id="low_WaterQuality" style="width: 650px;height: 150px;"></div>
|
||
|
|
</div>
|
||
|
|
<div role="tabpanel" class="tab-pane" id="tab_2">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<div id="AbnormalView" style="display:none;height: 400px"></div>
|
||
|
|
<div id="AbnormalDetails" style="display:none;height: 600px"></div>
|
||
|
|
</html>
|