浏览器窗口大小调整后，渲染的标记、比例尺等位置偏移

src/directive/resize/index.js

@@ -0,0 +1,16 @@
+import resize from './resize'
+
+const install = function (Vue) {
+    // 绑定v-adaptive指令
+    Vue.directive('resize', resize)
+}
+
+// if (window.Vue) {
+//     window['adaptive'] = adaptive
+//     // eslint-disable-next-line no-undef
+//     Vue.use(install)
+// }
+
+resize.install = install
+
+export default resize

src/directive/resize/resize.js

@@ -0,0 +1,19 @@
+const map = new WeakMap()
+const ob = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        const handler = map.get(entry.target)
+        if (handler) {
+            const { inlineSize, blockSize } = entry.contentBoxSize[0]
+            handler({ width: inlineSize, height: blockSize })
+        }
+    }
+})
+export default {
+    bind(el, binding) {
+        map.set(el, binding.value)
+        ob.observe(el)
+    },
+    unbind(el) {
+        ob.unobserve(el)
+    }
+}

src/main.js

@@ -70,6 +70,9 @@ import FB from '@/components/feedBack/index'
 Vue.use(FB)
 import FBT from '@/components/feedBackTable/index'
 Vue.use(FBT)
+import resize from '@/directive/resize/index'
+// 表格自适应指令
+Vue.use(resize)
 import adaptive from '@/directive/adaptive/index'
 // 表格自适应指令
 Vue.use(adaptive)

src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue

@@ -309,7 +309,8 @@
                   <VolumeViewport :ref="`viewport-${index}`" :data-viewport-uid="`viewport-${index}`"
                     :rendering-engine-id="renderingEngineId" :viewport-id="`viewport-${index}`" :viewport-index="index"
                     @activeViewport="activeViewport" @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
-                    @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup" v-if="readingTool === 3" />
+                    @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup" 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"
                     @activeViewport="activeViewport" @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
@@ -327,7 +328,8 @@
                     :rendering-engine-id="renderingEngineId" :viewport-id="`viewport-MPR-${index}`"
                     :viewport-index="index" :MPRInfo="MPRInfo" @activeViewport="activeViewport" @setMPRInfo="setMPRInfo"
                     @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
-                    @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup" />
+                    @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup"
+                    v-resize="(e) => handleSizeChange(e, `viewport-MPR-${index}`)" />
                 </div>
               </div>
               <div v-if="readingTool === 2"
@@ -904,6 +906,10 @@ export default {
     this.getSystemInfoReading();
   },
   methods: {
+    handleSizeChange(e, viewportId) {
+      // console.log('handleSizeChange', e)
+      this.resetRenderingEngine(viewportId)
+    },
     resetQuestion() {
       this.$refs[`ecrf_${this.lastViewportTaskId}`][0].getQuestions(false)
       this.$refs[`ecrf_${this.lastViewportTaskId}`][0].initSegmentBinding()
@@ -2821,18 +2827,21 @@ export default {
       this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].resize(forceFitToWindow)
     },
     // 重置视口
-    resetRenderingEngine() {
+    resetRenderingEngine(viewportId = null) {
       if (this.timer) {
         clearInterval(this.timer)
         this.timer = null
       }
+      const renderingEngine = getRenderingEngine(renderingEngineId)
+      const viewport = renderingEngine.getViewport(viewportId)
+      if (!viewport) return false
+      if (viewport.volumeIds.size <= 0) return false
       let index = null
       this.timer = setTimeout(() => {
-        index = index || index === 0 ? index : this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series.SliceIndex
-        const renderingEngine = getRenderingEngine(renderingEngineId)
+        index = index || index === 0 ? index : this.$refs[viewportId ? viewportId : `${this.viewportKey}-${this.activeViewportIndex}`][0].series.SliceIndex
         renderingEngine.resize(true, false)
         renderingEngine.render()
-        this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setFullScreen(index)
+        this.$refs[viewportId ? viewportId : `${this.viewportKey}-${this.activeViewportIndex}`][0].setFullScreen(index)
         clearTimeout(this.timer)
         this.timer = null
       }, 100)