|
|
@@ -1,339 +1,355 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- class="sheet-info-container"
|
|
|
- ref="baseInfoRef"
|
|
|
- @mouseout="isShowInfoEdit = false"
|
|
|
- @mouseover="isShowInfoEdit = true"
|
|
|
- >
|
|
|
- <svg id="sheetInfoSvg" width="100%" height="100%"></svg>
|
|
|
- <div class="info-edit" v-show="isShowInfoEdit" @click="editModal = true">
|
|
|
- <span>{{ $t('answerSheet.edit') }}</span>
|
|
|
- </div>
|
|
|
- <Modal v-model="editModal" :title="$t('answerSheet.baseInfo')" @on-ok="onEditBaseInfo">
|
|
|
- <p class="edit-title">{{ $t('answerSheet.needTitle') }}</p>
|
|
|
- <CheckboxGroup v-model="showInfoList">
|
|
|
- <Checkbox
|
|
|
- v-for="(item, index) in infoList"
|
|
|
- :key="index"
|
|
|
- :label="item"
|
|
|
- :disabled="index < 2"
|
|
|
- ></Checkbox>
|
|
|
- </CheckboxGroup>
|
|
|
- <p class="edit-title">{{ $t('answerSheet.idNumber') }}</p>
|
|
|
- <InputNumber :max="12" :min="4" v-model="idLength"></InputNumber>
|
|
|
- </Modal>
|
|
|
- </div>
|
|
|
+ <div class="sheet-info-container" ref="baseInfoRef" @mouseout="isShowInfoEdit = false"
|
|
|
+ @mouseover="isShowInfoEdit = true">
|
|
|
+ <svg id="sheetInfoSvg" width="100%" height="100%"></svg>
|
|
|
+ <div class="info-edit" v-show="isShowInfoEdit" @click="editModal = true">
|
|
|
+ <span>{{ $t('answerSheet.edit') }}</span>
|
|
|
+ </div>
|
|
|
+ <Modal v-model="editModal" :title="$t('answerSheet.baseInfo')" @on-ok="onEditBaseInfo">
|
|
|
+ <p class="edit-title">{{ $t('answerSheet.needTitle') }}</p>
|
|
|
+ <CheckboxGroup v-model="showInfoList">
|
|
|
+ <Checkbox v-for="(item, index) in infoList" :key="index" :label="item" :disabled="index < 2"></Checkbox>
|
|
|
+ </CheckboxGroup>
|
|
|
+ <p class="edit-title">{{ $t('answerSheet.idNumber') }}</p>
|
|
|
+ <InputNumber :max="12" :min="4" v-model="idLength"></InputNumber>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
+
|
|
|
<script>
|
|
|
-import Snap from "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js";
|
|
|
-import {
|
|
|
- PAPER_W,
|
|
|
- PAPER_H,
|
|
|
- CONTENT_MT,
|
|
|
- CONTENT_ML,
|
|
|
- ANCHORPROP,
|
|
|
- CONTENT_START_X,
|
|
|
- CONTENT_START_Y,
|
|
|
- INFO_W,
|
|
|
- INFO_H,
|
|
|
- INFO_ITEM_GAP,
|
|
|
- INFO_ITEM_MARGIN,
|
|
|
- ID_LENGTH,
|
|
|
- INFO_LEFT_X,
|
|
|
- INFO_LEFT_W,
|
|
|
- ID_TITLE_H,
|
|
|
- ID_TITLE_Y,
|
|
|
- NUMBER_CELL_H,
|
|
|
- NUMBER_ITEM_W,
|
|
|
- NUMBER_ITEM_H,
|
|
|
- NUMBER_ITEM_MT,
|
|
|
- NUMBER_ITEM_ML,
|
|
|
-} from "@/utils/sheetConfig.js";
|
|
|
-export default {
|
|
|
- components: {},
|
|
|
- data(vm) {
|
|
|
- return {
|
|
|
- infoList: [vm.$t('answerSheet.id'), vm.$t('answerSheet.name'),vm.$t('answerSheet.school'),vm.$t('answerSheet.className'),vm.$t('answerSheet.no'),vm.$t('answerSheet.roomNo')],
|
|
|
- showInfoList: [vm.$t('answerSheet.id'), vm.$t('answerSheet.name'),vm.$t('answerSheet.school'),vm.$t('answerSheet.className'),vm.$t('answerSheet.no')],
|
|
|
- isShowInfoEdit: false,
|
|
|
- editModal: false,
|
|
|
- infoLeftBox: null,
|
|
|
- idNumberBox: null,
|
|
|
- snap: null,
|
|
|
- idLength: 10,
|
|
|
- svgPosArr:[]
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.snap = Snap("#sheetInfoSvg");
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onEditBaseInfo() {
|
|
|
- this.infoLeftBox.remove();
|
|
|
- let snap = this.snap;
|
|
|
- this.infoLeftBox = snap.paper.g();
|
|
|
- let gap = INFO_H / (this.showInfoList.length + 1);
|
|
|
- let lineWidth = INFO_W - this.idLength * 30
|
|
|
- this.showInfoList.forEach((item, index) => {
|
|
|
- // 考号、座号、姓名等
|
|
|
- let leftInfo1 = snap.text(
|
|
|
- CONTENT_START_X + 30,
|
|
|
- CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index,
|
|
|
- `${item} :`
|
|
|
- );
|
|
|
- // 下划线
|
|
|
- let leftInfo2 = snap
|
|
|
- .line(
|
|
|
- CONTENT_START_X + 80,
|
|
|
- CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index,
|
|
|
- CONTENT_START_X + lineWidth - 40,
|
|
|
- CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index
|
|
|
- )
|
|
|
- .attr({ fill: "none", stroke: "#000", strokeWidth: 1,shapeRendering:"crispEdges", });
|
|
|
- this.infoLeftBox.add(leftInfo1, leftInfo2);
|
|
|
- });
|
|
|
+ import Snap from "imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js";
|
|
|
+ import {
|
|
|
+ PAPER_W,
|
|
|
+ PAPER_H,
|
|
|
+ CONTENT_MT,
|
|
|
+ CONTENT_ML,
|
|
|
+ ANCHORPROP,
|
|
|
+ CONTENT_START_X,
|
|
|
+ CONTENT_START_Y,
|
|
|
+ INFO_W,
|
|
|
+ INFO_H,
|
|
|
+ INFO_ITEM_GAP,
|
|
|
+ INFO_ITEM_MARGIN,
|
|
|
+ ID_LENGTH,
|
|
|
+ INFO_LEFT_X,
|
|
|
+ INFO_LEFT_W,
|
|
|
+ ID_TITLE_H,
|
|
|
+ ID_TITLE_Y,
|
|
|
+ NUMBER_CELL_H,
|
|
|
+ NUMBER_ITEM_W,
|
|
|
+ NUMBER_ITEM_H,
|
|
|
+ NUMBER_ITEM_MT,
|
|
|
+ NUMBER_ITEM_ML,
|
|
|
+ } from "@/utils/sheetConfig.js";
|
|
|
+ export default {
|
|
|
+ components: {},
|
|
|
+ data(vm) {
|
|
|
+ return {
|
|
|
+ infoList: [vm.$t('answerSheet.id'), vm.$t('answerSheet.name'), vm.$t('answerSheet.school'), vm.$t(
|
|
|
+ 'answerSheet.className'), vm.$t('answerSheet.no'), vm.$t('answerSheet.roomNo')],
|
|
|
+ showInfoList: [vm.$t('answerSheet.id'), vm.$t('answerSheet.name'), vm.$t('answerSheet.school'), vm.$t(
|
|
|
+ 'answerSheet.className'), vm.$t('answerSheet.no')],
|
|
|
+ isShowInfoEdit: false,
|
|
|
+ editModal: false,
|
|
|
+ infoLeftBox: null,
|
|
|
+ idNumberBox: null,
|
|
|
+ snap: null,
|
|
|
+ idLength: 10,
|
|
|
+ svgPosArr: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.snap = Snap("#sheetInfoSvg");
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onEditBaseInfo() {
|
|
|
+ this.infoLeftBox.remove();
|
|
|
+ let snap = this.snap;
|
|
|
+ this.infoLeftBox = snap.paper.g();
|
|
|
+ let gap = INFO_H / (this.showInfoList.length + 1);
|
|
|
+ let lineWidth = INFO_W - this.idLength * 30
|
|
|
+ this.showInfoList.forEach((item, index) => {
|
|
|
+ // 考号、座号、姓名等
|
|
|
+ let leftInfo1 = snap.text(
|
|
|
+ CONTENT_START_X + 30,
|
|
|
+ CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index,
|
|
|
+ `${item} :`
|
|
|
+ );
|
|
|
+ // 下划线
|
|
|
+ let leftInfo2 = snap
|
|
|
+ .line(
|
|
|
+ CONTENT_START_X + 80,
|
|
|
+ CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index,
|
|
|
+ CONTENT_START_X + lineWidth - 40,
|
|
|
+ CONTENT_START_Y + INFO_ITEM_MARGIN + gap * index
|
|
|
+ )
|
|
|
+ .attr({
|
|
|
+ fill: "none",
|
|
|
+ stroke: "#000",
|
|
|
+ strokeWidth: 1,
|
|
|
+ shapeRendering: "crispEdges",
|
|
|
+ });
|
|
|
+ this.infoLeftBox.add(leftInfo1, leftInfo2);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.renderIdNumber(this.idLength, false);
|
|
|
+ console.log(this.svgPosArr);
|
|
|
+ this.$store.commit('setInfoMode', 'number')
|
|
|
+ this.$store.commit('setInfoPos', this.svgPosArr)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 渲染准考证号填涂区域
|
|
|
+ renderIdNumber(idLength, isShowCode) {
|
|
|
+ let snap = this.snap;
|
|
|
+ this.svgPosArr = []
|
|
|
+ this.setInfoConfig()
|
|
|
+ this.idNumberBox.remove();
|
|
|
+ this.idNumberBox = snap.paper.g();
|
|
|
+
|
|
|
+ const CELL_WIDTH = 30
|
|
|
+
|
|
|
+ const INFO_LEFT_W = INFO_W - CELL_WIDTH * idLength; // 左侧的宽度
|
|
|
+ const INFO_LEFT_X = INFO_LEFT_W + CONTENT_ML + ANCHORPROP.width + ANCHORPROP.gapX; // 左侧的x坐标
|
|
|
+ var numbers = new Array(idLength).fill("0");
|
|
|
+ var cellWidth = CELL_WIDTH; // 计算每个号码的宽度
|
|
|
+ const NUMBER_ITEM_MLR =
|
|
|
+ ((INFO_W - INFO_LEFT_W) / idLength - NUMBER_ITEM_W) / 2; // 计算号码左右间距
|
|
|
+ // 信息框左右分割线
|
|
|
+ this.idNumberBox.add(
|
|
|
+ snap
|
|
|
+ .line(
|
|
|
+ INFO_LEFT_X,
|
|
|
+ CONTENT_MT + 50,
|
|
|
+ INFO_LEFT_X,
|
|
|
+ CONTENT_MT + 50 + INFO_H
|
|
|
+ )
|
|
|
+ .attr({
|
|
|
+ fill: "none",
|
|
|
+ stroke: "#000",
|
|
|
+ strokeWidth: 1,
|
|
|
+ shapeRendering: "crispEdges"
|
|
|
+ })
|
|
|
+ );
|
|
|
+
|
|
|
+ // 准考证号下边框
|
|
|
+ this.idNumberBox.add(
|
|
|
+ snap
|
|
|
+ .line(
|
|
|
+ INFO_LEFT_X,
|
|
|
+ ID_TITLE_Y,
|
|
|
+ PAPER_W - CONTENT_ML - ANCHORPROP.width - ANCHORPROP.gapX,
|
|
|
+ ID_TITLE_Y
|
|
|
+ )
|
|
|
+ .attr({
|
|
|
+ fill: "none",
|
|
|
+ stroke: "#000",
|
|
|
+ strokeWidth: 1,
|
|
|
+ shapeRendering: "crispEdges"
|
|
|
+ })
|
|
|
+ );
|
|
|
+ // 准考证号
|
|
|
+ this.idNumberBox.add(
|
|
|
+ snap.text(
|
|
|
+ INFO_LEFT_X + (idLength * CELL_WIDTH - 69) / 2,
|
|
|
+ CONTENT_MT + 75,
|
|
|
+ isShowCode ? this.$t('answerSheet.qrCodeTitle') : this.$t('answerSheet.idTitle')
|
|
|
+ )
|
|
|
+ );
|
|
|
+ if (!isShowCode) {
|
|
|
+ this.idNumberBox.add(
|
|
|
+ // 填涂上边框
|
|
|
+ snap
|
|
|
+ .line(
|
|
|
+ INFO_LEFT_X,
|
|
|
+ ID_TITLE_Y + NUMBER_CELL_H,
|
|
|
+ PAPER_W - CONTENT_ML - ANCHORPROP.width - ANCHORPROP.gapX,
|
|
|
+ ID_TITLE_Y + NUMBER_CELL_H
|
|
|
+ )
|
|
|
+ .attr({
|
|
|
+ fill: "none",
|
|
|
+ stroke: "#000",
|
|
|
+ strokeWidth: 1,
|
|
|
+ shapeRendering: "crispEdges"
|
|
|
+ })
|
|
|
+ );
|
|
|
+ numbers.forEach((item, index) => {
|
|
|
+ // 画准考证号填涂对应锚点
|
|
|
+ let c1 = snap.rect(
|
|
|
+ INFO_LEFT_X + NUMBER_ITEM_MLR + index * cellWidth,
|
|
|
+ 40,
|
|
|
+ 0,
|
|
|
+ NUMBER_ITEM_H
|
|
|
+ );
|
|
|
+ // 画准考证号分列分割线
|
|
|
+ let c2 = snap
|
|
|
+ .line(
|
|
|
+ INFO_LEFT_X + cellWidth * index,
|
|
|
+ ID_TITLE_Y,
|
|
|
+ INFO_LEFT_X + cellWidth * index,
|
|
|
+ ID_TITLE_Y - ID_TITLE_H + INFO_H
|
|
|
+ )
|
|
|
+ .attr({
|
|
|
+ fill: "none",
|
|
|
+ stroke: "#000",
|
|
|
+ strokeWidth: index === 0 ? 0 : 1,
|
|
|
+ shapeRendering: "crispEdges"
|
|
|
+ });
|
|
|
+
|
|
|
+ this.idNumberBox.add(c1, c2);
|
|
|
+ const context = require.context('@/icons/answersheet', false, /.svg/)
|
|
|
+ const frames = []
|
|
|
+ context.keys().forEach(k => {
|
|
|
+ frames.push(context(k))
|
|
|
+ })
|
|
|
+ // 画填涂svg图片
|
|
|
+ for (let i = 0; i < 10; i++) {
|
|
|
+ let img = frames[i];
|
|
|
+ let x = INFO_LEFT_X + NUMBER_ITEM_MLR + cellWidth * index
|
|
|
+ let y = ID_TITLE_Y + NUMBER_CELL_H + 5 + NUMBER_ITEM_MT * i
|
|
|
+ let c3 = snap.image(
|
|
|
+ img,
|
|
|
+ x,
|
|
|
+ y,
|
|
|
+ NUMBER_ITEM_W,
|
|
|
+ NUMBER_ITEM_H
|
|
|
+ );
|
|
|
+ this.idNumberBox.add(c3);
|
|
|
+ this.svgPosArr.push({
|
|
|
+ ans: i + '',
|
|
|
+ row: index,
|
|
|
+ pos: [{
|
|
|
+ x: x - CONTENT_START_X,
|
|
|
+ y: y - CONTENT_START_Y
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: x - CONTENT_START_X + NUMBER_ITEM_W,
|
|
|
+ y: y - CONTENT_START_Y
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: x - CONTENT_START_X,
|
|
|
+ y: y - CONTENT_START_Y + NUMBER_ITEM_H
|
|
|
+ },
|
|
|
+ {
|
|
|
+ x: x - CONTENT_START_X + NUMBER_ITEM_W,
|
|
|
+ y: y - CONTENT_START_Y + NUMBER_ITEM_H
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 画左边准考证号定位锚点
|
|
|
+ // for (let i = 0; i < 10; i++) {
|
|
|
+ // snap.rect(
|
|
|
+ // 20,
|
|
|
+ // ID_TITLE_Y + NUMBER_CELL_H + 5 + NUMBER_ITEM_MT * i,
|
|
|
+ // NUMBER_ITEM_W,
|
|
|
+ // NUMBER_ITEM_H
|
|
|
+ // ).attr({ shapeRendering:"crispEdges"});
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ let img = require("@/static/qrCode.png");
|
|
|
+ let c4 = snap.image(
|
|
|
+ img,
|
|
|
+ 450,
|
|
|
+ 180,
|
|
|
+ 150,
|
|
|
+ 150
|
|
|
+ );
|
|
|
+ this.idNumberBox.add(c4);
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
- this.renderIdNumber(this.idLength,false);
|
|
|
- console.log(this.svgPosArr);
|
|
|
- this.$store.commit('setInfoMode','number')
|
|
|
- this.$store.commit('setInfoPos',this.svgPosArr)
|
|
|
- },
|
|
|
+ renderQRCode() {
|
|
|
+ let snap = this.snap;
|
|
|
+ this.setInfoConfig()
|
|
|
+ this.idNumberBox.remove();
|
|
|
+ this.idNumberBox = snap.paper.g();
|
|
|
|
|
|
- // 渲染准考证号填涂区域
|
|
|
- renderIdNumber(idLength,isShowCode) {
|
|
|
- let snap = this.snap;
|
|
|
- this.svgPosArr = []
|
|
|
- this.setInfoConfig()
|
|
|
- this.idNumberBox.remove();
|
|
|
- this.idNumberBox = snap.paper.g();
|
|
|
-
|
|
|
- const CELL_WIDTH = 30
|
|
|
+ },
|
|
|
|
|
|
- const INFO_LEFT_W = INFO_W - CELL_WIDTH * idLength; // 左侧的宽度
|
|
|
- const INFO_LEFT_X = INFO_LEFT_W + CONTENT_ML + ANCHORPROP.width + ANCHORPROP.gapX; // 左侧的x坐标
|
|
|
- var numbers = new Array(idLength).fill("0");
|
|
|
- var cellWidth = CELL_WIDTH; // 计算每个号码的宽度
|
|
|
- const NUMBER_ITEM_MLR =
|
|
|
- ((INFO_W - INFO_LEFT_W) / idLength - NUMBER_ITEM_W) / 2; // 计算号码左右间距
|
|
|
- // 信息框左右分割线
|
|
|
- this.idNumberBox.add(
|
|
|
- snap
|
|
|
- .line(
|
|
|
- INFO_LEFT_X,
|
|
|
- CONTENT_MT + 50,
|
|
|
- INFO_LEFT_X,
|
|
|
- CONTENT_MT + 50 + INFO_H
|
|
|
- )
|
|
|
- .attr({ fill: "none", stroke: "#000", strokeWidth: 1,shapeRendering:"crispEdges"})
|
|
|
- );
|
|
|
+ setInfoConfig() {
|
|
|
+ let infoConfig = {
|
|
|
+ "type": 0,
|
|
|
+ "x": CONTENT_START_X - ANCHORPROP.gapX + 5,
|
|
|
+ "y": CONTENT_START_Y - ANCHORPROP.gapY + 5,
|
|
|
+ "width": INFO_W,
|
|
|
+ "height": INFO_H,
|
|
|
+ "pageNum": 1,
|
|
|
+ "vblockCount": 10,
|
|
|
+ "hblockCount": this.idLength
|
|
|
+ }
|
|
|
+ this.$store.commit('setInfoConfig', infoConfig)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function() {
|
|
|
+ this.snap = Snap("#sheetInfoSvg");
|
|
|
+ var snap = this.snap;
|
|
|
+ // 定义分组Group
|
|
|
+ this.infoLeftBox = snap.paper.g();
|
|
|
+ this.idNumberBox = snap.paper.g();
|
|
|
+ // 渲染个人信息区域
|
|
|
+ this.onEditBaseInfo();
|
|
|
|
|
|
- // 准考证号下边框
|
|
|
- this.idNumberBox.add(
|
|
|
- snap
|
|
|
- .line(
|
|
|
- INFO_LEFT_X,
|
|
|
- ID_TITLE_Y,
|
|
|
- PAPER_W - CONTENT_ML - ANCHORPROP.width - ANCHORPROP.gapX,
|
|
|
- ID_TITLE_Y
|
|
|
- )
|
|
|
- .attr({ fill: "none", stroke: "#000", strokeWidth: 1,shapeRendering:"crispEdges" })
|
|
|
- );
|
|
|
- // 准考证号
|
|
|
- this.idNumberBox.add(
|
|
|
- snap.text(
|
|
|
- INFO_LEFT_X + (idLength * CELL_WIDTH - 69) / 2,
|
|
|
- CONTENT_MT + 75,
|
|
|
- isShowCode ? this.$t('answerSheet.qrCodeTitle') : this.$t('answerSheet.idTitle')
|
|
|
- )
|
|
|
- );
|
|
|
- if(!isShowCode){
|
|
|
- this.idNumberBox.add(
|
|
|
- // 填涂上边框
|
|
|
- snap
|
|
|
- .line(
|
|
|
- INFO_LEFT_X,
|
|
|
- ID_TITLE_Y + NUMBER_CELL_H,
|
|
|
- PAPER_W - CONTENT_ML - ANCHORPROP.width - ANCHORPROP.gapX,
|
|
|
- ID_TITLE_Y + NUMBER_CELL_H
|
|
|
- )
|
|
|
- .attr({ fill: "none", stroke: "#000", strokeWidth: 1,shapeRendering:"crispEdges" })
|
|
|
- );
|
|
|
- numbers.forEach((item, index) => {
|
|
|
- // 画准考证号填涂对应锚点
|
|
|
- let c1 = snap.rect(
|
|
|
- INFO_LEFT_X + NUMBER_ITEM_MLR + index * cellWidth,
|
|
|
- 40,
|
|
|
- 0,
|
|
|
- NUMBER_ITEM_H
|
|
|
- );
|
|
|
- // 画准考证号分列分割线
|
|
|
- let c2 = snap
|
|
|
- .line(
|
|
|
- INFO_LEFT_X + cellWidth * index,
|
|
|
- ID_TITLE_Y,
|
|
|
- INFO_LEFT_X + cellWidth * index,
|
|
|
- ID_TITLE_Y - ID_TITLE_H + INFO_H
|
|
|
- )
|
|
|
- .attr({
|
|
|
- fill: "none",
|
|
|
- stroke: "#000",
|
|
|
- strokeWidth: index === 0 ? 0 : 1,
|
|
|
- shapeRendering:"crispEdges"
|
|
|
- });
|
|
|
-
|
|
|
- this.idNumberBox.add(c1, c2);
|
|
|
- const context = require.context('@/icons/answersheet', false, /.svg/)
|
|
|
- const frames = []
|
|
|
- context.keys().forEach(k => {
|
|
|
- frames.push(context(k))
|
|
|
+ // 信息框
|
|
|
+ let infoBox = snap
|
|
|
+ .rect(CONTENT_START_X, CONTENT_START_Y, INFO_W, INFO_H)
|
|
|
+ .attr({
|
|
|
+ fill: "rgba(0,0,0,0)",
|
|
|
+ stroke: "#000",
|
|
|
+ strokeWidth: 2,
|
|
|
+ shapeRendering: "crispEdges",
|
|
|
+ });
|
|
|
+ this.setInfoConfig()
|
|
|
+
|
|
|
+
|
|
|
+ infoBox.mouseover(() => {
|
|
|
+ // 移入
|
|
|
+ this.isShowInfoEdit = true;
|
|
|
+ });
|
|
|
+ infoBox.mouseout(() => {
|
|
|
+ // 移入
|
|
|
+ this.isShowInfoEdit = false;
|
|
|
+ });
|
|
|
+ this.$EventBus.$off('onCreateSheet')
|
|
|
+ this.$EventBus.$on('onCreateSheet', () => {
|
|
|
+ this.isShowInfoEdit = false
|
|
|
})
|
|
|
- // 画填涂svg图片
|
|
|
- for (let i = 0; i < 10; i++) {
|
|
|
- let img = frames[i];
|
|
|
- let x = INFO_LEFT_X + NUMBER_ITEM_MLR + cellWidth * index
|
|
|
- let y = ID_TITLE_Y + NUMBER_CELL_H + 5 + NUMBER_ITEM_MT * i
|
|
|
- let c3 = snap.image(
|
|
|
- img,
|
|
|
- x,
|
|
|
- y,
|
|
|
- NUMBER_ITEM_W,
|
|
|
- NUMBER_ITEM_H
|
|
|
- );
|
|
|
- this.idNumberBox.add(c3);
|
|
|
- this.svgPosArr.push({
|
|
|
- ans:i,
|
|
|
- row:index,
|
|
|
- pos:[
|
|
|
- {
|
|
|
- x:x - CONTENT_START_X,
|
|
|
- y:y - CONTENT_START_Y
|
|
|
- },
|
|
|
- {
|
|
|
- x:x - CONTENT_START_X + NUMBER_ITEM_W,
|
|
|
- y:y - CONTENT_START_Y
|
|
|
- },
|
|
|
- {
|
|
|
- x:x - CONTENT_START_X,
|
|
|
- y:y - CONTENT_START_Y + NUMBER_ITEM_H
|
|
|
- },
|
|
|
- {
|
|
|
- x:x - CONTENT_START_X + NUMBER_ITEM_W,
|
|
|
- y:y - CONTENT_START_Y + NUMBER_ITEM_H
|
|
|
- }
|
|
|
- ]
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- // 画左边准考证号定位锚点
|
|
|
- // for (let i = 0; i < 10; i++) {
|
|
|
- // snap.rect(
|
|
|
- // 20,
|
|
|
- // ID_TITLE_Y + NUMBER_CELL_H + 5 + NUMBER_ITEM_MT * i,
|
|
|
- // NUMBER_ITEM_W,
|
|
|
- // NUMBER_ITEM_H
|
|
|
- // ).attr({ shapeRendering:"crispEdges"});
|
|
|
- // }
|
|
|
- }else{
|
|
|
- let img = require("@/static/qrCode.png");
|
|
|
- let c4 = snap.image(
|
|
|
- img,
|
|
|
- 450,
|
|
|
- 180,
|
|
|
- 150,
|
|
|
- 150
|
|
|
- );
|
|
|
- this.idNumberBox.add(c4);
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- renderQRCode(){
|
|
|
- let snap = this.snap;
|
|
|
- this.setInfoConfig()
|
|
|
- this.idNumberBox.remove();
|
|
|
- this.idNumberBox = snap.paper.g();
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- setInfoConfig(){
|
|
|
- let infoConfig = {
|
|
|
- "type": 0,
|
|
|
- "x": CONTENT_START_X - ANCHORPROP.gapX + 5,
|
|
|
- "y": CONTENT_START_Y - ANCHORPROP.gapY + 5,
|
|
|
- "width": INFO_W,
|
|
|
- "height": INFO_H,
|
|
|
- "pageNum": 1,
|
|
|
- "vblockCount": 10,
|
|
|
- "hblockCount": this.idLength
|
|
|
- }
|
|
|
- this.$store.commit('setInfoConfig', infoConfig)
|
|
|
- }
|
|
|
- },
|
|
|
- mounted: function () {
|
|
|
- this.snap = Snap("#sheetInfoSvg");
|
|
|
- var snap = this.snap;
|
|
|
- // 定义分组Group
|
|
|
- this.infoLeftBox = snap.paper.g();
|
|
|
- this.idNumberBox = snap.paper.g();
|
|
|
- // 渲染个人信息区域
|
|
|
- this.onEditBaseInfo();
|
|
|
-
|
|
|
- // 信息框
|
|
|
- let infoBox = snap
|
|
|
- .rect(CONTENT_START_X, CONTENT_START_Y, INFO_W, INFO_H)
|
|
|
- .attr({ fill: "rgba(0,0,0,0)", stroke: "#000", strokeWidth: 2,shapeRendering:"crispEdges", });
|
|
|
- this.setInfoConfig()
|
|
|
-
|
|
|
-
|
|
|
- infoBox.mouseover(() => {
|
|
|
- // 移入
|
|
|
- this.isShowInfoEdit = true;
|
|
|
- });
|
|
|
- infoBox.mouseout(() => {
|
|
|
- // 移入
|
|
|
- this.isShowInfoEdit = false;
|
|
|
- });
|
|
|
- this.$EventBus.$off('onCreateSheet')
|
|
|
- this.$EventBus.$on('onCreateSheet',() => {
|
|
|
- this.isShowInfoEdit = false
|
|
|
- })
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
-};
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
-.sheet-info-container {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 826px;
|
|
|
- height: 342px;
|
|
|
-}
|
|
|
+ .sheet-info-container {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 826px;
|
|
|
+ height: 342px;
|
|
|
+ }
|
|
|
|
|
|
-/* .sheet-info-container:hover .info-edit{
|
|
|
+ /* .sheet-info-container:hover .info-edit{
|
|
|
display: flex;
|
|
|
} */
|
|
|
|
|
|
-.info-edit {
|
|
|
- position: absolute;
|
|
|
- top: 75px;
|
|
|
- right: 40px;
|
|
|
- width: 40px;
|
|
|
- height: 25px;
|
|
|
- background: #00a43a;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- font-size: 12px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 0;
|
|
|
-}
|
|
|
+ .info-edit {
|
|
|
+ position: absolute;
|
|
|
+ top: 75px;
|
|
|
+ right: 40px;
|
|
|
+ width: 40px;
|
|
|
+ height: 25px;
|
|
|
+ background: #00a43a;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
|
|
|
-.edit-title {
|
|
|
- margin: 10px 0;
|
|
|
-}
|
|
|
+ .edit-title {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
</style>
|
|
|
-
|
CrazyIter_Bin