人员/案件指纹编辑鼠标拖拽旋转事件

src/components/ImageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-09-09 09:28:46
- * @LastEditTime: 2022-01-07 14:04:54
+ * @LastEditTime: 2022-01-08 10:46:56
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
 -->
@@ -2105,6 +2105,8 @@ export default {
         // 更新newHeight和newWidth
         self.newHeight_source = sizeValue.newHeight;
         self.newWidth_source = sizeValue.newWidth;
+        // 更新图层存的角度值
+        document.querySelector('.tui-image-editor .upper-canvas').dataset.angle = 0
 
         // 更改canvas图层的宽高样式适配
         if (self.newHeight_source >= self.newWidth_source) {
@@ -2179,6 +2181,8 @@ export default {
         // 更新newHeight和newWidth
         self.newWidth_target = sizeValue.newWidth
         self.newHeight_target = sizeValue.newHeight
+        // 更新图层存的角度值
+        document.querySelector('.tui-image-editor2 .upper-canvas').dataset.angle = 0
 
         // console.log(self.newWidth_target);
         // console.log(self.newHeight_target);
@@ -2340,10 +2344,10 @@ export default {
 
     if (this.routeName == 'fhxxTL' || this.routeName == 'fhxxLT' || this.routeName == 'fhxxLL') {
       this.isFHxx = true
-      document.getElementsByTagName('body')[0].style.setProperty('--tuiBrushColorPickerRight', '100px');
+      document.getElementsByTagName('body')[0].style.setProperty('--tuiBrushColorPickerRight', '6.25rem');
     } else {
       this.isFHxx = false
-      document.getElementsByTagName('body')[0].style.setProperty('--tuiBrushColorPickerRight', '472px');
+      document.getElementsByTagName('body')[0].style.setProperty('--tuiBrushColorPickerRight', '29.5rem');
     }
 
     // 更换指掌纹

src/netmgr/cxyrd/cxyrd.js

 /*
  * @Author: your name
  * @Date: 2022-01-07 17:40:44
- * @LastEditTime: 2022-01-07 19:38:53
+ * @LastEditTime: 2022-01-08 10:21:42
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \指纹系统\founder_vue\src\netmgr\cxyrd\cxyrd.js
@@ -23,22 +23,22 @@ const _path = {
 export default {
   // 获取案件指纹
   ajfinger(_parameter) {
-    return fHttp.postJson(_path.ajfinger, _parameter)
+    return fHttp.postJson(_path.ajfinger, _parameter, fHttp.closeTip())
   },
   // 获取案件掌纹
   ajhand(_parameter) {
-    return fHttp.postJson(_path.ajhand, _parameter)
+    return fHttp.postJson(_path.ajhand, _parameter, fHttp.closeTip())
   },
   // 获取人员平面指纹
   ryfingerPain(_parameter) {
-    return fHttp.postJson(_path.ryfingerPain, _parameter)
+    return fHttp.postJson(_path.ryfingerPain, _parameter, fHttp.closeTip())
   },
   // 获取人员滚动指纹
   ryfingerRoll(_parameter) {
-    return fHttp.postJson(_path.ryfingerRoll, _parameter)
+    return fHttp.postJson(_path.ryfingerRoll, _parameter, fHttp.closeTip())
   },
   // 获取人员掌纹
   ryhand(_parameter) {
-    return fHttp.postJson(_path.ryhand, _parameter)
+    return fHttp.postJson(_path.ryhand, _parameter, fHttp.closeTip())
   },
 }

src/views/Editor/modules/imageEd.vue

 <!--
  * @Author: your name
  * @Date: 2021-10-22 11:36:10
- * @LastEditTime: 2022-01-04 11:51:02
+ * @LastEditTime: 2022-01-08 10:41:07
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
@@ -1247,6 +1247,9 @@ export default {
             // 旋转下拉框
             $(".rotateOptions").css("z-index", "99999");
           }, 1200);
+          // 更新tzd图层角度
+          document.querySelector('.tzdDrawing').dataset.angle = 0
+          console.log(document.querySelector('.tzdDrawing').dataset);
           // 更新newHeight和newWidth
           self.newHeight = sizeValue.newHeight;
           self.newWidth = sizeValue.newWidth;
@@ -1402,9 +1405,26 @@ export default {
         self.isHandSpace = false;
       }
     });
+    /**
+       * @description: 获取角度的方法
+       * @param {*} event
+       * @return {*}
+       */
+    function getDragAngle (event) {
+      var element = event.target;
+      var startAngle = parseFloat(element.dataset.angle) || 0;
+      var center = {
+        x: parseFloat(element.dataset.centerX) || 0,
+        y: parseFloat(element.dataset.centerY) || 0,
+      };
+      var angle = Math.atan2(center.y - event.clientY, center.x - event.clientX);
+      return angle - startAngle;
+    }
 
     var ins = null;
     var originPointer = {};
+    // 旋转
+    var isMove = false;
     document
       .querySelector(".tzdDrawing")
       .addEventListener("mousedown", function (e) {
@@ -1635,6 +1655,15 @@ export default {
             }
           }
         }
+        // 旋转
+        if (self.isActive_rotate) {
+          const element = e.target;
+          const rect = element.getBoundingClientRect();
+          element.dataset.centerX = rect.left + rect.width / 2;
+          element.dataset.centerY = rect.top + rect.height / 2;
+          element.dataset.angle = getDragAngle(e);
+          isMove = true;
+        }
       });
     // 去掉鼠标默认事件
     $(".tzdDrawing").bind("contextmenu", function (e) {
@@ -1835,6 +1864,15 @@ export default {
             }
           }
         }
+        // 旋转
+        if (self.isActive_rotate) {
+          if (isMove) {
+            var angle = getDragAngle(e);
+            let deg = 180 / (Math.PI / angle)
+            // self.historys.push('旋转')
+            self.inputRotationRange = deg
+          }
+        }
       });
     document
       .querySelector(".tzdDrawing")
