1

src/components/TeamChartDay.vue

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

src/components/TeamChartDayOptions.js

@@ -1,9 +1,9 @@
 export const options = {
-  color: ['#ffd601', '#72340b', '#a4c9d1'],
+  color: ['#a4c9d1', '#72340b', '#ffd601' ],
   grid: {
-    top: 10,
-    bottom: 0,
-    left: 0,
+    top: 8,
+    bottom: 20,
+    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

@@ -5,58 +5,75 @@ import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
 import setupFn from "./TeamChartMonthOptions";
 
+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");
+  const d = loadData(store.data2.monthlyTarget);
+  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);
+  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;
   }
 
-onMounted(() => {
-  chartChart.value.classList.add("h-full");
-  // nextTick(() => {
-  //   setupChart();
-  // })
-});
+  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 ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
-    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
+    <div
+      ref="chartContainer"
+      class="chart-chart"
+      :style="{ opacity: show ? 1 : 0 }"
+    ></div>
+    <p v-show="!show" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 
@@ -65,8 +82,6 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {}
-
 .chart-chart {
   height: 100%;
 }

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: nowYield,
+          value: 90,
           name: "Good",
           title: {
             show: false,
@@ -150,6 +149,7 @@ export const options = {
             show: false,
             valueAnimation: true,
             offsetCenter: ["0%", "10%"],
+            formatter: '99.23%'
           },
         },
         {
@@ -174,3 +174,11 @@ export default function setup(echartInstance, data) {
   new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
   echartInstance.setOption(new_options);
 }
+
+
+// {
+//   "targetProduction": 99,
+//   "nowProduction": 58,
+//   "targetYield": 12,
+//   "nowYield": 9
+// }

src/components/datapage/HourChart.vue

@@ -9,32 +9,17 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([
-  // { lineName: '001', hour: '00:00', num: 10 },
-  // { lineName: '002', hour: '00:20', num: 20 },
-  // { lineName: '003', hour: '00:30', num: 30 },
-  // { lineName: '004', hour: '00:40', num: 14 },
-  // { lineName: '005', hour: '00:50', num: 50 }
-]);
+const hourData = ref([]);
 store.$subscribe((mutation, state) => {
-  // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
   if (
     state.data2.lineHourList == undefined ||
     state.data2.lineHourList?.length == 0
   ) {
-    // console.log("[HourChart] 清除数据");
     hourData.value.splice(0);
     if (chart.value) chart.value.dispose();
     return;
   }
-  // console.log("[HourChart]  ===> 有数据: ", state.data2.lineHourList);
-  hourData.value = (state.data2?.lineHourList ?? [
-    // { lineName: '001', hour: '00:00', num: 10 },
-    // { lineName: '002', hour: '00:20', num: 20 },
-    // { lineName: '003', hour: '00:30', num: 30 },
-    // { lineName: '004', hour: '00:40', num: 14 },
-    // { lineName: '005', hour: '00:50', num: 50 },
-  ]).map((item, index) => ({
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
     id: `${item.lineName}_${index}`,
     hour: item.hour || `${index}`.padStart(2, "0"),
     data: item.num || Math.floor(Math.random() * 100),
@@ -46,29 +31,12 @@ function setupChart() {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
     chart.value = echarts.init(chartChart.value);
-    // console.log("[HourChart]  ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
     chartSetup(
       chart.value,
       hourData.value.map((item) => item.hour),
       hourData.value.map((item) => item.data)
     );
   });
-
-  // chart.value.setOption({
-  //   xAxis: {
-  //     type: "category",
-  //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-  //   },
-  //   yAxis: {
-  //     type: "value",
-  //   },
-  //   series: [
-  //     {
-  //       data: [150, 230, 224, 218, 135, 147, 260],
-  //       type: "line",
-  //     },
-  //   ],
-  // });
 }
 
 onMounted(() => {
@@ -78,7 +46,11 @@ onMounted(() => {
 
 <template>
   <Container class="chart" title="小时数据" icon="cube">
-    <div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
+    ></div>
     <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
       暂无数据
     </p>
@@ -88,6 +60,7 @@ onMounted(() => {
 <style scoped>
 .chart {
   /* height: 300px; */
+  height: auto;
 }
 
 .chart-chart {

src/components/datapage/LatestWeekYield.vue

@@ -6,88 +6,141 @@ import { useWsStore } from "../../store";
 import chartSetup from "./LatestWeekYieldOptions";
 
 const store = useWsStore();
-const chartChart = ref(null);
-const chart = ref(null);
-// 小时数据
-const hourData = ref([
-  // { lineName: '001', hour: '00:00', num: 10 },
-  // { lineName: '002', hour: '00:20', num: 20 },
-  // { lineName: '003', hour: '00:30', num: 30 },
-  // { lineName: '004', hour: '00:40', num: 14 },
-  // { lineName: '005', hour: '00:50', num: 50 }
-]);
-store.$subscribe((mutation, state) => {
-  // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
-  if (
-    state.data2.lineHourList == undefined ||
-    state.data2.lineHourList?.length == 0
-  ) {
-    // console.log("[HourChart] 清除数据");
-    hourData.value.splice(0);
-    if (chart.value) chart.value.dispose();
-    return;
-  }
-  // console.log("[HourChart]  ===> 有数据: ", state.data2.lineHourList);
-  hourData.value = (state.data2?.lineHourList ?? [
-    // { lineName: '001', hour: '00:00', num: 10 },
-    // { lineName: '002', hour: '00:20', num: 20 },
-    // { lineName: '003', hour: '00:30', num: 30 },
-    // { lineName: '004', hour: '00:40', num: 14 },
-    // { lineName: '005', hour: '00:50', num: 50 },
-  ]).map((item, index) => ({
-    id: `${item.lineName}_${index}`,
-    hour: item.hour || `${index}`.padStart(2, "0"),
-    data: item.num || Math.floor(Math.random() * 100),
-  }));
-  setupChart();
-});
-
-function setupChart() {
-  if (chart.value) chart.value.dispose();
-  nextTick(() => {
-    chart.value = echarts.init(chartChart.value);
-    // console.log("[HourChart]  ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
-    chartSetup(
-      chart.value,
-      hourData.value.map((item) => item.hour),
-      hourData.value.map((item) => item.data)
-    );
-  });
-
-  // chart.value.setOption({
-  //   xAxis: {
-  //     type: "category",
-  //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-  //   },
-  //   yAxis: {
-  //     type: "value",
-  //   },
-  //   series: [
-  //     {
-  //       data: [150, 230, 224, 218, 135, 147, 260],
-  //       type: "line",
-  //     },
-  //   ],
-  // });
-}
+const chartContainer = ref(null);
+const chartInstance = ref(null);
+const show = ref(false);
 
 onMounted(() => {
-  chartChart.value.classList.add("h-full");
+  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: "钢三线" },
+  ]);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    chartSetup(chartInstance.value);
+    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: "钢三线",
+    },
+  ]);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    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>
   <Container class="chart" title="近7日产量" icon="cube">
-    <div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
-    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
-      暂无数据
-    </p>
+    <div
+      ref="chartContainer"
+      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-chart {

src/components/datapage/LatestWeekYieldOptions.js

@@ -1,63 +1,68 @@
+const d = new Date();
+const m = d.getMonth() + 1;
 export const options = {
+  legend: {
+    textStyle: {
+      color: "#fff8",
+    },
+  },
+  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],
+    ],
+  },
   grid: {
-    top: 10,
-    bottom: 0,
-    left: 12,
-    right: 10,
+    top: 56,
+    bottom: 12,
+    left: 20,
+    right: 20,
     containLabel: true,
   },
   xAxis: {
     type: "category",
-    data: [],
     axisLabel: {
       fontSize: 16,
-      color: '#fff8'
-    },
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: "#e6e6e633",
-      },
+      color: "#fff8",
     },
   },
   yAxis: {
-    type: "value",
-    axisLine: {
-      show: true,
-      lineStyle: {
-        color: "#e6e6e633",
+    name: "片",
+    nameTextStyle: {
+      color: "#fff8",
+      fontSize: 18,
     },
+    axisLabel: {
+      fontSize: 18,
+      color: "#fff8",
     },
     splitLine: {
       lineStyle: {
-        color: '#e6e6e633'
-      }
+        color: "#fff8",
       },
-    axisLabel: {
-      fontSize: 16,
-      color: '#fff8'
     },
     minInterval: 1,
-    max: 100,
-    min: 1
   },
-  series: [
-    {
-      data: [],
-      // data: Array.from({ length: 7 }, () => Math.random() * 100),
-      type: "bar",
-      // barWidth: 20,
-      showBackground: true,
-      backgroundStyle: {
-        color: "rgba(180, 180, 180, 0.2)",
-      },
-    },
-  ],
+  series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
 };
 
-export default function setup(echartInstance, timeArr, dataArr) {
+export default function setup(
+  echartInstance,
+  list = [
+    ["1-12", 1, 2, 3],
+    ["1-13", 4, 5, 6],
+    ["1-14", 14, 15, 16],
+    ["1-15", 9],
+    ["1-16", 4, 5, 6],
+    ["1-17", 1, 1, 1],
+  ]
+) {
   const new_options = { ...options };
-  new_options.xAxis.data = timeArr;
-  new_options.series[0].data = dataArr;
+  new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list];
   echartInstance.setOption(new_options);
 }

src/pages/DataPage.vue

@@ -12,9 +12,9 @@ import LineMonth from '../components/datapage/LineMonth.vue';
 <template>
   <div class="data-page">
     <!-- 小时数据 -->
-    <!-- <HourChart /> -->
+    <HourChart />
     <!-- 近7日产量 -->
-    <!-- <LatestWeekYield /> -->
+    <LatestWeekYield />
     <!-- 本日生产线情况 -->
     <!-- <LineToday /> -->
     <!-- 本月生产线情况 -->

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;
 }