Browse Source

试卷导出修改

zhangjie 4 years ago
parent
commit
664f71f4e6

+ 1 - 2
src/assets/styles/common-component.less

@@ -95,8 +95,7 @@
     position: absolute;
     height: 60px;
     bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
+    right: 20px;
     padding: 10px;
     font-size: 30px;
     color: @fontSub;

+ 77 - 4
src/components/SimpleImagePreview.vue

@@ -5,7 +5,7 @@
     title="图片预览"
     fullscreen
     footer-hide
-    :mask-closable="false"
+    @on-visible-change="visibleChange"
   >
     <div slot="header"></div>
     <div :class="[`${prefixCls}-close`]" @click="cancel">
@@ -32,13 +32,13 @@
           { [`${prefixCls}-imgs-nosition`]: nosition }
         ]"
         :style="styles"
+        v-move-ele.prevent.stop="{ mouseMove, mouseWheel }"
         v-if="modalIsShow"
-        @click="cancel"
       >
         <img
-          :key="curImage.id"
+          :key="curImage.url"
           :src="curImage.url"
-          :alt="curImage.studentName"
+          :alt="curImage.name"
           ref="PreviewImgDetail"
           @load="reizeImage"
         />
@@ -55,6 +55,27 @@
 
     <div :class="[`${prefixCls}-footer`]">
       <ul>
+        <li title="合适大小" @click="toOrigin">
+          <Icon type="md-expand" />
+        </li>
+        <li
+          title="放大"
+          @click="toMagnify"
+          :class="{
+            'li-disabled': transform.scale === maxScale
+          }"
+        >
+          <Icon type="md-add-circle" />
+        </li>
+        <li
+          title="缩小"
+          @click="toShrink"
+          :class="{
+            'li-disabled': transform.scale === minScale
+          }"
+        >
+          <Icon type="md-remove-circle" />
+        </li>
         <li title="旋转" @click.stop="toRotate">
           <Icon type="ios-refresh-circle" />
         </li>
@@ -64,6 +85,7 @@
 </template>
 
 <script>
+import MoveEle from "./move-ele";
 const prefixCls = "cc-image-preview";
 
 export default {
@@ -76,12 +98,15 @@ export default {
       }
     }
   },
