答题卡

src/views/anscard/Index.vue

@@ -1,5 +1,175 @@
 <style lang="scss">
-
+	.content{
+		background-color: #f5eedb !important;
+	}
+	.content_div{
+		display: flex;
+		overflow: auto;
+		min-width: 1200px;
+		height: calc(100vh - 170px);
+		overflow: auto;
+		.left_div{
+			width: 820px;
+			background-color: gray;
+			overflow: auto;
+			height: 100%;
+			position: relative;
+			.page_div{
+				height: 1140px;
+			}
+			.page_cell{
+				top: 10px;
+				left: 10.3px;
+				width: 210mm;
+				height: 297mm;
+				position: absolute;
+				background-color: #fff;
+				border: 1px solid #000;
+				*{
+					box-sizing: content-box;
+					font-family: 宋体, SimSun, 'STSong';
+				}
+				.obj{
+					 position:absolute;border:solid 1px black;
+				}
+				.item{
+					position: absolute;
+				}
+				.tm_id{
+					width: 8mm;
+					text-align: center;
+					font-size: 3mm;
+					height: 2.5mm;
+					position: absolute;
+				}
+				.opLabel{
+					padding:0mm 2mm;font-weight:bold; font-size:3mm;line-height:5mm;width:178mm;
+				}
+			}
+			.act{
+				background-color: #000;
+			}
+		}
+		.right_div{
+			margin-left: 10px;
+			width: 300px;
+			height: 100%;
+			overflow: auto;
+			background-color: #fff;
+			border-left: 1px solid #dadada;
+			border-right: 1px solid #dadada;
+			h3{
+				background-color: #f3f3f3;
+				border-top: 1px solid #dadada;
+				border-bottom: 1px solid #dadada;
+				font-size: 16px;
+				font-weight: normal;
+				padding: 10px;
+			}
+			.dtk_bs_list{
+				padding: 10px;
+				li{
+					display: inline-block;
+					width: 37px;
+					height: 37px;
+					margin: 0 7px;
+					position: relative;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+					}
+					b{
+						position: absolute;
+						width: 100%;
+						font-size: 12px;
+						top: 100%;
+						text-align: center;
+						left: 0;
+						padding: 5px 0;
+					}
+					&:hover{
+						border: 2px solid #18a368;
+						&::after{
+							content: '';
+							width: 18px;
+							height: 18px;
+							background-image: url(../../assets/correct_on.png);
+							position: absolute;
+							top: 0;
+							bottom: 0;
+							left: 0;
+							right: 0;
+							margin: auto;
+						}
+					}
+				}
+				.te_active{
+					border: 2px solid #18a368;
+					&::after{
+						content: '';
+						width: 18px;
+						height: 18px;
+						background-image: url(../../assets/correct_on.png);
+						position: absolute;
+						top: 0;
+						bottom: 0;
+						left: 0;
+						right: 0;
+						margin: auto;
+					}
+				}
+			}
+			.tips{
+				font-size: 12px;
+				color: #999;
+				padding: 10px;
+			}
+			.btns{
+				button{
+					margin: 5px 5px 5px 0;
+					width: 84px;
+					text-align: center;
+				}
+			}
+		}
+	}
+	.tm_list{
+		height: 200px;
+		overflow: auto;
+		border: 1px solid #d9d9d9;
+		margin-bottom: 10px; 
+		li{
+			list-style: none;
+			border-bottom: 1px solid #d9d9d9;
+			padding: 5px 10px;
+			height: 40px;
+			
+			span{
+				display: inline-block;
+				line-height: 30px;
+			}
+			div{
+				float: right;
+				font-weight: 600;
+				input{
+					width: 50px;
+					height: 30px;
+					margin-right: 5px;
+					text-align: center;
+					outline: none;
+					font-size: 16px;
+				}
+			}
+		}
+	}
+	.options{
+			position: absolute;
+		    font-size: 2.5mm;
+		    border: 1px solid rgb(0, 0, 0);
+		    text-align: center;
+		    line-height: 1;
+	}
 </style>
 <template>
   <section class="content">
@@ -9,151 +179,233 @@
             <el-breadcrumb-item>答题卡制作</el-breadcrumb-item>
         </el-breadcrumb>
     </div>
