OCR识别区新增旋转

src/assets/styles/icons.scss

@@ -7,6 +7,12 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
 
+  &-rotate-right {
+    background-image: url(../images/icon-rotate-right.png);
+  }
+  &-rotate-right-act {
+    background-image: url(../images/icon-rotate-right-act.png);
+  }
   // home
   &-location {
     background-image: url(../images/icon-location.png);

src/assets/styles/pages.scss

@@ -200,6 +200,8 @@
       margin: 0 0 0 20px;
       position: relative;
       background-color: $--color-text-gray-5;
+      border-radius: 10px;
+      overflow: hidden;
       // background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
 
       &-page {
@@ -272,11 +274,10 @@
 
   &-cont {
     position: absolute;
-    top: 50px;
+    top: 0;
     left: 0;
-    right: 0;
+    right: 300px;
     bottom: 0;
-    z-index: 7;
     overflow: hidden;
     &-disabled::before {
       content: "";
@@ -297,6 +298,14 @@
     display: block;
     width: 100%;
   }
+  &-side {
+    position: absolute;
+    width: 300px;
+    height: 100%;
+    top: 0;
+    right: 0;
+    background-color: $--color-text-gray-5;
+  }
 
   &-action {
     position: absolute;
@@ -304,9 +313,44 @@
     top: 0;
     height: 50px;
     z-index: 8;
-    background-color: #fff;
+    background-color: $--color-text-gray-5;
     padding: 10px;
   }
+  &-preview {
+    position: absolute;
+    width: 300px;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+  &-spin {
+    height: 300px;
+    position: relative;
+  }
+  &-spin-img {
+    position: absolute;
+    width: 300px;
+    height: 200px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    overflow: hidden;
+    box-shadow: 0 0 10px rgba(4, 5, 17, 0.3);
+  }
+  &-icon {
+    margin: 20px auto 0;
+    text-align: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    padding: 10px;
+    background-color: $--color-primary;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.9;
+    }
+  }
 }
 
 /* .cropper-line */

src/modules/record/components/LibraryDialog.vue

@@ -206,7 +206,7 @@ export default {
       // ocr
       isSetOcrSet: false,
       openOcr: false,
-      ocrArea: { x: null, y: null, width: null, height: null },
+      ocrArea: { x: null, y: null, width: null, height: null, rotate: 0 },
       ocrResult: [],
       ocrResultDialogIsShow: false
     };
@@ -357,7 +357,6 @@ export default {
         ocrArea[key] = Math.floor(ocrArea[key]);
       });
       this.ocrArea = this.$objAssign(this.ocrArea, ocrArea);
-
       this.$ls.set("ocrArea", this.ocrArea);
       this.isSetOcrSet = false;
       this.getOrcResult();

src/modules/record/components/OcrAreaSet.vue

@@ -3,9 +3,27 @@
     <div class="ocr-area-cont">
       <img :src="imageUrl" ref="editImage" />
     </div>
-    <div class="ocr-area-action">
-      <el-button type="primary" @click="confirm">确认</el-button>
-      <el-button @click="cancel">取消</el-button>
+    <div class="ocr-area-side">
+      <div class="ocr-area-preview">
+        <div class="ocr-area-spin">
+          <div
+            class="ocr-area-spin-img"
+            :style="spinStyle"
+            ref="OcrAreaSpinImg"
+          ></div>
+        </div>
+        <div
+          class="ocr-area-icon "
+          title="顺时针旋转90度"
+          @click="toRotateSpin"
+        >
+          <i class="icon icon-rotate-right-act"></i>
+        </div>
+      </div>
+      <div class="ocr-area-action">
+        <el-button type="primary" @click="confirm">确认</el-button>
+        <el-button @click="cancel">取消</el-button>
+      </div>
     </div>
   </div>
 </template>
@@ -29,7 +47,9 @@ export default {
   },
   data() {
     return {
-      cropper: ""
+      cropper: "",
+      rotate: 0,
+      spinStyle: {}
     };
   },
   mounted() {
@@ -39,6 +59,10 @@ export default {
     initCropper() {
       const _this = this;
       const defCodeArea = this.setting || {};
+      this.rotate = defCodeArea.rotate || 0;
+      this.spinStyle = {
+        transform: `translate(-50%, -50%) rotate(${this.rotate}deg)`
+      };
 
       this.cropper = new Cropper(this.$refs.editImage, {
         viewMode: 1,
@@ -46,16 +70,25 @@ export default {
         zoomable: false,
         minCropBoxWidth: 10,
         minCropBoxHeight: 10,
-        preview: _this.$refs.CodeAreaSpinImg,
+        preview: _this.$refs.OcrAreaSpinImg,
         ready() {
           _this.cropper.setData(defCodeArea);
           _this.$emit("on-ready");
         }
       });
     },
+    toRotateSpin() {
+      this.rotate += 90;
+      if (this.rotate === 360) this.rotate = 0;
+
+      this.spinStyle = {
+        transform: `translate(-50%, -50%) rotate(${this.rotate}deg)`
+      };
+    },
     confirm() {
       const codeArea = {
-        ...this.cropper.getData()
+        ...this.cropper.getData(),
+        rotate: this.rotate
       };
       this.$emit("confirm", codeArea);
     },