From b9ee682ace042fb6147250e30a5be08bd14b7a3c Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Mon, 17 Jun 2024 17:03:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E5=B8=A7=E5=9B=BE=E5=83=8F=E6=97=8B?=
 =?UTF-8?q?=E8=BD=AC=E5=BC=82=E5=B8=B8=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dicom/DicomCanvas.vue          | 47 +++++++++++--------
 src/components/Dicom/DicomViewer.vue          | 35 ++++++++------
 .../reading/dicoms/components/DicomCanvas.vue | 46 ++++++++++--------
 3 files changed, 75 insertions(+), 53 deletions(-)

diff --git a/src/components/Dicom/DicomCanvas.vue b/src/components/Dicom/DicomCanvas.vue
index b3ba8769..752aea7f 100644
--- a/src/components/Dicom/DicomCanvas.vue
+++ b/src/components/Dicom/DicomCanvas.vue
@@ -162,7 +162,9 @@ export default {
         isMove: false
       },
       mousePosition: { x: '', y: '', mo: '' },
-      markers: { top: '', right: '', bottom: '', left: '' }
+      markers: { top: '', right: '', bottom: '', left: '' },
+      orientationMarkers: [],
+      originalMarkers: []
     }
   },
 
@@ -413,6 +415,7 @@ export default {
       this.dicomInfo.location = position
     },
     getOrientationMarker(element) {
+      console.log('getOrientationMarker')
       const enabledElement = cornerstone.getEnabledElement(element)
       const imagePlane = cornerstone.metaData.get(
         'imagePlaneModule',
@@ -436,6 +439,7 @@ export default {
       if (!markers) {
         return
       }
+      
       this.orientationMarkers = [oppositeColumn, row, column, oppositeRow]
       this.originalMarkers = [oppositeColumn, row, column, oppositeRow]
       this.setMarkers()
@@ -697,8 +701,11 @@ export default {
     },
 
     resetRotate() {
-      this.orientationMarkers = [...this.originalMarkers]
-      this.setMarkers()
+      if (this.originalMarkers.length > 0) {
+        this.orientationMarkers = [...this.originalMarkers]
+        this.setMarkers()
+      }
+      
       var viewport = cornerstone.getViewport(this.canvas)
       viewport.hflip = false
       viewport.vflip = false
@@ -707,24 +714,26 @@ export default {
     },
 
     setRotate(hflip, vflip, angle, type) {
-      var markers = [...this.orientationMarkers]
-      if (type === 2) {
-        // 垂直翻转
-        this.orientationMarkers[1] = markers[3]
+      if (this.orientationMarkers.length > 0) {
+        var markers = [...this.orientationMarkers]
+        if (type === 2) {
+          // 垂直翻转
+          this.orientationMarkers[1] = markers[3]
 
-        this.orientationMarkers[3] = markers[1]
-      } else if (type === 3) {
-        // 水平翻转
-        this.orientationMarkers[0] = markers[2]
-        this.orientationMarkers[2] = markers[0]
-      } else if (type === 4) {
-        // 左转90度
-        this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
-      } else if (type === 5) {
-        // 右转90度
-        this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
+          this.orientationMarkers[3] = markers[1]
+        } else if (type === 3) {
+          // 水平翻转
+          this.orientationMarkers[0] = markers[2]
+          this.orientationMarkers[2] = markers[0]
+        } else if (type === 4) {
+          // 左转90度
+          this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
+        } else if (type === 5) {
+          // 右转90度
+          this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
+        }
+        this.setMarkers()
       }
-      this.setMarkers()
       var viewport = cornerstone.getViewport(this.canvas)
       if (hflip) viewport.hflip = !viewport.hflip
       if (vflip) viewport.vflip = !viewport.vflip
diff --git a/src/components/Dicom/DicomViewer.vue b/src/components/Dicom/DicomViewer.vue
index 1af67276..3ebe1ca4 100644
--- a/src/components/Dicom/DicomViewer.vue
+++ b/src/components/Dicom/DicomViewer.vue
@@ -162,6 +162,19 @@
           <button :title="$t('trials:dicom-show:lens')" class="btn-link" data-tool="Magnify" @click="setToolActive($event,'Magnify')">
             <svg-icon icon-class="zoom" style="font-size:20px;" />
           </button>
+          <button :title="$t('trials:reading:button:rotate')" class="btn-link dropdown" data-tool="Rotate">
+            <svg-icon icon-class="rotate" style="font-size:20px;" />
+            <div class="dropdown-content">
+              <div @click.stop="setDicomCanvasRotate(1)">{{ $t('trials:reading:button:rotateDefault') }}</div>
+              <div @click.stop="setDicomCanvasRotate(2)">{{ $t('trials:reading:button:rotateHorizontal') }}</div>
+              <div @click.stop="setDicomCanvasRotate(3)">{{ $t('trials:reading:button:rotateVertical') }}</div>
+              <div @click.stop="setDicomCanvasRotate(4)">{{ $t('trials:reading:button:rotateTurnLeft') }}</div>
+              <div @click.stop="setDicomCanvasRotate(5)">{{ $t('trials:reading:button:rotateTurnRight') }}</div>
+            </div>
+          </button>
+          <button :title="$t('trials:reading:button:move')" class="btn-link" data-tool="Pan" @click="setToolActive($event,'Pan')">
+            <svg-icon icon-class="move" style="font-size:20px;" />
+          </button>
           <button :title="$t('trials:reading:button:fitWindow')" class="btn-link" data-tool="fitToWindow" @click="fitToType($event,'fitToWindow')">
             <svg-icon icon-class="fitToWindow" style="font-size:20px;" />
           </button>
@@ -169,19 +182,7 @@
             <svg-icon icon-class="fitToImage" style="font-size:20px;" />
           </button>
           <!-- <button title="旋转" class="btn-link dropdown" data-tool="Rotate" @click="setToolActive($event,'Rotate')"> -->
-          <button :title="$t('trials:reading:button:rotate')" class="btn-link dropdown" data-tool="Rotate">
-            <svg-icon icon-class="rotate" style="font-size:20px;" />
-            <div class="dropdown-content">
-              <p @click.stop="setDicomCanvasRotate(1)">{{ $t('trials:reading:button:rotateDefault') }}</p>
-              <p @click.stop="setDicomCanvasRotate(2)">{{ $t('trials:reading:button:rotateHorizontal') }}</p>
-              <p @click.stop="setDicomCanvasRotate(3)">{{ $t('trials:reading:button:rotateVertical') }}</p>
-              <p @click.stop="setDicomCanvasRotate(4)">{{ $t('trials:reading:button:rotateTurnLeft') }}</p>
-              <p @click.stop="setDicomCanvasRotate(5)">{{ $t('trials:reading:button:rotateTurnRight') }}</p>
-            </div>
-          </button>
-          <button :title="$t('trials:reading:button:move')" class="btn-link" data-tool="Pan" @click="setToolActive($event,'Pan')">
-            <svg-icon icon-class="move" style="font-size:20px;" />
-          </button>
+          
         </div>
       </div>
       <!-- 测量标注 -->
@@ -886,13 +887,19 @@ export default {
   background-color: #323232;
   min-width: 80px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  border: 1px solid #4e4e4e;
   padding: 5px;
 }
 .dicom-wrapper .dropdown:hover .dropdown-content {
     display: block;
 }
-.dicom-wrapper .dropdown-content p{
+.dicom-wrapper .dropdown-content div{
+  height: 25px;
+  line-height: 25px;
   cursor:point;
 }
+.dicom-wrapper .dropdown-content div:hover{
+  background-color: #16477b90;
+}
 
 </style>
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue b/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue
index 94163ac2..1661966c 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue
+++ b/src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue
@@ -1572,8 +1572,10 @@ export default {
 
     resetViewport() {
       this.toolState.viewportInvert = false
-      this.orientationMarkers = [...this.originalMarkers]
-      this.setMarkers()
+      if (this.originalMarkers.length > 0) {
+        this.orientationMarkers = [...this.originalMarkers]
+        this.setMarkers()
+      }
       var image = cornerstone.getImage(this.canvas)
       cornerstone.setViewport(
         this.canvas,
@@ -1689,8 +1691,10 @@ export default {
     },
 
     resetRotate() {
-      this.orientationMarkers = [...this.originalMarkers]
-      this.setMarkers()
+      if (this.originalMarkers.length > 0) {
+        this.orientationMarkers = [...this.originalMarkers]
+        this.setMarkers()
+      }
       var viewport = cornerstone.getViewport(this.canvas)
       viewport.hflip = false
       viewport.vflip = false
@@ -1705,23 +1709,25 @@ export default {
       }
     },
     setRotate(hflip, vflip, angle, type) {
-      var markers = [...this.orientationMarkers]
-      if (type === 2) {
-        // 垂直翻转
-        this.orientationMarkers[0] = markers[2]
-        this.orientationMarkers[2] = markers[0]
-      } else if (type === 3) {
-        // 水平翻转
-        this.orientationMarkers[1] = markers[3]
-        this.orientationMarkers[3] = markers[1]
-      } else if (type === 4) {
-        // 左转90度
-        this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
-      } else if (type === 5) {
-        // 右转90度
-        this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
+      if (this.orientationMarkers.length > 0) {
+        var markers = [...this.orientationMarkers]
+        if (type === 2) {
+          // 垂直翻转
+          this.orientationMarkers[0] = markers[2]
+          this.orientationMarkers[2] = markers[0]
+        } else if (type === 3) {
+          // 水平翻转
+          this.orientationMarkers[1] = markers[3]
+          this.orientationMarkers[3] = markers[1]
+        } else if (type === 4) {
+          // 左转90度
+          this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
+        } else if (type === 5) {
+          // 右转90度
+          this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
+        }
+        this.setMarkers()
       }
-      this.setMarkers()
       var viewport = cornerstone.getViewport(this.canvas)
       if (hflip) viewport.hflip = !viewport.hflip
       if (vflip) viewport.vflip = !viewport.vflip