259 lines
9.9 KiB
Plaintext
259 lines
9.9 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"%>
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<!-- <html lang="zh-CN"> -->
|
||
|
|
<!-- BEGIN HEAD -->
|
||
|
|
<head>
|
||
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
|
||
|
|
<!-- 引入daterangepicker-->
|
||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
|
<!-- echarts-->
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
|
||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/macarons.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">
|
||
|
|
$(function() {
|
||
|
|
var windowhight=$(window).height();
|
||
|
|
var windowwidth=$(window).width();
|
||
|
|
$('#chart').attr("style","height:"+(windowhight-150)+"px;width:"+(windowwidth-100)+"px;");
|
||
|
|
initDate();
|
||
|
|
getEcharts();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 注册消息事件监听，接受父元素给的数据
|
||
|
|
window.addEventListener('message', (e) => {
|
||
|
|
console.log(123);
|
||
|
|
}, false);
|
||
|
|
|
||
|
|
function doCurveSearch(){
|
||
|
|
getEcharts();
|
||
|
|
}
|
||
|
|
|
||
|
|
var beginTimeStore1 = '';
|
||
|
|
var endTimeStore1 = '';
|
||
|
|
function initDate() {
|
||
|
|
//定义locale汉化插件
|
||
|
|
beginTimeStore1 = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');
|
||
|
|
endTimeStore1 = 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": true,
|
||
|
|
"timePicker24Hour": true,
|
||
|
|
"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));
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('#reservationtime').val(beginTimeStore1 + locale.separator + endTimeStore1);
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
var color=[
|
||
|
|
"#66c0dd",
|
||
|
|
"#42cc81",
|
||
|
|
"#e6d187",
|
||
|
|
"#3e94e3",
|
||
|
|
"#ea7e53",
|
||
|
|
"#eedd78",
|
||
|
|
"#73a373",
|
||
|
|
"#73b9bc",
|
||
|
|
"#7289ab",
|
||
|
|
"#91ca8c",
|
||
|
|
"#f49f42"
|
||
|
|
];
|
||
|
|
|
||
|
|
function getEcharts(){
|
||
|
|
var cunitId="";
|
||
|
|
if('${param.unitId}'!=''){
|
||
|
|
cunitId='${param.unitId}';
|
||
|
|
}else{
|
||
|
|
cunitId=unitId;
|
||
|
|
}
|
||
|
|
$.post(ext.contextPath + '/data/getDetailData.do', {mpcode:"${param.mpcode}",unitId:cunitId,sdt:beginTimeStore1,edt:endTimeStore1} , function(result) {
|
||
|
|
// console.log(result);
|
||
|
|
var series=[];
|
||
|
|
var yAxis=[];
|
||
|
|
var legenddata=[];
|
||
|
|
|
||
|
|
for(var i=0;i<result.length;i++){
|
||
|
|
series.push({
|
||
|
|
data:result[i].data,
|
||
|
|
symbol:'none',
|
||
|
|
name:result[i].name,
|
||
|
|
type:'line',
|
||
|
|
lineStyle:{
|
||
|
|
width:2
|
||
|
|
},
|
||
|
|
// areaStyle: {
|
||
|
|
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
|
|
// offset: 0,
|
||
|
|
// color: 'rgba(58,77,233,0.8)'
|
||
|
|
// }, {
|
||
|
|
// offset: 1,
|
||
|
|
// color: 'rgba(46,199,201,0.3)'
|
||
|
|
// }])
|
||
|
|
// },
|
||
|
|
// ,
|
||
|
|
markPoint: {
|
||
|
|
data: [
|
||
|
|
{type: 'max', name: '最大值'},
|
||
|
|
{type: 'min', name: '最小值'}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
markLine: {
|
||
|
|
data: [
|
||
|
|
{type: 'average', name: '平均值'}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
legenddata.push(result[i].name);
|
||
|
|
}
|
||
|
|
yAxis.push({
|
||
|
|
type : 'value',
|
||
|
|
name : false,
|
||
|
|
splitLine: {
|
||
|
|
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
||
|
|
},
|
||
|
|
axisLine:{
|
||
|
|
lineStyle:{
|
||
|
|
color:'#ffffff',
|
||
|
|
width:1,//这里是为了突出显示加上的
|
||
|
|
}
|
||
|
|
},
|
||
|
|
scale:true//设置成 true 后坐标刻度不会强制包含零刻度。
|
||
|
|
});
|
||
|
|
|
||
|
|
var myChart = echarts.init(document.getElementById("chart"));
|
||
|
|
var option = {
|
||
|
|
color:color,
|
||
|
|
animation:false,
|
||
|
|
legend: {
|
||
|
|
data: legenddata,
|
||
|
|
left: 'center',
|
||
|
|
textStyle:{//图例文字的样式
|
||
|
|
color:color
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid:{
|
||
|
|
left: '4%', // 与容器左侧的距离
|
||
|
|
right: '4%', // 与容器右侧的距离
|
||
|
|
top: '8%', // 与容器顶部的距离
|
||
|
|
bottom: '2%', // 与容器底部的距离
|
||
|
|
containLabel:true
|
||
|
|
},
|
||
|
|
// toolbox: {
|
||
|
|
// feature: {
|
||
|
|
// saveAsImage: {show: true}
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
xAxis: {
|
||
|
|
type: 'time',
|
||
|
|
axisLine:{
|
||
|
|
lineStyle:{
|
||
|
|
color:'#ffffff',
|
||
|
|
width:1,//这里是为了突出显示加上的
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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 remarkvalue = param.value[2];//备注轴值
|
||
|
|
var color = param.color;//图例颜色
|
||
|
|
var dataIndex=param.dataIndex;
|
||
|
|
var seriesIndex=param.seriesIndex;
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
// console.log(option);
|
||
|
|
myChart.setOption(option,true);
|
||
|
|
|
||
|
|
},'json');
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
|
|
<div class="wrapper">
|
||
|
|
<div class="content-wrapper" style="background-color:rgba(6,17,56,1);">
|
||
|
|
<!-- Content Header (Page header) -->
|
||
|
|
<section class="content-header">
|
||
|
|
<h1 id ="head_title"></h1>
|
||
|
|
</section>
|
||
|
|
<!-- Main content -->
|
||
|
|
<section class="content container-fluid">
|
||
|
|
<div id="mainAlertdiv"></div>
|
||
|
|
<div id="subDiv"></div>
|
||
|
|
<div id="mpSubDiv"></div>
|
||
|
|
|
||
|
|
<div class="input-group pull-left input-group-sm" >
|
||
|
|
<input type="text" class="form-control pull-left" id="reservationtime" style="width:230px;background-color:rgba(6,17,56,1);color: #ffffff;" >
|
||
|
|
<div class="input-group-btn pull-left">
|
||
|
|
<button type="button" class="btn btn-default" onclick="doCurveSearch();" style="background-color:rgba(6,17,56,1);color: #ffffff;"><i class="fa fa-search"></i> 查询</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="chart"></div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<!-- /.content -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|