-    <el-form :model="queryParams" label-width="80px" class="filter-form" :inine="true">
-      <el-row>
-        <el-col :span="4">
-          <el-form-item label="学校">
-            <el-select size="mini" v-model="queryParams.school_id">
-              <el-option label="人大附中" value="人大附中">人大附中</el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="4">
-          <el-form-item label="年级" v-model="queryParams.grade_id">
-            <el-select size="mini">
-              <el-option label="高三一班" value="高三一班">高三一班</el-option>
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item label-width="10" style="margin-left: 10px">
-            <el-button type="primary" @click="getData" size="mini"
-              >筛选</el-button
-            >
-            <el-button
-              type="primary"
-              plain
-              icon="el-icon-plus"
-              size="mini"
-              @click="handleAdd"
-              >新增</el-button
-            >
-          </el-form-item>
-        </el-col>
-      </el-row>
-    </el-form>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      style="width: 100%; margin-top: 10px"
-      height="50vh"
-    >
-      <el-table-column align="center" prop="name" label="班级" />
-      <el-table-column align="center" prop="phone" label="年级" />
-      <el-table-column label="教师">
-        <template slot-scope="scope">
-          <el-link type="primary">查看</el-link>
-        </template>
-      </el-table-column>
-      <el-table-column label="学生">
-        <template slot-scope="scope">
-          <el-link type="primary">查看</el-link>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="ctime" label="创建时间" />
-      <el-table-column align="center" prop="date" label="操作" width="320">
-        <template slot-scope="scope">
-          <el-button @click="edit(scope.row.id)" size="mini" type="warning"
-            >编辑</el-button
-          >
-          <el-button @click="del(scope.row.id)" size="mini" type="danger"
-            >删除</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-    <Page
-      ref="pageButton"
-      :current="form.page"
-      :page_size="form.page_size"
-      :total="total"
-      @pageChange="gopage"
-    />
-    <!-- 新增医生 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="医生类型" prop="role">
-          <el-select
-            v-model="form.role"
-            placeholder="请选择医生类型"
-            filterable
-          >
-            <el-option
-              v-for="item in $const.doctorRoleList"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="带教医生" prop="parent_id" v-if="form.role == 3">
-          <el-select
-            v-model="form.parent_id"
-            placeholder="请输入医生姓名"
-            clearable
-            filterable
-            size="mini"
-          >
-            <el-option
-              v-for="item in doctorList"
-              :key="item.value"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="名称" prop="name">
-          <el-input
-            clearable
-            v-model="form.name"
-            placeholder="请输入名称"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="手机号" prop="phone">
-          <el-input
-            clearable
-            v-model="form.phone"
-            placeholder="请输入手机号"
-          ></el-input>
-        </el-form-item>
+	<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 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>
+								</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>
+				
+						<!-- 选择题 -->
+						<template v-if='paper.obj.list.length>0'>
+						<!-- {{paper.obj.list}} -->
+							<div style="top:89mm;left:0mm;width:178mm;height:5mm; position:absolute;"> 
+							<div class="opLabel">
+								{{paper.obj.title}}
+								</div></div>
+							<div class="obj" :style="{
+								width: paper.objAnsPoints[0].w+'mm',
+								height: paper.objAnsPoints[0].h+'mm',
+								left: paper.objAnsPoints[0].x+'mm',
+								top: paper.objAnsPoints[0].y+'mm'
+							}"> 
+								<div  v-for='(item,index) in paper.obj.list'>
+									<span class="tm_id" :style="{
+										left:(item.points[0].x-8)+'mm',
+										top:(item.points[0].y)+'mm'
+									}">{{item.id}}</span>
+									<span v-for='(opt,i) in item.points' class="options" :style="{
+										width: opt.w+'mm',
+										height: opt.h+'mm',
+										left: opt.x+'mm',
+										top: opt.y+'mm'
+									}">{{options[i]}}</span>
+								</div>
 
