diff --git a/src/router/index.js b/src/router/index.js
index 88ceabaa..368b8e35 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
index 9d037c0d..cd3230db 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt.vue
+++ b/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">
-        <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>
+      <colorMap v-show="isFusion" ref="colorMap" :unit="fusionOverlayModality === 'NM' ? 'counts' : 'g/ml'"
+        :modality="fusionOverlayModality" @setColorMap="setColorMap" @voiChange="voiChange" />
 
       <!-- 截屏 -->
       <!-- <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 : {}"
-          @upperRangeChange="upperRangeChange" />
+          :measure-datas="measureDatas" :style="1 === activeIndex ? viewportStyle : {}" />
         <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
     }
   },
@@ -512,13 +479,13 @@ export default {
     })
     this.colorMaps = getColormapNames()
     this.colorMaps.unshift('hsv')
-    this.$nextTick(() => {
-      this.renderColorMaps()
-      this.handleElementsClick()
-      this.initPage()
-      this.upperRangeChange(this.range)
-      this.initSlider()
-    })
+      this.$nextTick(() => {
+        // this.renderColorMaps()
+        this.handleElementsClick()
+        this.initPage()
+        // this.upperRangeChange(this.range)
+        // this.initSlider()
+      })
 
     FusionEvent.$on('getAnnotations', () => {
       console.log('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
-            position = 0
+            left = 0
           } else if (left > maxLeft) {
-            left = maxLeft + 6
-            position = maxLeft
+            left = maxLeft
           }
 
           slider.style.left = left + 'px'
           var positionValue = document.getElementById('slider-position')
           var upper = this.range
-          position = parseInt((position / maxLeft) * upper)
-          positionValue.textContent = position
+          var position = parseInt((left / maxLeft) * upper)
+          
+          if (positionValue) {
+            positionValue.textContent = position
+          }
           this.upper = position
-          this.voiChange(position)
+          
+          if (this.sliderTimeout) {
+            cancelAnimationFrame(this.sliderTimeout)
+          }
+          this.sliderTimeout = requestAnimationFrame(() => {
+            this.voiChange(position)
+          })
         }
       })
-      document.addEventListener('mouseup', () => {
-        this.isSlideMoving = false
+      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)
-    },
-    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
+      // 反向同步到 colorMap 组件，更新滑块
+      if (this.$refs.colorMap) {
+        this.$refs.colorMap.changeVoi(v)
       }
