重构回评页面；特殊标记增加下划线；轨迹模式下增加小题切换，并全局改为key up下的←→

stmms-biz/src/main/java/cn/com/qmth/stmms/biz/mark/query/MarkLibrarySearchQuery.java

@@ -29,6 +29,8 @@ public class MarkLibrarySearchQuery extends BaseQuery<MarkLibrary> {
 
     private Boolean tagNotNull;
 
+    private Double markerScore;
+
     public void orderByMarkerTimeDesc() {
         setSort(new Sort(Direction.DESC, "markerTime"));
     }
@@ -117,4 +119,12 @@ public class MarkLibrarySearchQuery extends BaseQuery<MarkLibrary> {
         this.campusId = campusId;
     }
 
+    public Double getMarkerScore() {
+        return markerScore;
+    }
+
+    public void setMarkerScore(Double markerScore) {
+        this.markerScore = markerScore;
+    }
+
 }

stmms-biz/src/main/java/cn/com/qmth/stmms/biz/mark/service/Impl/MarkLibraryServiceImpl.java

@@ -217,6 +217,9 @@ public class MarkLibraryServiceImpl extends BaseQueryService<MarkLibrary> implem
                 if (query.getTagId() > 0) {
                     predicates.add(cb.like(root.get("tags").as(String.class), "%" + query.getTagId() + "%"));
                 }
+                if (query.getMarkerScore()!=null ) {
+                    predicates.add(cb.equal(root.get("markerScore"), query.getMarkerScore()));
+                }
                 return predicates.isEmpty() ? cb.conjunction()
                         : cb.and(predicates.toArray(new Predicate[predicates.size()]));
             }

stmms-web/src/main/java/cn/com/qmth/stmms/mark/MarkController.java