-        <el-form-item label="医院" prop="hospital_name">
-          <el-input
-            clearable
-            v-model="form.hospital_name"
-            placeholder="请输入医院"
-          ></el-input>
-        </el-form-item>
-        <!-- <el-form-item label="图片" prop>
-          <el-upload
-            class="avatar-uploader"
-            action="/api/admin/uploadfile"
-            :data="{watermark:0}"
-            :show-file-list="false"
-            :on-success="handleAvatarSuccess"
-            :before-upload="beforeAvatarUpload"
-          >
-            <img v-if="form.img" :src="form.img" class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-          </el-upload>
-        </el-form-item> -->
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="open = false">取 消</el-button>
-      </div>
-    </el-dialog>
+								
+							</div>
+						</template>
+						<!-- 填空题 -->
+						<!-- <template>
+							<div> 
+							<div class="opLabel">填空题</div></div>
+							<div class="obj" :style="{
+								width: paper.stdSujQnoPoints[0].w+'mm',
+								height: paper.stdSujQnoPoints[0].h+'mm',
+								left: paper.stdSujQnoPoints[0].x+'mm',
+								top: paper.stdSujQnoPoints[0].y+'mm'
+							}"> 
+								
+						
+								
+							</div>
+						</template> -->
+					</div>
+					<!-- //试卷内容 -->
+					
+					
+					<!-- 页码 -->
+					<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>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="right_div">
+			<h3>选择答题卡布局</h3>
+			<ul class="dtk_bs_list">
+				<li v-for='i in 3' :class='data.layout == i ?"te_active":""' @click="data.layout = i">
+					<div v-if='i==1'>
+						<img  src="../../assets/test01.png" alt=""> 
+						<b>一栏</b>
+					</div>
+					<div v-if='i==2'>
+						<img  src="../../assets/test02.png" alt=""> 
+						<b>两栏</b>
+					</div>
+					<div v-if='i==3'>
+						<img  src="../../assets/test03.png" alt=""> 
+						<b>三栏</b>
+					</div>
+				</li>
+			</ul>
+			<div class="tips">
+				<p v-if='data.layout==1'>一栏适用于A4、16K、B5纸张</p>
+				<p v-if='data.layout==2'>两栏适用于A3、8K、B4纸张</p>
+				<p v-if='data.layout==3'>三栏适用于A3、8K、B4纸张</p>
+			</div>
+			<h3>选择考号版式</h3>
+			 <div style="padding: 10px;">
+				<el-radio v-model="data.khType" :label="1">条形码</el-radio>
+				<el-radio v-model="data.khType" :label="2">准考证号</el-radio>
+				<select v-model="data.khLength" style="width: 70px;">
+					<option v-for="i in 12" v-if='i>=4' :value="i">{{i}}位</option>
+				</select>
+			 </div>
+			 <h3>设置禁止作答区</h3>
+			 <div style="padding: 10px;">
+				 <el-radio v-model="data.noAnsArea" :label="1">启用</el-radio>
+				 <el-radio v-model="data.noAnsArea" :label="2">禁用</el-radio>
+			 </div>
+			 <h3>添加试题</h3>
+			 <div class="btns" style="padding: 10px;">
+				 <el-button @click="openAdd(1)" type="info" size="mini" plain icon="el-icon-plus">客观题</el-button>
+				 <el-button @click="openAdd(2)" type="info" size="mini" plain icon="el-icon-plus">填空题</el-button>
+				 <el-button @click="openAdd(3)" type="info" size="mini" plain icon="el-icon-plus">解答题</el-button>
+				 <el-button @click="openAdd(4)" type="info" size="mini" plain icon="el-icon-plus">选做题</el-button>
+				 <el-button @click="openAdd(5)" type="info" size="mini" plain icon="el-icon-plus">作文(语)</el-button>
+				 <el-button @click="openAdd(6)" type="info" size="mini" plain icon="el-icon-plus">作文(英)</el-button>
+			 </div>
+		</div>
+	</div>
+	
+	<el-dialog
+	  title="添加题目"
+	  :visible.sync="open"
+	  width="30%">
+	  <el-form size="small" :inline='true' label-width="80px" label-position="left">
+		  <el-form-item label="题目名称:"  v-if='type <= 3'>
+		      <el-radio-group fill='#FA0A2F' v-model="addForm.type" v-if='type == 1'>
+		            <el-radio-button :label="1">单选题</el-radio-button>
+		            <el-radio-button :label="2">多选题</el-radio-button>
+		            <el-radio-button :label="3">判断题</el-radio-button>
+		       </el-radio-group>
+			   <el-input v-if='type == 2' value="填空题"></el-input>
+			   <el-input v-if='type == 3' value="解答题"></el-input>
+		    </el-form-item>
+			<el-form-item label="题号:" v-if='type <= 3'>
+				从第  <el-input @input="createList" style="width:100px;" v-model="addForm.start"></el-input>
+				到第  <el-input @input="createList" style="width: 100px;" v-model="addForm.end"></el-input>
+				题
+			</el-form-item>
+			<el-form-item label="选项个数:" v-if='addForm.type != 3 && type == 1'>
+				<el-input @input="numChange" v-model="addForm.num"></el-input>
+			</el-form-item>
+			<el-form-item label="每行空数:"  v-if='type == 2'>
+			  <el-radio-group fill='#FA0A2F' v-model="addForm.count" >
+			        <el-radio-button v-for='i in 5' :label="i">{{i}}</el-radio-button>
+			   </el-radio-group>
+			</el-form-item>
+			<el-form-item label="选做规则:" v-if='type == 4'>
+				<el-input style="width:100px;" v-model="addForm.chooseNum"></el-input>
+				选 <el-input style="width: 100px;" value="1" disabled></el-input>
+			</el-form-item>
+			<el-form-item label="作文格数:" v-if='type == 5'>
+				<el-input  v-model="addForm.words"></el-input>
+			</el-form-item>
+			<el-form-item label="作文栏数:" v-if='type == 6'>
+				<el-input  v-model="addForm.row"></el-input>
+			</el-form-item>
+			
+			<ul class="tm_list" v-if='type == 1'>
+				<li v-for="item in list">
+					<span>{{item.id}}</span>
+					<div><input type="text" v-model="item.num">个选项</div>
+				</li>
+			</ul>
+	  </el-form>
+		
+	  <p align='center' v-if="type == 1">
+		<el-checkbox v-model="addForm.auto" >添加题目自动排版至顶端客观题区域</el-checkbox>
+	  </p>
+	  
+	  <span slot="footer" class="dialog-footer">
+	    <el-button @click="open = false">取 消</el-button>
+	    <el-button type="primary" @click="addPaper">添 加</el-button>
+	  </span>
+	</el-dialog>
   </section>
 </template>
 <script>
