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>
|