update charts

src/components/mainscreen/SumRate.vue

@@ -1,10 +1,152 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
+  const option = {
+    color: ["#F3908B"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "line",
+        data: datalist.map((item) => item * 100),
+        label: {
+          show: true,
+          position: "top",
+          // formatter: (params) => {
+          //   console.log("params", datalist[params.dataIndex]);
+          // },
+          formatter: '{c}%',
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  // lineSumProductYield
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data);
+    }
+  }
+  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);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  // __apply(state.data2.lineSumProductYield);
+  __apply([
+    { name: "钢1线", data: 0.32 },
+    { name: "钢2线", data: 0.91 },
+    { name: "钢3线", data: 0.54 },
+  ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: 0.32 },
+    { name: "钢2线", data: 0.91 },
+    { name: "钢3线", data: 0.54 },
+  ]);
+});
 </script>
 
 <template>
   <Container class="chart" title="累计生产线成品率" icon="cube">
-    <p 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>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>

src/components/mainscreen/SumYield.vue

@@ -3,7 +3,70 @@ import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
-import setupFn from "./TeamChartDayOptions";
+
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
+  console.log("datalist", datalist);
+  const option = {
+    color: ["#3398FB"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线", "合计"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: datalist,
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
 
 const store = useWsStore();
 const chartChart = ref(null);
@@ -15,12 +78,15 @@ 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组") {
+    if (yieldArray[i].name == "钢1线") {
-      result[0] = parseInt(yieldArray[i].yield);
+      result[0] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "B组") {
+    } else if (yieldArray[i].name == "钢2线") {
-      result[1] = parseInt(yieldArray[i].yield);
+      result[1] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "C组") {
+    } else if (yieldArray[i].name == "钢3线") {
-      result[2] = parseInt(yieldArray[i].yield);
+      result[2] = parseInt(yieldArray[i].data);
+    } else {
+      // 合计
+      result[3] = parseInt(yieldArray[i].data);
     }
   }
   return result;
@@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
 /** 有状态，处理数据 */
 function __apply(yieldArray) {
   const d = loadData(yieldArray);
-  // const d = loadData([
-  //   { teamName: "A组", yield: 11 },
-  //   { teamName: "B组", yield: 23 },
-  //   { teamName: "C组", yield: 14 },
-  // ]);
   if (!d) {
     showChartDom.value = false;
     if (chart.value) chart.value.dispose();
@@ -53,12 +114,24 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  __apply(state.data2.classTodayProductYield);
+  // __apply(state.data2.classTodayProductYield);
+  // __apply(state.data2.classTodayProductYield);
+  __apply([
+    { name: "钢1线", data: 11 },
+    { name: "钢2线", data: 22 },
+    { name: "钢3线", data: 33 },
+    { name: "合计", data: 66 },
+  ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  // __apply();
+  __apply([
+    { name: "钢1线", data: 11 },
+    { name: "钢2线", data: 22 },
+    { name: "钢3线", data: 33 },
+    { name: "合计", data: 66 },
+  ]);
 });
 </script>
 

src/components/mainscreen/TeamChartDayOptions.js

@@ -1,59 +0,0 @@
-export const options = {
-  color: ['#a4c9d1', '#72340b', '#ffd601' ],
-  grid: {
-    top: 8,
-    bottom: 20,
-    left: 42,
-    right: 28,
-  },  
-  legend: {
-    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",
-      data: [34, 2, 23],
-      label: {
-        show: true,
-        position: "right",
-        formatter: "{c}%",
-        color: "#fff",
-        fontSize: 16,
-      },
-    },
-  ],
-
-};
-
-export default function setup(echartInstance, dataArr) {
-  const new_options = { ...options };
-  new_options.series[0].data = dataArr;
-  echartInstance.setOption(new_options);
-}

src/components/mainscreen/TodayRate.vue

@@ -1,10 +1,152 @@
 <script setup>
 import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0]) => {
+  const option = {
+    color: ["#F3908B"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "line",
+        data: datalist.map((item) => item * 100),
+        label: {
+          show: true,
+          position: "top",
+          // formatter: (params) => {
+          //   console.log("params", datalist[params.dataIndex]);
+          // },
+          formatter: '{c}%',
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  // lineTodayProductYield
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data);
+    }
+  }
+  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);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  // __apply(state.data2.classTodayProductYield);
+  __apply([
+    { name: "钢1线", data: 0.32 },
+    { name: "钢2线", data: 0.91 },
+    { name: "钢3线", data: 0.54 },
+  ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: 0.32 },
+    { name: "钢2线", data: 0.91 },
+    { name: "钢3线", data: 0.54 },
+  ]);
+});
 </script>
 
 <template>
   <Container class="chart" title="今日生产线成品率" icon="cube">
-    <p 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>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>

src/components/mainscreen/TodayYield.vue

@@ -3,7 +3,69 @@ import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";
-import setupFn from "./TeamChartDayOptions";
+
+const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
+  console.log("datalist", datalist);
+  const option = {
+    color: ["#3398FB"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线", "合计"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: datalist,
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
 
 const store = useWsStore();
 const chartChart = ref(null);
@@ -12,15 +74,19 @@ const showChartDom = ref(false);
 
 /** 无状态，处理数据 */
 function loadData(yieldArray) {
+  // lineTodayProductData
   const result = [];
   if (yieldArray == undefined || yieldArray?.length == 0) return null;
   for (let i = 0; i < yieldArray.length; ++i) {
-    if (yieldArray[i].teamName == "A组") {
+    if (yieldArray[i].name == "钢1线") {
-      result[0] = parseInt(yieldArray[i].yield);
+      result[0] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "B组") {
+    } else if (yieldArray[i].name == "钢2线") {
-      result[1] = parseInt(yieldArray[i].yield);
+      result[1] = parseInt(yieldArray[i].data);
-    } else if (yieldArray[i].teamName == "C组") {
+    } else if (yieldArray[i].name == "钢3线") {
-      result[2] = parseInt(yieldArray[i].yield);
+      result[2] = parseInt(yieldArray[i].data);
+    } else {
+      // 合计
+      result[3] = parseInt(yieldArray[i].data);
     }
   }
   return result;
@@ -37,11 +103,6 @@ function setupChart(chart, dom, data) {
 /** 有状态，处理数据 */
 function __apply(yieldArray) {
   const d = loadData(yieldArray);
-  // const d = loadData([
-  //   { teamName: "A组", yield: 11 },
-  //   { teamName: "B组", yield: 23 },
-  //   { teamName: "C组", yield: 14 },
-  // ]);
   if (!d) {
     showChartDom.value = false;
     if (chart.value) chart.value.dispose();
@@ -53,12 +114,23 @@ function __apply(yieldArray) {
 
 // 订阅
 store.$subscribe((mutation, state) => {
-  __apply(state.data2.classTodayProductYield);
+  // __apply(state.data2.classTodayProductYield);
+  __apply([
+    { name: "钢1线", data: 11 },
+    { name: "钢2线", data: 22 },
+    { name: "钢3线", data: 33 },
+    { name: "合计", data: 66 },
+  ]);
 });
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
-  // __apply();
+  __apply([
+    { name: "钢1线", data: 11 },
+    { name: "钢2线", data: 22 },
+    { name: "钢3线", data: 33 },
+    { name: "合计", data: 66 },
+  ]);
 });
 </script>