diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
index 01aa2a98..b172a179 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
@@ -40,10 +40,10 @@
         <div v-if="series" class="right-bottom-text">
             <div v-show="imageInfo.location">Location: {{
                 `${Number(imageInfo.location).toFixed(digitPlaces)} mm`
-            }}</div>
+                }}</div>
             <div v-show="imageInfo.sliceThickness">Slice Thickness: {{
                 `${Number(imageInfo.sliceThickness).toFixed(digitPlaces)} mm`
-            }}</div>
+                }}</div>
             <div v-show="imageInfo.wwwc">WW/WL: {{ imageInfo.wwwc }}</div>
         </div>
         <div class="orientation-top">
@@ -280,7 +280,7 @@ export default {
             this.element.addEventListener("CORNERSTONE_VOLUME_NEW_IMAGE", this.stackNewImage)
             this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified)
             this.element.addEventListener('wheel', (e) => {
-                if (this.histogramVisible) return false
+                // if (this.histogramVisible) return false
                 // console.log('CORNERSTONE_STACK_VIEWPORT_SCROLL')
                 const renderingEngine = getRenderingEngine(this.renderingEngineId)
                 const viewport = renderingEngine.getViewport(this.viewportId)
@@ -383,6 +383,7 @@ export default {
                 this.imageInfo.sliceThickness = type === this.series.orientation ? spacing[2] : spacing[0]
                 this.imageInfo.total = detail.numberOfSlices
                 this.getOrientationMarker()
+                this.$emit("resetHistogram")
                 let properties = viewport.getProperties(this.volumeId)
                 if (properties && properties.voiRange) {
                     var { lower, upper } = properties.voiRange
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
index d1a08168..f46982d9 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -323,7 +323,7 @@
                     :curSegSeries.sync="curSegSeries" @activeViewport="activeViewport"
                     @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
                     @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup"
-                    @resetViewport="resetViewport" v-if="readingTool === 3"
+                    @resetViewport="resetViewport" @resetHistogram="resetHistogram" v-if="readingTool === 3"
                     v-resize="(e) => handleSizeChange(e, `viewport-${index}`)" />
                   <Viewport :ref="`viewport-${index}`" :data-viewport-uid="`viewport-${index}`"
                     :rendering-engine-id="renderingEngineId" :viewport-id="`viewport-${index}`" :viewport-index="index"
@@ -346,7 +346,7 @@
                     :MPRInfo="MPRInfo" @activeViewport="activeViewport" @setMPRInfo="setMPRInfo"
                     @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
                     @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup"
-                    v-resize="(e) => handleSizeChange(e, `viewport-MPR-${index}`)" />
+                    @resetHistogram="resetHistogram" v-resize="(e) => handleSizeChange(e, `viewport-MPR-${index}`)" />
                 </div>
               </div>
               <div v-if="readingTool === 2"
@@ -917,37 +917,37 @@ export default {
         }
       }
     },
-    histogramVisible: {
-      handler() {
-        if (this.readingTool !== 3) return false
-        this.setToolsPassive()
-        let viewportIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3', this.volumeToolGroupId]
-        // if (this.isMPR) {
-        //   viewportIds = [this.volumeToolGroupId]
-        // }
-        viewportIds.forEach(id => {
-          const toolGroup = ToolGroupManager.getToolGroup(id)
-          if (this.histogramVisible) {
-            toolGroup.setToolEnabled(StackScrollTool.toolName)
-          } else {
-            toolGroup.setToolActive(StackScrollTool.toolName, {
-              bindings: [{ mouseButton: MouseBindings.Wheel }]
-            })
-            let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.toolName.includes('histogram_'));
-            annotations.forEach(item => {
-              annotation.state.removeAnnotation(item.annotationUID)
-            })
-            for (let i = 0; i < this.cells.length; i++) {
-              const viewportId = `${this.viewportKey}-${i}`
-              let renderingEngine = getRenderingEngine(renderingEngineId)
-              const viewport = renderingEngine.getViewport(viewportId)
-              viewport.render()
-            }
-          }
+    // histogramVisible: {
+    //   handler() {
+    //     if (this.readingTool !== 3) return false
+    //     this.setToolsPassive()
+    //     let viewportIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3', this.volumeToolGroupId]
+    //     // if (this.isMPR) {
+    //     //   viewportIds = [this.volumeToolGroupId]
+    //     // }
+    //     viewportIds.forEach(id => {
+    //       const toolGroup = ToolGroupManager.getToolGroup(id)
+    //       if (this.histogramVisible) {
+    //         toolGroup.setToolEnabled(StackScrollTool.toolName)
+    //       } else {
+    //         toolGroup.setToolActive(StackScrollTool.toolName, {
+    //           bindings: [{ mouseButton: MouseBindings.Wheel }]
+    //         })
+    //         let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.toolName.includes('histogram_'));
+    //         annotations.forEach(item => {
+    //           annotation.state.removeAnnotation(item.annotationUID)
+    //         })
+    //         for (let i = 0; i < this.cells.length; i++) {
+    //           const viewportId = `${this.viewportKey}-${i}`
+    //           let renderingEngine = getRenderingEngine(renderingEngineId)
+    //           const viewport = renderingEngine.getViewport(viewportId)
+    //           viewport.render()
+    //         }
+    //       }
 
-        })
-      }
-    },
+    //     })
+    //   }
+    // },
   },
   mounted() {
     this.taskInfo = JSON.parse(sessionStorage.getItem('taskInfo'))
@@ -995,6 +995,21 @@ export default {
     this.getSystemInfoReading();
   },
   methods: {
+    resetHistogram() {
+      if (!this.histogramVisible) return false
+      if (this.timer['histogram']) {
+        clearTimeout(this.timer['histogram'])
+        this.timer['histogram'] = null
+      }
+      this.timer['histogram'] = setTimeout(() => {
+        if (this.$refs.histogram && this.histogramVisible) {
+          this.$refs.histogram.init()
+        }
+        clearTimeout(this.timer['histogram'])
+        this.timer['histogram'] = null
+      }, 500)
+
+    },
     showSurface(obj) {
       // this.surfaceVisible = true
       // this.$refs.contourViewport.setSeriesInfo(obj)
@@ -1859,10 +1874,10 @@ export default {
 
     annotationCompletedListener(e) {
       console.log('Completed')
-      if (this.readingTaskState === 2) return
       const { annotation } = e.detail
       if (!annotation) return
       if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
+      if (this.readingTaskState === 2) return
       if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
       const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
       if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@@ -1885,11 +1900,11 @@ export default {
     },
     annotationModifiedListener(e) {
       console.log('Modified')
-      if (this.readingTaskState === 2) return
       const { annotation } = e.detail
-      if (!annotation.highlighted) return
       if (!annotation) return
       if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
+      if (this.readingTaskState === 2) return
+      if (!annotation.highlighted) return
       if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
       const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
       if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@@ -1929,10 +1944,10 @@ export default {
       }
     },
     async customAnnotationCompletedListener(e) {
-      if (this.readingTaskState === 2) return
       const { annotation } = e.detail
       if (!annotation) return
       if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
+      if (this.readingTaskState === 2) return
       const i = this.tools.findIndex(i => i.toolName === annotation.metadata.toolName)
       if (i === -1) {
         if (annotation.metadata.toolName !== LabelMapEditWithContourTool.toolName) this.setToolsPassive()
@@ -2017,11 +2032,11 @@ export default {
       }
     },
     customAnnotationModifiedListener(e) {
-      if (this.readingTaskState === 2) return
       const { annotation } = e.detail
-      if (!annotation.highlighted) return
       if (!annotation) return
       if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
+      if (this.readingTaskState === 2) return
+      if (!annotation.highlighted) return
       const i = this.tools.findIndex(i => i.toolName === annotation.metadata.toolName)
       if (i === -1) {
         if (annotation.metadata.toolName !== LabelMapEditWithContourTool.toolName) this.setToolsPassive()
@@ -2976,13 +2991,13 @@ export default {
     },
     // 翻页
     scrollPage(type) {
-      if (this.histogramVisible) return false
+      // if (this.histogramVisible) return false
       this.clipPlaying = false
       this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].scrollPage(type)
     },
     // 播放
     toggleClipPlay(isPlay) {
-      if (this.histogramVisible) return false
+      // if (this.histogramVisible) return false
       this.clipPlaying = !this.clipPlaying
       this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].toggleClipPlay(isPlay, this.fps)
     },
@@ -4286,6 +4301,7 @@ export default {
       Object.keys(this.timer).forEach(key => {
         if (this.timer[key]) {
           clearInterval(this.timer[key])
+          clearTimeout(this.timer[key])
           this.timer[key] = null
         }
       })
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
index e5e236cb..fe3377f4 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
@@ -299,7 +299,7 @@ export default {
             this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified)
             this.element.addEventListener('CORNERSTONE_IMAGE_RENDERED', this.imageRendered)
             this.element.addEventListener('wheel', (e) => {
-                if (this.histogramVisible) return false
+                // if (this.histogramVisible) return false
                 console.log('CORNERSTONE_STACK_VIEWPORT_SCROLL')
                 const renderingEngine = getRenderingEngine(this.renderingEngineId)
                 const viewport = renderingEngine.getViewport(this.viewportId)
@@ -383,7 +383,7 @@ export default {
         },
         stackNewImage(e) {
             const { detail } = e
-            console.log(detail.imageIndex, 'detail.imageIndex')
+
             this.series.SliceIndex = detail.imageIndex
             this.sliderInfo.height = detail.imageIndex * 100 / detail.numberOfSlices
             const renderingEngine = getRenderingEngine(this.renderingEngineId)
@@ -411,6 +411,7 @@ export default {
                 //     })
                 // }
                 this.$emit('renderAnnotations', this.series)
+                this.$emit("resetHistogram")
                 let properties = viewport.getProperties()
                 if (this.isFusion) {
                     properties = viewport.getProperties(this.ptVolumeId)
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
index 9a64d272..ee39cffe 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
@@ -146,14 +146,32 @@ export default {
                 this.$emit('update:activeTool', toolName)
             }
         },
+        clearnAnnotation() {
+            let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.toolName.includes('histogram_'));
+            annotations.forEach(item => {
+                annotation.state.removeAnnotation(item.annotationUID)
+            })
+            let viewportIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3', 'viewport-MPR-0', 'viewport-MPR-1', 'viewport-MPR-2']
+            for (let i = 0; i < viewportIds.length; i++) {
+                const viewportId = viewportIds[i]
+                let renderingEngine = getRenderingEngine(this.renderingEngineId)
+                const viewport = renderingEngine.getViewport(viewportId)
+                if (!viewport) continue
+                viewport.render()
+            }
+        },
         close() {
             this.dispose()
             this.seriesData = {}
+            this.clearnAnnotation()
             this.$emit("update:visible", false)
         },
         async init() {
+            this.dispose()
+            this.clearnAnnotation()
             this.colors = this.defaultColors
             let _data = await this.generateData();
+            this.seriesData = {}
             this.seriesData['default'] = _data.seriesData
             this.seriesData['default'].color = this.colors[0]
             this.initChart()
@@ -190,7 +208,6 @@ export default {
             Object.keys(this.seriesData).forEach(key => {
                 seriesData.push(this.seriesData[key])
             })
-            console.log(seriesData, 'seriesData')
             const option = {
                 useUTC: true,
                 title: {