325 lines
11 KiB
Plaintext
325 lines
11 KiB
Plaintext
<%@page import="com.sipai.entity.user.ExtSystem"%>
|
|
<%@ page language="java" import="java.util.*" 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"%>
|
|
<% request.setAttribute("RequestMode", ExtSystem.RequestMode); %>
|
|
<% request.setAttribute("SystemType", ExtSystem.SystemType); %>
|
|
<style type="text/css">
|
|
.select2-container .select2-selection--single{
|
|
height:34px;
|
|
line-height: 34px;
|
|
}
|
|
.select2-selection__arrow{
|
|
margin-top:3px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
var ArrayDatas = eval(${data});
|
|
var MpDatas=[];
|
|
|
|
$(function() {
|
|
initDate1();
|
|
//dochart();
|
|
//dochart1();
|
|
for (var i=0;i<ArrayDatas.length;i++){
|
|
MpDatas = ArrayDatas[i].mpoint;
|
|
for (var j=0;j<MpDatas.length;j++){
|
|
showchart(i,j,MpDatas[j].chartType);
|
|
}
|
|
}
|
|
});
|
|
var beginTimeStore1 = '';
|
|
var endTimeStore1 = '';
|
|
function initDate1() {
|
|
//定义locale汉化插件
|
|
beginTimeStore1 = moment().subtract(6, 'days').format('YYYY-MM-DD');;
|
|
endTimeStore1 = moment().subtract(-1, 'days').format('YYYY-MM-DD');
|
|
if(${param.sdt==''}){
|
|
beginTimeStore1='2017-09-09';
|
|
}
|
|
if(${param.edt==''}){
|
|
endTimeStore1='2018-09-09';
|
|
}
|
|
var locale = {
|
|
"format": 'YYYY-MM-DD',
|
|
"separator": " ~ ",
|
|
"applyLabel": "确定",
|
|
"cancelLabel": "取消",
|
|
"fromLabel": "起始时间",
|
|
"toLabel": "结束时间'",
|
|
"customRangeLabel": "自定义",
|
|
"weekLabel": "W",
|
|
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
|
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
|
"firstDay": 1
|
|
};
|
|
$('#reservationtime1').daterangepicker({
|
|
"timePicker": false,
|
|
"timePicker24Hour": false,
|
|
"linkedCalendars": false,
|
|
"autoUpdateInput": false,
|
|
"timePickerIncrement": 10,
|
|
"locale": locale,
|
|
//汉化按钮部分
|
|
ranges: {
|
|
'今日': [moment(), moment().subtract(-1, 'days')],
|
|
'昨日': [moment().subtract(1, 'days'), moment()],
|
|
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
|
|
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
|
|
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
|
|
},
|
|
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);
|
|
};
|
|
function dochart(){
|
|
console.log();
|
|
//$.post(ext.contextPath +"/maintenance/getStaffMaintenanceResultView.do",{userId:"${param.userId}",sdt:beginTimeStore1,edt:endTimeStore1},function(data){
|
|
var option = {
|
|
/* title: {
|
|
text: '折线图堆叠'
|
|
}, */
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data:['沉淀池出水浊度','出水浊度上限']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
/* toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
}, */
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
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',
|
|
name:'NUT'
|
|
},
|
|
color:['#00a65a','#ff0000'],
|
|
series: [
|
|
{
|
|
name:'沉淀池出水浊度',
|
|
type:'line',
|
|
//stack: '总量',
|
|
data:[5, 4, 4, 5, 4.5, 4.3, 4.7,5.1,5,4.6,4.9,10.9,4.5,5,4,4.5,4.1,4.2,4.5,5.1,5.6,5.3,5.9,6]
|
|
},
|
|
{
|
|
name:'出水浊度上限',
|
|
type:'line',
|
|
data:[10, 10, 10, 10, 10, 10, 10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10]
|
|
}
|
|
]
|
|
};
|
|
|
|
|
|
|
|
if(myChart2!=null){
|
|
myChart2.clear();
|
|
myChart2.dispose();
|
|
}
|
|
//var boxHeight=legendData.length*200;
|
|
var boxHeight=$("#subModal1").height()*0.2;
|
|
var boxWidth=$("#subModal1").width()*0.6;
|
|
$("#box2").height(boxHeight);
|
|
$("#box2").width(boxWidth);
|
|
/* var boxWidth=$("#boxdiv").width();
|
|
$("#box").height(boxHeight);
|
|
$("#box").width(boxWidth); */
|
|
setTimeout(function(){
|
|
myChart2 = echarts.init(document.getElementById("box2"));
|
|
//自适用大小
|
|
//用于使chart自适应高度和宽度
|
|
//window.onresize=myChart.resize;
|
|
myChart2.setOption(option);
|
|
},100);
|
|
|
|
//},'json');
|
|
}
|
|
var myChart2;
|
|
|
|
|
|
function dochart1(){
|
|
//$.post(ext.contextPath +"/maintenance/getStaffMaintenanceResultView.do",{userId:"${param.userId}",sdt:beginTimeStore1,edt:endTimeStore1},function(data){
|
|
var option = {
|
|
xAxis: {
|
|
type: 'category',
|
|
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',
|
|
name:'m3',
|
|
max: 1200,
|
|
interval: 400,
|
|
axisLabel: {
|
|
formatter: '{value} '
|
|
}
|
|
},
|
|
color:['#3c8dbc'],
|
|
series: [{
|
|
data: [1100, 1130, 1120,1070, 1200,1120, 1230, 1210,1120, 1220,1070,1120,1070,1130,1070,1060,1120,1130,1120,1150,1070,1130,1050,1120],
|
|
type: 'bar'
|
|
}]
|
|
};
|
|
|
|
|
|
|
|
if(myChart3!=null){
|
|
myChart3.clear();
|
|
myChart3.dispose();
|
|
}
|
|
//var boxHeight=legendData.length*200;
|
|
var boxHeight=$("#subModal1").height()*0.2;
|
|
var boxWidth=$("#subModal1").width()*0.6;
|
|
$("#box3").height(boxHeight);
|
|
$("#box3").width(boxWidth);
|
|
/* var boxWidth=$("#boxdiv").width();
|
|
$("#box").height(boxHeight);
|
|
$("#box").width(boxWidth); */
|
|
setTimeout(function(){
|
|
myChart3 = echarts.init(document.getElementById("box3"));
|
|
//自适用大小
|
|
//用于使chart自适应高度和宽度
|
|
//window.onresize=myChart.resize;
|
|
myChart3.setOption(option);
|
|
},100);
|
|
|
|
//},'json');
|
|
}
|
|
var myChart3;
|
|
|
|
function showchart(i,j,t){
|
|
var myChart;
|
|
var type = ['line','bar'];
|
|
var color=['#00a65a','#00c0ef'];
|
|
//console.log(ArrayDatas);
|
|
console.log(MpDatas[j].id);
|
|
//$.post(ext.contextPath +"/maintenance/getStaffMaintenanceResultView.do",{userId:"${param.userId}",sdt:beginTimeStore1,edt:endTimeStore1},function(data){
|
|
$.post(ext.contextPath +"/work/mpoint/getHistory.do",{bizId:ArrayDatas[i].companyId,ids:MpDatas[j].mpcode,sdt:MpDatas[j].sdt,edt:MpDatas[j].edt},function(data){
|
|
//console.log(data);
|
|
var ArrayRes = eval(data);
|
|
//console.log(MpDatas[j].mpoint.parmname);
|
|
var measuredt = [];
|
|
var parmvalue = [];
|
|
var name = [];
|
|
var unit = [];
|
|
name.push(MpDatas[j].mpoint.parmname);
|
|
unit.push(MpDatas[j].mpoint.unit);
|
|
var res = ArrayRes[0];
|
|
for(var k=0;k<res.length;k++){
|
|
measuredt.push(res[k].measuredt.substring(0,16));
|
|
parmvalue.push(res[k].parmvalue);
|
|
|
|
}
|
|
console.log(parmvalue);
|
|
var option = {
|
|
title : {
|
|
//text: name[0],
|
|
subtext: name[0]
|
|
},
|
|
legend: {
|
|
data:name
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data:measuredt,
|
|
//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',
|
|
name:unit[0],
|
|
//max: 1200,
|
|
//interval: 400,
|
|
axisLabel: {
|
|
formatter: '{value} '
|
|
}
|
|
},
|
|
color:color[t],
|
|
series: [{
|
|
name:name[0],
|
|
data:parmvalue,
|
|
//data: [1100, 1130, 1120,1070, 1200,1120, 1230, 1210,1120, 1220,1070,1120,1070,1130,1070,1060,1120,1130,1120,1150,1070,1130,1050,1120],
|
|
type: type[t]
|
|
}]
|
|
};
|
|
|
|
|
|
|
|
if(myChart!=null){
|
|
myChart.clear();
|
|
myChart.dispose();
|
|
}
|
|
//var boxHeight=legendData.length*200;
|
|
var boxHeight=$("#subModal1").height()*0.2;
|
|
var boxWidth=$("#subModal1").width()*0.4;
|
|
$("#box"+i+j).height(boxHeight);
|
|
$("#box"+i+j).width(boxWidth);
|
|
/* var boxWidth=$("#boxdiv").width();
|
|
$("#box").height(boxHeight);
|
|
$("#box").width(boxWidth); */
|
|
setTimeout(function(){
|
|
myChart = echarts.init(document.getElementById("box"+i+j));
|
|
//自适用大小
|
|
//用于使chart自适应高度和宽度
|
|
//window.onresize=myChart.resize;
|
|
myChart.setOption(option);
|
|
},100);
|
|
|
|
},'json');
|
|
}
|
|
|
|
|
|
</script>
|
|
<div class="modal fade" id="subModal1" >
|
|
<div class="modal-dialog modal-lg" >
|
|
<div class="modal-content" id="model" >
|
|
<div class="modal-header" >
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span></button>
|
|
<h4 class="modal-title">水行家风险分析与决策建议</h4>
|
|
</div>
|
|
<div class="modal-body" id="model-body" >
|
|
<c:if test="${fn:length(list)>0}">
|
|
<c:set var="rowcount" value="${0}" />
|
|
<c:forEach var="current" items="${list}">
|
|
<h4 style="color:#ff0000" >风险等级： <span class="label " style="background-color:#ff0000">高</span></h4>
|
|
<br>
|
|
<h4 style="color:#0000ff" >${current.text }</h4>
|
|
<!-- <div id="box2" ></div>
|
|
<div id="box3" ></div> -->
|
|
<div id="box${rowcount}0" ></div>
|
|
<div id="box${rowcount}1" ></div>
|
|
<div id="box${rowcount}2" ></div>
|
|
<div id="box${rowcount}3" ></div>
|
|
<c:set var="rowcount" value="${rowcount+1}" />
|
|
</c:forEach>
|
|
</c:if>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">关闭</button>
|
|
<!-- <button type="button" class="btn btn-default pull-right" >执行</button> -->
|
|
</div>
|
|
</div>
|
|
<!-- /.modal-content -->
|
|
</div>
|
|
<!-- /.modal-dialog -->
|
|
</div>
|