1

src/page/LinePage/Center/CenterDown.tsx

@@ -0,0 +1,21 @@
+import TitleBox from "../Component/TitleBox";
+import LineChart from "./LineChart";
+function CenterDown() {
+  return (
+    <div className="center_down flex-row">
+      <div className="center_down_inner flex-col left-box">
+        <TitleBox title={"center_down_left"} />
+        <span className="alarm_num_title">— 报警总数 —</span>
+        <div className="alarm_num">321,343</div>
+      </div>
+      {/* 产线成品率 */}
+      <div className="center_down_inner flex-col right_box">
+        <TitleBox title={"center_down_right"} />
+        <div className="chart_box">
+          <LineChart />
+        </div>
+      </div>
+    </div>
+  );
+}
+export default CenterDown;

src/page/LinePage/Center/CenterUp.tsx

@@ -0,0 +1,9 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+  return (
+    <div className="center_up">
+      <LinePageBabylon modelPath={`Line1-2`} />
+    </div>
+  );
+}
+export default CenterUp;

src/page/LinePage/Center/LineChart/chart.config.ts

@@ -0,0 +1,102 @@
+import * as echarts from "echarts";
+export default function getOptions() {
+  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,
+      itemHeight: 10,
+      itemGap: 3,
+      height: 10,
+      textStyle: {
+        color: "#DFF1FE",
+        fontSize: 14,
+      },
+    },
+    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(),
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      axisTick: { show: false },
+      axisLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    yAxis: {
+      name: "单位/%",
+      nameTextStyle: {
+        color: "#fff",
+        fontSize: 14,
+      },
+      type: "value",
+      axisLabel: {
+        color: "#fff",
+        fontSize: 14,
+        formatter: "{value}",
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 2,
+          color: "#5982B2",
+        },
+      },
+    },
+    tooltip: {},
+    series: [
+      {
+        name: "产线1",
+        type: "line",
+        data: [20, 32, 10, 34, 90, 30, 20],
+      },
+      {
+        name: "产线2",
+        type: "line",
+        data: [22, 82, 91, 34, 90, 33, 31],
+      },
+      {
+        name: "产线3",
+        type: "line",
+        data: [50, 32, 20, 54, 19, 33, 41],
+      },
+      {
+        name: "产线4",
+        type: "line",
+        data: [30, 32, 30, 34, 90, 33, 32],
+      },
+      {
+        name: "产线5",
+        type: "line",
+        data: [20, 92, 91, 94, 90, 30, 53],
+      },
+    ],
+  };
+}

src/page/LinePage/Center/LineChart/index.tsx

@@ -0,0 +1,6 @@
+import ReactECharts from "echarts-for-react";
+import getOptions from "./chart.config";
+function LineChart() {
+  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
+}
+export default LineChart;

src/page/LinePage/Center/index.tsx

@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+  return (
+    <div className="group_center flex-col">
+      <CenterUp />
+      <CenterDown />
+    </div>
+  );
+}
+export default Center;