src/components/Dicom/DicomCanvas.vue

@@ -162,9 +162,7 @@ export default {
         isMove: false
       },
       mousePosition: { x: '', y: '', mo: '' },
-      markers: { top: '', right: '', bottom: '', left: '' },
-      orientationMarkers: [],
-      originalMarkers: []
+      markers: { top: '', right: '', bottom: '', left: '' }
     }
   },
 
@@ -415,7 +413,6 @@ export default {
       this.dicomInfo.location = position
     },
     getOrientationMarker(element) {
-      console.log('getOrientationMarker')
       const enabledElement = cornerstone.getEnabledElement(element)
       const imagePlane = cornerstone.metaData.get(
         'imagePlaneModule',
@@ -439,7 +436,6 @@ export default {
       if (!markers) {
         return
       }
-      
       this.orientationMarkers = [oppositeColumn, row, column, oppositeRow]
       this.originalMarkers = [oppositeColumn, row, column, oppositeRow]
       this.setMarkers()
@@ -701,11 +697,8 @@ export default {
     },
 
     resetRotate() {
-      if (this.originalMarkers.length > 0) {
-        this.orientationMarkers = [...this.originalMarkers]
-        this.setMarkers()
-      }
-      
+      this.orientationMarkers = [...this.originalMarkers]
+      this.setMarkers()
       var viewport = cornerstone.getViewport(this.canvas)
       viewport.hflip = false
       viewport.vflip = false
@@ -714,26 +707,24 @@ export default {
     },
 
     setRotate(hflip, vflip, angle, type) {
-      if (this.orientationMarkers.length > 0) {
-        var markers = [...this.orientationMarkers]
-        if (type === 2) {
-          // 垂直翻转
-          this.orientationMarkers[1] = markers[3]
+      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.setMarkers()
+        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()
       var viewport = cornerstone.getViewport(this.canvas)
       if (hflip) viewport.hflip = !viewport.hflip
       if (vflip) viewport.vflip = !viewport.vflip

src/components/Dicom/DicomViewer.vue

@@ -162,19 +162,6 @@
           <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>
@@ -182,7 +169,19 @@
             <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>
       <!-- 测量标注 -->
@@ -887,19 +886,13 @@ 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 div{
-  height: 25px;
-  line-height: 25px;
+.dicom-wrapper .dropdown-content p{
   cursor:point;
 }
-.dicom-wrapper .dropdown-content div:hover{
-  background-color: #16477b90;
-}
 
 </style>

src/views/trials/trials-panel/reading/dicoms/components/DicomCanvas.vue

@@ -1572,10 +1572,8 @@ export default {
 
     resetViewport() {
       this.toolState.viewportInvert = false
-      if (this.originalMarkers.length > 0) {
-        this.orientationMarkers = [...this.originalMarkers]
-        this.setMarkers()
-      }
+      this.orientationMarkers = [...this.originalMarkers]
+      this.setMarkers()
       var image = cornerstone.getImage(this.canvas)
       cornerstone.setViewport(
         this.canvas,
@@ -1691,10 +1689,8 @@ export default {
     },
 
     resetRotate() {
-      if (this.originalMarkers.length > 0) {
-        this.orientationMarkers = [...this.originalMarkers]
-        this.setMarkers()
-      }
+      this.orientationMarkers = [...this.originalMarkers]
+      this.setMarkers()
       var viewport = cornerstone.getViewport(this.canvas)
       viewport.hflip = false
       viewport.vflip = false
@@ -1709,25 +1705,23 @@ export default {
       }
     },
     setRotate(hflip, vflip, angle, type) {
-      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()
+      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()
       var viewport = cornerstone.getViewport(this.canvas)
       if (hflip) viewport.hflip = !viewport.hflip
       if (vflip) viewport.vflip = !viewport.vflip