line5

2024-08-27 10:48:46 +08:00
parent bbb7de918e
commit 2cb5c7fcd2
26 changed files with 1733 additions and 268 deletions
--- a/src/page/LinePage/Center/CenterDown.tsx
+++ b/src/page/LinePage/Center/CenterDown.tsx
@@ -1,15 +1,54 @@
+import ReactECharts from "echarts-for-react";
 import TitleBox from "../Component/TitleBox";
-import LineChart from "./LineChart";
 import ScrollBoard from "./../../Component/ScrollBoard";
 import SwitchButton from "../Component/SwitchButton";
 import { useState } from "react";
+import getOptions from "./LineChart/chart.config";
+import { useParams } from "react-router-dom";
 function CenterDown() {
-  const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }];
-  const [activeName, setActiveName] = useState<string>(nameList[0].name);
+  const { LineID } = useParams();
+  const lineID = LineID?.toString() || "1-1";
+  console.log(lineID.slice(-1));
+  // 假数据
+  const dataSource = {
+    day: {
+      yData1: [76.1, 77.4, 75.2, 74.1, 78.5, 81.3, 79.2],
+      yData2: [77.2, 78.1, 78.2, 77.1, 79.2, 78.3, 79.5],
+      yData3: [75.1, 74.3, 71.3, 79.8, 82.3, 81.4, 80.3],
+      yData4: [82.4, 83.1, 88.4, 85.3, 87.1, 82.5, 84.9],
+      yData5: [82.3, 81.9, 85.8, 81.9, 84.1, 83.5, 82.3],
+    },
+    week: {
+      yData1: [120, 200, 150, 80, 100, 89, 69],
+      yData2: [100, 150, 120, 70, 90, 97, 89],
+      yData3: [80, 120, 90, 60, 80, 79, 98],
+      yData4: [60, 90, 70, 40, 60, 69, 98],
+      yData5: [40, 60, 50, 20, 40, 89, 99],
+    },
+    month: {
+      yData1: [1200, 2000, 1500, 800, 1000, 999, 889],
+      yData2: [1000, 1500, 1200, 700, 900, 987, 897],
+      yData3: [800, 1200, 900, 600, 800, 962, 759],
+      yData4: [600, 900, 700, 400, 600, 896, 987],
+      yData5: [400, 600, 500, 200, 400, 986, 951],
+    },
+  };
+  const nameList = [
+    { name: "天", ename: "day" },
+    { name: "周", ename: "week" },
+    { name: "月", ename: "month" },
+  ];
+  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
+  let chartData = (dataSource as { [key: string]: any })[activeName];
+  const handleButtonChange = (activeName: string) => {
+    setActiveName(activeName);
+  };
+  const options = getOptions(chartData);
  const config = {
    header: ["序号", "报警时间", "报警编码", "设备状态"],
    headerHeight: 36,
    rowNum: 6,
+    align: ["center", "left", "left", "left"],
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
@@ -32,6 +71,138 @@ function CenterDown() {
      ],
    ],
  };