@@ -1899,6 +1937,11 @@ export default {
           //console.log("删除");
           ins.setEnd();
         }
+        // 旋转
+        if (self.isActive_rotate) {
+          isMove = false;
+          e.target.dataset.angle = getDragAngle(e);
+        }
       });
 
     // 角度
@@ -1987,10 +2030,18 @@ export default {
       // 原尺寸显示下拉框
       self.isActive = false;
       $(".icon_size").css("background", "rgba(5, 95, 231, 0.05)");
-      // 旋转下拉框
-      self.isRotateOptions = false;
-      self.isActive_rotate = false;
-      $(".icon_rotate").css("background", "rgba(5, 95, 231, 0.05)");
+      // 证明是在图像上进行手动旋转
+      if (e.target.className == 'tzdDrawing' && self.isActive_rotate) {
+
+      } else {
+        self.isRotateOptions = false
+        self.isActive_rotate = false
+        $(".icon_rotate").css("background", "rgba(5, 95, 231, 0.05)");
+      }
+      // // 旋转下拉框
+      // self.isRotateOptions = false;
+      // self.isActive_rotate = false;
+      // $(".icon_rotate").css("background", "rgba(5, 95, 231, 0.05)");
     });
 
     // 判断指纹类型

src/views/Editor/modules/imageEdAJ.scss

@@ -128,11 +128,9 @@ $previewHeight: var(--previewHeight, 100%);
           margin-right: 40px;
         }
 
-        .disabled {
-          .disabled-img {
-            width: 64px;
-            height: 32px;
-          }
+        .disabled-img {
+          width: 64px;
+          height: 32px;
         }
 
         .size,

vue.config.js

 /*
  * @Author: your name
  * @Date: 2021-09-07 09:57:48
- * @LastEditTime: 2022-01-07 20:00:04
+ * @LastEditTime: 2022-01-08 10:49:55
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \指纹系统\founder_vue\vue.config.js
@@ -113,12 +113,12 @@ module.exports = {
         // target: "http://192.168.128.166:8099/", // 张 认定
         // target: "http://192.168.128.104:8099",  // 湖南-马
         // target: "http://192.168.128.116:8099",  // 湖南-王
-        // target: "http://192.168.128.109:8099",  // 湖南-张呈光
+        target: "http://192.168.128.109:8099",  // 湖南-张呈光
         // target: "http://172.18.116.73:8099/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/   ma
         // target: "http://127.0.0.1:8099",
         // target: "http://47.92.225.109:5602",
         // target: "http://www.meetfood.cn:2390", // 湖南-线上
-        target: "http://zwpt.xzclub.top:9333/",
+        // target: "http://zwpt.xzclub.top:9333/",
         // target: "http://192.168.128.101:8099",  // 江
         ws: true,
         changeOrigin: true,