胶料快检曲线图展示优化

jeecgboot-vue3/src/views/xslmes/mesXslRubberQuickTestRecord/components/MesXslRubberQuickTestRecordModal.vue

@@ -85,20 +85,16 @@
           </div>
         </div>
         <div class="detail-section__body detail-section__body--chart">
-          <a-row :gutter="16">
+          <div class="chart-stack">
-            <a-col :span="12">
+            <div class="chart-card">
-              <div class="chart-card">
+              <div class="chart-card__title">温度曲线（上模 / 下模）</div>
-                <div class="chart-card__title">温度曲线（上模 / 下模）</div>
+              <div ref="tempChartRef" class="chart-box"></div>
-                <div ref="tempChartRef" class="chart-box"></div>
+            </div>
-              </div>
+            <div class="chart-card chart-card--spaced">
-            </a-col>
+              <div class="chart-card__title">S'(dNm) 曲线</div>
-            <a-col :span="12">
+              <div ref="torqueChartRef" class="chart-box"></div>
-              <div class="chart-card">
+            </div>
-                <div class="chart-card__title">S'(dNm) 曲线</div>
+          </div>
-                <div ref="torqueChartRef" class="chart-box"></div>
-              </div>
-            </a-col>
-          </a-row>
         </div>
       </div>
     </template>
@@ -172,8 +168,16 @@
 
   const tempChartRef = ref<HTMLDivElement | null>(null);
   const torqueChartRef = ref<HTMLDivElement | null>(null);
-  const { setOptions: setTempChartOptions, resize: resizeTempChart } = useECharts(tempChartRef as Ref<HTMLDivElement>);
+  const {
-  const { setOptions: setTorqueChartOptions, resize: resizeTorqueChart } = useECharts(torqueChartRef as Ref<HTMLDivElement>);
+    setOptions: setTempChartOptions,
+    resize: resizeTempChart,
+    getInstance: getTempChartInstance,
+  } = useECharts(tempChartRef as Ref<HTMLDivElement>);
+  const {
+    setOptions: setTorqueChartOptions,
+    resize: resizeTorqueChart,
+    getInstance: getTorqueChartInstance,
+  } = useECharts(torqueChartRef as Ref<HTMLDivElement>);
 
   const ledgerPickTarget = ref<'prod' | 'inspect'>('prod');
 
@@ -281,53 +285,69 @@
     }
     tableReady.value = true;
     if (useNewDetail.value) {
+      await nextTick();
       await scheduleRenderCharts(chartPointDataSource.value);
     }
   });
 
+  function isChartContainerReady() {
+    const temp = tempChartRef.value;
+    const torque = torqueChartRef.value;
+    return !!(
+      temp &&
+      torque &&
+      temp.offsetWidth > 0 &&
+      temp.offsetHeight > 0 &&
+      torque.offsetWidth > 0 &&
+      torque.offsetHeight > 0
+    );
+  }
+
+  async function waitForChartContainers(maxTry = 24) {
+    for (let i = 0; i < maxTry; i++) {
+      await nextTick();
+      if (isChartContainerReady()) {
+        return true;
+      }
+      await new Promise<void>((resolve) => window.setTimeout(resolve, 80));
+    }
+    return isChartContainerReady();
+  }
+
   async function scheduleRenderCharts(points: Recordable[]) {
+    if (!useNewDetail.value) {
+      return;
+    }
+    await waitForChartContainers();
+    renderCharts(points);
     await nextTick();
-    await nextTick();
+    resizeTempChart();
-    await new Promise<void>((resolve) => {
+    resizeTorqueChart();
-      window.setTimeout(() => {
+    getTempChartInstance()?.resize();
-        renderCharts(points);
+    getTorqueChartInstance()?.resize();
-        resizeTempChart();
+    window.setTimeout(() => {
-        resizeTorqueChart();
+      resizeTempChart();
-        resolve();
+      resizeTorqueChart();
-      }, 280);
+      getTempChartInstance()?.resize();
-    });
+      getTorqueChartInstance()?.resize();
+    }, 200);
   }
 
   function onModalVisibleChange(visible: boolean) {
     if (visible && useNewDetail.value) {
-      scheduleRenderCharts(chartPointDataSource.value);
+      window.setTimeout(() => {
+        scheduleRenderCharts(chartPointDataSource.value);
+      }, 320);
     }
   }
 
-  watch(useNewDetail, async (visible) => {
-    if (visible) {
-      await scheduleRenderCharts(chartPointDataSource.value);
-    }
-  });
-
   watch(
-    () => [useNewDetail.value, tempChartRef.value, torqueChartRef.value] as const,
+    () => chartPointDataSource.value.length,
-    ([visible, tempEl, torqueEl]) => {
+    async (len) => {
-      if (visible && tempEl && torqueEl) {
+      if (useNewDetail.value && len > 0) {
-        scheduleRenderCharts(chartPointDataSource.value);
+        await scheduleRenderCharts(chartPointDataSource.value);
       }
     },
-    { flush: 'post' },
-  );
-
-  watch(
-    chartPointDataSource,
-    async (points) => {
-      if (useNewDetail.value && points?.length) {
-        await scheduleRenderCharts(points);
-      }
-    },
-    { deep: true },
   );
 
   const title = computed(() => (unref(isDetail) ? '快检记录详情' : '编辑胶料快检记录'));
@@ -524,7 +544,13 @@
   }
 
   .detail-section__body--chart {
-    padding: 12px 12px 4px;
+    padding: 12px;
+  }
+
+  .chart-stack {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
   }
 
   .chart-card {
@@ -534,6 +560,10 @@
     border-radius: 6px;
   }
 
+  .chart-card--spaced {
+    margin-top: 16px;
+  }
+
   .chart-card__title {
     margin-bottom: 8px;
     padding-left: 8px;
@@ -545,7 +575,7 @@
 
   .chart-box {
     width: 100%;
-    height: 220px;
+    height: 260px;
-    min-height: 220px;
+    min-height: 260px;
   }
 </style>