1

src/components/TeamChartDay.vue

@@ -9,46 +9,44 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-const dayData = ref([]);
+/** 无状态，处理数据 */
-store.$subscribe((mutation, state) => {
+function loadData(yieldArray) {
-  console.log("[ChartDay]  ===>  state: ", state.data2.classTodayProductYield);
+  const result = [];
-  if (
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
-    state.data2.classTodayProductYield == undefined ||
+  for (let i = 0; i < yieldArray.length; ++i) {
-    state.data2.classTodayProductYield?.length == 0
+    if (yieldArray[i].teamName == "A组") {
-  ) {
+      result[0] = parseInt(yieldArray[i].yield);
-    console.log("[ChartDay]  ===>  清除状态");
+    } else if (yieldArray[i].teamName == "B组") {
-    dayData.value.splice(0);
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
+    }
+  }
+  return result;
+}
+function setupChart(chart, dom, data) {
+  if (chart) chart.dispose();
+  nextTick(() => {
+    chart = echarts.init(dom);
+    setupFn(chart, data);
+  });
+}
+
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
     if (chart.value) chart.value.dispose();
     return;
   }
-
+  setupChart(chart.value, chartChart.value, d);
-  for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) {
-    if (state.data2.classTodayProductYield[i].teamName == "A组") {
-      dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield);
-    } else if (state.data2.classTodayProductYield[i].teamName == "B组") {
-      dayData.value[1] = parseInt(state.data2.classTodayProductYield[i].yield);
-    } else if (state.data2.classTodayProductYield[i].teamName == "C组") {
-      dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
-    }
-  }
-  console.log("[ChartDay]  ===>  dayData: ", dayData.value);
-  setupChart();
-});
-
-// onMounted(() => {
-//   nextTick(() => {
-//     setupChart();
-//   })
-// })
-
-function setupChart() {
-  if (chart.value) chart.value.dispose();
-  nextTick(() => {
-    chart.value = echarts.init(chartChart.value);
-    setupFn(chart.value, dayData.value);
-  });
 }
 
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.data2.classTodayProductYield);
+});
+
 onMounted(() => {
   chartChart.value.classList.add("h-full");
 });
@@ -56,8 +54,12 @@ onMounted(() => {
 
 <template>
   <Container class="chart" title="本日班组情况" icon="cube">
-    <div ref="chartChart" class="chart-chart" style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"></div>
+    <div
-    <p v-show="!dayData || dayData.length === 0" class="empty-data-hint">
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: dayData && dayData.length > 0 ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">
       暂无数据
     </p>
   </Container>

src/components/TeamChartDayOptions.js

@@ -1,9 +1,9 @@
 export const options = {
-  color: ['#ffd601', '#72340b', '#a4c9d1'],
+  color: ['#a4c9d1', '#72340b', '#ffd601' ],
   grid: {
-    top: 10,
+    top: 8,
-    bottom: 0,
+    bottom: 20,
-    left: 0,
+    left: 42,
     right: 28,
   },  
   legend: {
@@ -39,7 +39,7 @@ export const options = {
   series: [
     {
       type: "bar",
-      data: [],
+      data: [34, 2, 23],
       label: {
         show: true,
         position: "right",

src/components/TeamChartMonth.vue

@@ -34,8 +34,6 @@ store.$subscribe((mutation, state) => {
 // 绿色：24FF5E
 // 黄色：FFB524
 // 红色：FF3737
-
-
 function setupChart() {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
@@ -47,15 +45,12 @@ function setupChart() {
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  // nextTick(() => {
-  //   setupChart();
-  // })
 });
 </script>
 
 <template>
   <Container class="chart" title="本月班组情况" icon="cube">
-    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
+    <div ref="chartChart" class="chart-chart" :style="{opacity: (monthData) ? 1 : 0}"></div>
     <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>

src/components/TeamChartMonthOptions.js

@@ -7,7 +7,7 @@ export const options = {
   },
   title: [
     {
-      text: "当前产量：" + 100 + " 片",
+      text: "当前产量：" + 118 + " 片",
       left: "27%",
       textAlign: "center",
       top: "70%",
@@ -17,7 +17,7 @@ export const options = {
       },
     },
     {
-      text: "目标产量：" + 100 + " 片",
+      text: "目标产量：" + 213 + " 片",
       left: "27%",
       textAlign: "center",
       top: "85%",
@@ -27,7 +27,7 @@ export const options = {
       },
     },
     {
-      text: "当前成品率：" + 22 + "%",
+      text: "当前成品率：" + 78 + "%",
       left: "72%",
       textAlign: "center",
       top: "70%",
@@ -37,7 +37,7 @@ export const options = {
       },
     },
     {
-      text: "目标成品率：" + 22 + "%",
+      text: "目标成品率：" + 90 + "%",
       left: "72%",
       textAlign: "center",
       top: "85%",
@@ -85,7 +85,7 @@ export const options = {
       data: [
         {
           // value: (nowProduction / targetProduction * 100).toFixed(1),
-          value: 100,
+          value: 89.78,
         },
       ],
     },
@@ -128,7 +128,7 @@ export const options = {
       data: [
         {
           // value: targetYield,
-          value: 100,
+          value: 78,
           name: "Perfect",
           title: {
             show: false,
@@ -140,8 +140,7 @@ export const options = {
           },
         },
         {
-          value: 100,
+          value: 90,
-          // value: nowYield,
           name: "Good",
           title: {
             show: false,
@@ -150,6 +149,7 @@ export const options = {
             show: false,
             valueAnimation: true,
             offsetCenter: ["0%", "10%"],
+            formatter: '99.23%'
           },
         },
         {
@@ -164,13 +164,13 @@ export const options = {
 };
 export default function setup(echartInstance, data) {
   const new_options = { ...options };
-  new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
+  // new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
-  new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
+  // new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
-  new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
+  // new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
-  new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
+  // new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
-  new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
+  // new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
-  new_options.series[1].data[0].value = data.targetYield
+  // new_options.series[1].data[0].value = data.targetYield
-  new_options.series[1].data[1].value = data.nowYield
+  // new_options.series[1].data[1].value = data.nowYield
-  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
+  // new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
   echartInstance.setOption(new_options);
 }

src/pages/ThreeDimension.vue

@@ -21,7 +21,7 @@ const props = defineProps({
     </div>
     <div class="data-list">
       <HourChart />
-      <!-- <TeamChartDay /> -->
+      <TeamChartDay />
       <TeamChartMonth />
     </div>
   </div>
@@ -40,15 +40,14 @@ const props = defineProps({
   position: absolute;
   top: 0;
   right: 32px;
-
+  gap: 24px;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
 }
 
 :fullscreen .data-list {
   width: 35%;
-  gap: 32px;
+  gap: 12px;
   padding: 32px 0;
   justify-content: space-around;
 }