diff --git a/src/components/home/HomeFormula.vue b/src/components/home/HomeFormula.vue index 4196fe2..634f447 100644 --- a/src/components/home/HomeFormula.vue +++ b/src/components/home/HomeFormula.vue @@ -54,7 +54,9 @@ watchEffect(async () => { - {{ homeStore.disinfectionState.nlog }}Log + {{ + homeStore.disinfectionState.nlog?.toFixed(2) + }}Log diff --git a/src/components/home/LineChart.vue b/src/components/home/LineChart.vue index 6320652..f3fe206 100644 --- a/src/components/home/LineChart.vue +++ b/src/components/home/LineChart.vue @@ -128,6 +128,7 @@ watch( ], } myChart.setOption(option) + myChart.resize() }, { deep: true, @@ -142,7 +143,7 @@ onMounted(() => { diff --git a/src/views/home/chart.vue b/src/views/home/chart.vue index 952cddc..53e727a 100644 --- a/src/views/home/chart.vue +++ b/src/views/home/chart.vue @@ -118,6 +118,8 @@ const operationState = computed(() => { let poll: any = null +const chartRefs = ref([]) + const getData = async (type?: string) => { const data = await syncSendCmd({ className: 'H2O2SensorMgr', @@ -199,7 +201,9 @@ const formatSeconds = (seconds: number) => { - {{ homeStore.disinfectionState.nlog }}Log + {{ + homeStore.disinfectionState.nlog?.toFixed(2) + }}Log @@ -208,7 +212,14 @@ const formatSeconds = (seconds: number) => { class="line-chart-content" :style="{ 'grid-template-columns': `repeat(${chartList.length},1fr)` }" > - +
@@ -296,8 +307,19 @@ const formatSeconds = (seconds: number) => { align-items: center; } .line-chart-content { - display: grid; + display: flex; + flex-direction: row; // 子元素水平排列(默认值) + align-items: flex-start; // 子元素顶部对齐 + overflow-x: auto; // 横向滚动支持 + width: 100%; height: calc(100% - 80px); + gap: 10px; + .chart-box { + flex: 0 0 auto; + width: 100%; + height: 100%; + min-width: 200px; + } } .line-chart-bottom { height: 40px;