调窗更改

src/router/index.js

@@ -156,12 +156,6 @@ 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,46 +140,8 @@
         </div>
       </el-tooltip>
       <!-- 伪彩 -->
-      <el-tooltip class="item" effect="dark" :content="$t('trials:lugano:button:colormap')" placement="bottom">
+      <colorMap v-show="isFusion" ref="colorMap" :unit="fusionOverlayModality === 'NM' ? 'counts' : 'g/ml'"
-        <div class="colorBar" style="display:flex;justify-content: flex-start;align-items: center;position: relative;"
+        :modality="fusionOverlayModality" @setColorMap="setColorMap" @voiChange="voiChange" />
-          @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">
@@ -217,15 +179,14 @@
         <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"
+          :is-reading-show-subject-info="isReadingShowSubjectInfo" :series-info="petSeries" :ct-series-info="ctSeries"
           :rendering-engine-id="renderingEngineId" viewport-id="FUSION_AXIAL" :volume="ptVolume"
           :measure-datas="measureDatas" :rgb-preset-name="rgbPresetName" :style="3 === activeIndex ? viewportStyle : {}"
           @upperRangeChange="upperRangeChange" />
@@ -306,6 +267,7 @@ 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'
@@ -395,7 +357,8 @@ export default {
     TableQuestions,
     CustomWwwcForm,
     FusionForm,
-    readingChart
+    readingChart,
+    colorMap
   },
   data() {
     return {
@@ -441,6 +404,8 @@ 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 }, // 自定义
@@ -458,7 +423,9 @@ export default {
       activeCanvasWW: null,
       activeCanvasWC: null,
       fusion: { visible: false }, // 历史记录融合调窗
-      screenshotWindow: null
+      screenshotWindow: null,
+      hasVoiChanged: false,
+      lastUpper: null
       // initFirstAnnotation:false
     }
   },
@@ -513,11 +480,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', () => {
@@ -744,6 +711,7 @@ 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 => {
@@ -1057,7 +1025,7 @@ export default {
       // volume to use for the WindowLevelTool for the fusion viewports
 
       fusionToolGroup.addTool(WindowLevelTool.toolName, {
-        volumeId: ptVolumeId
+        volumeId: ptVolumeId2
       });
 
       [ctToolGroup, ptToolGroup, fusionToolGroup].forEach((toolGroup) => {
@@ -1627,42 +1595,106 @@ 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 containerWidth = container.clientWidth
+          var colorBarContainer = document.getElementById('colorBar')
+          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
+          // 获取相对于整个父容器的外边距位置
-          position = left
+          var rect = colorBarContainer.getBoundingClientRect()
+          var left = e.clientX - rect.left - (sliderWidth / 2)
+          
           if (left < 0) {
-            left = 6
+            left = 0
-            position = 0
           } else if (left > maxLeft) {
-            left = maxLeft + 6
+            left = maxLeft
-            position = maxLeft
           }
 
           slider.style.left = left + 'px'
           var positionValue = document.getElementById('slider-position')
           var upper = this.range
-          position = parseInt((position / maxLeft) * upper)
+          var position = parseInt((left / 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', () => {
+      document.addEventListener('mouseup', (e) => {
+        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;
@@ -1671,111 +1703,11 @@ export default {
       if (v === 0) {
         return
       }
-      var sliderBox = document.getElementById('sliderBox')
-      var container = document.getElementById('colorBarCanvas')
-      var containerWidth = container.clientWidth
-      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)
-    },
+      // 反向同步到 colorMap 组件，更新滑块
-    renderColorMaps() {
+      if (this.$refs.colorMap) {
-      this.createColorBar(this.rgbPresetName, 'colorBarCanvas', 256, 15)
+        this.$refs.colorMap.changeVoi(v)
-      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,6 +19,8 @@
       </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
@@ -135,6 +137,12 @@ export default {
         return {}
       }
     },
+    ctSeriesInfo: {
+      type: Object,
+      default() {
+        return null
+      }
+    },
     renderingEngineId: {
       type: String,
       required: true
@@ -328,7 +336,7 @@ export default {
       let properties = viewport.getProperties()
       if (this.index === 3) {
         // const volumeId = viewport.getVolumeId()
-        const volumeId = `cornerstoneStreamingImageVolume:PT_VOLUME_ID`
+        const volumeId = `cornerstoneStreamingImageVolume:PT_VOLUME_ID2`
         properties = viewport.getProperties(volumeId)
       }
       if (properties && properties.voiRange) {
@@ -338,6 +346,10 @@ 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) {
@@ -570,7 +582,7 @@ export default {
     setWwWc() {
       let properties = viewport.getProperties()
       if (this.index === 3) {
-        properties = viewport.getProperties(`cornerstoneStreamingImageVolume:PT_VOLUME_ID`)
+        properties = viewport.getProperties(`cornerstoneStreamingImageVolume:PT_VOLUME_ID2`)
       }
       if (properties && properties.voiRange) {
         var { lower, upper } = properties.voiRange
@@ -582,7 +594,8 @@ export default {
           upper
         )
         this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
-        if (this.index !== 1) {
+        // 当为PT或融合视口时，触发外部联动
+        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

@@ -1,106 +0,0 @@
-<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

@@ -1,148 +0,0 @@
-<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

@@ -1,354 +0,0 @@
-<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

@@ -1,690 +0,0 @@
-<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,6 +19,8 @@
       <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">
@@ -528,6 +530,7 @@ 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,6 +98,19 @@ 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')
@@ -138,6 +151,33 @@ 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,11 +324,7 @@ 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}`
         }