src/components/HeadTime.vue

@@ -24,7 +24,13 @@ 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/TeamChartMonth.vue

@@ -51,7 +51,7 @@ store.$subscribe((mutation, state) => {
 function loadData(monthlyTarget) {
   if (
     monthlyTarget == undefined ||
-    // monthlyTarget?.length == 0 ||
+    monthlyTarget?.length == 0 ||
     !monthlyTarget[0]
   ) {
     return null;

src/components/TeamChartMonthOptions.js

@@ -3,7 +3,7 @@ export const options = {
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
+    bottom: 0
   },
   title: [
     {
@@ -13,7 +13,7 @@ export const options = {
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
     {
@@ -23,7 +23,7 @@ export const options = {
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
     {
@@ -33,7 +33,7 @@ export const options = {
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
     {
@@ -43,7 +43,7 @@ export const options = {
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
   ],
@@ -149,7 +149,7 @@ export const options = {
             show: false,
             valueAnimation: true,
             offsetCenter: ["0%", "10%"],
-            formatter: "99.23%",
+            formatter: '99.23%'
           },
         },
         {
@@ -168,21 +168,14 @@ export default function setup(echartInstance, data) {
   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 =
+  new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
-    data.nowProduction != null &&
+  new_options.series[1].data[0].value = data.targetYield
-    data.targetProduction != null &&
+  new_options.series[1].data[1].value = data.nowYield
-    data.targetProduction != 0
+  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
-      ? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
-      : 0;
-  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 != null && data.targetYield != null && data.targetYield != 0
-      ? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
-      : "0%";
   echartInstance.setOption(new_options);
 }
 
+
 // {
 //   "targetProduction": 99,
 //   "nowProduction": 58,

src/components/datapage/LatestWeekYield.vue

@@ -3,7 +3,7 @@ import { ref, watch, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
-import chartSetup, { loadData } from "./LatestWeekYieldOptions";
+import chartSetup from "./LatestWeekYieldOptions";
 
 const store = useWsStore();
 const chartContainer = ref(null);
@@ -12,45 +12,23 @@ const show = ref(false);
 
 onMounted(() => {
   chartContainer.value.classList.add("h-full");
-  const d = loadData(store.data2.lineSevenDayLogList);
+  // const d = loadData(store.data2.lineSevenDayLogList);
-  // const d = loadData([
+  const d = loadData([
-  //   {
+    {
-  //     data: [
+      data: [
-  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+        { day: "1001", num: 24 },
-  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+        { day: "1002", num: 14 },
-  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+        { day: "1003", num: 234 },
-  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+        { day: "1004", num: 84 },
-  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+        { day: "1005", num: 34 },
-  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+        { day: "1006", num: 44 },
-  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+        { day: "1007", num: 20 },
-  //     ],
+      ],
-  //     name: "钢一线",
+      name: "钢一线",
-  //   },
+    },
-  //   {
+    { data: [], name: "钢二线" },
-  //     data: [
+    { data: [], name: "钢三线" },
-  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+  ]);
-  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
-  //     ],
-  //     name: "钢二线",
-  //   },
-  //   {
-  //     data: [
-  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
-  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
-  //     ],
-  //     name: "钢三线",
-  //   },
-  // ]);
   if (!d) {
     show.value = false;
     if (chartInstance.value) {
@@ -60,52 +38,52 @@ onMounted(() => {
   } else {
     if (!chartInstance.value)
       chartInstance.value = echarts.init(chartContainer.value);
-    chartSetup(chartInstance.value, d);
+    chartSetup(chartInstance.value);
     show.value = true;
   }
 });
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  const d = loadData(state.data2.lineSevenDayLogList);
+  // const d = loadData(state.data2.lineSevenDayLogList);
-  // const d = loadData([
+  const d = loadData([
-  //   {
+    {
-  //     data: [
+      data: [
-  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+        { day: "1001", num: 24 },
-  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+        { day: "1002", num: 14 },
-  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+        { day: "1003", num: 234 },
-  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+        { day: "1004", num: 84 },
-  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+        { day: "1005", num: 34 },
-  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+        { day: "1006", num: 44 },
-  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+        { day: "1007", num: 20 },
-  //     ],
+      ],
-  //     name: "钢一线",
+      name: "钢一线",
-  //   },
+    },
-  //   {
+    {
-  //     data: [
+      data: [
-  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+        { day: "1001", num: 24 },
-  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+        { day: "1002", num: 14 },
-  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+        { day: "1003", num: 234 },
-  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+        { day: "1004", num: 84 },
-  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+        { day: "1005", num: 34 },
-  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+        { day: "1006", num: 44 },
-  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+        { day: "1007", num: 20 },
-  //     ],
+      ],
-  //     name: "钢二线",
+      name: "钢二线",
-  //   },
+    },
-  //   {
+    {
-  //     data: [
+      data: [
-  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+        { day: "1001", num: 24 },
-  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+        { day: "1002", num: 14 },
-  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+        { day: "1003", num: 234 },
-  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+        { day: "1004", num: 84 },
-  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+        { day: "1005", num: 34 },
-  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+        { day: "1006", num: 44 },
-  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+        { day: "1007", num: 20 },
-  //     ],
+      ],
-  //     name: "钢三线",
+      name: "钢三线",
-  //   },
+    },
-  // ]);
+  ]);
   if (!d) {
     show.value = false;
     if (chartInstance.value) {
@@ -115,10 +93,37 @@ store.$subscribe((mutation, state) => {
   } else {
     if (!chartInstance.value)
       chartInstance.value = echarts.init(chartContainer.value);
-    chartSetup(chartInstance.value, d);
+    chartSetup(chartInstance.value);
     show.value = true;
   }
 });
+
+function loadData(list) {
+  if (!list || list.length != 3 || list[0].data.length <= 0) return null;
+  const outerdata = [[], [], [], [], [], [], []];
+
+  list.forEach(line => {
+    
+  })
+
+  const dateList = list[0].data.map((item) => item.day.toString()).sort();
+  console.log("datelist", dateList);
+  dateList.forEach((date, index) => {
+    outerdata[index][0] = date;
+  });
+  list.forEach((line, index) => {
+    if (line.data[0] != null) {
+      for (let x = 0; x < 7; x++) {
+        for (let y = 0; y < line.data.length; y++) {
+          if (outerdata[x + 1][0] == line.data[y].day) {
+            outerdata[x + 1][line + 1] = line.data[y].num;
+          }
+        }
+      }
+    }
+  });
+  return outerdata;
+}
 </script>
 
 <template>

src/components/datapage/LatestWeekYieldOptions.js

@@ -1,3 +1,5 @@
+const d = new Date();
+const m = d.getMonth() + 1;
 export const options = {
   legend: {
     textStyle: {
@@ -6,33 +8,37 @@ export const options = {
   },
   tooltip: {},
   dataset: {
-    source: [],
+    source: [
+      ["date", "钢1线", "钢2线", "钢3线"],
+      [m + "-" + 1, 0, 0, 0],
+      [m + "-" + 2, 0, 0, 0],
+      [m + "-" + 3, 0, 0, 0],
+      [m + "-" + 4, 0, 0, 0],
+      [m + "-" + 5, 0, 0, 0],
+    ],
   },
   grid: {
     top: 56,
     bottom: 12,
-    left: 10,
+    left: 20,
     right: 20,
     containLabel: true,
   },
   xAxis: {
     type: "category",
     axisLabel: {
-      fontSize: 12,
+      fontSize: 16,
       color: "#fff8",
     },
-    axisTick: {
-      alignWithLabel: true,
-    },
   },
   yAxis: {
     name: "片",
     nameTextStyle: {
       color: "#fff8",
-      fontSize: 14,
+      fontSize: 18,
     },
     axisLabel: {
-      fontSize: 12,
+      fontSize: 18,
       color: "#fff8",
     },
     splitLine: {
@@ -60,31 +66,3 @@ export default function setup(
   new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list];
   echartInstance.setOption(new_options);
 }
-
-export function createDatasetFrom(lines, datelist) {
-  const dataset = [];
-  datelist.forEach((date) => {
-    const row = [date];
-    lines.forEach((line) => {
-      const item = line.data.find((item) => item.day === date);
-      row.push(item ? item.num : 0);
-    });
-    dataset.push(row);
-  });
-  console.log(dataset);
-  return dataset;
-}
-
-export function findDatelist(lines) {
-  const dateList = [];
-  lines.forEach((line) => {
-    dateList.push(...line.data.map((item) => item.day));
-  });
-  return Array.from(new Set(dateList)).sort();
-}
-
-export function loadData(list) {
-  if (!list || list.length != 3 || list[0].data.length <= 0) return null;
-  const datelist = findDatelist(list);
-  return createDatasetFrom(list, datelist);
-}

src/components/datapage/LineMonth.vue

@@ -5,100 +5,68 @@ import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
 import setupFn from "./LineMonthOptions";
 
-const show = ref(false);
-const chartContainer = ref(null);
-const chartInstance = ref(null);
 const store = useWsStore();
+const chartChart = ref(null);
+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;
+  }
+
+  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);
+  });
+}
+
 onMounted(() => {
-  chartContainer.value.classList.add("h-full");
+  chartChart.value.classList.add("h-full");
-  const d = loadData(store.data2.monthlyTarget);
+  // nextTick(() => {
-  // const d = loadData([
+  //   setupChart();
-  //   {
+  // })
-  //     targetProduction: 100,
-  //     nowProduction: 66,
-  //     targetYield: 13,
-  //     nowYield: 3,
-  //   },
-  // ]);
-  if (!d) {
-    show.value = false;
-    if (chartInstance.value) {
-      chartInstance.value.dispose();
-      chartInstance.value = null;
-    }
-  } else {
-    if (!chartInstance.value)
-      chartInstance.value = echarts.init(chartContainer.value);
-    setupFn(chartInstance.value, d);
-    show.value = true;
-  }
 });
-
-// 订阅
-store.$subscribe((mutation, state) => {
-  const d = loadData(state.data2.monthlyTarget);
-  // const d = loadData([
-  //   {
-  //     targetProduction: 100,
-  //     nowProduction: 66,
-  //     targetYield: 13,
-  //     nowYield: 3,
-  //   },
-  // ]);
-  if (!d) {
-    show.value = false;
-    if (chartInstance.value) {
-      chartInstance.value.dispose();
-      chartInstance.value = null;
-    }
-  } else {
-    if (!chartInstance.value)
-      chartInstance.value = echarts.init(chartContainer.value);
-    setupFn(chartInstance.value, d);
-    show.value = true;
-  }
-});
-
-// utils
-function loadData(monthlyTarget) {
-  if (
-    monthlyTarget == undefined ||
-    // monthlyTarget?.length == 0 ||
-    !monthlyTarget[0]
-  ) {
-    return null;
-  }
-
-  return {
-    targetProduction: monthlyTarget[0].targetProduction,
-    nowProduction: monthlyTarget[0].nowProduction,
-    targetYield: monthlyTarget[0].targetYield,
-    nowYield: monthlyTarget[0].nowYield,
-  };
-}
 </script>
 
 <template>
   <Container class="chart" title="本月生产线情况" icon="cube">
-    <div
+    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
-      ref="chartContainer"
+    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
-      class="chart-chart"
-      :style="{ opacity: show ? 1 : 0 }"
-    ></div>
-    <p v-show="!show" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
 <style scoped>
 .chart {
   /* height: 300px; */
-  height: auto;
 }
 
+.chart-inner {}
+
 .chart-chart {
   height: 100%;
 }

src/components/datapage/LineMonthOptions.js

@@ -56,11 +56,11 @@ export const options = {
       radius: "55%",
       progress: {
         show: true,
-        width: 24,
+        width: 12,
       },
       axisLine: {
         lineStyle: {
-          width: 24,
+          width: 12,
         },
       },
       pointer: {
@@ -97,11 +97,11 @@ export const options = {
       radius: "55%",
       progress: {
         show: true,
-        width: 24,
+        width: 12,
       },
       axisLine: {
         lineStyle: {
-          width: 24,
+          width: 12,
         },
       },
       pointer: {

src/components/datapage/LineToday.vue

@@ -5,100 +5,68 @@ import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
 import setupFn from "./LineTodayOptions";
 
-const show = ref(false);
-const chartContainer = ref(null);
-const chartInstance = ref(null);
 const store = useWsStore();
+const chartChart = ref(null);
+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;
+  }
+
+  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);
+  });
+}
+
 onMounted(() => {
-  chartContainer.value.classList.add("h-full");
+  chartChart.value.classList.add("h-full");
-  const d = loadData(store.data2.dailyTarget);
+  // nextTick(() => {
-  // const d = loadData([
+  //   setupChart();
-  //   {
+  // })
-  //     targetProduction: 100,
-  //     nowProduction: 66,
-  //     targetYield: 13,
-  //     nowYield: 3,
-  //   },
-  // ]);
-  if (!d) {
-    show.value = false;
-    if (chartInstance.value) {
-      chartInstance.value.dispose();
-      chartInstance.value = null;
-    }
-  } else {
-    if (!chartInstance.value)
-      chartInstance.value = echarts.init(chartContainer.value);
-    setupFn(chartInstance.value, d);
-    show.value = true;
-  }
 });
-
-// 订阅
-store.$subscribe((mutation, state) => {
-  const d = loadData(state.data2.dailyTarget);
-  // const d = loadData([
-  //   {
-  //     targetProduction: 100,
-  //     nowProduction: 66,
-  //     targetYield: 13,
-  //     nowYield: 3,
-  //   },
-  // ]);
-  if (!d) {
-    show.value = false;
-    if (chartInstance.value) {
-      chartInstance.value.dispose();
-      chartInstance.value = null;
-    }
-  } else {
-    if (!chartInstance.value)
-      chartInstance.value = echarts.init(chartContainer.value);
-    setupFn(chartInstance.value, d);
-    show.value = true;
-  }
-});
-
-// utils
-function loadData(dailyTarget) {
-  if (
-    dailyTarget == undefined ||
-    // dailyTarget?.length == 0 ||
-    !dailyTarget[0]
-  ) {
-    return null;
-  }
-
-  return {
-    targetProduction: dailyTarget[0].targetProduction,
-    nowProduction: dailyTarget[0].nowProduction,
-    targetYield: dailyTarget[0].targetYield,
-    nowYield: dailyTarget[0].nowYield,
-  };
-}
 </script>
 
 <template>
   <Container class="chart" title="本日生产线情况" icon="cube">
-    <div
+    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
-      ref="chartContainer"
+    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
-      class="chart-chart"
-      :style="{ opacity: show ? 1 : 0 }"
-    ></div>
-    <p v-show="!show" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
 <style scoped>
 .chart {
   /* height: 300px; */
-  height: auto;
 }
 
+.chart-inner {}
+
 .chart-chart {
   height: 100%;
 }

src/components/datapage/LineTodayOptions.js

@@ -3,47 +3,47 @@ export const options = {
     top: 0,
     left: 0,
     right: 0,
-    bottom: 0,
+    bottom: 0
   },
   title: [
     {
-      text: "当前产量：" + 118 + " 片",
+      text: "当前产量：" + 100 + " 片",
       left: "27%",
       textAlign: "center",
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
     {
-      text: "目标产量：" + 213 + " 片",
+      text: "目标产量：" + 100 + " 片",
       left: "27%",
       textAlign: "center",
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
     {
-      text: "当前成品率：" + 78 + "%",
+      text: "当前成品率：" + 22 + "%",
       left: "72%",
       textAlign: "center",
       top: "70%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
     {
-      text: "目标成品率：" + 90 + "%",
+      text: "目标成品率：" + 22 + "%",
       left: "72%",
       textAlign: "center",
       top: "85%",
       textStyle: {
         fontSize: 16,
-        color: "#fffa",
+        color: '#fffa'
       },
     },
   ],
@@ -56,11 +56,11 @@ export const options = {
       radius: "55%",
       progress: {
         show: true,
-        width: 24,
+        width: 12,
       },
       axisLine: {
         lineStyle: {
-          width: 24,
+          width: 12,
         },
       },
       pointer: {
@@ -85,7 +85,7 @@ export const options = {
       data: [
         {
           // value: (nowProduction / targetProduction * 100).toFixed(1),
-          value: 89.78,
+          value: 100,
         },
       ],
     },
@@ -97,11 +97,11 @@ export const options = {
       radius: "55%",
       progress: {
         show: true,
-        width: 24,
+        width: 12,
       },
       axisLine: {
         lineStyle: {
-          width: 24,
+          width: 12,
         },
       },
       pointer: {
@@ -128,7 +128,7 @@ export const options = {
       data: [
         {
           // value: targetYield,
-          value: 78,
+          value: 100,
           name: "Perfect",
           title: {
             show: false,
@@ -140,7 +140,8 @@ export const options = {
           },
         },
         {
-          value: 90,
+          value: 100,
+          // value: nowYield,
           name: "Good",
           title: {
             show: false,
@@ -149,7 +150,6 @@ export const options = {
             show: false,
             valueAnimation: true,
             offsetCenter: ["0%", "10%"],
-            formatter: "99.23%",
           },
         },
         {
@@ -168,24 +168,9 @@ export default function setup(echartInstance, data) {
   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 =
+  new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
-    data.nowProduction != null &&
+  new_options.series[1].data[0].value = data.targetYield
-    data.targetProduction != null &&
+  new_options.series[1].data[1].value = data.nowYield
-    data.targetProduction != 0
+  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
-      ? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
-      : 0;
-  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 != null && data.targetYield != null && data.targetYield != 0
-      ? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
-      : "0%";
   echartInstance.setOption(new_options);
 }
-
-// {
-//   "targetProduction": 99,
-//   "nowProduction": 58,
-//   "targetYield": 12,
-//   "nowYield": 9
-// }

src/components/datapage/TeamChartDay.vue

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

src/components/datapage/TeamChartDayOptions.js

@@ -1,13 +1,11 @@
 export const options = {
-  color: ['#a4c9d1', '#72340b', '#ffd601' ],
+  color: ['#ffd601', '#72340b'],
   grid: {
-    top: 8,
+    top: 10,
-    bottom: 20,
+    bottom: 0,
-    left: 42,
+    left: 0,
     right: 28,
-  },  
+    containLabel: true,
-  legend: {
-    show: false,
   },
   xAxis: {
     max: 100,
@@ -25,6 +23,8 @@ export const options = {
     type: "category",
     data: ["A组", "B组", "C组"],
     inverse: true,
+    animationDuration: 300,
+    animationDurationUpdate: 300,
     max: 2, // only the largest 3 bars will be displayed
     axisLabel: {
       fontSize: 16,
@@ -38,18 +38,27 @@ export const options = {
   },
   series: [
     {
+      realtimeSort: true,
       type: "bar",
-      data: [34, 2, 23],
+      // data: [10, 20, 30],
+      data: [],
       label: {
         show: true,
         position: "right",
+        valueAnimation: true,
         formatter: "{c}%",
         color: "#fff",
         fontSize: 16,
       },
     },
   ],
-
+  legend: {
+    show: false,
+  },
+  animationDuration: 0,
+  animationDurationUpdate: 3000,
+  animationEasing: "linear",
+  animationEasingUpdate: "linear",
 };
 
 export default function setup(echartInstance, dataArr) {

src/components/datapage/TeamChartMonth.vue

@@ -8,62 +8,55 @@ import setupFn from "./TeamChartMonthOptions";
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
-const showChartDom = ref(false);
 
-/** 无状态，处理数据 */
+const monthData = ref(null);
-function loadData(yieldArray) {
+store.$subscribe((mutation, state) => {
-  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  console.log("[ChartMonth]  ===>  state: ", state.data2.monthlyTarget);
-  const result = [];
+  if (
-  for (let i = 0; i < yieldArray.length; ++i) {
+    state.data2.monthlyTarget == undefined ||
-    if (yieldArray[i].teamName == "A组") {
+    state.data2.monthlyTarget?.length == 0
-      result[0] = parseInt(yieldArray[i].yield);
+  ) {
-    } else if (yieldArray[i].teamName == "B组") {
+    console.log("[ChartMonth]  ===>  清除状态");
-      result[1] = parseInt(yieldArray[i].yield);
+    monthData.value = null;
-    } else if (yieldArray[i].teamName == "C组") {
-      result[2] = parseInt(yieldArray[i].yield);
-    }
-  }
-  return result;
-}
-
-function setupChart(chart, dom, data) {
-  if (chart.value) chart.value.dispose();
-  nextTick(() => {
-    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);
-}
 
-// 订阅
+  if (!state.data2.monthlyTarget[0]) return;
-store.$subscribe((mutation, state) => {
+  const { targetProduction, nowProduction, targetYield, nowYield } =
-  __apply(state.data2.lineTeamMonthYieldList);
+    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);
+  });
+}
+
 onMounted(() => {
   chartChart.value.classList.add("h-full");
+  // nextTick(() => {
+  //   setupChart();
+  // })
 });
 </script>
 
 <template>
   <Container class="chart" title="本月班组情况" icon="cube">
-    <div
+    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
-      ref="chartChart"
+    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
-      class="chart-chart"
-      :style="{ opacity: showChartDom ? 1 : 0 }"
-    ></div>
-    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
@@ -72,6 +65,8 @@ onMounted(() => {
   /* height: 300px; */
 }
 
+.chart-inner {}
+
 .chart-chart {
   height: 100%;
 }

src/components/datapage/TeamChartMonthOptions.js

@@ -1,59 +1,176 @@
 export const options = {
-  color: ['#a4c9d1', '#72340b', '#ffd601' ],
   grid: {
-    top: 8,
+    top: 0,
-    bottom: 20,
+    left: 0,
-    left: 42,
+    right: 0,
-    right: 28,
+    bottom: 0
   },
-  legend: {
+  title: [
-    show: false,
-  },
-  xAxis: {
-    max: 100,
-    splitLine: {
-      lineStyle: {
-        color: "#fff2",
-      },
-    },
-    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",
-      },
-    },
-  },
-  series: [
     {
-      type: "bar",
+      text: "当前产量：" + 100 + " 片",
-      data: [34, 2, 23],
+      left: "27%",
-      label: {
+      textAlign: "center",
-        show: true,
+      top: "70%",
-        position: "right",
+      textStyle: {
-        formatter: "{c}%",
-        color: "#fff",
         fontSize: 16,
+        color: '#fffa'
+      },
+    },
+    {
+      text: "目标产量：" + 100 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "85%",
+      textStyle: {
+        fontSize: 16,
+        color: '#fffa'
+      },
+    },
+    {
+      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: {
+        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) + '%',
+        color: "#fff",
+      },
+      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.series[0].data = dataArr;
+  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) + '%',
   echartInstance.setOption(new_options);
 }

src/pages/DataPage.vue

@@ -16,13 +16,13 @@ import LineMonth from '../components/datapage/LineMonth.vue';
     <!-- 近7日产量 -->
     <LatestWeekYield />
     <!-- 本日生产线情况 -->
-    <LineToday />
+    <!-- <LineToday /> -->
     <!-- 本月生产线情况 -->
-    <LineMonth />
+    <!-- <LineMonth /> -->
     <!-- 本日班组情况 -->
-    <TeamChartDay />
+    <!-- <TeamChartDay /> -->
     <!-- 本月班组情况 -->
-    <TeamChartMonth />
+    <!-- <TeamChartMonth /> -->
   </div>
 </template>