1815 lines
95 KiB
Plaintext
1815 lines
95 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" %>
|
||
<%String contextPath = request.getContextPath();%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||
</title>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<style type="text/css">
|
||
</style>
|
||
<script type="text/javascript">
|
||
// let websocket = null;
|
||
// let modelIp = "${modelIp}";
|
||
|
||
let beginTimeStore1_thsy = '';
|
||
let endTimeStore1_thsy = '';
|
||
let beginTimeStore2_thsy = '';
|
||
let endTimeStore2_thsy = '';
|
||
|
||
let myChart3 = [];
|
||
let option3 = [];
|
||
|
||
let legendName5 = [];
|
||
let series5 = [];
|
||
|
||
let legendName6_1 = [];
|
||
let series6_1 = [];
|
||
let yAxis6_1 = [];
|
||
let legendName6_2 = [];
|
||
let series6_2 = [];
|
||
let yAxis6_2 = [];
|
||
|
||
yAxis6_1.push({
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#707070'
|
||
}
|
||
}
|
||
})
|
||
yAxis6_1.push({
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#707070'
|
||
}
|
||
},
|
||
position: 'right'
|
||
})
|
||
yAxis6_2.push({
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#707070'
|
||
}
|
||
}
|
||
})
|
||
|
||
let legendName7 = [];
|
||
let series7 = [];
|
||
|
||
$(function () {
|
||
let windowHeight = $(window).height();
|
||
$('#main').css("height", (windowHeight - 30) + "px");
|
||
|
||
|
||
// if ('WebSocket' in window) {
|
||
// // 创建websocket对象
|
||
// websocket = new WebSocket("ws://" + modelIp + "/modelComputerWebSocketEnd/");
|
||
// // console.log("ws://"+modelIp+"/modelComputerWebSocketEnd/")
|
||
// registerEvent();
|
||
// } else {
|
||
// alert('当前浏览器不支持websocket')
|
||
// }
|
||
// $(window).unload(function () {
|
||
// console.log("websocket关闭");
|
||
// websocket.close();
|
||
// });
|
||
|
||
initDate1();
|
||
initDate2();
|
||
|
||
// getChart1();
|
||
// getChart2();
|
||
getChart3();
|
||
getChart4();
|
||
getChart5();
|
||
// getChart6();
|
||
// getChart7();
|
||
getData("", "KPIList");
|
||
getData("", "KPITabList_BZ_East");
|
||
getData("", "KPITab2List_Power");
|
||
})
|
||
|
||
function initDate1() {
|
||
let locale = {
|
||
"format": 'YYYY-MM-DD HH:mm',
|
||
"separator": " ~ ",
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"fromLabel": "起始时间",
|
||
"toLabel": "结束时间'",
|
||
"customRangeLabel": "自定义",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
|
||
beginTimeStore1_thsy = moment().startOf('month').format('YYYY-MM-DD') + " 00:00";
|
||
endTimeStore1_thsy = moment().endOf('month').format('YYYY-MM-DD') + " 23:59";
|
||
$('#date1').val(beginTimeStore1_thsy + locale.separator + endTimeStore1_thsy);
|
||
|
||
$('#date1').daterangepicker({
|
||
"timePicker": true,
|
||
"timePicker24Hour": true,
|
||
"linkedCalendars": false,
|
||
"autoUpdateInput": false,
|
||
"timePickerIncrement": 10,
|
||
"opens": "left", //日期选择框的弹出位置
|
||
"drops": "up",
|
||
"locale": locale,
|
||
//汉化按钮部分
|
||
ranges: {
|
||
// '今日': [moment(), moment().subtract(-1, 'days')],
|
||
'昨日': [moment().subtract(1, 'days'), moment()],
|
||
'最近7日': [moment().subtract(7, 'days'), moment()],
|
||
'本月': [moment().startOf('month'), moment().endOf('month')],
|
||
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||
},
|
||
startDate: beginTimeStore1_thsy,
|
||
endDate: endTimeStore1_thsy
|
||
}, function (start, end, label) {
|
||
beginTimeStore1_thsy = start.format(this.locale.format);
|
||
endTimeStore1_thsy = end.format(this.locale.format);
|
||
if (!this.startDate) {
|
||
this.element.val('');
|
||
} else {
|
||
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
|
||
}
|
||
});
|
||
|
||
};
|
||
|
||
function initDate2() {
|
||
let locale = {
|
||
"format": 'YYYY-MM-DD HH:mm',
|
||
"separator": " ~ ",
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"fromLabel": "起始时间",
|
||
"toLabel": "结束时间'",
|
||
"customRangeLabel": "自定义",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
|
||
beginTimeStore2_thsy = moment().subtract(7, 'days').format('YYYY-MM-DD') + " 00:00";
|
||
endTimeStore2_thsy = moment().subtract(0, 'days').format('YYYY-MM-DD') + " 23:59";
|
||
$('#date2').val(beginTimeStore2_thsy + locale.separator + endTimeStore2_thsy);
|
||
|
||
$('#date2').daterangepicker({
|
||
"timePicker": true,
|
||
"timePicker24Hour": true,
|
||
"linkedCalendars": false,
|
||
"autoUpdateInput": false,
|
||
"timePickerIncrement": 10,
|
||
"opens": "left", //日期选择框的弹出位置
|
||
"drops": "down",
|
||
"locale": locale,
|
||
//汉化按钮部分
|
||
ranges: {
|
||
// '今日': [moment(), moment().subtract(-1, 'days')],
|
||
'昨日': [moment().subtract(1, 'days'), moment()],
|
||
'最近7日': [moment().subtract(7, 'days'), moment()],
|
||
'本月': [moment().startOf('month'), moment().endOf('month')],
|
||
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||
},
|
||
startDate: beginTimeStore2_thsy,
|
||
endDate: endTimeStore2_thsy
|
||
}, function (start, end, label) {
|
||
beginTimeStore2_thsy = start.format(this.locale.format);
|
||
endTimeStore2_thsy = end.format(this.locale.format);
|
||
if (!this.startDate) {
|
||
this.element.val('');
|
||
} else {
|
||
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
|
||
}
|
||
});
|
||
|
||
};
|
||
|
||
function getChart1(value) {
|
||
let myChart = echarts.init(document.getElementById("chart1"));
|
||
// let value = 97;
|
||
let name = '优';
|
||
let option = {
|
||
title: [{
|
||
text: '{a|' + value + '分}{c|\n' + name + '}',
|
||
x: 'center',
|
||
y: '44%',
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
fontSize: 45,
|
||
color: '#3DD7FF',
|
||
},
|
||
|
||
c: {
|
||
fontSize: 20,
|
||
color: '#98E6FF',
|
||
// padding: [5,0]
|
||
},
|
||
},
|
||
},
|
||
}, {
|
||
text: 'KPI综合得分',
|
||
x: 'center',
|
||
y: '3%',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontWeight: 'normal'
|
||
}
|
||
}],
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
name: '外圆环',
|
||
radius: ['80%', '83%'],
|
||
center: ['50%', '55%'],
|
||
hoverAnimation: false,
|
||
clockWise: false,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#304867',
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: [100],
|
||
},
|
||
{
|
||
name: 'KPI综合得分',
|
||
type: 'pie',
|
||
z: 2,
|
||
radius: ['62%', '75%'],
|
||
center: ['50%', '55%'],
|
||
silent: true,
|
||
clockwise: true,
|
||
startAngle: 90,
|
||
z: 0,
|
||
zlevel: 0,
|
||
label: {
|
||
normal: {
|
||
position: 'center',
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: value,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#00FFFF',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
value: 100 - value,
|
||
name: '',
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#173164',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'gauge',
|
||
z: 5,
|
||
radius: '82%',
|
||
center: ['50%', '55%'],
|
||
startAngle: 0,
|
||
endAngle: 360,
|
||
splitNumber: 60,
|
||
hoverAnimation: true,
|
||
axisTick: {
|
||
show: true,
|
||
distance: 0,
|
||
length: '20%',
|
||
splitNumber: 1,
|
||
lineStyle: {
|
||
width: 3,
|
||
color: '#000000',
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
pointer: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
opacity: 0,
|
||
},
|
||
},
|
||
detail: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 0,
|
||
name: '',
|
||
},
|
||
],
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart2(value) {
|
||
let myChart = echarts.init(document.getElementById("chart2"));
|
||
let option = {
|
||
title: {
|
||
text: 'KPI评分统计',
|
||
x: 'center',
|
||
y: '3%',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontWeight: 'normal'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
radar: {
|
||
// shape: 'circle',
|
||
indicator: [
|
||
{name: '经济', max: 100},
|
||
{name: '产能', max: 100},
|
||
{name: '质量', max: 100}
|
||
],
|
||
center: ['50%', '70%'],
|
||
},
|
||
series: [
|
||
{
|
||
name: 'KPI评分统计',
|
||
type: 'radar',
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
areaStyle: {
|
||
color: "#00FFFF",
|
||
opacity: 0.5,
|
||
},
|
||
data: [
|
||
{
|
||
value: value,
|
||
name: '泰和水厂'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart3() {
|
||
myChart3 = echarts.init(document.getElementById("chart3"));
|
||
|
||
option3 = {
|
||
color: ['#13F7FF'],
|
||
title: {
|
||
text: '水质曲线',
|
||
x: 'left',
|
||
y: '3%',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontWeight: 'bolder',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
animation: true,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time'
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#707070'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: []
|
||
};
|
||
myChart3.setOption(option3, true);
|
||
}
|
||
|
||
function getChart4() {
|
||
// let nowTime = getNowTime();
|
||
// let nowDay = Number(nowTime.substring(8,10));
|
||
// let forNum = getMonthMaxDay(nowTime);
|
||
// if(nowDay<=7){
|
||
// forNum=7;
|
||
// }else if(nowDay>7&&nowDay<=14){
|
||
// forNum=14;
|
||
// }else if(nowDay>21&&nowDay<=28){
|
||
// forNum=28;
|
||
// }
|
||
// console.log(forNum);
|
||
|
||
// let nowDate = new Date(nowTime);
|
||
// let weekDay = nowDate.getDay();
|
||
// if(weekDay==0){
|
||
// weekDay=7;
|
||
// }
|
||
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: 'http://192.168.0.244:8081/SIPAIIS_Model/process/processmodel/getModelNum4THWS.do',
|
||
async: false,
|
||
globle: false,
|
||
dataType: 'json',
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
// console.log(data);
|
||
$('#modelRunTime').text(data.RunTime);
|
||
$('#modelOrderNum').text(data.instructNum);
|
||
$('#modelAdoptionRate').text(data.adoptRate);
|
||
}
|
||
})
|
||
|
||
let xData = [];
|
||
let seriesData = [];
|
||
let modelOrderNumSData = [];
|
||
let modelAdoptionNumSData = [];
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: 'http://192.168.0.244:8081/SIPAIIS_Model/process/processmodel/getModelChart4THWS.do',
|
||
async: false,
|
||
globle: false,
|
||
dataType: 'json',
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
// console.log(data);
|
||
for (let i = 0; i < data.length; i++) {
|
||
let content = data[i];
|
||
xData.push(content.dt.substring(8, 10));
|
||
modelOrderNumSData.push(content.instructNum);
|
||
modelAdoptionNumSData.push(content.adoptionNum);
|
||
}
|
||
}
|
||
})
|
||
|
||
seriesData.push({
|
||
name: '发布指令数',
|
||
type: 'bar',
|
||
data: modelOrderNumSData
|
||
})
|
||
seriesData.push({
|
||
name: '执行数',
|
||
type: 'bar',
|
||
barGap: '-100%',
|
||
data: modelAdoptionNumSData
|
||
})
|
||
|
||
let myChart = echarts.init(document.getElementById("chart4"));
|
||
let option = {
|
||
color: ['#087CB8', '#60DEFF', '#00FF66'],
|
||
title: {
|
||
text: '指令执行情况',
|
||
x: 'left',
|
||
y: '3%',
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontWeight: 'bolder'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['发布指令数', '执行数'],
|
||
left: 'right',
|
||
top: '5%',
|
||
textStyle: {
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%', // 与容器左侧的距离
|
||
right: '2%', // 与容器右侧的距离
|
||
// top: '8%', // 与容器顶部的距离
|
||
bottom: '1%', // 与容器底部的距离
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: xData,
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#707070'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: seriesData
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart5() {
|
||
let myChart = echarts.init(document.getElementById("chart5"));
|
||
let option = {
|
||
color: ['#0046FF', '#00D4FF', '#F350FF'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: legendName5,
|
||
left: 'right',
|
||
bottom: '5%',
|
||
textStyle: {
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '2%',
|
||
top: '10',
|
||
bottom: '35',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'time'
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '',
|
||
min: 20,
|
||
max: 50,
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#707070'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: series5
|
||
// [
|
||
// {
|
||
// name: '日实际处理量',
|
||
// type: 'line',
|
||
// data: [
|
||
// 25, 15, 21, 20, 24, 15, 24
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '年度生产指标',
|
||
// type: 'line',
|
||
// lineStyle: {
|
||
// type: 'dashed'
|
||
// },
|
||
// data: [
|
||
// 20, 15, 18, 23, 25, 16, 21
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '计划排产量',
|
||
// type: 'line',
|
||
// data: [12, 19, 15, 21, 25, 18, 26]
|
||
// }
|
||
// ]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart6(legendName, yAxis, seriesData) {
|
||
let myChart = echarts.init(document.getElementById("chart6"));
|
||
let option = {
|
||
//color: ['#FFCC00'],
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: legendName,
|
||
left: 'right',
|
||
bottom: '0px',
|
||
textStyle: {
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '2%',
|
||
top: '20',
|
||
bottom: '20',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'time'
|
||
// data: ['1', '2', '3', '4', '5', '6', '7']
|
||
}
|
||
],
|
||
yAxis: yAxis,
|
||
series: seriesData
|
||
// [
|
||
// {
|
||
// name: '实际值',
|
||
// type: 'line',
|
||
// data: [
|
||
// 25, 15, 21, 20, 24, 15, 24
|
||
// ]
|
||
// },
|
||
// {
|
||
// name: '计划值',
|
||
// type: 'line',
|
||
// lineStyle: {
|
||
// type: 'dashed'
|
||
// },
|
||
// data: [
|
||
// 20, 15, 18, 23, 25, 16, 21
|
||
// ]
|
||
// }
|
||
// ]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function getChart7() {
|
||
let myChart = echarts.init(document.getElementById("chart7"));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: legendName7,
|
||
left: 'right',
|
||
bottom: '0px',
|
||
textStyle: {
|
||
color: '#ffffff'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '2%',
|
||
right: '2%',
|
||
top: '20',
|
||
bottom: '20',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'time',
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
},
|
||
yAxis: [{
|
||
type: 'value',
|
||
position: 'left',
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#707070'
|
||
}
|
||
}
|
||
}, {
|
||
type: 'value',
|
||
position: 'right',
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: series7
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
// function registerEvent() {
|
||
// websocket.onopen = function (event) {
|
||
// console.log("已连接");
|
||
// }
|
||
|
||
// websocket.onmessage = function (event) {
|
||
// if (event != null) {
|
||
// // console.log(event.data)
|
||
// let modelType = event.data;
|
||
// if (modelType != 'model_status') {
|
||
// getData(modelType);
|
||
// }
|
||
// }
|
||
// };
|
||
// websocket.onclose = function (event) {
|
||
// console.log("已断开");
|
||
// reconnect();
|
||
// };
|
||
// //连接发生错误的回调方法
|
||
// websocket.onerror = function () {
|
||
// reconnect();
|
||
// };
|
||
// }
|
||
|
||
// function reconnect() {
|
||
// websocket = new WebSocket("ws://" + modelIp + "/modelComputerWebSocketEnd/");
|
||
// websocket.onopen = function (event) {
|
||
// console.log("已连接");
|
||
// }
|
||
|
||
// websocket.onmessage = function (event) {
|
||
// };
|
||
|
||
// websocket.onclose = function (event) {
|
||
// setTimeout("reconnect();", 8000);
|
||
// };
|
||
// //连接发生错误的回调方法 `1
|
||
// websocket.onerror = function () {
|
||
// websocket.close();
|
||
// };
|
||
// }
|
||
|
||
function getData(modelType, jspId) {
|
||
series1 = [];
|
||
legendName1 = [];
|
||
series2 = [];
|
||
legendName2 = [];
|
||
|
||
legendName5 = [];
|
||
series5 = [];
|
||
|
||
if (jspId == 'KPITabList_BZ_East' || jspId == 'KPITabList_BZ_West') {
|
||
legendName7 = [];
|
||
series7 = [];
|
||
}
|
||
|
||
if (jspId == 'KPITab2List_Power') {
|
||
legendName6_1 = [];
|
||
series6_1 = [];
|
||
}
|
||
if (jspId == 'KPITab2List_Drug') {
|
||
legendName6_2 = [];
|
||
series6_2 = [];
|
||
}
|
||
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getJspData.do",
|
||
dataType: 'json',
|
||
data: {
|
||
unitId: unitId,
|
||
jspId: jspId,
|
||
modelType: modelType
|
||
// time: '2022-06-01'
|
||
},
|
||
async: true,
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
if (data.length > 0) {
|
||
console.log(data)
|
||
|
||
let tbChange1Num = 0;
|
||
let tbChange1NFirtCode = "";
|
||
|
||
let dayDiffRate1 = 0;
|
||
let dayDiffRate2 = 0;
|
||
let dayDiffRateJS1 = 31;
|
||
let dayDiffRateJS2 = 0;
|
||
let dayDiffRateJS3 = 0;
|
||
let monthDiffRate = 0;
|
||
let monthDiffRateJS1 = 0;
|
||
let monthDiffRateJS2 = 0;
|
||
let yearDiffRate = 0;
|
||
let yearDiffRateJS1 = 0;
|
||
let yearDiffRateJS2 = 0;
|
||
let NDZJHCLL = 0;
|
||
|
||
let chart1DATA = 100;
|
||
let chart2DATA = [];
|
||
|
||
for (let i = 0; i < data.length; i++) {
|
||
let content = data[i];
|
||
// console.log(content)
|
||
if (content.getValueType == 'getMpMainValue' || content.getValueType == 'get7dayAvgValue' || content.getValueType == 'get7dayMaxValue' || content.getValueType == 'get7dayMinValue' || content.getValueType == 'getLastMonthFinalValue') {
|
||
if (content.mPoint != null) {
|
||
if (content.elementCode == 'JJDF' || content.elementCode == 'CNDF' || content.elementCode == 'ZLDF') {
|
||
chart2DATA.push(content.mPoint.parmvalue);
|
||
$('.' + content.elementCode).text(content.mPoint.parmvalue);
|
||
} else if (content.elementCode == 'ZHDF') {
|
||
chart1DATA = content.mPoint.parmvalue;
|
||
} else {
|
||
let outValue = toThousands(content.mPoint.parmvalue);
|
||
if (content.elementCode == 'DRSJCLL') {
|
||
dayDiffRateJS3 = outValue;
|
||
}
|
||
if (content.elementCode == 'DYSJCLL') {
|
||
outValue = (content.mPoint.parmvalue / 10000).toFixed(2)
|
||
monthDiffRateJS1 = outValue;
|
||
}
|
||
if (content.elementCode == 'JJZB_YDL') {
|
||
outValue = (content.mPoint.parmvalue / 10000).toFixed(0)
|
||
}
|
||
if (content.elementCode == 'NDSJCLL') {
|
||
outValue = (content.mPoint.parmvalue).toFixed(0)
|
||
yearDiffRateJS1 = outValue;
|
||
}
|
||
if (content.elementCode == 'NDJHCLL') {
|
||
outValue = (content.mPoint.parmvalue).toFixed(0)
|
||
yearDiffRateJS2 = outValue;
|
||
}
|
||
if (content.elementCode == 'NDZJHCLL') {
|
||
outValue = (content.mPoint.parmvalue).toFixed(0)
|
||
NDZJHCLL = outValue;
|
||
}
|
||
if (isNumber(outValue)) {
|
||
outValue = toThousands(outValue);
|
||
}
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.unit != null) {
|
||
outValue += content.visualCacheData.unit;
|
||
}
|
||
}
|
||
$('.' + content.elementCode).text(outValue);
|
||
}
|
||
|
||
if (content.elementCode == 'JJZB_YDL') {
|
||
$("#JJZB_YDL").on("click", function () {
|
||
getLine(content.mPoint.id);
|
||
});
|
||
} else if (content.elementCode == 'JJZB_DDH') {
|
||
$("#JJZB_DDH").on("click", function () {
|
||
getLine(content.mPoint.id);
|
||
});
|
||
} else if (content.elementCode == 'JJZB_DDHJH') {
|
||
$("#JJZB_DDHJH").on("click", function () {
|
||
getLine(content.mPoint.id);
|
||
});
|
||
} else if (content.elementCode == 'JJZB_YSL') {
|
||
$("#JJZB_YSL").on("click", function () {
|
||
getLine(content.mPoint.id);
|
||
});
|
||
} else if (content.elementCode == 'JJZB_YDH') {
|
||
$("#JJZB_YDH").on("click", function () {
|
||
getLine(content.mPoint.id);
|
||
});
|
||
} else if (content.elementCode == 'JJZB_YDHJH') {
|
||
$("#JJZB_YDHJH").on("click", function () {
|
||
getLine(content.mPoint.id);
|
||
});
|
||
}
|
||
|
||
} else {
|
||
$('.' + content.elementCode).text('-');
|
||
}
|
||
} else if (content.getValueType == 'getMpcode') {
|
||
if (content.mPoint != null) {
|
||
// console.log(content.elementCode)
|
||
document.getElementById(content.elementCode).onclick = function () {
|
||
tbChange1("" + content.morder + "", "" + content.mPoint.id + "")
|
||
};
|
||
|
||
if (tbChange1Num == 0) {
|
||
tbChange1NFirtCode = content.mPoint.id;
|
||
}
|
||
}
|
||
tbChange1Num++;
|
||
} else if (content.getValueType == 'getMpcodeLimitingValue') {
|
||
if (content.value != null) {
|
||
let outValue = content.value;
|
||
$('.' + content.elementCode).text(outValue);
|
||
} else {
|
||
$('.' + content.elementCode).text('-');
|
||
}
|
||
|
||
} else if (content.getValueType == 'getRedisData') {
|
||
if (content.value != null) {
|
||
let redisValue = eval("(" + content.value + ")");
|
||
// console.log(redisValue)
|
||
let outValue = redisValue.mpvalue;
|
||
if (content.elementCode == 'DRJHPCL') {
|
||
dayDiffRateJS2 = outValue;
|
||
}
|
||
if (content.elementCode == 'DYJHPCL') {
|
||
monthDiffRateJS2 = outValue;
|
||
}
|
||
if (isNumber(outValue)) {
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.numtail != null) {
|
||
outValue = Number(outValue).toFixed(Number(content.visualCacheData.numtail));
|
||
}
|
||
}
|
||
outValue = toThousands(outValue);
|
||
}
|
||
if (content.visualCacheData != null) {
|
||
if (content.visualCacheData.unit != null) {
|
||
outValue += content.visualCacheData.unit;
|
||
}
|
||
}
|
||
$('.' + content.elementCode).text(outValue);
|
||
} else {
|
||
$('.' + content.elementCode).text('-');
|
||
}
|
||
} else if (content.getValueType == 'getTHDayHistory') {
|
||
if (content.elementCode == 'chart7') {
|
||
legendName7.push(content.name);
|
||
series7.push({
|
||
name: content.name,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: content.jsonArray,
|
||
yAxisIndex: content.morder
|
||
})
|
||
}
|
||
|
||
} else if (content.getValueType == 'getMonthHistory') {
|
||
if (content.elementCode == 'chart5') {
|
||
legendName5.push(content.name);
|
||
series5.push({
|
||
name: content.name,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: content.jsonArray
|
||
})
|
||
}
|
||
|
||
} else if (content.getValueType == 'get12MonthHistory') {
|
||
if (content.elementCode == 'chart6_2') {
|
||
legendName6_2.push(content.name);
|
||
series6_2.push({
|
||
name: content.name,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: content.jsonArray
|
||
})
|
||
} else if (content.elementCode == 'chart6_1') {
|
||
if (content.morder == '0') {
|
||
legendName6_1.push(content.name);
|
||
series6_1.push({
|
||
name: content.name,
|
||
type: 'bar',
|
||
data: content.jsonArray
|
||
})
|
||
} else {
|
||
legendName6_1.push(content.name);
|
||
series6_1.push({
|
||
name: content.name,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: content.jsonArray,
|
||
yAxisIndex: 1
|
||
})
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
if (jspId == 'KPITabList_BZ_East' || jspId == 'KPITabList_BZ_West') {
|
||
getChart7();
|
||
} else if (jspId == 'KPITab2List_Power') {
|
||
getChart6(legendName6_1, yAxis6_1, series6_1);
|
||
// legendName6_1 = [];
|
||
// series6_1 = [];
|
||
} else if (jspId == 'KPITab2List_Drug') {
|
||
getChart6(legendName6_2, yAxis6_2, series6_2);
|
||
// legendName6_2 = [];
|
||
// series6_2 = [];
|
||
} else {
|
||
dayDiffRate1 = ((dayDiffRateJS2 / dayDiffRateJS1) * 100).toFixed(0);
|
||
if (dayDiffRate1 >= 120) {
|
||
$('#DRJHPCL_DBX').css("left", "120%");
|
||
$('#DRJHPCL_JDT').css("width", "120%");
|
||
} else {
|
||
$('#DRJHPCL_DBX').css("left", (dayDiffRate1) + "%");
|
||
$('#DRJHPCL_JDT').css("width", (dayDiffRate1) + "%");
|
||
}
|
||
|
||
dayDiffRate2 = ((dayDiffRateJS3 / dayDiffRateJS1) * 100).toFixed(0);
|
||
if (dayDiffRate2 >= 120) {
|
||
$('#DRSJCLL_JDT').css("width", "120%");
|
||
} else {
|
||
$('#DRSJCLL_JDT').css("width", (dayDiffRate2) + "%");
|
||
}
|
||
dayDiffRate2 = ((dayDiffRateJS3 / dayDiffRateJS2) * 100).toFixed(0);
|
||
if (dayDiffRate2 <= 100) {
|
||
// $('#dayDiffRate').text((100 - dayDiffRate2) + "%");
|
||
$('#dayDiffRate').text(dayDiffRate2 + "%");
|
||
} else {
|
||
// $('#dayDiffRate').text((dayDiffRate2 - 100) + "%");
|
||
$('#dayDiffRate').text("%100");
|
||
}
|
||
|
||
monthDiffRate = ((monthDiffRateJS1.replaceAll(",", "") / monthDiffRateJS2.replaceAll(",", "")) * 100).toFixed(0);
|
||
// if (monthDiffRate < 0) {
|
||
// monthDiffRate = -monthDiffRate;
|
||
// }
|
||
// $('#monthDiffRate').text(monthDiffRate + "%");
|
||
if (monthDiffRate <= 100) {
|
||
// $('#monthDiffRate').text((100 - monthDiffRate) + "%");
|
||
$('#monthDiffRate').text(monthDiffRate + "%");
|
||
} else {
|
||
// $('#monthDiffRate').text((monthDiffRate - 100) + "%");
|
||
$('#monthDiffRate').text("100%");
|
||
}
|
||
|
||
yearDiffRate = ((yearDiffRateJS1.replaceAll(",", "") / yearDiffRateJS2.replaceAll(",", "")) * 100).toFixed(0);
|
||
if (yearDiffRate >= 120) {
|
||
$('#NDSJCLL_JDT').css("width", "120%");
|
||
} else {
|
||
$('#NDSJCLL_JDT').css("width", (yearDiffRate) + "%");
|
||
}
|
||
if (yearDiffRate <= 100) {
|
||
// $('#yearDiffRate').text((100 - yearDiffRate) + "%");
|
||
$('#yearDiffRate').text(yearDiffRate + "%");
|
||
} else {
|
||
// $('#yearDiffRate').text((yearDiffRate - 100) + "%");
|
||
$('#yearDiffRate').text("100%");
|
||
}
|
||
$('#NDJHCLL').text(toThousands(yearDiffRateJS2) + "/" + toThousands(NDZJHCLL));
|
||
|
||
getChart1(chart1DATA);
|
||
getChart2(chart2DATA);
|
||
tbChange1(0, tbChange1NFirtCode);
|
||
getChart5();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function tbChange2(st) {
|
||
if (st == 2) {
|
||
$('#tbChange21').css('font-weight', 'normal');
|
||
$('#tbChange21').css('border-bottom', '0px solid #1599de');
|
||
|
||
$('#tbChange22').css('font-weight', 'bolder');
|
||
$('#tbChange22').css('border-bottom', '3px solid #1599de');
|
||
getData("", "KPITab2List_Drug");
|
||
} else {
|
||
$('#tbChange22').css('font-weight', 'normal');
|
||
$('#tbChange22').css('border-bottom', '0px solid #1599de');
|
||
|
||
$('#tbChange21').css('font-weight', 'bolder');
|
||
$('#tbChange21').css('border-bottom', '3px solid #1599de');
|
||
getData("", "KPITab2List_Power");
|
||
}
|
||
}
|
||
|
||
function tbChange3(st) {
|
||
if (st == 2) {
|
||
$('#tbChange31').css('font-weight', 'normal');
|
||
$('#tbChange31').css('border-bottom', '0px solid #1599de');
|
||
|
||
$('#tbChange32').css('font-weight', 'bolder');
|
||
$('#tbChange32').css('border-bottom', '3px solid #1599de');
|
||
|
||
getData("", "KPITabList_BZ_West");
|
||
} else {
|
||
$('#tbChange32').css('font-weight', 'normal');
|
||
$('#tbChange32').css('border-bottom', '0px solid #1599de');
|
||
|
||
$('#tbChange31').css('font-weight', 'bolder');
|
||
$('#tbChange31').css('border-bottom', '3px solid #1599de');
|
||
getData("", "KPITabList_BZ_East");
|
||
}
|
||
|
||
|
||
}
|
||
|
||
function tbChange1(st, mpcode) {
|
||
let edt = getNowTime().substring(0, 10) + " 23:59";
|
||
let sdt = getPlusTime(edt, "-7", "day").substring(0, 10) + " 00:00";
|
||
|
||
$.post(ext.contextPath + '/data/getDetailData.do', {mpcode: mpcode, sdt: sdt, edt: edt}, function (result) {
|
||
let content = result[0];
|
||
let sData = [];
|
||
// console.log(content);
|
||
sData.push({
|
||
data: content.data,
|
||
symbol: 'none',
|
||
name: content.name,
|
||
type: 'line'
|
||
})
|
||
option3.series = sData;
|
||
myChart3.setOption(option3, true);
|
||
}, 'json');
|
||
|
||
if (st == 0) {
|
||
$('#TP_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TP_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#NH3N_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#NH3N_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#TN_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TN_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#PH_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#PH_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
|
||
$('#COD_Oclick').css('background', 'rgba(0,153,255,0.28)');
|
||
$('#COD_Oclick').css('border', '1px solid rgba(0,229,255,1)');
|
||
} else if (st == 1) {
|
||
$('#COD_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#COD_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#NH3N_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#NH3N_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#TN_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TN_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#PH_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#PH_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
|
||
$('#TP_Oclick').css('background', 'rgba(0,153,255,0.28)');
|
||
$('#TP_Oclick').css('border', '1px solid rgba(0,229,255,1)');
|
||
} else if (st == 2) {
|
||
$('#COD_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#COD_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#TP_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TP_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#TN_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TN_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#PH_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#PH_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
|
||
$('#NH3N_Oclick').css('background', 'rgba(0,153,255,0.28)');
|
||
$('#NH3N_Oclick').css('border', '1px solid rgba(0,229,255,1)');
|
||
} else if (st == 3) {
|
||
$('#COD_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#COD_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#TP_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TP_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#NH3N_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#NH3N_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#PH_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#PH_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
|
||
$('#TN_Oclick').css('background', 'rgba(0,153,255,0.28)');
|
||
$('#TN_Oclick').css('border', '1px solid rgba(0,229,255,1)');
|
||
} else if (st == 4) {
|
||
$('#COD_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#COD_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#TP_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TP_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#NH3N_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#NH3N_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
$('#TN_Oclick').css('background', 'rgba(0,153,255,0)');
|
||
$('#TN_Oclick').css('border', '1px solid rgba(0,229,255,0)');
|
||
|
||
$('#PH_Oclick').css('background', 'rgba(0,153,255,0.28)');
|
||
$('#PH_Oclick').css('border', '1px solid rgba(0,229,255,1)');
|
||
}
|
||
}
|
||
|
||
function openZL() {
|
||
window.parent.addTab("shouye_ZL_tab", "工艺健康评价", "/digitalProcess/digitalTechnologist/betterPolicy.do");
|
||
}
|
||
|
||
function getLine(mpid) {
|
||
let edt = getNowTime().substring(0, 10);
|
||
let sdt = getPlusTime(edt, '-12', 'month').substring(0, 7) + "-01";
|
||
$.post(ext.contextPath + '/data/showOnlyLine.do', {
|
||
mpcode: mpid,
|
||
unitId: unitId,
|
||
sdt: sdt,
|
||
edt: edt
|
||
}, function (data2) {
|
||
$("#subDiv").html(data2);
|
||
openModal('curveModal');
|
||
});
|
||
}
|
||
|
||
function openModelCurve(type) {
|
||
let edt = getNowTime().substring(0, 10);
|
||
let sdt = getPlusTime(edt, '-30', 'day').substring(0, 10);
|
||
$.post(ext.contextPath + '/digitalProcess/digitalTechnologist/energyEfficiencyTHForModelCurve.do', {
|
||
type: type,
|
||
sdt: sdt,
|
||
edt: edt
|
||
}, function (data2) {
|
||
$("#subDiv").html(data2);
|
||
openModal('curveModal');
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
</head>
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div class="wrapper">
|
||
<!-- 引用top -->
|
||
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
|
||
<!-- 菜单栏 -->
|
||
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
|
||
<div class="content-wrapper"
|
||
style="background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXBJ.png);background-size: 100% 100%;">
|
||
<!-- Main content -->
|
||
<section class="content container-fluid">
|
||
<div id="mainAlertdiv"></div>
|
||
<div id="subDiv"></div>
|
||
|
||
<div id="main">
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;">
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.4);background-color: rgb(0,0,0,0.5);border: 1px solid #707070;">
|
||
<div style="float: left;width: 100%;height: 50px;padding-left: 15px;padding-top: 10px;">
|
||
<div style="float: left;width: 305px;height: 39px;font-size: 21px;line-height: 25px;color:#D9F6FB;letter-spacing: 0.521px;padding-left:55px;text-shadow: 1px 1px 1px #d9f6fb;font-family: Source Han Sans CN, Source Han Sans CN-Regular;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle1.png);background-size: 100% 100%;">
|
||
KPI评分总览
|
||
</div>
|
||
</div>
|
||
<div id="chart1" style="float: left;width: 50%;height: calc(100% - 50px);">
|
||
|
||
</div>
|
||
<div style="float: left;width: 50%;height: calc(100% - 50px);">
|
||
<div id="chart2" style="float: left;width: 100%;height: 75%;">
|
||
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 25%;padding-left: 20px;padding-right: 20px;">
|
||
<table style="width: 100%;height: 100%;text-align: center;">
|
||
<tr style="color: #ffffff">
|
||
<td>经济</td>
|
||
<td>产能</td>
|
||
<td onclick="openZL();" style="cursor: pointer;">质量</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td class="JJDF" style="color: #F9EB69"></td>
|
||
<td class="CNDF" style="color: #64B7FF"></td>
|
||
<td class="ZLDF" style="color: #F969EB;cursor: pointer;"
|
||
onclick="openZL();"></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 10px;">
|
||
|
||
</div>
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.6);background-color: rgb(0,0,0,0.5);border: 1px solid #707070;">
|
||
<div style="float: left;width: 100%;height: 50px;padding-left: 15px;padding-top: 10px;">
|
||
<div style="float: left;width: 305px;height: 39px;font-size: 21px;line-height: 25px;color:#D9F6FB;letter-spacing: 0.521px;padding-left:55px;text-shadow: 1px 1px 1px #d9f6fb;font-family: Source Han Sans CN, Source Han Sans CN-Regular;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle1.png);background-size: 100% 100%;">
|
||
质量指标
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: calc((100% - 50px)*0.5);padding-left: 15px;padding-right: 15px;text-align: center;line-height: 38px;">
|
||
<div style="float:left;width: 100%;height: 16.6%;color: #ffffff;">
|
||
<div style="float:left;width: 25%;height: 100%;">参数</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;">当前值</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;">平均值</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;">最高</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;">最低</div>
|
||
<div style="float:left;width: 25%;height: 100%;">指标</div>
|
||
<!-- <div style="float:left;width: 12.5%;height: 100%;">得分</div> -->
|
||
</div>
|
||
<div id="COD_Oclick"
|
||
style="float:left;width: 100%;height: 16.6%;color: #ffffff;cursor: pointer;background: rgba(0,153,255,0.28);border: 1px solid rgba(1,229,255,1);"
|
||
>
|
||
<div style="float:left;width: 12.5%;height: 100%;text-align: right;padding-right: 5px;">
|
||
COD
|
||
</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;color: #B7B3B3;text-align: left;padding-left: 5px;">
|
||
(mg/L)
|
||
</div>
|
||
<div class="CODnow" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="CODavg" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="CODmax" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="CODmin" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="CODLimitingValue"
|
||
style="float:left;width: 25%;height: 100%;color: #B7B3B3;"></div>
|
||
</div>
|
||
<div id="TP_Oclick"
|
||
style="float:left;width: 100%;height: 16.6%;color: #ffffff;cursor: pointer;border: 1px solid rgba(1,229,255,0);"
|
||
>
|
||
<div style="float:left;width: 12.5%;height: 100%;text-align: right;padding-right: 5px;">
|
||
TP
|
||
</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;color: #B7B3B3;text-align: left;padding-left: 5px;">
|
||
(mg/L)
|
||
</div>
|
||
<div class="TPnow" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TPavg" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TPmax" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TPmin" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TPLimitingValue"
|
||
style="float:left;width: 25%;height: 100%;color: #B7B3B3;"></div>
|
||
</div>
|
||
<div id="NH3N_Oclick"
|
||
style="float:left;width: 100%;height: 16.6%;color: #ffffff;cursor: pointer;border: 1px solid rgba(1,229,255,0);"
|
||
>
|
||
<div style="float:left;width: 12.5%;height: 100%;text-align: right;padding-right: 5px;">
|
||
NH3N
|
||
</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;color: #B7B3B3;text-align: left;padding-left: 5px;">
|
||
(mg/L)
|
||
</div>
|
||
<div class="NH3Nnow" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="NH3Navg" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="NH3Nmax" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="NH3Nmin" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="NH3NLimitingValue"
|
||
style="float:left;width: 25%;height: 100%;color: #B7B3B3;"></div>
|
||
</div>
|
||
<div id="TN_Oclick"
|
||
style="float:left;width: 100%;height: 16.6%;color: #ffffff;cursor: pointer;border: 1px solid rgba(1,229,255,0);"
|
||
>
|
||
<div style="float:left;width: 12.5%;height: 100%;text-align: right;padding-right: 5px;">
|
||
TN
|
||
</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;color: #B7B3B3;text-align: left;padding-left: 5px;">
|
||
(mg/L)
|
||
</div>
|
||
<div class="TNnow" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TNavg" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TNmax" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TNmin" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="TNLimitingValue"
|
||
style="float:left;width: 25%;height: 100%;color: #B7B3B3;"></div>
|
||
</div>
|
||
<div id="PH_Oclick"
|
||
style="float:left;width: 100%;height: 16.6%;color: #ffffff;cursor: pointer;border: 1px solid rgba(1,229,255,0);"
|
||
>
|
||
<div style="float:left;width: 12.5%;height: 100%;text-align: right;padding-right: 5px;">
|
||
PH
|
||
</div>
|
||
<div style="float:left;width: 12.5%;height: 100%;color: #B7B3B3;text-align: left;padding-left: 5px;">
|
||
|
||
</div>
|
||
<div class="PHnow" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="PHavg" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="PHmax" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="PHmin" style="float:left;width: 12.5%;height: 100%;color: #00FF11;"></div>
|
||
<div class="PHLimitingValue"
|
||
style="float:left;width: 25%;height: 100%;color: #B7B3B3;"></div>
|
||
</div>
|
||
</div>
|
||
<div id="chart3"
|
||
style="float: left;width: 100%;height: calc((100% - 50px)*0.5);padding-left: 15px;padding-right: 15px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background-color: rgb(0,0,0,0.5);border: 1px solid #707070;">
|
||
<div style="float: left;width: 100%;height: 50px;padding-left: 15px;padding-top: 10px;">
|
||
<div style="float: left;width: 305px;height: 39px;font-size: 21px;line-height: 25px;color:#D9F6FB;letter-spacing: 0.521px;padding-left:55px;text-shadow: 1px 1px 1px #d9f6fb;font-family: Source Han Sans CN, Source Han Sans CN-Regular;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle1.png);background-size: 100% 100%;">
|
||
模型运行评价
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: calc((100% - 100px)*0.1);padding-left: 15px;padding-right: 15px;">
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo1.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">本日运行时长</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="modelRunTime" style="color: #00C2FF;font-size: 28px;font-weight: 700;"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">h</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo2.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">发布指令</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="modelOrderNum"
|
||
style="color: #00C2FF;font-size: 28px;font-weight: 700;cursor: pointer;"
|
||
onclick="openModelCurve('0')"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">个</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo3.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">执行率</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="modelAdoptionRate"
|
||
style="color: #00C2FF;font-size: 28px;font-weight: 700;cursor: pointer;"
|
||
onclick="openModelCurve('1')"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">%</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div id="chart4"
|
||
style="float: left;width: 100%;height: calc((100% - 100px)*0.24);padding-left: 15px;padding-right: 15px;">
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 50px;padding-left: 15px;padding-top: 10px;">
|
||
<div style="float: left;width: 305px;height: 39px;font-size: 21px;line-height: 25px;color:#D9F6FB;letter-spacing: 0.521px;padding-left:55px;text-shadow: 1px 1px 1px #d9f6fb;font-family: Source Han Sans CN, Source Han Sans CN-Regular;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle1.png);background-size: 100% 100%;">
|
||
产能指标
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: calc((100% - 100px)*0.38);padding-left: 15px;padding-right: 15px;padding-top: 5px;">
|
||
<div style="float: left;width: 50%;height: 70%;">
|
||
<div style="float: left;width: 70%;height: 100%;position:relative;">
|
||
<div style="left: 100%;top:5%;width:2px;height: 85%;border:1px dashed #0046ff;border-radius: 3px;position: absolute;z-index: 80;">
|
||
</div>
|
||
<div id="DRJHPCL_DBX"
|
||
style="left: 100%;top:33.3%;width:2px;height: 57%;border:1px dashed #F16EFF;border-radius: 3px;position: absolute;z-index: 80;">
|
||
</div>
|
||
<div style="float: left;width: 100%;top: 0%;position: absolute;z-index: 90;">
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.4);color: #ffffff;">
|
||
年度生产指标（万m3/d）
|
||
</div>
|
||
<div class="DRSCZB"
|
||
style="float: left;width: 100%;height: calc((100% - 10px)*0.6);color: #0046ff;font-size: 25px;font-weight: 700;">
|
||
33.00
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 6px;background: #0046ff;border-radius: 3px;">
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;top: 33.3%;position: absolute;z-index: 90;">
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.4);color: #ffffff;">
|
||
当日排产处理量（万m3）
|
||
</div>
|
||
<div class="DRJHPCL"
|
||
style="float: left;width: 100%;height: calc((100% - 10px)*0.6);color: #F16EFF;font-size: 25px;font-weight: 700;">
|
||
<%-- 23--%>
|
||
</div>
|
||
<div id="DRJHPCL_JDT"
|
||
style="float: left;width: 100%;height: 6px;background: #F16EFF;border-radius: 3px;">
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;top: 66.6%;position: absolute;z-index: 90;">
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.4);color: #ffffff;">
|
||
当日实际处理量（万m3）
|
||
</div>
|
||
<div class="DRSJCLL"
|
||
style="float: left;width: 100%;height: calc((100% - 10px)*0.6);color:#09D3DB;font-size: 25px;font-weight: 700;">
|
||
</div>
|
||
<div id="DRSJCLL_JDT"
|
||
style="float: left;width: 100%;height: 6px;background: #09D3DB;border-radius: 3px;">
|
||
</div>
|
||
</div>
|
||
<%-- <div style="float: left;width: 120%;top: 66.6%;position: absolute;z-index: 90;">--%>
|
||
<%-- <table style="width: 100%;height: 100%;text-align: left;font-size:18px;">--%>
|
||
<%-- <tr>--%>
|
||
<%-- <td style="color: #F16EFF;">完成率</td>--%>
|
||
<%-- </tr>--%>
|
||
<%-- <tr>--%>
|
||
<%-- <td id="dayDiffRate" style="color: #F16EFF;">+5%</td>--%>
|
||
<%-- </tr>--%>
|
||
<%-- </table>--%>
|
||
<%-- </div>--%>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 50%;height: 70%;">
|
||
<div style="float: left;width: 70%;height: 100%;position:relative;">
|
||
<div style="left: 100%;top:5%;width:1px;height: 57%;border:2px dashed #0046ff;border-radius: 3px;position: absolute;z-index: 80;">
|
||
</div>
|
||
<div style="float: left;width: 100%;top: 0%;position: absolute;z-index: 80;">
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.4);color: #ffffff;">
|
||
累计年度生产指标（万m3）
|
||
</div>
|
||
<div id="NDJHCLL"
|
||
style="float: left;width: 100%;height: calc((100% - 10px)*0.6);color: #0046FF;font-size: 25px;font-weight: 700;">
|
||
<%-- 980/900--%>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 6px;background: #0046ff;border-radius: 3px;">
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 120%;top: 33.3%;position: absolute;z-index: 80;">
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.4);color: #ffffff;">
|
||
累计年度实际处理量（万m3）
|
||
</div>
|
||
<div id="NDSJCLL" class="NDSJCLL"
|
||
style="float: left;width: 100%;height: calc((100% - 10px)*0.6);color: #09D3DB;font-size: 25px;font-weight: 700;">
|
||
</div>
|
||
<div id="NDSJCLL_JDT"
|
||
style="float: left;width: 100%;height: 6px;background: #09D3DB;border-radius: 3px;">
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 120%;top: 66.6%;position: absolute;z-index: 90;">
|
||
<div style="float: left;width: 50%;height: 100%;">
|
||
<table style="width: 100%;height: 100%;text-align: left;font-size:18px;">
|
||
<tr>
|
||
<td style="color: #F16EFF;">完成率</td>
|
||
</tr>
|
||
<tr>
|
||
<td id="dayDiffRate" style="color: #F16EFF;"></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width: 50%;height: 100%;">
|
||
<table style="width: 100%;height: 100%;text-align: right;font-size:18px;">
|
||
<tr>
|
||
<td style="color: #0046FF;">完成率</td>
|
||
</tr>
|
||
<tr>
|
||
<td id="yearDiffRate" style="color: #0046FF;"></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 30%;padding-top: 10px;">
|
||
<div style="float: left;width: 40%;height: 100%;">
|
||
<div style="float: left;width: 100%;height: 30%;color: #ffffff;">
|
||
当月计划排产量
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 70%;color: #ffffff;background: linear-gradient(180deg,#54288e, #24053b);border-radius: 3px 3px 0px 0px;">
|
||
<table style="width: 100%;height: 100%;text-align: center;">
|
||
<tr style="color: #BE94D3">
|
||
<td class="DYJHPCL"
|
||
style="width: 65%;font-weight: 700;font-size: 25px;"></td>
|
||
<td style="width: 35%;font-size: 16px;">万m3</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 40%;height: 100%;padding-left: 30px;">
|
||
<div style="float: left;width: 100%;height: 30%;color: #ffffff;">
|
||
当月实际处理量
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 70%;color: #ffffff;background: linear-gradient(180deg,#09d3db, #05323b);border-radius: 3px 3px 0px 0px;">
|
||
<table style="width: 100%;height: 100%;text-align: center;">
|
||
<tr style="color: #FFFFFF">
|
||
<td class="DYSJCLL"
|
||
style="width: 65%;font-weight: 700;font-size: 25px;"></td>
|
||
<td style="width: 35%;font-size: 16px;">万m3</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 20%;height: 100%;padding-left: 20px;">
|
||
<table style="width: 100%;height: 100%;text-align: left;font-size: 14px;">
|
||
<tr style="color: #09D3DB;vertical-align: bottom;">
|
||
<td style="font-weight: 700;">本月已完成</td>
|
||
</tr>
|
||
<tr style="color: #09D3DB;">
|
||
<td id="monthDiffRate" style="font-weight: 700;">%</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: calc((100% - 100px)*0.28);padding-left: 15px;padding-right: 15px;padding-top: 10px;">
|
||
<div style="float: left;width: 100%;height: 35px;line-height: 35px;">
|
||
<div style="float: left;width: 200px;height: 100%;font-weight: 700;color: #ffffff;">产能统计
|
||
</div>
|
||
<%-- <div style="float: right;width: 265px;height: 30px;fborder-radius: 2px;background: #032056;border: 1px solid #8ac6dc;">--%>
|
||
<%-- <input type="text" class="form-control pull-left" id="date1"--%>
|
||
<%-- style="width:100%;height: 100%;border: 0px;background-color: transparent;color: #FFFFFF;">--%>
|
||
<%-- </div>--%>
|
||
</div>
|
||
<div id="chart5" style="float: left;width: 100%;height: calc(100% - 35px);">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background-color: rgb(0,0,0,0.5);border: 1px solid #707070;">
|
||
<div style="float: left;width: 100%;height: 50px;padding-left: 15px;padding-top: 10px;">
|
||
<div style="float: left;width: 305px;height: 39px;font-size: 21px;line-height: 25px;color:#D9F6FB;letter-spacing: 0.521px;padding-left:55px;text-shadow: 1px 1px 1px #d9f6fb;font-family: Source Han Sans CN, Source Han Sans CN-Regular;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/titleStyle1.png);background-size: 100% 100%;">
|
||
经济指标
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: calc((100% - 90px)*0.2);padding-left: 15px;padding-right: 15px;">
|
||
<div style="float: left;width: 100%;height: 50%;">
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo4.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">用电量</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="JJZB_YDL" class="JJZB_YDL"
|
||
style="color: #FFCC00;font-size: 28px;font-weight: 700;cursor: pointer;"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">万kwh
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo4.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">电单耗</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="JJZB_DDH" class="JJZB_DDH"
|
||
style="color: #FFCC00;font-size: 28px;font-weight: 700;cursor: pointer;"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">kwh
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo4.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">电单耗计划量</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="JJZB_DDHJH" class="JJZB_DDHJH"
|
||
style="color: #FFCC00;font-size: 28px;font-weight: 700;cursor: pointer;"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">kwh
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 50%;margin-top: 10px;">
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/waterDroplet.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">用水量</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="JJZB_YSL" class="JJZB_YSL"
|
||
style="color: #09D3DB;font-size: 28px;font-weight: 700;cursor: pointer;"></td>
|
||
<td style="width: 25%;color: #ffffff;font-size: 14px;padding-top: 10px;">万吨</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo5.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">药单耗</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="JJZB_YDH" class="JJZB_YDH"
|
||
style="color: #CE00FF;font-size: 28px;font-weight: 700;cursor: pointer;"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">ppm
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 20px)*0.333);height: 100%;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;">
|
||
<table style="width: 100%;height: 100%;text-align: left;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 35%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo5.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td colspan="2">药单耗计划量</td>
|
||
</tr>
|
||
<tr style="font-size: 31px;">
|
||
<td id="JJZB_YDHJH" class="JJZB_YDHJH"
|
||
style="color: #CE00FF;font-size: 28px;font-weight: 700;cursor: pointer;"></td>
|
||
<td style="width: 28%;color: #ffffff;font-size: 14px;padding-top: 10px;">ppm
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: calc((100% - 90px)*0.3);padding-left: 15px;padding-right: 15px;margin-top: 20px;">
|
||
<div style="float: left;width: 100%;height: 45px;line-height: 35px;">
|
||
<div style="float: left;width: calc(100% - 265px);height: 35px;text-align: center;">
|
||
<div id="tbChange21"
|
||
style="float: left;width: 70px;height: 100%;font-weight:bolder;color: #ffffff;border-bottom: 3px solid #1599de;cursor: pointer;"
|
||
onclick="tbChange2(1);">
|
||
电耗统计
|
||
</div>
|
||
<div id="tbChange22"
|
||
style="float: left;width: 70px;height: 100%;font-weight:normal;color: #ffffff;cursor: pointer;"
|
||
onclick="tbChange2(2);">
|
||
药耗统计
|
||
</div>
|
||
</div>
|
||
<%-- <div style="float: right;width: 265px;height: 30px;fborder-radius: 2px;background: #032056;border: 1px solid #8ac6dc;">--%>
|
||
<%-- <input type="text" class="form-control pull-left" id="date2"--%>
|
||
<%-- style="width:100%;height: 100%;border: 0px;background-color: transparent;color: #FFFFFF;">--%>
|
||
<%-- </div>--%>
|
||
</div>
|
||
<div id="chart6" style="float: left;width: 100%;height: calc(100% - 45px);">
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div style="float: left;width: 100%;height: calc((100% - 90px)*0.5);padding-left: 15px;padding-right: 15px;margin-top: 10px;">
|
||
<div style="float: left;width: calc(100% - 265px);height: 40px;text-align: center;padding-bottom:10px;">
|
||
<div id="tbChange31"
|
||
style="float: left;width: 70px;height: 100%;font-weight:bolder;color: #ffffff;border-bottom: 3px solid #1599de;cursor: pointer;"
|
||
onclick="tbChange3(1);">
|
||
东池
|
||
</div>
|
||
<div id="tbChange32"
|
||
style="float: left;width: 70px;height: 100%;font-weight:normal;color: #ffffff;cursor: pointer;"
|
||
onclick="tbChange3(2);">
|
||
西池
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 75px;background: linear-gradient(180deg,#133853, #040b11);border: 1px solid #184546;padding-top: 5px;padding-bottom: 5px;">
|
||
<table style="width: 100%;height: 100%;text-align: center;">
|
||
<tr style="color: #ffffff">
|
||
<td rowspan="2" style="width: 5%;padding-left: 10px;">
|
||
<div style="width:30px;height: 30px;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THNXLogo6.png);background-size: 100% 100%;"></div>
|
||
</td>
|
||
<td>泵组效率(%)</td>
|
||
<td>液位(m)</td>
|
||
<td>最优液位区间(m)</td>
|
||
<td>开泵台数</td>
|
||
</tr>
|
||
<tr style="color: #00DCFF;font-size: 28px;font-weight: 700;">
|
||
<td class="BZXL"></td>
|
||
<td class="BZYW"></td>
|
||
<td><span class="BZYWQJ_Min"></span>~<span class="BZYWQJ_Max"></span></td>
|
||
<td><span class="BZKBTS"></span>/<span class="BZZTS">5</span></td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div id="chart7" style="float: left;width: 100%;height: calc(100% - 115px);">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- /.content -->
|
||
</div>
|
||
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
||
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
||
</div>
|
||
</body>
|
||
<!-- 引入daterangepicker-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||
charset="utf-8"></script>
|
||
</html> |