答题卡

src/views/anscard/Index.vue

@@ -18,8 +18,8 @@
 				height: 1140px;
 			}
 			.page_cell{
-				top: 10px;
-				left: 10.3px;
+				// top: 10px;
+				left: 2.5mm;
 				width: 210mm;
 				height: 297mm;
 				position: absolute;
@@ -224,6 +224,12 @@
 		    text-align: center;
 		    line-height: 1;
 	}
+	.stdPoints{
+		position:absolute;background-color:black;
+	}
+	.content_box{
+		top:20mm;left:15mm;width:180mm;height:257mm;position:absolute;
+	}
 </style>
 <template>
   <section class="content">
@@ -236,72 +242,80 @@
 	<div class="content_div">
 		<div class="left_div">
 			<div class="page_div">
-				<div class="page_cell">
-					<div style="top:11mm;left:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
-					<div style="top:281mm;left:6mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
-					<div style="top:11mm;left:199mm;width:5mm;height:5mm;position:absolute;background-color:black;display:block"></div>
+				<div class="page_cell" v-for='(page,idx) in paper_page' :style="{
+					top: 300*idx+'mm'
+				}">
+					<div v-for='item in paper.stdPoints' class="stdPoints" :style="{
+						width: item.w+'mm',
+						height: item.h+'mm',
+						left: item.x+'mm',
+						top: item.y+'mm'
+					}">
+					</div>
 					<!-- //试卷内容 -->
