update

src/components/HourChart.vue

@@ -88,7 +88,7 @@ onMounted(() => {
 
 <style scoped>
 .chart {
-  height: 300px;
+  height: 450px;
 }
 
 .chart-chart {

src/components/LatestWeekYield.vue

@@ -0,0 +1,163 @@
+<script setup>
+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";
+
+const store = useWsStore();
+const chartContainer = ref(null);
+const chartInstance = ref(null);
+const show = ref(false);
+
+onMounted(() => {
+  chartContainer.value.classList.add("h-full");
+  // 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) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    chartSetup(chartInstance.value, d);
+    show.value = true;
+  }
+});
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  // 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) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    chartSetup(chartInstance.value, d);
+    show.value = true;
+  }
+});
+</script>
+
+<template>
+  <Container class="chart" title="近7日产量" icon="cube">
+    <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: 450px;
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>
+
+<style>
+.empty-data-hint {
+  color: #c5c5c5;
+  letter-spacing: 1px;
+  font-size: 24px;
+  line-height: 1.25;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: inline-block;
+  width: 200px;
+  height: 32px;
+  user-select: none;
+}
+</style>

src/components/LatestWeekYieldOptions.js

@@ -0,0 +1,137 @@
+export const options = {
+  color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
+  legend: {
+    textStyle: {
+      color: "#fff8",
+    },
+    right: 0,
+    itemWidth: 12,
+    itemHeight: 12
+  },
+  tooltip: {},
+  dataset: {
+    source: [],
+  },
+  grid: {
+    top: 56,
+    bottom: 12,
+    left: 10,
+    right: 20,
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    axisLabel: {
+      fontSize: 12,
+      color: "#fff8",
+    },
+    axisTick: {
+      alignWithLabel: true,
+    },
+  },
+  yAxis: {
+    name: "片",
+    nameTextStyle: {
+      color: "#fff8",
+      fontSize: 14,
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: "#fff8",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#fff8",
+      },
+    },
+    minInterval: 1,
+  },
+  series: [
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[1];
+        },
+      },
+    },
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[2];
+        },
+      },
+    },
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[3];
+        },
+      },
+    },
+  ],
+};
+
+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.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/LatestWeekYieldOptions.js

@@ -1,4 +1,5 @@
 export const options = {
+  color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
   legend: {
     textStyle: {
       color: "#fff8",

src/pages/DataPage.vue

@@ -1,8 +1,8 @@
 <!-- 实时数据页面 -->
 <script setup>
 import HourChart from "../components/datapage/HourChart.vue";
-import TeamChartDay from "../components/datapage/TeamChartDay.vue";
-import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
+// import TeamChartDay from "../components/datapage/TeamChartDay.vue";
+// import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
 import LatestWeekYield from '../components/datapage/LatestWeekYield.vue'
 import LineToday from '../components/datapage/LineToday.vue';
 import LineMonth from '../components/datapage/LineMonth.vue';
@@ -20,9 +20,9 @@ import LineMonth from '../components/datapage/LineMonth.vue';
     <!-- 本月生产线情况 -->
     <LineMonth />
     <!-- 本日班组情况 -->
-    <TeamChartDay />
+    <!-- <TeamChartDay /> -->
     <!-- 本月班组情况 -->
-    <TeamChartMonth />
+    <!-- <TeamChartMonth /> -->
   </div>
 </template>
 
@@ -31,10 +31,10 @@ import LineMonth from '../components/datapage/LineMonth.vue';
   flex: 1;
   position: relative;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 24px;
-  padding: 32px;
+  padding: 32px 56px;
   align-items: stretch;
 }
 

src/pages/ThreeDimension.vue

@@ -3,6 +3,7 @@
 import HourChart from "../components/HourChart.vue";
 import TeamChartDay from "../components/TeamChartDay.vue";
 import TeamChartMonth from "../components/TeamChartMonth.vue";
+import LatestWeekYield from '../components/LatestWeekYield.vue'
 import ThreeD from './3D.vue'
 
 const props = defineProps({
@@ -21,8 +22,9 @@ const props = defineProps({
     </div>
     <div class="data-list">
       <HourChart />
-      <TeamChartDay />
-      <TeamChartMonth />
+      <LatestWeekYield />
+      <!-- <TeamChartDay />
+      <TeamChartMonth /> -->
     </div>
   </div>
 </template>
@@ -38,7 +40,7 @@ const props = defineProps({
   width: 480px;
 
   position: absolute;
-  top: 0;
+  top: 24px;
   right: 32px;
   gap: 24px;
   display: flex;