update 环

src/components/Chart/YieldChart.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
 import getOptions from "./yieldOption";
 
@@ -25,10 +25,17 @@ const chart = ref(null);
 const yieldChartRef = ref(null);
 
 function reInitChart() {
-  if (props.displayPlaceholder) return;
+  // if (props.displayPlaceholder) return;
   if (chart.value) chart.value.dispose();
   const _chart = echarts.init(yieldChartRef.value);
-  _chart.setOption(getOptions(props.rawData));
+  _chart.setOption(
+    getOptions(
+      props.rawData ?? {
+        nowProduction: 0,
+        targetProduction: 0,
+      }
+    )
+  );
   chart.value = _chart;
 }
 
@@ -41,8 +48,9 @@ onMounted(() => {
 
 <template>
   <div class="chart yield-chart">
-    <div v-if="displayPlaceholder" class="chart-placeholder"></div>
-    <div v-else ref="yieldChartRef" class="chart-container"></div>
+    <!-- <div v-if="displayPlaceholder" class="chart-placeholder"></div>
+    <div v-else ref="yieldChartRef" class="chart-container"></div> -->
+    <div ref="yieldChartRef" class="chart-container"></div>
     <div class="text-intro">
       <div class="text-intro__item">
         <span class="legend-box green"></span>

src/components/Chart/rateOption.js

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

src/components/Chart/yieldOption.js

@@ -1,4 +1,5 @@
-const radius = ["55%", "70%"];
+const radius = ["58%", "72%"];
+const radius2 = ["45%", "58%"];
 const grid = {
   top: 0,
   left: 24,
@@ -83,12 +84,65 @@ const dataSerie = {
   ],
 };
 
+const targetSerie = {
+  type: "pie",
+  radius: radius2,
+  center: ["50%", "40%"],
+  avoidLabelOvervlap: false,
+  label: {
+    show: false,
+  },
+  labelLine: {
+    show: false,
+  },
+  data: [
+    {
+      value: 90,
+      name: "目标成产量",
+      selected: false,
+      itemStyle: {
+        borderJoin: "round",
+        borderCap: "round",
+        borderWidth: 12,
+        borderRadius: "50%",
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "#1065ff66" },
+            { offset: 1, color: "#1065ff" },
+          ],
+        },
+      },
+    },
+    {
+      value: 20,
+      name: "-",
+      itemStyle: { color: "transparent" },
+      label: { show: false },
+    },
+  ],
+};
+
 export default (data) => {
   // title.text =
   //   (100 * (+data.nowProduction / +data.targetProduction)).toFixed(0) + "%";
-  title.text = (data.nowProduction || 0) + '片';
+  // 外圈
+  title.text = data.nowProduction || 0;
   dataSerie.data[0].value = data.nowProduction;
-  dataSerie.data[1].value = data.targetProduction - data.nowProduction;
+  dataSerie.data[1].value = !data.targetProduction
+    ? data.nowProduction == 0
+      ? 1
+      : 0
+    : data.targetProduction - data.nowProduction;
+
+  // 内圈
+  targetSerie.data[0].value = data?.targetProduction ?? 0;
+  targetSerie.data[1].value = data?.targetProduction ? 0 : 1;
+
   return {
     tooltip,
     title,
@@ -96,8 +150,8 @@ export default (data) => {
     series: [
       // background
       bgSerie,
-      // actual data
       dataSerie,
+      targetSerie,
     ],
   };
 };

src/components/datapage/LineMonth.vue

@@ -98,7 +98,6 @@ function loadData(monthlyTarget) {
     <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
     <div class="container-body__h-full">
       <yield-chart
-        :display-placeholder="!displayProductionChart"
         :key="refreshToken + '_yield_chart_linemonth'"
         :raw-data="websocketData"
       />

src/components/datapage/LineToday.vue

@@ -14,10 +14,10 @@ const store = useWsStore();
 onMounted(() => {
   // websocketData.value = loadData([
   //   {
-  //     targetProduction: 120,
-  //     nowProduction: 0,
-  //     targetYield: 0,
-  //     nowYield: 10,
+  //     targetProduction: 1220,
+  //     nowProduction: 8,
+  //     targetYield: null,
+  //     nowYield: null,
   //   },
   // ]);
   websocketData.value = loadData(store.data2.dailyTarget);
@@ -103,7 +103,6 @@ function loadData(dailyTarget) {
     <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
     <div class="container-body__h-full">
       <yield-chart
-        :display-placeholder="!displayProductionChart"
         :key="refreshToken + '_yield_chart_linetoday'"
         :raw-data="websocketData"
       />