Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/equipment/pumpManagement.jsp
2026-01-16 14:13:44 +08:00

528 lines
23 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: 930px;
height: 1030px;
background-image: url(<%=request.getContextPath()%>/IMG/pump/pump_bg.png) ;
background-repeat: no-repeat;
background-position: 0 0;
position: relative;
}
.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;
var widthV =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;
widthV = $(window).width()/1690;
$(".bgimg-map").css("height",1030*heightV);
$(".bgimg-map").css("background-size",""+(930*heightV)+"px "+(1030*heightV)+"px");
$(".chart_line").css("width",650*widthV);
$(".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/getWaterForecastData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
var arr= JSON.parse(data);
console.log(arr);
$(".bgimg-map").empty();
var htmlStr = '<div id="bar_one" style="width: '+(120*heightV)+'px;height: '+(462*heightV)+'px;position: absolute;left: '+(149*heightV)+'px;top: '+(57*heightV)+'px;"></div>'+
'<div id="bar_two" style="width: '+(120*heightV)+'px;height: '+(462*heightV)+'px;position: absolute;left: '+(149*heightV)+'px;top: '+(558*heightV)+'px;"></div>';
$(".bgimg-map").append(htmlStr);
var low_pressure_flow_dataseries=[];
var low_pressure_flow_dataxAxis=[];
var low_pressure_dataseries=[];
var low_pressure_dataxAxis=[];
var high_pressure_flow_dataseries=[];
var high_pressure_flow_dataxAxis=[];
var high_pressure_dataseries=[];
var high_pressure_dataxAxis=[];
var imgs =[];
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_pressure_flow'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
low_pressure_flow_dataseries[0]=dataseries;
}
if(arr.rows[i].elementCode=='low_pressure_flow_forecast'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
//low_pressure_flow_dataxAxis.push(mPointHistory[m].measuredt.substring(11,16));
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
low_pressure_flow_dataseries[1]=dataseries;
}
if(arr.rows[i].elementCode=='low_pressure'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
low_pressure_dataseries[0]=dataseries;
}
if(arr.rows[i].elementCode=='low_pressure_forecast'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
//low_pressure_dataxAxis.push(mPointHistory[m].measuredt.substring(11,16));
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
low_pressure_dataseries[1]=dataseries;
}
if(arr.rows[i].elementCode=='high_pressure_flow'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
high_pressure_flow_dataseries[0]=dataseries;
}
if(arr.rows[i].elementCode=='high_pressure_flow_forecast'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
//high_pressure_flow_dataxAxis.push(mPointHistory[m].measuredt.substring(11,16));
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
high_pressure_flow_dataseries[1]=dataseries;
}
if(arr.rows[i].elementCode=='high_pressure'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
high_pressure_dataseries[0]=dataseries;
}
if(arr.rows[i].elementCode=='high_pressure_forecast'){
var mPointHistory = arr.rows[i].mPointHistory;
var dataseries =[];
for(var m=0;m<mPointHistory.length;m++){
//high_pressure_dataxAxis.push(mPointHistory[m].measuredt.substring(11,16));
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substring(11,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
high_pressure_dataseries[1]=dataseries;
}
if(arr.rows[i].elementCode=='bar_one'){
showBar("bar_one",value,dataMax);
}
if(arr.rows[i].elementCode=='bar_two'){
showBar("bar_two",value,dataMax);
}
if(arr.rows[i].elementCode.indexOf("pump_1") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"66","value":value};
imgs.push(obj)
}
if(arr.rows[i].elementCode.indexOf("pump_2") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"183","value":value};
imgs.push(obj)
}
if(arr.rows[i].elementCode.indexOf("pump_3") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"313","value":value};
imgs.push(obj)
}
if(arr.rows[i].elementCode.indexOf("pump_4") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"430","value":value};
imgs.push(obj)
}
if(arr.rows[i].elementCode.indexOf("pump_5") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"590","value":value};
imgs.push(obj)
}
if(arr.rows[i].elementCode.indexOf("pump_6") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"707","value":value};
imgs.push(obj)
}
if(arr.rows[i].elementCode.indexOf("pump_7") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"831","value":value};
imgs.push(obj)
}
if(arr.rows[i].elementCode.indexOf("pump_8") >= 0){
var obj = {"id":arr.rows[i].elementCode,"left":"410","top":"948","value":value};
imgs.push(obj)
}
}
}
showDoubleLine('low_pressure_flow',low_pressure_flow_dataxAxis,low_pressure_flow_dataseries);
showDoubleLine('low_pressure',low_pressure_dataxAxis,low_pressure_dataseries);
showDoubleLine('high_pressure_flow',high_pressure_flow_dataxAxis,high_pressure_flow_dataseries);
showDoubleLine('high_pressure',high_pressure_dataxAxis,high_pressure_dataseries);
htmlStr="";
for(var i=0;i<imgs.length;i++){
var src = "<%=request.getContextPath()%>/IMG/pump/pump.png";
if(imgs[i].value!=null && imgs[i].value!=undefined && imgs[i].value!='NULL' ){
if(imgs[i].value==1){
src = "<%=request.getContextPath()%>/IMG/pump/pump_green.png";
}else{
if(imgs[i].value==0){
src = "<%=request.getContextPath()%>/IMG/pump/pump_red.png";
}
}
}
htmlStr += '<img id="'+imgs[i].id+'" src= "'+src+'" '+
' style="width: '+(111*heightV)+'px;height: '+(80*heightV)+'px;position: absolute;left: '+(imgs[i].left*heightV)+'px;top: '+(imgs[i].top*heightV)+'px;"/>';
}
$(".bgimg-map").append(htmlStr);
});
}
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',
areaStyle: {},
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_QuantityQuality">泵组水量预测</a>
</li>
<!-- <li id="tab_2_li" role="presentation" >
<a href="#tab_2" role="tab" data-toggle="tab" aria-expanded="true" id="CQBYT_ProcessOperation">泵组优化调度</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"><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_pressure_flow">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_pressure_flow_forecast">25</span>m³/h</label>
</div>
<div class="chart_line" id="low_pressure_flow" style="width: 650px;height: 150px;"></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_pressure">0</span>Mpa</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_pressure_forecast">25</span>Mpa</label>
</div>
<div class="chart_line" id="low_pressure" style="width: 650px;height: 150px;"></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 high_pressure_flow">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 high_pressure_flow_forecast">25</span>m³/h</label>
</div>
<div class="chart_line" id="high_pressure_flow" style="width: 650px;height: 150px;"></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 high_pressure">0</span>Mpa</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 high_pressure_forecast">25</span>Mpa</label>
</div>
<div class="chart_line" id="high_pressure" 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>