From e0da16c903108ee4fa4446f6445a0c723d2fd281 Mon Sep 17 00:00:00 2001
From: "DESKTOP-FUDKNA8\\znjsz" <tonystark@starkindustries.mil>
Date: Wed, 31 Jan 2024 10:20:34 +0800
Subject: [PATCH] done latest week

---
 src/components/datapage/LatestWeekYield.vue   | 167 +++++++++---------
 .../datapage/LatestWeekYieldOptions.js        |  50 ++++--
 2 files changed, 117 insertions(+), 100 deletions(-)

diff --git a/src/components/datapage/LatestWeekYield.vue b/src/components/datapage/LatestWeekYield.vue
index 6ef2305..e9e5f4f 100644
--- a/src/components/datapage/LatestWeekYield.vue
+++ b/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 from "./LatestWeekYieldOptions";
+import chartSetup, { loadData } from "./LatestWeekYieldOptions";
 
 const store = useWsStore();
 const chartContainer = ref(null);
@@ -12,23 +12,45 @@ const show = ref(false);
 
 onMounted(() => {
   chartContainer.value.classList.add("h-full");
-  // const d = loadData(store.data2.lineSevenDayLogList);
-  const d = loadData([
-    {
-      data: [
-        { day: "1001", num: 24 },
-        { day: "1002", num: 14 },
-        { day: "1003", num: 234 },
-        { day: "1004", num: 84 },
-        { day: "1005", num: 34 },
-        { day: "1006", num: 44 },
-        { day: "1007", num: 20 },
-      ],
-      name: "钢一线",
-    },
-    { data: [], name: "钢二线" },
-    { data: [], name: "钢三线" },
-  ]);
+  const d = loadData(store.data2.lineSevenDayLogList);
+  // const d = loadData([
+  //   {
+  //     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: "钢一线",
+  //   },
+  //   {
+  //     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: "钢二线",
+  //   },
+  //   {
+  //     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) {
@@ -38,52 +60,52 @@ onMounted(() => {
   } else {
     if (!chartInstance.value)
       chartInstance.value = echarts.init(chartContainer.value);
-    chartSetup(chartInstance.value);
+    chartSetup(chartInstance.value, d);
     show.value = true;
   }
 });
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  // const d = loadData(state.data2.lineSevenDayLogList);
-  const d = loadData([
-    {
-      data: [
-        { day: "1001", num: 24 },
-        { day: "1002", num: 14 },
-        { day: "1003", num: 234 },
-        { day: "1004", num: 84 },
-        { day: "1005", num: 34 },
-        { day: "1006", num: 44 },
-        { day: "1007", num: 20 },
-      ],
-      name: "钢一线",
-    },
-    {
-      data: [
-        { day: "1001", num: 24 },
-        { day: "1002", num: 14 },
-        { day: "1003", num: 234 },
-        { day: "1004", num: 84 },
-        { day: "1005", num: 34 },
-        { day: "1006", num: 44 },
-        { day: "1007", num: 20 },
-      ],
-      name: "钢二线",
-    },
-    {
-      data: [
-        { day: "1001", num: 24 },
-        { day: "1002", num: 14 },
-        { day: "1003", num: 234 },
-        { day: "1004", num: 84 },
-        { day: "1005", num: 34 },
-        { day: "1006", num: 44 },
-        { day: "1007", num: 20 },
-      ],
-      name: "钢三线",
-    },
-  ]);
+  const d = loadData(state.data2.lineSevenDayLogList);
+  // const d = loadData([
+  //   {
+  //     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: "钢一线",
+  //   },
+  //   {
+  //     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: "钢二线",
+  //   },
+  //   {
+  //     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) {
@@ -93,37 +115,10 @@ store.$subscribe((mutation, state) => {
   } else {
     if (!chartInstance.value)
       chartInstance.value = echarts.init(chartContainer.value);
-    chartSetup(chartInstance.value);
+    chartSetup(chartInstance.value, d);
     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>
diff --git a/src/components/datapage/LatestWeekYieldOptions.js b/src/components/datapage/LatestWeekYieldOptions.js
index 11bbbeb..a9d0feb 100644
--- a/src/components/datapage/LatestWeekYieldOptions.js
+++ b/src/components/datapage/LatestWeekYieldOptions.js
@@ -1,5 +1,3 @@
-const d = new Date();
-const m = d.getMonth() + 1;
 export const options = {
   legend: {
     textStyle: {
@@ -8,37 +6,33 @@ export const options = {
   },
   tooltip: {},
   dataset: {
-    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],
-    ],
+    source: [],
   },
   grid: {
     top: 56,
     bottom: 12,
-    left: 20,
+    left: 10,
     right: 20,
     containLabel: true,
   },
   xAxis: {
     type: "category",
     axisLabel: {
-      fontSize: 16,
+      fontSize: 12,
       color: "#fff8",
     },
+    axisTick: {
+      alignWithLabel: true,
+    },
   },
   yAxis: {
     name: "片",
     nameTextStyle: {
       color: "#fff8",
-      fontSize: 18,
+      fontSize: 14,
     },
     axisLabel: {
-      fontSize: 18,
+      fontSize: 12,
       color: "#fff8",
     },
     splitLine: {
@@ -66,3 +60,31 @@ 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);
+}