上线单个任务DashBoard页面

src/main/java/com/mooctest/controller/TaskController.java

@@ -1,5 +1,6 @@
 package com.mooctest.controller;
 
+import com.alibaba.fastjson.JSONObject;
 import com.mooctest.data.BugDTO;
 import com.mooctest.data.TaskDTO;
 import com.mooctest.model.BugData;
@@ -45,6 +46,15 @@ public class TaskController {
         return "task_list";
     }
 
+    @GetMapping("/taskDashBoard")
+    public String dashBoard ( @RequestParam("taskId") long taskId ,
+                              @RequestParam("caseId") long caseId ,
+                              Model model){
+        JSONObject data = taskService.getAllTaskDashboard(caseId, taskId);
+        model.addAttribute("task",data);
+        return "crowdTaskDashboard";
+    }
+
 
     @GetMapping("/")
     public String root(Model model) {
@@ -53,7 +63,7 @@ public class TaskController {
 
     @GetMapping("/task_detail")
     public String taskDetail(@RequestParam("examId") long examId,
-                             @RequestParam("caseId") long caseId,
+                             @RequestParam("taskId") long caseId,
                              Model model) {
         // first check is there some data in bugData document,
         bugDataService.importBugData(examId, caseId);

src/main/java/com/mooctest/service/TaskService.java

@@ -1,20 +1,28 @@
 package com.mooctest.service;
 
 import com.alibaba.fastjson.JSON;
+import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
 import com.mooctest.dao.MasterReportDao;
 import com.mooctest.data.TaskDTO;
 import com.mooctest.model.BugData;
 import com.mooctest.model.Task;
+import com.mooctest.util.TimeUtil;
 import org.springframework.beans.BeanUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.http.HttpEntity;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.ResponseEntity;
 import org.springframework.http.converter.HttpMessageConverter;
 import org.springframework.http.converter.StringHttpMessageConverter;
 import org.springframework.stereotype.Service;
+import org.springframework.util.LinkedMultiValueMap;
+import org.springframework.util.MultiValueMap;
 import org.springframework.web.client.RestTemplate;
 
 import java.nio.charset.Charset;
+import java.nio.charset.StandardCharsets;
 import java.util.*;
 import java.util.stream.Collectors;
 
@@ -44,6 +52,10 @@ public class TaskService {
     @Value("${task.info.addr}")
     String taskInfoAddr;
 
+    @Value("${report.host}")
+    String reportHost ;
+    private final String HTTP = "http://";
+
 
     public List<TaskDTO> getAllTasks() {
         RestTemplate rt = new RestTemplate();
@@ -114,6 +126,24 @@ public class TaskService {
 
     }
 
+    public JSONObject getAllTaskDashboard (long caseId,long taskId){
+        RestTemplate template = new RestTemplate();
+        String url = HTTP+reportHost+"/Bug/api/analyze/analyseExam";
+        MultiValueMap<String, Object> paramMap = new LinkedMultiValueMap<String, Object>();
+        paramMap.add("caseId", caseId);
+        paramMap.add("taskId", taskId);
+        template.getMessageConverters().set(1, new StringHttpMessageConverter(StandardCharsets.UTF_8));
+        HttpHeaders headers = new HttpHeaders();
+        HttpEntity<MultiValueMap<String, Object>> httpEntity = new HttpEntity<MultiValueMap<String, Object>>(paramMap,headers);
+        ResponseEntity<String> response2 = template.postForEntity(url, httpEntity, String.class);
+        JSONObject tasksJson = JSON.parseObject(response2.getBody());
+        tasksJson.put("taskName","第一次众测测试");
+        tasksJson.put("startTime", TimeUtil.timestamp2strSimple(tasksJson.get("startTime").toString()));
+        tasksJson.put("endTime", TimeUtil.timestamp2strSimple(tasksJson.get("endTime").toString()));
+        tasksJson.put("gradeArray" , getGradeInt(tasksJson.getJSONObject("gradeDistrubute")));
+        return  tasksJson;
+    }
+
 //    public List<TaskDTO> getAllTasks() {
 //        RestTemplate rt = new RestTemplate();
 //        StringHttpMessageConverter stringHttpMessageConverter=new StringHttpMessageConverter(Charset.forName("UTF-8"));
@@ -154,6 +184,16 @@ public class TaskService {
 //
 //    }
 
+    private int [] getGradeInt(JSONObject jsonObject){
+        int [] res = new int[11];
+        for (int i = 0 ; i < 11 ; i++ ){
+            res[i] = Integer.parseInt(jsonObject.get(i+"").toString());
+        }
+        return res;
+    }
+
+
+
     public TaskDTO getByExamIdAndCaseId(long examId, long caseId) {
         TaskDTO taskDefault = new TaskDTO();
         taskDefault.setExamId(examId);

src/main/java/com/mooctest/util/TimeUtil.java

@@ -7,6 +7,7 @@ import java.util.Date;
 public class TimeUtil {
 
     static DateFormat dateFormat = new SimpleDateFormat("MM/dd/YYYY hh:mm a");
+    static DateFormat dateFormatSimple = new SimpleDateFormat("YYYY-MM-dd");
 
     public static String timestamp2str (String timestamp ) {
         try {
@@ -17,4 +18,14 @@ public class TimeUtil {
             return timestamp; // if error return the parameter
         }
     }
+
+    public static String timestamp2strSimple (String timestamp){
+        try {
+            long a = Long.parseLong(timestamp);
+            Date d = new Date(a);
+            return dateFormatSimple.format(d);
+        }catch (Exception e){
+            return timestamp;
+        }
+    }
 }

src/main/resources/templates/crowdTaskDashboard.html

@@ -0,0 +1,355 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
+      layout:decorator="main">
+<head>
+    <link rel="stylesheet" type="text/css" href="/static/css/main.css" />
+    <link rel="stylesheet" type="text/css" href="/static/css/app_info.css" />
+
+    <!-- dataTables -->
+    <link rel="stylesheet" type="text/css" href="/static/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" />
+    <!-- Select2 -->
+    <link rel="stylesheet" type="text/css" href="/static/AdminLTE/bower_components/select2/dist/css/select2.min.css"  />
+</head>
+<body>
+<th:block layout:fragment="sidebar">
+    <li>
+        <a href="/task_detail">
+            <i class="glyphicon glyphicon-book"></i>
+            <span>
+                任务列表
+            </span>
+        </a>
+    </li>
+
+</th:block>
+
+<th:block layout:fragment="maincontent">
+    <section class="content-header">
+        <h1  >
+            <th:block th:text="${task.get('taskName')}"> </th:block>
+            <small th:text="${task.get('startTime') } +' ~ ' + ${task.endTime}">
+
+            </small>
+        </h1>
+
+        <ol class="breadcrumb">
+            <li>
+                <a href="/home">
+                    <i class="fa fa-dashboard"></i>
+                    全部任务
+                </a>
+            </li>
+            <li class="active" th:text="|${task.taskName} Dashboard|">
+            </li>
+        </ol>
+    </section>
+
+    <section class="content container-fluid">
+        <!-- Today Summary -->
+        <div class="row">
+            <div class="col-md-4 col-sm-6 col-xs-12">
+                <div class="info-box">
+                    <span class="info-box-icon bg-red"><i class="ion ion-ios-people-outline"></i></span>
+
+                    <div class="info-box-content">
+                        <span class="info-box-text">工人总数</span>
+                        <span class="info-box-number" th:text="${task.reportNum}"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4 col-sm-6 col-xs-12">
+                <div class="info-box">
+                    <span class="info-box-icon bg-green"><i class="glyphicon glyphicon-list-alt"></i></span>
+
+                    <div class="info-box-content">
+                        <span class="info-box-text">BUG报告</span>
+                        <span class="info-box-number" th:text="${task.bugNum}"></span>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-4 col-sm-6 col-xs-12">
+                <div class="info-box">
+                    <span class="info-box-icon bg-yellow"><i class="glyphicon glyphicon-bookmark"></i></span>
+
+                    <div class="info-box-content">
+                        <span class="info-box-text">测试用例</span>
+                        <span class="info-box-number" th:text="${task.testCaseNum}"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <div id="resultStat"  class="" >
+            <div class="col-md-8" id="statLeft">
+                <!-- BAR CHART -->
+                <div class="box box-success">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">成绩分布</h3>
+
+                        <div class="box-tools pull-right">
+                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+                            </button>
+                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                        </div>
+                    </div>
+                    <div class="box-body">
+                        <div class="chart">
+                            <canvas id="barChart" style="height:230px"></canvas>
+                        </div>
+                    </div>
+                    <!-- /.box-body -->
+                </div>
+
+                <div class="box box-primary">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">成绩分布</h3>
+
+                        <div class="box-tools pull-right">
+                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+                            </button>
+                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                        </div>
+                    </div>
+                    <div class="box-body">
+                        <div id="ma33p"  class=" " ></div>
+                    </div>
+                    <!-- /.box-body -->
+                </div>
+            </div>
+            <div class="col-md-4" id="statRight">
+                <!-- DONUT CHART -->
+                <div class="box box-danger">
+                    <div class="box-header with-border">
+                        <h3 class="box-title">饼状分布</h3>
+
+                        <div class="box-tools pull-right">
+                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+                            </button>
+                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                        </div>
+                    </div>
+                    <div class="box-body">
+                        <canvas id="pieChart" style="height:250px"></canvas>
+                    </div>
+                    <!-- /.box-body -->
+                </div>
+                <!-- /.box -->
+
+                <div class="box">
+                    <div class="box-header">
+                        <h3 class="box-title">具体成绩</h3>
+
+                        <div class="box-tools pull-right">
+                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
+                            </button>
+                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
+                        </div>
+                    </div>
+                    <!-- /.box-header -->
+                    <div class="box-body no-padding">
+                        <table class="table">
+                            <tr>
+                                <th style="width: 20px">#</th>
+                                <th style="width: 70px">姓名</th>
+                                <th >学校</th>
+                            </tr>
+                            <tr th:each="item,itemStat : ${task.get('workerRank')}">
+                                <td th:text="${itemStat.index+1}"></td>
+                                <td th:text="${item.name}">张三</td>
+                                <td><span th:text="${item.school}">55</span></td>
+                            </tr>
+
+                        </table>
+                    </div>
+                    <!-- /.box-body -->
+                </div>
+            </div>
+        </div>
+
+
+    </section>
+
+    <!-- section howModal -->
+    <div id="howModal" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header" style="background-color: #3c8dbc;">
+                    <span style="color: #fff;" class="pull-left"><b>How does system aggregate report <span id="reportId"></span> to <span id="aggReportId"></span>?</b></span>
+                    <button class="close pull-right" data-dismiss="modal">&times;</button>
+                </div>
+                <div class="modal-body">
+                    <img src="" class="img-responsive" />
+                </div>
+            </div>
+        </div>
+    </div>
+</th:block>
+
+</body>
+</html>
+
+<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog"
+     aria-labelledby="myLargeModalLabel">
+    <div class="modal-dialog modal-lg" style="display: inline-block; width: 300px;">
+        <div class="modal-content">
+            <img id="imgInModalID"
+                 class="carousel-inner img-responsive img-rounded"
+                 onclick="closeImageViewer()"
+                 onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
+                 onmouseout="this.style.cursor='default'"
+            />
+        </div>
+    </div>
+</div>
+<!-- ChartJS -->
+<script src="/static/AdminLTE/bower_components/chart.js/Chart.js"></script>
+<script src="/static/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+<script src="/static/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
+<script src="/static/AdminLTE/bower_components/select2/dist/js/select2.min.js"></script>
+<script src="/static/js/app_info.js"></script>
+<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
+<script src="https://data.jianshukeji.com/geochina/china.js"></script>
+
+<script type="text/javascript" xmlns:th="http://www.thymeleaf.org" th:inline="javascript">
+    /*<![CDATA[*/
+    var grades  = [[${task.get('gradeArray')}]]
+    /*]]>*/
+    var mapChinaData = [{"name":"北京","value":3},{"name":"天津","value":82},{"name":"河北","value":2},{"name":"山西","value":52},{"name":"内蒙古","value":12},{"name":"辽宁","value":21},{"name":"吉林","value":67},{"name":"黑龙江","value":7},{"name":"上海","value":34},{"name":"江苏","value":49},{"name":"浙江","value":45},{"name":"安徽","value":98},{"name":"福建","value":19},{"name":"江西","value":4},{"name":"山东","value":4},{"name":"河南","value":30},{"name":"湖北","value":36},{"name":"湖南","value":25},{"name":"广东","value":62},{"name":"广西","value":8},{"name":"海南","value":94},{"name":"重庆","value":53},{"name":"四川","value":28},{"name":"贵州","value":7},{"name":"云南","value":40},{"name":"西藏省","value":78},{"name":"陕西","value":27},{"name":"甘肃","value":31},{"name":"青海","value":53},{"name":"宁夏","value":50},{"name":"新疆","value":52},{"name":"台湾","value":67},{"name":"香港","value":12},{"name":"澳门","value":92},{"name":"南海诸岛","value":28},{"name":"南海诸岛","value":54}];
+    $(document).ready(function(){
+        var areaChartData = {
+            labels  : ['0', '1','2','3','4','5','6','7','8','9','10'],
+            datasets: [
+                {
+                    label               : 'Digital Goods',
+                    fillColor           : 'rgba(60,141,188,0.9)',
+                    strokeColor         : 'rgba(60,141,188,0.8)',
+                    pointColor          : '#3b8bba',
+                    pointStrokeColor    : 'rgba(60,141,188,1)',
+                    pointHighlightFill  : '#fff',
+                    pointHighlightStroke: 'rgba(60,141,188,1)',
+                    data                : grades
+                }
+            ]
+        }
+
+
+        var barChartCanvas                   = $('#barChart').get(0).getContext('2d')
+        var barChart                         = new Chart(barChartCanvas)
+        var barChartData                     = areaChartData
+        barChartData.datasets[0].fillColor   = '#00a65a'
+        barChartData.datasets[0].strokeColor = '#00a65a'
+        barChartData.datasets[0].pointColor  = '#00a65a'
+        var barChartOptions                  = {
+            //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
+            scaleBeginAtZero        : true,
+            //Boolean - Whether grid lines are shown across the chart
+            scaleShowGridLines      : true,
+            //String - Colour of the grid lines
+            scaleGridLineColor      : 'rgba(0,0,0,.05)',
+            //Number - Width of the grid lines
+            scaleGridLineWidth      : 1,
+            //Boolean - Whether to show horizontal lines (except X axis)
+            scaleShowHorizontalLines: true,
+            //Boolean - Whether to show vertical lines (except Y axis)
+            scaleShowVerticalLines  : true,
+            //Boolean - If there is a stroke on each bar
+            barShowStroke           : true,
+            //Number - Pixel width of the bar stroke
+            barStrokeWidth          : 2,
+            //Number - Spacing between each of the X value sets
+            barValueSpacing         : 5,
+            //Number - Spacing between data sets within X values
+            barDatasetSpacing       : 1,
+            //String - A legend template
+            legendTemplate          : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
+            //Boolean - whether to make the chart responsive
+            responsive              : true,
+            maintainAspectRatio     : true
+        }
+
+        barChartOptions.datasetFill = false
+        barChart.Bar(barChartData, barChartOptions)
+
+
+
+        //-------------
+        //- PIE CHART -
+        //-------------
+        // Get context with jQuery - using jQuery's .get() method.
+        var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
+        var pieChart       = new Chart(pieChartCanvas)
+        var PieData        = [
+            {
+                value    : grades[0],
+                color    : '#f56954',
+                highlight: '#f56954',
+                label    : '0'
+            },
+            {
+                value    : grades[8]+grades[9]+grades[10],
+                color    : '#00a65a',
+                highlight: '#00a65a',
+                label    : '8-10'
+            },
+            {
+                value    : grades[1]+grades[2]+grades[3]+grades[4],
+                color    : '#f39c12',
+                highlight: '#f39c12',
+                label    : '1-4'
+            },
+            {
+                value    : grades[5]+grades[6]+grades[7],
+                color    : '#00c0ef',
+                highlight: '#00c0ef',
+                label    : '5-7'
+            }
+        ]
+        var pieOptions     = {
+            //Boolean - Whether we should show a stroke on each segment
+            segmentShowStroke    : true,
+            //String - The colour of each segment stroke
+            segmentStrokeColor   : '#fff',
+            //Number - The width of each segment stroke
+            segmentStrokeWidth   : 2,
+            //Number - The percentage of the chart that we cut out of the middle
+            percentageInnerCutout: 50, // This is 0 for Pie charts
+            //Number - Amount of animation steps
+            animationSteps       : 100,
+            //String - Animation easing effect
+            animationEasing      : 'easeOutBounce',
+            //Boolean - Whether we animate the rotation of the Doughnut
+            animateRotate        : true,
+            //Boolean - Whether we animate scaling the Doughnut from the centre
+            animateScale         : false,
+            //Boolean - whether to make the chart responsive to window resizing
+            responsive           : true,
+            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
+            maintainAspectRatio  : true,
+            //String - A legend template
+            legendTemplate       : '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>'
+        }
+        //Create pie or douhnut chart
+        // You can switch between pie and douhnut using the method below.
+        pieChart.Doughnut(PieData, pieOptions)
+
+
+        var map = new Highcharts.Map('ma33p', {
+            title: {
+                text: '选手分布图'
+            },
+            colorAxis: {
+                min: 0,
+                minColor: 'rgb(255,255,255)',
+                maxColor: '#d33820'
+            },
+            series: [{
+                data: mapChinaData,
+                name: '选手个数',
+                mapData: Highcharts.maps['cn/china'],
+                joinBy: 'name' // 根据 name 属性进行关联
+            }]
+        })
+    });
+</script>

src/main/resources/templates/crowdTaskList.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
+      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
+      layout:decorator="base">
+<head>
+    <link rel="stylesheet" href="/static/css/applications.css" type="text/css"/>
+    <!-- dataTables -->
+    <link rel="stylesheet" type="text/css"
+          href="/static/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"/>
+    <!-- Select2 -->
+    <link rel="stylesheet" type="text/css" href="/static/AdminLTE/bower_components/select2/dist/css/select2.min.css"/>
+</head>
+<body>
+<div layout:fragment="mainbody">
+    <aside class="main-sidebar">
+        <section class="sidebar">
+            <div class="user-panel">
+                <div class="pull-left image">
+                    <img src="/static/images/avatar/avatar-admin.jpg" class="img-circle" alt="User Image" />
+                </div>
+                <div class="pull-left info">
+                    <p>Admin</p>
+                    <a href="#">
+                        <i class="fa fa-circle text-success"></i>
+                        Online
+                    </a>
+                </div>
+            </div>
+
+            <!-- Search form -->
+            <form action="#" method="get" class="sidebar-form">
+                <div class="input-group">
+                    <input type="text" name="q" class="form-control" placeholder="Search..." />
+                    <span class="input-group-btn">
+						<button type="submit" name="search" id="search-btn" class="btn btn-flat">
+							<i class="fa fa-search"></i>
+						</button>
+					</span>
+                </div>
+            </form>
+
+            <!-- Sidebar Menu -->
+            <ul class="sidebar-menu tree" data-widget="tree">
+                <!--                {% for task in app_list %}-->
+                <!--                <li th:each="task:${tasks}" >-->
+
+                <!--                    <a th:href="'/task_detail?examId='+${task.examId}+'&amp;caseId='+${task.caseId}" th:text="${task.name}">-->
+                <!--                        <i class="fa fa-link"></i>-->
+                <!--                    </a>-->
+                <!--                </li>-->
+                <!--                {% endfor %}-->
+
+                <li>
+                    <a href="/papers">
+                        <i class="glyphicon glyphicon-pencil"></i>
+                        <span>
+                            众审试卷列表
+                        </span>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="/review/jobs">
+                        <i class="glyphicon glyphicon-tasks"></i>
+                        <span>
+                            众审任务列表
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </section>
+    </aside>
+
+    <!-- Main Content -->
+    <div class="content-wrapper" style="min-height: 691px;">
+        <section class="content-header">
+            <h1>全部应用</h1>
+
+            <ol class="breadcrumb">
+                <li class="active">
+                    <a href="/home">
+                        <i class="fa fa-dashboard"></i>
+                        全部应用
+                    </a>
+                </li>
+            </ol>
+        </section>
+
+        <!-- Main Content -->
+        <section class="content container-fluid">
+            <!-- 			<div id="task-list-search" class="input-group col-md-6">
+                            <input type="text" class="form-control" placeholder="Search for application">
+                            <span class="input-group-btn">
+                                <button class="btn btn-default" type="button" id="task-search-btn">Search</button>
+                            </span>
+                        </div> -->
+
+            <table id="task-list" class="table table-striped text-center" style="margin-top: 10px">
+                <thead><tr>
+                    <!--<th></th>-->
+                    <th>考试号</th>
+                    <th>题号</th>
+                    <th>应用名</th>
+                    <!--<th>版本</th>-->
+                    <th>审核状态</th>
+                    <!--<th>开始时间</th>-->
+                    <!--<th>结束时间</th>-->
+                    <th>审核进度</th>
+                    <th>未审核数</th>
+                </tr></thead>
+                <tbody>
+                <th:block th:each="task : ${tasks}">
+
+                    <tr>
+                        <!--<td><img th:src="${task.icon}" style="width: 25px; height: 25px;" /></td>-->
+                        <td><span  class="label label-info" th:text="${task.examId}"></span></td>
+                        <td><span  class="label label-info" th:text="${task.caseId}">题号</span></td>
+                        <td><b><a th:href="'/task_detail?examId=' + ${task.examId} + '&amp;caseId=' + ${task.caseId}" id="task-name" th:text="${task.name}">{{ task.name }}</a></b></td>
+                        <!--<td th:text="${task.version}"></td>-->
+                        <td th:if="${task.numOfUndeal > 0}"><span  class="label label-info">审核中</span></td>
+                        <td th:if="${task.numOfUndeal == 0}"><span  class="label label-success">审核结束</span></td>
+                        <!--<td th:text="${task.startTime}">{{ task.print_start_time }}</td>-->
+                        <!--<td th:text="${task.endTime}">{{ task.print_end_time }}</td>-->
+                        <td style="width: 200px;">
+                            <a th:href="'/task_detail?examId=' + ${task.examId} + '&amp;caseId=' + ${task.caseId}">
+                                <div class="progress">
+                                    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
+                                         th:if="${task.numOfTotalBug!=0}"
+                                         th:style="'width: ' + ${(1 - task.numOfUndeal*1.0/task.numOfTotalBug) * 100}+'%'"
+                                         data-placement="bottom" data-toggle="tooltip" th:title="|${task.numOfTotalBug - task.numOfUndeal}份报告已经被审核|">
+                                    </div>
+                                    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
+                                         th:if="${task.numOfTotalBug!=0}"
+                                         th:style="'width: ' + ${(task.numOfUndeal*1.0/task.numOfTotalBug) * 100}+'%'"
+                                         data-placement="bottom" data-toggle="tooltip" th:title="|${task.numOfUndeal}份报告还未被审核|">
+                                    </div>
+                                    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar"
+                                         th:if="${task.numOfTotalBug==0}"
+                                         style="width: 100%"
+                                         data-placement="bottom" data-toggle="tooltip" th:title="|该任务没有报告|">
+                                    </div>
+
+                                </div>
+                            </a>
+                        </td>
+                        <td><span class="badge"><a th:href="'/task_detail?examId=' + ${task.examId} + '&amp;caseId=' + ${task.caseId}" style="color: #fff;" th:text="${task.numOfUndeal}"></a></span></td>
+                    </tr>
+                </th:block>
+                </tbody>
+            </table><!-- table -->
+        </section>
+    </div>
+</div>
+</body>
+</html>
+<script src="/static/AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
+<script src="/static/AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
+<script src="/static/AdminLTE/bower_components/select2/dist/js/select2.min.js"></script>
+
+<script type="text/javascript">
+    $(document).ready(function(){
+        $('[data-toggle="tooltip"]').tooltip();
+
+        var taskListTable = $('#task-list').DataTable({
+            searching: true,
+            pageLength: 25
+        });
+    });
+</script>

src/main/resources/templates/jobDetail.html

@@ -242,6 +242,9 @@
                                     </div>
                                 </div>
                                 <div class="col-md-6" id="statRight">
+                                    
+
+
                                     <div class="box">
                                         <div class="box-header">
                                             <h3 class="box-title">具体成绩</h3>
@@ -412,20 +415,9 @@
 
     $(document).ready(function(){
         $('[data-toggle="tooltip"]').tooltip();
-
-
-        //Initialize Select2 Elements
-        $('.select2').select2()
-
         ratioIndex =0 ;
-
-
-        //Date range picker with time picker
-        // $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A' })
         $('#reservationtime').daterangepicker({ timePicker: true, timePickerIncrement: 30, locale: { format: 'MM/DD/YYYY hh:mm A' }})
 
-
-
         var taskListTable = $('#task-list').DataTable({
             searching: true,
             pageLength: 25
@@ -448,9 +440,6 @@
         }
 
 
-        //-------------
-        //- BAR CHART -
-        //-------------
         var barChartCanvas                   = $('#barChart').get(0).getContext('2d')
         var barChart                         = new Chart(barChartCanvas)
         var barChartData                     = areaChartData