+  const config1 = {
+    header: ["序号", "报警时间", "报警设备", "报警内容"],
+    headerHeight: 36,
+    rowNum: 6,
+    align: ["center", "left", "left", "left"],
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [80, 137, 137, 137],
+    data: [
+      [
+        "1",
+        "2024/8/28 08:32",
+        "清洗机5_1",
+        "<span style='color:#FF1E1E'>故障</span>",
+      ],
+      [
+        "2",
+        "2024/8/28 06:12",
+        "清洗机5_1",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "3",
+        "2024/8/28 06:05",
+        "磨边机5_2",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "4",
+        "2024/8/28 04:43",
+        "二次镀膜机5_1",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "5",
+        "2024/8/28 02:14",
+        "磨边机5_1",
+        "<span style='color:#FF1E1E'>故障</span>",
+      ],
+      [
+        "6",
+        "2024/8/27 22:54",
+        "磨边机5_2",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "7",
+        "2024/8/27 21:55",
+        "磨边机5_1",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "8",
+        "2024/8/27 21:42",
+        "一次镀膜机5_2",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "9",
+        "2024/8/27 21:37",
+        "磨边机5_1",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+    ],
+  };
+  const config2 = {
+    header: ["序号", "报警时间", "报警设备", "报警内容"],
+    headerHeight: 36,
+    rowNum: 6,
+    align: ["center", "left", "left", "left"],
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [80, 137, 137, 137],
+    data: [
+      [
+        "1",
+        "2024/8/28 07:44",
+        "下片机械手5_1",
+        "<span style='color:#FF1E1E'>故障</span>",
+      ],
+      [
+        "2",
+        "2024/8/28 07:35",
+        "下片机械手5_1",
+        "<span style='color:#FF1E1E'>故障</span>",
+      ],
+      [
+        "3",
+        "2024/8/28 03:23",
+        "在线铺纸机5_1",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "4",
+        "2024/8/28 01:36",
+        "下片机械手5_2",
+        "<span style='color:#FF1E1E'>故障</span>",
+      ],
+      [
+        "5",
+        "2024/8/28 00:38",
+        "钢化炉5",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "6",
+        "2024/8/27 23:58",
+        "下片机械手5_3",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "7",
+        "2024/8/27 23:45",
+        "下片机械手5_2",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "8",
+        "2024/8/27 22:34",
+        "钢化炉5",
+        "<span style='color:#FFB40F'>离线</span>",
+      ],
+      [
+        "9",
+        "2024/8/27 20:31",
+        "在线铺纸机5_1",
+        "<span style='color:#FF1E1E'>故障</span>",
+      ],
+    ],
+  };
  return (
    <div className="center_down flex-row">
      <div className="center_down_inner flex-col left-box">
@@ -40,7 +211,7 @@ function CenterDown() {
        <div className="alarm_num">321,343</div>
        <div style={{ padding: 10, height: "270px" }}>
          <ScrollBoard
-            config={config}
+            config={lineID.slice(-1) === "1" ? config1 : config2}
            style={{ width: "492px", height: "250px" }}
          />
        </div>
@@ -48,16 +219,28 @@ function CenterDown() {
      {/* 产线成品率 */}
      <div className="center_down_inner flex-col right_box">
        <TitleBox title={"center_down_right"} />
-        <div className="left_up_switch">
-          <SwitchButton
-            nameList={nameList}
-            activeName={activeName}
-            setActiveName={setActiveName}
-          />
-        </div>
-        <div className="chart_box">
-          <LineChart />
-        </div>
+        {/* <div className="left_up_switch">
+          <SwitchButton nameList={nameList} onChange={handleButtonChange} />
+        </div> */}
+
+        {options && (
+          <div className="chart_box">
+            {<ReactECharts option={options} style={{ height: "100%" }} />}
+          </div>
+        )}
+        {!options && (
+          <p
+            style={{
+              color: "#cccf",
+              fontSize: "24px",
+              userSelect: "none",
+              textAlign: "center",
+              paddingTop: "72px",
+            }}
+          >
+            暂无数据
+          </p>
+        )}
      </div>
    </div>
  );
--- a/src/page/LinePage/Center/LineChart/chart.config.ts
+++ b/src/page/LinePage/Center/LineChart/chart.config.ts
@@ -1,18 +1,19 @@
-import * as echarts from "echarts";
-export default function getOptions() {
+export default function getOptions(chartData: any) {
+  if (Object.keys(chartData).length === 0) {
+    return null;
+  }
  const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
  return {
    color: colors,
    grid: { top: 38, right: 12, bottom: 26, left: 48 },
    legend: {
      show: true,
-      icon: "roundRect",
      top: 10,
      right: 10,
      padding: 0,
-      itemWidth: 10,
+      itemWidth: 14,
      itemHeight: 10,
-      itemGap: 3,
+      itemGap: 8,
      height: 10,
      textStyle: {
        color: "#DFF1FE",
@@ -21,17 +22,18 @@ export default function getOptions() {
    },
    xAxis: {
      type: "category",
-      data: Array(7)
-        .fill(1)
-        .map((_, index) => {
-          const today = new Date();
-          const dtimestamp =
-            today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
-          return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-            dtimestamp
-          ).getDate()}`;
-        })
-        .reverse(),
+      data: ["8/22", "8/23", "8/24", "8/25", "8/26", "8/27", "8/28"],
+      // data: Array(7)
+      //   .fill(1)
+      //   .map((_, index) => {
+      //     const today = new Date();
+      //     const dtimestamp =
+      //       today.getTime() - (index + 1) * 24 * 60 * 60 * 1000;
+      //     return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+      //       dtimestamp
+      //     ).getDate()}`;
+      //   })
+      //   .reverse(),
      axisLabel: {
        color: "#fff",
        fontSize: 14,
@@ -73,6 +75,7 @@ export default function getOptions() {
    tooltip: {
      trigger: "axis",
      className: "luoyang-chart-tooltip",
+      show: false,
    },
    series: [
      {
@@ -80,35 +83,35 @@ export default function getOptions() {
        type: "line",
        symbol: "circle",
        symbolSize: 4,
-        data: [20, 32, 10, 34, 90, 30, 20],
+        data: chartData.yData1,
      },
      {
        name: "产线2",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
-        data: [22, 82, 91, 34, 90, 33, 31],
+        data: chartData.yData2,
      },
      {
        name: "产线3",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
-        data: [50, 32, 20, 54, 19, 33, 41],
+        data: chartData.yData3,
      },
      {
        name: "产线4",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
-        data: [30, 32, 30, 34, 90, 33, 32],
+        data: chartData.yData4,
      },
      {
        name: "产线5",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
-        data: [20, 92, 91, 94, 90, 30, 53],
+        data: chartData.yData5,
      },
    ],
  };
--- a/src/page/LinePage/Center/LineChart/index.tsx
+++ b/src/page/LinePage/Center/LineChart/index.tsx
@@ -1,6 +0,0 @@
-import ReactECharts from "echarts-for-react";
-import getOptions from "./chart.config";
-function LineChart() {
-  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
-}
-export default LineChart;