Merge branch 'main' of https://gitea.frp.extimaging.com/XCKJ/irc_web into main

src/api/reading.js

@@ -432,6 +432,22 @@ export function studyUndoMaskImage(data) {
     data
   })
 }
+// 非dicom图像数据匿名
+export function noneDicomStudyMaskImage(data) {
+  return request({
+    url: `/NoneDicomStudy/noneDicomStudyMaskImage`,
+    method: 'post',
+    data
+  })
+}
+// 非dicom图像数据撤销匿名
+export function noneDicomStudyUndoMaskImage(data) {
+  return request({
+    url: `/NoneDicomStudy/noneDicomStudyUndoMaskImage`,
+    method: 'post',
+    data
+  })
+}
 // 获取分割组历史版本
 export function getSegmentationVersionList(data) {
   return request({

src/views/none-dicoms/components/file-viewer.vue

@@ -39,43 +39,72 @@
             </div>
             <div class="content-main" :ref="`video-content-main-${index}`" style="flex: 1;">
               <video v-if="v.currentFilePath" :ref="`videovideo-${index}`"
-                :src="`${OSSclientConfig.basePath}${v.currentFilePath}`" crossorigin="anonymous"
+                :src="`${OSSclientConfig.basePath}${v.currentFilePath}`" crossorigin="anonymous" width="100%"
-                width="100%" height="100%" autoplay controls controlsList="nodownload"></video>
+                height="100%" autoplay controls controlsList="nodownload"></video>
             </div>
 
           </div>
 
         </div>
       </div>
+      <div class="Anonymous" v-if="isAnonymous">
+        <div
+          :class="{ btn: true, activeBtn: activeTool === 'Note_RectangleRoi' && !isComparison, isNoted: isComparison }"
+          @click="setToolActive('Note_RectangleRoi')">{{
+            $t('DicomViewer:anonymous:Note_RectangleRoi') }}</div>
+        <div :class="{ btn: true, activeBtn: activeTool === 'Eraser' && !isComparison, isNoted: isComparison }"
+          @click="setToolActive('Eraser')">{{
+            $t('DicomViewer:anonymous:Eraser') }}
+        </div>
+        <div :class="{ btn: true, isNoted: isComparison }" @click="anonymousImage(false)">{{
+          $t('DicomViewer:anonymous:Application') }}</div>
+        <!-- <div class="btn">刷新图像</div> -->
+        <div class="btn" v-if="!isComparison" @click="comparison(true)">{{
+          $t('DicomViewer:anonymous:Comparison') }}</div>
+        <div class="btn" v-else @click="comparison(false)">{{
+          $t('DicomViewer:anonymous:Exit') }}</div>
+        <div :class="{ btn: true }" @click="recovery(false)">{{
+          $t('DicomViewer:anonymous:Recovery') }}</div>
+        <!-- <div :class="{ btn: true }" @click="recovery(true)">{{
+          $t('DicomViewer:anonymous:RecoveryAll') }}</div> -->
+      </div>
     </div>
     <!-- tools -->
     <div class="dicom-tools">
-      <div class="measureTool-wrapper">
+      <div class="measureTool-wrapper" v-if="hasAnonymous && hasPermi(['role:iqc'])">
-        <div class="sideTool-title">{{ $t('trials:reading:button:layout') }}</div>
+        <div class="sideTool-title">{{ $t('DicomViewer:anonymous:PixelAnonymity') }}</div>
         <div class="sideTool-wrapper">
-          <label>{{ $t('trials:reading:button:layout') }}:</label>
+          <!-- <label>{{ $t('trials:reading:button:layout') }}:</label> -->
-          <select class="sidetool-select" style="width:90px" :value="layout.replace('*', 'x')" @change="handleLayoutChange">
+          <!-- <select class="sidetool-select" style="width:90px" :value="layout.replace('*', 'x')"
+            @change="handleLayoutChange">
             <option value="1x1">1x1</option>
             <option value="1x2">1x2</option>
             <option value="2x1">2x1</option>
             <option value="2x2">2x2</option>
-          </select>
+          </select> -->
+          <div :class="{ btnBox: true, activeBtnBox: isAnonymous }" @click="openAnonymous">{{
+            $t('DicomViewer:anonymous:PixelAnonymity')
+          }}
+          </div>
         </div>
       </div>
       <!-- 图像变换 -->
       <div class="measureTool-wrapper">
         <div class="sideTool-title">{{ $t('trials:dicom-show:transform') }}</div>
         <div class="sideTool-wrapper">
-          <button :title="$t('trials:reading:button:zoom')" :class="{ 'btn-link': true, activeTool: activeTool === 'Zoom' }"
+          <button :title="$t('trials:reading:button:zoom')"
-            data-tool="Zoom" @click="setToolActive('Zoom')">
+            :class="{ 'btn-link': true, activeTool: activeTool === 'Zoom' }" data-tool="Zoom"
+            @click="setToolActive('Zoom')">
             <svg-icon icon-class="magnifier" style="font-size:20px;" />
           </button>
-          <button :title="$t('trials:reading:button:move')" :class="{ 'btn-link': true, activeTool: activeTool === 'Pan' }"
+          <button :title="$t('trials:reading:button:move')"
-            data-tool="Pan" @click="setToolActive('Pan')">
+            :class="{ 'btn-link': true, activeTool: activeTool === 'Pan' }" data-tool="Pan"
+            @click="setToolActive('Pan')">
             <svg-icon icon-class="move" style="font-size:20px;" />
           </button>
-          <button :title="$t('trials:reading:button:rotate')" :class="{ 'btn-link': true, activeTool: activeTool === 'PlanarRotate' }"
+          <button :title="$t('trials:reading:button:rotate')"
-            data-tool="PlanarRotate" @click="setToolActive('PlanarRotate')">
+            :class="{ 'btn-link': true, activeTool: activeTool === 'PlanarRotate' }" data-tool="PlanarRotate"
+            @click="setToolActive('PlanarRotate')">
             <svg-icon icon-class="rotate" style="font-size:20px;" />
           </button>
           <button :title="$t('trials:reading:button:reset')" class="btn-link" @click="resetViewport">
@@ -116,7 +145,8 @@ import LengthscaleTool from "@/views/trials/trials-panel/reading/visit-review/to
 import initLibraries from '@/views/trials/trials-panel/reading/dicoms/components/Fusion/js/initLibraries'
 import hardcodedMetaDataProvider from '@/views/trials/trials-panel/reading/visit-review/js/hardcodedMetaDataProvider'
 import registerWebImageLoader from '@/views/trials/trials-panel/reading/visit-review/js/registerWebImageLoader'
-import store from '@/store'
+import Note_RectangleRoiTool from '@/views/trials/trials-panel/reading/dicoms3D/components/tools/Note_RectangleRoiTool'
+import { noneDicomStudyMaskImage, noneDicomStudyUndoMaskImage } from "@/api/reading"
 const { ViewportType } = Enums
 const renderingEngineId = 'myRenderingEngine'
 const {
@@ -137,6 +167,7 @@ const {
   AngleTool,
   BidirectionalTool,
   // cursors
+  annotation
 } = cornerstoneTools
 const newStyles = {
   global: {
@@ -167,6 +198,9 @@ export default {
   name: 'ImageViewer',
   data() {
     return {
+      hasAnonymous: false,
+      isAnonymous: false,
+      isComparison: false,
       rows: 1,
       cols: 1,
       fullScreenIndex: null,
@@ -181,6 +215,7 @@ export default {
       tools: [],
       viewportInfos: [],
       activeCanvasIndex: 0,
+      serie: {}
     }
   },
   computed: {
@@ -206,6 +241,8 @@ export default {
     }
   },
   mounted() {
+    let type = this.$router.currentRoute.query.type ? this.$router.currentRoute.query.type : ''
+    this.hasAnonymous = type === 'Study'
     this.tools = config.customizeStandardsNoneDicom
     this.trialId = this.$route.query.trialId
     this.viewportInfos = Array.from({ length: this.cellsMax }, (_, index) => ({
@@ -228,6 +265,174 @@ export default {
     });
   },
   methods: {
+    // 对比
+    comparison(f) {
+      this.setToolsPassive()
+      if (f) {
+        if (!this.serie.fileInfo.IsBeMark) return this.$confirm(this.$t("DicomViewer:anonymous:notMasked"))
+        this.isComparison = f
+        this.$emit("update:isComparison", this.isComparison)
+        const toolGroup = ToolGroupManager.getToolGroup(`canvas-0`)
+        toolGroup.setToolEnabled(StackScrollTool.toolName)
+        this.handleLayoutChange({
+          target: {
+            value: `1x2`
+          }
+        })
+        let path = this.serie.fileInfo.Path.split(".MaskNoneDicom_")[0]
+        let imageIds = [`web:${this.OSSclientConfig.basePath}${path}`]
+        let file = Object.assign({}, this.serie.fileInfo)
+        file.Path = path
+        file.FullFilePath = path
+        this.viewportInfos[1] = Object.assign({}, this.viewportInfos[0])
+        this.viewportInfos[1].fileList = [file]
+        this.viewportInfos[1].imageIds = imageIds
+        console.log(imageIds, 'imageIds')
+        if (imageIds.length > 0) {
+          this.renderImage(imageIds, 1, 0)
+        }
+      } else {
+        this.isComparison = f
+        this.$emit("update:isComparison", this.isComparison)
+        const toolGroup = ToolGroupManager.getToolGroup(`canvas-0`)
+        toolGroup.setToolActive(StackScrollTool.toolName, {
+          bindings: [{ mouseButton: MouseBindings.Wheel }]
+        })
+        this.handleLayoutChange({
+          target: {
+            value: `1x1`
+          }
+        })
+        this.activeCanvasIndex = 0
+        this.$emit('toggleImage', {
+          studyId: this.serie.studyId,
+          path: this.serie.fileInfo.Path,
+        })
+      }
+    },
+    // 恢复
+    async recovery() {
+      // if (this.isComparison) return false
+      if (!this.serie.fileInfo.IsBeMark) return this.$confirm(this.$t("DicomViewer:anonymous:notMasked"))
+      if (this.isAnonymous) {
+        this.comparison(false)
+      }
+      this.setToolsPassive()
+      let data = {
+        // NodicomStudyId: this.serie.studyId,
+        NoneDicomStudyFileIdList: [
+          this.serie.fileInfo.Id
+        ],
+      }
+      let res = await this.noneDicomStudyUndoMaskImage(data)
+      if (!res) return false
+      let file = res.find(item => item.Id === this.serie.fileInfo.Id)
+      this.$emit('replaceImage', {
+        studyId: this.serie.studyId,
+        path: this.serie.fileInfo.Path,
+        file,
+        IsBeMark: false
+      })
+    },
+    // 应用
+    async anonymousImage() {
+      if (this.isComparison) return false
+      this.setToolsPassive()
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewport = renderingEngine.getViewport(`canvas-${this.activeCanvasIndex}`)
+      let imageId = viewport.getCurrentImageId()
+      console.log(imageId);
+      let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.toolName === "Note_RectangleRoi" && item.metadata.referencedImageId === imageId)
+      if (annotations.length <= 0) return false
+      console.log(annotations)
+      let data = {
+        // NodicomStudyId: this.serie.studyId,
+        NoneDicomStudyFileIdList: [
+          this.serie.fileInfo.Id
+        ],
+        MaskRegionList: []
+      }
+      annotations.forEach(item => {
+        let points = item.data.handles.points
+        let currentStart = points[0]
+        let currentEnd = points[3]
+        let start = {
+          x: currentStart[0] > currentEnd[0] ? Math.round(currentEnd[0]) : Math.round(currentStart[0]),
+          y: currentStart[1] > currentEnd[1] ? Math.round(currentEnd[1]) : Math.round(currentStart[1]),
+        }
+        let end = {
+          x: currentStart[0] > currentEnd[0] ? Math.round(currentStart[0]) : Math.round(currentEnd[0]),
+          y: currentStart[1] > currentEnd[1] ? Math.round(currentStart[1]) : Math.round(currentEnd[1]),
+        }
+        let width = end.x - start.x
+        let height = end.y - start.y
+        data.MaskRegionList.push({
+          X: start.x,
+          Y: start.y,
+          Width: width,
+          Height: height
+        })
+      })
+      let res = await this.noneDicomStudyMaskImage(data)
+      if (!res || res.length <= 0) return this.$confirm(this.$t("DicomViewer:anonymous:studyMaskImageFail"))
+      annotations.forEach(item => {
+        annotation.state.removeAnnotation(item.annotationUID)
+      })
+      let file = res.find(item => item.Id === this.serie.fileInfo.Id)
+      this.$emit('replaceImage', {
+        studyId: this.serie.studyId,
+        path: this.serie.fileInfo.Path,
+        file,
+        IsBeMark: true
+      })
+    },
+    openAnonymous() {
+      if (this.loading || this.isComparison) return false
+      this.isAnonymous = !this.isAnonymous
+      // if (!this.isAnonymous) {
+      //   const elements = document.querySelectorAll('.dicom-item')
+      //   const scope = this
+      //   Array.from(elements).forEach((element, index) => {
+      //     if (element.style.display !== 'none') {
+      //       scope.$refs[`dicomCanvas${index}`].setToolPassive(scope.activeTool)
+      //     }
+      //   })
+      //   scope.activeTool = null
+      // } else {
+      //   this.activateDicomCanvas(0)
+      //   this.changeLayout('1x1')
+      // }
+    },
+    async noneDicomStudyMaskImage(data) {
+      try {
+        this.loading = true
+        let res = await noneDicomStudyMaskImage(data)
+        this.loading = false
+        if (res.IsSuccess) {
+          return res.Result.OkList
+        }
+        return false
+      } catch (err) {
+        console.log(err)
+        this.loading = false
+        return false
+      }
+    },
+    async noneDicomStudyUndoMaskImage(data) {
+      try {
+        this.loading = true
+        let res = await noneDicomStudyUndoMaskImage(data)
+        this.loading = false
+        if (res.IsSuccess) {
+          return res.Result.OkList
+        }
+        return false
+      } catch (err) {
+        console.log(err)
+        this.loading = false
+        return false
+      }
+    },
     showPanel(e) {
       e.currentTarget.firstChild.lastChild.style.display = 'block'
     },
@@ -300,6 +505,7 @@ export default {
       cornerstoneTools.addTool(PlanarFreehandROITool)
       cornerstoneTools.addTool(SplineROITool)
       cornerstoneTools.addTool(EraserTool)
+      cornerstoneTools.addTool(Note_RectangleRoiTool)
       cornerstoneTools.addTool(LengthTool)
       cornerstoneTools.addTool(LengthscaleTool)
       cornerstoneTools.addTool(BidirectionalTool)
@@ -321,6 +527,7 @@ export default {
         toolGroup.addTool(SplineROITool.toolName)
 
         toolGroup.addTool(EraserTool.toolName)
+        toolGroup.addTool(Note_RectangleRoiTool.toolName)
         toolGroup.addTool(LengthTool.toolName)
         toolGroup.addTool(LengthscaleTool.toolName)
 
@@ -331,6 +538,7 @@ export default {
         toolGroup.setToolPassive(ZoomTool.toolName)
         toolGroup.setToolPassive(PlanarRotateTool.toolName)
         toolGroup.setToolPassive(EraserTool.toolName)
+        toolGroup.setToolPassive(Note_RectangleRoiTool.toolName)
       })
     },
     lengthscaleToolDisabled(saved) {
@@ -346,6 +554,7 @@ export default {
     },
     // 加载图片回调
     stackNewImage(e) {
+      if (this.isComparison) return false
       const { detail } = e
       const i = this.viewportInfos.findIndex(i => i.viewportId === detail.viewportId)
       if (i === -1) return
@@ -365,6 +574,7 @@ export default {
       metaData.addProvider((type, imageId) => hardcodedMetaDataProvider(type, imageId, imageIds), 10000)
       const renderingEngine = getRenderingEngine(renderingEngineId)
       const viewport = renderingEngine.getViewport(`canvas-${canvasIndex}`)
+      console.log(viewport, 'viewport')
       await viewport.setStack(imageIds)
       this.setToolsPassive()
       viewport.setImageIdIndex(sliceIndex)
@@ -373,9 +583,10 @@ export default {
     },
     setActiveCanvasImages(obj) {
       if (!obj || Object.keys(obj).length === 0) return
+      this.serie = obj
       const i = this.viewportInfos.findIndex(i => i.index === this.activeCanvasIndex)
       if (i === -1) return
-      if (obj.studyId === this.viewportInfos[i].studyId && this.imageType.includes(this.viewportInfos[i].fileType) && this.imageType.includes(obj.fileInfo.FileType)) {
+      if (obj.studyId === this.viewportInfos[i].studyId && this.imageType.includes(this.viewportInfos[i].fileType) && this.imageType.includes(obj.fileInfo.FileType) && !obj.isReset) {
         const fileIndex = this.viewportInfos[i].fileList.findIndex(i => i.Path === obj.fileInfo.Path)
         this.sliceIndex(fileIndex)
       } else {
@@ -693,7 +904,7 @@ export default {
     border: 1px solid #5b5b5b;
   }
 
-  .sidetool-select > option {
+  .sidetool-select>option {
     background-color: #323232;
   }
 
@@ -728,6 +939,7 @@ export default {
   .viewports-wrapper {
     flex: 1;
     min-width: 0;
+    position: relative;
 
     .grid-container {
       display: grid;
@@ -865,4 +1077,72 @@ export default {
     }
   }
 }
+
+.Anonymous {
+  position: absolute;
+  border-radius: 5px;
+  bottom: 30px;
+  left: 5%;
+  right: 5%;
+  width: 90%;
+  height: 60px;
+  padding: 0 10px;
+  background-color: rgba(255, 255, 255, .2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  z-index: 2000;
+
+  .btn {
+    width: 12%;
+    text-align: center;
+    height: 40px;
+    line-height: 30px;
+    border-radius: 15px;
+    cursor: pointer;
+    padding: 5px 10px;
+    color: #428bca;
+    background: #ecf3fa;
+    border-color: #b3d1ea;
+  }
+
+  .activeBtn {
+    background: #428bca;
+    border-color: #428bca;
+    color: #fff;
+  }
+
+  .isNoted {
+    cursor: not-allowed;
+  }
+
+  // &:hover {
+  //   background-color: rgba(255, 255, 255, .5);
+  // }
+}
+
+
+
+
+.dicom-tools .btnBox {
+  display: inline-block;
+  width: 80px;
+  text-align: center;
+  height: 30px;
+  line-height: 20px;
+  border-radius: 15px;
+  color: #428bca;
+  background: #ecf3fa;
+  border-color: #b3d1ea;
+  cursor: pointer;
+  padding: 5px 10px;
+  border: 1px solid rgba(255, 255, 255, .7);
+  margin: 5px;
+}
+
+.dicom-tools .activeBtnBox {
+  background: #428bca;
+  border-color: #428bca;
+  color: #fff;
+}
 </style>

src/views/none-dicoms/components/study-list.vue

@@ -10,12 +10,8 @@
             <div class="dicom-desc">
               <div style="text-overflow: ellipsis;overflow: hidden;">
                 <span :title="study.CodeView">{{ study.CodeView }}</span>
-                <span 
+                <span v-if="otherInfo && otherInfo.IsShowStudyName" :title="study.StudyName" style="margin-left: 5px;">
-                  v-if="otherInfo && otherInfo.IsShowStudyName" 
+                  {{ study.StudyName }}
-                  :title="study.StudyName" 
-                  style="margin-left: 5px;"
-                >
-                  {{study.StudyName }}
                 </span>
               </div>
               <div style="text-overflow: ellipsis;overflow: hidden;">
@@ -48,23 +44,14 @@
                 <div v-if="isQcCheck" class="switchBox">
                   <div class="item">
                     <span>{{ $t('trials:audit:table:isReading') }}</span>
-                    <el-switch
+                    <el-switch v-model="k.IsReading" :disabled="k.IsDeleted || isAudit"
-                      v-model="k.IsReading"
+                      :active-text="$fd('YesOrNo', true)" :inactive-text="$fd('YesOrNo', false)"
-                      :disabled="k.IsDeleted || isAudit"
+                      @change="changeReadingStatus($event, study, k)" />
-                      :active-text="$fd('YesOrNo', true)"
-                      :inactive-text="$fd('YesOrNo', false)"
-                      @change="changeReadingStatus($event, study, k)"
-                    />
                   </div>
                   <div class="item">
                     <span>{{ $t('trials:audit:table:isDelete') }}</span>
-                    <el-switch
+                    <el-switch v-model="k.IsDeleted" :disabled="isAudit" :active-text="$fd('YesOrNo', true)"
-                      v-model="k.IsDeleted"
+                      :inactive-text="$fd('YesOrNo', false)" @change="changeDeleteStatus($event, study, k)" />
-                      :disabled="isAudit"
-                      :active-text="$fd('YesOrNo', true)"
-                      :inactive-text="$fd('YesOrNo', false)"
-                      @change="changeDeleteStatus($event, study, k)"
-                    />
                   </div>
                 </div>
               </div>
@@ -87,6 +74,10 @@ export default {
       default() {
         return {}
       }
+    },
+    isComparison: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -112,7 +103,7 @@ export default {
     this.studyId = this.$route.query.studyId
     this.isQcCheck = !!this.$route.query.isQcCheck
     this.getNoneDicoms()
-    
+
     // this.$nextTick(() => {
     //   this.activeStudy(this.studyList[0].Id)
     // })
@@ -157,11 +148,22 @@ export default {
           this.$route.query.isImageSegmentLabel,
         )
         this.studyList = res.Result
+        this.studyList.forEach(study => {
+          if (study.NoneDicomStudyFileList && study.NoneDicomStudyFileList.length > 0) {
+            study.NoneDicomStudyFileList.forEach(file => {
+              if (file.Path.includes('.MaskNoneDicom_')) {
+                file.IsBeMark = true
+              } else {
+                file.IsBeMark = false
+              }
+            })
+          }
+        })
         this.otherInfo = res.OtherInfo
         this.isAudit = res.OtherInfo.AuditState * 1 > 6
         const studyIndex = this.studyList.findIndex((item) => {
-            return item.NoneDicomStudyFileList.length > 0
+          return item.NoneDicomStudyFileList.length > 0
-          })
+        })
         if (studyIndex > -1) {
           this.selectFile(this.studyList[studyIndex], studyIndex, 0)
           let studyId = this.studyList[studyIndex].Id
@@ -171,11 +173,11 @@ export default {
           this.sortFile()
         }
         loading.close()
-      } catch(e) {
+      } catch (e) {
         console.log(e)
         loading.close()
       }
-      
+
     },
     selected() {
 
@@ -280,15 +282,17 @@ export default {
       return newArr.join(' | ')
     },
     // 切换文件
-    selectFile(study, studyIndex, fileIndex) {
+    selectFile(study, studyIndex, fileIndex, isReset = false) {
+      if (this.isComparison) return false
       this.activeStudyIndex = studyIndex
       this.activeFileIndex = fileIndex
       const fileList = study.NoneDicomStudyFileList
-      this.$emit('selectFile', { fileInfo: fileList[fileIndex], fileList, visitTaskInfo: this.visitTaskInfo, studyId: study.Id })
+      this.$emit('selectFile', { fileInfo: fileList[fileIndex], fileList, visitTaskInfo: this.visitTaskInfo, studyId: study.Id, isReset })
       this.scrollActiveFileIntoView()
     },
     activeImage(obj) {
       if (!obj || this.studyList.length === 0) return
+      const study = this.studyList.find(i => i.Id === obj.studyId)
       const studyIndex = this.studyList.findIndex(i => i.Id === obj.studyId)
       if (studyIndex === -1) return
       this.activeStudy(`${obj.studyId}`)
@@ -297,8 +301,26 @@ export default {
       const fileIndex = fileList.findIndex(f => f.Path === obj.path)
       if (fileIndex === -1) return
       this.activeFileIndex = fileIndex
+      this.selectFile(study, studyIndex, fileIndex)
       this.scrollActiveFileIntoView()
     },
+    replaceImage(obj) {
+      if (!obj || this.studyList.length === 0) return
+      const study = this.studyList.find(i => i.Id === obj.studyId)
+      const studyIndex = this.studyList.findIndex(i => i.Id === obj.studyId)
+      if (studyIndex === -1) return
+      this.activeStudy(`${obj.studyId}`)
+      this.activeStudyIndex = studyIndex
+      const fileList = this.studyList[studyIndex].NoneDicomStudyFileList || []
+      const fileIndex = fileList.findIndex(f => f.Path === obj.path)
+      const file = fileList.find(f => f.Path === obj.path)
+      if (fileIndex === -1) return
+      this.activeFileIndex = fileIndex
+      file.Path = obj.file.Path
+      file.FullFilePath = obj.file.Path
+      file.IsBeMark = obj.IsBeMark
+      this.selectFile(study, studyIndex, fileIndex, true)
+    },
     activeStudy(id) {
       const studyId = `${id}`
       if (this.activeNames.indexOf(studyId) > -1) return

src/views/none-dicoms/index.vue

@@ -3,16 +3,15 @@
     <!-- 检查列表 -->
     <div class="left-panel">
       <div class="study-info">
-        <study-list ref="studyList" @selectFile="selectFile"/>
+        <study-list ref="studyList" :isComparison="isComparison" @selectFile="selectFile" />
       </div>
     </div>
 
     <!-- 图像 -->
     <div class="middle-panel">
 
-      <file-viewer ref="fileViewer" 
+      <file-viewer ref="fileViewer" :isComparison="isComparison" @toggleImage="toggleImage" @selectFile="selectFile"
-        @toggleImage="toggleImage"
+        @replaceImage="replaceImage" />
-        @selectFile="selectFile" />
     </div>
   </div>
 </template>
@@ -30,6 +29,7 @@ export default {
   },
   data() {
     return {
+      isComparison: false
     }
   },
 
@@ -48,6 +48,9 @@ export default {
         this.$refs['fileViewer'].setActiveCanvasImages(obj)
         return
       }
+    },
+    replaceImage(obj) {
+      this.$refs['studyList'].replaceImage(obj)
     }
   }
 }
@@ -60,6 +63,7 @@ export default {
   display: flex;
   background-color: #444;
   padding: 5px;
+
   ::-webkit-scrollbar {
     width: 5px;
     height: 5px;

src/views/trials/trials-panel/reading/dicoms3D/components/tools/Note_RectangleRoiTool.js

@@ -0,0 +1,342 @@
+
+import {
+  VolumeViewport,
+  utilities as csUtils,
+} from '@cornerstonejs/core'
+import * as cornerstoneTools from '@cornerstonejs/tools'
+const {
+  utilities,
+  annotation,
+  drawing
+
+} = cornerstoneTools
+
+const { getAnnotations } = annotation.state
+const { isAnnotationVisible } = annotation.visibility
+const { isAnnotationLocked } = annotation.locking
+
+
+const drawHandlesSvg = drawing.drawHandles
+// const drawRectSvg = drawing.drawRectByCoordinates
+const drawLinkedTextBoxSvg = drawing.drawLinkedTextBox
+const { getTextBoxCoordsCanvas } = utilities.drawing
+const setAttributesIfNecessary = drawing.setAttributesIfNecessary
+const setNewAttributesIfValid = drawing.setNewAttributesIfValid
+const _getHash = (
+  annotationUID,
+  drawingElementType,
+  nodeUID
+) => {
+  return `${annotationUID}::${drawingElementType}::${nodeUID}`;
+}
+const drawRectSvg = (
+  svgDrawingHelper,
+  annotationUID,
+  rectangleUID,
+  canvasCoordinates,
+  options = {},
+  dataId = ''
+) => {
+  const {
+    color,
+    width: _width,
+    lineWidth,
+    lineDash,
+  } = Object.assign(
+    {
+      color: 'rgb(255, 255, 0)',
+      width: '2',
+      lineWidth: undefined,
+      lineDash: undefined,
+    },
+    options
+  );
+
+  // for supporting both lineWidth and width options
+
+  const strokeWidth = lineWidth || _width;
+
+  const svgns = 'http://www.w3.org/2000/svg';
+  const svgNodeHash = _getHash(annotationUID, 'rect', rectangleUID);
+  const existingRect = svgDrawingHelper.getSvgNode(svgNodeHash);
+
+  const [topLeft, topRight, bottomLeft, bottomRight] = canvasCoordinates;
+
+  const width = Math.hypot(topLeft[0] - topRight[0], topLeft[1] - topRight[1]);
+  const height = Math.hypot(
+    topLeft[0] - bottomLeft[0],
+    topLeft[1] - bottomLeft[1]
+  );
+
+  const center = [
+    (bottomRight[0] + topLeft[0]) / 2,
+    (bottomRight[1] + topLeft[1]) / 2,
+  ];
+  const leftEdgeCenter = [
+    (bottomLeft[0] + topLeft[0]) / 2,
+    (bottomLeft[1] + topLeft[1]) / 2,
+  ];
+  const angle =
+    (Math.atan2(center[1] - leftEdgeCenter[1], center[0] - leftEdgeCenter[0]) *
+      180) /
+    Math.PI;
+
+  const attributes = {
+    x: `${center[0] - width / 2}`,
+    y: `${center[1] - height / 2}`,
+    width: `${width}`,
+    height: `${height}`,
+    stroke: color,
+    fill: 'rgba(0, 0, 0, 1)',
+    transform: `rotate(${angle} ${center[0]} ${center[1]})`,
+    'stroke-width': strokeWidth,
+    'stroke-dasharray': lineDash,
+  };
+
+  if (existingRect) {
+    setAttributesIfNecessary(attributes, existingRect);
+
+    svgDrawingHelper.setNodeTouched(svgNodeHash);
+  } else {
+    const svgRectElement = document.createElementNS(svgns, 'rect');
+
+    if (dataId !== '') {
+      svgRectElement.setAttribute('data-id', dataId);
+    }
+
+    setNewAttributesIfValid(attributes, svgRectElement);
+
+    svgDrawingHelper.appendNode(svgRectElement, svgNodeHash);
+  }
+}
+/**
+ * RectangleROIAnnotation let you draw annotations that measures the statistics
+ * such as area, max, mean and stdDev of a Rectangular region of interest.
+ * You can use RectangleROIAnnotation in all perpendicular views (axial, sagittal, coronal).
+ * Note: annotation tools in cornerstone3DTools exists in the exact location
+ * in the physical 3d space, as a result, by default, all annotations that are
+ * drawing in the same frameOfReference will get shared between viewports that
+ * are in the same frameOfReference. RectangleROI tool's text box lines are dynamically
+ * generated based on the viewport's underlying Modality. For instance, if
+ * the viewport is displaying CT, the text box will shown the statistics in Hounsfield units,
+ * and if the viewport is displaying PET, the text box will show the statistics in
+ * SUV units.
+ *
+ * The resulting annotation's data (statistics) and metadata (the
+ * state of the viewport while drawing was happening) will get added to the
+ * ToolState manager and can be accessed from the ToolState by calling getAnnotations
+ * or similar methods.
+ *
+ * ```js
+ * cornerstoneTools.addTool(RectangleROITool)
+ *
+ * const toolGroup = ToolGroupManager.createToolGroup('toolGroupId')
+ *
+ * toolGroup.addTool(RectangleROITool.toolName)
+ *
+ * toolGroup.addViewport('viewportId', 'renderingEngineId')
+ *
+ * toolGroup.setToolActive(RectangleROITool.toolName, {
+ *   bindings: [
+ *    {
+ *       mouseButton: MouseBindings.Primary, // Left Click
+ *     },
+ *   ],
+ * })
+ * ```
+ *
+ * Read more in the Docs section of the website.
+ */
+
+class Note_RectangleRoiTool extends cornerstoneTools.RectangleROITool {
+  static toolName = "Note_RectangleRoi"
+  constructor(
+    toolProps,
+    defaultToolProps
+  ) {
+    super(toolProps, defaultToolProps);
+  }
+
+  /**
+   * it is used to draw the rectangleROI annotation in each
+   * request animation frame. It calculates the updated cached statistics if
+   * data is invalidated and cache it.
+   *
+   * @param enabledElement - The Cornerstone's enabledElement.
+   * @param svgDrawingHelper - The svgDrawingHelper providing the context for drawing.
+   */
+  renderAnnotation = (
+    enabledElement,
+    svgDrawingHelper
+  ) => {
+    let renderStatus = false;
+    const { viewport } = enabledElement;
+    const { element } = viewport;
+
+    let annotations = getAnnotations(this.getToolName(), element);
+
+    if (!annotations?.length) {
+      return renderStatus;
+    }
+
+    annotations = this.filterInteractableAnnotationsForElement(
+      element,
+      annotations
+    );
+
+    if (!annotations?.length) {
+      return renderStatus;
+    }
+
+    const targetId = this.getTargetId(viewport);
+    const renderingEngine = viewport.getRenderingEngine();
+
+    const styleSpecifier = {
+      toolGroupId: this.toolGroupId,
+      toolName: this.getToolName(),
+      viewportId: enabledElement.viewport.id,
+    };
+
+    for (let i = 0; i < annotations.length; i++) {
+      const annotation = annotations[i];
+      const { annotationUID, data } = annotation;
+      const { points, activeHandleIndex } = data.handles;
+      const canvasCoordinates = points.map((p) => viewport.worldToCanvas(p));
+
+      styleSpecifier.annotationUID = annotationUID;
+
+      const { lineWidth, lineDash } = this.getAnnotationStyle({
+        annotation,
+        styleSpecifier,
+      });
+      let color = 'rgb(255, 255, 0)'
+      const { viewPlaneNormal, viewUp } = viewport.getCamera();
+
+      // If cachedStats does not exist, or the unit is missing (as part of import/hydration etc.),
+      // force to recalculate the stats from the points
+      if (
+        !data.cachedStats[targetId] ||
+        data.cachedStats[targetId].areaUnit == null
+      ) {
+        data.cachedStats[targetId] = {
+          Modality: null,
+          area: null,
+          max: null,
+          mean: null,
+          stdDev: null,
+          areaUnit: null,
+        };
+
+        this._calculateCachedStats(
+          annotation,
+          viewPlaneNormal,
+          viewUp,
+          renderingEngine,
+          enabledElement
+        );
+      } else if (annotation.invalidated) {
+        this._throttledCalculateCachedStats(
+          annotation,
+          viewPlaneNormal,
+          viewUp,
+          renderingEngine,
+          enabledElement
+        );
+
+        // If the invalidated data is as a result of volumeViewport manipulation
+        // of the tools, we need to invalidate the related stackViewports data if
+        // they are not at the referencedImageId, so that
+        // when scrolling to the related slice in which the tool were manipulated
+        // we re-render the correct tool position. This is due to stackViewport
+        // which doesn't have the full volume at each time, and we are only working
+        // on one slice at a time.
+        if (viewport instanceof VolumeViewport) {
+          const { referencedImageId } = annotation.metadata;
+
+          // invalidate all the relevant stackViewports if they are not
+          // at the referencedImageId
+          for (const targetId in data.cachedStats) {
+            if (targetId.startsWith('imageId')) {
+              const viewports = renderingEngine.getStackViewports();
+
+              const invalidatedStack = viewports.find((vp) => {
+                // The stack viewport that contains the imageId but is not
+                // showing it currently
+                const referencedImageURI =
+                  csUtils.imageIdToURI(referencedImageId);
+                const hasImageURI = vp.hasImageURI(referencedImageURI);
+                const currentImageURI = csUtils.imageIdToURI(
+                  vp.getCurrentImageId()
+                );
+                return hasImageURI && currentImageURI !== referencedImageURI;
+              });
+
+              if (invalidatedStack) {
+                delete data.cachedStats[targetId];
+              }
+            }
+          }
+        }
+      }
+
+      // If rendering engine has been destroyed while rendering
+      if (!viewport.getRenderingEngine()) {
+        console.warn('Rendering Engine has been destroyed');
+        return renderStatus;
+      }
+
+      let activeHandleCanvasCoords;
+
+      if (!isAnnotationVisible(annotationUID)) {
+        continue;
+      }
+
+      if (
+        !isAnnotationLocked(annotationUID) &&
+        !this.editData &&
+        activeHandleIndex !== null && activeHandleIndex !== undefined
+      ) {
+        // Not locked or creating and hovering over handle, so render handle.
+        activeHandleCanvasCoords = [canvasCoordinates[activeHandleIndex]];
+      }
+
+      if (activeHandleCanvasCoords) {
+        const handleGroupUID = '0';
+
+        drawHandlesSvg(
+          svgDrawingHelper,
+          annotationUID,
+          handleGroupUID,
+          activeHandleCanvasCoords,
+          {
+            color,
+          }
+        );
+      }
+
+      const dataId = `${annotationUID}-rect`;
+      const rectangleUID = '0';
+      drawRectSvg(
+        svgDrawingHelper,
+        annotationUID,
+        rectangleUID,
+        canvasCoordinates,
+        {
+          color,
+          lineDash,
+          lineWidth,
+        },
+        dataId
+      );
+
+      renderStatus = true;
+      return renderStatus;
+    }
+
+    return renderStatus;
+  };
+
+}
+
+
+export default Note_RectangleRoiTool;