MIP添加旋转拖拽条

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

@@ -660,7 +660,7 @@ export default {
       if (PX < 0) return
       if (PX > boxHeight) return
       var height = PX * 100 / boxHeight
-      var index = Math.trunc(this.stack.imageIds.length * this.height / 100)
+      var index = Math.trunc(this.stack.imageIds.length * height / 100)
       index = index > this.stack.imageIds.length ? this.stack.imageIds.length : index < 0 ? 0 : index
       // if (!cornerstone.imageCache.getImageLoadObject(this.stack.imageIds[index])) return
       this.height = height

src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue

@@ -2006,13 +2006,14 @@ export default {
     },
     setToolToTarget(obj) {
       if (this.activeTool) {
-          toolGroupIds.forEach((toolGroupId) => {
+        var toolGroupIds = [ctToolGroupId, ptToolGroupId, fusionToolGroupId]
-            const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+        toolGroupIds.forEach((toolGroupId) => {
+          const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
 
-            toolGroup.setToolPassive(this.activeTool)
+          toolGroup.setToolPassive(this.activeTool)
-          })
+        })
-          this.activeTool = ''
+        this.activeTool = ''
-        }
+      }
       this.isNonTargetMeasurement = false
     },
     getTargetIdImage(

src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue

@@ -2,7 +2,6 @@
   <div
     class="viewport_container"
     :class="['item',activeIndex === index?'item_active':'']"
-    @mousemove="sliderMousemove"
     @mouseup="sliderMouseup"
   >
     <div :id="`viewport${index}`" ref="viewportCanvas" style="height: 100%;width:100%" />
@@ -63,8 +62,8 @@
       <div v-show="seriesInfo.sliceThickness && index !== 3">Slice Thickness: {{ Number(seriesInfo.sliceThickness).toFixed(2) }}mm</div>
       <div v-show="imageInfo.wwwc ">WW/WL: {{ imageInfo.wwwc }}</div>
     </div>
-    <div v-if="index!==4" ref="sliderBox" class="slider_box" :style="{background: index === 2?'#ddd':'#333'}" @click.stop="goViewer($event)">
+    <div v-if="index !== 4" ref="sliderBox" class="slider_box" :style="{background: index === 2?'#ddd':'#333'}" @click.stop="goViewer($event)">
-      <div :style="{top: sliderBoxHeight + '%'}" class="box" @mousedown.stop="sliderMousedown($event)" />
+      <div :style="{top: sliderBoxHeight + '%'}" class="box" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
     </div>
     <div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
       {{ markers.top }}
@@ -81,7 +80,9 @@
     </div>
     <div v-if="presetName" class="color_bar">
       <canvas id="colorBar_Canvas" />
-
+    </div>
+    <div v-if="index === 4" id="rotateBar" ref="rotateBar" class="rotate_slider_box" @click.stop="clickRotate($event)">
+      <div id="rotateSlider" :style="{left: rotateBarLeft + 'px'}" class="box" @click.stop.prevent="() => {return}" @mousedown.stop="rotateBarMousedown($event)" />
     </div>
   </div>
 </template>
@@ -95,11 +96,12 @@ import {
 
 import {
   utilities as toolsUtilities,
-  annotation
+  annotation,
+  Enums as toolsEnums
   // cursors
 } from '@cornerstonejs/tools'
 import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps'
-import { vec3 } from 'gl-matrix'
+import { vec3, mat4 } from 'gl-matrix'
 import html2canvas from 'html2canvas'
 const { getColormap } = utilities.colormap
 const {
@@ -167,11 +169,19 @@ export default {
         wwwc: null
       },
       sliderBoxHeight: 0,
+
       sliderInfo: {
         oldB: null,
         oldM: null,
         isMove: false
       },
+      rotateAngle: 0,
+      rotateBarLeft: 0,
+      rotateBarInfo: {
+        initX: null,
+        initLeft: null,
+        isMove: false
+      },
       isFirstRender: true,
       defaultWindowLevel: {},
       presetName: '',
@@ -197,25 +207,29 @@ export default {
     element.addEventListener(VOLUME_NEW_IMAGE, this.handleVolumeNewImage)
     element.addEventListener(Enums.Events.CAMERA_MODIFIED, this.handleCameraModified)
     element.addEventListener(Enums.Events.VOI_MODIFIED, this.handleVOIModified)
-    if (this.index !== 4) {
+    element.addEventListener(toolsEnums.Events.MOUSE_WHEEL, this.handletoolsMouseWheel)
-      element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.handleMouseMove)
+
-    }
+    element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.handleMouseMove)
+
     element.addEventListener('mouseleave', this.handleMouseLeave)
 
     document.addEventListener('mouseup', () => {
       this.sliderMouseup()
+      if (this.index === 4) {
+        this.rotateBarMouseup()
+      }
+    })
+    document.addEventListener('mousemove', (e) => {
+      this.sliderMousemove(e)
+      if (this.index === 4) {
+        this.rotateBarMousemove(e)
+      }
     })
-    // document.addEventListener('mousewheel', (e) => {
-    //   this.mousewheel(e)
-    // })
   },
   destroyed() {
 
   },
   methods: {
-    // mousewheel(e){
-    //   console.log(e)
-    // },
     handleVolumeNewImage(e) {
       const { imageIndex } = e.detail
       this.seriesInfo.imageIdIndex = imageIndex
@@ -300,6 +314,7 @@ export default {
       renderingEngine = getRenderingEngine(this.renderingEngineId)
       viewport = renderingEngine.getViewport(this.viewportId)
       if (!viewport) return
+
       var zoom = viewport.getZoom()
       if (!zoom) return
       this.imageInfo.zoom = zoom.toFixed(4)
@@ -309,6 +324,7 @@ export default {
       renderingEngine = getRenderingEngine(this.renderingEngineId)
       viewport = renderingEngine.getViewport(this.viewportId)
       if (!viewport) return
+
       var properties = viewport.getProperties()
       if (properties && properties.voiRange) {
         var { lower, upper } = properties.voiRange
@@ -320,17 +336,19 @@ export default {
       }
     },
     handleMouseMove(e) {
-      const { currentPoints } = e.detail
+      if (this.index !== 4) {
-      const worldPoint = currentPoints.world
+        const { currentPoints } = e.detail
-      const { imageData } = this.volume
+        const worldPoint = currentPoints.world
-      const index = imageData.worldToIndex(worldPoint)
+        const { imageData } = this.volume
+        const index = imageData.worldToIndex(worldPoint)
 
-      index[0] = Math.floor(index[0])
+        index[0] = Math.floor(index[0])
-      index[1] = Math.floor(index[1])
+        index[1] = Math.floor(index[1])
-      index[2] = Math.floor(index[2])
+        index[2] = Math.floor(index[2])
-      this.mousePosition.index = index
+        this.mousePosition.index = index
 
-      this.mousePosition.value = this.getValue(this.volume, worldPoint)
+        this.mousePosition.value = this.getValue(this.volume, worldPoint)
+      }
     },
     getValue(volume, worldPos) {
       const { dimensions, scalarData, imageData } = volume
@@ -357,7 +375,6 @@ export default {
       this.mousePosition.value = null
     },
     goViewer(e) {
-      // console.log(e)
       var height = e.offsetY * 100 / this.$refs['sliderBox'].clientHeight
       this.sliderBoxHeight = height
       var index = Math.trunc(this.seriesInfo.imageIds.length * this.sliderBoxHeight / 100)
@@ -365,6 +382,7 @@ export default {
         this.scroll(index)
       }
     },
+
     sliderMousedown(e) {
       var boxHeight = this.$refs['sliderBox'].clientHeight
       this.sliderInfo.oldB = parseInt(e.srcElement.style.top) * boxHeight / 100
@@ -378,16 +396,103 @@ export default {
       if (!this.sliderInfo.isMove) return
       var PX = this.sliderInfo.oldB - (this.sliderInfo.oldM - e.clientY)
       var boxHeight = this.$refs['sliderBox'].clientHeight
+      // 滚动翻页
       if (PX < 0) return
       if (PX > boxHeight) return
-      var height = PX * 100 / boxHeight
+      const height = PX * 100 / boxHeight
-      var index = Math.trunc(this.seriesInfo.imageIds.length * this.sliderBoxHeight / 100)
+      var index = Math.trunc(this.seriesInfo.imageIds.length * height / 100)
       index = index > this.seriesInfo.imageIds.length ? this.seriesInfo.imageIds.length : index < 0 ? 0 : index
       this.sliderBoxHeight = height
       if (this.seriesInfo.imageIdIndex !== index) {
         this.scroll(index)
       }
     },
+    handletoolsMouseWheel(e) {
+      const { viewportId, wheel } = e.detail
+      if (viewportId === 'PET_MIP_CORONAL') {
+        const container = document.getElementById('rotateBar')
+        const slider = document.getElementById('rotateSlider')
+        const containerWidth = container.offsetWidth
+        const sliderWidth = slider.offsetWidth
+        const maxX = containerWidth - sliderWidth
+        const { direction } = wheel
+        console.log(containerWidth - sliderWidth)
+        var x = Math.trunc(30 * ((containerWidth - sliderWidth) / 360))
+        if (direction > 0 && (this.rotateBarLeft + x) > maxX) {
+          this.rotateBarLeft = x - (containerWidth - sliderWidth - this.rotateBarLeft)
+        } else if (direction < 0 && (this.rotateBarLeft < x)) {
+          this.rotateBarLeft = containerWidth - (x - this.rotateBarLeft + sliderWidth)
+        } else {
+          this.rotateBarLeft = x * direction + this.rotateBarLeft
+        }
+      }
+    },
+    rotateBarMousemove(e) {
+      // 滚动旋转
+      if (!this.rotateBarInfo.isMove) return
+      const container = document.getElementById('rotateBar')
+      const slider = document.getElementById('rotateSlider')
+      const containerWidth = container.offsetWidth
+      const sliderWidth = slider.offsetWidth
+      let x = Math.trunc(e.clientX - this.rotateBarInfo.initX + this.rotateBarInfo.initLeft)
+      if (x < 0) x = 0
+      if (x > containerWidth - sliderWidth) x = containerWidth - sliderWidth
+      const deltaX = x - this.rotateBarLeft
+      const angle = Math.sin((deltaX * (360 / (containerWidth - sliderWidth))) * Math.PI / 180)
+      this.rotate(angle)
+      this.rotateBarLeft = x
+    },
+    rotateBarMousedown(e) {
+      console.log('rotateBarMousedown')
+      this.rotateBarInfo.initLeft = e.srcElement.offsetLeft
+      this.rotateBarInfo.initX = e.clientX
+      this.rotateBarInfo.isMove = true
+      e.stopImmediatePropagation()
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    rotate(angle) {
+      renderingEngine = getRenderingEngine(this.renderingEngineId)
+      viewport = renderingEngine.getViewport(this.viewportId)
+      const camera = viewport.getCamera()
+      const { viewUp, position, focalPoint } = camera
+      const [cx, cy, cz] = focalPoint
+      const [ax, ay, az] = [0, 0, 1]
+      const newPosition = [0, 0, 0]
+      const newFocalPoint = [0, 0, 0]
+      const newViewUp = [0, 0, 0]
+
+      const transform = mat4.identity(new Float32Array(16))
+      mat4.translate(transform, transform, [cx, cy, cz])
+      mat4.rotate(transform, transform, angle, [ax, ay, az])
+      mat4.translate(transform, transform, [-cx, -cy, -cz])
+      vec3.transformMat4(newPosition, position, transform)
+      vec3.transformMat4(newFocalPoint, focalPoint, transform)
+
+      mat4.identity(transform)
+      mat4.rotate(transform, transform, angle, [ax, ay, az])
+      vec3.transformMat4(newViewUp, viewUp, transform)
+
+      viewport.setCamera({
+        position: newPosition,
+        viewUp: newViewUp,
+        focalPoint: newFocalPoint
+      })
+
+      viewport.render()
+    },
+    clickRotate(e) {
+      // console.log('clickRotate')
+      // const container = document.getElementById('rotateBar')
+      // const containerWidth = container.offsetWidth
+      // const slider = document.getElementById('rotateSlider')
+      // const sliderWidth = slider.offsetWidth
+      // const x = e.clientX - this.rotateBarInfo.initX + this.rotateBarInfo.initLeft
+      // const deltaX = x - this.rotateBarLeft
+      // const angle = Math.sin((deltaX * (360 / (containerWidth - sliderWidth))) * Math.PI / 180)
+      // this.rotate(angle)
+      // this.rotateBarLeft = x
+    },
     scroll(index) {
       renderingEngine = getRenderingEngine(this.renderingEngineId)
       viewport = renderingEngine.getViewport(this.viewportId)
@@ -403,7 +508,9 @@ export default {
       })
       renderingEngine.render()
     },
-
+    rotateBarMouseup(e) {
+      this.rotateBarInfo.isMove = false
+    },
     sliderMouseup(e) {
       this.sliderInfo.isMove = false
     },
@@ -549,6 +656,25 @@ export default {
     z-index: 1;
     // background: #f44336;
   }
+  .rotate_slider_box{
+    position: absolute;
+    width: 380px;
+    height: 10px;
+    bottom: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #333;
+    cursor: pointer;
+    .box{
+      z-index:10;
+      background: #9e9e9e;
+      height: 100%;
+      width: 20px;
+      position: absolute;
+      top: 0;
+      cursor: move
+    }
+  }
   // .my_slider_box:after{
   //   content: '';
   //   position: absolute;

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

@@ -258,7 +258,7 @@ export default {
           // 是否有标记未保存
           var existUnSave = this.checkAnnotationStatus(this.questions)
           if (existUnSave) {
-            this.$alert(this.$t('trials:lugano:message:saveWarning'),this.$t('trials:lugano:fusionDialog:warning'))
+            this.$alert(this.$t('trials:lugano:message:saveWarning'), this.$t('trials:lugano:fusionDialog:warning'))
             return
           }
           var currentSpleenStatus = this.questionForm[this.spleenStatusId]
@@ -462,13 +462,13 @@ export default {
         this.loading = false
         return
       }
-      var obj = Object.assign({},annotationObj)
+      var obj = Object.assign({}, annotationObj)
       DicomEvent.$emit('getScreenshots', { questionId: obj.Id, visitTaskId: this.visitTaskId, lesionName: obj.OrderMarkName, markTool: obj.MarkTool, readingTaskState: this.readingTaskState, isMarked: !!obj.MeasureData }, async val => {
         var pictureObj = await this.uploadScreenshots(`${new Date().getTime()}`, val)
         var picturePath = pictureObj.isSuccess ? this.$getObjectName(pictureObj.result.url) : ''
 
         if (obj && obj.MeasureData) {
-          var annotation = Object.assign({},obj.MeasureData)
+          var annotation = Object.assign({}, obj.MeasureData)
           obj.MeasureData = JSON.stringify(annotation)
           obj.PicturePath = picturePath
           questionMarkInfoList.push(obj)