done 本月班组情况

src/components/HeadTime.vue

@@ -24,13 +24,7 @@ onMounted(() => {
   top: 50px;
   right: 420px;
   font-size: 24px;
-  color: #69B4FF;
+  color: #69b4ff;
   line-height: 1;
 }
-
-:fullscreen .datetime {
-  /* right: 620px;
-  top: 56px; */
-  color: red;
-}
 </style>

src/components/datapage/TeamChartMonth.vue

@@ -8,55 +8,62 @@ import setupFn from "./TeamChartMonthOptions";
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
+const showChartDom = ref(false);
 
-const monthData = ref(null);
-store.$subscribe((mutation, state) => {
-  console.log("[ChartMonth]  ===>  state: ", state.data2.monthlyTarget);
-  if (
-    state.data2.monthlyTarget == undefined ||
-    state.data2.monthlyTarget?.length == 0
-  ) {
-    console.log("[ChartMonth]  ===>  清除状态");
-    monthData.value = null;
-    if (chart.value) chart.value.dispose();
-    return;
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  const result = [];
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].teamName == "A组") {
+      result[0] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "B组") {
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
+    }
   }
+  return result;
+}
 
-  if (!state.data2.monthlyTarget[0]) return;
-  const { targetProduction, nowProduction, targetYield, nowYield } =
-    state.data2.monthlyTarget[0];
-  monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
-  setupChart();
-});
-
-
-
-// 绿色：24FF5E
-// 黄色：FFB524
-// 红色：FF3737
-
-
-function setupChart() {
+function setupChart(chart, dom, data) {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
-    console.log("[ChartMonth]  ===>  初始化表格: ", monthData.value);
-    chart.value = echarts.init(chartChart.value);
-    setupFn(chart.value, monthData.value);
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
   });
 }
 
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.data2.lineTeamMonthYieldList);
+});
+
 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>
-    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
@@ -65,8 +72,6 @@ onMounted(() => {
   /* height: 300px; */
 }
 
-.chart-inner {}
-
 .chart-chart {
   height: 100%;
 }

src/components/datapage/TeamChartMonthOptions.js

@@ -1,176 +1,59 @@
 export const options = {
+  color: ['#a4c9d1', '#72340b', '#ffd601' ],
   grid: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
+    top: 8,
+    bottom: 20,
+    left: 42,
+    right: 28,
+  },  
+  legend: {
+    show: false,
   },
-  title: [
-    {
-      text: "当前产量：" + 100 + " 片",
-      left: "27%",
-      textAlign: "center",
-      top: "70%",
-      textStyle: {
-        fontSize: 16,
-        color: '#fffa'
+  xAxis: {
+    max: 100,
+    splitLine: {
+      lineStyle: {
+        color: "#fff2",
       },
     },
-    {
-      text: "目标产量：" + 100 + " 片",
-      left: "27%",
-      textAlign: "center",
-      top: "85%",
-      textStyle: {
-        fontSize: 16,
-        color: '#fffa'
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+  },
+  yAxis: {
+    type: "category",
+    data: ["A组", "B组", "C组"],
+    inverse: true,
+    max: 2, // only the largest 3 bars will be displayed
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#e5e5e5",
       },
     },
-    {
-      text: "当前成品率：" + 22 + "%",
-      left: "72%",
-      textAlign: "center",
-      top: "70%",
-      textStyle: {
-        fontSize: 16,
-        color: '#fffa'
-      },
-    },
-    {
-      text: "目标成品率：" + 22 + "%",
-      left: "72%",
-      textAlign: "center",
-      top: "85%",
-      textStyle: {
-        fontSize: 16,
-        color: '#fffa'
-      },
-    },
-  ],
+  },
   series: [
     {
-      type: "gauge",
-      startAngle: 90,
-      center: ["27%", "35%"],
-      endAngle: -270,
-      radius: "55%",
-      progress: {
+      type: "bar",
+      data: [34, 2, 23],
+      label: {
         show: true,
-        width: 12,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 12,
-        },
-      },
-      pointer: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      detail: {
-        valueAnimation: true,
-        fontSize: 16,
-        offsetCenter: [0, "0%"],
-        formatter: "{value}%",
-        color: "rgba(255, 255, 255, 1)",
-      },
-      data: [
-        {
-          // value: (nowProduction / targetProduction * 100).toFixed(1),
-          value: 100,
-        },
-      ],
-    },
-    {
-      type: "gauge",
-      startAngle: 90,
-      center: ["73%", "35%"],
-      endAngle: -270,
-      radius: "55%",
-      progress: {
-        show: true,
-        width: 12,
-      },
-      axisLine: {
-        lineStyle: {
-          width: 12,
-        },
-      },
-      pointer: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      detail: {
-        show: true,
-        valueAnimation: true,
-        fontSize: 16,
-        offsetCenter: [0, "0%"],
-        // formatter: 0 + "%",
-        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
+        position: "right",
+        formatter: "{c}%",
         color: "#fff",
+        fontSize: 16,
       },
-      data: [
-        {
-          // value: targetYield,
-          value: 100,
-          name: "Perfect",
-          title: {
-            show: false,
-          },
-          detail: {
-            show: false,
-            valueAnimation: true,
-            offsetCenter: ["0%", "-20%"],
-          },
-        },
-        {
-          value: 100,
-          // value: nowYield,
-          name: "Good",
-          title: {
-            show: false,
-          },
-          detail: {
-            show: false,
-            valueAnimation: true,
-            offsetCenter: ["0%", "10%"],
-          },
-        },
-        {
-          value: 0,
-          detail: {
-            show: true,
-          },
-        },
-      ],
     },
   ],
+
 };
-export default function setup(echartInstance, data) {
+
+export default function setup(echartInstance, dataArr) {
   const new_options = { ...options };
-  new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
-  new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
-  new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
-  new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
-  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[1].value = data.nowYield
-  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
+  new_options.series[0].data = dataArr;
   echartInstance.setOption(new_options);
 }

src/pages/DataPage.vue

@@ -22,7 +22,7 @@ import LineMonth from '../components/datapage/LineMonth.vue';
     <!-- 本日班组情况 -->
     <TeamChartDay />
     <!-- 本月班组情况 -->
-    <!-- <TeamChartMonth /> -->
+    <TeamChartMonth />
   </div>
 </template>