-					<div style="top:20mm;left:15mm;width:180mm;height:257mm;position:absolute;">
-						<textarea id="paperNameTextAreaTem" rows="3" cols="78" style="resize:none;width:100%;color:#000;font-size:20px;font-weight:600;height: 15mm;max-height:21mm;text-align: center;word-wrap: normal;line-height:15mm;overflow:hidden" placeholder="请输入试卷名称"></textarea>
-						<div style="top:18mm;left:2mm;width:95mm;height:60mm;position:absolute;"> 
-						<div style="line-height:6.6mm"> 
-							<span style="font-weight: bold;font-size: 4mm;">姓名：</span>
-							<span style="width:30mm;border-bottom: solid 1px black;display:inline-block">&nbsp;</span>
-							<span style="font-weight: bold;font-size: 4mm;">班级：</span>
-							<span style="width:30mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span>
-							<br> 
-							<span style="font-weight: bold;font-size: 4mm;">考场号：</span>
-							<span style="width:25mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span> 
-							<span style="font-weight: bold;font-size: 4mm;">座位号：</span>
-							<span style="width:30mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span> 
-						</div> 
-						<div style="border:solid 1px black;margin-top: 2mm;padding:1mm;font-size: 3mm;line-height:4.5mm;">
-							<p style="text-align: center;font-weight: bold;font-size: 4mm;line-height: 4mm;">注意事项</p>
-							<p> 1.答题前，考生先将自己的姓名、班级、准考证号填写清楚。
-								<br> 2.客观题答题，必须使用2B铅笔填涂，修改时，要用橡皮擦干净。  
-								<br> 3.主观题答题，必须使用0.5毫米的黑色墨水签字笔书写，要求字体工整、笔迹清晰。作图时，必须用2B铅笔，并描浓。
-								<br> 4.必须在题号所对应的答题区域内作答，超出答题区域书写无效。 
-								<br>5.保持答卷清洁、完整。严禁折叠，严禁在答题卷上做任何标记，严禁使用涂改液、胶带纸和修正带。<br>  
-							</p>
-							</div> <div style="border:solid 1px black;margin-top:2mm;line-height: 7mm">  <table style="width:100%;height:100%;"><tbody><tr> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">正确填涂</span></td><td width="25%"> <div style="border: solid 1px black;width:4mm;height: 2mm;background-color: black;">&nbsp;</div> </td> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">缺考标记</span>  </td> <td width="25%">   
-						<div style="border:1px solid #000000;width:4mm;height: 2mm;"></div> </td> </tr></tbody></table></div></div>
-						
-						<div style="top:23mm;left:107mm;width:65mm;height:60mm;position:absolute;font-size:3mm;">
-							<table v-if='data.khType == 2' cellpadding="0" cellspacing="0" style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm">
-								<tr height='6mm'>
-									<td :colspan="data.khLength" style="width:30mm;border:solid 1px black;border-collapse:collapse;text-align:center;">准考证号</td>
-								</tr>
-								<tr height='6mm'>
-									<th v-for='i in data.khLength' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
-								</tr>
-								<tr>
-									<td v-for='i in data.khLength' align="center" style="border:solid 1px #000000;border-collapse:collapse;padding-top: 1mm;border-left-color: #000000;border-bottom-color: #000000">
-										<div v-for='j in 10' style="border:1px solid #000000;width:4mm;height: 3.5mm;line-height: 1.2;text-align: center;margin: 6px 0">
-											<span style="margin-top: -1.5px;display:block ">{{j-1}}</span>
-										</div>
-									</td>
-								</tr>
-							</table>
-						
-							<div v-else>
-								<table style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm" cellpadding="0" cellspacing="0">
-									<tbody>
-										<tr height="6mm"><td colspan="8" style="width:30mm;border-collapse:collapse;text-align:left;">准考证号:</td></tr>
-										<tr height="6mm">
-											<th v-for='i in 8' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
-										</tr>
-									</tbody>
+					
+					<div class="content_box">
+						<template v-if='page.pno == 1'>
+							<textarea id="paperNameTextAreaTem" rows="3" cols="78" style="resize:none;width:100%;color:#000;font-size:20px;font-weight:600;height: 15mm;max-height:21mm;text-align: center;word-wrap: normal;line-height:15mm;overflow:hidden" placeholder="请输入试卷名称"></textarea>
+							<div style="top:18mm;left:2mm;width:95mm;height:60mm;position:absolute;"> 
+								<div style="line-height:6.6mm"> 
+									<span style="font-weight: bold;font-size: 4mm;">姓名：</span>
+									<span style="width:30mm;border-bottom: solid 1px black;display:inline-block">&nbsp;</span>
+									<span style="font-weight: bold;font-size: 4mm;">班级：</span>
+									<span style="width:30mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span>
+									<br> 
+									<span style="font-weight: bold;font-size: 4mm;">考场号：</span>
+									<span style="width:25mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span> 
+									<span style="font-weight: bold;font-size: 4mm;">座位号：</span>
+									<span style="width:30mm;border-bottom: solid 1px black;  display: inline-block">&nbsp;</span> 
+								</div> 
+								<div style="border:solid 1px black;margin-top: 2mm;padding:1mm;font-size: 3mm;line-height:4.5mm;">
+									<p style="text-align: center;font-weight: bold;font-size: 4mm;line-height: 4mm;">注意事项</p>
+									<p> 1.答题前，考生先将自己的姓名、班级、准考证号填写清楚。
+										<br> 2.客观题答题，必须使用2B铅笔填涂，修改时，要用橡皮擦干净。  
+										<br> 3.主观题答题，必须使用0.5毫米的黑色墨水签字笔书写，要求字体工整、笔迹清晰。作图时，必须用2B铅笔，并描浓。
+										<br> 4.必须在题号所对应的答题区域内作答，超出答题区域书写无效。 
+										<br>5.保持答卷清洁、完整。严禁折叠，严禁在答题卷上做任何标记，严禁使用涂改液、胶带纸和修正带。<br>  
+									</p>
+									</div> <div style="border:solid 1px black;margin-top:2mm;line-height: 7mm">  <table style="width:100%;height:100%;"><tbody><tr> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">正确填涂</span></td><td width="25%"> <div style="border: solid 1px black;width:4mm;height: 2mm;background-color: black;">&nbsp;</div> </td> <td width="30%"> <span style="font-size: 3mm;font-weight: bold;">缺考标记</span>  </td> <td width="25%">   
+								<div style="border:1px solid #000000;width:4mm;height: 2mm;"></div> </td> </tr></tbody></table></div></div>
+								
+								<div style="top:23mm;left:107mm;width:65mm;height:60mm;position:absolute;font-size:3mm;">
+								<table v-if='data.khType == 2' cellpadding="0" cellspacing="0" style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm">
+									<tr height='6mm'>
+										<td :colspan="data.khLength" style="width:30mm;border:solid 1px black;border-collapse:collapse;text-align:center;">准考证号</td>
+									</tr>
+									<tr height='6mm'>
+										<th v-for='i in data.khLength' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
+									</tr>
+									<tr>
+										<td v-for='i in data.khLength' align="center" style="border:solid 1px #000000;border-collapse:collapse;padding-top: 1mm;border-left-color: #000000;border-bottom-color: #000000">
+											<div v-for='j in 10' style="border:1px solid #000000;width:4mm;height: 3.5mm;line-height: 1.2;text-align: center;margin: 6px 0">
+												<span style="margin-top: -1.5px;display:block ">{{j-1}}</span>
+											</div>
+										</td>
+									</tr>
 								</table>
