标签：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html lang="zh"> <head> <base href="<%=basePath%>"> <!-- jsp文件头和头部 --> <%@ include file="../admin/top.jsp"%> </head> <body> <div class="container-fluid" id="main-container"> <div id="page-content" class="clearfix"> <div class="row-fluid"> <div class="row-fluid"> <div id="container" style="min-width: 700px; height: 500px"></div> <div id="main" style="width: 100%; height: 500px"></div> <!-- 报表 --> <table id="table_report" class="table table-striped table-bordered table-hover center"> <thead> <tr class="center"> <th>序号</th> <th>网元</th> <th>采集粒度</th> <th>收到消息（receive）</th> <th>获取数据（process 2）</th> <th>转换数据（process 3）</th> <th>存储数据（process 5）</th> <th>入库完成（process 7）</th> <th>总时间</th> <th class="center">错误信息</th> </tr> </thead> <tbody> <!-- 开始循环 --> <c:choose> <c:when test="${not empty resultList}"> <c:forEach items="${resultList}" var="result" varStatus="res"> <tr class="center"> <td class=‘center‘ style="width: 30px;">${res.index+1}</td> <td class="center"><a href="task/pm_detail.do?pm_id=${PM_RESULT_ID} }">${result.NEID}</a></td> <td class="center">${result.TIME_SPAN}</td> <td class="center"><a style="cursor: pointer;" target="mainFrame" onclick="result(${result.PM_RESULT_ID},${res.index+1},‘task/pm_detail.do?step=1‘)">${result.RECEIVE_REPORT_MSG_TIME}</a></td> <td class="center"><a style="cursor: pointer;" target="mainFrame" onclick="result(${result.PM_RESULT_ID},${res.index+1},‘task/pm_detail.do?step=2‘)">${result.PROCESS_GET_FILE_TIME}</a></td> <td class="center"><a style="cursor: pointer;" target="mainFrame" onclick="result(${result.PM_RESULT_ID},${res.index+1},‘task/pm_detail.do?step=3‘)">${result.PROCESS_PARSE_TIME}</a></td> <td class="center"><a style="cursor: pointer;" target="mainFrame" onclick="result(${result.PM_RESULT_ID},${res.index+1},‘task/pm_detail.do?step=5‘)">${result.PROCESS_STORE_TIME}</a></td> <td class="center"><a style="cursor: pointer;" target="mainFrame" onclick="result(${result.PM_RESULT_ID},${res.index+1},‘task/pm_detail.do?step=7‘)">${result.PROCESS_FINISH_TIME}</a></td> <td style="width: 60px;" class="center">${result.TOTAL_TIME}</td> <td style="width: 60px;" class="center"><a style="cursor: pointer;" target="mainFrame" onclick="result(${result.PM_RESULT_ID},${res.index+1},‘task/pm_reslut_log.do?‘)">查看日志</a></td> </tr> </c:forEach> </c:when> <c:otherwise> <tr class="main_info"> <td colspan="100" class="center">没有相关数据</td> </tr> </c:otherwise> </c:choose> </tbody> </table> </form> </div> <!-- PAGE CONTENT ENDS HERE --> </div> <!--/row--> </div> <!--/#page-content--> </div> <!--/.fluid-container#main-container--> <!-- 引入 --> <script type="text/javascript">window.jQuery || document.write("<script src=‘static/js/jquery-1.9.1.min.js‘>\x3C/script>");</script> <script src="static/js/bootstrap.min.js"></script> <script src="static/js/ace-elements.min.js"></script> <script src="static/js/ace.min.js"></script> <!-- 引入 --> <script type="text/javascript"> { $(top.hangge()); //检索 function search(){ top.jzts(); $("#Form").submit(); } //删除 function del(taskId){ if(confirm("确定要删除?")){ top.jzts(); var url = ‘<%=basePath%>task/delete.do?taskId=‘+taskId; $.get(url,function(data){ nextPage(${page.currentPage}); }); } } </script> <script type="text/javascript"> //全选 （是/否） function selectAll(){ var checklist = document.getElementsByName ("ids"); if(document.getElementById("zcheckbox").checked){ for(var i=0;i<checklist.length;i++){ checklist[i].checked = 1; } }else{ for(var j=0;j<checklist.length;j++){ checklist[j].checked = 0; } } } //批量操作 function makeAll(msg){ if(confirm(msg)){ var str = ‘‘; for(var i=0;i < document.getElementsByName(‘ids‘).length;i++) { if(document.getElementsByName(‘ids‘)[i].checked){ if(str==‘‘) str += document.getElementsByName(‘ids‘)[i].value; else str += ‘,‘ + document.getElementsByName(‘ids‘)[i].value; } } if(str==‘‘){ alert("您没有选择任何内容!"); return; }else{ if(msg == ‘确定要删除选中的数据吗?‘){ top.jzts(); $.ajax({ type: "POST", url: ‘<%=basePath%>task/deleteAll.do?tm=‘+new Date().getTime(), data: {DATA_IDS:str}, dataType:‘json‘, //beforeSend: validateData, cache: false, success: function(data){ $.each(data.list, function(i, list){ nextPage(${page.currentPage}); }); } }); } } } //导出excel function toExcel(){ window.location.href=‘<%=basePath%>task/excel.do‘; } //查看报表 function result(id,number,url){ top.mainFrame.tabAddHandler(id,"节点详细-"+number,url); if(url != "druid/index.html"){ jzts(); } } </script> <script type="text/javascript"> var myChart; myChart = echarts.init(document.getElementById(‘main‘)); var legendDate=""; var series=""; var ser=""; var legend=""; var option={}; var taskId=${pd.taskId}; $.ajax({ type: "post", async: false, //同步执行 url: "task/result_charts", data: {taskId:taskId}, dataType: "json", //返回数据形式为json success: function (result) { console.log("test:"+result); legendDate = ["2014","2015","2016"]; series = [ { "name":"2014", "type":"bar", "data":[51, 2, 43],"len":"中国"} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4] ,"len":"美国"},{ "name":"2016", "type":"bar", "data":[5, 20, 40],"len":"英国"}]; legend = ["中国","美国","德国"]; optionSeries(); for(i=0;series.length>i;i++){ option.series[i]=series[i]; } }, error: function (errorMsg) { } }); function optionSeries(){ option = { title: { text: ‘性能数据采集入库效率趋势图‘ }, tooltip: { trigger: ‘axis‘, axisPointer: { type: ‘shadow‘ } }, legend: { data: legendDate }, grid: { left: ‘3%‘, right: ‘4%‘, bottom: ‘3%‘, containLabel: true }, xAxis: { type: ‘value‘, boundaryGap: [0, 0.01] }, yAxis: { type: ‘category‘, data: legend }, series: [ ] }; } //通过Ajax获取数据 myChart.setOption(option); </script> <script type="text/javascript"> $(document).ready(function() { var options = { chart: { renderTo: ‘container‘, //DIV容器ID type: ‘bar‘//报表类型 }, //报表名称 title:{ text:‘测试‘ }, //补充说明 subtitle: { text: ‘报表说明‘ }, //x轴显示内容 xAxis: { categories: [] }, yAxis: { min: 0, title: { text: ‘单位(mm)‘ } }, tooltip: { enabled: false, formatter: function() { return ‘<b>‘+ this.series.name +‘</b><br/>‘+this.x +‘: ‘+ this.y +‘分钟‘; } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, //数据来源(多个对比的) series: [{},{},{},{}] }; //json url 地址这里我使用的servlet var url = "task/test_charts"; $.getJSON(url,function(data) { var i,len=data.length; for( i=0;i<len;i++){ //赋值 series options.series[i].data = data[i].list; options.series[i].name = data[i].name; //对报表X轴显示名称赋值 options.xAxis.categories[i]=data[i].year; } var chart = new Highcharts.Chart(options); }); }); </script> <style type="text/css"> li { list-style-type: none; } </style> <ul class="navigationTabs"> <li><a></a></li> <li></li> </ul> </body> </html>
标签：
原文地址：http://www.cnblogs.com/onetwo/p/5576207.html
