diff --git a/jeecgboot-vue3/src/views/xslmes/mesXslRubberQuickTestRecord/components/MesXslRubberQuickTestRecordModal.vue b/jeecgboot-vue3/src/views/xslmes/mesXslRubberQuickTestRecord/components/MesXslRubberQuickTestRecordModal.vue
index 1d8ef90f..12d6aa90 100644
--- a/jeecgboot-vue3/src/views/xslmes/mesXslRubberQuickTestRecord/components/MesXslRubberQuickTestRecordModal.vue
+++ b/jeecgboot-vue3/src/views/xslmes/mesXslRubberQuickTestRecord/components/MesXslRubberQuickTestRecordModal.vue
@@ -85,20 +85,16 @@
@@ -172,8 +168,16 @@
const tempChartRef = ref(null);
const torqueChartRef = ref(null);
- const { setOptions: setTempChartOptions, resize: resizeTempChart } = useECharts(tempChartRef as Ref);
- const { setOptions: setTorqueChartOptions, resize: resizeTorqueChart } = useECharts(torqueChartRef as Ref);
+ const {
+ setOptions: setTempChartOptions,
+ resize: resizeTempChart,
+ getInstance: getTempChartInstance,
+ } = useECharts(tempChartRef as Ref);
+ const {
+ setOptions: setTorqueChartOptions,
+ resize: resizeTorqueChart,
+ getInstance: getTorqueChartInstance,
+ } = useECharts(torqueChartRef as Ref);
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((resolve) => window.setTimeout(resolve, 80));
+ }
+ return isChartContainerReady();
+ }
+
async function scheduleRenderCharts(points: Recordable[]) {
+ if (!useNewDetail.value) {
+ return;
+ }
+ await waitForChartContainers();
+ renderCharts(points);
await nextTick();
- await nextTick();
- await new Promise((resolve) => {
- window.setTimeout(() => {
- renderCharts(points);
- resizeTempChart();
- resizeTorqueChart();
- resolve();
- }, 280);
- });
+ resizeTempChart();
+ resizeTorqueChart();
+ getTempChartInstance()?.resize();
+ getTorqueChartInstance()?.resize();
+ window.setTimeout(() => {
+ resizeTempChart();
+ resizeTorqueChart();
+ 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,
- ([visible, tempEl, torqueEl]) => {
- if (visible && tempEl && torqueEl) {
- scheduleRenderCharts(chartPointDataSource.value);
+ () => chartPointDataSource.value.length,
+ async (len) => {
+ if (useNewDetail.value && len > 0) {
+ 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;
- min-height: 220px;
+ height: 260px;
+ min-height: 260px;
}