-								<div style="top:25mm;left:0mm;width:65mm;height:27mm;position:absolute;">
-									<div style="top:0mm;left:0mm;width:65mm;height:27mm;position:absolute;line-height:15mm;position:absolute;border: dashed 1px #000000;text-align: center;font-size: 6mm;color:grey;">贴条形码区<p>
-									<span style="font-size: 2mm;line-height: 3mm">（正面朝上，切勿贴出虚线方框）</span>
-									</p></div>
+							
+								<div v-else>
+									<table style="border-collapse:collapse;text-align: center;width:100%;height:100%;line-height: 5mm" cellpadding="0" cellspacing="0">
+										<tbody>
+											<tr height="6mm"><td colspan="8" style="width:30mm;border-collapse:collapse;text-align:left;">准考证号:</td></tr>
+											<tr height="6mm">
+												<th v-for='i in 8' style="border:solid 1px #000000;border-collapse:collapse;">&nbsp;</th>
+											</tr>
+										</tbody>
+									</table>
+									<div style="top:25mm;left:0mm;width:65mm;height:27mm;position:absolute;">
+										<div style="top:0mm;left:0mm;width:65mm;height:27mm;position:absolute;line-height:15mm;position:absolute;border: dashed 1px #000000;text-align: center;font-size: 6mm;color:grey;">贴条形码区<p>
+										<span style="font-size: 2mm;line-height: 3mm">（正面朝上，切勿贴出虚线方框）</span>
+										</p></div>
+									</div>
 								</div>
 							</div>
-						</div>
-				
+						</template>
 						<!-- 选择题 -->
-						<template v-if='paper.obj.list.length>0'>
+						<template v-if='paper.obj.list.length>0 && page.pno == 1'>
 						<!-- {{paper.obj}} -->
 							<div class="sub" :style="{
 									width: paper.objAnsPoints[0].w+'mm',
@@ -339,7 +353,7 @@
 						</template>
 						<!-- 填空题 -->
 						<template v-if='paper.sub.length>0'>
-							<div class="sub" v-for='(item,i) in paper.stdSujQnoPoints' :style="{
+							<div class="sub" v-for='(item,i) in paper.stdSujQnoPoints' v-if='item.pno == page.pno' :style="{
 								width: item.w+'mm',
 								height: item.h+'mm',
 								left: item.x+'mm',
@@ -401,7 +415,7 @@
 					
 					<!-- 页码 -->
 					<div style="top:281mm;left:15mm;position: absolute;">
-						<div v-for='item in pages' :class="item==1?'act':''" style="border:1px solid #000000;width:4mm;height: 2.5mm;line-height: 1;text-align: center;margin: 6px 6px;display:inline-block">
+						<div v-for='item in page.bin' :class="item==1?'act':''" style="border:1px solid #000000;width:4mm;height: 2.5mm;line-height: 1;text-align: center;margin: 6px 6px;display:inline-block">
 							
 						</div>
 					</div>
@@ -557,7 +571,7 @@ export default {
       open: false,
       doctorList: [],
       rules: {},
-	  pages:1,
+	  cur_page:1,
 	  size:[180,118],
 	  data:{
 		  layout:1,
@@ -583,6 +597,9 @@ export default {
 	  list:[
 		  
 	  ],
+	  paper_page:[
+		  {pno:1,bin:'0001'}
+	  ],
 	  paper:{
 		  obj:{
 			  title:'客观题',
@@ -594,6 +611,10 @@ export default {
 		  ],
 		  stdSujQnoPoints:[
 			 
+		  ],
+		  stdPoints:[
+			  {x:6,y:11,w:5,h:5},
+			  {x:6,y:281,w:5,h:5},
 		  ]
 	  },
 	  dft:{
@@ -606,6 +627,12 @@ export default {
 	};
   },
   watch:{
+	  "paper.stdSujQnoPoints":{
+		  handler(value){
+			  
+		  },
+		  deep:true
+	  },
 	 "paper.objAnsPoints":{
 		 handler(newvalue){
 			 var y
@@ -733,7 +760,8 @@ export default {
 						x:sub[i].x,
 						y:sub[i].y+sub[i].h+8,
 						w:sub[i].w,
-						h:h
+						h:h,
+						pno:this.cur_page
 					})
 				}
 				else if(obj.length>0 ){
@@ -742,11 +770,13 @@ export default {
 						x:obj[i].x,
 						y:obj[i].y+obj[i].h+8,
 						w:obj[i].w,
-						h:h
+						h:h,
+						pno:this.cur_page
 					})
 				}else{
 					let dft={...this.dft}
 					dft.h=h
+					dft.pno=this.cur_page
 					this.paper.stdSujQnoPoints.push(dft)
 				}
 				
@@ -763,7 +793,6 @@ export default {
 					
 				})
 				this.list=[]
-				console.log(this.paper)
 				break;
 			case 3: //解答题
 				var _list=this.list,new_list=[]
@@ -786,7 +815,8 @@ export default {
 						x:sub[i].x,
 						y:sub[i].y+sub[i].h+8,
 						w:sub[i].w,
-						h:50
+						h:50,
+						pno:this.cur_page
 					})
 				}
 				else if(obj.length>0 ){
@@ -795,11 +825,13 @@ export default {
 						x:obj[i].x,
 						y:obj[i].y+obj[i].h+8,
 						w:obj[i].w,
-						h:50
+						h:50,
+						pno:this.cur_page
 					})
 				}else{
 					let dft={...this.dft}
 					dft.h=50
+					dft.pno=this.cur_page
 					this.paper.stdSujQnoPoints.push(dft)
 				}
 				
