离线考试图片阅卷

src/modules/marking/views/MarkPaperCheck.vue

@@ -255,12 +255,26 @@
         </div>
       </div>
     </section>
+
+    <el-dialog
+      title="预览"
+      width="400px"
+      :visible.sync="imageDialog"
+      @close="closeImageDialog"
+    >
+      <div
+        style="text-align: center;width: 90%;height: 90%"
+        v-html="imgHtml"
+      ></div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
 import { CORE_API, MARKING_API, DATA_PROCESS_API } from "@/constants/constants";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
 
 export default {
   data() {
@@ -289,7 +303,9 @@ export default {
       tags: [],
       loading: false,
       getOrgsSearchLoading: false,
-      markWorkList: []
+      markWorkList: [],
+      imgHtml: "",
+      imageDialog: false
     };
   },
   computed: {
@@ -314,6 +330,36 @@ export default {
     }
   },
   methods: {
+    viewPicture(imagesClass, index) {
+      const viewer = new Viewer(document.querySelector(imagesClass), {
+        container: "#app",
+        zIndex: 99999,
+        title: false,
+        toolbar: {
+          zoomIn: 1,
+          zoomOut: 1,
+          oneToOne: 1,
+          reset: 1,
+          prev: 1,
+          play: {
+            show: 0,
+            size: "large"
+          },
+          next: 1,
+          rotateLeft: 1,
+          rotateRight: 1,
+          flipHorizontal: 1,
+          flipVertical: 1
+        },
+        ready() {
+          viewer.view(index);
+        },
+        hidden() {
+          viewer.destroy();
+        }
+      });
+      viewer.show();
+    },
     changeMarkWork() {
       if (this.$route.query) {
         this.$router.push({ path: "/marking/mark_paper_check" });
@@ -493,21 +539,70 @@ export default {
     },
     //查看原卷
     viewPaper(row) {
-      if (row.examType != "OFFLINE") {
-        var studentPaperId = row.studentPaper.id;
-        var urls =
+      if (row.examType == "OFFLINE") {
+        let url = row.studentSubjectiveHtml;
+        if (/(.*)\.(jpg|gif|jpeg|png)$/.test(url)) {
+          this.imgHtml = this.parseImgs(url);
+          this.imageDialog = true;
+        } else {
+          window.open(url);
+        }
+      } else {
+        let studentPaperId = row.studentPaper.id;
+        let url =
           "/marking/view_paper/" +
           this.formSearch.workId +
           "/" +
           studentPaperId;
         this.$router.push({
-          path: urls
+          path: url
         });
-      } else {
-        var url = row.studentSubjectiveHtml;
-        window.open(url);
       }
     },
+    closeImageDialog() {
+      this.imageDialog = false;
+      this.imgHtml = "";
+    },
+    parseImgs(urls) {
+      let uuid = this.generateUUID();
+      let group1 = [];
+      let group2 = [];
+
+      let elements = urls.split(",");
+      for (let n = 0; n < elements.length; n++) {
+        let url = elements[n];
+
+        group1.push(
+          "<a onclick=\"window.viewPicture('#pic-" +
+            uuid +
+            "','" +
+            n +
+            '\')" target="_blank"><img class="photo-answer" src="' +
+            url +
+            '?x-oss-process=image/resize,m_lfit,h_200,w_200"/></a>'
+        );
+
+        group2.push('<img src="' + url + '"/>');
+      }
+
+      let html =
+        '<div class="photo-answers-block">' +
+        group1.join("") +
+        '</div><div id="pic-' +
+        uuid +
+        '" style="display:none">' +
+        group2.join("") +
+        "</div>";
+      return html;
+    },
+    generateUUID() {
+      let date = new Date().getTime();
+      return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function(c) {
+        let r = (date + Math.random() * 16) % 16 | 0;
+        date = Math.floor(date / 16);
+        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
+      });
+    },
     //打回
     backRefresh(row) {
       var userId = this.user.userId;
@@ -543,6 +638,9 @@ export default {
     this.getTags();
     this.getMarkWorks();
     this.operaQuery();
+  },
+  mounted() {
+    window.viewPicture = this.viewPicture;
   }
 };
 </script>
@@ -553,3 +651,17 @@ export default {
   white-space: nowrap;
 }
 </style>
+
+<style>
+img.photo-answer {
+  width: 100px;
+  padding: 10px;
+  height: 100px;
+}
+.photo-answers-block {
+  width: 350px !important;
+}
+.photo-answers-block a {
+  cursor: pointer;
+}
+</style>