724 lines
20 KiB
Plaintext
724 lines
20 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject"%>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security"%>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var beginTimeStore1 = '';
|
|||
|
|
var endTimeStore1 = '';
|
|||
|
|
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
|
|||
|
|
function initDate1() {
|
|||
|
|
//定义locale汉化插件
|
|||
|
|
beginTimeStore1 = moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm');;
|
|||
|
|
endTimeStore1 = moment().format('YYYY-MM-DD HH:mm');
|
|||
|
|
/* if(${param.sdt!=''}){
|
|||
|
|
beginTimeStore1='2018-08-09';
|
|||
|
|
}
|
|||
|
|
if(${param.edt!=''}){
|
|||
|
|
endTimeStore1='2018-08-10';
|
|||
|
|
} */
|
|||
|
|
var locale = {
|
|||
|
|
"format": 'YYYY-MM-DD HH:mm',
|
|||
|
|
"separator": " ~ ",
|
|||
|
|
"applyLabel": "确定",
|
|||
|
|
"cancelLabel": "取消",
|
|||
|
|
"fromLabel": "起始时间",
|
|||
|
|
"toLabel": "结束时间'",
|
|||
|
|
"customRangeLabel": "自定义",
|
|||
|
|
"weekLabel": "W",
|
|||
|
|
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
|||
|
|
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
|||
|
|
"firstDay": 1
|
|||
|
|
};
|
|||
|
|
$('#reservationtime1').daterangepicker({
|
|||
|
|
"timePicker": true,
|
|||
|
|
"timePicker24Hour": true,
|
|||
|
|
"linkedCalendars": false,
|
|||
|
|
"autoUpdateInput": false,
|
|||
|
|
"timePickerIncrement": 10,
|
|||
|
|
"locale": locale,
|
|||
|
|
//汉化按钮部分
|
|||
|
|
ranges: {
|
|||
|
|
'1小时': [moment().subtract(1, 'hours'), moment()],
|
|||
|
|
'8小时': [moment().subtract(8, 'hours'), moment()],
|
|||
|
|
'24小时': [moment().subtract(24, 'hours'), moment()],
|
|||
|
|
},
|
|||
|
|
startDate: beginTimeStore1,
|
|||
|
|
endDate: endTimeStore1
|
|||
|
|
}, function (start, end, label) {
|
|||
|
|
beginTimeStore1 = start.format(this.locale.format);
|
|||
|
|
endTimeStore1 = 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));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
$('#reservationtime1').val(beginTimeStore1 + locale.separator + endTimeStore1);
|
|||
|
|
//展示测量点曲线
|
|||
|
|
getMpointJson();
|
|||
|
|
};
|
|||
|
|
var companyId = "";
|
|||
|
|
/* var editFun = function(id) {
|
|||
|
|
$.post(ext.contextPath + '/data/showCurveView.do', {companyId:companyId,id:id} , function(data) {
|
|||
|
|
$("#menuBox").html(data);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
var initTreeView = function() {
|
|||
|
|
$.post(ext.contextPath + '/data/getCurvesJson.do', {ng:''} , function(data) {
|
|||
|
|
//console.info(data)
|
|||
|
|
$('#tree').treeview({data: data
|
|||
|
|
});
|
|||
|
|
$('#tree').on('nodeSelected', function(event, data) {
|
|||
|
|
editFun(data.id);
|
|||
|
|
//var node=$('#tree').treeview('getSelected');
|
|||
|
|
});
|
|||
|
|
},'json');
|
|||
|
|
$("#menuBox").html("");
|
|||
|
|
}; */
|
|||
|
|
var mpcodestr = "";
|
|||
|
|
var mpnamestr = "";
|
|||
|
|
var mpunitstr = "";
|
|||
|
|
var optionArr = new Array();
|
|||
|
|
var colors = ['#00c200', '#d14a61', '#675bba', '#5793f3'];
|
|||
|
|
function getMpointJson() {
|
|||
|
|
$.post(ext.contextPath + "/data/energyAnalysis/getMPointJson.do", { companyId: companyId, key: "${param.key}" }, function (data) {
|
|||
|
|
//var rows = data.rows;
|
|||
|
|
var ArrayDatas = eval("(" + data + ")").rows;
|
|||
|
|
var mpcode = [];
|
|||
|
|
for (var i = 0; i < ArrayDatas.length; i++) {
|
|||
|
|
mpcode.push(ArrayDatas[i].mPoint.mpointcode);
|
|||
|
|
mpcodestr += ArrayDatas[i].mPoint.mpointcode + ",";//测量点code
|
|||
|
|
mpnamestr += ArrayDatas[i].mPoint.parmname + ",";//测量点名称
|
|||
|
|
mpunitstr += ArrayDatas[i].mPoint.unit + ",";//测量点单位
|
|||
|
|
}
|
|||
|
|
console.log(mpcodestr);
|
|||
|
|
getHistoryList(mpcodestr, mpnamestr);
|
|||
|
|
|
|||
|
|
getHistoryJsons(mpcodestr, mpnamestr, mpunitstr);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//console.log(idArr.length);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function getHistoryJsons(ids, names, units) {
|
|||
|
|
console.log(ids);
|
|||
|
|
console.log(names);
|
|||
|
|
console.log(units);
|
|||
|
|
$.post(ext.contextPath + "/work/mpoint/getHistory.do", { bizId: companyId, ids: ids, sdt: beginTimeStore1, edt: endTimeStore1 }, function (data) {
|
|||
|
|
var ArrayDatas = eval("(" + data + ")");
|
|||
|
|
console.log(ArrayDatas);
|
|||
|
|
var measuredt = [];
|
|||
|
|
var res = ArrayDatas[0];
|
|||
|
|
for (var i = 0; i < res.length; i++) {
|
|||
|
|
measuredt.push(res[i].measuredt.substring(0, 16));
|
|||
|
|
}
|
|||
|
|
var parmvalue = [];
|
|||
|
|
var mpnamestr = names.substring(0, names.length - 1);
|
|||
|
|
mpnamestr = mpnamestr.split(",");
|
|||
|
|
var mpunitstr = units.substring(0, units.length - 1);
|
|||
|
|
mpunitstr = mpunitstr.split(",");
|
|||
|
|
var offset = 60;
|
|||
|
|
var yaAxis = [];
|
|||
|
|
var series = [];
|
|||
|
|
for (var i = 0; i < mpnamestr.length; i++) {
|
|||
|
|
var xobj = {};
|
|||
|
|
xobj.type = 'value';
|
|||
|
|
xobj.name = mpnamestr[i];
|
|||
|
|
if (i == 0) {
|
|||
|
|
xobj.position = 'left';
|
|||
|
|
xobj.offset = 0;
|
|||
|
|
} else {
|
|||
|
|
xobj.position = 'right';
|
|||
|
|
xobj.offset = offset * (i - 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var axisLine = {};
|
|||
|
|
var lineStyle = {};
|
|||
|
|
var length = mpnamestr.length - 1;
|
|||
|
|
lineStyle.color = colors[i % colors.length];
|
|||
|
|
axisLine.lineStyle = lineStyle;
|
|||
|
|
xobj.axisLine = axisLine;
|
|||
|
|
var axisLabel = {};
|
|||
|
|
axisLabel.formatter = '{value}' + mpunitstr[i];
|
|||
|
|
xobj.axisLabel = axisLabel;
|
|||
|
|
xobj.min = function (value) {
|
|||
|
|
return value.min;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
yaAxis.push(xobj);
|
|||
|
|
|
|||
|
|
var yobj = {};
|
|||
|
|
yobj.type = 'line';
|
|||
|
|
yobj.name = mpnamestr[i];
|
|||
|
|
yobj.yAxisIndex = i;
|
|||
|
|
var data = [];
|
|||
|
|
for (var j = 0; j < measuredt.length; j++) {
|
|||
|
|
var resy = ArrayDatas[i];
|
|||
|
|
data.push(resy[j].parmvalue);
|
|||
|
|
}
|
|||
|
|
yobj.data = data;
|
|||
|
|
var markPoint = {};
|
|||
|
|
var str = '{"data": [{"type": "max", "name": "最大值", "itemStyle": {"color": "red"}},{"type": "min", "name": "最小值", "itemStyle": {"color": "green"}}]}';
|
|||
|
|
yobj.markPoint = JSON.parse(str);
|
|||
|
|
str = '{"data": [{"type": "average", "name": "平均值"}]}';
|
|||
|
|
yobj.markLine = JSON.parse(str);
|
|||
|
|
series.push(yobj);
|
|||
|
|
};
|
|||
|
|
var option = {
|
|||
|
|
color: colors,
|
|||
|
|
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'cross'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
right: '10%'
|
|||
|
|
},
|
|||
|
|
toolbox: {
|
|||
|
|
feature: {
|
|||
|
|
dataView: { show: false, readOnly: false },
|
|||
|
|
restore: { show: false },
|
|||
|
|
saveAsImage: { show: false }
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: mpnamestr
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
data: measuredt,
|
|||
|
|
axisLabel: {
|
|||
|
|
//interval: 1000,//横坐标间隔
|
|||
|
|
rotate: 340,//横坐标倾斜角度
|
|||
|
|
//倾斜度 -90 至 90 默认为0
|
|||
|
|
// margin: 2,
|
|||
|
|
/* textStyle: {
|
|||
|
|
fontWeight: "bolder",
|
|||
|
|
color: "#000000"
|
|||
|
|
} */
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: yaAxis,
|
|||
|
|
series: series
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
var chart = document.getElementById("chart");
|
|||
|
|
var number = mpnamestr.length;
|
|||
|
|
console.log(offset);
|
|||
|
|
//chart.style.width = $("#chartdiv").width()+offset*number+300+'px';
|
|||
|
|
//chart.style.height = 250+'px';
|
|||
|
|
$("#chart").height($("#chartdiv").height() - 50);
|
|||
|
|
$("#chart").width($("#chartdiv").width());
|
|||
|
|
//$("#chart").width(700);
|
|||
|
|
var chartData = echarts.init(chart);
|
|||
|
|
//setTimeout(function(){
|
|||
|
|
chartData.setOption(option);
|
|||
|
|
/* 水球图 */
|
|||
|
|
var bottleChart = echarts.init(document.getElementById('bottlediv'));
|
|||
|
|
optionv = {
|
|||
|
|
/*graphic: {
|
|||
|
|
elements: [{
|
|||
|
|
type: 'text',
|
|||
|
|
style: {
|
|||
|
|
text: "NaOH",
|
|||
|
|
font: "18px Microsoft YaHei",
|
|||
|
|
fill: "#4169B1",
|
|||
|
|
},
|
|||
|
|
left: 'center',
|
|||
|
|
top: 'bottom'
|
|||
|
|
}]
|
|||
|
|
},*/
|
|||
|
|
series: [{
|
|||
|
|
type: 'liquidFill',
|
|||
|
|
data: [{
|
|||
|
|
value: 0.5,
|
|||
|
|
direction: 'left',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#FFCB65'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}],
|
|||
|
|
radius: '90%',
|
|||
|
|
outline: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
backgroundStyle: {
|
|||
|
|
borderColor: '#156ACF',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.4)',
|
|||
|
|
shadowBlur: 20
|
|||
|
|
},
|
|||
|
|
shape: bucketPath,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 40,
|
|||
|
|
color: '#D94854'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
bottleChart.setOption(optionv);
|
|||
|
|
|
|||
|
|
/* 后加1#投加 */
|
|||
|
|
var backChart1 = echarts.init(document.getElementById('backChart1'));
|
|||
|
|
optionBack1 = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'cross',
|
|||
|
|
label: {
|
|||
|
|
backgroundColor: '#283b56'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: [{
|
|||
|
|
x: "left",
|
|||
|
|
text: '1#',
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
fontSize: 20,
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
grid: {
|
|||
|
|
left: '10%',
|
|||
|
|
right: '10%',
|
|||
|
|
bottom: '10%',
|
|||
|
|
top: '10%',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
left: 'center',
|
|||
|
|
itemGap: 100,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 20
|
|||
|
|
},
|
|||
|
|
data: ['出厂余氯', '余氯高限','投加比例']
|
|||
|
|
},
|
|||
|
|
dataZoom: {
|
|||
|
|
show: false,
|
|||
|
|
start: 0,
|
|||
|
|
end: 100
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: true,
|
|||
|
|
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
show: false,
|
|||
|
|
boundaryGap: true,
|
|||
|
|
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true,
|
|||
|
|
//max: 1200,
|
|||
|
|
min: 0,
|
|||
|
|
boundaryGap: [0.2, 0.2]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
//max: 30,
|
|||
|
|
min: 0,
|
|||
|
|
boundaryGap: [0.2, 0.2]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '出厂余氯',
|
|||
|
|
type: 'line',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#E7AC28',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 3,
|
|||
|
|
},
|
|||
|
|
data: (function () {
|
|||
|
|
var res = [];
|
|||
|
|
var len = 24;
|
|||
|
|
while (len--) {
|
|||
|
|
res.push(Math.round(Math.random() * 1000));
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
})()
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '余氯高限',
|
|||
|
|
type: 'line',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#75BC63',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 3,
|
|||
|
|
},
|
|||
|
|
data: [1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100]
|
|||
|
|
}, {
|
|||
|
|
name: '投加比例',
|
|||
|
|
type: 'line',
|
|||
|
|
xAxisIndex: 1,
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#D12FD6',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 3,
|
|||
|
|
},
|
|||
|
|
data: (function () {
|
|||
|
|
var res = [];
|
|||
|
|
var len = 0;
|
|||
|
|
while (len < 24) {
|
|||
|
|
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
|
|||
|
|
len++;
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
})()
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
backChart1.setOption(optionBack1);
|
|||
|
|
|
|||
|
|
/* 后加2#投加 */
|
|||
|
|
var backChart2 = echarts.init(document.getElementById('backChart2'));
|
|||
|
|
optionBack2 = {
|
|||
|
|
title: [{
|
|||
|
|
x: "left",
|
|||
|
|
text: '2#',
|
|||
|
|
textStyle: {
|
|||
|
|
fontWeight: 'normal',
|
|||
|
|
fontSize: 20,
|
|||
|
|
},
|
|||
|
|
}],
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'cross',
|
|||
|
|
label: {
|
|||
|
|
backgroundColor: '#283b56'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '10%',
|
|||
|
|
right: '10%',
|
|||
|
|
bottom: '10%',
|
|||
|
|
top: '10%',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
left: 'center',
|
|||
|
|
itemGap: 100,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 20
|
|||
|
|
},
|
|||
|
|
data: ['出厂余氯', '余氯高限','投加比例']
|
|||
|
|
},
|
|||
|
|
dataZoom: {
|
|||
|
|
show: false,
|
|||
|
|
start: 0,
|
|||
|
|
end: 100
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: true,
|
|||
|
|
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
show: false,
|
|||
|
|
boundaryGap: true,
|
|||
|
|
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true,
|
|||
|
|
//max: 1200,
|
|||
|
|
min: 0,
|
|||
|
|
boundaryGap: [0.2, 0.2]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
scale: true,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
//max: 30,
|
|||
|
|
min: 0,
|
|||
|
|
boundaryGap: [0.2, 0.2]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '出厂余氯',
|
|||
|
|
type: 'line',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#E7AC28',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 3,
|
|||
|
|
},
|
|||
|
|
data: (function () {
|
|||
|
|
var res = [];
|
|||
|
|
var len = 24;
|
|||
|
|
while (len--) {
|
|||
|
|
res.push(Math.round(Math.random() * 1000));
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
})()
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '余氯高限',
|
|||
|
|
type: 'line',
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#75BC63',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 3,
|
|||
|
|
},
|
|||
|
|
data: [1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100, 1100]
|
|||
|
|
}, {
|
|||
|
|
name: '投加比例',
|
|||
|
|
type: 'line',
|
|||
|
|
xAxisIndex: 1,
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
color: '#D12FD6',
|
|||
|
|
borderWidth: 1,
|
|||
|
|
},
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 3,
|
|||
|
|
},
|
|||
|
|
data: (function () {
|
|||
|
|
var res = [];
|
|||
|
|
var len = 0;
|
|||
|
|
while (len < 24) {
|
|||
|
|
res.push((Math.random() * 10 + 5).toFixed(1) - 0);
|
|||
|
|
len++;
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
})()
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
backChart2.setOption(optionBack2);
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
function getHistoryList(ids, names) {
|
|||
|
|
var idarr = ids.substring(0, ids.length - 1);
|
|||
|
|
idarr = idarr.split(",");
|
|||
|
|
var namearr = names.substring(0, names.length - 1);
|
|||
|
|
namearr = namearr.split(",");
|
|||
|
|
console.log(idarr);
|
|||
|
|
var length = idarr.length;
|
|||
|
|
var mpoint = [];
|
|||
|
|
var checkobx = {};
|
|||
|
|
checkobx.checkbox = true;
|
|||
|
|
//mpoint.push(checkobx);
|
|||
|
|
var measuredt = {};
|
|||
|
|
measuredt.field = 'measuredt';
|
|||
|
|
measuredt.title = '时间';
|
|||
|
|
measuredt.align = 'center';
|
|||
|
|
measuredt.valign = 'middle';
|
|||
|
|
measuredt.width = 150;
|
|||
|
|
mpoint.push(measuredt);
|
|||
|
|
|
|||
|
|
for (var i = 0; i < idarr.length; i++) {
|
|||
|
|
var color = colors[i % idarr.length];
|
|||
|
|
|
|||
|
|
var parmvalue = {};
|
|||
|
|
parmvalue.field = 'paramvalue' + i;
|
|||
|
|
parmvalue.title = namearr[i];
|
|||
|
|
parmvalue.align = 'center';
|
|||
|
|
parmvalue.valign = 'middle';
|
|||
|
|
//parmvalue.width=60;
|
|||
|
|
var css1 = {};
|
|||
|
|
css1.color = color;
|
|||
|
|
var cellstyle = {};
|
|||
|
|
cellstyle.css = css1;
|
|||
|
|
parmvalue.cellStyle = cellstyle,
|
|||
|
|
mpoint.push(parmvalue);
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
function dosearch() {
|
|||
|
|
mpcodestr = "";
|
|||
|
|
mpnamestr = "";
|
|||
|
|
mpunitstr = "";
|
|||
|
|
optionArr = new Array();
|
|||
|
|
getMpointJson();
|
|||
|
|
}
|
|||
|
|
$(function () {
|
|||
|
|
$.post(ext.contextPath + "/user/getSearchBizsByUserId4Select.do", {}, function (data) {
|
|||
|
|
if (data.length == 1) {
|
|||
|
|
//选择厂区为一个厂时隐藏选择框
|
|||
|
|
$("#search_code").css("display", "none");
|
|||
|
|
$("#company").text(data[0].text);
|
|||
|
|
companyId = data[0].id;
|
|||
|
|
} else {
|
|||
|
|
$("#company").css("display", "none");
|
|||
|
|
var selelct = $("#search_code").select2({
|
|||
|
|
data: data,
|
|||
|
|
placeholder: '请先选择水厂',//默认文字提示
|
|||
|
|
allowClear: true,//允许清空
|
|||
|
|
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
|
|||
|
|
language: "zh-CN",
|
|||
|
|
minimumInputLength: 0,
|
|||
|
|
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
|||
|
|
formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
|
|||
|
|
formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
|
|||
|
|
});
|
|||
|
|
$(".select2-selection--single").css({ 'height': '30px', 'paddingTop': '4px' })
|
|||
|
|
selelct.val('').trigger("change");
|
|||
|
|
//refreshSelect();
|
|||
|
|
selelct.on("change", function (e) {
|
|||
|
|
companyId = $(this).val();
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
initDate1();
|
|||
|
|
}, 'json');
|
|||
|
|
//initTreeView();
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
|||
|
|
<div class="wrapper">
|
|||
|
|
<!-- 引用top -->
|
|||
|
|
<%--<jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
|||
|
|
<!-- 菜单栏 -->
|
|||
|
|
<jsp:include page="/jsp/left.jsp"></jsp:include>
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<!-- Content Header (Page header) -->
|
|||
|
|
<section class="content-header">
|
|||
|
|
<h1 id="head_title"></h1>
|
|||
|
|
<ol class="breadcrumb">
|
|||
|
|
<li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
|
|||
|
|
<!-- <li class="active">Here</li> -->
|
|||
|
|
</ol>
|
|||
|
|
</section>
|
|||
|
|
<!-- Main content -->
|
|||
|
|
<section class="content container-fluid">
|
|||
|
|
<div id="mainAlertdiv"></div>
|
|||
|
|
<div id="subDiv"></div>
|
|||
|
|
<div id="mpSubDiv"></div>
|
|||
|
|
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label class="form-label" id="companylabel">水厂：</label>
|
|||
|
|
<label class="form-label" id="company"
|
|||
|
|
style="width:180px;border: none;background: transparent;"></label>
|
|||
|
|
<select class="form-control select2 " id="search_code" name="search_code"
|
|||
|
|
style="width: 220px;"></select>
|
|||
|
|
</div>
|
|||
|
|
<div class="input-group pull-right input-group-sm">
|
|||
|
|
<input type="text" class="form-control pull-left" id="reservationtime1" style="width:225px">
|
|||
|
|
<div class="input-group-btn pull-left">
|
|||
|
|
<button type="button" class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i>
|
|||
|
|
查询</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3">
|
|||
|
|
<br />
|
|||
|
|
<div id="bottlediv" style="height:200px;width:200px;margin:auto;"></div>
|
|||
|
|
<div style="text-align: center">
|
|||
|
|
<span style="font-size: 28px;color: #FFCB65;">加氯系统储液罐</span>
|
|||
|
|
</div>
|
|||
|
|
<br />
|
|||
|
|
<table style="width:100%;height:100%;">
|
|||
|
|
<tr>
|
|||
|
|
<td align="left"><img src="<%=request.getContextPath()%>/IMG/time.png" width="70px"
|
|||
|
|
height="70px" /></td>
|
|||
|
|
<td>
|
|||
|
|
<span style="font-size:28px;color:#2C4975;display: block;">氯储备可用</span>
|
|||
|
|
<span style="font-size:28px;color:#2C4975;display: block;">时间(h)</span>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td colspan="2" align="center">
|
|||
|
|
<span id="clTime" style="font-size:50px;">20小时</span>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9" style="padding:0px;overflow:hidden;overflow-y:hidden"
|
|||
|
|
id="chartdiv">
|
|||
|
|
<span style="font-size:35px;font-weight: bold">前加：</span>
|
|||
|
|
<div id="chart" style="height:400px;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3"></div>
|
|||
|
|
<div class="col-sm-9 col-md-9 col-lg-9 col-xl-9" style="padding:0px;overflow:hidden;overflow-y:hidden"
|
|||
|
|
id="chartdiv">
|
|||
|
|
<span style="font-size:35px;font-weight: bold">后加：</span>
|
|||
|
|
<div id="backChart1" style="height:300px;"></div>
|
|||
|
|
<br />
|
|||
|
|
<div id="backChart2" style="height:300px;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
<!-- /.content -->
|
|||
|
|
</div>
|
|||
|
|
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
|||
|
|
<jsp:include page="/jsp/side.jsp"></jsp:include>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<!-- echarts-->
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts-liquidfill.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<!-- 引入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>
|