@@ -811,7 +843,8 @@ export default {
 							x:sub[i].x,
 							y:sub[i].y+sub[i].h+x,
 							w:sub[i].w,
-							h:50
+							h:50,
+							pno:this.cur_page
 						})
 					}
 					this.paper.sub.push({
@@ -831,7 +864,8 @@ export default {
 						x:sub[i].x,
 						y:sub[i].y+sub[i].h+8,
 						w:sub[i].w,
-						h:50
+						h:50,
+						pno:this.cur_page
 					})
 				}
 				else if(obj.length>0 ){
@@ -840,11 +874,13 @@ export default {
 						x:obj[i].x,
 						y:obj[i].y+obj[i].h+8,
 						w:obj[i].w,
-						h:50
+						h:50,
+						pno:this.cur_page
 					})
 				}else{
 					let dft={...this.dft}
 					dft.h=50
+					dft.pno=this.cur_page
 					this.paper.stdSujQnoPoints.push(dft)
 				}
 				let start=this.addForm.start,end=Number(start)+Number(this.addForm.chooseNum)-1
@@ -874,7 +910,8 @@ export default {
 						x:sub[i].x,
 						y:sub[i].y+sub[i].h+8,
 						w:sub[i].w,
-						h:height
+						h:height,
+						pno:this.cur_page
 					})
 				}
 				else if(obj.length>0 ){
@@ -883,11 +920,13 @@ export default {
 						x:obj[i].x,
 						y:obj[i].y+obj[i].h+8,
 						w:obj[i].w,
-						h:height
+						h:height,
+						pno:this.cur_page
 					})
 				}else{
 					let dft={...this.dft}
 					dft.h=height
+					dft.pno=this.cur_page
 					this.paper.stdSujQnoPoints.push(dft)
 				}
 				
@@ -909,7 +948,8 @@ export default {
 						x:sub[i].x,
 						y:sub[i].y+sub[i].h+8,
 						w:sub[i].w,
-						h:height
+						h:height,
+						pno:this.cur_page
 					})
 				}
 				else if(obj.length>0 ){
@@ -918,11 +958,13 @@ export default {
 						x:obj[i].x,
 						y:obj[i].y+obj[i].h+8,
 						w:obj[i].w,
-						h:height
+						h:height,
+						pno:this.cur_page
 					})
 				}else{
 					let dft={...this.dft}
 					dft.h=height
+					dft.pno=this.cur_page
 					this.paper.stdSujQnoPoints.push(dft)
 				}
 				
@@ -939,8 +981,41 @@ export default {
 		this.addForm.start=Number(this.addForm.end)+1
 		this.addForm.end=''
 		this.open=false
+		this.changpage()
 		
 	},
+	changpage(){
+		var value=this.paper.stdSujQnoPoints
+		var i=value.length
+		if(i>0){
+						  let down_point=this.paper.stdPoints[1]
+						  let s=-1
+						  for(let i=0;i<value.length;i++){
+							  console.log(value[i].y,233)
+							  if((value[i].y+value[i].h) >= (down_point.y-20)){
+								    console.log(i)
+							  		s=i
+							  		this.cur_page++
+							  		this.paper_page.push({
+							  			pno:this.cur_page,
+							  			bin:this.decToBin4(this.cur_page).split('')
+							  		})
+							  		break
+							  }
+						  }
+						  if(s<0)return
+						  value.forEach((item,index)=>{
+							  if(index == s){
+								  item.pno++
+								  item.y=5
+							  }else if(index > s){
+								  item.pno++
+								  item.y=value[index-1].y+value[index-1].h+1
+							  }
+						  })
+						  console.log(value)
+		}
+	},
 	calcXY(){
 		function sum(arr,start,end) {
 			arr=JSON.parse(JSON.stringify(arr))
@@ -1002,7 +1077,6 @@ export default {
   
   },
   created() {
-	this.pages=this.decToBin4(this.pages).split('')
 
   },
 };