@@ -177,115 +429,152 @@ export default {
       open: false,
       doctorList: [],
       rules: {},
-    };
+	  pages:1,
+	  size:[180,118],
+	  data:{
+		  layout:1,
+		  khType:1,
+		  khLength:8,
+		  noAnsArea:1
+	  },
+	  type:1,
+	  options:['A','B','C','D','E','F'],
+	  addForm:{
+		  type:1,
+		  start:1,
+		  end:'',
+		  num:4,
+		  auto:true,
+		  count:1,
+		  chooseNum:3,
+		  words:900,
+		  row:10,
+		  col:5    //客观题一列几行
+	  },
+	  list:[
+		  
+	  ],
+	  paper:{
+		  obj:{
+			  title:'客观题',
+			  list:[]
+		  },
+		  objAnsPoints:[
+			{"x":0,"y":94,"w":180,"h":32,"points":[{"x":1,"y":2,"w":4,"h":3},]
+			}
+		  ],
+		  stdSujQnoPoints:[
+			  {"x":0,"y":180,"w":180,"h":32}
+		  ]
+	  }
+	  
+	};
   },
   methods: {
-    del(id) {
-      this.$confirm("确认删除?", "提示", {
-        type: "warning",
-      }).then(() => {
-        this.$api
-          .delDoctorInfo({
-            id: id,
-          })
-          .then((res) => {
-            if (!res.data.code) {
-              this.$msgSuccess("删除成功");
-              this.getData();
-            } else {
-              this.$msgError(res.data.message);
-            }
-          });
-      });
-    },
-    gopage(size) {
-      if (size) {
-        this.queryParams.page_size = size;
-      }
-      this.queryParams.page = this.$refs.pageButton.page;
-      this.getData();
-    },
-    getData() {
-      this.loading = true;
-      this.$api.getDoctorsList(this.queryParams).then((res) => {
-        this.list = res.data.data.list;
-        this.total = res.data.data.total;
-        this.loading = false;
-      });
+	decToBin4(decimalNumber) {
+	  return decimalNumber.toString(2).padStart(4, '0');
+	},
+	openAdd(type){
+		this.type=type
+		this.open=true
+	},
+	//选项个数变化
+	numChange(){
+		let list=this.list
+		list.forEach(item=>{
+			item.num=this.addForm.num
+		})
+		this.list=list
+	},
+	createList(){
+		if(this.type != 1)return
+		let s=this.addForm.start,e=this.addForm.end
+		let list=[]
+		if(this.addForm.end >= this.addForm.start){
+			for(let i=s;i<=e;i++){
+				list.push({
+					id:i,
+					num:this.addForm.num
+				})
+			}
+		}
+		this.list=list
+		
+	},
+	//添加题目
+	addPaper(){
+		switch(this.type){
+			case 1:   //客观题
+			this.paper.obj.list=this.paper.obj.list.concat(this.list)
+			this.calcXY()
+			this.list=[]
+			break;
+			case 2:
+			var objAnsPoints=this.paper.objAnsPoints,i=objAnsPoints.length-1
+			if(i>=0){
+				this.paper.stdSujQnoPoints.push({
+					x:objAnsPoints[i].x,
+					y:objAnsPoints[i].y+objAnsPoints[i].h+20,
+					w:objAnsPoints[i].w,
+					h:objAnsPoints[i].h
+				})
+			}else{
+				this.paper.stdSujQnoPoints.push({
+					x:0,
+					y:94,
+					w:180,
+					h:32
+				})
+			}
+			
+			break;
+		}
+		this.addForm.start=Number(this.addForm.end)+1
+		this.addForm.end=''
+		this.open=false
+		
+	},
+	calcXY(){
+		function sum(arr,start,end) {
+			arr=JSON.parse(JSON.stringify(arr))
+			arr=arr.splice(start,end)
+		  return arr.reduce((acc, curr) => Number(acc) + Number(curr), 0);
+		}
+		let col=this.addForm.col
+		let list=this.paper.obj.list
+		let x,y=2.5,max=[0,0,0,0,0,0,0,0,0,0]
+		list.forEach((item,index)=>{
+			let i=parseInt(index/col)
+			if(item.num>max[i]){
+				max[i]=item.num
+			}
+		})
+
+		list.forEach((item,index)=>{
+			let i=parseInt(index/col)
+			item.points=[]
+			if(index>0)y=y+5
+			if(index>0 && index%col == 0){
+				y=2.5
+			}
+			x=8+12*(i)+sum(max,0,i)*6
 
-      this.$api
-          .getDoctorsSearchList({
-          })
-          .then((res) => {
-            this.doctorList = res.data.data;
-            this.$set(this.doctorList, res.data.data);
-            // this.loading = false;
-          });
-    },
-    handleAdd() {
-      this.open = true;
-      this.title = "新增医生";
-      this.form = {};
-    },
-    edit(id) {
-      this.title = "编辑医生";
-      this.$api
-        .getDoctorInfo({
-          id: id,
-        })
-        .then((res) => {
-          this.form = res.data.data;
-          this.open = true;
-        });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate((valid) => {
-        if (valid) {
-          if (this.form.id != null) {
-            this.$api.editDoctorInfo(this.form).then((res) => {
-              if (res.data.code == 0) {
-                this.msgSuccess("成功!");
-                this.open = false;
-                this.getData();
-              } else {
-                this.msgError(res.data.message);
-              }
-            });
-          } else {
-            this.$api.addDoctorInfo(this.form).then((res) => {
-              if (res.data.code == 0) {
-                this.msgSuccess("成功!");
-                this.open = false;
-                this.getData();
-              } else {
-                this.msgError(res.data.message);
-              }
-            });
-          }
-        }
-      });
-    },
-    remoteMethod(query) {
-      if (query !== "") {
-        // this.loading = true;
-        this.$api
-          .getDoctorsSearchList({
-            name: query,
-          })
-          .then((res) => {
-            this.doctorList = res.data.data;
-            this.$set(this.doctorList, res.data.data);
-            // this.loading = false;
-          });
-      } else {
-        this.doctorList = [];
-      }
-    },
+			for(let i=0;i<item.num;i++){
+				if(i>0)x+=6
+				item.points.push({
+					x:x,
+					y:y,
+					w:4,
+					h:2.5
+				})
+			}
+		})
+	}
+  
   },
   created() {
-    this.getData();
-    
+	this.pages=this.decToBin4(this.pages).split('')
+
   },
 };
 </script>