src/router/index.js

@@ -156,6 +156,12 @@ export const constantRoutes = [
     hidden: true,
     component: () => import('@/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt')
   },
+  {
+    path: '/fusion',
+    name: 'fusion',
+    hidden: true,
+    component: () => import('@/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index')
+  },
 
   {
     path: '/historyScreenshot',

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

@@ -140,8 +140,46 @@
         </div>
       </el-tooltip>
       <!-- 伪彩 -->
-      <colorMap v-show="isFusion" ref="colorMap" :unit="fusionOverlayModality === 'NM' ? 'counts' : 'g/ml'"
+      <el-tooltip class="item" effect="dark" :content="$t('trials:lugano:button:colormap')" placement="bottom">
-        :modality="fusionOverlayModality" @setColorMap="setColorMap" @voiChange="voiChange" />
+        <div class="colorBar" style="display:flex;justify-content: flex-start;align-items: center;position: relative;"
+          @mouseleave="isSlideMoving = false">
+          <div class="tool-wrapper" style="margin-right:0px" @click.stop="showColorBarPanel($event)"
+            @mouseleave="handleColorBarMouseout">
+            <div>
+              <!-- <canvas id="colorBarCanvas" /> -->
+              <div class="dropdown">
+                <div id="colorBar" class="icon" style="display: flex;align-items: center;width:266px">
+                  <canvas id="colorBarCanvas" />
+
+                </div>
+                <!-- 伪彩 -->
+                <div class="text">{{ $t('trials:lugano:button:colormap') }}</div>
+                <div class="dropdown-content" style="width:266px">
+                  <ul>
+                    <li v-for="(colorMap, index) in colorMaps" :key="colorMap"
+                      style="display: flex;align-items: center;margin-bottom:5px;padding:0 5px;justify-content: space-between;"
+                      :class="{ activeLi: rgbPresetName === colorMap }" @click="setColorMap(colorMap)">
+                      <canvas :id="`colorBarCanvas${index}`" />
+                      <span style="margin-left:5px;font-size: 10px;">{{ colorMap }}</span>
+
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div style="margin-left:-1px;border: 1px solid #424242;">
+            <el-input v-model="range" size="mini" style="width:120px" maxlength="3"
+              oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=''}" @change="upperRangeChange">
+              <template slot="append">g/ml</template>
+            </el-input>
+          </div>
+          <div id="slider" style="position: absolute;left: 6px;top:5px;cursor: pointer;">
+            <div id="sliderBox" class="slider" style="height: 17px;width: 10px;background-color: #909399;" />
+            <div id="slider-position" style="color:#ddd;font-size: 12px;">0</div>
+          </div>
+        </div>
+      </el-tooltip>
 
       <!-- 截屏 -->
       <!-- <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:screenShot')}`" placement="bottom">
@@ -179,14 +217,15 @@
         <Viewport ref="CT_AXIAL" :index="1" :active-index="activeIndex"
           :is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="ctSeries"
           :rendering-engine-id="renderingEngineId" viewport-id="CT_AXIAL" :volume="ctVolume"
-          :measure-datas="measureDatas" :style="1 === activeIndex ? viewportStyle : {}" />
+          :measure-datas="measureDatas" :style="1 === activeIndex ? viewportStyle : {}"
+          @upperRangeChange="upperRangeChange" />
         <Viewport ref="PT_AXIAL" :index="2" :active-index="activeIndex"
           :is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="petSeries"
           :rendering-engine-id="renderingEngineId" viewport-id="PT_AXIAL" :volume="ptVolume"
           :measure-datas="measureDatas" :style="2 === activeIndex ? viewportStyle : {}"
           @upperRangeChange="upperRangeChange" />
         <Viewport ref="FUSION_AXIAL" :index="3" :active-index="activeIndex"
-          :is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="petSeries" :ct-series-info="ctSeries"
+          :is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="petSeries"
           :rendering-engine-id="renderingEngineId" viewport-id="FUSION_AXIAL" :volume="ptVolume"
           :measure-datas="measureDatas" :rgb-preset-name="rgbPresetName" :style="3 === activeIndex ? viewportStyle : {}"
           @upperRangeChange="upperRangeChange" />
@@ -267,7 +306,6 @@ import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunc
 import { mat4, vec3 } from 'gl-matrix'
 import html2canvas from 'html2canvas'
 import readingChart from '@/components/readingChart'
-import colorMap from '@/views/trials/trials-panel/reading/dicoms3D/components/colorMap.vue'
 // import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction'
 // import vtkMath from '@kitware/vtk.js/Common/Core/Math'
 // import CircleROITool from './tools/CircleROITool'
