fix

src/modules/marking/views/TpMain.vue

@@ -71,39 +71,14 @@
         </el-tab-pane>
       </template>
     </el-tabs>
-    <el-dialog
-      title="查看图片"
-      width="800px"
-      :visible.sync="picModel"
-      :close-on-click-modal="false"
-      @close="closePicModel"
-    >
-      <el-button size="mini" icon="el-icon-refresh-left" @click="leftRotate"
-        >左旋</el-button
-      >
-      <el-button size="mini" icon="el-icon-refresh-right" @click="rightRotate"
-        >右旋</el-button
-      >
-      <div class="block-seperator"></div>
-      <div class="img-div">
-        <img
-          v-if="this.picForm.imgUrl != null"
-          :src="picForm.imgUrl"
-          height="100%"
-          width="100%"
-          :style="{
-            width: '100%',
-            transform: 'rotate(' + picForm.rotate + 'deg)'
-          }"
-        />
-      </div>
-    </el-dialog>
   </div>
 </template>
 <script>
 import { Drawing } from "../canvas/mark_sign";
 import { EVENTHUB } from "../constants/constants";
 import printJS from "print-js";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
 export default {
   data() {
     return {
@@ -130,21 +105,35 @@ export default {
     "answerHtml"
   ],
   methods: {
-    rightRotate() {
-      this.picForm.rotate = this.picForm.rotate + 90;
-    },
-    leftRotate() {
-      this.picForm.rotate = this.picForm.rotate - 90;
-    },
-    closePicModel() {
-      this.picForm.rotate = 0;
-      this.picModel = false;
-      this.picForm.imgUrl = null;
-      this.picModelKey = Math.random();
-    },
-    viewPicture(src) {
-      this.picForm.imgUrl = src;
-      this.picModel = true;
+    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();
     },
     getPdfUrl() {
       var url = this.studentPaper.studentSubjectiveHtml;

src/modules/marking/views/ViewPaper.vue

@@ -13,37 +13,14 @@
     </div>
     <br />
     <div style="margin-left:50px;width: 95%;height: 80%" v-html="html"></div>
-    <el-dialog
-      title="查看图片"
-      width="800px"
-      :visible.sync="picModel"
-      :close-on-click-modal="false"
-      @close="closePicModel"
-    >
-      <el-button size="mini" icon="el-icon-refresh-left" @click="leftRotate"
-        >左旋</el-button
-      >
-      <el-button size="mini" icon="el-icon-refresh-right" @click="rightRotate"
-        >右旋</el-button
-      >
-      <div class="block-seperator"></div>
-      <img
-        v-if="this.picForm.imgUrl != null"
-        :src="picForm.imgUrl"
-        height="100%"
-        width="100%"
-        :style="{
-          width: '90%',
-          transform: 'rotate(' + picForm.rotate + 'deg)'
-        }"
-      />
-    </el-dialog>
   </div>
 </template>
 <script>
 import { mapState } from "vuex";
 import { DATA_PROCESS_API } from "@/constants/constants";
 import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
+import "viewerjs/dist/viewer.css";
+import Viewer from "viewerjs";
 export default {
   data() {
     return {
@@ -67,21 +44,35 @@ export default {
     ...mapState({ user: state => state.user })
   },
   methods: {
-    rightRotate() {
-      this.picForm.rotate = this.picForm.rotate + 90;
-    },
-    leftRotate() {
-      this.picForm.rotate = this.picForm.rotate - 90;
-    },
-    closePicModel() {
-      this.picForm.rotate = 0;
-      this.picModel = false;
-      this.picForm.imgUrl = null;
-      this.picModelKey = Math.random();
-    },
-    viewPicture(src) {
-      this.picForm.imgUrl = src;
-      this.picModel = true;
+    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();
     },
     back() {
       this.$router.back();