update chart month

src/assets/svg/status_icon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态icon</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-641.167539, -519.090909)" fill="#FF3737" fill-rule="nonzero">
+            <g id="状态icon" transform="translate(641.167539, 519.090909)">
+                <path d="M21.6498582,4.55479956 C21.6463914,4.55050501 21.642058,4.54535155 21.6368579,4.54191591 C18.7967223,1.61303292 15.0188308,0 11,0 C6.98116924,0 3.20327766,1.61303292 0.362275449,4.54191591 C0.128269776,4.7824107 0,5.10278412 0,5.44377138 C0,5.78389972 0.127403089,6.10341423 0.361408761,6.34390902 C0.595414434,6.58440381 0.905688623,6.71753486 1.23676332,6.71753486 C1.56697132,6.71753486 1.87724551,6.58440381 2.11125118,6.34390902 C4.48510873,3.89687452 7.64158525,2.54924478 11,2.54924478 C14.3584147,2.54924478 17.515758,3.89773343 19.8887488,6.34476793 C20.1236212,6.58526272 20.4338954,6.71839377 20.7641034,6.71839377 C21.0943114,6.71839377 21.4054523,6.58526272 21.6377246,6.34476793 C21.8725969,6.10427314 22,5.78304081 22,5.44291247 C21.9991333,5.10879649 21.8760637,4.79443544 21.6498582,4.55479956 Z M10.9998918,22 C14.348751,22 17.0635378,19.3620338 17.0635378,16.1079376 C17.0635378,12.8538414 14.348751,10.2158752 10.9998918,10.2158752 C7.65103259,10.2158752 4.9362458,12.8538414 4.9362458,16.1079376 C4.9362458,19.3620338 7.65103259,22 10.9998918,22 Z M11,5.19640531 C8.47793886,5.19640531 6.10668137,6.16869139 4.32390482,7.9363281 C4.06909864,8.18884763 3.92869524,8.52382252 3.92869524,8.88027016 C3.92869524,9.23757671 4.06909864,9.5734105 4.32390482,9.82507112 C4.57784431,10.0767317 4.91585251,10.2158752 5.27552789,10.2158752 C5.63520328,10.2158752 5.97407816,10.0767317 6.22801765,9.82507112 C7.50291522,8.56161456 9.19815632,7.86589749 11,7.86589749 C12.8027104,7.86589749 14.4979515,8.56161456 15.7719824,9.82507112 C16.0267885,10.0767317 16.3647967,10.2158752 16.7253388,10.2158752 C17.0858809,10.2158752 17.4247558,10.0767317 17.6778286,9.82421221 C18.2030413,9.30285386 18.2013079,8.45682754 17.6778286,7.9363281 C15.8933186,6.1695503 13.5220611,5.19640531 11,5.19640531 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/TeamChartMonth.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
@@ -11,24 +11,35 @@ const chart = ref(null);
 
 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;
   }
-  console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
+
+  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() {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
+    console.log("[ChartMonth]  ===>  初始化表格: ", monthData.value);
     chart.value = echarts.init(chartChart.value);
     setupFn(chart.value, monthData.value);
   });
@@ -36,16 +47,15 @@ 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>
@@ -55,8 +65,7 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {
-}
+.chart-inner {}
 
 .chart-chart {
   height: 100%;

src/components/TeamChartMonthOptions.js

@@ -1,43 +1,49 @@
 export const options = {
   grid: {
-    top: "10%",
-    bottom: "10%",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
   },
   title: [
     {
       text: "当前产量：" + 100 + " 片",
       left: "27%",
       textAlign: "center",
-      top: "67%",
+      top: "70%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
     {
       text: "目标产量：" + 100 + " 片",
       left: "27%",
       textAlign: "center",
-      top: "82%",
+      top: "85%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
     {
       text: "当前成品率：" + 22 + "%",
-      left: "73%",
+      left: "72%",
       textAlign: "center",
-      top: "67%",
+      top: "70%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
     {
       text: "目标成品率：" + 22 + "%",
-      left: "73%",
+      left: "72%",
       textAlign: "center",
-      top: "82%",
+      top: "85%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
   ],
@@ -71,7 +77,7 @@ export const options = {
       },
       detail: {
         valueAnimation: true,
-        fontSize: 12,
+        fontSize: 16,
         offsetCenter: [0, "0%"],
         formatter: "{value}%",
         color: "rgba(255, 255, 255, 1)",
@@ -113,11 +119,11 @@ export const options = {
       detail: {
         show: true,
         valueAnimation: true,
-        fontSize: 12,
+        fontSize: 16,
         offsetCenter: [0, "0%"],
-        formatter: 0 + "%",
+        // formatter: 0 + "%",
         // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
-        color: "#fff8",
+        color: "#fff",
       },
       data: [
         {
@@ -165,5 +171,6 @@ export default function setup(echartInstance, data) {
   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) + '%',
   echartInstance.setOption(new_options);
 }

src/pages/DataPage.vue

@@ -10,7 +10,7 @@ import TeamChartMonth from "../components/TeamChartMonth.vue";
     <div class="data-list">
       <HourChart />
       <TeamChartDay />
-      <!-- <TeamChartMonth /> -->
+      <TeamChartMonth />
     </div>
   </div>
 </template>