@@ -357,8 +395,7 @@ export default {
     TableQuestions,
     CustomWwwcForm,
     FusionForm,
-    readingChart,
+    readingChart
-    colorMap
   },
   data() {
     return {
@@ -404,8 +441,6 @@ export default {
       upper: 6,
       isSlideMoving: false,
       viewportStyle: {},
-      isFusion: true,
-      fusionOverlayModality: 'PT',
       defaultWwwc: [
         { label: this.$t('trials:reading:button:wwwcDefault'), val: -1, ww: null, wc: null }, // 默认值
         { label: this.$t('trials:reading:button:wwwcCustom'), val: 0, ww: null, wc: null }, // 自定义
@@ -423,9 +458,7 @@ export default {
       activeCanvasWW: null,
       activeCanvasWC: null,
       fusion: { visible: false }, // 历史记录融合调窗
-      screenshotWindow: null,
+      screenshotWindow: null
-      hasVoiChanged: false,
-      lastUpper: null
       // initFirstAnnotation:false
     }
   },
@@ -480,11 +513,11 @@ export default {
     this.colorMaps = getColormapNames()
     this.colorMaps.unshift('hsv')
     this.$nextTick(() => {
-        // this.renderColorMaps()
+      this.renderColorMaps()
       this.handleElementsClick()
       this.initPage()
-        // this.upperRangeChange(this.range)
+      this.upperRangeChange(this.range)
-        // this.initSlider()
+      this.initSlider()
     })
 
     FusionEvent.$on('getAnnotations', () => {
@@ -711,7 +744,6 @@ export default {
       return new Promise(resolve => {
         getDicomSeriesInfo({ seriesId }).then(res => {
           var series = res.Result
-          this.fusionOverlayModality = series.Modality
           var imageIds = []
           var instanceList = []
           series.InstanceInfoList.forEach(instance => {
@@ -1025,7 +1057,7 @@ export default {
       // volume to use for the WindowLevelTool for the fusion viewports
 
       fusionToolGroup.addTool(WindowLevelTool.toolName, {
-        volumeId: ptVolumeId2
+        volumeId: ptVolumeId
       });
 
       [ctToolGroup, ptToolGroup, fusionToolGroup].forEach((toolGroup) => {
@@ -1595,106 +1627,42 @@ export default {
       var slider = document.getElementById('slider')
       var sliderBox = document.getElementById('sliderBox')
       var container = document.getElementById('colorBarCanvas')
-      
+      slider.addEventListener('mousedown', () => {
-      if (!slider || !sliderBox || !container) return
-      
-      slider.addEventListener('mousedown', (e) => {
         this.isSlideMoving = true
-        e.stopPropagation()
         // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
         // document.ondragstart = function() { return false }
       })
       document.addEventListener('mousemove', (e) => {
         if (this.isSlideMoving) {
-          var colorBarContainer = document.getElementById('colorBar')
+          var containerWidth = container.clientWidth
-          if (!colorBarContainer) return
-          
-          var containerWidth = colorBarContainer.clientWidth
           var sliderWidth = sliderBox.clientWidth
           var maxLeft = containerWidth - sliderWidth
-          
+          var left = e.clientX - container.getBoundingClientRect().left
-          // 获取相对于整个父容器的外边距位置
+          var position = null
-          var rect = colorBarContainer.getBoundingClientRect()
+          position = left
-          var left = e.clientX - rect.left - (sliderWidth / 2)
-          
           if (left < 0) {
-            left = 0
+            left = 6
+            position = 0
           } else if (left > maxLeft) {
-            left = maxLeft
+            left = maxLeft + 6
+            position = maxLeft
           }
 
           slider.style.left = left + 'px'
           var positionValue = document.getElementById('slider-position')
           var upper = this.range
-          var position = parseInt((left / maxLeft) * upper)
+          position = parseInt((position / maxLeft) * upper)
-          
-          if (positionValue) {
           positionValue.textContent = position
-          }
           this.upper = position
-          
-          if (this.sliderTimeout) {
-            cancelAnimationFrame(this.sliderTimeout)
-          }
-          this.sliderTimeout = requestAnimationFrame(() => {
           this.voiChange(position)
-          })
         }
       })
-      document.addEventListener('mouseup', (e) => {
+      document.addEventListener('mouseup', () => {
-        if (this.isSlideMoving) {
         this.isSlideMoving = false
-          if (this.sliderTimeout) {
-            cancelAnimationFrame(this.sliderTimeout)
-          }
-          this.voiChange(this.upper)
-        }
         // document.onselectstart = null
         // document.ondragstart = null
       })
     },
-    voiChange(v) {
-      console.log(this.lastUpper, this.hasVoiChanged, v)
-      if (this.lastUpper === v && this.hasVoiChanged) return;
-      this.lastUpper = v;
-      this.hasVoiChanged = true;
-      let viewportIds = ['FUSION_AXIAL', 'PT_AXIAL', 'PET_MIP_CORONAL']
-      viewportIds.map(viewportId => {
-        // const volumeId = viewportId === 'viewportId' ? ptVolumeId : ctVolumeId
-        const volumeId = viewportId === 'FUSION_AXIAL' ? ptVolumeId2 : ptVolumeId
-        const voiRange = { lower: 0, upper: v }
-        const viewport = (
-          renderingEngine.getViewport(viewportId)
-        )
-        if (!viewport) return
-        
-        viewport.setProperties({ voiRange }, volumeId)
-        viewport.render()
-        this.$refs[viewport.id] && this.$refs[viewport.id].setWwWc()
-      })
-      // 反向同步到 colorMap 组件，更新滑块
-      if (this.$refs.colorMap) {
-        this.$refs.colorMap.changeVoi(v)
-      }
-    },
-    async setColorMap(rgbPresetName) {
-      this.rgbPresetName = rgbPresetName
-      let viewports = ['FUSION_AXIAL', 'PT_AXIAL', 'PET_MIP_CORONAL']
-      viewports.map(v => {
-        this.$refs[v] && this.$refs[v].setPreset(this.rgbPresetName)
-        const renderingEngine = getRenderingEngine(renderingEngineId)
-
-        const viewport = (
-          renderingEngine.getViewport(v)
-        )
-
-        if (!viewport) return
-        
-        const volumeId = v === 'FUSION_AXIAL' ? ptVolumeId2 : ptVolumeId
-        viewport.setProperties({ colormap: { name: rgbPresetName } }, volumeId)
-        viewport.render()
-      })
-    },
     upperRangeChange(v) {
       if (this.lastUpper === v) return;
       this.lastUpper = v;
@@ -1703,11 +1671,111 @@ export default {
       if (v === 0) {
         return
       }
-      this.voiChange(v)
+      var sliderBox = document.getElementById('sliderBox')
-      // 反向同步到 colorMap 组件，更新滑块
+      var container = document.getElementById('colorBarCanvas')
-      if (this.$refs.colorMap) {
+      var containerWidth = container.clientWidth
-        this.$refs.colorMap.changeVoi(v)
+      var sliderWidth = sliderBox.clientWidth
+      var maxLeft = containerWidth - sliderWidth
+      var left = (this.upper / this.range) * maxLeft
+      if (left < 0) {
+        left = 6
+      } else if (left >= maxLeft) {
+        left = maxLeft + 6
       }
+      var slider = document.getElementById('slider')
+      slider.style.left = left + 'px'
+      var positionValue = document.getElementById('slider-position')
+      positionValue.textContent = this.upper
+
+      this.voiChange(v)
+    },
+    renderColorMaps() {
+      this.createColorBar(this.rgbPresetName, 'colorBarCanvas', 256, 15)
+      this.$refs['FUSION_AXIAL'].setPreset(this.rgbPresetName)
+      this.colorMaps.forEach((e, index) => {
+        this.createColorBar(e, `colorBarCanvas${index}`, 180, 15)
+      })
+    },
+    getVOIRange(viewportId, volumeId) {
+      const defaultImageRange = { lower: -1000, upper: 1000 }
+      const viewport = (
+        renderingEngine.getViewport(viewportId)
+      )
+      const volumeActor = volumeId
+        ? viewport.getActor(volumeId)
+        : viewport.getDefaultActor()
+
+      if (!volumeActor || !csUtils.isImageActor(volumeActor)) {
+        return defaultImageRange
+      }
+
+      const voiRange = (volumeActor.actor)
+        .getProperty()
+        .getRGBTransferFunction(0)
+        .getRange()
+
+      return voiRange[0] === 0 && voiRange[1] === 0
+        ? defaultImageRange
+        : { lower: voiRange[0], upper: voiRange[1] }
+    },
+    voiChange(v) {
+      this.lastUpper = v;
+      let viewportIds = ['FUSION_AXIAL', 'PT_AXIAL', 'PET_MIP_CORONAL']
+      viewportIds.map(viewportId => {
+        // const volumeId = viewportId === 'viewportId' ? ptVolumeId : ctVolumeId
+        const volumeId = ptVolumeId
+        const voiRange = { lower: 0, upper: v }
+        const viewport = (
+          renderingEngine.getViewport(viewportId)
+        )
+        if (!viewport) return
+        // const volumeId = viewport.getVolumeId()
+        // const viewportsContainingVolumeUID = csUtils.getViewportsWithVolumeId(
+        //   volumeId,
+        //   viewport.renderingEngineId
+        // )
+
+        viewport.setProperties({ voiRange }, volumeId)
+        viewport.render()
+        this.$refs[viewport.id].setWwWc()
+        // viewportsContainingVolumeUID.forEach((vp) => {
+        //   vp.render()
+        //   this.$refs[vp.id].setWwWc()
+        //   console.log(vp.id)
+        // }) 
+      })
+
+    },
+    async setColorMap(rgbPresetName) {
+      this.rgbPresetName = rgbPresetName
+      let viewports = ['FUSION_AXIAL', 'PT_AXIAL', 'PET_MIP_CORONAL']
+      viewports.map(v => {
+        this.$refs[v].setPreset(this.rgbPresetName)
+        this.$refs[v].renderColorBar(this.rgbPresetName)
+        this.createColorBar(this.rgbPresetName, 'colorBarCanvas', 256, 15)
+        const renderingEngine = getRenderingEngine(renderingEngineId)
+
+        const viewport = (
+          renderingEngine.getViewport(v)
+        )
+
+        viewport.setProperties({ colormap: { name: rgbPresetName } }, ptVolumeId)
+        viewport.render()
+      })
+      // this.$refs['FUSION_AXIAL'].setPreset(this.rgbPresetName)
+      // this.$refs['FUSION_AXIAL'].renderColorBar(this.rgbPresetName) 
+      // this.createColorBar(this.rgbPresetName, 'colorBarCanvas', 256, 15)
+      // const renderingEngine = getRenderingEngine(renderingEngineId)
+
+      // const viewport = (
+      //   renderingEngine.getViewport(viewportIds.FUSION.AXIAL)
+      // )
+
+      // viewport.setProperties({ colormap: { name: rgbPresetName } }, ptVolumeId)
+      // // viewport.setProperties({ colormap: { name: rgbPresetName }}, ctVolumeId)
+      // viewport.render()
+      // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
+      // document.ondragstart = function() { return false }
     },
     setPetColorMap(volumeInfo) {
       const { volumeActor } = volumeInfo

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

@@ -19,8 +19,6 @@
       </div>
       <div v-if="index !== 4">Image: #{{ `${seriesInfo.imageIdIndex + 1} / ${seriesInfo.imageMaxLength}` }}</div>
       <div v-if="index === 1 || index === 2">{{ seriesInfo.modality }}</div>
-      <div v-if="index === 3">{{ ctSeriesInfo ? ctSeriesInfo.modality + ' / ' + seriesInfo.modality : seriesInfo.modality }}</div>
-      <div v-if="index === 4">MIP</div>
     </div>
     <!-- 描述信息 -->
     <div
@@ -137,12 +135,6 @@ export default {
         return {}
       }
     },
-    ctSeriesInfo: {
-      type: Object,
-      default() {
-        return null
-      }
-    },
     renderingEngineId: {
       type: String,
       required: true
@@ -336,7 +328,7 @@ export default {
       let properties = viewport.getProperties()
       if (this.index === 3) {
         // const volumeId = viewport.getVolumeId()
-        const volumeId = `cornerstoneStreamingImageVolume:PT_VOLUME_ID2`
+        const volumeId = `cornerstoneStreamingImageVolume:PT_VOLUME_ID`
         properties = viewport.getProperties(volumeId)
       }
       if (properties && properties.voiRange) {
@@ -346,10 +338,6 @@ export default {
           upper
         )
         this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
-        // 当为PT或融合视口时，触发外部联动
-        if (this.index !== 1 && this.index !== 4) {
-          this.$emit('upperRangeChange', Math.round(upper))
-        }
       }
     },
     handleMouseMove(e) {
@@ -582,7 +570,7 @@ export default {
     setWwWc() {
       let properties = viewport.getProperties()
       if (this.index === 3) {
-        properties = viewport.getProperties(`cornerstoneStreamingImageVolume:PT_VOLUME_ID2`)
+        properties = viewport.getProperties(`cornerstoneStreamingImageVolume:PT_VOLUME_ID`)
       }
       if (properties && properties.voiRange) {
         var { lower, upper } = properties.voiRange
@@ -594,8 +582,7 @@ export default {
           upper
         )
         this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
-        // 当为PT或融合视口时，触发外部联动
+        if (this.index !== 1) {
-        if (this.index !== 1 && this.index !== 4) {
           this.$emit('upperRangeChange', Math.round(upper))
         }
       }

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

@@ -0,0 +1,106 @@
+<template>
+  <div v-loading="loading" class="ecrf-wrapper">
+     <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
+        评估说明
+      </h4>
+    <el-form
+      ref="questions"
+      size="small"
+      :model="questionForm"
+    >
+      <el-form-item
+        label="访视点备注" 
+        prop="note"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-input
+          v-model="questionForm.note"
+          :disabled="readingTaskState >= 2"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4}"
+          maxlength="500"
+        />
+      </el-form-item>
+      <el-form-item v-if="readingTaskState < 2">
+        <div style="text-align:right">
+          <el-button size="mini" @click="handleSave">{{ $t('common:button:save') }}</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'ECRF',
+  data() {
+    return {
+      loading: false,
+      questionForm: {
+        note: ''
+      },
+      readingTaskState: 1,
+      isBaseLineTask: false,
+      visitTaskId: ''
+    }
+  },
+  mounted() {
+    this.trialId = this.$route.query.trialId
+    this.visitTaskId = this.$route.query.visitTaskId
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    handleSave() {
+      this.$refs['questions'].validate((valid) => {
+        if (!valid) return
+        
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .ecrf-wrapper{
+
+    ::v-deep .el-form-item__label{
+      color: #c3c3c3;
+      text-align: left;
+    }
+    ::v-deep .el-input__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    ::v-deep .el-textarea__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    ::v-deep .el-form-item{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+    ::v-deep .el-form-item__content{
+      flex: 1;
+    }
+    ::v-deep .el-button--mini, .el-button--mini.is-round {
+    padding: 7px 10px;
+  }
+    .el-form-item__content
+    .el-select{
+      width: 100%;
+    }
+  }
+
+  </style>
+

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

@@ -0,0 +1,148 @@
+<template>
+  <div v-loading="loading" class="ecrf-wrapper">
+     <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
+        影像质量
+      </h4>
+    <el-form
+      ref="questions"
+      size="small"
+      :model="questionForm"
+    >
+      <el-form-item 
+        label="影像质量"
+        prop="imageQuality"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-radio-group v-model="questionForm.imageQuality">
+          <el-radio
+            v-for="item of $d.ImageQualityEvaluation"
+            :key="item.id"
+            :label="item.value"
+          >
+            {{ item.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item 
+        v-if="questionForm.imageQuality === 2"
+        label="影像质量问题" 
+        prop="imageQualityIssues"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-select
+          v-model="questionForm.imageQualityIssues"
+          :disabled="readingTaskState >= 2"
+          clearable
+        >
+          <el-option
+            v-for="item of $d.ImageQualityIssues"
+            :key="item.id"
+            :value="item.value"
+            :label="item.label"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="questionForm.imageQualityIssues === 5"
+        label="影像质量备注" 
+        prop="note"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-input
+          v-model="questionForm.note"
+          :disabled="readingTaskState >= 2"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4}"
+          maxlength="500"
+        />
+      </el-form-item>
+      <el-form-item v-if="readingTaskState < 2">
+        <div style="text-align:right">
+          <el-button size="mini" @click="handleSave">{{ $t('common:button:save') }}</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'ECRF',
+  data() {
+    return {
+      loading: false,
+      questionForm: {
+        imageQuality: null,
+        imageQualityIssues: null,
+        note: ''
+      },
+      readingTaskState: 1,
+      isBaseLineTask: false,
+      visitTaskId: ''
+    }
+  },
+  mounted() {
+    this.trialId = this.$route.query.trialId
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    handleSave() {
+      this.$refs['questions'].validate((valid) => {
+        if (!valid) return
+        
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .ecrf-wrapper{
+
+    ::v-deep .el-form-item__label{
+      color: #c3c3c3;
+      text-align: left;
+    }
+    ::v-deep .el-input__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    ::v-deep .el-textarea__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    ::v-deep .el-form-item{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+    ::v-deep .el-form-item__content{
+      flex: 1;
+    }
+    ::v-deep .el-button--mini, .el-button--mini.is-round {
+    padding: 7px 10px;
+  }
+    .el-form-item__content
+    .el-select{
+      width: 100%;
+    }
+  }
+
+  </style>
+

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

@@ -0,0 +1,354 @@
+<template>
+  <div class="measurement-wrapper">
+
+    <div class="container">
+      <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
+        核医学评估
+      </h4>
+      <div class="lesion_list">
+        <div class="flex-row" style="margin:3px 0;">
+          <div class="title">盆腔淋巴结</div>
+        </div>
+        <el-table
+          :data="questions"
+          style="width: 100%"
+          row-key="rowIndex"    
+          :expand-row-keys="expands"
+          @expand-change="expandSelect"
+          size="mini"
+        >
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form :ref="props.row.rowIndex" size="small" :model="props.row" label-width="80px" style="padding-right: 10px">
+                <el-form-item label="部位">
+                  <el-input
+                    v-model="props.row.part"
+                    disabled
+                  />
+                </el-form-item>
+                <el-form-item 
+                  label="转移灶"
+                  prop="distraction"
+                  :rules="[
+                    { required: true,
+                      message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
+                  ]"
+                >
+                  <el-select v-model="props.row.distraction" style="width:100%;">
+                    <el-option label="阴性" :value="1"></el-option>
+                    <el-option label="阳性" :value="2"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="SUVmax">
+                  <el-input
+                    v-model="props.row.suvMax"
+                    disabled
+                  />
+                </el-form-item>
+                <el-form-item >
+                  <div style="text-align:right">
+                    <el-button v-if="props.row.annotation" size="mini" @click="clearAnnotation(props.row)">{{ $t('trials:reading:button:removeMark') }}</el-button>
+                    <el-button size="mini" @click="handleSave(props.row)">{{ $t('common:button:save') }}</el-button>
+                  </div>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="部位"
+            prop="part">
+          </el-table-column>
+          <el-table-column
+            label="转移灶"
+            prop="distraction">
+            <template slot-scope="scope">
+              {{scope.row.distraction === 1 ? '阴性' : scope.row.distraction === 2 ? '阳性' : ''}}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="SUVmax"
+            prop="suvMax">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import FusionEvent from './../FusionEvent'
+export default {
+  name: 'TableQuestionList',
+  components: {
+  },
+  data() {
+    return {
+      height: window.innerHeight - 140,
+      questions: [
+        { 
+          rowIndex: '001',
+          part: '髂内',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        },
+        {
+          rowIndex: '002',
+          part: '髂外',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        },
+        {
+          rowIndex: '003',
+          part: '髂总',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        },
+        {
+          rowIndex: '004',
+          part: '闭孔',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        }
+      ],
+      visitTaskId: '',
+      isCurrentTask: false,
+      loading: false,
+      readingTaskState: 1,
+      isBaseLineTask: false,
+      taskBlindName: '',
+      expands:[]
+    }
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    expandSelect(row, expandedRows) {
+      this.expands = []
+      if (expandedRows.length > 0) {
+        row ? this.expands.push(row.rowIndex) : ''
+      }
+      if (this.expands.length > 0 && row.annotation) {
+        FusionEvent.$emit('imageLocation', { annotation: row.annotation })
+      }
+    },
+    async clearAnnotation(row) {
+       // 是否确认清除标记？
+      const confirm = await this.$confirm(
+        this.$t('trials:reading:warnning:msg47'),
+        {
+          type: 'warning',
+          distinguishCancelAndClose: true
+        }
+      )
+      if (confirm !== 'confirm') return
+      let i = this.questions.findIndex(i=>i.rowIndex === row.rowIndex)
+      FusionEvent.$emit('removeAnnotation', { annotation: this.questions[i].annotation })
+      this.questions[i].annotation = null
+      this.questions[i].suvMax = null
+    },
+    async handleSave(row) {
+      let loading = null
+      try {
+        let valid = await this.$refs[row.rowIndex].validate()
+        if (!valid) return
+        loading = this.$loading({ fullscreen: true })
+        setTimeout(() => {
+          // 模拟保存成功
+          loading.close()
+          this.$message.success(this.$t('common:message:savedSuccessfully'))
+
+          // 可以在这里添加更多的逻辑，比如更新页面上的某些元素
+        }, 2000); 
+      } catch(e) {
+        if (loading) {
+          loading.close()
+        }
+      }
+    },
+    setActiveCollapse(annotationUID) {
+      for (let i = 0; i < this.questions.length; i++) {
+        let obj = this.questions[i]
+        if (obj.annotation && obj.annotation.data && obj.annotation.data.annotationUID === annotationUID) {
+          this.expands = [this.questions[i].rowIndex]
+          break
+        }
+      }
+    },
+    isCanActiveTool(toolName) {
+      if (this.expands.length > 0) {
+        let isExist = this.isExistMeasureData(this.expands[0])
+        return { isCanActiveTool: isExist, reason: '' }
+      } else {
+        return { isCanActiveTool: false, reason: '' }
+      }
+    },
+    isExistMeasureData(rowIndex) {
+      let i = this.questions.findIndex(i=>i.rowIndex === rowIndex)
+      if (this.questions[i].annotation) {
+        return false
+      } else {
+        return true
+      }
+    },
+    // modifyMeasuredData(measureObj) {
+    //   if (measureObj.questionInfo) {
+    //     this.activeItem.activeCollapseId = measureObj.questionInfo.QuestionId
+    //     this.activeItem.activeRowIndex = String(measureObj.questionInfo.RowIndex)
+    //     this.activeName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
+    //     const refName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
+    //     if (this.$refs[refName]) {
+    //       this.$refs[refName][0].setMeasureData(measureObj.measureData)
+    //     }
+    //   }
+    // },
+    // 设置测量数据
+    setMeasuredData(measureData) {
+      if (measureData.data && measureData.data.data && measureData.data.data.remark ) {
+        // 编辑
+        // 展开并更新标记信息
+        let remark = measureData.data.data.remark
+        let i = this.questions.findIndex(i=>i.part === remark)
+        this.questions[i].suvMax = measureData.suvMax
+        this.questions[i].annotation = measureData
+        this.expands = [this.questions[i].rowIndex]
+      } else {
+        if (this.expands.length > 0) {
+        let i = this.questions.findIndex(i=>i.rowIndex === this.expands[0])
+        if (measureData.data && measureData.data.data) {
+          measureData.data.data.remark = this.questions[i].part
+        }
+        
+        this.questions[i].annotation = measureData
+      }
+      }
+      
+    },
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.measurement-wrapper{
+
+  // .container{
+  //   padding: 10px;
+  // }
+  .title{
+    padding: 5px;
+    font-weight: bold;
+    color: #ddd;
+    font-size: 15px;
+
+  }
+  .add-icon{
+    padding: 5px;
+    font-weight: bold;
+    color: #ddd;
+    font-size: 15px;
+    border: 1px solid #938b8b;
+    margin-bottom: 2px;
+    cursor: pointer;
+  }
+  .add-icon:hover{
+    background-color: #607d8b;
+  }
+
+  .flex-row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: #424242;
+
+  }
+  .lesion_list{
+    position: relative;
+    ::v-deep .el-table, .el-table__expanded-cell {
+      background-color: #000;
+      color: #fff;
+      border-color:#444444;
+      .el-form-item__label {
+        color: #fff;
+      }
+      .el-input__inner {
+        background-color: rgba(0, 0, 0, .1);
+        border-color: #606266;
+        color: #fff;
+      }
+      .el-input.is-disabled .el-input__inner {
+        background-color: #303133;
+        border-color: #444444;
+        color: #c0c4cc;
+        cursor: not-allowed;
+      }
+    }
+    
+
+    ::v-deep .el-table th, .el-table tr {
+      background-color: #000;
+      color: #fff;
+      border-color:#444444;
+    }
+    ::v-deep .el-table__body tr > td{
+      background-color:#000 !important;
+      color: #fff;
+      border-color:#444444;
+    }
+    // ::v-deep .el-table__body tr:hover > td{
+    //   background-color:#858282 !important;
+    //   color: #fff;
+    //   border-color:#444444;
+    // }
+    ::v-deep .el-table--border th.gutter:last-of-type{
+      border: none;
+    }
+    ::v-deep .el-card__header{
+      border: none;
+      padding: 10px;
+    }
+  }
+  .el-collapse{
+    border-bottom:none;
+    border-top:none;
+    ::v-deep .el-collapse-item{
+      background-color: #000!important;
+      color: #ddd;
+
+    }
+    ::v-deep .el-collapse-item__header{
+      background-color: #000!important;
+      color: #ddd;
+      border-bottom-color:#5a5a5a;
+      padding-left: 5px;
+      height: 35px;
+      line-height: 35px;
+    }
+    ::v-deep .el-collapse-item__wrap{
+      background-color: #000!important;
+      color: #ddd;
+    }
+    ::v-deep .el-collapse-item__content{
+      width:260px;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      // border: 1px solid #ffeb3b;
+      border: 1px solid #fff;
+      z-index: 1;
+      color: #ddd;
+      padding: 5px;
+      background-color:#1e1e1e;
+    }
+
+  }
+}
+</style>

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

@@ -0,0 +1,690 @@
+<template>
+  <div
+    class="viewport_container"
+    :class="['item',activeIndex === index?'item_active':'']"
+    @mouseup="sliderMouseup"
+  >
+    <div :id="`viewport${index}`" ref="viewportCanvas" style="height: 100%;width:100%" />
+    <!-- 序列信息 -->
+    <div
+      v-if="seriesInfo.taskBlindName"
+      class="seriesInfo_wrapper"
+      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
+    >
+      <h2 v-if="isReadingShowSubjectInfo" class="taskInfo_container">
+        {{ subjectCode }} {{ seriesInfo.taskBlindName }}
+      </h2>
+      <div v-if="index === 1 || index === 2">
+        Series: #{{ seriesInfo.seriesNumber }}
+      </div>
+      <div v-if="index !== 4">Image: #{{ `${seriesInfo.imageIdIndex + 1} / ${seriesInfo.imageMaxLength}` }}</div>
+      <div v-if="index === 1 || index === 2">{{ seriesInfo.modality }}</div>
+    </div>
+    <!-- 描述信息 -->
+    <div
+      v-if="seriesInfo.description && (index === 1 || index === 2)"
+      class="descInfo_wrapper"
+      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
+    >
+      <div>{{ seriesInfo.description }}</div>
+    </div>
+
+    <!-- 图像信息  -->
+    <div
+      v-if="seriesInfo.description && (index === 1 || index === 2 || index === 3)"
+      class="imageInfo_wrapper_l"
+      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
+    >
+      <div v-show="mousePosition.index.length > 0">
+        Pos: {{ mousePosition.index[0] }}, {{ mousePosition.index[1] }}, {{ mousePosition.index[2] }}
+      </div>
+      <div v-if="(seriesInfo.modality === 'CT' || seriesInfo.modality === 'DR' || seriesInfo.modality === 'CR') && mousePosition.value">
+        HU: {{ mousePosition.value }}
+      </div>
+      <div v-else-if="(seriesInfo.modality === 'PT' && mousePosition.value)">
+        SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.value.toFixed(3) :mousePosition.value.toFixed(digitPlaces) }}
+      </div>
+      <div v-else-if="mousePosition.value">
+        Density: {{ mousePosition.value }}
+      </div>
+      <div v-if="index === 1 || index === 2">
+        W*H: {{ imageInfo.size }}
+      </div>
+
+      <!-- <div v-if="index === 1 || index === 2">Zoom: {{ imageInfo.zoom }}</div> -->
+    </div>
+    <div
+      v-if="seriesInfo.description && (index === 1 || index === 2 || index === 3)"
+      class="imageInfo_wrapper_r"
+      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
+    >
+      <div v-show="imageInfo.location && index !== 3 ">Location: {{ `${imageInfo.location} mm` }}</div>
+      <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 :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 }}
+    </div>
+    <div style="position: absolute;top: 50%;right: 15px;color: #f44336;transform: translateY(-50%);">
+      {{ markers.right }}
+    </div>
+
+    <div style="position: absolute;left: 50%;bottom: 30px;color: #f44336;transform: translateX(-50%);">
+      {{ markers.bottom }}
+    </div>
+    <div style="position: absolute;top: 50%;left: 15px;color: #f44336;transform: translateY(-50%);">
+      {{ markers.left }}
+    </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>
+<script>
+import {
+  getRenderingEngine,
+  metaData,
+  utilities,
+  // getOrCreateCanvas,
+  Enums } from '@cornerstonejs/core'
+
+import {
+  utilities as toolsUtilities,
+  annotation,
+  Enums as toolsEnums
+  // cursors
+} from '@cornerstonejs/tools'
+import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps'
+import { vec3, mat4 } from 'gl-matrix'
+import html2canvas from 'html2canvas'
+const { getColormap } = utilities.colormap
+const {
+  VOLUME_NEW_IMAGE
+  // VOLUME_LOADED,
+  // IMAGE_VOLUME_MODIFIED,
+  // VOLUME_VIEWPORT_NEW_VOLUME
+} = Enums.Events
+
+var renderingEngine
+var viewport
+export default {
+  name: 'Viewport',
+  props: {
+    activeIndex: {
+      type: Number,
+      default: 0
+    },
+    index: {
+      // 1:ct  2:pet  3:fusion  4:mip
+      type: Number,
+      required: true
+    },
+    isReadingShowSubjectInfo: {
+      type: Boolean,
+      default: false
+    },
+    seriesInfo: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    renderingEngineId: {
+      type: String,
+      required: true
+    },
+    viewportId: {
+      type: String,
+      required: true
+    },
+    volume: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    measureDatas: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      subjectCode: '',
+      mousePosition: { index: [], value: null, modalityUnit: '', world: [], ctVal: null, ptVal: null },
+      digitPlaces: -1,
+      imageInfo: {
+        zoom: null,
+        size: null,
+        location: null,
+        sliceThickness: null,
+        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: '',
+      orientationMarkers: [],
+      originalMarkers: [],
+      markers: { top: '', right: '', bottom: '', left: '' }
+    }
+  },
+  watch: {
+    activeIndex: {
+      handler(v) {
+        console.log('activeIndex ', v)
+      }
+    }
+  },
+  mounted() {
+    const digitPlaces = parseInt(this.$route.query.digitPlaces)
+    this.digitPlaces = digitPlaces === -1 ? 2 : digitPlaces
+    // console.log(toolsUtilities)
+    this.subjectCode = this.$route.query.subjectCode
+    var element = document.getElementById(`viewport${this.index}`)
+
+    element.addEventListener(VOLUME_NEW_IMAGE, this.handleVolumeNewImage)
+    element.addEventListener(Enums.Events.CAMERA_MODIFIED, this.handleCameraModified)
+    element.addEventListener(Enums.Events.VOI_MODIFIED, this.handleVOIModified)
+    element.addEventListener(toolsEnums.Events.MOUSE_WHEEL, this.handletoolsMouseWheel)
+
+    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)
+      }
+    })
+  },
+  methods: {
+    handleVolumeNewImage(e) {
+      const { imageIndex } = e.detail
+      if (this.viewportId === e.detail.viewportId && this.index !== 4) {
+        this.seriesInfo.imageIdIndex = imageIndex
+      }
+      renderingEngine = getRenderingEngine(this.renderingEngineId)
+      viewport = renderingEngine.getViewport(this.viewportId)
+
+      if (viewport) {
+        var zoom = viewport.getZoom()
+
+        if (zoom) {
+          this.imageInfo.zoom = zoom.toFixed(4)
+        }
+        var imageId = viewport.getCurrentImageId()
+        if (imageId) {
+          const imagePlaneModule = metaData.get('imagePlaneModule', imageId)
+          this.imageInfo.size = `${imagePlaneModule.columns}*${imagePlaneModule.rows}`
+          this.imageInfo.location = imagePlaneModule.sliceLocation
+          this.getOrientationMarker()
+          this.sliderBoxHeight = imageIndex * 100 / (this.seriesInfo.imageMaxLength - 1)
+        }
+
+        var properties = viewport.getProperties()
+
+        if (properties && properties.voiRange) {
+          var { lower, upper } = properties.voiRange
+          const windowWidth = upper - lower
+          const windowCenter = (upper + lower) / 2
+          this.defaultWindowLevel.windowWidth = windowWidth
+          this.defaultWindowLevel.windowCenter = windowCenter
+          this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
+        }
+        if (this.presetName) {
+          this.renderColorBar(this.presetName)
+        }
+      }
+    },
+    getOrientationMarker() {
+      // eslint-disable-next-line no-unused-vars
+      const { viewUp, viewPlaneNormal } = viewport.getCamera()
+
+      const viewRight = vec3.create()
+      vec3.cross(viewRight, viewUp, viewPlaneNormal)
+
+      const columnCosines = [-viewUp[0], -viewUp[1], -viewUp[2]]
+      const rowCosines = viewRight
+      const rowString = toolsUtilities.orientation.getOrientationStringLPS(rowCosines)
+      const columnString = toolsUtilities.orientation.getOrientationStringLPS(columnCosines)
+      const oppositeRowString = toolsUtilities.orientation.invertOrientationStringLPS(rowString)
+      const oppositeColumnString = toolsUtilities.orientation.invertOrientationStringLPS(columnString)
+      this.markers.top = oppositeColumnString
+      this.markers.right = rowString
+      this.markers.bottom = columnString
+      this.markers.left = oppositeRowString
+      this.orientationMarkers = [oppositeColumnString, rowString, columnString, oppositeRowString]
+      if (this.originalMarkers.length === 0) {
+        this.originalMarkers = [...this.orientationMarkers]
+      }
+    },
+    rotateMarkers(type) {
+      var markers = [...this.orientationMarkers]
+      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()
+    },
+    resetMarks() {
+      this.orientationMarkers = [...this.originalMarkers]
+      this.setMarkers()
+    },
+    setMarkers() {
+      var markers = [...this.orientationMarkers]
+      for (const key in this.markers) {
+        var v = markers.shift(0)
+        this.markers[key] = v
+      }
+    },
+    handleCameraModified(e) {
+      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)
+      // console.log(e)
+    },
+    handleVOIModified(e) {
+      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
+        const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
+          lower,
+          upper
+        )
+        this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
+      }
+    },
+    handleMouseMove(e) {
+      if (this.index !== 4) {
+        const { currentPoints } = e.detail
+        const worldPoint = currentPoints.world
+        const { imageData } = this.volume
+        const index = imageData.worldToIndex(worldPoint)
+
+        index[0] = Math.floor(index[0])
+        index[1] = Math.floor(index[1])
+        index[2] = Math.floor(index[2])
+        this.mousePosition.index = index
+
+        this.mousePosition.value = this.getValue(this.volume, worldPoint)
+      }
+    },
+    getValue(volume, worldPos) {
+      const { dimensions, scalarData, imageData } = volume
+
+      const index = imageData.worldToIndex(worldPos)
+
+      index[0] = Math.floor(index[0])
+      index[1] = Math.floor(index[1])
+      index[2] = Math.floor(index[2])
+
+      if (!utilities.indexWithinDimensions(index, dimensions)) {
+        return
+      }
+
+      const yMultiple = dimensions[0]
+      const zMultiple = dimensions[0] * dimensions[1]
+
+      const value = scalarData[index[2] * zMultiple + index[1] * yMultiple + index[0]]
+
+      return value
+    },
+    handleMouseLeave(e) {
+      this.mousePosition.index = []
+      this.mousePosition.value = null
+    },
+    goViewer(e) {
+      var height = e.offsetY * 100 / this.$refs['sliderBox'].clientHeight
+      this.sliderBoxHeight = height
+      var index = Math.trunc(this.seriesInfo.imageMaxLength * this.sliderBoxHeight / 100)
+      if (this.seriesInfo.imageIdIndex !== index) {
+        this.scroll(index)
+      }
+    },
+
+    sliderMousedown(e) {
+      var boxHeight = this.$refs['sliderBox'].clientHeight
+      this.sliderInfo.oldB = parseInt(e.srcElement.style.top) * boxHeight / 100
+      this.sliderInfo.oldM = e.clientY
+      this.sliderInfo.isMove = true
+      e.stopImmediatePropagation()
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    sliderMousemove(e) {
+      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
+      const height = PX * 100 / boxHeight
+      var index = Math.trunc(this.seriesInfo.imageMaxLength * height / 100)
+      index = index > this.seriesInfo.imageMaxLength ? this.seriesInfo.imageMaxLength : 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
+
+        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 = Math.trunc(e.offsetX)
+      const deltaX = x - this.rotateBarLeft
+      const angle = Math.sin((deltaX * (360 / (containerWidth - sliderWidth))) * Math.PI / 180)
+      this.rotate(angle)
+      this.rotateBarLeft = x
+    },
+    async scroll(index) {
+      renderingEngine = getRenderingEngine(this.renderingEngineId)
+      viewport = renderingEngine.getViewport(this.viewportId)
+      const actorEntries = viewport.getActors()
+
+      if (!actorEntries) {
+        return
+      }
+      // const delta = index - this.seriesInfo.imageIdIndex
+      // toolsUtilities.scroll(viewport, {
+      //   delta,
+      //   volumeId: actorEntries.uid
+      // })
+      await utilities.jumpToSlice(viewport.element, {
+        imageIndex: index,
+      });
+      renderingEngine.render()
+    },
+    rotateBarMouseup(e) {
+      this.rotateBarInfo.isMove = false
+    },
+    sliderMouseup(e) {
+      this.sliderInfo.isMove = false
+    },
+    setAnnotation(imageId, element) {
+      this.measureDatas.forEach(item => {
+        if (item.OtherMeasureData) {
+          var { metadata, annotationUID } = item.OtherMeasureData
+          var { referencedImageId } = metadata
+          console.log(annotationUID, annotation.state.getAnnotation(annotationUID))
+          if (!annotation.state.getAnnotation(annotationUID) && referencedImageId === imageId) {
+            annotation.state.addAnnotation(item.OtherMeasureData, element)
+          }
+        }
+      })
+    },
+    setPreset(presetName) {
+      this.presetName = presetName
+    },
+    renderColorBar(presetName) {
+      var colorMap = null
+      if (presetName === 'hsv') {
+        colorMap = vtkColorMaps.getPresetByName(presetName)
+      } else {
+        colorMap = getColormap(presetName)
+      }
+      const rgbPoints = colorMap.RGBPoints
+      const canvas = document.getElementById('colorBar_Canvas')
+      const ctx = canvas.getContext('2d')
+      const canvasWidth = 160
+      const canvasHeight = 5
+      const rectWidth = 160
+      const rectHeight = canvasHeight
+      canvas.width = canvasWidth
+      canvas.height = canvasHeight
+      const gradient = ctx.createLinearGradient(0, 0, rectWidth, 0)
+      for (let i = 0; i < rgbPoints.length; i += 4) {
+        let position = 0
+        if (rgbPoints[0] === -1) {
+          position = (rgbPoints[i] + 1) / 2
+        } else {
+          position = rgbPoints[i]
+        }
+        const color = `rgb(${parseInt(rgbPoints[i + 1] * 255)}, ${parseInt(rgbPoints[i + 2] * 255)}, ${parseInt(rgbPoints[i + 3] * 255)})`
+        gradient.addColorStop(position, color)
+      }
+      ctx.fillStyle = gradient
+      ctx.fillRect(0, 0, rectWidth, rectHeight)
+    },
+    setWwWc() {
+      var properties = viewport.getProperties()
+      if (properties && properties.voiRange) {
+        var { lower, upper } = properties.voiRange
+        const windowWidth = upper - lower
+        const windowCenter = (upper + lower) / 2
+        this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
+      }
+    },
+    async getScreenshots() {
+      const divForDownloadViewport = document.querySelector(
+        `div[data-viewport-uid="FUSION_AXIAL"]`
+      )
+      // const divForDownloadViewport = document.querySelector(
+      //   '.viewport_container'
+      // )
+
+      var canvas = await html2canvas(divForDownloadViewport)
+      var pictureBaseStr = canvas.toDataURL('image/png', 1)
+      return pictureBaseStr
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.viewport_container{
+  width:100%;
+  height: 100%;
+  .seriesInfo_wrapper {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    text-align: left;
+    font-size: 12px;
+    z-index: 1;
+    .taskInfo_container{
+      color:#f44336;
+      padding: 5px 0px;
+      margin: 0;
+    }
+  }
+  .descInfo_wrapper{
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    text-align: right;
+    font-size: 12px;
+    z-index: 1;
+  }
+  .imageInfo_wrapper_l{
+    position: absolute;
+    left: 10px;
+    bottom: 5px;
+    text-align: left;
+    font-size: 12px;
+    z-index: 1;
+  }
+  .imageInfo_wrapper_r{
+    position: absolute;
+    right: 40px;
+    bottom: 5px;
+    text-align: right;
+    font-size: 12px;
+    z-index: 1;
+  }
+  .slider_box{
+    position: absolute;
+    right: 1px;
+    height: calc(100% - 120px);
+    transform: translateY(-50%);
+    top: calc(50% - 30px);
+    width: 10px;
+    background: #333;
+    cursor: pointer;
+    .box{
+      z-index:10;
+      background: #9e9e9e;
+      height: 20px;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      cursor: move
+    }
+  }
+  .color_bar{
+
+    position: absolute;
+
+    // transform:translateY(-50%);
+    transform: rotate(-90deg);
+    transform-origin: right;
+    left: -150px;
+    top: 30%;
+    // transform-origin: top left;
+    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;
+  //   bottom: -20px;
+  //   left: 0;
+  //   height: 20px;
+  //   width: 100%;
+  //   background: #333;
+  // }
+}
+</style>

src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue

@@ -19,8 +19,6 @@
       <div v-if="!isMip && !isFusion">Series: #{{ series.SeriesNumber }}</div>
       <div v-if="series.Stack && !isMip">Image: #{{ `${series.SliceIndex + 1}/${series.Stack.length}` }}</div>
       <div v-if="!isMip && !isFusion">{{ series.Modality }}</div>
-      <div v-if="isFusion">{{ ctSeries.Modality }} / {{ series.Modality }}</div>
-      <div v-if="isMip">MIP</div>
     </div>
     <!-- <div v-if="series && taskInfo && taskInfo.IsReadingTaskViewInOrder === 1 && series.TaskInfo && !isMip && !isFusion"
       class="top-center-tool">
@@ -530,7 +528,6 @@ Colorbar: null,
           this.ptVolumeId = `fusion_${this.volumeId}`
           let { ct, data } = obj
           this.series = { ...data }
-          this.ctSeries = { ...ct }
           let volumes = [
             {
               volumeId: ct.SeriesInstanceUid, callback: (r) => {

src/views/trials/trials-panel/reading/dicoms3D/components/colorMap.vue

@@ -98,19 +98,6 @@ export default {
         voiChange(v) {
             this.$emit('voiChange', v)
         },
-        changeVoi(v) {
-            // 被外部组件调窗同步时调用
-            if (v === this.upper) return
-            
-            // 如果传入的阈值超过了当前输入框设置的最大值，更新 range 为传入值，滑块自动到最右侧
-            if (v > this.range) {
-                this.range = v
-                this.upper = v
-            } else {
-                this.upper = v
-            }
-            this.updateSliderPosition()
-        },
         initSlider() {
             var slider = document.getElementById('slider')
             var sliderBox = document.getElementById('sliderBox')
@@ -151,33 +138,6 @@ export default {
                 this.isSlideMoving = false
             })
         },
-        updateSliderPosition() {
-            var sliderBox = document.getElementById('sliderBox')
-            var colorBarContainer = document.getElementById('colorBar')
-            if (!sliderBox || !colorBarContainer) return
-
-            var containerWidth = colorBarContainer.clientWidth
-            var sliderWidth = sliderBox.clientWidth
-            var maxLeft = containerWidth - sliderWidth
-            var left = (this.upper / this.range) * maxLeft
-            if (left < 0) {
-                left = 0
-            } else if (left >= maxLeft) {
-                left = maxLeft
-            }
-            var slider = document.getElementById('slider')
-            if (slider) {
-                slider.style.left = left + 'px'
-            }
-            var positionValue = document.getElementById('slider-position')
-            if (positionValue) {
-                if (this.modality === 'NM') {
-                    positionValue.textContent = Math.round((this.upper / this.range) * 100) + '%'
-                } else {
-                    positionValue.textContent = this.upper
-                }
-            }
-        },
         upperRangeChange(v) {
             if (v === 0 || v < this.upper) {
                 return

src/views/trials/trials-panel/reading/reading-task/index.vue

@@ -324,7 +324,11 @@ export default {
         var token = getToken()
         var path = ''
         if (this.readingTool === 0 || this.readingTool === 2 || this.readingTool === 3) {
+          if (this.criterionType === 0 && this.trialId === '08dd28b3-6843-fc05-0242-ac1301000000') {
+            path = `/fusion?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&studyId=62b3dfc4-1e04-4180-910d-fe595f398361&ctseriesId=1bd24f53-d419-32e5-92d4-2b04640aaa65&ptseriesId=2b7b128d-8c3f-8357-ad14-e38f3acbbdff&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&TokenKey=${token}&lang=${this.$i18n.locale}`
+          } else {
             path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
+          }
         } else {
           path = `/noneDicomReading?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
         }