@@ -14,6 +14,8 @@ import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.data.domain.Sort;
+import org.springframework.data.domain.Sort.Direction;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
@@ -330,8 +332,10 @@ public class MarkController extends BaseController {
 
     @RequestMapping("/gethistory")
     @ResponseBody
-    public Object history(HttpServletRequest request, @RequestParam int pageNumber, @RequestParam int pageSize)
-            throws Exception {
+    public Object history(HttpServletRequest request, @RequestParam int pageNumber, @RequestParam int pageSize,
+            @RequestParam String order, @RequestParam String sort,
+            @RequestParam(required = false, defaultValue = "false") Boolean isTag,
+            @RequestParam(required = false) Integer studentId) {
         Marker marker = RequestUtils.getWebUser(request).getMarker();
         // 查找给分任务历史
         MarkLibrarySearchQuery query = new MarkLibrarySearchQuery();
@@ -341,7 +345,23 @@ public class MarkController extends BaseController {
         query.setStatus(LibraryStatus.MARKED);
         query.setPageNumber(pageNumber);
         query.setPageSize(pageSize);
-        query.orderByMarkerTimeDesc();
+        query.setTagNotNull(isTag);
+        Direction d = Direction.DESC;
+        if(sort.equals("asc")){
+            d = Direction.ASC;
+        }
+        if(order.equals("time")){
+            query.setSort(new Sort(d,"markerTime"));
+        }else if(order.equals("studentId")){
+            query.setSort(new Sort(d,"studentId"));
+        }else if(order.equals("score")){
+            query.setSort(new Sort(d,"markerScore"));
+        }else{
+            query.orderByMarkerTimeDesc();
+        }
+        if(studentId!=null){
+            query.setStudentId(studentId);
+        }
         List<Task> list = taskService.findByQuery(query);
         for (Task task : list) {
             task.setPrevious(true);

stmms-web/src/main/webapp/static/mark-new/css/style.css

@@ -1205,3 +1205,182 @@ a.button.all-zero-button {
 .clock_popover .popover-content {
 	padding: 10px 20px;
 }
+/** 回评*/
+.cl {
+	zoom: 1;
+}
+.cl:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+.header {
+	overflow: hidden;
+}
+.mark-sidebar {
+	position: relative;
+	overflow: hidden;
+}
+.c-mn {
+	height: calc(100% - 41px); 
+	height: -webkit-calc(100% - 41px); 
+	height: -moz-calc(100% - 41px);
+	background: #FFF;
+}
+.c-mn nav {
+	background: #F5F4F4;
+}
+.image-content {
+	height: 100%;
+}
+.mark-steps {
+	position: relative;
+	height: 100%;
+	overflow: hidden;
+}
+/*c-scbar*/
+.c-scbar {
+	height: 44px;
+	padding: 8px;
+	overflow: hidden;
+
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-scbar td {
+	line-height: 28px;
+	color: #455B71;
+}
+.c-scbar td.sc span {
+	position: relative;
+	display: inline-table;
+	width: 100%;
+	height: 28px;
+	overflow: hidden;
+	background: #FFF;
+	padding: 0 30px 0 10px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-scbar input[type="text"] {
+	float: left;
+	width: 100%;
+	height: 28px;
+	overflow: hidden;
+	font-size: 13px;
+	color: #455B71;
+	background: none;
+	border: 0;
+	box-shadow: none;
+	padding: 0;
+	margin: 0;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-scbar td.sc span em {
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 30px;
+	height: 28px;
+	background: url(../images/sc.png) no-repeat 50% 50%;
+}
+.c-scbar input[type="checkbox"] {
+	float: left;
+	margin: 8px 0 0 8px;
+}
+.c-scbar em.disabled {
+	color: #919FAC;
+}
+
+/*c-page*/
+.c-page {
+	z-index: 1;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 42px;
+	overflow: hidden;
+	line-height: 26px;
+	text-align: right;
+	color: #FFF;
+	background: #5D6D7D;
+	padding: 8px 10px;
+
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-page a {
+	float: left;
+	display: block;
+	width: 26px;
+	height: 26px;
+	overflow: hidden;
+	text-indent: -9999em;
+	background: #405468 url(../images/back.png) no-repeat 50% 50%;
+}
+.c-page a.next {
+	margin-left: 5px;
+	background-image: url(../images/next.png);
+}
+.c-page a:hover {
+	background-color: #FFD800;
+}
+/*c-table*/
+.c-table {
+	height: -webkit-calc(100vh - 127px);
+	height: -moz-calc(100vh - 127px);
+	height: calc(100vh - 127px);
+	overflow-y: auto;
+}
+.c-table .table th, .c-table .table td {
+	border-top: none;
+	border-bottom: 1px solid #5d6d7d;
+}
+.c-table .table .up {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	background: url(../images/o_up.gif) no-repeat 100% 50%;
+	margin-left: 5px;
+}
+.c-table .table .down {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	background: url(../images/o_down.gif) no-repeat 100% 50%;
+	margin-left: 5px;
+}
+.c-table .table td.tips {
+	background: url(../images/tips.gif) no-repeat 0 0;
+}
+.c-table .table tr.active > td.tips {
+    background-color: #5a7686;
+}
+.c-table .table tr:hover td.tips {
+    background-color: #A2B2BB;
+}
+.c-table .loding {
+	width: 100%;
+}
+.c-table .loding td {
+	width: 100%;
+	height: 100px;
+	vertical-align: middle;
+	text-align: center;
+	border: 0;
+}
+.c-table .loding td p {
+	line-height: 20px;
+	padding-top: 10px;
+}
+.c-table .loding tr:hover td {
+	background: none;
+}

stmms-web/src/main/webapp/static/mark-new/js/mark-control.js

@@ -191,6 +191,8 @@ MarkControl.prototype.initTriggers = function(option) {
         }
         this.trigger('center.width.change');
     });
+    this.on('mark.focus.change', this, function(event, context, eventObject) {
+    });
     this.on('task.get.finish', this, function(event, context, eventObject) {
         context.prefetchCallback = undefined;
     });

stmms-web/src/main/webapp/static/mark-new/js/modules/mark-board.js

@@ -24,6 +24,9 @@ function MarkBoard(option) {
     this.markControl.on('task.load.finish', this, function(event, context, eventObject) {
         this.initByTask(context.task);
     });
+    this.markControl.on('mark.focus.change', this, function(event, context, eventObject) {
+    	this.onFocusChange();
+    });
     this.markControl.on('mark.step.change', this, this.onStepSelect);
     this.markControl.on('key.press', this, function(e, context, event) {
         var code = event.keyCode;
@@ -42,22 +45,6 @@ function MarkBoard(option) {
                 this.onDecimalInput();
                 event.preventDefault();
                 return false;
-            } else if (code == 45) {
-                //-按键，切换到上一个步骤
-                if (this.currentStep.number > 1) {
-                    this.resetCurrentStep();
-                    this.markControl.trigger('mark.step.change', this.currentStep.number - 1);
-                    event.preventDefault();
-                    return false;
-                }
-            } else if (code == 61 || code == 43) {
-                //+按键，切换到下一个步骤
-                if (this.currentStep.number < this.stepCount && this.currentStep.markScore != undefined) {
-                    this.resetCurrentStep();
-                    this.markControl.trigger('mark.step.change', this.currentStep.number + 1);
-                    event.preventDefault();
-                    return false;
-                }
             } else if (code == 13 || code == 108) {
                 //回车键
                 if (this.currentStep.markFinish === true && this.task.markFinish === true) {
@@ -99,6 +86,22 @@ function MarkBoard(option) {
                 this.onNumberSubmit();
                 event.preventDefault();
                 return false;
+            } else if (code == 37) {
+                //←按键，切换到上一个步骤
+                if (this.currentStep.number > 1) {
+                    this.resetCurrentStep();
+                    this.markControl.trigger('mark.step.change', this.currentStep.number - 1);
+                    event.preventDefault();
+                    return false;
+                }
+            } else if (code == 39) {
+                //→按键，切换到下一个步骤
+                if (this.currentStep.number < this.stepCount) {
+                    this.resetCurrentStep();
+                    this.markControl.trigger('mark.step.change', this.currentStep.number + 1);
+                    event.preventDefault();
+                    return false;
+                }
             }
         }
     });
@@ -660,6 +663,10 @@ MarkBoard.prototype.togglePopover = function(show, text, baseDom) {
     }
 }
 
+MarkBoard.prototype.onFocusChange = function() {
+	this.currentStep = null;
+}
+
 MarkBoard.prototype.step_board_dom = '<div class="span2 mark-steps" style="display:none"><div class="step-board">\
 <a href="#" class="header" id="show-score-board-button"><< 鼠标给分</a>\
 <div class="newSubListCss"><span class="fraction" style="margin-right: 10px;">主观分<i class="red" id="subject-score"></i></span>\

stmms-web/src/main/webapp/static/mark-new/js/modules/mark-history.js

@@ -12,6 +12,9 @@ function MarkHistory(option) {
     this.taskList = [];
     this.container = this.markControl.container.sidebar;
     this.loading = false;
+    this.order = "time"
+    this.sort = "desc";
+    var isTag = false; 
 
     this.markControl.initMarkFunction();
     this.container.toggleButton = getDom(this.toggle_button_dom, this.markControl).appendTo(this.markControl.container.assistant.functionList);
@@ -30,12 +33,15 @@ function MarkHistory(option) {
                 var task = taskList[i];
                 var row = getDom(this.history_row_dom, this.markControl).appendTo(this.container.list);
                 row.find('.history-secret-number').html(task.studentId);
-
+                if(task.tags!=undefined && task.tags!=null ){
+                	row.find('.history-secret-number').addClass('tips');
+                }
                 var date = new Date();
                 date.setTime(task.markTime);
                 row.find('.history-time').html(date.format('hh:mm:ss'));
                 row.find('.history-score').html(task.totalScore);
                 row.attr('data-index', i);
+                
 
                 //回评任务处理
                 task.previous = true;
@@ -58,7 +64,8 @@ function MarkHistory(option) {
             markHistory.onTaskSelect(index);
         });
         this.pageNumber = data.pageNumber;
-        this.updateHeader();
+        this.updatePage();
+        this.updateSort(this.order,this.sort);
 
         if (this.taskList.length > 0) {
             this.onTaskSelect(0);
@@ -80,10 +87,11 @@ function MarkHistory(option) {
 MarkHistory.prototype.init = function() {
     this.container.empty();
 
-    this.container.header = getDom(this.header_dom, this.markControl).appendTo(this.container);
     this.container.paginator = getDom(this.paginator_dom, this.markControl).appendTo(this.container);
+    this.container.header = getDom(this.header_dom, this.markControl).appendTo(this.container);
+    this.container.search = getDom(this.history_search_dom, this.markControl).appendTo(this.container).find('#history-search');
     this.container.list = getDom(this.history_list_dom, this.markControl).appendTo(this.container).find('#history-list');
-
+    
 	var self = this;
     this.container.header.find('#close-history-button').click(this, function(event) {
         event.data.toggle(false);
@@ -92,14 +100,75 @@ MarkHistory.prototype.init = function() {
     })
     this.container.paginator.find('#last-page-button').click(this, function(event) {
         var markHistory = event.data;
-        markHistory.onSearch(markHistory.pageNumber + 1);
+        if (markHistory.taskList.length < markHistory.pageSize) {
+        	return ;
+        }
+        if (self.container.search.find('#history-isTag').prop("checked")) {
+        	markHistory.isTag=true;
+        }  else{
+        	markHistory.isTag=false;
+        }
+        markHistory.onSearch(markHistory.pageNumber + 1,markHistory.order,markHistory.sort,markHistory.isTag);
     });
     this.container.paginator.find('#next-page-button').click(this, function(event) {
         var markHistory = event.data;
+        if (markHistory.pageNumber == 1) {
+        	return ;
+        }
         if (markHistory.pageNumber > 1) {
-            markHistory.onSearch(markHistory.pageNumber - 1);
+            if (self.container.search.find('#history-isTag').prop("checked")) {
+            	markHistory.isTag=true;
+            }  else{
+            	markHistory.isTag=false;
+            }
+            markHistory.onSearch(markHistory.pageNumber - 1,markHistory.order,markHistory.sort,markHistory.isTag);
+        }
+    });
+    this.container.find('#studentId-search').click(this, function(event) {
+    	var markHistory = event.data;
+    	var studentId = self.container.find('#studentId-in').val();
+    	var re = /^[1-9]+[0-9]*]*$/ ;
+    	if(!re.test(studentId)){
+    		alert("请输入数字");
+    		return ;
+    	}
+    	if (self.container.search.find('#history-isTag').prop("checked")) {
+        	markHistory.isTag=true;
+        }  else{
+        	markHistory.isTag=false;
         }
+    	markHistory.onSearch(0,markHistory.order,markHistory.sort,markHistory.isTag,studentId);
+    });
+    this.container.find('#time-sort-th').click(this, function(event) {
+        self.orderSearch("time");
+    });
+    this.container.find('#studentId-sort-th').click(this, function(event) {
+        self.orderSearch("studentId");
+    });
+    this.container.find('#score-sort-th').click(this, function(event) {
+        self.orderSearch("score");
     });
+    
+    self.updateSort(self.order,self.sort);
+    self.updateLoading();
+    
+    this.container.find('#studentId-in').click(this, function(event) {
+    	self.markControl.trigger('mark.focus.change');
+    });
+}
+MarkHistory.prototype.orderSearch = function(order) {
+	this.order = order;
+	if(this.sort == "asc"){
+		this.sort = "desc";
+	}else if(this.sort == "desc"){
+		this.sort = "asc";
+	}
+	if (this.container.search.find('#history-isTag').prop("checked")) {
+		this.isTag=true;
+	} else{
+		this.isTag=false;
+	}
+	this.onSearch(this.pageNumber,this.order,this.sort,this.isTag);
 }
 
 MarkHistory.prototype.toggle = function(enable) {
@@ -110,45 +179,77 @@ MarkHistory.prototype.toggle = function(enable) {
         this.markControl.setTask(undefined);
         this.markControl.trigger('mark.sidebar.open');
         this.markControl.trigger('mark.history.open');
-        this.updateHeader();
+        this.updatePage();
         this.container.list.empty();
-        this.container.removeClass('hide');
+        this.container.show();
         this.onSearch();
     } else {
-        this.container.addClass('hide');
+        this.container.hide();
         this.markControl.trigger('mark.sidebar.close');
         this.markControl.trigger('mark.history.close');
     }
 }
 
-MarkHistory.prototype.updateHeader = function() {
-    this.container.header.find('#history-start').html(this.pageSize * (this.pageNumber - 1));
-    this.container.header.find('#history-end').html(this.pageSize * this.pageNumber);
+MarkHistory.prototype.updatePage = function() {
+    this.container.paginator.find('#history-start').html(this.pageSize * (this.pageNumber - 1));
+    this.container.paginator.find('#history-end').html(this.pageSize * this.pageNumber);
 
-    if (this.pageNumber == 1) {
-        this.container.paginator.find('#next-page-label').show();
-        this.container.paginator.find('#next-page-button').hide();
-    } else {
-        this.container.paginator.find('#next-page-label').hide();
-        this.container.paginator.find('#next-page-button').show();
+//    if (this.pageNumber == 1) {
+//        this.container.paginator.find('#next-page-button').hide();
+//    }else{
+//    	this.container.paginator.find('#next-page-button').show();
+//    }
+//    if (this.taskList.length < this.pageSize) {
+//        this.container.paginator.find('#last-page-button').hide();
+//    } else{
+//    	this.container.paginator.find('#last-page-button').show();
+//    }
+    
+}
+MarkHistory.prototype.updateLoading = function() {
+    if (this.loading) {
+        this.container.find('#history-loading').show();
+    }else{
+    	this.container.find('#history-loading').hide();
     }
+}
 
-    if (this.taskList.length < this.pageSize) {
-        this.container.paginator.find('#last-page-label').show();
-        this.container.paginator.find('#last-page-button').hide();
-    } else {
-        this.container.paginator.find('#last-page-label').hide();
-        this.container.paginator.find('#last-page-button').show();
-    }
+MarkHistory.prototype.updateSort = function(order,sort) {
+	this.container.find('#time-sort').removeClass();
+	this.container.find('#studentId-sort').removeClass();
+	this.container.find('#score-sort').removeClass();
+	if(sort == 'desc'){
+		this.container.find('#'+order+'-sort').addClass("down");
+	}else{
+		this.container.find('#'+order+'-sort').addClass("up");
+	}
+	
+	
 }
 
-MarkHistory.prototype.onSearch = function(pageNumber) {
+MarkHistory.prototype.onSearch = function(pageNumber,order,sort,isTag,studentId) {
     if (pageNumber == undefined || pageNumber < 1) {
         pageNumber = 1;
     }
+    if (order == undefined ) {
+    	order = "time";
+    }
+    if (sort == undefined ) {
+    	sort = "desc";
+    }
+    if (isTag == undefined ) {
+    	isTag = false;
+    }
+    if (studentId == undefined || studentId=="") {
+    	studentId = null;
+    }
     this.markControl.getHistory({
         pageNumber: pageNumber,
-        pageSize: this.pageSize
+        pageSize: this.pageSize,
+        order : order,
+        sort : sort,
+        isTag : isTag,
+        studentId :studentId
     });
 }
 
@@ -172,18 +273,27 @@ MarkHistory.prototype.onTaskSelect = function(index) {
 MarkHistory.prototype.toggle_button_dom = '<a href="#">回评</a>';
 
 MarkHistory.prototype.header_dom = '<div class="header">\
-<p class="fl">前<i class="yellow" id="history-start"></i>-前<i class="yellow" id="history-end"></i></p>\
-<a href="#" id="close-history-button"><img src="{staticServer}/mark-new/images/hp-close.png"></a>\
+<p class="fl">回评</p>\
+<a href="#" id="close-history-button"><img src="{staticServer}/mark-new/images/hp-close.png" /></a>\
+</div>';
+
+MarkHistory.prototype.paginator_dom = '<div class="c-page">\
+<a class="back" id="last-page-button" href="#"></a>\
+<a class="next" id="next-page-button" href="#"></a>\
+<span>前<i class="yellow" id="history-start"></i>-前<i class="yellow" id="history-end"></i></span>\
 </div>';
 
-MarkHistory.prototype.paginator_dom = '<div class="m-pagination"><a id="last-page-button" href="#">上一页</a>\
-<i id="last-page-label">上一页</i>\
-<a id="next-page-button" href="#">下一页</a>\
-<i id="next-page-label">下一页</i></div>';
+MarkHistory.prototype.history_search_dom = '<div class="c-scbar cl">\
+<table id="history-search" cellpadding="0" cellspacing="0" width="100%">\
+<tr><td class="sc"><span><input type="text" placeholder="查找试卷" id="studentId-in" maxlength="10"/><em id="studentId-search"></em></span></td>\
+</tr></table></div>';
 
-MarkHistory.prototype.history_list_dom = '<div class="sublist"><table class="table table-hover">\
-<thead><tr><th>编号</th><th>时间</th><th>总分</th></tr></thead>\
-<tbody id="history-list"></tbody></table></div>';
+MarkHistory.prototype.history_list_dom = '<div class="sublist"><div class="c-table">\
+<table class="table table-hover" cellpadding="0" cellspacing="0" width="100%">\
+<thead><tr><th id="studentId-sort-th">编号<em class="up" id="studentId-sort"></th>\
+<th id="time-sort-th">时间<em class="up" id="time-sort"></em></th><th id="score-sort-th">总分<em class="up" id="score-sort"></th></tr></thead>\
+<tbody class="loding" id="history-loading"><tr><td colspan="3"><div><img src="{staticServer}/mark-new/images/loding.gif"/></div><p>正在加载请稍候</p></td></tr></tbody>\
+<tbody id="history-list"></tbody></table></div></div>';
 
 MarkHistory.prototype.history_row_dom = '<tr><td class="history-secret-number"></td>\
 <td class="history-time"></td><td class="history-score"></td></tr>';

stmms-web/src/main/webapp/static/mark-new/js/modules/specialTag.js

@@ -148,7 +148,8 @@ SpecialTag.prototype.container_content_dom = '<div class="content popover-conten
 <p id="problem-list" class="popover-list buttonCss">\
     <a href="#" value="√">√</a>\
     <a href="#" value="X">×</a>\
-    <a href="#" value="乄">乄</a></p>\
+    <a href="#" value="乄">乄</a>\
+	<a href="#" value="___" ><u>下划线</u></a></p>\
 <p><a href="#" id="undo-button" style="margin-left: 20px;">回&nbsp;&nbsp;&nbsp;退</a>\
 <a href="#" id="clear-button">全部清除</a></p></div>';
 

stmms-web/src/main/webapp/static/mark-track/css/style.css

@@ -1232,4 +1232,183 @@ i,em {
 }
 .clock_popover .popover-content {
 	padding: 10px 20px;
+}
+/** 回评*/
+.cl {
+	zoom: 1;
+}
+.cl:after {
+	content: ".";
+	display: block;
+	height: 0;
+	clear: both;
+	visibility: hidden;
+}
+.header {
+	overflow: hidden;
+}
+.mark-sidebar {
+	position: relative;
+	overflow: hidden;
+}
+.c-mn {
+	height: calc(100% - 41px); 
+	height: -webkit-calc(100% - 41px); 
+	height: -moz-calc(100% - 41px);
+	background: #FFF;
+}
+.c-mn nav {
+	background: #F5F4F4;
+}
+.image-content {
+	height: 100%;
+}
+.mark-steps {
+	position: relative;
+	height: 100%;
+	overflow: hidden;
+}
+/*c-scbar*/
+.c-scbar {
+	height: 44px;
+	padding: 8px;
+	overflow: hidden;
+
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-scbar td {
+	line-height: 28px;
+	color: #455B71;
+}
+.c-scbar td.sc span {
+	position: relative;
+	display: inline-table;
+	width: 100%;
+	height: 28px;
+	overflow: hidden;
+	background: #FFF;
+	padding: 0 30px 0 10px;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-scbar input[type="text"] {
+	float: left;
+	width: 100%;
+	height: 28px;
+	overflow: hidden;
+	font-size: 13px;
+	color: #455B71;
+	background: none;
+	border: 0;
+	box-shadow: none;
+	padding: 0;
+	margin: 0;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-scbar td.sc span em {
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 30px;
+	height: 28px;
+	background: url(../images/sc.png) no-repeat 50% 50%;
+}
+.c-scbar input[type="checkbox"] {
+	float: left;
+	margin: 8px 0 0 8px;
+}
+.c-scbar em.disabled {
+	color: #919FAC;
+}
+
+/*c-page*/
+.c-page {
+	z-index: 1;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 100%;
+	height: 42px;
+	overflow: hidden;
+	line-height: 26px;
+	text-align: right;
+	color: #FFF;
+	background: #5D6D7D;
+	padding: 8px 10px;
+
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+.c-page a {
+	float: left;
+	display: block;
+	width: 26px;
+	height: 26px;
+	overflow: hidden;
+	text-indent: -9999em;
+	background: #405468 url(../images/back.png) no-repeat 50% 50%;
+}
+.c-page a.next {
+	margin-left: 5px;
+	background-image: url(../images/next.png);
+}
+.c-page a:hover {
+	background-color: #FFD800;
+}
+/*c-table*/
+.c-table {
+	height: -webkit-calc(100vh - 127px);
+	height: -moz-calc(100vh - 127px);
+	height: calc(100vh - 127px);
+	overflow-y: auto;
+}
+.c-table .table th, .c-table .table td {
+	border-top: none;
+	border-bottom: 1px solid #5d6d7d;
+}
+.c-table .table .up {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	background: url(../images/o_up.gif) no-repeat 100% 50%;
+	margin-left: 5px;
+}
+.c-table .table .down {
+	display: inline-block;
+	width: 8px;
+	height: 8px;
+	background: url(../images/o_down.gif) no-repeat 100% 50%;
+	margin-left: 5px;
+}
+.c-table .table td.tips {
+	background: url(../images/tips.gif) no-repeat 0 0;
+}
+.c-table .table tr.active > td.tips {
+    background-color: #5a7686;
+}
+.c-table .table tr:hover td.tips {
+    background-color: #A2B2BB;
+}
+.c-table .loding {
+	width: 100%;
+}
+.c-table .loding td {
+	width: 100%;
+	height: 100px;
+	vertical-align: middle;
+	text-align: center;
+	border: 0;
+}
+.c-table .loding td p {
+	line-height: 20px;
+	padding-top: 10px;
+}
+.c-table .loding tr:hover td {
+	background: none;
 }

stmms-web/src/main/webapp/static/mark-track/js/mark-control.js

@@ -198,6 +198,8 @@ MarkControl.prototype.initTriggers = function(option) {
     this.on('task.load.finish', this, function(event, context, eventObject) {
         self.container.centerNavbar.find('a:first').trigger('click');
     });
+    this.on('mark.focus.change', this, function(event, context, eventObject) {
+    });
     this.on('task.get.finish', this, function(event, context, eventObject) {
         context.prefetchCallback = undefined;
     });

stmms-web/src/main/webapp/static/mark-track/js/modules/mark-board.js

@@ -21,6 +21,9 @@ function MarkBoard(option) {
 		this.stepCount = undefined;
 		this.render();
 	});
+    this.markControl.on('mark.focus.change', this, function(event, context, eventObject) {
+    	this.onFocusChange();
+    });
 	this.markControl.on('task.load.finish', this, function(event, context, eventObject) {
 		this.initByTask(context.task);
 	});
@@ -81,6 +84,28 @@ function MarkBoard(option) {
             }
         }
     });
+	this.markControl.on('key.up', this, function(e, context, event) {
+        var code = event.keyCode;
+        //console.log('key up:' + code);
+        var self = this;
+        if (this.currentStep != undefined && this.task != undefined) {
+        	if (code == 37) {
+                //← 按键，切换到上一个步骤
+                if (this.currentStep.number > 1) {
+                	self.onStepSelect(this.currentStep.number - 1);
+                    event.preventDefault();
+                    return false;
+                }
+            } else if (code == 39) {
+                // →按键，切换到下一个步骤
+                if (this.currentStep.number < this.stepCount ) {
+                	self.onStepSelect(this.currentStep.number + 1);
+                    event.preventDefault();
+                    return false;
+                }
+            } 
+        }
+    });
 }
 
 MarkBoard.prototype.init = function(forceSpecialTag) {
@@ -445,6 +470,10 @@ MarkBoard.prototype.onTaskSubmit = function() {
 	}
 }
 
+MarkBoard.prototype.onFocusChange = function() {
+	this.currentStep = null;
+}
+
 MarkBoard.prototype.step_board_dom = '<div class="span3 mark-steps"><div class="step-board">\
   <div class="newSubListCss"><span class="fraction" style="">主观分<i class="red" id="subject-score"></i></span>\
   <span class="fraction">总分<i class="red" id="ObjectiveAndSubjectScore"></i></span></div>\