图片旋转

src/modules/marking/views/TpMain.vue

@@ -71,6 +71,30 @@
         </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>
+      <img
+        :src="picForm.imgUrl"
+        height="100%"
+        width="100%"
+        :style="{
+          width: '90%',
+          transform: 'rotate(' + picForm.rotate + 'deg)'
+        }"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -83,7 +107,13 @@ export default {
       activeName: "first",
       drawing: {},
       tmpSignScores: this.signScores,
-      tmpMarkSign: this.markSign
+      tmpMarkSign: this.markSign,
+      picModelKey: Math.random(),
+      picModel: false,
+      picForm: {
+        imgUrl: "",
+        rotate: 0
+      }
     };
   },
   props: [
@@ -97,6 +127,21 @@ 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.picModelKey = Math.random();
+    },
+    viewPicture(src) {
+      this.picForm.imgUrl = src;
+      this.picModel = true;
+    },
     getPdfUrl() {
       var url = this.studentPaper.studentSubjectiveHtml;
       var content = "";
@@ -356,6 +401,7 @@ export default {
   updated() {},
   mounted() {
     //this.createMarkDraw();
+    window.viewPicture = this.viewPicture;
   },
   created() {
     EVENTHUB.$on("positionDiv", function(id) {
@@ -465,4 +511,7 @@ img {
 .paper >>> .photo-answers-block {
   width: 350px !important;
 }
+.paper >>> .photo-answers-block a {
+  cursor: pointer;
+}
 </style>

src/modules/marking/views/ViewPaper.vue

@@ -13,6 +13,30 @@
     </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
+        :src="picForm.imgUrl"
+        height="100%"
+        width="100%"
+        :style="{
+          width: '90%',
+          transform: 'rotate(' + picForm.rotate + 'deg)'
+        }"
+      />
+    </el-dialog>
   </div>
 </template>
 <script>
@@ -26,7 +50,13 @@ export default {
       examId: "",
       studentPaperId: "",
       examType: "",
-      html: ""
+      html: "",
+      picModelKey: Math.random(),
+      picModel: false,
+      picForm: {
+        imgUrl: "",
+        rotate: 0
+      }
     };
   },
   components: {
@@ -36,6 +66,21 @@ 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.picModelKey = Math.random();
+    },
+    viewPicture(src) {
+      this.picForm.imgUrl = src;
+      this.picModel = true;
+    },
     back() {
       this.$router.back();
     },
@@ -58,6 +103,22 @@ export default {
     this.studentPaperId = this.$route.params.studentPaperId;
     this.examType = this.$route.params.examType;
     this.getStudentPaper();
+  },
+  mounted() {
+    window.viewPicture = this.viewPicture;
   }
 };
 </script>
+<style>
+img.photo-answer {
+  width: 100px;
+  padding: 10px;
+  height: 100px;
+}
+.photo-answers-block {
+  width: 350px !important;
+}
+.photo-answers-block a {
+  cursor: pointer;
+}
+</style>