first commit
This commit is contained in:
324
WebRoot/jsp/work/KPIPointProfessorView.jsp
Normal file
324
WebRoot/jsp/work/KPIPointProfessorView.jsp
Normal file
@ -0,0 +1,324 @@
|
||||
<%@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>
|
||||
Reference in New Issue
Block a user