调度报表

xxl-job-admin/src/main/java/com/xxl/job/admin/controller/IndexController.java

 
 		return "index";
 	}
+
+    @RequestMapping("/triggerChartDate")
+	public ReturnT<Map<String, Object>> triggerChartDate() {
+        ReturnT<Map<String, Object>> triggerChartDate = xxlJobService.triggerChartDate();
+        return triggerChartDate;
+    }
 	
 	@RequestMapping("/toLogin")
 	@PermessionLimit(limit=false)

xxl-job-admin/src/main/java/com/xxl/job/admin/dao/IXxlJobLogDao.java

 
 import java.util.Date;
 import java.util.List;
+import java.util.Map;
 
 /**
  * job log
 	
 	public int delete(int jobId);
 
-	public int findByHandleCodeCount(int handleCode);
+	public int triggerCountByHandleCode(int handleCode);
+
+    Map<String,Integer> triggerCountByDay(Date from, Date to);
 
 }

xxl-job-admin/src/main/java/com/xxl/job/admin/dao/impl/XxlJobLogDaoImpl.java

 import java.util.Date;
 import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 
 /**
  * job log
 	}
 
 	@Override
-	public int findByHandleCodeCount(int handleCode) {
-		return sqlSessionTemplate.selectOne("XxlJobLogMapper.findByHandleCodeCount", handleCode);
+	public int triggerCountByHandleCode(int handleCode) {
+		return sqlSessionTemplate.selectOne("XxlJobLogMapper.triggerCountByHandleCode", handleCode);
+	}
+
+	@Override
+	public Map<String, Integer> triggerCountByDay(Date from, Date to) {
+		Map<String, Object> params = new HashMap<String, Object>();
+		params.put("from", from);
+		params.put("to", to);
+		return sqlSessionTemplate.selectOne("XxlJobLogMapper.triggerCountByDay", params);
 	}
 
 }

xxl-job-admin/src/main/java/com/xxl/job/admin/service/IXxlJobService.java

 	
 	public ReturnT<String> triggerJob(int id);
 
-    Map<String,Object> dashboardInfo();
+	public Map<String,Object> dashboardInfo();
+
+	public ReturnT<Map<String,Object>> triggerChartDate();
+
 }

xxl-job-admin/src/main/java/com/xxl/job/admin/service/impl/XxlJobServiceImpl.java

 import com.xxl.job.core.registry.RegistHelper;
 import org.apache.commons.collections.CollectionUtils;
 import org.apache.commons.lang.StringUtils;
+import org.apache.commons.lang.time.DateUtils;
 import org.quartz.CronExpression;
 import org.quartz.SchedulerException;
 import org.slf4j.Logger;
 	public Map<String, Object> dashboardInfo() {
 
 		int jobInfoCount = xxlJobInfoDao.findAllCount();
-		int jobLogCount = xxlJobLogDao.findByHandleCodeCount(-1);
-		int jobLogSuccessCount = xxlJobLogDao.findByHandleCodeCount(ReturnT.SUCCESS_CODE);
+		int jobLogCount = xxlJobLogDao.triggerCountByHandleCode(-1);
+		int jobLogSuccessCount = xxlJobLogDao.triggerCountByHandleCode(ReturnT.SUCCESS_CODE);
 
 		// executor count
 		Set<String> executerAddressSet = new HashSet<String>();
 		return dashboardMap;
 	}
 
+	@Override
+	public ReturnT<Map<String, Object>> triggerChartDate() {
+		Date from = DateUtils.addDays(new Date(), -30);
+		Date to = new Date();
+
+		Map<String, Integer> triggerCountMap = xxlJobLogDao.triggerCountByDay(from, to);
+
+		return null;
+	}
+
 }

xxl-job-admin/src/main/resources/mybatis-mapper/XxlJobLogMapper.xml

 		WHERE job_id = #{jobId}
 	</delete>
 
-	<select id="findByHandleCodeCount" parameterType="java.lang.Integer" resultType="java.lang.Integer">
+	<select id="triggerCountByHandleCode" parameterType="java.lang.Integer" resultType="java.lang.Integer">
 		SELECT count(1)
 		FROM XXL_JOB_QRTZ_TRIGGER_LOG AS t
 		<trim prefix="WHERE" prefixOverrides="AND | OR" >
-			<if test="_parameter gt 0">
+			<if test="_parameter
+			 gt 0">
 				AND t.handle_code = #{handleCode}
 			</if>
 		</trim>
 	</select>
+
+    <select id="triggerCountByDay" parameterType="java.util.Map" resultType="java.util.Map" >
+        SELECT DATE_FORMAT(trigger_time,'%Y-%m-%d') triggerDay, COUNT(id) triggerCount
+        FROM XXL_JOB_QRTZ_TRIGGER_LOG
+        GROUP BY triggerDay;
+    </select>
 	
 </mapper>

xxl-job-admin/src/main/webapp/WEB-INF/template/index.ftl

 	<div class="content-wrapper">
 		<!-- Content Header (Page header) -->
 		<section class="content-header">
-			<h1>仪表盘<small>任务调度中心</small></h1>
+			<h1>运行报表<small>任务调度中心</small></h1>
 			<!--
 			<ol class="breadcrumb">
 				<li><a><i class="fa fa-dashboard"></i>调度中心</a></li>
 		<!-- Main content -->
 		<section class="content">
 
-            <!-- 简要报表 -->
+            <!-- 任务信息 -->
             <div class="row">
 
                 <#-- 任务信息 -->
                 </div>
 
                 <#-- 调度信息 -->
-                <div class="col-md-4 col-sm-6 col-xs-12">
+                <div class="col-md-4 col-sm-6 col-xs-12" style="display: none;">
                     <div class="info-box bg-yellow">
                         <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
 
                 <#-- 执行器 -->
                 <div class="col-md-4 col-sm-6 col-xs-12">
                     <div class="info-box bg-green">
-                        <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
+                        <span class="info-box-icon"><i class="fa ion-ios-settings-strong"></i></span>
 
                         <div class="info-box-content">
                             <span class="info-box-text">执行器数量</span>
                 </div>
 
             </div>
-            <!-- /.row -->
+
+            <#-- 调度报表：时间区间筛选，左侧折线图 + 右侧饼图 -->
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="box">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">调度报表</h3>
+                            <#--<input type="text" class="form-control" id="filterTime" readonly >-->
+                        </div>
+                        <div class="box-body">
+                            <div class="row">
+                                <#-- 左侧折线图 -->
+                                <div class="col-md-8">
+                                    <div id="lineChart" style="height: 350px;"></div>
+                                </div>
+                                <#-- 右侧饼图 -->
+                                <div class="col-md-4">
+                                    <div id="pieChart" style="height: 350px;"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
 
 		</section>
 		<!-- /.content -->
 	<@netCommon.commonFooter />
 </div>
 <@netCommon.commonScript />
+<#--<script src="${request.contextPath}/static/adminlte/plugins/daterangepicker/moment.min.js"></script>
+<script src="${request.contextPath}/static/adminlte/plugins/daterangepicker/daterangepicker.js"></script>-->
+<script src="${request.contextPath}/static/plugins/echarts/echarts.common.min.js"></script>
+<script src="${request.contextPath}/static/js/index.js"></script>
+
 </body>
 </html>

xxl-job-admin/src/main/webapp/static/js/index.js

+/**
+ * Created by xuxueli on 17/4/24.
+ */
+
+
+$(function () {
+
+    // lineChart
+    var lineChart = echarts.init(document.getElementById('lineChart'));
+    lineChart.setOption(lineChartDate());
+
+    function lineChartDate() {
+        var option = {
+               title: {
+                   text: '日期分布图'
+               },
+               tooltip : {
+                   trigger: 'axis',
+                   axisPointer: {
+                       type: 'cross',
+                       label: {
+                           backgroundColor: '#6a7985'
+                       }
+                   }
+               },
+               legend: {
+                   data:['成功调度次数','失败调度次数']
+               },
+               toolbox: {
+                   feature: {
+                       saveAsImage: {}
+                   }
+               },
+               grid: {
+                   left: '3%',
+                   right: '4%',
+                   bottom: '3%',
+                   containLabel: true
+               },
+               xAxis : [
+                   {
+                       type : 'category',
+                       boundaryGap : false,
+                       data : ['2017-10-01','2017-10-02','2017-10-03','2017-10-04','2017-10-05','2017-10-06','2017-10-07']
+                   }
+               ],
+               yAxis : [
+                   {
+                       type : 'value'
+                   }
+               ],
+               series : [
+                   {
+                       name:'成功调度次数',
+                       type:'line',
+                       stack: '总量',
+                       areaStyle: {normal: {}},
+                       data:[820, 932, 901, 934, 1290, 1330, 1320]
+                   },
+                   {
+                       name:'失败调度次数',
+                       type:'line',
+                       stack: '总量',
+                       label: {
+                           normal: {
+                               show: true,
+                               position: 'top'
+                           }
+                       },
+                       areaStyle: {normal: {}},
+                       data:[120, 132, 101, 134, 90, 230, 210]
+                   }
+               ],
+                color:['#00A65A', '#F39C12']
+        };
+        return option;
+    }
+
+    // pie chart
+    var pieChart = echarts.init(document.getElementById('pieChart'));
+    pieChart.setOption(pieChartDate());
+
+    function pieChartDate() {
+        option = {
+            title : {
+                text: '调度总次数',
+                /*subtext: 'subtext',*/
+                x:'center'
+            },
+            tooltip : {
+                trigger: 'item',
+                formatter: "{a} <br/>{b} : {c} ({d}%)"
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'left',
+                data: ['成功调度次数','失败调度次数']
+            },
+            series : [
+                {
+                    name: '访问来源',
+                    type: 'pie',
+                    radius : '55%',
+                    center: ['50%', '60%'],
+                    data:[
+                        {value:800, name:'成功调度次数'},
+                        {value:200, name:'失败调度次数'}
+                    ],
+                    itemStyle: {
+                        emphasis: {
+                            shadowBlur: 10,
+                            shadowOffsetX: 0,
+                            shadowColor: 'rgba(0, 0, 0, 0.5)'
+                        }
+                    }
+                }
+            ],
+            color:['#00A65A', '#F39C12']
+        };
+        return option;
+    }
+
+    // 过滤时间
+    /*$('#filterTime').daterangepicker({
+        autoApply:false,
+        singleDatePicker:false,
+        showDropdowns:false,        // 是否显示年月选择条件
+        timePicker: true, 			// 是否显示小时和分钟选择条件
+        timePickerIncrement: 10, 	// 时间的增量，单位为分钟
+        timePicker24Hour : true,
+        opens : 'left', //日期选择框的弹出位置
+        ranges: {
+            '最近1小时': [moment().subtract(1, 'hours'), moment()],
+            '今日': [moment().startOf('day'), moment().endOf('day')],
+            '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
+            '最近7日': [moment().subtract(6, 'days'), moment()],
+            '最近30日': [moment().subtract(29, 'days'), moment()],
+            '本月': [moment().startOf('month'), moment().endOf('month')],
+            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+        },
+        locale : {
+            format: 'YYYY-MM-DD HH:mm:ss',
+            separator : ' - ',
+            customRangeLabel : '自定义',
+            applyLabel : '确定',
+            cancelLabel : '取消',
+            fromLabel : '起始时间',
+            toLabel : '结束时间',
+            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
+            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ],
+            firstDay : 1,
+            startDate: moment().startOf('day'),
+            endDate: moment().endOf('day')
+        }
+    });*/
+
+});