-
-      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
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue
index 4ebcdbbf..3fee5373 100644
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/Viewport.vue
+++ b/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))
         }
       }
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Assessment.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Assessment.vue
deleted file mode 100644
index 30c34a85..00000000
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Assessment.vue
+++ /dev/null
@@ -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>
-
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Questions.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Questions.vue
deleted file mode 100644
index 0b576898..00000000
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Questions.vue
+++ /dev/null
@@ -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>
-
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/TableQuestions.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/TableQuestions.vue
deleted file mode 100644
index 36f7cd70..00000000
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/TableQuestions.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Viewport.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Viewport.vue
deleted file mode 100644
index 95eecc86..00000000
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Viewport.vue
+++ /dev/null
@@ -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>
diff --git a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index.vue b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index.vue
deleted file mode 100644
index 6a08878a..00000000
--- a/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index.vue
+++ /dev/null
@@ -1,2155 +0,0 @@
-<template>
-  <div
-    v-loading="loading"
-    :element-loading-text="loadingText"
-    element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)"
-    class="dicom-viewer-container"
-    @contextmenu="rightClick"
-  >
-    <!-- 工具条 -->
-    <div class="dicom-tools">
-      <!-- 窗宽窗位 -->
-      <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:wwwc')}`" placement="bottom">
-        <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
-          <div class="dropdown">
-            <div
-              class="icon"
-              :class="[activeTool==='WindowLevel'?'tool_active':'']"
-              data-tool="WindowLevel"
-              @click.prevent="setBasicToolActive('WindowLevel')"
-            >
-              <svg-icon icon-class="reverse" class="svg-icon" />
-              <i class="el-icon-arrow-down" style="color:#fff;" />
-            </div>
-            <!-- 窗宽窗位 -->
-            <div class="text">{{ $t('trials:reading:button:rotate') }}</div>
-            <div class="dropdown-content">
-              <ul style="width:130px;">
-                <li v-for="item in defaultWwwc" :key="item.label" style="text-align:left;">
-                  <a href="#" @click.prevent="setDicomCanvasWwwc(item)">
-                    <div v-if="item.wc" style="display:flex;flex-direction: row;justify-content: space-between;">
-                      <div>{{ item.label }}</div>
-                      <div>{{ item.ww }}/{{ item.wc }}</div>
-                    </div>
-                    <div v-else style="text-align:left;">
-                      {{ item.label }}
-                    </div>
-                  </a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </el-tooltip>
-      <!-- 反色 -->
-      <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:reverseColor')}`" placement="bottom">
-        <div class="tool-wrapper">
-          <div
-            class="icon"
-            data-tool="reverse"
-            @click.prevent="toggleInvert"
-          >
-            <svg-icon icon-class="reversecolor" class="svg-icon" />
-          </div>
-          <!-- 反色 -->
-          <div class="text">{{ $t('trials:reading:button:reverseColor') }}</div>
-        </div>
-      </el-tooltip>
-      <!-- 缩放 -->
-      <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:zoom')}`" placement="bottom">
-        <div class="tool-wrapper">
-          <div
-            class="icon"
-            :class="[activeTool==='Zoom'?'tool_active':'']"
-            data-tool="Zoom"
-            @click.prevent="setBasicToolActive('Zoom')"
-          >
-            <svg-icon icon-class="magnifier" class="svg-icon" />
-          </div>
-          <!-- 缩放 -->
-          <div class="text">{{ $t('trials:reading:button:zoom') }}</div>
-        </div>
-      </el-tooltip>
-      <!-- 移动 -->
-      <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:move')}`" placement="bottom">
-        <div class="tool-wrapper">
-          <div
-            class="icon"
-            :class="[activeTool==='Pan'?'tool_active':'']"
-            data-tool="Pan"
-            @click.prevent="setBasicToolActive('Pan')"
-          >
-            <svg-icon icon-class="move" class="svg-icon" />
-          </div>
-          <!-- 移动 -->
-          <div class="text">{{ $t('trials:reading:button:move') }}</div>
-        </div>
-      </el-tooltip>
-      <!-- 旋转 -->
-      <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:rotate')}`" placement="bottom">
-        <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
-          <div class="dropdown">
-            <div
-              class="icon"
-              :class="[activeTool==='Rotate'?'tool_active':'']"
-              data-tool="Pan"
-              @click.prevent="setBasicToolActive('TrackballRotate')"
-            >
-              <svg-icon icon-class="rotate" class="svg-icon" />
-              <i class="el-icon-arrow-down" style="color:#fff;" />
-            </div>
-            <!-- 移动 -->
-            <div class="text">{{ $t('trials:reading:button:rotate') }}</div>
-            <div class="dropdown-content">
-              <ul style="width:100px;">
-                <li v-for="rotate in rotateArr" :key="rotate.label" style="text-align:left;">
-                  <a href="#" @click.prevent="setDicomCanvasRotate(rotate.val)">{{ rotate.label }}</a>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </el-tooltip>
-      <!-- 椭圆oval -->
-      <template v-for="tool in measuredTools">
-        <el-tooltip :key="tool.toolName" class="item" effect="dark" placement="bottom">
-          <div slot="content">
-            <div v-if="tool.disabledReason">
-              <h4 style="margin:0;padding-bottom:2px;">{{ tool.text }}</h4>
-              <br>{{ tool.disabledReason }}
-            </div>
-            <div v-else>{{ tool.text }}</div>
-
-          </div>
-          <div class="tool-wrapper">
-            <div
-              class="icon"
-              :class="[activeTool===tool.toolName?'tool_active':'']"
-              @mouseenter="enter($event,tool.toolName)"
-              @click.prevent="setMeasureToolActive(tool.toolName)"
-            >
-              <svg-icon :icon-class="tool.icon" class="svg-icon" />
-            </div>
-            <div class="text">{{ tool.text }}</div>
-          </div>
-        </el-tooltip>
-      </template>
-
-      <!-- 重置 -->
-      <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:reset')}`" placement="bottom">
-        <div class="tool-wrapper">
-          <div
-            class="icon"
-            @click.prevent="resetViewport"
-          >
-            <svg-icon icon-class="refresh" class="svg-icon" />
-          </div>
-          <div class="text">{{ $t('trials:reading:button:reset') }}</div>
-        </div>
-      </el-tooltip>
-      <!-- <el-tooltip v-if="!isBaseLineTask" class="item" effect="dark" :content="$t('trials:lugano:button:record')" placement="bottom">
-        <div class="tool-wrapper">
-          <div
-            class="icon"
-            @click.prevent="historyRecord"
-          >
-            <svg-icon icon-class="record" class="svg-icon" />
-          </div>
-          <div class="text">{{ $t('trials:lugano:button:record') }}</div>
-        </div>
-      </el-tooltip> -->
-      <!-- 伪彩 -->
-      <el-tooltip class="item" effect="dark" :content="$t('trials:lugano:button:colormap')" placement="bottom">
-        <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>
-
-    </div>
-    <div class="dicom-datas">
-      <div ref="dicomContainer" class="dicom-container box box_2_2" style="position: relative;" @dblclick="reloadViewport">
-        <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 : {}"
-        />
-        <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 : {}"
-        />
-        <Viewport
-          ref="FUSION_AXIAL"
-          :index="3"
-          :active-index="activeIndex"
-          :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 : {}"
-        />
-        <Viewport
-          ref="PET_MIP_CORONAL"
-          :index="4"
-          :active-index="activeIndex"
-          :is-reading-show-subject-info="isReadingShowSubjectInfo"
-          :series-info="petSeries"
-          :rendering-engine-id="renderingEngineId"
-          viewport-id="PET_MIP_CORONAL"
-          :measure-datas="measureDatas"
-          :style="4===activeIndex ? viewportStyle : {}"
-        />
-      </div>
-      <!-- 表单 -->
-      <div class="form-container" style="overflow-y: auto;">
-        <div style="color:#fff;padding: 0 5px;">
-          <h3 v-if="isReadingShowSubjectInfo" style="color: #ddd;padding: 5px 0px;margin: 0;">
-            <span v-if="subjectCode">{{ subjectCode }} </span>
-            <span style="margin-left:5px;">{{ taskBlindName }}</span>
-          </h3>
-          <Questions ref="questions"  />
-          <TableQuestions ref="tableQuestions" />
-          <Assessment />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { getNextTask} from '@/api/trials'
-import {
-  RenderingEngine,
-  Enums,
-  // CONSTANTS,
-  setVolumesForViewports,
-  volumeLoader,
-  getRenderingEngine,
-  eventTarget,
-  // eslint-disable-next-line no-unused-vars
-  cache,
-  imageLoader,
-  // eslint-disable-next-line no-unused-vars
-  triggerEvent,
-  utilities as csUtils
-
-} from '@cornerstonejs/core'
-import * as cornerstone3D from '@cornerstonejs/core'
-import * as cornerstoneTools from '@cornerstonejs/tools'
-import initLibraries from './../js/initLibraries'
-import { createImageIdsAndCacheMetaData } from './../js/createImageIdsAndCacheMetaData'
-import setCtTransferFunctionForVolumeActor from './../js/setCtTransferFunctionForVolumeActor'
-import { setCtMappingRange } from './../js/setCtTransferFunctionForVolumeActor'
-import setPetTransferFunctionForVolumeActor from './../js/setPetTransferFunctionForVolumeActor'
-import colormaps from './../js/colormaps'
-// eslint-disable-next-line no-unused-vars
-import { setPetColorMapTransferFunctionForVolumeActor, setColorPreset } from './../js/setPetColorMapTransferFunctionForVolumeActor'
-import store from '@/store'
-import { mapGetters, mapMutations } from 'vuex'
-import { changeURLStatic } from '@/utils/history.js'
-import Viewport from './Viewport'
-import Questions from './Questions'
-import TableQuestions from './TableQuestions'
-import Assessment from './Assessment'
-import { getDicomSeriesInfo } from '@/api/trials'
-import FusionEvent from './../FusionEvent'
-import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps'
-import vtkColorTransferFunction from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction'
-import vtkPiecewiseFunction from '@kitware/vtk.js/Common/DataModel/PiecewiseFunction'
-import { mat4, vec3 } from 'gl-matrix'
-import html2canvas from 'html2canvas'
-import CircleROITool from './../tools/CircleROITool'
-// import ProbeTool from './../tools/Probe/ProbeTool'
-const { registerColormap, getColormapNames, getColormap } = csUtils.colormap
-const {
-  ToolGroupManager,
-  Enums: csToolsEnums,
-  WindowLevelTool,
-  PanTool,
-  ZoomTool,
-  StackScrollMouseWheelTool,
-  synchronizers,
-  MIPJumpToClickTool,
-  VolumeRotateMouseWheelTool,
-  OrientationMarkerTool,
-  // SynchronizerManager,
-  // LengthTool,
-  EllipticalROITool,
-  // CircleROITool,
-  CrosshairsTool,
-  TrackballRotateTool,
-  ProbeTool,
-  ScaleOverlayTool,
-  utilities,
-  // eslint-disable-next-line no-unused-vars
-  annotation,
-  // eslint-disable-next-line no-unused-vars
-  cursors
-  // stateManagement
-
-} = cornerstoneTools
-
-const { MouseBindings } = csToolsEnums
-const { ViewportType, BlendModes } = Enums
-const { createCameraPositionSynchronizer, createVOISynchronizer } = synchronizers
-let renderingEngine
-const renderingEngineId = 'myRenderingEngine'
-const volumeLoaderScheme = 'cornerstoneStreamingImageVolume' // Loader id which defines which volume loader to use
-const ctVolumeName = 'CT_VOLUME_ID' // Id of the volume less loader prefix
-const ctVolumeId = `${volumeLoaderScheme}:${ctVolumeName}` // VolumeId with loader id + volume id
-const ptVolumeName = 'PT_VOLUME_ID'
-const ptVolumeId = `${volumeLoaderScheme}:${ptVolumeName}`
-const ctToolGroupId = 'CT_TOOLGROUP_ID'
-const ptToolGroupId = 'PT_TOOLGROUP_ID'
-const fusionToolGroupId = 'FUSION_TOOLGROUP_ID'
-const mipToolGroupUID = 'MIP_TOOLGROUP_ID'
-var axialCameraPositionSynchronizer
-var ctVoiSynchronizer
-var ptVoiSynchronizer
-const viewportIds = {
-  CT: { AXIAL: 'CT_AXIAL', SAGITTAL: 'CT_SAGITTAL', CORONAL: 'CT_CORONAL' },
-  PT: { AXIAL: 'PT_AXIAL', SAGITTAL: 'PT_SAGITTAL', CORONAL: 'PT_CORONAL' },
-  FUSION: {
-    AXIAL: 'FUSION_AXIAL',
-    SAGITTAL: 'FUSION_SAGITTAL',
-    CORONAL: 'FUSION_CORONAL'
-  },
-  PETMIP: {
-    CORONAL: 'PET_MIP_CORONAL'
-  }
-}
-var element_ct
-var element_pet
-var element_fusion
-var element_mip
-var ctToolGroup
-var ptToolGroup
-var fusionToolGroup
-var mipToolGroup
-
-const axialCameraSynchronizerId = 'AXIAL_CAMERA_SYNCHRONIZER_ID'
-const ctVoiSynchronizerId = 'CT_VOI_SYNCHRONIZER_ID'
-const ptVoiSynchronizerId = 'PT_VOI_SYNCHRONIZER_ID'
-const timeout = 5 * 60 * 1000
-let timerId
-export default {
-  name: 'Fusion',
-  components: {
-    Viewport,
-    Questions,
-    TableQuestions,
-    Assessment
-  },
-  data() {
-    return {
-      activeIndex: 1,
-      activeTool: '',
-      loading: false,
-      fitType: 0,
-      rotateArr: [
-        // { label: this.$t('trials:reading:button:rotateDefault'), val: 1 }, // 默认值
-        { label: this.$t('trials:reading:button:rotateVertical'), val: 2 }, // 垂直翻转
-        { label: this.$t('trials:reading:button:rotateHorizontal'), val: 3 }, // 水平翻转
-        { label: this.$t('trials:reading:button:rotateTurnLeft'), val: 4 }, // 左转90度
-        { label: this.$t('trials:reading:button:rotateTurnRight'), val: 5 }// 右转90度
-      ],
-      isCurrentTask: true,
-      isBaseLineTask: true,
-      ctSeries: {},
-      petSeries: {},
-      renderingEngineId: renderingEngineId,
-      ctVolumeId: `${volumeLoaderScheme}:${ctVolumeName}`,
-      ptVolumeId: `${volumeLoaderScheme}:${ptVolumeName}`,
-      ctVolume: null,
-      ptVolume: null,
-      isReadingShowSubjectInfo: false,
-      subjectCode: '',
-      taskBlindName: '',
-      measuredTools: [
-        // 圆形测量
-        { toolName: 'CircleROI', text: this.$t('trials:lugano:button:circleROI'), icon: 'oval', isDisabled: false, disabledReason: '' }
-
-      ],
-      measureDatas: [],
-      readingTaskState: 1,
-      colorMaps: [],
-      rgbPresetName: 'siemens',
-      range: 40,
-      upper: 6,
-      isSlideMoving: false,
-      viewportStyle: {},
-      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 }, // 自定义
-        { label: 'CT Brain', wc: 40, ww: 80 },
-        { label: 'CT Lungs', wc: -400, ww: 1500 },
-        { label: 'CT Abdomen', wc: 60, ww: 400 },
-        { label: 'CT Liver', wc: 40, ww: 400 },
-        { label: 'CT Bone', wc: 300, ww: 1500 }
-      ],
-      customWwc: { visible: false, title: null }, // 自定义调窗
-      defaultCamera: null,
-      baseViewportSize: { width: null, height: null },
-      loadingText: '',
-      initAnnotations: [],
-      activeCanvasWW: null,
-      activeCanvasWC: null,
-      visitTaskId:'',
-      digitPlaces: 1
-      // initFirstAnnotation:false
-    }
-  },
-  computed: {
-    ...mapGetters(['visitTaskList'])
-  },
-  watch: {
-    // activeTool: {
-    //   deep: true,
-    //   immediate: false,
-    //   handler(v) {
-    //     if (!v) {
-    //       const elements = [element_ct, element_pet, element_fusion]
-    //       elements.map(el => {
-    //         console.log(cursors)
-    //         // cursors.setCursorForElement(el, 'default')
-    //         // cursors.elementCursor.hideElementCursor(el)
-    //       })
-    //     }
-    //   }
-    // }
-
-  },
-  mounted() {
-    document.documentElement.style.userSelect = 'none'
-    this.subjectCode = this.$route.query.subjectCode
-    this.$i18n.locale = this.$route.query.lang
-    this.setLanguage(this.$route.query.lang)
-    this.customWwc = { visible: false, title: this.$t('trials:reading:dagTitle:wwwcCustom') }
-    // const digitPlaces = parseInt(this.$route.query.digitPlaces)
-    // this.digitPlaces = 2
-    element_ct = document.getElementById('viewport1')
-    element_pet = document.getElementById('viewport2')
-    element_fusion = document.getElementById('viewport3')
-    element_mip = document.getElementById('viewport4')
-    if (this.$router.currentRoute.query.TokenKey) {
-      store.dispatch('user/setToken', this.$route.query.TokenKey)
-      changeURLStatic('TokenKey', '')
-    }
-    colormaps.forEach(colormap => {
-      registerColormap(colormap)
-    })
-    this.colorMaps = getColormapNames()
-    this.colorMaps.unshift('hsv')
-    this.$nextTick(() => {
-      this.renderColorMaps()
-      this.handleElementsClick()
-      this.initPage()
-      this.upperRangeChange(this.range)
-      this.initSlider()
-    })
-    FusionEvent.$on('imageLocation', (obj) => {
-      this.imageLocation(obj)
-    })
-    FusionEvent.$on('removeAnnotation', (obj) => {
-      console.log('removeAnnotation')
-      this.removeAnnotation(obj)
-    })
-    window.addEventListener('beforeunload', e => { this.beforeUnloadHandler(e) })
-  },
-  beforeDestroy() {
-    if (this.screenshotWindow) {
-      this.screenshotWindow.close()
-    }
-    cornerstoneTools.destroy()
-    eventTarget.reset()
-    cache.purgeCache()
-    renderingEngine.destroy()
-    imageLoader.unregisterAllImageLoaders()
-    ToolGroupManager.destroyToolGroup('volume')
-    FusionEvent.$off('imageLocation')
-    window.removeEventListener('beforeunload', e => { this.beforeUnloadHandler(e) })
-  },
-  methods: {
-    async getTaskInfo() {
-      this.loading = true
-      try {
-        let params = {
-          subjectId: this.$route.query.subjectId,
-          trialId:  this.$route.query.trialId,
-          subjectCode: this.subjectCode,
-          visitTaskId: this.$route.query.visitTaskId,
-          trialReadingCriterionId: this.$route.query.TrialReadingCriterionId
-        }
-        let res = await getNextTask(params)
-        this.visitTaskId = res.Result.VisitTaskId
-        this.isReadingShowSubjectInfo = res.Result.IsReadingShowSubjectInfo
-        this.taskBlindName = res.Result.TaskBlindName
-        this.loading = false
-      } catch(e){
-        this.loading = false
-      }
-    },
-    initPage() {
-      const resizeObserver = new ResizeObserver(() => {
-        if (element_ct.style.width) {
-          console.log('Size changed')
-
-          renderingEngine = getRenderingEngine(renderingEngineId)
-
-          if (renderingEngine) {
-            this.$nextTick(() => {
-              renderingEngine.resize(true, true)
-            })
-          }
-        }
-      })
-
-      const elements = [
-        element_ct,
-        element_pet,
-        element_fusion
-      ]
-
-      elements.forEach((element) => {
-        element.oncontextmenu = (e) => e.preventDefault()
-
-        resizeObserver.observe(element)
-      })
-      element_mip.oncontextmenu = (e) => e.preventDefault()
-      resizeObserver.observe(element_mip)
-      this.$nextTick(() => {
-        this.run()
-        // this.getTaskInfo()
-      })
-    },
-    async run() {
-      await this.getTaskInfo()
-      this.loading = true
-      // 初始化Cornerstone和相关库
-      // this.loadingText = '初始化中...'
-      await initLibraries()
-
-      // console.log(colormaps, registerColormap)
-      // colormaps.forEach(registerColormap)
-      renderingEngine = new RenderingEngine(renderingEngineId)
-      var ctseriesId = this.$route.query.ctseriesId
-      this.ctSeries = await this.getSeriesInfo(ctseriesId)
-
-      var ptseriesId = this.$route.query.ptseriesId
-      this.petSeries = await this.getSeriesInfo(ptseriesId)
-      const maxCount = Math.max(this.ctSeries.imageIds.length, this.petSeries.imageIds.length)
-      this.$set(this.ctSeries, 'imageMaxLength', maxCount)
-      this.$set(this.petSeries, 'imageMaxLength', maxCount)
-
-      await this.getImages()
-
-      // 设置viewport
-      await this.setUpDisplay()
-
-      // 设置viewportTools and synchronizers
-      this.setUpToolGroups()
-
-      this.setUpSynchronizers()
-      // this.$refs['CT_AXIAL'].scroll(0)
-      // this.$refs['PT_AXIAL'].scroll(0)
-      // this.$refs['FUSION_AXIAL'].scroll(0)
-      const viewport = renderingEngine.getViewport('CT_AXIAL')
-      if (viewport) {
-        this.defaultCamera = viewport.getCamera()
-      }
-      this.baseViewportSize.width = document.querySelector('.cornerstone-canvas').clientWidth
-      this.baseViewportSize.height = document.querySelector('.cornerstone-canvas').clientHeight
-      eventTarget.addEventListener(cornerstoneTools.Enums.Events.ANNOTATION_ADDED, (e) => {
-        console.log('ANNOTATION_ADDED')
-        this.onAnnotationAdded(e)
-      })
-
-      const debouncedCallback = this.debounce((e) => {
-        this.onAnnotationModified(e)
-      }, 120)
-      eventTarget.addEventListener(cornerstoneTools.Enums.Events.ANNOTATION_MODIFIED, (e) => {
-        debouncedCallback(e)
-      })
-      eventTarget.addEventListener(cornerstoneTools.Enums.Events.ANNOTATION_SELECTION_CHANGE, (e) => {
-        const { detail } = e
-        const { selection } = detail
-        if (selection && selection.length > 0) {
-          console.log( selection[0])
-          this.$refs['tableQuestions'].setActiveCollapse(selection[0])
-        }
-      })
-      this.loadingText = ''
-      this.loading = false
-    },
-    getSeriesInfo(seriesId) {
-      return new Promise(resolve => {
-        getDicomSeriesInfo({ seriesId }).then(res => {
-          var series = res.Result
-          var imageIds = []
-          var instanceList = []
-          series.InstanceInfoList.forEach(instance => {
-            if (instance.NumberOfFrames && instance.NumberOfFrames > 1) {
-              for (let i = 0; i < instance.NumberOfFrames; i++) {
-                const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instance.Path}?frame=${i}`
-                imageIds.push(imageId)
-              }
-            } else {
-              const imageId = `wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${instance.Path}`
-              imageIds.push(imageId)
-            }
-            instanceList.push(instance.Id)
-          })
-          resolve({
-            imageIds: imageIds,
-            instanceList: instanceList,
-            seriesId: series.Id,
-            imageIdIndex: 0,
-            seriesUid: series.SeriesInstanceUid,
-            seriesNumber: series.SeriesNumber,
-            sliceThickness: series.SliceThickness,
-            modality: series.Modality,
-            description: series.Description,
-            instanceCount: series.InstanceCount,
-            studyId: this.$route.query.studyId,
-            taskBlindName: this.taskBlindName,
-            visitTaskId: this.visitTaskId
-          })
-        })
-      })
-    },
-    removeAnnotation(obj) {
-      if (obj.annotation && obj.annotation.data.annotationUID) {
-        annotation.state.removeAnnotation(obj.annotation.data.annotationUID)
-        const viewports = [
-          'CT_AXIAL',
-          'PT_AXIAL',
-          'FUSION_AXIAL'
-          ]
-        viewports.map(viewportId => {
-          const renderingEngine = getRenderingEngine(renderingEngineId)
-          const viewport = renderingEngine.getViewport(viewportId)
-          viewport.render()
-        })
-      }
-      
-    },
-    onAnnotationAdded(e) {
-      const { detail } = e
-      const { annotation } = detail
-      const { metadata } = annotation
-      const measureData = {}
-      measureData.frame = 0
-      measureData.data = annotation
-      measureData.type = metadata.toolName
-      this.$refs['tableQuestions'] && this.$refs['tableQuestions'].setMeasuredData(measureData)
-
-      this.setToolMode('passive', metadata.toolName)
-      this.activeTool = ''
-    },
-    onAnnotationModified(e) {
-      console.log('onAnnotationModified')
-      const { detail } = e
-      const { annotation } = detail
-      const { metadata, data } = annotation
-      const measureData = {}
-      measureData.frame = 0
-      measureData.data = annotation
-      measureData.type = metadata.toolName
-      measureData.suvMax = data.cachedStats[`volumeId:${ptVolumeId}`] && data.cachedStats[`volumeId:${ptVolumeId}`].max ? data.cachedStats[`volumeId:${ptVolumeId}`].max.toFixed(this.digitPlaces) : null
-      measureData.modalityUnit = data.cachedStats[`volumeId:${ptVolumeId}`].modalityUnit
-      this.$refs['tableQuestions'].setMeasuredData(measureData)
-
-      this.setToolMode('passive', metadata.toolName)
-      if (this.activeTool) {
-        this.activeTool = ''
-      }
-    },
-    getImageInfo(viewportId, referencedImageId) {
-      if (!viewportId || !referencedImageId) return
-      var imageArr = referencedImageId.split('/')
-      var instanceId = imageArr[imageArr.length - 1]
-      if (viewportId === 'CT_AXIAL') {
-        return { studyId: this.ctSeries.studyId, seriesId: this.ctSeries.seriesId, instanceId, viewportId }
-      } else if (viewportId === 'PT_AXIAL') {
-        return { studyId: this.petSeries.studyId, seriesId: this.petSeries.seriesId, instanceId, viewportId }
-      } else {
-        return { studyId: this.petSeries.studyId, seriesId: this.petSeries.seriesId, instanceId, viewportId }
-      }
-    },
-    debounce(callback, delay) {
-      let timerId
-      return function() {
-        clearTimeout(timerId)
-        timerId = setTimeout(() => {
-          callback.apply(this, arguments)
-        }, delay)
-      }
-    },
-    async getImages() {
-      try {
-        // 开始计时器
-        this.startTimer()
-        // '影像加载中...'
-        this.loadingText = this.$t('trials:lugano:message:loadImages')
-
-        const ctImageIds = await createImageIdsAndCacheMetaData({
-          modality: 'CT',
-          imageIds: this.ctSeries.imageIds
-        })
-        const ptImageIds = await createImageIdsAndCacheMetaData({
-          modality: 'PT',
-          imageIds: this.petSeries.imageIds
-        })
-        // '体数据构建中...'
-        this.loadingText = this.$t('trials:lugano:message:loadVolumes')
-
-        this.ctVolume = await volumeLoader.createAndCacheVolume(ctVolumeId, {
-          imageIds: ctImageIds
-        })
-        this.ptVolume = await volumeLoader.createAndCacheVolume(ptVolumeId, {
-          imageIds: ptImageIds
-        })
-        // 重置计时器
-        this.resetTimer()
-      } catch (error) {
-        // 重置计时器
-        this.resetTimer()
-        console.log(error)
-      }
-    },
-    setUpToolGroups() {
-      cornerstoneTools.addTool(WindowLevelTool)
-      cornerstoneTools.addTool(ZoomTool)
-      cornerstoneTools.addTool(StackScrollMouseWheelTool)
-      cornerstoneTools.addTool(MIPJumpToClickTool)
-      cornerstoneTools.addTool(VolumeRotateMouseWheelTool)
-      cornerstoneTools.addTool(EllipticalROITool)
-      cornerstoneTools.addTool(CircleROITool)
-      cornerstoneTools.addTool(CrosshairsTool)
-      cornerstoneTools.addTool(TrackballRotateTool)
-      cornerstoneTools.addTool(ProbeTool)
-      cornerstoneTools.addTool(PanTool)
-      cornerstoneTools.addTool(ScaleOverlayTool)
-      cornerstoneTools.addTool(OrientationMarkerTool)
-      ctToolGroup = ToolGroupManager.createToolGroup(ctToolGroupId)
-      ctToolGroup.addViewport(viewportIds.CT.AXIAL, renderingEngineId)
-
-      ptToolGroup = ToolGroupManager.createToolGroup(ptToolGroupId)
-      ptToolGroup.addViewport(viewportIds.PT.AXIAL, renderingEngineId)
-
-      fusionToolGroup = ToolGroupManager.createToolGroup(fusionToolGroupId)
-      fusionToolGroup.addViewport(viewportIds.FUSION.AXIAL, renderingEngineId)
-
-      const toolGroups = [ctToolGroup, ptToolGroup]
-      toolGroups.forEach((toolGroup) => {
-        toolGroup.addTool(PanTool.toolName)
-        toolGroup.addTool(ZoomTool.toolName)
-        toolGroup.addTool(StackScrollMouseWheelTool.toolName)
-        toolGroup.addTool(EllipticalROITool.toolName)
-        toolGroup.addTool(CircleROITool.toolName, {
-          getTextLines: this.getTextLines
-        })
-        toolGroup.addTool(WindowLevelTool.toolName)
-        toolGroup.addTool(ProbeTool.toolName)
-        toolGroup.addTool(ScaleOverlayTool.toolName)
-        toolGroup.addTool(OrientationMarkerTool.toolName)
-      })
-
-      fusionToolGroup.addTool(PanTool.toolName)
-      fusionToolGroup.addTool(ZoomTool.toolName)
-      fusionToolGroup.addTool(StackScrollMouseWheelTool.toolName)
-      fusionToolGroup.addTool(EllipticalROITool.toolName, {
-        volumeId: ptVolumeId
-      })
-      fusionToolGroup.addTool(CircleROITool.toolName, {
-        volumeId: ptVolumeId,
-        getTextLines: this.getTextLines
-      })
-      fusionToolGroup.addTool(ProbeTool.toolName)
-      fusionToolGroup.addTool(ScaleOverlayTool.toolName)
-      fusionToolGroup.addTool(OrientationMarkerTool.toolName)
-      // Here is the difference in the toolGroups used, that we need to specify the
-      // volume to use for the WindowLevelTool for the fusion viewports
-
-      fusionToolGroup.addTool(WindowLevelTool.toolName, {
-        volumeId: ptVolumeId
-      });
-
-      [ctToolGroup, ptToolGroup, fusionToolGroup].forEach((toolGroup) => {
-        // toolGroup.setToolActive(ProbeTool.toolName, {
-        //   bindings: [
-        //     {
-        //       mouseButton: MouseBindings.Primary // Left Click
-        //     }
-        //   ]
-        // })
-        toolGroup.setToolActive(PanTool.toolName, {
-          bindings: [
-            {
-              mouseButton: MouseBindings.Auxiliary // Middle Click
-            }
-          ]
-        })
-        toolGroup.setToolActive(ZoomTool.toolName, {
-          bindings: [
-            {
-              mouseButton: MouseBindings.Secondary // Right Click
-            }
-          ]
-        })
-
-        toolGroup.setToolActive(StackScrollMouseWheelTool.toolName)
-        // toolGroup.setToolPassive(EllipticalROITool.toolName)
-        if (this.readingTaskState === 2) {
-          toolGroup.setToolEnabled(CircleROITool.toolName)
-        } else {
-          toolGroup.setToolPassive(CircleROITool.toolName)
-        }
-
-        // toolGroup.setToolPassive(ProbeTool.toolName)
-        // toolGroup.setToolPassive(WindowLevelTool.toolName)
-        toolGroup.setToolConfiguration(
-          ScaleOverlayTool.toolName,
-          {
-            scaleLocation: 'bottom'
-          },
-          true // overwrite
-        )
-        toolGroup.setToolEnabled(ScaleOverlayTool.toolName)
-        // toolGroup.setToolConfiguration(OrientationMarkerTool.toolName, {
-        //   orientationWidget: {
-        //     enabled: true,
-        //     viewportCorner: vtkOrientationMarkerWidget.Corners.BOTTOM_RIGHT,
-        //     viewportSize: 0.15,
-        //     minPixelSize: 15,
-        //     maxPixelSize: 45
-        //   },
-        //   overlayConfiguration: {
-        //     [OrientationMarkerTool.OVERLAY_MARKER_TYPES.ANNOTATED_CUBE]: {
-        //       faceProperties: {
-        //         xPlus: { text: 'R', faceColor: '#ffff00', faceRotation: 90 },
-        //         xMinus: { text: 'L', faceColor: '#ffff00', faceRotation: 270 },
-        //         yPlus: {
-        //           text: 'P',
-        //           faceColor: '#00ffff',
-        //           fontColor: 'white',
-        //           faceRotation: 180
-        //         },
-        //         yMinus: { text: 'A', faceColor: '#00ffff', fontColor: 'white' },
-        //         zPlus: { text: 'S' },
-        //         zMinus: { text: 'I' }
-        //       },
-        //       defaultStyle: {
-        //         fontStyle: 'bold',
-        //         fontFamily: 'Arial',
-        //         fontColor: 'black',
-        //         fontSizeScale: (res) => res / 2,
-        //         faceColor: '#0000ff',
-        //         edgeThickness: 0.1,
-        //         edgeColor: 'blue',
-        //         resolution: 400
-        //       }
-        //     }
-        //   }
-        // })
-        // toolGroup.setToolActive(OrientationMarkerTool.toolName)
-      })
-
-      // MIP Tool Groups
-      mipToolGroup = null
-      if (!ToolGroupManager.getToolGroup(mipToolGroupUID)) {
-        mipToolGroup = ToolGroupManager.createToolGroup(mipToolGroupUID)
-      } else {
-        mipToolGroup = ToolGroupManager.getToolGroup(mipToolGroupUID)
-      }
-
-      mipToolGroup.addTool('VolumeRotateMouseWheel')
-      mipToolGroup.addTool('MIPJumpToClickTool', {
-        //
-        toolGroupId: ptToolGroupId
-      })
-
-      // Set the initial state of the tools, here we set one tool active on left click.
-      // This means left click will draw that tool.
-      mipToolGroup.setToolActive('MIPJumpToClickTool', {
-        bindings: [
-          {
-            mouseButton: MouseBindings.Primary // Left ClickR
-          }
-        ]
-      })
-      // As the Stack Scroll mouse wheel is a tool using the `mouseWheelCallback`
-      // hook instead of mouse buttons, it does not need to assign any mouse button.
-      mipToolGroup.setToolActive('VolumeRotateMouseWheel')
-      // mipToolGroup.addTool(OrientationMarkerTool.toolName)
-      // mipToolGroup.setToolActive(OrientationMarkerTool.toolName)
-      mipToolGroup.addViewport(viewportIds.PETMIP.CORONAL, renderingEngineId)
-    },
-    getTextLines(data, targetId) {
-      const cachedVolumeStats = data.cachedStats[targetId]
-      const {
-        radius,
-        radiusUnit,
-        area,
-        mean,
-        stdDev,
-        max,
-        isEmptyArea,
-        // Modality,
-        areaUnit,
-        modalityUnit
-      } = cachedVolumeStats
-      var unit = modalityUnit
-      if (modalityUnit === 'raw') {
-        unit = 'SUV'
-      } else {
-        unit = modalityUnit
-      }
-      const textLines = []
-      if (data.remark) {
-        textLines.push(data.remark)
-      }
-      if (radius) {
-        const radiusLine = isEmptyArea
-          ? `Radius: Oblique not supported`
-          : `Radius: ${this.roundNumber(radius)} ${radiusUnit}`
-        textLines.push(radiusLine)
-      }
-
-      if (area) {
-        const areaLine = isEmptyArea
-          ? `Area: Oblique not supported`
-          : `Area: ${this.roundNumber(area)} ${areaUnit}`
-        textLines.push(areaLine)
-      }
-
-      if (mean) {
-        textLines.push(`Mean: ${this.roundNumber(mean)} ${unit}`)
-      }
-
-      if (max) {
-        textLines.push(`Max: ${this.roundNumber(max)} ${unit}`)
-      }
-
-      if (stdDev) {
-        textLines.push(`Std Dev: ${this.roundNumber(stdDev)} ${unit}`)
-      }
-
-      return textLines
-    },
-    roundNumber(value) {
-      if (value === undefined || value === null || value === '') {
-        return 'NaN'
-      }
-      value = Number(value)
-
-      return value.toFixed(this.digitPlaces)
-    },
-    // 设置测量工具启用(不会对输入作出反应)
-    setBasicToolActive(toolName) {
-      console.log('setBasicToolActive')
-      var toolGroupIds = [ctToolGroupId, ptToolGroupId, fusionToolGroupId]
-      toolGroupIds.forEach((toolGroupId) => {
-        const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
-        if (this.activeTool === toolName) {
-          toolGroup.setToolPassive(toolName)
-        } else {
-          if (this.activeTool) {
-            toolGroup.setToolPassive(this.activeTool)
-          }
-          var bindings = []
-          if (toolName === 'Pan') {
-            bindings = [
-              {
-                mouseButton: MouseBindings.Auxiliary // Middle Click
-              },
-              {
-                mouseButton: MouseBindings.Primary // Left Click
-              }
-            ]
-          } else if (toolName === 'Zoom') {
-            bindings = [
-              {
-                mouseButton: MouseBindings.Secondary // Right Click
-              },
-              {
-                mouseButton: MouseBindings.Primary // Left Click
-              }
-            ]
-          } else {
-            bindings = [
-              {
-                mouseButton: MouseBindings.Primary // Left Click
-              }
-            ]
-          }
-          toolGroup.setToolActive(toolName, {
-            bindings: bindings
-          })
-          // if (toolName === 'CircleROI') {
-          //   toolGroup.setToolConfiguration(CircleROITool.toolName, {
-          //     // centerPointRadius: 4,
-          //     disableCursor: true
-          //   })
-          // }
-        }
-      })
-      if (this.activeTool === toolName) {
-        this.activeTool = ''
-      } else {
-        this.activeTool = toolName
-      }
-      // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
-      // document.ondragstart = function() { return false }
-    },
-    setMeasureToolActive(toolName) {
-      var toolObj = this.$refs['tableQuestions'].isCanActiveTool(toolName)
-      if (!toolObj || !toolObj.isCanActiveTool) return
-      this.setBasicToolActive(toolName)
-    },
-    // 鼠标移入测量工具时，判断工具是否可激活
-    enter(e, toolName) {
-      var i = this.measuredTools.findIndex(item => item.toolName === toolName)
-      if (i === -1) return
-      var isCurrentTask = this.isCurrentTask
-      var readingTaskState = this.readingTaskState
-      if (!isCurrentTask || readingTaskState >= 2) {
-        this.measuredTools[i].isDisabled = true
-        e.target.style.cursor = 'not-allowed'
-        if (this.activeTool) {
-          this.setToolMode('enabled', toolName)
-          this.activeTool = ''
-        }
-      } else {
-        var obj = this.$refs['tableQuestions'].isCanActiveTool(toolName, true)
-        this.measuredTools[i].disabledReason = obj.reason
-        if (!obj.isCanActiveTool) {
-          if (this.activeTool === toolName) {
-            this.setToolMode('passive', toolName)
-            this.activeTool = ''
-          }
-          this.measuredTools[i].isDisabled = true
-          e.target.style.cursor = 'not-allowed'
-        } else {
-          this.measuredTools[i].isDisabled = false
-          e.target.style.cursor = 'pointer'
-        }
-      }
-    },
-    setToolMode(mode, toolName) {
-      console.log('setToolMode')
-      var toolGroupIds = [ctToolGroupId, ptToolGroupId, fusionToolGroupId]
-      toolGroupIds.forEach((toolGroupId) => {
-        const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
-        toolGroup.setToolPassive(toolName)
-        if (mode === 'enabled') {
-          toolGroup.setToolEnabled(toolName)
-        } else if (mode === 'passive') {
-          toolGroup.setToolPassive(toolName)
-        }
-      })
-    },
-    // 截屏
-    saveImage() {
-      // const canvas = this.canvas.querySelector('canvas')
-      // var pictureBaseStr = canvas.toDataURL('image/png', 1)
-      // return pictureBaseStr
-    },
-    setUpSynchronizers() {
-      // const axialCameraSynchronizerId = 'AXIAL_CAMERA_SYNCHRONIZER_ID'
-      // const ctVoiSynchronizerId = 'CT_VOI_SYNCHRONIZER_ID'
-      // const ptVoiSynchronizerId = 'PT_VOI_SYNCHRONIZER_ID'
-
-      axialCameraPositionSynchronizer = createCameraPositionSynchronizer(
-        axialCameraSynchronizerId
-      )
-      ctVoiSynchronizer = createVOISynchronizer(ctVoiSynchronizerId)
-      ptVoiSynchronizer = createVOISynchronizer(ptVoiSynchronizerId);
-
-      // Add viewports to camera synchronizers
-      [
-        viewportIds.CT.AXIAL,
-        viewportIds.PT.AXIAL,
-        viewportIds.FUSION.AXIAL
-      ].forEach((viewportId) => {
-        axialCameraPositionSynchronizer.add({
-          renderingEngineId,
-          viewportId
-        })
-      });
-
-      // Add viewports to VOI synchronizers
-      [
-        viewportIds.CT.AXIAL
-      ].forEach((viewportId) => {
-        ctVoiSynchronizer.add({
-          renderingEngineId,
-          viewportId
-        })
-      });
-      [
-        viewportIds.FUSION.AXIAL
-      ].forEach((viewportId) => {
-        // In this example, the fusion viewports are only targets for CT VOI
-        // synchronization, not sources
-        ctVoiSynchronizer.addTarget({
-          renderingEngineId,
-          viewportId
-        })
-      });
-      [
-        viewportIds.PT.AXIAL,
-        viewportIds.FUSION.AXIAL,
-        viewportIds.PETMIP.CORONAL
-      ].forEach((viewportId) => {
-        ptVoiSynchronizer.add({
-          renderingEngineId,
-          viewportId
-        })
-      })
-    },
-
-    async setUpDisplay() {
-      // 创建 viewports
-      const viewportInputArray = [
-        {
-          viewportId: viewportIds.CT.AXIAL,
-          type: ViewportType.ORTHOGRAPHIC,
-          element: element_ct,
-          defaultOptions: {
-            orientation: Enums.OrientationAxis.AXIAL
-            // background: [0, 0, 0]
-          }
-        },
-        {
-          viewportId: viewportIds.PT.AXIAL,
-          type: ViewportType.ORTHOGRAPHIC,
-          element: element_pet,
-          defaultOptions: {
-            orientation: Enums.OrientationAxis.AXIAL,
-            background: [1, 1, 1]
-          }
-        },
-        {
-          viewportId: viewportIds.FUSION.AXIAL,
-          type: ViewportType.ORTHOGRAPHIC,
-          element: element_fusion,
-          defaultOptions: {
-            orientation: Enums.OrientationAxis.AXIAL
-            // background: [0, 0, 0]
-          }
-        },
-        {
-          viewportId: viewportIds.PETMIP.CORONAL,
-          type: ViewportType.ORTHOGRAPHIC,
-          element: element_mip,
-          defaultOptions: {
-            orientation: Enums.OrientationAxis.CORONAL,
-            background: [1, 1, 1]
-          }
-        }
-      ]
-
-      renderingEngine.setViewports(viewportInputArray)
-
-      // Set the volumes to load
-      this.ptVolume.load()
-      this.ctVolume.load()
-      const windowCenter = this.ctVolume.cornerstoneImageMetaData.windowCenter[0]
-      const windowWidth = this.ctVolume.cornerstoneImageMetaData.windowWidth[0]
-      setCtMappingRange(windowWidth, windowCenter)
-      // Set volumes on the viewports
-      await setVolumesForViewports(
-        renderingEngine,
-        [
-          {
-            volumeId: ctVolumeId,
-            callback: setCtTransferFunctionForVolumeActor
-          }
-        ],
-        [viewportIds.CT.AXIAL]
-      )
-
-      await setVolumesForViewports(
-        renderingEngine,
-        [
-          {
-            volumeId: ptVolumeId,
-            callback: setPetTransferFunctionForVolumeActor
-          }
-        ],
-        [viewportIds.PT.AXIAL]
-      )
-
-      await setVolumesForViewports(
-        renderingEngine,
-        [
-          {
-            volumeId: ctVolumeId,
-            callback: setCtTransferFunctionForVolumeActor
-          },
-          {
-            volumeId: ptVolumeId,
-            callback: setPetColorMapTransferFunctionForVolumeActor
-          }
-        ],
-        [viewportIds.FUSION.AXIAL]
-      )
-
-      // Calculate size of fullBody pet mip
-      const ptVolumeDimensions = this.ptVolume.dimensions
-
-      // Only make the MIP as large as it needs to be.
-      const slabThickness = Math.sqrt(
-        ptVolumeDimensions[0] * ptVolumeDimensions[0] +
-      ptVolumeDimensions[1] * ptVolumeDimensions[1] +
-      ptVolumeDimensions[2] * ptVolumeDimensions[2]
-      )
-      setVolumesForViewports(
-        renderingEngine,
-        [
-          {
-            volumeId: ptVolumeId,
-            callback: setPetTransferFunctionForVolumeActor,
-            blendMode: BlendModes.MAXIMUM_INTENSITY_BLEND,
-            slabThickness
-          }
-        ],
-        [viewportIds.PETMIP.CORONAL]
-      )
-
-      await this.initializeCameraSync(renderingEngine)
-
-      // Render the viewports
-      renderingEngine.render()
-    },
-    initCameraSynchronization(sViewport, tViewport) {
-      // Initialise the sync as they viewports will have
-      // Different initial zoom levels for viewports of different sizes.
-
-      const camera = sViewport.getCamera()
-
-      tViewport.setCamera(camera)
-    },
-    async initializeCameraSync(renderingEngine) {
-      return new Promise(resolve => {
-      // The fusion scene is the target as it is scaled to both volumes.
-      // TODO -> We should have a more generic way to do this,
-      // So that when all data is added we can synchronize zoom/position before interaction.
-
-        const axialCtViewport = renderingEngine.getViewport(viewportIds.CT.AXIAL)
-
-        const axialPtViewport = renderingEngine.getViewport(viewportIds.PT.AXIAL)
-
-        const axialFusionViewport = renderingEngine.getViewport(
-          viewportIds.FUSION.AXIAL
-        )
-
-        this.initCameraSynchronization(axialFusionViewport, axialCtViewport)
-        this.initCameraSynchronization(axialFusionViewport, axialPtViewport)
-
-        renderingEngine.render()
-        resolve()
-      })
-    },
-    async resetViewport() {
-      if (this.activeTool) {
-        this.setToolMode('passive', this.activeTool)
-        this.activeTool = ''
-      }
-
-      const viewports = [
-        'CT_AXIAL',
-        'PT_AXIAL',
-        'FUSION_AXIAL'
-      ]
-      viewports.map(viewportId => {
-        const renderingEngine = getRenderingEngine(renderingEngineId)
-        const viewport = renderingEngine.getViewport(viewportId)
-        viewport.resetCamera(true, true, false)
-        if (this.defaultCamera) {
-          viewport.setCamera(this.defaultCamera)
-        }
-        viewport.render()
-        this.$refs[viewportId].resetMarks()
-      })
-
-      // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
-      // document.ondragstart = function() { return false }
-    },
-    fitToType(toolName) {
-      if (this.activeTool !== 'fitToWindow' && this.activeTool !== 'fitToImage') {
-        this.setToolMode('passive', this.activeTool)
-      }
-      if (toolName === 'fitToWindow') {
-        this.fitType = 0
-      } else if (toolName === 'fitToImage') {
-        this.fitType = 1
-      }
-      const viewports = [
-        'CT_AXIAL',
-        'PT_AXIAL',
-        'FUSION_AXIAL'
-      ]
-      viewports.map(viewportId => {
-        const renderingEngine = getRenderingEngine(renderingEngineId)
-        const viewport = renderingEngine.getViewport(viewportId)
-        viewport.resetCamera(true, true, false)
-        if (this.fitType && this.defaultCamera) {
-          viewport.setCamera(this.defaultCamera)
-        }
-        viewport.render()
-        this.$refs[viewportId].resetMarks()
-      })
-      this.activeTool = toolName
-    },
-    initSlider() {
-      var slider = document.getElementById('slider')
-      var sliderBox = document.getElementById('sliderBox')
-      var container = document.getElementById('colorBarCanvas')
-      slider.addEventListener('mousedown', () => {
-        this.isSlideMoving = true
-        // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
-        // document.ondragstart = function() { return false }
-      })
-      document.addEventListener('mousemove', (e) => {
-        if (this.isSlideMoving) {
-          var containerWidth = container.clientWidth
-          var sliderWidth = sliderBox.clientWidth
-          var maxLeft = containerWidth - sliderWidth
-          var left = e.clientX - container.getBoundingClientRect().left
-          var position = null
-          position = left
-          if (left < 0) {
-            left = 6
-            position = 0
-          } else if (left > maxLeft) {
-            left = maxLeft + 6
-            position = maxLeft
-          }
-
-          slider.style.left = left + 'px'
-          var positionValue = document.getElementById('slider-position')
-          var upper = this.range
-          position = parseInt((position / maxLeft) * upper)
-          positionValue.textContent = position
-          this.upper = position
-          this.voiChange(position)
-        }
-      })
-      document.addEventListener('mouseup', () => {
-        this.isSlideMoving = false
-        // document.onselectstart = null
-        // document.ondragstart = null
-      })
-    },
-    upperRangeChange(v) {
-      if (v === 0 || v < this.upper) {
-        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
-    },
-    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) {
-      const viewportId = viewportIds.FUSION.AXIAL
-      const volumeId = ptVolumeId
-      const voiRange = { lower: 0, upper: v }
-      const viewport = (
-        renderingEngine.getViewport(viewportId)
-      )
-      if (!viewport) return
-      const viewportsContainingVolumeUID = csUtils.getViewportsWithVolumeId(
-        volumeId,
-        viewport.renderingEngineId
-      )
-
-      viewport.setProperties({ voiRange }, volumeId)
-      viewportsContainingVolumeUID.forEach((vp) => {
-        vp.render()
-        this.$refs[vp.id].setWwWc()
-      })
-    },
-    async setColorMap(rgbPresetName) {
-      this.rgbPresetName = rgbPresetName
-      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
-      const mapper = volumeActor.getMapper()
-      mapper.setSampleDistance(1.0)
-
-      const cfun = vtkColorTransferFunction.newInstance()
-      const presetToUse = this.rgbPresetName
-      cfun.applyColorMap(presetToUse)
-      cfun.setMappingRange(0, 5)
-
-      volumeActor.getProperty().setRGBTransferFunction(0, cfun)
-
-      // Create scalar opacity function
-      const ofun = vtkPiecewiseFunction.newInstance()
-      ofun.addPoint(0, 0.0)
-      ofun.addPoint(0.1, 0.9)
-      ofun.addPoint(5, 1.0)
-
-      volumeActor.getProperty().setScalarOpacity(0, ofun)
-    },
-    getApplicableVolumeActor(volumeId, viewportId) {
-      const viewport = renderingEngine.getViewport(viewportId)
-      const actorEntries = viewport.getActors()
-      console.log(actorEntries)
-      // const actorEntries = this.getActors();
-
-      if (!actorEntries.length) {
-        return
-      }
-
-      let volumeActor
-
-      if (volumeId) {
-        const i = actorEntries.findIndex(e => e.uid === volumeId)
-        if (i > -1) {
-          volumeActor = actorEntries[i].actor
-        }
-      // volumeActor = this.getActor(volumeId)?.actor as vtkVolume;
-      }
-
-      // // set it for the first volume (if there are more than one - fusion)
-      if (!volumeActor) {
-        volumeActor = actorEntries[0].actor
-        volumeId = actorEntries[0].uid
-      }
-
-      return { volumeActor, volumeId }
-    },
-    createColorBar(rgbPresetName, elId, width, height) {
-      // const ctf = vtkColorTransferFunction.newInstance()
-      var colorMap = null
-      if (rgbPresetName === 'hsv') {
-        colorMap = vtkColorMaps.getPresetByName(rgbPresetName)
-      } else {
-        colorMap = getColormap(rgbPresetName)
-      }
-
-      const rgbPoints = colorMap.RGBPoints
-      // const range = ctf.getRange()
-      const canvas = document.getElementById(elId)
-      const ctx = canvas.getContext('2d')
-      const canvasWidth = width
-      const canvasHeight = height
-      const rectWidth = width
-      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)
-    },
-    toggleInvert() {
-      if (this.activeTool) {
-        this.setToolMode('passive', this.activeTool)
-        this.activeTool = ''
-      }
-      const viewports = [
-        { viewportId: 'CT_AXIAL', volumeId: ctVolumeId },
-        { viewportId: 'PT_AXIAL', volumeId: ptVolumeId }
-        // { viewportId: 'FUSION_AXIAL', volumeId: ptVolumeId }
-      ]
-      viewports.map(v => {
-        const { viewportId, volumeId } = v
-        const renderingEngine = getRenderingEngine(renderingEngineId)
-
-        // Get the volume viewport
-        const viewport = (
-          renderingEngine.getViewport(viewportId)
-        )
-
-        // Get the volume actor from the viewport
-        const actorEntry = viewport.getActor(volumeId)
-
-        const volumeActor = actorEntry.actor
-        const rgbTransferFunction = volumeActor
-          .getProperty()
-          .getRGBTransferFunction(0)
-
-        // Todo: implement invert in setProperties
-        csUtils.invertRgbTransferFunction(rgbTransferFunction)
-
-        viewport.render()
-      })
-    },
-    showPanel(e) {
-      e.currentTarget.firstChild.lastChild.style.display = 'block'
-      // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
-      // document.ondragstart = function() { return false }
-    },
-    handleMouseout(e) {
-      e.currentTarget.firstChild.lastChild.style.display = 'none'
-    },
-    showColorBarPanel(e) {
-      e.currentTarget.firstChild.firstChild.lastChild.style.display = 'block'
-      // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
-      // document.ondragstart = function() { return false }
-    },
-    handleColorBarMouseout(e) {
-      e.currentTarget.firstChild.firstChild.lastChild.style.display = 'none'
-    },
-
-    setDicomCanvasRotate(v) {
-      if (this.activeTool) {
-        this.setToolMode('passive', this.activeTool)
-        this.activeTool = ''
-      }
-
-      // Get the rendering engine
-      const renderingEngine = getRenderingEngine(renderingEngineId)
-
-      const viewport = renderingEngine.getViewport('CT_AXIAL')
-      const { flipHorizontal, flipVertical } = viewport.getCamera()
-      // Flip the viewport horizontally
-      if (v === 2) {
-        viewport.setCamera({ flipVertical: !flipVertical })
-      } else if (v === 3) {
-        viewport.setCamera({ flipHorizontal: !flipHorizontal })
-      } else if (v === 4) {
-        this.setRotate(viewport, -Math.PI / 2)
-      } else if (v === 5) {
-        this.setRotate(viewport, Math.PI / 2)
-      }
-
-      viewport.render()
-      if (v === 4 || v === 5) {
-        this.resetViewportMarks(v)
-      }
-
-      // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
-      // document.ondragstart = function() { return false }
-    },
-    resetViewportMarks(rotateType) {
-      ['CT_AXIAL', 'PT_AXIAL', 'FUSION_AXIAL'].map(v => {
-        this.$refs[v].rotateMarkers(rotateType)
-      })
-    },
-    setRotate(viewport, rotateIncrementDegrees) {
-      const camera = viewport.getCamera()
-      const { viewUp, position, focalPoint } = camera
-      const [cx, cy, cz] = focalPoint
-      const direction = [0, 0, -1]
-      const [ax, ay, az] = direction
-
-      const angle = rotateIncrementDegrees
-      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
-      })
-    },
-    setDicomCanvasWwwc(v) {
-      if (v.val === 0) {
-        // 自定义
-        var refName = this.activeIndex === 1 ? 'CT_AXIAL' : this.activeIndex === 2 ? 'PT_AXIAL' : this.activeIndex === 2 ? 'FUSION_AXIAL' : ''
-        if (refName) {
-          var wwwc = this.$refs[refName].imageInfo.wwwc
-          this.activeCanvasWW = wwwc ? parseInt(wwwc.split('/')[0]) : null
-          this.activeCanvasWC = wwwc ? parseInt(wwwc.split('/')[1]) : null
-        } else {
-          this.activeCanvasWW = null
-          this.activeCanvasWC = null
-        }
-
-        this.customWwc.visible = true
-      } else if (v.val === -1) {
-        // 默认值
-        const wc = this.ctVolume.cornerstoneImageMetaData.windowCenter[0]
-        const ww = this.ctVolume.cornerstoneImageMetaData.windowWidth[0]
-        this.changeMapperRange(wc, ww)
-      } else {
-        this.changeMapperRange(v.wc, v.ww)
-      }
-
-      // document.onselectstart = function() { return false }// 解决拖动会选中文字的问题
-      // document.ondragstart = function() { return false }
-    },
-    setWwwc(v) {
-      this.changeMapperRange(v.wc, v.ww)
-      this.customWwc.visible = false
-    },
-    changeMapperRange(wc, ww) {
-      var lower = wc - ww / 2.0
-      var upper = wc + ww / 2.0
-      const volumeId = ctVolumeId
-      const voiRange = { lower, upper }
-
-      const viewport = (
-        renderingEngine.getViewport(viewportIds.CT.AXIAL)
-      )
-      viewport.setProperties({ voiRange }, volumeId)
-
-      const viewportsContainingVolumeUID = csUtils.getViewportsWithVolumeId(
-        volumeId,
-        viewport.renderingEngineId
-      )
-      viewportsContainingVolumeUID.forEach((vp) => {
-        vp.render()
-        this.$refs[vp.id].setWwWc()
-      })
-    },
-    handleElementsClick() {
-      var elements = [element_ct, element_pet, element_fusion, element_mip]
-      elements.forEach((el, index) => {
-        el.addEventListener('click', () => {
-          this.activeIndex = index + 1
-        })
-      })
-    },
-    imageLocation(obj) {
-      return new Promise(resolve => {
-        console.log('imageLocation')
-        obj.markTool = obj.markTool ? obj.markTool : 'CircleROI'
-        this.setToolToTarget(obj)
-        if (!obj.annotation) {
-          resolve()
-          return
-        }
-        const { metadata } = obj.annotation.data
-        var imageArr = metadata.referencedImageId.split('/')
-        var instanceId = imageArr[imageArr.length - 1]
-        var viewportId = null
-        var index = -1
-        index = this.petSeries.instanceList.findIndex(i => i === instanceId)
-        if (index > -1) {
-          viewportId = 'PT_AXIAL'
-          this.$refs[viewportId].scroll(index)
-        } else {
-          index = this.ctSeries.instanceList.findIndex(i => i === instanceId)
-          if (index > -1) {
-            viewportId = 'CT_AXIAL'
-            this.$refs[viewportId].scroll(index)
-          }
-        }
-
-        resolve()
-      })
-    },
-    setToolToTarget(obj) {
-      console.log('setToolToTarget')
-      var toolGroupIds = [ctToolGroupId, ptToolGroupId, fusionToolGroupId]
-      if (this.readingTaskState < 2 && obj.markTool && !obj.otherMeasureData) {
-        toolGroupIds.forEach((toolGroupId) => {
-          const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
-          if (this.activeTool) {
-            toolGroup.setToolPassive(this.activeTool)
-          }
-          toolGroup.setToolActive(obj.markTool, {
-            bindings: [
-              {
-                mouseButton: MouseBindings.Primary // Left Click
-              }
-            ]
-          })
-        })
-        this.activeTool = obj.markTool
-      } else {
-        if (this.activeTool === obj.markTool) {
-          toolGroupIds.forEach((toolGroupId) => {
-            const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
-
-            toolGroup.setToolPassive(this.activeTool)
-          })
-          this.activeTool = ''
-        }
-      }
-    },
-    getTargetIdImage(
-      targetId,
-      renderingEngine
-    ) {
-      if (targetId.startsWith('imageId:')) {
-        const imageId = targetId.split('imageId:')[1]
-        const imageURI = utilities.imageIdToURI(imageId)
-        let viewports = utilities.getViewportsWithImageURI(
-          imageURI,
-          renderingEngine.id
-        )
-
-        if (!viewports || !viewports.length) {
-          return
-        }
-
-        viewports = viewports.filter((viewport) => {
-          return viewport.getCurrentImageId() === imageId
-        })
-
-        if (!viewports || !viewports.length) {
-          return
-        }
-
-        return viewports[0].getImageData()
-      } else if (targetId.startsWith('volumeId:')) {
-        const volumeId = targetId.split('volumeId:')[1]
-        const viewports = utilities.getViewportsWithVolumeId(
-          volumeId,
-          renderingEngine.id
-        )
-
-        if (!viewports || !viewports.length) {
-          return
-        }
-
-        return viewports[0].getImageData()
-      } else {
-        throw new Error(
-          'getTargetIdImage: targetId must start with "imageId:" or "volumeId:"'
-        )
-      }
-    },
-    rightClick(e) {
-      e.preventDefault()
-    },
-    async reloadViewport() {
-      const width = this.$refs.dicomContainer.offsetWidth
-      const height = this.$refs.dicomContainer.offsetHeight
-      if (this.viewportStyle.position) {
-        this.viewportStyle = {}
-      } else {
-        this.viewportStyle = {
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          zIndex: 1000,
-          width: width + 'px',
-          height: height - 1 + 'px'
-        }
-      }
-      const renderEngine = getRenderingEngine(renderingEngineId)
-      renderEngine.resize(true, true)
-    },
-
-    viewportRender() {
-      const viewportIds = ['PT_AXIAL', 'CT_AXIAL', 'FUSION_AXIAL']
-      viewportIds.map(v => {
-        const viewport = renderingEngine.getViewport(v)
-        if (viewport) {
-          viewport.render()
-        }
-      })
-    },
-    startTimer() {
-      timerId = setTimeout(() => {
-        // '当前pet-ct图像融合耗时过长，是否继续等待？'
-        this.$confirm(this.$t('trials:lugano:message:fusionMsg'), this.$t('trials:lugano:message:fusiontip'), {
-          type: 'warning'
-        }).then(() => {
-
-        }).catch(() => {
-          window.close()
-        })
-      }, timeout)
-    },
-    resetTimer() {
-      clearTimeout(timerId)
-    },
-    ...mapMutations({ setLanguage: 'lang/setLanguage' })
-  }
-}
-</script>
-<style lang="scss" scoped>
-
-.dicom-viewer-container{
-    display:flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: #000;
-    padding: 5px 2px;
-    ::v-deep .el-dialog {
-      background: #1e1e1e;
-      border: 1px solid #ddd;
-      color: #ddd;
-      .el-dialog__title{
-        color:#fff;
-      }
-      .el-input .el-input__inner{
-        background-color: transparent;
-        color: #ddd;
-        border: 1px solid #5e5e5e;
-      }
-      .el-input.is-disabled .el-input__inner{
-        background-color: #646464a1;
-      }
-      .el-form-item__label{
-        color: #dfdfdf
-      }
-    }
-  }
-  ::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
-  }
-  ::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background: #d0d0d0;
-  }
-  .dicom-tools{
-    box-sizing: border-box;
-    width: 100%;
-    height: 61px;
-    padding: 0 5px;
-    border: 1px solid #727272;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    .tool-wrapper{
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-right: 30px;
-      .icon{
-        padding: 5px;
-        border: 1px solid #404040;
-        cursor: pointer;
-        text-align: center;
-        .svg-icon{
-          font-size:25px;
-          color:#ddd;
-        }
-      }
-
-      .text{
-        position: relative;
-        font-size: 12px;
-        margin-top: 5px;
-        color: #d0d0d0;
-        display: none;
-      }
-    }
-    .tool_active{
-      background-color: #607d8b;
-    }
-    .tool_disabled{
-      cursor:not-allowed
-    }
-    .icon:hover{
-      background-color: #607d8b;
-    }
-    .dropdown {
-      position: relative;
-      display: inline-block;
-      .icon-content{
-        display: flex;
-        align-items: center;
-        border: 1px solid #404040;
-      }
-      .text{
-        text-align: center;
-      }
-      .tool-icon{
-        padding: 5px;
-        cursor: pointer;
-        text-align: center;
-        .svg-icon{
-          font-size:20px;
-          color:#ddd;
-        }
-      }
-
-      .arrow-icon{
-        cursor: pointer;
-        padding: 7px 2px 7px 0px;
-      }
-      .arrow-icon:hover{
-        background-color: #607d8b;
-      }
-      .icon-content-d:hover{
-        background-color: #607d8b;
-      }
-      .tool-icon-d{
-        padding: 5px;
-        .svg-icon{
-          font-size:20px;
-          color:#ddd;
-        }
-      }
-
-    }
-
-    .dropdown-content {
-      display: none;
-      position: absolute;
-      background-color: #383838;
-      color: #fff;
-      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-      z-index: 9999;
-      font-size: 12px;
-      ul{
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        text-align: center;
-        li{
-          a{
-            display: block;
-            padding: 5px;
-          }
-        }
-      }
-      ul li:hover{
-        background-color: #727272;
-        cursor: pointer;
-      }
-    }
-    .layout-content ul li{
-      border-top:1px solid #ddd;
-      border-left:1px solid #ddd;
-    }
-    .layout-content ul  .flex_row{
-      // border: 1px solid #ddd;
-      display: flex;
-      justify-content: space-between;
-      flex-direction: row;
-      align-items: center;
-      // padding: 2px;
-      margin-bottom: 2px;
-    }
-    .layout-content ul .flex_column{
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-      align-items: center;
-      margin-bottom: 2px;
-    }
-    .layout_box_1_1{
-      flex:1;
-      // border: 1px solid #ddd;
-      line-height: 30px;
-      font-size: 12px;
-      text-align: center;
-      border-bottom:1px solid #ddd;
-      border-right:1px solid #ddd;
-      // padding: 0 5px;
-    }
-    .layout_box_1_2{
-      flex:1;
-      line-height: 15px;
-      font-size: 10px;
-      text-align: center;
-      border-bottom:1px solid #ddd;
-      border-right:1px solid #ddd;
-    }
-    .layout-content li .layout_box_1_1 :last-child{
-      color: red;
-    }
-    .layout-content li:hover {
-      cursor: pointer;
-      background-color: #727272;
-    }
-    .activeLi{
-      background-color: #919295;
-    }
-
-  }
-  .dicom-datas{
-    box-sizing: border-box;
-    flex: 1;
-    margin-top: 5px;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    overflow: hidden;
-    .form-container{
-      width: 350px;
-      height: 100%;
-      border: 1px solid #727272;
-    }
-    .dicom-container{
-      box-sizing: border-box;
-      flex: 1;
-      height: 100%;
-      border: 1px solid #727272;
-    }
-
-    .measurement-container{
-      overflow-y: auto;
-    }
-    .box{
-      display: grid;
-      box-sizing: border-box;
-      height: 100%;
-      padding: 0;
-      .item{
-        box-sizing: border-box;
-        position: relative;
-        border: 1px solid rgba(255, 255, 255, 0.21);
-        position: relative;
-        &_active{
-          // border: 2px solid #ffeb3b;fff
-          border: 1px dashed rgb(250, 250, 0);
-
-        }
-      }
-    }
-    .box_2_2{
-      grid-template-columns: repeat(2, 50%); //1列，占50%
-      grid-template-rows: repeat(2, 50%); //1行，占50%
-    }
-    .box_1_1{
-      grid-template-columns: repeat(1, 100%);
-      grid-template-rows: repeat(1, 100%);
-    }
-
-  }
-  .colorBar{
-   ::v-deep .el-input--mini .el-input__inner{
-      height: 25px;
-      line-height: 25px;
-      border: none;
-      background-color: transparent;
-      color:#ddd;
-    }
-  }
-
-</style>
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
index 29130d63..94d69fa0 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/PetCtViewport.vue
+++ b/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) => {
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/colorMap.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/colorMap.vue
index 8fc9fdc9..0660843c 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/colorMap.vue
+++ b/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
diff --git a/src/views/trials/trials-panel/reading/reading-task/index.vue b/src/views/trials/trials-panel/reading/reading-task/index.vue
index aaa1d70c..ead1b50e 100644
--- a/src/views/trials/trials-panel/reading/reading-task/index.vue
+++ b/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}`
-          }
+          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}`
         }