评卷图片设置，增加选择整图功能，保存配置中w和h均为0

stmms-web/src/main/webapp/WEB-INF/views/modules/mark/picConfig.jsp

@@ -14,14 +14,15 @@
 <div class="c-box" style="display:none" id="pic-config-div">
     <div class="cont-z">
         <div class="c-top">
-            <!--
             <div class="c-icon">
+                <div class="all" id="preview-image-button">选择整图</div>
+                <!--
                 <div class="iviewer_zoom_in iviewer_common iviewer_button"></div>
                 <div class="iviewer_zoom_out iviewer_common iviewer_button"></div>
                 <div class="iviewer_zoom_zero iviewer_common iviewer_button"></div>
                 <div class="iviewer_zoom_fit iviewer_common iviewer_button"></div>
+                -->
             </div>
-            -->
             <ul class="c-tab cl" id="pic-switch" data-index="">
             </ul>
         </div>
@@ -91,6 +92,9 @@ $(document).ready(function(e) {
        // $('#pic-config-div').hide();
     	window.close(); 
     });
+    $('#preview-image-button').click(function(){
+        addPreviewImage();
+    });
     $('#pic-content').Jcrop({
         //boxWidth: $(window).width()*0.65,
         boxHeight: $(window).height()-90,
@@ -182,14 +186,31 @@ function addPreview(c) {
     }
 }
 
+function addPreviewImage() {
+    var index = $('#pic-switch').attr('data-index');
+    if(index==''){
+        return;
+    }
+    var config = {
+        i: parseInt(index),
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0
+    }
+    addPreviewByConfig(config);
+}
+
 function addPreviewByConfig(config){
     var container = $('#pic-config-preview');
-    jcrop_canvas.width=config.w;
-    jcrop_canvas.height=config.h;
-    
-    if(config.w==0||config.h==0){
-    	return ;
+    if(config.w==0 && config.h==0){
+        jcrop_canvas.width=image_array[config.i-1].width;
+        jcrop_canvas.height=image_array[config.i-1].height;
+    }else{
+        jcrop_canvas.width=config.w;
+        jcrop_canvas.height=config.h;
     }
+    
     jcrop_canvas.getContext("2d").drawImage(image_array[config.i-1], config.x, config.y, config.w, config.h,0,0,config.w, config.h);
     
     var dom = $('<li><span class="order">'+config.i+'</span><div class="m"><img src=""/></div><span class="close">&times;</span></li>').appendTo(container);

stmms-web/src/main/webapp/static/pic-config/css/style.css

@@ -1,23 +1,27 @@
 /*======common======*/
 * {
-	font-family: "微软雅黑";
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	outline: none;
-	-webkit-tap-highlight-color: transparent;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-html, body {
-	height: 100%;
-	background: #F2F3F4;
-	color: #011627;
+    font-family: "微软雅黑";
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    background: #F2F3F4;
+    color: #011627;
 }
+
 a {
-	color: #FFF;
-	text-decoration: none;
+    color: #FFF;
+    text-decoration: none;
 }
+
 input {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -30,296 +34,350 @@ input {
     background-color: #F5F7F8;
     background-image: none;
     border: 1px solid #E0E2E4;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
     border-radius: 6px;
     -webkit-transition: all .3s;
     transition: all .3s;
-	text-align:center;
+    text-align: center;
 }
+
 input[type="text"] {
-	background-color: #F5F7F8;
+    background-color: #F5F7F8;
     border: 1px solid #E0E2E4;
     -webkit-transition: border linear .2s, box-shadow linear .2s;
     -moz-transition: border linear .2s, box-shadow linear .2s;
     -o-transition: border linear .2s, box-shadow linear .2s;
     transition: border linear .2s, box-shadow linear .2s;
 }
+
 input[type="text"]:focus {
-	background: #FFF;
-	border-color: rgba(69,152,255,0.8);
-	outline: 0;
-	-webkit-box-shadow: 0 0 8px rgba(125,168,237,.6);
-	-moz-box-shadow: 0 0 8px rgba(125,168,237,.6);
-	box-shadow: 0 0 8px rgba(125,168,237,.6);
+    background: #FFF;
+    border-color: rgba(69, 152, 255, 0.8);
+    outline: 0;
+    -webkit-box-shadow: 0 0 8px rgba(125, 168, 237, .6);
+    -moz-box-shadow: 0 0 8px rgba(125, 168, 237, .6);
+    box-shadow: 0 0 8px rgba(125, 168, 237, .6);
 }
+
 .ellipsis {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
 }
+
 .cl:after {
-	content: ".";
-	display: block;
-	height: 0;
-	clear: both;
-	visibility: hidden;
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
 }
+
 .cl {
-	zoom: 1;
+    zoom: 1;
 }
+
 /*c-box*/
 .c-box {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	background: #FFF;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: #FFF;
     display: -webkit-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }
+
 .c-box .cont-z {
-	position: relative;
-	width: 70%;
-	height: 100%;
-	background: #FFF;
-	overflow: hidden;
+    position: relative;
+    width: 70%;
+    height: 100%;
+    background: #FFF;
+    overflow: hidden;
 }
+
 .c-box .cont-y {
-	position: relative;
-	width: 30%;
-	height: 100%;
-	background: #EEE;
-	-moz-box-shadow: 0 0 30px rgba(0,0,0,.3);
-	-webkit-box-shadow: 0 0 30px rgba(0,0,0,.3);
-	box-shadow: 0 0 30px rgba(0,0,0,.3);
+    position: relative;
+    width: 30%;
+    height: 100%;
+    background: #EEE;
+    -moz-box-shadow: 0 0 30px rgba(0, 0, 0, .3);
+    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .3);
+    box-shadow: 0 0 30px rgba(0, 0, 0, .3);
 }
+
 .c-box .c-bottom {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 70px;
-	overflow: hidden;
-	background: #FFF;
-	-moz-box-shadow: 0 -5px 10px rgba(0,0,0,.05);
-	-webkit-box-shadow: 0 -5px 10px rgba(0,0,0,.05);
-	box-shadow: 0 -5px 10px rgba(0,0,0,.05);
-	padding: 15px 20px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    overflow: hidden;
+    background: #FFF;
+    -moz-box-shadow: 0 -5px 10px rgba(0, 0, 0, .05);
+    -webkit-box-shadow: 0 -5px 10px rgba(0, 0, 0, .05);
+    box-shadow: 0 -5px 10px rgba(0, 0, 0, .05);
+    padding: 15px 20px;
 }
+
 .c-box .c-mn {
-	width: 100%;
-	height: -moz-calc(100% - 70px);
-	height: -webkit-calc(100% - 70px);
-	height: calc(100% - 70px);
-	overflow: hidden;
+    width: 100%;
+    height: -moz-calc(100% - 70px);
+    height: -webkit-calc(100% - 70px);
+    height: calc(100% - 70px);
+    overflow: hidden;
 }
+
 /*imgcont*/
 .imgcont {
-	width: 100%;
-	height: 100%;
-	overflow: scroll;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
 }
+
 .imgcont::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
+    width: 10px;
+    height: 10px;
 }
+
 .imgcont::-webkit-scrollbar-thumb {
-	background: #C1C1C1;
+    background: #C1C1C1;
 }
+
 .imgcont::-webkit-scrollbar-track {
-	border-radius: 0;
-	background: transparent;
+    border-radius: 0;
+    background: transparent;
 }
+
 /*c-top*/
 .c-top {
-	width: 100%;
-	height: 70px;
-	background: #EEE;
-	padding: 18px 200px 18px 30px;
+    width: 100%;
+    height: 70px;
+    background: #EEE;
+    padding: 18px 200px 18px 30px;
 }
+
 /*c-icon*/
 .c-icon {
-	position: absolute;
-	top: 15px;
-	right: 30px;
-	height: 34px;
-	overflow: hidden;
+    position: absolute;
+    top: 15px;
+    right: 30px;
+    height: 34px;
+    overflow: hidden;
 }
+
 .c-icon div {
-	display: inline-block;
-	width: 34px; 
-	height: 34px;
-	overflow: hidden;
-	background: url(../img/zoom_in.png) no-repeat 0 0;
-	border: 2px solid rgba(108,128,147,.85);
-	-moz-border-radius: 10px;
-	-webkit-border-radius: 10px;
-	border-radius: 10px;
-	cursor: pointer;
-	margin-left: 5px;
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    overflow: hidden;
+    background: url(../img/zoom_in.png) no-repeat 0 0;
+    border: 2px solid rgba(108, 128, 147, .85);
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    cursor: pointer;
+    margin-left: 5px;
+}
+
+.c-icon div.all {
+    width: 100px;
+    line-height: 30px;
+    color: #5D6D7D;
+    text-align: center;
+    background: none;
 }
+
 .c-icon div.iviewer_zoom_out {
-	background: url(../img/zoom_out.png) no-repeat 0 0;
+    background: url(../img/zoom_out.png) no-repeat 0 0;
 }
+
 .c-icon div.iviewer_zoom_zero {
-	background: url(../img/zoom_zero.png) no-repeat 0 0;
+    background: url(../img/zoom_zero.png) no-repeat 0 0;
 }
+
 .c-icon div.iviewer_zoom_fit {
-	background: url(../img/zoom_fit.png) no-repeat 0 0;
+    background: url(../img/zoom_fit.png) no-repeat 0 0;
 }
+
 .c-icon div:hover {
-	background-color: rgba(108,128,147,.85);
-	background-position: 0 -30px;
+    background-color: rgba(108, 128, 147, .85);
+    background-position: 0 -30px;
+    color: #FFF;
 }
+
 /*c-tab*/
 .c-tab {
-	height: 34px;
-	overflow: hidden;
+    height: 34px;
+    overflow: hidden;
 }
+
 .c-tab li {
-	display: inline;
+    display: inline;
 }
+
 .c-tab li a {
-	display: inline-block;
-	width: 34px;
-	height: 34px;
-	line-height: 32px;
-	overflow: hidden;
-	border: 2px solid rgba(108,128,147,.85);
-	text-align: center;
-	font-family: "Times New Roman", Times, serif;
-	font-size: 14px;
-	font-weight: bold;
-	color: #5D6D7D;
-	-moz-border-radius: 10px;
-	-webkit-border-radius: 10px;
-	border-radius: 10px;
-	margin-right:5px;
-}
-.c-tab li.on a , .c-tab li a:hover {
-	background-color: rgba(108,128,147,.85);
-	color: #FFF;
+    display: inline-block;
+    width: 34px;
+    height: 34px;
+    line-height: 32px;
+    overflow: hidden;
+    border: 2px solid rgba(108, 128, 147, .85);
+    text-align: center;
+    font-family: "Times New Roman", Times, serif;
+    font-size: 14px;
+    font-weight: bold;
+    color: #5D6D7D;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    margin-right: 5px;
 }
+
+.c-tab li.on a,
+.c-tab li a:hover {
+    background-color: rgba(108, 128, 147, .85);
+    color: #FFF;
+}
+
 /*c-btn*/
 .c-btn {
-	float: left;
-	width: calc((100% - 30px) / 3 );
-	height: 40px;
-	line-height: 36px;
-	overflow: hidden;
-	text-align: center;
-	font-size: 15px;
-	font-weight: 700;
-	color: #8796A5;
-	border: 2px solid #E0E2E4;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-	border-radius: 6px;
+    float: left;
+    width: calc((100% - 30px) / 3);
+    height: 40px;
+    line-height: 36px;
+    overflow: hidden;
+    text-align: center;
+    font-size: 15px;
+    font-weight: 700;
+    color: #8796A5;
+    border: 2px solid #E0E2E4;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
 }
+
 .c-btn:hover {
-	border-color: #6C8093;
+    border-color: #6C8093;
 }
+
 .c-btn.s {
-	border-color: #5D6D7D;
-	background: #5D6D7D;
-	color: #FFF;
-	margin: 0 15px;
+    border-color: #5D6D7D;
+    background: #5D6D7D;
+    color: #FFF;
+    margin: 0 15px;
 }
+
 .c-btn.s:hover {
-	background: #6C8093;
+    background: #6C8093;
 }
+
 .c-btn.close {
-	border-color: rgba(255,51,51,1);
-	background: rgba(255,51,51,1);
-	color: #FFF;
+    border-color: rgba(255, 51, 51, 1);
+    background: rgba(255, 51, 51, 1);
+    color: #FFF;
 }
+
 .c-btn.close:hover {
-	background: rgba(255,51,51,.7);
+    background: rgba(255, 51, 51, .7);
 }
 
 /*c-preview*/
 .c-preview {
-	width: 100%;
-	height: 100%;
-	padding: 10px 20px;
-	overflow-y: scroll;
+    width: 100%;
+    height: 100%;
+    padding: 10px 20px;
+    overflow-y: scroll;
 }
+
 .c-preview::-webkit-scrollbar {
-	width: 10px;
-	height: 10px;
+    width: 10px;
+    height: 10px;
 }
+
 .c-preview::-webkit-scrollbar-thumb {
-	background: #C1C1C1;
+    background: #C1C1C1;
 }
+
 .c-preview::-webkit-scrollbar-track {
-	border-radius: 0;
-	background: transparent;
+    border-radius: 0;
+    background: transparent;
 }
+
 .c-preview li {
-	position: relative;
-	width: 100%;
-	overflow: hidden;
-	background: #FFF;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-	border-radius: 6px;
-	padding: 10px;
-	margin-top: 10px;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    background: #FFF;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    padding: 10px;
+    margin-top: 10px;
 }
+
 .c-preview li:nth-child(1) {
-	margin-top: 0;
+    margin-top: 0;
 }
-.c-preview li div , .c-preview li div img {
-	width: 100%;
+
+.c-preview li div,
+.c-preview li div img {
+    width: 100%;
 }
+
 .c-preview li span {
-	position: absolute;
-	display: block;
-	width: 30px;
-	height: 30px;
-	overflow: hidden;
+    position: absolute;
+    display: block;
+    width: 30px;
+    height: 30px;
+    overflow: hidden;
 }
+
 .c-preview li span.order {
-	left: 10px;
-	top: 10px;
-	width: 24px;
-	height: 24px;
-	line-height: 24px;
-	border: 1px solid #5D6D7D;
-	-moz-border-radius: 20px;
-	-webkit-border-radius: 20px;
-	border-radius: 20px;
-	text-align: center;
-	font-family: "Times New Roman", Times, serif;
-	font-size: 12px;
-	font-weight: bold;
-	color: #5D6D7D;
+    left: 10px;
+    top: 10px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    border: 1px solid #5D6D7D;
+    -moz-border-radius: 20px;
+    -webkit-border-radius: 20px;
+    border-radius: 20px;
+    text-align: center;
+    font-family: "Times New Roman", Times, serif;
+    font-size: 12px;
+    font-weight: bold;
+    color: #5D6D7D;
 }
+
 .c-preview li span.close {
-	right: 0;
-	top: 0;
-	background: rgba(0,0,0,.3);
-	line-height: 30px;
-	text-align: center;
-	font-size: 14px;
-	font-weight: bold;
-	color: #FFF;
-	cursor: pointer;
+    right: 0;
+    top: 0;
+    background: rgba(0, 0, 0, .3);
+    line-height: 30px;
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    color: #FFF;
+    cursor: pointer;
 }
+
 .c-preview li:hover {
-	-moz-box-shadow: 0 0 20px rgba(0,0,0,.1);
-	-webkit-box-shadow: 0 0 20px rgba(0,0,0,.1);
-	box-shadow: 0 0 20px rgba(0,0,0,.1);
+    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .1);
+    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
 }
+
 .c-preview li:hover span.order {
-	background-color: rgba(108,128,147,.85);
-	color: #FFF;
+    background-color: rgba(108, 128, 147, .85);
+    color: #FFF;
 }
+
 .c-preview li:hover span.close {
-	background:rgba(255,51,51,.7);
-	
+    background: rgba(255, 51, 51, .7);
+
 }