From f1dee25987aabc593cd269dc56997c51e6be901c Mon Sep 17 00:00:00 2001
From: caiyiling <1321909229@qq.com>
Date: Thu, 2 Jan 2025 09:18:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A0=B8=E5=8C=BB=E5=AD=A6=E6=A0=87=E5=87=86?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=9E=8D=E5=90=88=E6=BC=94=E7=A4=BA=E6=A1=88?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                                   |    2 +-
 src/router/index.js                           |    6 +
 .../components/Fusion/demo/Assessment.vue     |  106 +
 .../components/Fusion/demo/Questions.vue      |  148 ++
 .../components/Fusion/demo/TableQuestions.vue |  354 +++
 .../components/Fusion/demo/Viewport.vue       |  687 ++++++
 .../dicoms/components/Fusion/demo/index.vue   | 2155 +++++++++++++++++
 .../reading/reading-task/index.vue            |    6 +-
 8 files changed, 3462 insertions(+), 2 deletions(-)
 create mode 100644 src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Assessment.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Questions.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/TableQuestions.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Viewport.vue
 create mode 100644 src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index.vue

diff --git a/src/main.js b/src/main.js
index 968fbd18..f9799d70 100644
--- a/src/main.js
+++ b/src/main.js
@@ -174,7 +174,7 @@ var _vm
 async function VueInit() {
   var params
   var res
-  if (~window.location.href.indexOf('/readingDicoms') || ~window.location.href.indexOf('/noneDicomReading') || ~window.location.href.indexOf('/criterionquestions') || ~window.location.href.indexOf('/petct')) {
+  if (~window.location.href.indexOf('/readingDicoms') || ~window.location.href.indexOf('/noneDicomReading') || ~window.location.href.indexOf('/criterionquestions') || ~window.location.href.indexOf('/petct') || ~window.location.href.indexOf('/fusion')) {
     params = $q('TrialReadingCriterionId')
     res = await getBasicDataAllSelect(params)
   } else if (~window.location.href.indexOf('/ecrfPreview')) {
diff --git a/src/router/index.js b/src/router/index.js
index 302adff7..c4866af8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -139,6 +139,12 @@ export const constantRoutes = [
     hidden: true,
     component: () => import('@/views/trials/trials-panel/reading/dicoms/components/Fusion/PetCt')
   },
+  {
+    path: '/fusion',
+    name: 'fusion',
+    hidden: true,
+    component: () => import('@/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index')
+  },
 
   {
     path: '/historyScreenshot',
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
new file mode 100644
index 00000000..baf762d1
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Assessment.vue
@@ -0,0 +1,106 @@
+<template>
+  <div v-loading="loading" class="ecrf-wrapper">
+     <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
+        评估说明
+      </h4>
+    <el-form
+      ref="questions"
+      size="small"
+      :model="questionForm"
+    >
+      <el-form-item
+        label="访视点备注" 
+        prop="note"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-input
+          v-model="questionForm.note"
+          :disabled="readingTaskState >= 2"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4}"
+          maxlength="500"
+        />
+      </el-form-item>
+      <el-form-item v-if="readingTaskState < 2">
+        <div style="text-align:right">
+          <el-button size="mini" @click="handleSave">{{ $t('common:button:save') }}</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'ECRF',
+  data() {
+    return {
+      loading: false,
+      questionForm: {
+        note: ''
+      },
+      readingTaskState: 1,
+      isBaseLineTask: false,
+      visitTaskId: ''
+    }
+  },
+  mounted() {
+    this.trialId = this.$route.query.trialId
+    this.visitTaskId = this.$route.query.visitTaskId
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    handleSave() {
+      this.$refs['questions'].validate((valid) => {
+        if (!valid) return
+        
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .ecrf-wrapper{
+
+    /deep/ .el-form-item__label{
+      color: #c3c3c3;
+      text-align: left;
+    }
+    /deep/ .el-input__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    /deep/ .el-textarea__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    /deep/ .el-form-item{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+    /deep/ .el-form-item__content{
+      flex: 1;
+    }
+    /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
new file mode 100644
index 00000000..80311289
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Questions.vue
@@ -0,0 +1,148 @@
+<template>
+  <div v-loading="loading" class="ecrf-wrapper">
+     <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
+        影像质量
+      </h4>
+    <el-form
+      ref="questions"
+      size="small"
+      :model="questionForm"
+    >
+      <el-form-item 
+        label="影像质量"
+        prop="imageQuality"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-radio-group v-model="questionForm.imageQuality">
+          <el-radio
+            v-for="item of $d.ImageQualityEvaluation"
+            :key="item.id"
+            :label="item.value"
+          >
+            {{ item.label }}
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item 
+        v-if="questionForm.imageQuality === 2"
+        label="影像质量问题" 
+        prop="imageQualityIssues"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-select
+          v-model="questionForm.imageQualityIssues"
+          :disabled="readingTaskState >= 2"
+          clearable
+        >
+          <el-option
+            v-for="item of $d.ImageQualityIssues"
+            :key="item.id"
+            :value="item.value"
+            :label="item.label"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="questionForm.imageQualityIssues === 5"
+        label="影像质量备注" 
+        prop="note"
+        :rules="[
+          { required: true,
+            message:$t('common:ruleMessage:specify'), trigger: ['blur', 'change']},
+        ]"
+      >
+        <el-input
+          v-model="questionForm.note"
+          :disabled="readingTaskState >= 2"
+          type="textarea"
+          :autosize="{ minRows: 2, maxRows: 4}"
+          maxlength="500"
+        />
+      </el-form-item>
+      <el-form-item v-if="readingTaskState < 2">
+        <div style="text-align:right">
+          <el-button size="mini" @click="handleSave">{{ $t('common:button:save') }}</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </div>
+
+</template>
+
+<script>
+
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'ECRF',
+  data() {
+    return {
+      loading: false,
+      questionForm: {
+        imageQuality: null,
+        imageQualityIssues: null,
+        note: ''
+      },
+      readingTaskState: 1,
+      isBaseLineTask: false,
+      visitTaskId: ''
+    }
+  },
+  mounted() {
+    this.trialId = this.$route.query.trialId
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    handleSave() {
+      this.$refs['questions'].validate((valid) => {
+        if (!valid) return
+        
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .ecrf-wrapper{
+
+    /deep/ .el-form-item__label{
+      color: #c3c3c3;
+      text-align: left;
+    }
+    /deep/ .el-input__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    /deep/ .el-textarea__inner{
+      background-color: transparent;
+      color: #ddd;
+      border: 1px solid #5e5e5e;
+    }
+    /deep/ .el-form-item{
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+    }
+    /deep/ .el-form-item__content{
+      flex: 1;
+    }
+    /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
new file mode 100644
index 00000000..946aba1f
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/TableQuestions.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="measurement-wrapper">
+
+    <div class="container">
+      <h4 style="color: #ddd;padding: 5px 0px;margin: 0;">
+        核医学评估
+      </h4>
+      <div class="lesion_list">
+        <div class="flex-row" style="margin:3px 0;">
+          <div class="title">盆腔淋巴结</div>
+        </div>
+        <el-table
+          :data="questions"
+          style="width: 100%"
+          row-key="rowIndex"    
+          :expand-row-keys="expands"
+          @expand-change="expandSelect"
+          size="mini"
+        >
+          <el-table-column type="expand">
+            <template slot-scope="props">
+              <el-form :ref="props.row.rowIndex" size="small" :model="props.row" label-width="80px" style="padding-right: 10px">
+                <el-form-item label="部位">
+                  <el-input
+                    v-model="props.row.part"
+                    disabled
+                  />
+                </el-form-item>
+                <el-form-item 
+                  label="转移灶"
+                  prop="distraction"
+                  :rules="[
+                    { required: true,
+                      message:$t('common:ruleMessage:select'), trigger: ['blur', 'change']},
+                  ]"
+                >
+                  <el-select v-model="props.row.distraction" style="width:100%;">
+                    <el-option label="阴性" :value="1"></el-option>
+                    <el-option label="阳性" :value="2"></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="SUVmax">
+                  <el-input
+                    v-model="props.row.suvMax"
+                    disabled
+                  />
+                </el-form-item>
+                <el-form-item >
+                  <div style="text-align:right">
+                    <el-button v-if="props.row.annotation" size="mini" @click="clearAnnotation(props.row)">{{ $t('trials:reading:button:removeMark') }}</el-button>
+                    <el-button size="mini" @click="handleSave(props.row)">{{ $t('common:button:save') }}</el-button>
+                  </div>
+                </el-form-item>
+              </el-form>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="部位"
+            prop="part">
+          </el-table-column>
+          <el-table-column
+            label="转移灶"
+            prop="distraction">
+            <template slot-scope="scope">
+              {{scope.row.distraction === 1 ? '阴性' : scope.row.distraction === 2 ? '阳性' : ''}}
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="SUVmax"
+            prop="suvMax">
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import FusionEvent from './../FusionEvent'
+export default {
+  name: 'TableQuestionList',
+  components: {
+  },
+  data() {
+    return {
+      height: window.innerHeight - 140,
+      questions: [
+        { 
+          rowIndex: '001',
+          part: '髂内',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        },
+        {
+          rowIndex: '002',
+          part: '髂外',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        },
+        {
+          rowIndex: '003',
+          part: '髂总',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        },
+        {
+          rowIndex: '004',
+          part: '闭孔',
+          distraction: '',
+          suvMax: null,
+          saveTypeEnum: 1,
+          annotation: null
+        }
+      ],
+      visitTaskId: '',
+      isCurrentTask: false,
+      loading: false,
+      readingTaskState: 1,
+      isBaseLineTask: false,
+      taskBlindName: '',
+      expands:[]
+    }
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+  methods: {
+    expandSelect(row, expandedRows) {
+      this.expands = []
+      if (expandedRows.length > 0) {
+        row ? this.expands.push(row.rowIndex) : ''
+      }
+      if (this.expands.length > 0 && row.annotation) {
+        FusionEvent.$emit('imageLocation', { annotation: row.annotation })
+      }
+    },
+    async clearAnnotation(row) {
+       // 是否确认清除标记？
+      const confirm = await this.$confirm(
+        this.$t('trials:reading:warnning:msg47'),
+        {
+          type: 'warning',
+          distinguishCancelAndClose: true
+        }
+      )
+      if (confirm !== 'confirm') return
+      let i = this.questions.findIndex(i=>i.rowIndex === row.rowIndex)
+      FusionEvent.$emit('removeAnnotation', { annotation: this.questions[i].annotation })
+      this.questions[i].annotation = null
+      this.questions[i].suvMax = null
+    },
+    async handleSave(row) {
+      let loading = null
+      try {
+        let valid = await this.$refs[row.rowIndex].validate()
+        if (!valid) return
+        loading = this.$loading({ fullscreen: true })
+        setTimeout(() => {
+          // 模拟保存成功
+          loading.close()
+          this.$message.success(this.$t('common:message:savedSuccessfully'))
+
+          // 可以在这里添加更多的逻辑，比如更新页面上的某些元素
+        }, 2000); 
+      } catch(e) {
+        if (loading) {
+          loading.close()
+        }
+      }
+    },
+    setActiveCollapse(annotationUID) {
+      for (let i = 0; i < this.questions.length; i++) {
+        let obj = this.questions[i]
+        if (obj.annotation && obj.annotation.data && obj.annotation.data.annotationUID === annotationUID) {
+          this.expands = [this.questions[i].rowIndex]
+          break
+        }
+      }
+    },
+    isCanActiveTool(toolName) {
+      if (this.expands.length > 0) {
+        let isExist = this.isExistMeasureData(this.expands[0])
+        return { isCanActiveTool: isExist, reason: '' }
+      } else {
+        return { isCanActiveTool: false, reason: '' }
+      }
+    },
+    isExistMeasureData(rowIndex) {
+      let i = this.questions.findIndex(i=>i.rowIndex === rowIndex)
+      if (this.questions[i].annotation) {
+        return false
+      } else {
+        return true
+      }
+    },
+    // modifyMeasuredData(measureObj) {
+    //   if (measureObj.questionInfo) {
+    //     this.activeItem.activeCollapseId = measureObj.questionInfo.QuestionId
+    //     this.activeItem.activeRowIndex = String(measureObj.questionInfo.RowIndex)
+    //     this.activeName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
+    //     const refName = `${this.activeItem.activeCollapseId}_${this.activeItem.activeRowIndex}`
+    //     if (this.$refs[refName]) {
+    //       this.$refs[refName][0].setMeasureData(measureObj.measureData)
+    //     }
+    //   }
+    // },
+    // 设置测量数据
+    setMeasuredData(measureData) {
+      if (measureData.data && measureData.data.data && measureData.data.data.remark ) {
+        // 编辑
+        // 展开并更新标记信息
+        let remark = measureData.data.data.remark
+        let i = this.questions.findIndex(i=>i.part === remark)
+        this.questions[i].suvMax = measureData.suvMax
+        this.questions[i].annotation = measureData
+        this.expands = [this.questions[i].rowIndex]
+      } else {
+        if (this.expands.length > 0) {
+        let i = this.questions.findIndex(i=>i.rowIndex === this.expands[0])
+        if (measureData.data && measureData.data.data) {
+          measureData.data.data.remark = this.questions[i].part
+        }
+        
+        this.questions[i].annotation = measureData
+      }
+      }
+      
+    },
+
+  }
+}
+</script>
+<style lang="scss" scoped>
+.measurement-wrapper{
+
+  // .container{
+  //   padding: 10px;
+  // }
+  .title{
+    padding: 5px;
+    font-weight: bold;
+    color: #ddd;
+    font-size: 15px;
+
+  }
+  .add-icon{
+    padding: 5px;
+    font-weight: bold;
+    color: #ddd;
+    font-size: 15px;
+    border: 1px solid #938b8b;
+    margin-bottom: 2px;
+    cursor: pointer;
+  }
+  .add-icon:hover{
+    background-color: #607d8b;
+  }
+
+  .flex-row{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background-color: #424242;
+
+  }
+  .lesion_list{
+    position: relative;
+    /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;
+      }
+    }
+    
+
+    /deep/ .el-table th, .el-table tr {
+      background-color: #000;
+      color: #fff;
+      border-color:#444444;
+    }
+    /deep/ .el-table__body tr > td{
+      background-color:#000 !important;
+      color: #fff;
+      border-color:#444444;
+    }
+    // /deep/ .el-table__body tr:hover > td{
+    //   background-color:#858282 !important;
+    //   color: #fff;
+    //   border-color:#444444;
+    // }
+    /deep/ .el-table--border th.gutter:last-of-type{
+      border: none;
+    }
+    /deep/ .el-card__header{
+      border: none;
+      padding: 10px;
+    }
+  }
+  .el-collapse{
+    border-bottom:none;
+    border-top:none;
+    /deep/ .el-collapse-item{
+      background-color: #000!important;
+      color: #ddd;
+
+    }
+    /deep/ .el-collapse-item__header{
+      background-color: #000!important;
+      color: #ddd;
+      border-bottom-color:#5a5a5a;
+      padding-left: 5px;
+      height: 35px;
+      line-height: 35px;
+    }
+    /deep/ .el-collapse-item__wrap{
+      background-color: #000!important;
+      color: #ddd;
+    }
+    /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
new file mode 100644
index 00000000..ab9f970d
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/Viewport.vue
@@ -0,0 +1,687 @@
+<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
+    },
+    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
+      })
+      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
new file mode 100644
index 00000000..4256d086
--- /dev/null
+++ b/src/views/trials/trials-panel/reading/dicoms/components/Fusion/demo/index.vue
@@ -0,0 +1,2155 @@
+<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;
+    /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{
+   /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/reading-task/index.vue b/src/views/trials/trials-panel/reading/reading-task/index.vue
index e46e1c6f..b02e325a 100644
--- a/src/views/trials/trials-panel/reading/reading-task/index.vue
+++ b/src/views/trials/trials-panel/reading/reading-task/index.vue
@@ -424,7 +424,11 @@ export default {
         var token = getToken()
         var path = ''
         if (this.readingTool === 0) {
-          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}`
+          if (this.criterionType === 0 && this.trialId === '08dd28b3-6843-fc05-0242-ac1301000000') {
+             path = `/fusion?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&studyId=62b3dfc4-1e04-4180-910d-fe595f398361&ctseriesId=1bd24f53-d419-32e5-92d4-2b04640aaa65&ptseriesId=2b7b128d-8c3f-8357-ad14-e38f3acbbdff&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&TokenKey=${token}&lang=${this.$i18n.locale}`
+          } else {
+            path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
+          }
         } else {
           path = `/noneDicomReading?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`
         }