库存数据看板

klp-ui/src/views/wms/stock/panels/resize.js

@@ -0,0 +1,85 @@
+// 防抖函数：避免频繁触发 resize
+function debounce(fn, delay = 100) {
+  let timer = null;
+  return function (...args) {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn.apply(this, args);
+      timer = null;
+    }, delay);
+  };
+}
+
+export default {
+  data() {
+    return {
+      // 存储ResizeObserver实例
+      resizeObserver: null,
+      // 标记是否已初始化监听
+      isResizeListening: false
+    };
+  },
+  methods: {
+    /**
+     * 初始化尺寸监听
+     * @param {HTMLElement} container - 图表容器DOM（默认取this.$refs.chartContainer）
+     */
+    initResizeListener(container) {
+      // 防止重复初始化
+      if (this.isResizeListening) return;
+
+      // 默认使用组件内的chartContainer作为监听目标
+      const target = container || this.$refs.chartContainer;
+      if (!target) {
+        console.warn('未找到图表容器，无法初始化尺寸监听');
+        return;
+      }
+
+      // 创建ResizeObserver实例
+      this.resizeObserver = new ResizeObserver(
+        debounce(entries => {
+          // 触发图表重绘
+          this.handleContainerResize(entries);
+        })
+      );
+
+      // 开始监听容器尺寸变化
+      this.resizeObserver.observe(target);
+      this.isResizeListening = true;
+    },
+
+    /**
+     * 处理容器尺寸变化
+     * @param {ResizeObserverEntry[]} entries - ResizeObserver回调参数
+     */
+    handleContainerResize(entries) {
+      // 确保图表实例存在
+      if (this.chart && this.chart.resize) {
+        // 调用ECharts的resize方法重绘图表
+        this.chart.resize();
+      }
+    },
+
+    /**
+     * 销毁尺寸监听
+     */
+    destroyResizeListener() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+      this.isResizeListening = false;
+    }
+  },
+  // 组件挂载后初始化监听
+  mounted() {
+    // 延迟初始化，确保DOM已渲染完成
+    this.$nextTick(() => {
+      this.initResizeListener();
+    });
+  },
+  // 组件销毁前清理监听
+  beforeDestroy() {
+    this.destroyResizeListener();
+  }
+};