+  directives: { MoveEle },
   data() {
     return {
       prefixCls,
       modalIsShow: false,
       styles: { width: "", height: "", top: "", left: "", transform: "" },
       initWidth: 500,
+      minScale: 0.2,
+      maxScale: 3,
       transform: {
         scale: 1,
         rotate: 0
@@ -91,7 +116,23 @@ export default {
       nosition: false
     };
   },
+  mounted() {
+    this.registWheelHandle();
+  },
   methods: {
+    visibleChange(visible) {
+      if (!visible) return;
+      // this.loading = true;
+      // this.$nextTick(() => {
+      //   this.registfileLoad();
+      // });
+    },
+    // registfileLoad() {
+    //   const imgDom = this.$refs.PreviewImgDetail;
+    //   imgDom.onload = () => {
+    //     this.reizeImage(imgDom);
+    //   };
+    // },
     reizeImage() {
       if (this.loadingSetT) clearTimeout(this.loadingSetT);
 
@@ -178,10 +219,42 @@ export default {
       // this.initData();
     },
     // dome-move
+    registWheelHandle() {
+      this.$refs.ReviewBody.addEventListener("wheel", e => {
+        e.preventDefault();
+        this.mouseWheel(e.wheelDeltaY);
+      });
+    },
+    mouseMove({ left, top }) {
+      this.styles.left = left + "px";
+      this.styles.top = top + "px";
+    },
+    mouseWheel(delta) {
+      if (delta < 0) {
+        this.toMagnify();
+      } else {
+        this.toShrink();
+      }
+    },
     setStyleTransform() {
       const { scale, rotate } = this.transform;
       this.styles.transform = `scale(${scale}, ${scale}) rotate(${rotate}deg)`;
     },
+    toOrigin() {
+      this.transform.scale = 1;
+      this.setStyleTransform();
+      this.reizeImage();
+    },
+    toMagnify() {
+      const scale = (this.transform.scale * 1.2).toFixed(2);
+      this.transform.scale = scale >= this.maxScale ? this.maxScale : scale;
+      this.setStyleTransform();
+    },
+    toShrink() {
+      const scale = (this.transform.scale * 0.75).toFixed(2);
+      this.transform.scale = scale <= this.minScale ? this.minScale : scale;
+      this.setStyleTransform();
+    },
     toRotate() {
       this.transform.rotate = this.transform.rotate + 90;
       this.setStyleTransform();

+ 51 - 0
src/components/move-ele.js

@@ -0,0 +1,51 @@
+export default {
+  inserted(el, { value, modifiers }, vnode) {
+    let [_x, _y] = [0, 0];
+    // 当前拖动事务开始前元素的left,top
+    let [oleft, otop] = [0, 0];
+    // 元素移动后的left,top
+    let [left, top] = [0, 0];
+
+    let moveHandle = function(e) {
+      if (modifiers.prevent) {
+        e.preventDefault();
+      }
+      left = oleft + e.pageX - _x;
+      top = otop + e.pageY - _y;
+
+      if (value && value.mouseMove) {
+        value.mouseMove({ left, top });
+      } else {
+        el.style.left = left + "px";
+        el.style.top = top + "px";
+      }
+    };
+
+    let upHandle = function(e) {
+      if (modifiers.prevent) {
+        e.preventDefault();
+      }
+      oleft = left;
+      otop = top;
+
+      if (value && value.mouseUp) value.mouseUp({ oleft, otop });
+
+      document.removeEventListener("mousemove", moveHandle);
+      document.removeEventListener("mouseup", upHandle);
+    };
+
+    el.addEventListener("mousedown", function(e) {
+      if (modifiers.prevent) {
+        e.preventDefault();
+      }
+      _x = e.pageX;
+      _y = e.pageY;
+      oleft = el.offsetLeft;
+      otop = el.offsetTop;
+      if (value && value.mouseDown) value.mouseDown({ oleft, otop });
+
+      document.addEventListener("mousemove", moveHandle);
+      document.addEventListener("mouseup", upHandle);
+    });
+  }
+};

+ 23 - 2
src/modules/manage/views/PaperExport.vue

@@ -68,7 +68,13 @@
             >
           </RadioGroup>
         </FormItem>
-        <FormItem label="分数段:">
+        <FormItem label="分数类型:">
+          <RadioGroup v-model="scoreType" @on-change="scoreTypeChange">
+            <Radio size="large" label="range">分数段</Radio>
+            <Radio size="large" label="score">分数</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem v-if="scoreType === 'range'" label="分数段:">
           <InputNumber
             v-model="scoreFilter.startScore"
             :min="1"
@@ -92,7 +98,7 @@
             clearable
           ></InputNumber>
         </FormItem>
-        <FormItem label="分数:">
+        <FormItem v-else label="分数:">
           <Input
             v-model="scoreFilter.scores"
             style="width: 600px;"
@@ -233,6 +239,12 @@ const SAVE_PATH_RULES = [
     val: "${subjectName}",
     seleted: true,
     disabled: true
+  },
+  {
+    name: "分数",
+    val: "${score}",
+    seleted: true,
+    disabled: false
   }
 ];
 
@@ -253,6 +265,7 @@ export default {
         scores: "",
         countPerScore: 1
       },
+      scoreType: "range",
       exams: [],
       IMAGE_TYPE,
       EXPORT_IMAGE_NAME_TYPE,
@@ -348,6 +361,14 @@ export default {
         }
       });
     },
+    scoreTypeChange(val) {
+      if (val === "range") {
+        this.scoreFilter.scores = "";
+      } else {
+        this.scoreFilter.startScore = null;
+        this.scoreFilter.endScore = null;
+      }
+    },
     async toExportScore() {
       if (this.taskRunning) return;
 

+ 2 - 2
src/plugins/imageOcr.js

@@ -136,7 +136,7 @@ function saveSliceImage(imgPath, paperInfo, collectConfig) {
   let imgObj = gm(imgPath);
   // 条形码覆盖区
   imgObj
-    .fill("#FFFFFF")
+    .fill("#5f5f5f")
     .drawRectangle(
       codeArea.x,
       codeArea.y,
@@ -146,7 +146,7 @@ function saveSliceImage(imgPath, paperInfo, collectConfig) {
 
   // 保密覆盖区
   imgObj
-    .fill("#FFFFFF")
+    .fill("#5f5f5f")
     .drawRectangle(
       coverArea.x,
       coverArea.y,