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