163 lines
7.0 KiB
Plaintext
163 lines
7.0 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"%>
|
||
|
|
<%@page import="com.sipai.entity.scada.MPoint"%>
|
||
|
|
<%request.setAttribute("Flag_Enable",MPoint.Flag_Enable);%>
|
||
|
|
<%request.setAttribute("Flag_Disable",MPoint.Flag_Disable);%>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<!-- <html lang="zh-CN"> -->
|
||
|
|
<!-- BEGIN HEAD -->
|
||
|
|
<head>
|
||
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||
|
|
|
||
|
|
<!-- 引用页头及CSS页-->
|
||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
|
<!-- echarts-->
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.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>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var beginTimeStore = '';
|
||
|
|
var endTimeStore = '';
|
||
|
|
$(function() {
|
||
|
|
var windowghight=$(window).height();
|
||
|
|
$('#mainDiv').attr("style","height:"+windowghight+"px;width:100%;padding-top:20px;");
|
||
|
|
|
||
|
|
beginTimeStore = moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm');
|
||
|
|
endTimeStore = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
|
||
|
|
|
||
|
|
var locale = {
|
||
|
|
"format": 'YYYY-MM-DD HH:mm',
|
||
|
|
"separator": "~",
|
||
|
|
"applyLabel": "确定",
|
||
|
|
"cancelLabel": "取消",
|
||
|
|
"fromLabel": "起始时间",
|
||
|
|
"toLabel": "结束时间'",
|
||
|
|
"customRangeLabel": "自定义",
|
||
|
|
"weekLabel": "W",
|
||
|
|
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
||
|
|
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||
|
|
"firstDay": 1
|
||
|
|
};
|
||
|
|
$('#reservationtime').daterangepicker({
|
||
|
|
timePicker: false,
|
||
|
|
timePicker24Hour: false,
|
||
|
|
linkedCalendars: false,
|
||
|
|
autoUpdateInput: false,
|
||
|
|
showDropdowns: true,
|
||
|
|
locale: locale,
|
||
|
|
//汉化按钮部分
|
||
|
|
ranges: {
|
||
|
|
'本月': [moment().startOf('month'), moment().endOf('month').subtract(0, 'month')],
|
||
|
|
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(0, 'month')]
|
||
|
|
},
|
||
|
|
startDate: beginTimeStore,
|
||
|
|
endDate: endTimeStore
|
||
|
|
}, function(start, end, label) {
|
||
|
|
beginTimeStore = start.format(this.locale.format);
|
||
|
|
endTimeStore = 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));
|
||
|
|
}
|
||
|
|
// dosearch();
|
||
|
|
});
|
||
|
|
$('#reservationtime').val(beginTimeStore + locale.separator + endTimeStore);
|
||
|
|
|
||
|
|
$.post(ext.contextPath + "/efficiency/waterSpreadData/getMpidDataType.do", {unitId:unitId}, function (data) {
|
||
|
|
$("#mpid").empty();
|
||
|
|
var select = $("#mpid").select2({
|
||
|
|
data: data,
|
||
|
|
placeholder: '请选择',//默认文字提示
|
||
|
|
allowClear: false,//允许清空
|
||
|
|
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; } // 函数用于呈现当前的选择
|
||
|
|
});
|
||
|
|
select.val(data[0].id).trigger("change");
|
||
|
|
|
||
|
|
dosearch();
|
||
|
|
|
||
|
|
}, 'json');
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function dosearch(){
|
||
|
|
var id=$("#mpid").val();
|
||
|
|
$.post(ext.contextPath + "/efficiency/waterSpreadData/getDataJson.do", {id:id,sdt:beginTimeStore,edt:endTimeStore,unitId:unitId}, function (data) {
|
||
|
|
console.log(data);
|
||
|
|
var seriesdata=data.value;
|
||
|
|
var machart=echarts.init(document.getElementById('chart'));
|
||
|
|
var option = {
|
||
|
|
xAxis: {
|
||
|
|
scale: true,
|
||
|
|
max:23,
|
||
|
|
interval:1
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
scale: true
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
type: 'scatter',
|
||
|
|
data:seriesdata,
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
machart.setOption(option,true);
|
||
|
|
|
||
|
|
|
||
|
|
}, 'json');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body class="hold-transition ${cu.themeclass} sidebar-mini" style="overflow: hidden;">
|
||
|
|
<div class="box box-solid">
|
||
|
|
<div id="mainDiv" class="box-body ">
|
||
|
|
<div id="detailDataDiv" ></div>
|
||
|
|
<div style="width: 100%;height:45px;float: left;">
|
||
|
|
<div class="form-group form-inline" style="padding-left:10px;">
|
||
|
|
<div class="form-group" style="height: 40px;line-height: 40px;">
|
||
|
|
<label class="input-lable" > 日期:</label>
|
||
|
|
<div class="input-group " >
|
||
|
|
<div class="input-group pull-right input-group-sm" >
|
||
|
|
<div class="input-group-addon">
|
||
|
|
<i class="fa fa-clock-o"></i>
|
||
|
|
</div>
|
||
|
|
<input type="text" class="form-control" id="reservationtime" style="width:225px" >
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="height: 40px;line-height: 40px;">
|
||
|
|
<label class="input-lable" > 对比点:</label>
|
||
|
|
<div class="input-group " >
|
||
|
|
<div class="input-group pull-right input-group-sm" >
|
||
|
|
<select class="form-control select2" id="mpid" name="mpid"
|
||
|
|
style="width: 100%;line-height: 40px;"></select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group" style="height: 40px;line-height: 40px;">
|
||
|
|
<button type="button" class="btn btn-default" onclick="dosearch();" ><i class="fa fa-search"></i> 查询</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="width: 100%;height:calc(100% - 45px);float: left;">
|
||
|
|
<div id="chart" style="height:100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|