424 lines
15 KiB
Plaintext
424 lines
15 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8"%>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<!-- 引入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>
|
||
<style type="text/css">
|
||
.W120 .th-inner {
|
||
width:150px !important;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
var sdt = '';
|
||
var edt = '';
|
||
function initDate1() {
|
||
//定义locale汉化插件
|
||
sdt = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');
|
||
// edt = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
|
||
var locale = {
|
||
"format": 'YYYY-MM-DD HH:mm',
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
$('#sdt').daterangepicker({
|
||
"timePicker": true,
|
||
"timePicker24Hour": true,
|
||
"linkedCalendars": false,
|
||
"singleDatePicker":true,
|
||
"autoUpdateInput": false,
|
||
"timePickerIncrement": 10,
|
||
"locale": locale
|
||
}, function(start) {
|
||
sdt = start.format(this.locale.format);
|
||
if(!this.startDate){
|
||
this.element.val('');
|
||
}else{
|
||
this.element.val(this.startDate.format(this.locale.format));
|
||
}
|
||
});
|
||
$('#sdt').val(sdt);
|
||
};
|
||
|
||
function initDate2() {
|
||
//定义locale汉化插件
|
||
edt = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
|
||
var locale = {
|
||
"format": 'YYYY-MM-DD HH:mm',
|
||
"applyLabel": "确定",
|
||
"cancelLabel": "取消",
|
||
"weekLabel": "W",
|
||
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
"firstDay": 1
|
||
};
|
||
$('#edt').daterangepicker({
|
||
"timePicker": true,
|
||
"timePicker24Hour": true,
|
||
"linkedCalendars": false,
|
||
"singleDatePicker":true,
|
||
"autoUpdateInput": false,
|
||
"timePickerIncrement": 10,
|
||
"locale": locale
|
||
}, function(start) {
|
||
edt = start.format(this.locale.format);
|
||
if(!this.startDate){
|
||
this.element.val('');
|
||
}else{
|
||
this.element.val(this.startDate.format(this.locale.format));
|
||
}
|
||
});
|
||
$('#edt').val(edt);
|
||
};
|
||
|
||
var mpids="";
|
||
var showWidth="";
|
||
$(function() {
|
||
initDate1();
|
||
initDate2();
|
||
|
||
showWidth=$(window).width();
|
||
mpids="${param.mpids}";
|
||
getMpointJson();
|
||
})
|
||
|
||
var mpcodestr="";
|
||
var mpnamestr="";
|
||
var mpunitstr="";
|
||
var unitIdstr="";
|
||
var expstr="";
|
||
|
||
function getMpointJson(){
|
||
$.post(ext.contextPath +"/data/getMPointJson.do",{checkedIds:mpids},function(data){
|
||
var ArrayDatas = eval("(" + data + ")");
|
||
for (var i=0;i<ArrayDatas.length;i++){
|
||
mpcodestr+=ArrayDatas[i].mpointcode+",";//测量点code
|
||
mpnamestr+=ArrayDatas[i].parmname+",";//测量点名称
|
||
mpunitstr+=ArrayDatas[i].unit+",";//测量点单位
|
||
unitIdstr+=ArrayDatas[i].bizid+",";//厂
|
||
expstr+=ArrayDatas[i].exp+",";//计算方式
|
||
}
|
||
|
||
getEcharts();
|
||
getHistoryList();
|
||
});
|
||
}
|
||
|
||
var mychart="";
|
||
var option=[];
|
||
var color=[
|
||
"#2ec7c9",
|
||
"#b6a2de",
|
||
"#5ab1ef",
|
||
"#ffb980",
|
||
"#d87a80",
|
||
"#8d98b3",
|
||
"#e5cf0d",
|
||
"#97b552",
|
||
"#95706d",
|
||
"#dc69aa",
|
||
"#07a2a4",
|
||
"#9a7fd1",
|
||
"#588dd5",
|
||
"#f5994e",
|
||
"#c05050",
|
||
"#59678c",
|
||
"#c9ab00",
|
||
"#7eb00a",
|
||
"#6f5553",
|
||
"#c14089"
|
||
];
|
||
function getEcharts(){
|
||
var series=[];
|
||
var yAxis=[];
|
||
var legenddata=[];
|
||
|
||
var mpcodedata=[];
|
||
mpcodedata=(mpcodestr.substring(0,mpcodestr.length-1)).split(",");
|
||
|
||
var mpnamedata=[]
|
||
mpnamedata=(mpnamestr.substring(0,mpnamestr.length-1)).split(",");
|
||
|
||
var unitIdname=[];
|
||
unitIdname=(unitIdstr.substring(0,unitIdstr.length-1)).split(",");
|
||
|
||
var expname=[];
|
||
expname=(expstr.substring(0,expstr.length-1)).split(",");
|
||
|
||
if(mpnamedata.length>0){
|
||
for(var i=0;i<mpnamedata.length;i++){
|
||
if(expname[i]!="-"){
|
||
legenddata.push(mpnamedata[i]);
|
||
}else{
|
||
legenddata.push(mpnamedata[i]+":"+mpcodedata[i]);
|
||
}
|
||
}
|
||
}
|
||
|
||
for(var i=0;i<legenddata.length;i++){
|
||
series.push({
|
||
data:'',
|
||
symbol:'none',
|
||
name:legenddata[i],
|
||
type:'line',
|
||
lineStyle:{
|
||
width:2
|
||
},
|
||
markPoint:{
|
||
data:''
|
||
},
|
||
markLine:{
|
||
data:''
|
||
}
|
||
})
|
||
}
|
||
yAxis.push({
|
||
type : 'value',
|
||
name : false,
|
||
|
||
splitLine: {
|
||
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||
},
|
||
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
|
||
});
|
||
|
||
mychart=echarts.init(document.getElementById('chart'));
|
||
option = {
|
||
color:color,
|
||
animation:false,
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// axisPointer: {
|
||
// type: 'cross'
|
||
// }
|
||
// },
|
||
legend: {
|
||
type:'scroll',
|
||
// right: 50,
|
||
data: legenddata,
|
||
left: 'center',
|
||
padding: [
|
||
5, // 上
|
||
100, // 右
|
||
0, // 下
|
||
0, // 左
|
||
]
|
||
},
|
||
grid:{
|
||
left: '4%', // 与容器左侧的距离
|
||
right: '4%', // 与容器右侧的距离
|
||
top: '5%', // 与容器顶部的距离
|
||
//bottom: '5%', // 与容器底部的距离
|
||
containLabel:true
|
||
},
|
||
xAxis: {
|
||
type: 'time'
|
||
},
|
||
yAxis: yAxis,
|
||
series: series,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params, ticket, callback) {
|
||
var htmlStr = '';
|
||
for(var i=0;i<params.length;i++){
|
||
var param = params[i];
|
||
// console.log(param);
|
||
var xName = param.name;//x轴的名称
|
||
var seriesName = param.seriesName;//图例名称
|
||
var xvalue = param.value[0];//x轴值
|
||
var yvalue = param.value[1];//y轴值
|
||
var color = param.color;//图例颜色
|
||
htmlStr +='<div>';
|
||
htmlStr += xvalue + '<br/>' ;
|
||
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:'+color+';"></span>';
|
||
htmlStr += seriesName+':'+ yvalue + '';
|
||
htmlStr += '</div>';
|
||
}
|
||
return htmlStr;
|
||
}
|
||
// alwaysShowContent:true,
|
||
},
|
||
dataZoom: [{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 20
|
||
}, {
|
||
start: 0,
|
||
end: 20,
|
||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||
handleSize: '60%',
|
||
handleStyle: {
|
||
color: '#fff',
|
||
shadowBlur: 3,
|
||
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
||
shadowOffsetX: 2,
|
||
shadowOffsetY: 2
|
||
}
|
||
}]
|
||
};
|
||
// console.log(option);
|
||
mychart.setOption(option,true);
|
||
|
||
mpcodedata.forEach(function (item, index) {
|
||
if(item!=''){
|
||
appendDataToChart(item,index,unitIdname[index],expname[index],mpnamedata[index]);
|
||
}
|
||
});
|
||
}
|
||
|
||
var alarmdata=[];
|
||
function appendDataToChart(id,index,unitIdname,exp,mpname){
|
||
$.post(ext.contextPath +"/work/mpoint/getMpointJsonFormpids.do",{unitId:unitIdname,mpids:id,func:exp,mpname:mpname,sdt:sdt,edt:edt},function(data){
|
||
var datas=eval('(' + data + ')');
|
||
// console.log(datas);
|
||
alarmdata.push({
|
||
maxlimit:datas[0].maxlimit,
|
||
minlimit:datas[0].minlimit
|
||
});
|
||
var edatas=datas[0].data;
|
||
//为全局赋值
|
||
option.series[index].data=edatas;
|
||
// console.log(option.series[index]);
|
||
//后端构造对应数据
|
||
mychart.appendData({
|
||
seriesIndex:index,
|
||
data:edatas
|
||
});
|
||
//刷新
|
||
mychart.resize();
|
||
});
|
||
}
|
||
|
||
var tablecolors = ['#c12e34', '#e6b600', '#0098d9','#2b821d','#005eaa', '#339ca8', '#cda819','#32a487','#f3a43b','#60c0dd','#d7504b','#c6e579','#f4e001'];
|
||
|
||
function getHistoryList(){
|
||
var namearr = mpnamestr.substring(0, mpnamestr.length-1);
|
||
namearr = namearr.split(",");
|
||
|
||
var length = namearr.length;
|
||
var mpoint = [];
|
||
var checkobx={};
|
||
checkobx.checkbox = true;
|
||
//mpoint.push(checkobx);
|
||
var measuredt={};
|
||
measuredt.class='W120',
|
||
measuredt.field='measuredt';
|
||
measuredt.title='时间';
|
||
measuredt.align='center';
|
||
measuredt.valign='middle';
|
||
measuredt.width=140;
|
||
mpoint.push(measuredt);
|
||
|
||
for(var i=0;i<namearr.length;i++){
|
||
var color=tablecolors[i%namearr.length];
|
||
|
||
var parmvalue={};
|
||
parmvalue.field = 'paramvalue'+i;
|
||
parmvalue.title=namearr[i];
|
||
parmvalue.align='center';
|
||
parmvalue.valign='middle';
|
||
// parmvalue.width=(showWidth-170)/namearr.length;
|
||
var css1 = {};
|
||
css1.color = color;
|
||
var cellstyle = {};
|
||
cellstyle.css=css1;
|
||
parmvalue.cellStyle=cellstyle,
|
||
mpoint.push(parmvalue);
|
||
|
||
}
|
||
|
||
$("#table").bootstrapTable({ // 对应table标签的id
|
||
url: ext.contextPath + '/work/mpoint/getDiffUnitHistoryList.do', // 获取表格数据的url
|
||
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
|
||
striped: true, //表格显示条纹，默认为false
|
||
pagination: true, // 在表格底部显示分页组件，默认false
|
||
pageList: [10, 20,50], // 设置页面可以显示的数据条数
|
||
pageSize: 10, // 页面数据条数
|
||
pageNumber: 1, // 首页页码
|
||
sidePagination: 'server', // 设置为服务器端分页
|
||
cardView:false,
|
||
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
|
||
return {
|
||
rows: params.limit, // 每页要显示的数据条数
|
||
page: params.offset/params.limit+1, // 每页显示数据的开始页码
|
||
sort: params.sort, // 要排序的字段
|
||
order: params.order,
|
||
ids : mpids,
|
||
sdt: sdt,
|
||
edt: edt
|
||
}
|
||
},
|
||
sortName: 'measuredt', // 要排序的字段
|
||
sortOrder: 'asc', // 排序规则
|
||
columns: mpoint,
|
||
onLoadSuccess: function(){ //加载成功时执行
|
||
adjustBootstrapTableView("table");
|
||
docardView();
|
||
},
|
||
onLoadError: function(){ //加载失败时执行
|
||
console.info("加载数据失败");
|
||
}
|
||
|
||
})
|
||
}
|
||
|
||
function dosearch(){
|
||
mpcodestr="";
|
||
mpnamestr="";
|
||
mpunitstr="";
|
||
getMpointJson();
|
||
$("#table").bootstrapTable('refresh');
|
||
}
|
||
|
||
function docardView(){
|
||
$('#table').bootstrapTable('toggleView');
|
||
}
|
||
|
||
</script>
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<input id="mpids" name="mpids" type="hidden" style="width: 500px;" value=""/>
|
||
<div class="box box-solid" id="box-echart" >
|
||
<div class="box-header with-border">
|
||
<h3 class="box-title">曲线绘制</h3>
|
||
|
||
<div class="box-tools pull-right">
|
||
<button type="button" class="btn btn-default" style="height:30px;line-height: 30px;padding: 0px;padding-left: 5px;padding-right: 5px;" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
|
||
<!-- <button type="button" class="btn btn-default" style="height:30px;line-height: 30px;padding: 0px;padding-left: 5px;padding-right: 5px;" onclick="dochange();" ><i class="fa fa-search"></i> 切换</button> -->
|
||
</div>
|
||
</div>
|
||
<div class="box-body ">
|
||
<div style="height:30px;width:100%;" >
|
||
<div style="float:left;width: 100%;height: 30px;margin-bottom: 5px;">
|
||
<div style="float:left;padding-right:5px;font-weight: 600;line-height: 30px;width: 40%;text-align: right;">
|
||
起始时间
|
||
</div>
|
||
<div style="float:left;padding-left:5px;width: 150px;">
|
||
<input class="form-control date-picker" id="sdt" name="sdt" autocomplete="off" type="text" placeholder="点击选择" style="background-color:#FFFFFF;height: 30px;border-radius: 8px;" value="${param.sdt}"/>
|
||
</div>
|
||
</div>
|
||
<div style="float:left;width: 100%;height: 30px;">
|
||
<div style="float:left;padding-right:5px;font-weight: 600;line-height: 30px;width: 40%;text-align: right;">
|
||
结束时间
|
||
</div>
|
||
<div style="float:left;padding-left:5px;width: 150px;">
|
||
<input class="form-control date-picker" id="edt" name="edt" autocomplete="off" type="text" placeholder="点击选择" style="background-color:#FFFFFF;height: 30px;border-radius: 8px;" value="${param.edt}"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<br>
|
||
<div id="ctablehartDiv" style="padding:0px;overflow:hidden;height:350px;width:100%;" >
|
||
<div id="chart" style="height: 100%;width:100%;"></div>
|
||
</div>
|
||
<div id="tableDiv" style="padding-top:10px;height:430px;width:100%;" >
|
||
<table id="table" ></table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body> |