update chart

src/components/Chart/RateChart.vue

@@ -19,6 +19,10 @@ const props = defineProps({
       };
     },
   },
+  displayPlaceholder: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 watch(
@@ -54,7 +58,10 @@ onMounted(() => {
   <div class="chart rate-chart">
     <div ref="rateChartRef" class="chart-container"></div>
 
-    <div :class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']">
+    <div
+      v-if="!displayPlaceholder"
+      :class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']"
+    >
       <span class="integer-part">{{ rate[0] }}.</span>
       <span class="decimal-part">{{ rate[1] }}%</span>
     </div>
@@ -62,11 +69,11 @@ onMounted(() => {
     <div class="text-intro">
       <div class="text-intro__item">
         <span class="legend-box green"></span>
-        <span>当前成品率: {{ props.rawData.nowYield }}%</span>
+        <span>当前成品率: {{ props.rawData?.nowYield ?? 0 }}%</span>
       </div>
       <div class="text-intro__item">
         <span class="legend-box blue"></span>
-        <span>目标成品率: {{ props.rawData.targetYield }}%</span>
+        <span>目标成品率: {{ props.rawData?.targetYield ?? 0 }}%</span>
       </div>
     </div>
   </div>
@@ -79,6 +86,7 @@ onMounted(() => {
   position: relative;
 }
 
+.chart-placeholder,
 .chart-container {
   margin: auto;
   width: 320px;

src/components/Chart/YieldChart.vue

@@ -15,12 +15,17 @@ const props = defineProps({
       };
     },
   },
+  displayPlaceholder: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const chart = ref(null);
 const yieldChartRef = ref(null);
 
 function reInitChart() {
+  if (props.displayPlaceholder) return;
   if (chart.value) chart.value.dispose();
   const _chart = echarts.init(yieldChartRef.value);
   _chart.setOption(getOptions(props.rawData));
@@ -34,14 +39,15 @@ onMounted(() => {
 
 <template>
   <div class="chart yield-chart">
-    <div ref="yieldChartRef" class="chart-container"></div>
+    <div v-if="displayPlaceholder" class="chart-placeholder"></div>
+    <div v-else ref="yieldChartRef" class="chart-container"></div>
     <div class="text-intro">
       <div class="text-intro__item">
         <span class="legend-box green"></span>
-        <span>当前产量: {{ rawData.nowProduction }}片</span>
+        <span>当前产量: {{ rawData?.nowProduction ?? 0 }}片</span>
       </div>
-      <div class="text-intro__item">
+      <div v-if="!displayPlaceholder" class="text-intro__item">
-        <span>目标产量: {{ rawData.targetProduction }}片</span>
+        <span>目标产量: {{ rawData?.targetProduction ?? 0 }}片</span>
       </div>
     </div>
   </div>
@@ -54,6 +60,7 @@ onMounted(() => {
   position: relative;
 }
 
+.chart-placeholder,
 .chart-container {
   margin: auto;
   width: 320px;

src/components/Chart/rateOption.js

@@ -128,10 +128,11 @@ const targetSerie = {
 };
 
 export default (data) => {
-  dataSerie.data[0].value = data.nowYield;
+  title.subtext = data?.nowYield == null ? "" : "当前成品率\u2002";
-  dataSerie.data[1].value = 100 - data.nowYield;
+  dataSerie.data[0].value = data?.nowYield ?? 0;
-  targetSerie.data[0].value = data.targetYield;
+  dataSerie.data[1].value = 100 - (data?.nowYield ?? 0);
-  targetSerie.data[1].value = 100 - data.targetYield;
+  targetSerie.data[0].value = data?.targetYield ?? 0;
+  targetSerie.data[1].value = 100 - (data?.targetYield ?? 0);
   return {
     tooltip,
     title,

src/components/HourChart.vue

@@ -25,15 +25,9 @@ store.$subscribe((mutation, state) => {
     if (chart.value) chart.value.dispose();
     return;
   }
-  hourData.value = (state.data2?.lineHourList ?? [
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
-    // { lineName: '001', hour: '00:00', num: 10 },
-    // { lineName: '002', hour: '00:20', num: 20 },
-    // { lineName: '003', hour: '00:30', num: 30 },
-    // { lineName: '004', hour: '00:40', num: 14 },
-    // { lineName: '005', hour: '00:50', num: 50 },
-  ]).map((item, index) => ({
     id: `${item.lineName}_${index}`,
-    hour: item.hour || '__',
+    hour: item.hour || "__",
     data: item.num || 0,
   }));
   setupChart();
@@ -46,7 +40,7 @@ function setupChart() {
     chartSetup(
       chart.value,
       hourData.value.map((item) => item.hour),
-      hourData.value.map((item) => item.num)
+      hourData.value.map((item) => item.data)
     );
   });
 

src/components/datapage/LineToday.vue

@@ -102,13 +102,16 @@ function loadData(dailyTarget) {
     ></div>
     <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
     <div class="container-body__h-full">
-      <yield-chart v-if="displayProductionChart" :raw-data="websocketData" />
+      <yield-chart
+        :display-placeholder="!displayProductionChart"
+        :raw-data="websocketData"
+      />
       <rate-chart
-        v-if="displayRateChart"
+        :display-placeholder="!displayRateChart"
         :raw-data="websocketData"
         :isOnlyChild="!displayProductionChart"
       />
-      <p
+      <!-- <p
         v-if="!displayProductionChart && !displayRateChart"
         style="
           height: 100%;
@@ -121,7 +124,7 @@ function loadData(dailyTarget) {
         "
       >
         暂无数据
-      </p>
+      </p> -->
     </div>
   </Container>
 </template>