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

1870 lines
84 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ 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" />
<title>
<%= ServerObject.atttable.get("TOPTITLE")%>
</title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<style type="text/css">
.whole-body{
background: transparent;
width: 3342px;
height: 1730px;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 70px;
padding-right: 70px;
}
.content-wrapper-bg-darkblue{
background: rgba(0,17,33,0.70);
border: 1px solid #454545;
border-radius: 14px;
}
.content-left, .content-right{
float: left;
padding:0;
}
.content-left{
width: 810px;
}
.content-right{
width: 2380px;
}
.content-right-subject{
min-height: 215px;
}
.content-bg-darkblue{
background: rgba(12,12,12,0.60);
}
.homePage-btn{
cursor:pointer;
background: rgba(54,167,204,0.70);
border-radius: 10px;
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9,
.col-xs-1-5 {
padding-right: 5px;
padding-left: 5px
}
.col-xs-1-5 {
width: 12%;
}
.col-xs-1-5{
float: left;
}
.col-xs-1-5 {
position: relative;
min-height: 1px;
}
.title-height{
height:70px;
}
.row-10{
height:10%;
}
.row-15{
height:15%;
}
.row-25{
height:25%;
}
.row-30{
height:30%;
}
.row-35{
height:35%;
}
.row-40{
height:40%;
}
.row-50{
height:50%;
}
.row-70{
height:70%;
}
.row-75{
height:75%;
}
.row-100{
height:100%;
}
.content-wrapper-bg-grey{
background: #eeeeee;
}
.content-wrapper-bg-white,.bgcolor-white,.bgcolor-white-light{
background: #ffffff;
border-radius: 5px;
}
.content-wrapper-bg-white,.content-wrapper-bg-transparent{
margin:0 5px;
border-radius: 5px;
}
.bgcolor-blue{
background: #052941;
}
.margin-bottom-15{
margin-bottom: 15px;
}
.margin-bottom-22{
margin-bottom: 22px;
}
.margin-bottom-25{
margin-bottom: 25px;
}
.margin-bottom-36{
margin-bottom: 22px;
}
.margin-bottom-55{
margin-bottom: 55px;
}
.margin-bottom-75{
margin-bottom: 75px;
}
.padding-topbottom-35{
padding-top: 35px;
padding-bottom: 35px;
}
.pad-topbottom-60{
padding-top: 60px;
padding-bottom: 60px;
}
.pad-leftright-72{
padding-left: 72px;
padding-right: 72px;
}
.pad-bottom-10{
padding-bottom: 10px;
}
.padding-top-5{
padding-top:5px;
}
.padding-top-10{
padding-top: 10px;
}
.padding-top-15{
padding-top: 15px;
}
.padding-top-27{
padding-top: 27px;
}
.padding-top-90{
padding-top: 90px;
}
.line-height-08{
line-height: 0.8;
}
.line-height-1{
line-height: 1;
}
.line-height-2{
line-height: 2;
}
.line-height-2-3{
line-height: 2.3;
}
.line-height-3{
line-height: 3;
}
.line-height-5{
line-height: 5;
}
.line-height-6{
line-height: 6;
}
.font-size-12{
font-size: 12px;
font-weight: 400;
line-height: 24px;
}
.font-size-14{
font-size: 14px;
line-height: inherit;
}
.font-size-16{
font-size: 16px;
}
.font-size-20{
font-size: 20px;
}
.font-size-22{
font-size: 22px;
}
.font-size-30{
font-size: 30px;
}
.font-size-35{
font-size: 35px;
}
.font-size-36{
font-size: 36px;
}
.font-size-40{
font-size: 40px;
line-height: normal;
}
.font-size-50{
font-size: 50px;
}
.font-size-60{
font-size: 60px;
}
.font-size-65{
font-size: 65px;
}
.font-size-70{
font-size: 70px;
}
.font-color-white,.font-color-dark-white{
color: #FFFFFF;
}
.font-color-black{
color: #0d2336;
font-weight: 600;
}
.font-color-red{
color: #E7A2FF
}
.font-color-redlight{
color: #CE00FF
}
.font-color-blue,.font-color-dark-blue{
color: #1472FF;
}
.font-color-lightBlue,.font-color-light-blue{
color: #04FFFF;
}
.font-color-green{
color: #69F9B6;
}
.border-left{
border-left: 1px solid #c1c1c1;
}
.border-right{
border-right: 2px solid #ffffff;
}
.border-bottom{
border-bottom: 1px solid #c1c1c1;
}
.border-leftAndRight{
border-left: 1px solid #c1c1c1;border-right: 1px solid #c1c1c1;
}
.bgcolor-blue-light{
background: #192B73;
}
.bgcolor-transparent{
background: transparent;
border-radius: 5px;
}
.img-icon{
width: 70px;
height: 70px;
}
.img-pump{
width: 60px;
height: 97px;
}
.progress_bar{
min-width: 630px;
height: 25px;
}
.polarBarLegend{
width: 360px;
height: 200px;
position: fixed;
}
.polarBar{
min-width: 630px;
height: 450px;
}
.cursor-pointer{
cursor: pointer;
}
.pressure-line{
width: 1180px;
height: 560px;
}
.rawwater-line{
width: 2360px;
height: 560px;
}
.instructions-line{
width: 2360px;
height: 355px;
}
</style>
<script type="text/javascript">
var fontcolor_grey = '#aeaeae';
var fontcolor_black = '#0d2336';
var color_blue = '#36FFF9';
var color_blue_other = '#1D4F6D';
var img_name = '';
var color = ['#649DFF','#64FFFA','#ff2ee3','#2e97ff','#ffb536'];
$(function () {
var width = $(window).width();
var height = $(window).height();
var proportion_width = width/3340;
var proportion_height = height/1730;
if(width>0 && width<=3340){
$('.whole-body').width($('.whole-body').width()*proportion_width);
$('.whole-body').height($('.whole-body').height()*proportion_height)
$('.whole-body').css("paddingTop",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.whole-body').css("paddingBottom",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.whole-body').css("paddingLeft",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.whole-body').css("paddingRight",$('.whole-body').css("paddingTop").replace('px', '')*proportion_height);
$('.content-left').width($('.content-left').width()*proportion_width);
$('.content-right').width($('.content-left').width()*proportion_width);
}
$('.polarBar').width($('.polarBar').parent().width());
$('.progress_bar').width($('.progress_bar').parent().width()-80);
var data = [87,90]
polarBar('polarBar',data);
data = {
value1:5,
value2:10,
}
progressBar('progress_bar',data,'#69F6F9','#1472FF');
var legenddata = ['水位变化趋势','配电单耗变化趋势'];
var seriesdata = [
{
name: legenddata[0],
type: 'bar',
barWidth: 20 ,
data: [['01-01',10],['01-02',11],['01-03',12],['01-04',13],['01-05',14],['01-06',11],['01-07',13],
['01-08',11],['01-09',12],['01-10',13],['01-11',14],['01-12',11],['01-13',13]
]
}
]
doBar('instructions-line',legenddata,seriesdata);
seriesdata = [
{
name: legenddata[0],
type: 'line',
data: [['2022-01-14 00:00',10],['2022-01-14 01:00',11],['2022-01-14 02:00',12],['2022-01-14 03:00',13],['2022-01-14 04:00',14],['2022-01-14 05:00',11],['2022-01-14 06:00',13]
,['2022-01-14 07:00',14],['2022-01-14 08:00',12],['2022-01-14 09:00',15],['2022-01-14 10:00',15],['2022-01-14 11:00',11],['2022-01-14 12:00',12],['2022-01-14 13:00',13]
,['2022-01-14 14:00',12],['2022-01-14 15:00',11]]
}
]
echarts_line('pressure-cumulative',legenddata,seriesdata,'累计压力调整');
echarts_line('pressure-actual',legenddata,seriesdata,'实际压力变化趋势');
echarts_line('pressure-dispatch',legenddata,seriesdata,'调度指令压力变化趋势');
echarts_line('rawwater-water',legenddata,seriesdata,'水量数据曲线');
seriesdata = [
{
name: legenddata[0],
type: 'line',
data: [['2022-01-14 00:00',10],['2022-01-14 01:00',11],['2022-01-14 02:00',12],['2022-01-14 03:00',13],['2022-01-14 04:00',14],['2022-01-14 05:00',11],['2022-01-14 06:00',13]
,['2022-01-14 07:00',14],['2022-01-14 08:00',12],['2022-01-14 09:00',15],['2022-01-14 10:00',15],['2022-01-14 11:00',11],['2022-01-14 12:00',12],['2022-01-14 13:00',13]
,['2022-01-14 14:00',12],['2022-01-14 15:00',11]]
},
{
name: legenddata[1],
type: 'line',
yAxisIndex: 1,
data: [['2022-01-14 00:00',20],['2022-01-14 01:00',21],['2022-01-14 02:00',22],['2022-01-14 03:00',23],['2022-01-14 04:00',24],['2022-01-14 05:00',21],['2022-01-14 06:00',23]
,['2022-01-14 07:00',24],['2022-01-14 08:00',22],['2022-01-14 09:00',25],['2022-01-14 10:00',25],['2022-01-14 11:00',21],['2022-01-14 12:00',22],['2022-01-14 13:00',23]
,['2022-01-14 14:00',22],['2022-01-14 15:00',21]]
}
]
echarts_line_2y('reservoir-energy',legenddata,seriesdata,'能效模式');
echarts_line_2y('reservoir-steady',legenddata,seriesdata,'稳态模式');
getData();
setInterval("getData()",60000);
});
function addAndRemove4Class(one,two){
$('.'+one).addClass(two);
$('.'+one).removeClass(one);
}
function getData(){
var bizid = "";
var jsp_id = $('#jsp_id').val();
var time_input = $('#time_input').val();
$.post(ext.contextPath + '/evaluate/getEvaluateData.do', {bizid:bizid,time:time_input,jsp_id:jsp_id} , function(data) {
var arr= JSON.parse(data);
console.log(arr);
var pressure_cumulative_seriesdata = [];
var pressure_actual_seriesdata = [];
var reservoir_lvl_seriesdata = [];
var reservoir_pump_seriesdata = [];
var rawwater_water_seriesdata = [];
var pressure_dispatch_seriesdata = [];
var instructions_line_seriesdata = [];
var production_load_rate = null;
var automatic_execution_rate = null;
var cumulative_times_today = 0;
var automatic_execution_times = 0;
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;
var rate = 1;
var nowdate = getNowTime();
if(arr.rows[i].visualCacheConfig!=null
&& arr.rows[i].visualCacheConfig!=undefined
&& arr.rows[i].visualCacheConfig!=''){
var visualCacheConfig = arr.rows[i].visualCacheConfig;
if(visualCacheConfig.numtail!=null && visualCacheConfig.numtail!=undefined && visualCacheConfig.numtail!=''){
numtail = visualCacheConfig.numtail;
}
}
if(arr.rows[i].visualCacheData!=null
&& arr.rows[i].visualCacheData!=undefined
&& arr.rows[i].visualCacheData!=''){
var visualCacheData = arr.rows[i].visualCacheData;
if(visualCacheData.inivalue!=null && visualCacheData.inivalue!=undefined && visualCacheData.inivalue!=''){
value = visualCacheData.inivalue;
}else{
if(visualCacheData.value!=null && visualCacheData.value!=undefined && visualCacheData.value!=''){
value = visualCacheData.value;
}else{
if(arr.rows[i].mPoint!=null && arr.rows[i].mPoint!=undefined && arr.rows[i].mPoint!=''){
var mPoint = arr.rows[i].mPoint;
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
value = mPoint.parmvalue;
}
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
dataMax = mPoint.alarmmax;
}
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
numtail = mPoint.numtail;
}
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
nowdate = mPoint.measuredt;
}
}
}
}
if(visualCacheData.numtail!=null && visualCacheData.numtail!=undefined && visualCacheData.numtail!=''){
numtail = visualCacheData.numtail;
}
if(visualCacheData.insdt!=null && visualCacheData.insdt!=undefined && visualCacheData.insdt!=''){
nowdate = visualCacheData.insdt;
}
if(visualCacheData.rate!=null && visualCacheData.rate!=undefined && visualCacheData.rate!=''){
rate = visualCacheData.rate;
}
}else{
var mPoint = arr.rows[i].mPoint;
if(mPoint!=null && mPoint!=undefined && mPoint!=''){
if(mPoint.parmvalue!=null && mPoint.parmvalue!=undefined && mPoint.parmvalue!=''){
value = mPoint.parmvalue;
}
if(mPoint.alarmmax!=null && mPoint.alarmmax!=undefined && mPoint.alarmmax!=''){
dataMax = mPoint.alarmmax;
}
if(mPoint.numtail!=null && mPoint.numtail!=undefined && mPoint.numtail!=''){
numtail = mPoint.numtail;
}
if(mPoint.measuredt!=null && mPoint.measuredt!=undefined && mPoint.measuredt!=''){
nowdate = mPoint.measuredt;
}
}
}
if($("."+arr.rows[i].elementCode+"_img").length > 0){
var src = "<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png";
if(value==0){
src = "<%=request.getContextPath()%>/IMG/evaluate/pump_green.png";
}
if(value==1){
src = "<%=request.getContextPath()%>/IMG/evaluate/pump_red.png";
}
$("."+arr.rows[i].elementCode+"_img").html('<img class="img-pump" src='+src+'>');
}
if($("."+arr.rows[i].elementCode+"_text").length > 0){
var text = "";
if(value==1){
text = "运行";
}else{
text = "检修";
}
$("."+arr.rows[i].elementCode+"_text").html(text);
}
value = parseFloat(value)*rate;
value = value.toFixed(numtail);
if($("."+arr.rows[i].elementCode).length > 0){
$("."+arr.rows[i].elementCode).html(toThousands(value));
}
if($("."+arr.rows[i].elementCode).parent().find('.nowdate').length > 0){
$("."+arr.rows[i].elementCode).parent().find('.nowdate').html(nowdate.substring(11,16));
}
if(arr.rows[i].elementCode=='cumulative_times_today'){
instructions_line_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
cumulative_times_today = value;
}
if(arr.rows[i].elementCode=='automatic_execution_times'){
automatic_execution_times = value;
}
if(arr.rows[i].elementCode=='pressure_cumulative'){
pressure_cumulative_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='pressure_actual'){
pressure_actual_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='reservoir_lvl'){
reservoir_lvl_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='reservoir_pump'){
reservoir_pump_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='rawwater_water'){
rawwater_water_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
if(arr.rows[i].elementCode=='pressure_dispatch'){
pressure_dispatch_seriesdata = getdataseries(arr.rows[i].mPointHistory,arr.rows[i].visualCacheDataList,numtail);
}
}
}
var implementation_rate = 0;
if(cumulative_times_today>0){
implementation_rate = automatic_execution_times/cumulative_times_today*100;
}
var manual_adjustment_times = cumulative_times_today-automatic_execution_times;
var adjustment_rate = 0;
if(cumulative_times_today>0){
adjustment_rate = manual_adjustment_times/cumulative_times_today*100;
}
if($(".implementation_rate").length > 0){
implementation_rate = implementation_rate.toFixed(0);
$(".implementation_rate").html(toThousands(implementation_rate));
}
if($(".manual_adjustment_times").length > 0){
manual_adjustment_times = manual_adjustment_times.toFixed(0);
$(".manual_adjustment_times").html(toThousands(manual_adjustment_times));
}
if($(".adjustment_rate").length > 0){
adjustment_rate = adjustment_rate.toFixed(0);
$(".adjustment_rate").html(toThousands(adjustment_rate));
}
var data = [production_load_rate,automatic_execution_rate]
if(production_load_rate!=null && production_load_rate!=''&&
automatic_execution_rate!=null && automatic_execution_rate!=''){
polarBar('polarBar',data);
}
var legenddata = [''];
var seriesdata = [
{
name: legenddata[0],
type: 'bar',
barWidth: 20 ,
data: instructions_line_seriesdata
}
]
if(instructions_line_seriesdata!=null && instructions_line_seriesdata.length>0){
doBar('instructions-line',legenddata,seriesdata);
}
var pressure_cumulative_legenddata = ['累计压力调整'];
var seriesdata = [
{
name: pressure_cumulative_legenddata[0],
type: 'line',
data: pressure_cumulative_seriesdata
}
]
if(pressure_cumulative_seriesdata!=null && pressure_cumulative_seriesdata.length>0){
echarts_line('pressure-cumulative',pressure_cumulative_legenddata,seriesdata,'累计压力调整');
}
var pressure_actual_legenddata = ['实际压力变化趋势'];
seriesdata = [
{
name: pressure_actual_legenddata[0],
type: 'line',
data: pressure_actual_seriesdata
}
]
if(pressure_actual_seriesdata!=null && pressure_actual_seriesdata.length>0){
echarts_line('pressure-actual',pressure_actual_legenddata,seriesdata,'实际压力变化趋势');
}
legenddata = ['水位变化趋势','配电单耗变化趋势'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
data: reservoir_lvl_seriesdata
},
{
name: legenddata[1],
type: 'line',
yAxisIndex: 1,
data: reservoir_pump_seriesdata
}
]
if(reservoir_lvl_seriesdata!=null && reservoir_lvl_seriesdata.length>0 && reservoir_pump_seriesdata!=null && reservoir_pump_seriesdata.length>0){
echarts_line_2y('reservoir-energy',legenddata,seriesdata,'能效模式');
echarts_line_2y('reservoir-steady',legenddata,seriesdata,'稳态模式');
}
legenddata = ['调度指令压力变化趋势'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
data: pressure_dispatch_seriesdata
}
]
if(pressure_dispatch_seriesdata!=null && pressure_dispatch_seriesdata.length>0){
echarts_line('pressure-dispatch',legenddata,seriesdata,'调度指令压力变化趋势');
}
legenddata = ['水量数据曲线'];
seriesdata = [
{
name: legenddata[0],
type: 'line',
data: rawwater_water_seriesdata
}
]
if(rawwater_water_seriesdata!=null && rawwater_water_seriesdata.length>0){
echarts_line('rawwater-water',legenddata,seriesdata,'水量数据曲线');
}
});
}
function getdataseries(mPointHistory,visualCacheDataList,numtail){
var dataseries =[];
if(mPointHistory!=null
&& mPointHistory!=undefined
&& mPointHistory!=''){
var mPointHistory = mPointHistory;
for(var m=0;m<mPointHistory.length;m++){
var dataserie =[];
dataserie.push(mPointHistory[m].measuredt.substr(0,16));
dataserie.push(mPointHistory[m].parmvalue.toFixed(numtail));
dataseries.push(dataserie);
}
}else{
if(visualCacheDataList!=null
&& visualCacheDataList!=undefined
&& visualCacheDataList!=''){
var visualCacheDataList = visualCacheDataList;
for(var m=0;m<visualCacheDataList.length;m++){
var dataserie =[];
dataserie.push(visualCacheDataList[m].insdt.substr(0,16));
dataserie.push(visualCacheDataList[m].value.toFixed(numtail));
dataseries.push(dataserie);
}
}
}
return dataseries;
}
function echarts_line(id,legenddata,seriesdata,title){
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
//有的话就获取已有echarts实例的DOM节点。
if (lifeChart != null) { // 如果存在,就进行销毁。
lifeChart.dispose();
}
var option = {
color:color,
tooltip: {
trigger: 'axis'
},
title:{
text: title,
x: 'center',
textStyle: {
fontSize: '36',
fontWeight: '400',
color: '#ffffff',
},
},
/* legend: {
data: legenddata,
x:'right',
textStyle: {
color: fontcolor_grey ,
fontSize: 12 ,
},
icon:'roundRect'
}, */
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'time',
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
yAxis: {
type: 'value',
max: function (value) {
if(value.max>1){
return Math.floor(value.max*1.5);
}else{
return (value.max+1);
}
},
axisLine: {
show: true,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed' ,
}
},
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
series: seriesdata,
};
lifeChart = echarts.init(document.getElementById(id));
lifeChart.setOption(option,true);
}
function echarts_line_2y(id,legenddata,seriesdata,title){
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
//有的话就获取已有echarts实例的DOM节点。
if (lifeChart != null) { // 如果存在,就进行销毁。
lifeChart.dispose();
}
var option = {
color:['#07D5FF','#FFFF07'],
tooltip: {
trigger: 'axis'
},
title:{
text: title,
x: 'center',
textStyle: {
fontSize: '36',
fontWeight: '400',
color: '#ffffff',
},
},
legend: {
data: legenddata,
x:'right',
top: '10%',
textStyle: {
color: '#ffffff',
fontSize: 30 ,
},
icon:'circle'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '22%',
containLabel: true
},
xAxis: {
type: 'time',
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
yAxis: [
{
type: 'value',
max: function (value) {
if(value.max>1){
return Math.floor(value.max*1.5);
}else{
return (value.max+1);
}
},
axisLine: {
show: true,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed' ,
}
},
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
{
type: 'value',
max: function (value) {
if(value.max>1){
return Math.floor(value.max*1.5);
}else{
return (value.max+1);
}
},
axisLine: {
show: true,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed' ,
}
},
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
}
],
series: seriesdata,
};
lifeChart = echarts.init(document.getElementById(id));
lifeChart.setOption(option,true);
}
function doBar(id,legenddata,seriesdata){
var lifeChart = echarts.getInstanceByDom(document.getElementById(id));
//有的话就获取已有echarts实例的DOM节点。
if (lifeChart != null) { // 如果存在,就进行销毁。
lifeChart.dispose();
}
var option = {
color:['#13E0FF'],
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '5%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
yAxis: {
type: 'value',
max: function (value) {
if(value.max>1){
return Math.floor(value.max*1.5);
}else{
return (value.max+1);
}
},
axisLine: {
show: true,
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed' ,
}
},
axisLabel: {
color: '#a0a0a0',
fontSize: 35 ,
}
},
series: seriesdata,
};
lifeChart = echarts.init(document.getElementById(id));
lifeChart.setOption(option,true);
}
function doBarAndPie(id,data){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#71D3FF','#8871FF','#F671FF','#28EC77','#FFFA71'],
title: [
{
text: data.value + '%',
left: '50%',
top: '40%',
textAlign: 'center',
textStyle: {
fontSize: '40',
fontWeight: '400',
color: '#69F6F9',
textAlign: 'center',
textBorderColor: 'rgba(0, 0, 0, 0)',
textShadowColor: '#000',
textShadowBlur: '0',
textShadowOffsetX: 0,
textShadowOffsetY: 1,
},
},
],
polar: {
radius: ['45%', '55%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
clockwise: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitLine: {
show: false,
},
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
series: [
{
name: '',
type: 'bar',
roundCap: true,
z: 2,
showBackground: true,
data: [data.value],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: '#36FFF9'
},
},
},
{
name: 'Access From',
type: 'pie',
radius: ['60%', '80%'],
label: {
color: "#fff" ,
},
center: ['50%', '50%'],
avoidLabelOverlap: false,
data: data.list
}
],
};
myChart.clear();
myChart.setOption(option, true);
}
function progressBar(id,data,color1,color2){
var myChart = echarts.init(document.getElementById(id));
var option={
grid: {
top: 0,
bottom: 0,
left: '0',
right: '0'
},
xAxis: {
show: false,
type: "value",
boundaryGap: [0, 0]
},
yAxis: [
{
type: "category",
data: [""],
axisLine: { show: false },
axisTick: [
{
show: false
}
]
}
],
series: [
{
name: "金额",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 9,
color: color1
}
},
barWidth: 20,
data: [data.value1]
},
{
name: "背景",
type: "bar",
barWidth: 20,
barGap: "-100%",
data: [data.value2],
itemStyle: {
normal: {
color: color2,
barBorderRadius: 9
}
}
}
]
}
myChart.clear();
myChart.setOption(option, true);
}
function polarBar(id,data){
var myChart = echarts.init(document.getElementById(id));
var option = {
color:['#69F9B6','#1472FF','#1A3D70','#1A3D70'],
grid: {
top: 0,
bottom: 0,
left: '0',
right: '0'
},
angleAxis: {
max: 133,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
data: ['AAA'],
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
polar: {
radius: ['100%', '60%'],
center: ['50%', '50%'],
},
series: [
{
type: 'bar',
data: [data[0]],
stack: 'A',
coordinateSystem: 'polar',
},
{
type: 'bar',
data: [data[1]],
stack: 'B',
coordinateSystem: 'polar',
},
{
type: 'bar',
data: [100-data[0]],
stack: 'A',
coordinateSystem: 'polar',
},
{
type: 'bar',
data: [100-data[1]],
stack: 'B',
coordinateSystem: 'polar',
}
]
};
myChart.clear();
myChart.setOption(option, true);
}
function homePage() {
$('.jump-area').hide();
$('.sub-region').hide();
$('.homePage').show();
}
function jumpArea(el) {
$('.homePage').hide();
$('.sub-region').hide();
$('.jump-area').show();
$('.'+el).show();
}
//添加千分位符合
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>
<div class="whole-body content-wrapper-bg-darkblue">
<!-- BEGIN CONTAINER -->
<input type="hidden" name="jsp_id" id="jsp_id" value="evaluate_homepage">
<div class="col-xs-12 text-center font-size-36 font-color-white margin-bottom-55">
<label class="col-xs-2 font-size-50 title-height">调度仿真敏捷评估</label>
<span class="col-xs-3 title-height line-height-2-3">开始运行时间:<span class="font-color-lightBlue">2022-1-1 13:30</span></span>
<span class="col-xs-2 title-height line-height-2-3">连续运行时间:<span class="font-color-lightBlue">530小时</span></span>
<span class="col-xs-4 title-height line-height-2-3">当前指令执行情况:<span class="font-color-lightBlue">完成计算 推送指令 自动执行</span></span>
<div class="col-xs-1 title-height line-height-2-3" ><div class="homePage-btn jump-area" style="display:none" onclick="homePage()">主页</div></div>
</div>
<div class="col-xs-12 text-center font-size-36 font-color-white">
<div class="content-left text-left padding-top-27">
<div class="row">
<div class="col-xs-12">
<div class="polarBarLegend">
<span class="col-xs-12"><div class="col-xs-7 line-height-2-3">生产负荷率</div><div class="col-xs-5 font-color-blue"><span class="font-size-60">87</span>%</div></span>
<span class="col-xs-12"><div class="col-xs-7 line-height-2-3">自动执行率</div><div class="col-xs-5 font-color-green"><span class="font-size-60">90</span>%</div></span>
</div>
<div class="polarBar" id="polarBar"></div>
</div>
</div>
<div class="row padding-top-90 margin-bottom-36">
<div class="col-xs-4 margin-bottom-25">方案推送</div>
<div class="col-xs-4 margin-bottom-25">压力调整</div>
<div class="col-xs-4 margin-bottom-25">总响应时间</div>
<div class="col-xs-4 font-color-lightBlue"><span class="font-size-60 scheme_push_time">1</span>min</div>
<div class="col-xs-4 font-color-blue font-size-60"><span class="font-size-60 pressure_adjustment_time">2</span>min</div>
<div class="col-xs-4 font-color-lightBlue font-size-60"><span class="font-size-60 total_response_time">3</span>min</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="progress_bar" id="progress_bar"></div>
</div>
</div>
<div class="row padding-top-90 margin-bottom-75">
<div class="col-xs-6 margin-bottom-25">水龄</div>
<div class="col-xs-6 margin-bottom-25">调度精准性</div>
<div class="col-xs-6 font-color-lightBlue"><span class="font-size-60 water_age">3</span>小时</div>
<div class="col-xs-6 font-color-lightBlue"><span class="font-size-60 scheduling_accuracy">98</span>%</div>
</div>
<div class="row text-center jump-area" style="display:none">
<div class="col-xs-4 margin-bottom-75 cursor-pointer" onclick="jumpArea('instructions')" >
<div class="col-xs-12">
<img class="img-icon" alt="调度指令" src="<%=request.getContextPath()%>/IMG/evaluate/instructions.png">
</div>
<span class="col-xs-12 font-size-40">调度指令</span>
</div>
<div class="col-xs-4 margin-bottom-75 cursor-pointer" onclick="jumpArea('pressure')" >
<div class="col-xs-12">
<img class="img-icon" alt="调度压力" src="<%=request.getContextPath()%>/IMG/evaluate/pressure.png">
</div>
<span class="col-xs-12 font-size-40">调度压力</span>
</div>
<div class="col-xs-4 margin-bottom-75 cursor-pointer" onclick="jumpArea('pump')">
<div class="col-xs-12">
<img class="img-icon" alt="机泵状态" src="<%=request.getContextPath()%>/IMG/evaluate/pump.png">
</div>
<span class="col-xs-12 font-size-40">机泵状态</span>
</div>
<div class="col-xs-4 margin-bottom-75 cursor-pointer" onclick="jumpArea('reservoir')">
<div class="col-xs-12">
<img class="img-icon" alt="水库控制评估" src="<%=request.getContextPath()%>/IMG/evaluate/reservoir.png">
</div>
<span class="col-xs-12 font-size-40">水库控制评估</span>
</div>
<div class="col-xs-4 margin-bottom-75 cursor-pointer" onclick="jumpArea('production')">
<div class="col-xs-12">
<img class="img-icon" alt="产线分配评估" src="<%=request.getContextPath()%>/IMG/evaluate/production.png">
</div>
<span class="col-xs-12 font-size-40">产线分配评估</span>
</div>
<div class="col-xs-4 margin-bottom-75 cursor-pointer" onclick="jumpArea('rawwater')">
<div class="col-xs-12">
<img class="img-icon" alt="原水调度评估" src="<%=request.getContextPath()%>/IMG/evaluate/rawwater.png">
</div>
<span class="col-xs-12 font-size-40">原水调度评估</span>
</div>
</div>
</div>
<div class="content-right">
<div class="col-xs-12 homePage">
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue cursor-pointer" onclick="jumpArea('instructions')" >
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="调度指令" src="<%=request.getContextPath()%>/IMG/evaluate/instructions.png">
</div>
<span class="col-xs-12 font-size-40">调度指令</span>
</div>
<div class="col-xs-10">
<div class="col-xs-2 border-right">
<div class="col-xs-12">今日累计</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 cumulative_times_today">50</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">自动执行</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 automatic_execution_times">45</span>次</div>
</div>
<div class="col-xs-2 border-right">
<div class="col-xs-12">执行率</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 implementation_rate">90</span>%</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">手动调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 manual_adjustment_times">3</span>次</div>
</div>
<div class="col-xs-2 border-right">
<div class="col-xs-12">调整率</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 adjustment_rate">6</span>%</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">失败次数</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 number_of_failures">2</span></div>
</div>
</div>
</div>
<div class="col-xs-12 content-right-subject padding-topbottom-35 cursor-pointer" onclick="jumpArea('pressure')">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="调度压力" src="<%=request.getContextPath()%>/IMG/evaluate/pressure.png">
</div>
<span class="col-xs-12 font-size-40">调度压力</span>
</div>
<div class="col-xs-10">
<div class="col-xs-2">
<div class="col-xs-12">当前压力值</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 current_pressure_value">40</span>kPa</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">压力变化率</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 pressure_change_rate">12</span>%</div>
</div>
</div>
</div>
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue cursor-pointer" onclick="jumpArea('pump')">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="机泵状态" src="<%=request.getContextPath()%>/IMG/evaluate/pump.png">
</div>
<span class="col-xs-12 font-size-40">机泵状态</span>
</div>
<div class="col-xs-10">
<div class="col-xs-1">
<div class="col-xs-12">1#</div>
<div class="col-xs-12 pump_status_1_img">
<img class="img-pump" alt="1#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">2#</div>
<div class="col-xs-12 pump_status_2_img">
<img class="img-pump" alt="2#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">3#</div>
<div class="col-xs-12 pump_status_3_img">
<img class="img-pump" alt="3#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">4#</div>
<div class="col-xs-12 pump_status_4_img">
<img class="img-pump" alt="4#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_red.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">5#</div>
<div class="col-xs-12 pump_status_5_img">
<img class="img-pump" alt="5#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_red.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">6#</div>
<div class="col-xs-12 pump_status_6_img">
<img class="img-pump" alt="6#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">7#</div>
<div class="col-xs-12 pump_status_7_img">
<img class="img-pump" alt="7#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">8#</div>
<div class="col-xs-12 pump_status_8_img">
<img class="img-pump" alt="8#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_red.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">9#</div>
<div class="col-xs-12">
<img class="img-pump pump_status_9_img" alt="9#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">10#</div>
<div class="col-xs-12 pump_status_10_img">
<img class="img-pump" alt="10#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">健康状况评估</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60">优</span></div>
</div>
</div>
</div>
<div class="col-xs-12 content-right-subject padding-topbottom-35 cursor-pointer" onclick="jumpArea('reservoir')">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="水库控制评估" src="<%=request.getContextPath()%>/IMG/evaluate/reservoir.png">
</div>
<span class="col-xs-12 font-size-40">水库控制评估</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3">
<div class="col-xs-12">能效模式本月累计运行</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 energy_efficiency_monthly_cumulative_operation">40</span>min</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">能耗节约</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 energy_efficiency_energy_saving">50</span>kwh</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12">稳态模式本月累计运行</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 steady_state_monthly_cumulative_operation">40</span>min</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">能耗节约</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 steady_state_energy_saving">50</span>kwh</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12">累计应急供水时长</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 cumulative_duration_of_emergency_water_supply">50</span>min</div>
</div>
</div>
</div>
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue cursor-pointer" onclick="jumpArea('production')" >
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="产线分配评估" src="<%=request.getContextPath()%>/IMG/evaluate/production.png">
</div>
<span class="col-xs-12 font-size-40">产线分配评估</span>
</div>
<div class="col-xs-10">
<div class="col-xs-12">
<div class="col-xs-2">
<div class="col-xs-12">1#实时处理水量</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 real_time_water_treatment_1">40</span>m³/h</div>
</div>
<div class="col-xs-1-5">
<div class="col-xs-12">运行负荷</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 operating_load_1">40</span>%</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_1_text">运行</span></div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">2#实时处理水量</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 real_time_water_treatment_2">40</span>m³/h</div>
</div>
<div class="col-xs-1-5">
<div class="col-xs-12">运行负荷</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 operating_load_2">40</span>%</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_2_text">运行</span></div>
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-2">
<div class="col-xs-12">3#实时处理水量</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 real_time_water_treatment_3">40</span>m³/h</div>
</div>
<div class="col-xs-1-5">
<div class="col-xs-12">运行负荷</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 operating_load_3">40</span>%</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_3_text">运行</span></div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">4#实时处理水量</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 real_time_water_treatment_4">40</span>m³/h</div>
</div>
<div class="col-xs-1-5">
<div class="col-xs-12">运行负荷</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 operating_load_4">40</span>%</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_4_text">运行</span></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 content-right-subject padding-topbottom-35 cursor-pointer" onclick="jumpArea('rawwater')" >
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="原水调度评估" src="<%=request.getContextPath()%>/IMG/evaluate/rawwater.png">
</div>
<span class="col-xs-12 font-size-40">原水调度评估</span>
</div>
<div class="col-xs-10">
<div class="col-xs-2">
<div class="col-xs-12">今日累计调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 raw_water_cumulative_adjustment_times_today">50</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">自动调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 raw_water_automatic_adjustment_times">40</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">人工调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 raw_water_manual_adjustment_times">10</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">今日累计调整水量</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 accumulated_adjusted_water_volume_today">10</span>万吨</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 sub-region instructions" style="display:none;">
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="调度指令" src="<%=request.getContextPath()%>/IMG/evaluate/instructions.png">
</div>
<span class="col-xs-12 font-size-40">调度指令</span>
</div>
<div class="col-xs-10">
<div class="col-xs-2 border-right">
<div class="col-xs-12">今日累计</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 cumulative_times_today">50</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">自动执行</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 automatic_execution_times">45</span>次</div>
</div>
<div class="col-xs-2 border-right">
<div class="col-xs-12">执行率</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 implementation_rate">90</span>%</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">手动调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 manual_adjustment_times">3</span>次</div>
</div>
<div class="col-xs-2 border-right">
<div class="col-xs-12">调整率</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 adjustment_rate">6</span>%</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">失败次数</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 number_of_failures">2</span></div>
</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="instructions-line" id="instructions-line"></div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<table class="table text-center">
<tr><th>序号</th><th>指令内容</th><th>发布时间</th><th>完成时间</th><th>持续时间</th></tr>
<tr>
<td>1</td>
<td>水龄:从原水到出厂,在每个工艺段的停留时间。清水库水 龄。模型计算</td>
<td>2022-01-13 13:23</td>
<td>2022-01-13 13:43</td>
<td>20分钟</td>
</tr>
</table>
</div>
</div>
<div class="col-xs-12 sub-region pressure" style="display:none;">
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="调度压力" src="<%=request.getContextPath()%>/IMG/evaluate/pressure.png">
</div>
<span class="col-xs-12 font-size-40">调度压力</span>
</div>
<div class="col-xs-10">
<div class="col-xs-2">
<div class="col-xs-12">当前压力值</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 current_pressure_value">40</span>kPa</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">压力变化率</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 pressure_change_rate">12</span>%</div>
</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-6"><div class="pressure-line" id="pressure-cumulative"></div></div>
<div class="col-xs-6"><div class="pressure-line" id="pressure-actual"></div></div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-6"><div class="pressure-line" id="pressure-dispatch"></div></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-xs-12 sub-region pump" style="display:none;">
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="机泵状态" src="<%=request.getContextPath()%>/IMG/evaluate/pump.png">
</div>
<span class="col-xs-12 font-size-40">机泵状态</span>
</div>
<div class="col-xs-10">
<div class="col-xs-1">
<div class="col-xs-12">1#</div>
<div class="col-xs-12 pump_status_1_img">
<img class="img-pump" alt="1#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">2#</div>
<div class="col-xs-12 pump_status_2_img">
<img class="img-pump" alt="2#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">3#</div>
<div class="col-xs-12 pump_status_3_img">
<img class="img-pump" alt="3#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_grey.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">4#</div>
<div class="col-xs-12 pump_status_4_img">
<img class="img-pump" alt="4#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_red.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">5#</div>
<div class="col-xs-12 pump_status_5_img">
<img class="img-pump" alt="5#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_red.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">6#</div>
<div class="col-xs-12 pump_status_6_img">
<img class="img-pump" alt="6#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">7#</div>
<div class="col-xs-12 pump_status_7_img">
<img class="img-pump" alt="7#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">8#</div>
<div class="col-xs-12 pump_status_8_img">
<img class="img-pump" alt="8#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_red.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">9#</div>
<div class="col-xs-12 pump_status_9_img">
<img class="img-pump" alt="9#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-1">
<div class="col-xs-12">10#</div>
<div class="col-xs-12 pump_status_10_img">
<img class="img-pump" alt="10#机泵" src="<%=request.getContextPath()%>/IMG/evaluate/pump_green.png">
</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">健康状况评估</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60">优</span></div>
</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">运行负荷</span>
</div>
<div class="col-xs-10">
<div class="col-xs-1 pump_operating_load_1">0</div>
<div class="col-xs-1 pump_operating_load_2">0</div>
<div class="col-xs-1 pump_operating_load_3">0</div>
<div class="col-xs-1 pump_operating_load_4">88</div>
<div class="col-xs-1 pump_operating_load_5">88</div>
<div class="col-xs-1 pump_operating_load_6">0</div>
<div class="col-xs-1 pump_operating_load_7">0</div>
<div class="col-xs-1 pump_operating_load_8">87</div>
<div class="col-xs-1 pump_operating_load_9">0</div>
<div class="col-xs-1 pump_operating_load_10">0</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">累计运行时长h</span>
</div>
<div class="col-xs-10">
<div class="col-xs-1 pump_cumulative_running_time_1">23</div>
<div class="col-xs-1 pump_cumulative_running_time_2">19</div>
<div class="col-xs-1 pump_cumulative_running_time_3">23</div>
<div class="col-xs-1 pump_cumulative_running_time_4">23</div>
<div class="col-xs-1 pump_cumulative_running_time_5">42</div>
<div class="col-xs-1 pump_cumulative_running_time_6">23</div>
<div class="col-xs-1 pump_cumulative_running_time_7">35</div>
<div class="col-xs-1 pump_cumulative_running_time_8">23</div>
<div class="col-xs-1 pump_cumulative_running_time_9">23</div>
<div class="col-xs-1 pump_cumulative_running_time_10">56</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">开停次数(次)</span>
</div>
<div class="col-xs-10">
<div class="col-xs-1 pump_start_stop_times_1">1</div>
<div class="col-xs-1 pump_start_stop_times_2">1</div>
<div class="col-xs-1 pump_start_stop_times_3">1</div>
<div class="col-xs-1 pump_start_stop_times_4">1</div>
<div class="col-xs-1 pump_start_stop_times_5">1</div>
<div class="col-xs-1 pump_start_stop_times_6">1</div>
<div class="col-xs-1 pump_start_stop_times_7">1</div>
<div class="col-xs-1 pump_start_stop_times_8">1</div>
<div class="col-xs-1 pump_start_stop_times_9">1</div>
<div class="col-xs-1 pump_start_stop_times_10">1</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">健康状态评估</span>
</div>
<div class="col-xs-10">
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
<div class="col-xs-1">优</div>
</div>
</div>
<!-- <div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">是否均匀开泵</span>
</div>
<div class="col-xs-10">
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
<div class="col-xs-1">是</div>
</div>
</div> -->
</div>
<div class="col-xs-12 sub-region reservoir" style="display:none;">
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="水库控制评估" src="<%=request.getContextPath()%>/IMG/evaluate/reservoir.png">
</div>
<span class="col-xs-12 font-size-40">水库控制评估</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3">
<div class="col-xs-12">能效模式本月累计运行</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 energy_efficiency_monthly_cumulative_operation">40</span>min</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">能耗节约</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 energy_efficiency_energy_saving">50</span>kwh</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12">稳态模式本月累计运行</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 steady_state_monthly_cumulative_operation">40</span>min</div>
</div>
<div class="col-xs-1-5 border-right">
<div class="col-xs-12">能耗节约</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 steady_state_energy_saving">50</span>kwh</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12">累计应急供水时长</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 cumulative_duration_of_emergency_water_supply">50</span>min</div>
</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-6"><div class="pressure-line" id="reservoir-energy"></div></div>
<div class="col-xs-6"><div class="pressure-line" id="reservoir-steady"></div></div>
</div>
</div>
<div class="col-xs-12 sub-region production" style="display:none;">
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="产线分配评估" src="<%=request.getContextPath()%>/IMG/evaluate/production.png">
</div>
<span class="col-xs-12 font-size-40">产线分配评估</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3">
<div class="col-xs-12">1#产线运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_1_text">运行</span></div>
</div>
<div class="col-xs-3">
<div class="col-xs-12">2#产线运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_2_text">运行</span></div>
</div>
<div class="col-xs-3">
<div class="col-xs-12">3#产线运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_3_text">运行</span></div>
</div>
<div class="col-xs-3">
<div class="col-xs-12">4#产线运行状态</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 running_state_4_text">运行</span></div>
</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">实时处理水量m³/h</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3 real_time_water_treatment_1"></div>
<div class="col-xs-3 real_time_water_treatment_2"></div>
<div class="col-xs-3 real_time_water_treatment_3"></div>
<div class="col-xs-3 real_time_water_treatment_4"></div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">运行负荷(%</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3 operating_load_1"></div>
<div class="col-xs-3 operating_load_2"></div>
<div class="col-xs-3 operating_load_3"></div>
<div class="col-xs-3 operating_load_4"></div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">自动调整(次)</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3 production_line_1_automatic_adjustment_times"></div>
<div class="col-xs-3 production_line_2_automatic_adjustment_times"></div>
<div class="col-xs-3 production_line_3_automatic_adjustment_times"></div>
<div class="col-xs-3 production_line_4_automatic_adjustment_times"></div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">手动调整(次)</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3 production_line_1_automatic_adjustment_times"></div>
<div class="col-xs-3 production_line_2_automatic_adjustment_times"></div>
<div class="col-xs-3 production_line_3_automatic_adjustment_times"></div>
<div class="col-xs-3 production_line_4_automatic_adjustment_times"></div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="col-xs-2">
<span class="col-xs-12">能效对比</span>
</div>
<div class="col-xs-10">
<div class="col-xs-3 production_line_1_energy_efficiency_comparison"></div>
<div class="col-xs-3 production_line_2_energy_efficiency_comparison"></div>
<div class="col-xs-3 production_line_3_energy_efficiency_comparison"></div>
<div class="col-xs-3 production_line_4_energy_efficiency_comparison"></div>
</div>
</div>
</div>
<div class="col-xs-12 sub-region rawwater" style="display:none;">
<div class="col-xs-12 content-right-subject padding-topbottom-35 content-bg-darkblue">
<div class="col-xs-2">
<div class="col-xs-12">
<img class="img-icon" alt="原水调度评估" src="<%=request.getContextPath()%>/IMG/evaluate/rawwater.png">
</div>
<span class="col-xs-12 font-size-40">原水调度评估</span>
</div>
<div class="col-xs-10">
<div class="col-xs-2">
<div class="col-xs-12">今日累计调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 raw_water_cumulative_adjustment_times_today">50</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">自动调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 raw_water_automatic_adjustment_times">40</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">人工调整</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 raw_water_manual_adjustment_times">10</span>次</div>
</div>
<div class="col-xs-2">
<div class="col-xs-12">今日累计调整水量</div>
<div class="col-xs-12 font-color-lightBlue"><span class="font-size-60 accumulated_adjusted_water_volume_today">10</span>万吨</div>
</div>
</div>
</div>
<div class="col-xs-12 padding-topbottom-35">
<div class="rawwater-line" id="rawwater-water"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>