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;
--- a/src/page/LinePage/Component/SwitchButton/index.css
+++ b/src/page/LinePage/Component/SwitchButton/index.css
@@ -4,7 +4,7 @@
 .switch-button button {
  color: #fff;
  font-size: 18px;
-  padding: 4px 15px;
+  padding: 4px 10px;
  background-color: rgba(49, 135, 140, 0.3);
  cursor: pointer;
 }
--- a/src/page/LinePage/Component/SwitchButton/index.tsx
+++ b/src/page/LinePage/Component/SwitchButton/index.tsx
@@ -1,23 +1,59 @@
+import { useEffect, useState } from "react";
 import "./index.css";
 interface Name {
  name: string;
+  ename: string;
 }
 interface nameListProps {
  nameList: Name[];
-  activeName: string;
-  setActiveName: (name: string) => void;
+  onChange: (value: string) => void;
+}
+function createActiveNameUpdater(nameList: any, activeName: string) {
+  let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName);
+
+  return function updateActiveName() {
+    activeIndex = (activeIndex + 1) % nameList.length;
+    return nameList[activeIndex].ename;
+  };
 }
 function SwitchButton(props: nameListProps) {
+  const [activeName, setActiveName] = useState(props.nameList[0].ename);
+  const [timerId, setTimerId] = useState<any>(null);
+  let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      let active = updateActiveName();
+      setActiveName(active);
+      props.onChange(active);
+    }, 60000);
+    setTimerId(timer);
+    return () => {
+      if (timerId !== null) {
+        clearInterval(timerId);
+      }
+    };
+  }, [props.nameList.length]);
+  const btnClick = (ename: string) => {
+    if (timerId !== null) {
+      clearInterval(timerId);
+    }
+    setActiveName(ename);
+    props.onChange(ename); // 通知父组件
+    const newTimer = setInterval(() => {
+      let active = updateActiveName();
+      setActiveName(active);
+      props.onChange(active);
+    }, 60000);
+    setTimerId(newTimer);
+  };
  return (
    <div className="switch-button">
      {props.nameList.map((item, index) => {
        return (
          <button
-            key={item.name}
-            className={props.activeName === item.name ? "active" : ""}
-            onClick={() => {
-              props.setActiveName(item.name);
-            }}
+            key={item.ename}
+            className={activeName === item.ename ? "active" : ""}
+            onClick={() => btnClick(item.ename)}
          >
            {item.name}
          </button>
--- a/src/page/LinePage/Component/TitleBox/index.tsx
+++ b/src/page/LinePage/Component/TitleBox/index.tsx
@@ -14,12 +14,12 @@ function TitleBox(props: titleProps) {
      case "left_up":
        return {
          img: Defect,
-          title: "产线缺陷汇总",
+          title: "产线报废汇总",
        };
      case "left_down":
        return {
          img: Record,
-          title: "当前产线缺陷",
+          title: "当前产线报废情况",
        };
      case "center_down_left":
        return {
@@ -39,7 +39,7 @@ function TitleBox(props: titleProps) {
      default:
        return {
          img: InputAndOutput,
-          title: "各产线投入和产出",
+          title: "当前产线投入和产出",
        };
    }
  };
--- a/src/page/LinePage/Left/BarChart/chart.config.ts
+++ b/src/page/LinePage/Left/BarChart/chart.config.ts
@@ -1,15 +1,14 @@
 import * as echarts from "echarts";
-export default function getOptions() {
-  const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
+export default function getOptions(dataProps: number[], color: string[]) {
+  if (dataProps.length === 0) return null;
  return {
-    color: colors,
    grid: { top: 30, right: 12, bottom: 26, left: 48 },
    legend: {
      show: false,
    },
    xAxis: {
      type: "category",
-      data: ["缺陷1", "缺陷2", "缺陷3", "缺陷4", "缺陷5", "缺陷6"],
+      data: ["磨边后", "包装1", "包装2"],
      axisLabel: {
        color: "#fff",
        fontSize: 14,
@@ -55,10 +54,11 @@ export default function getOptions() {
        type: "shadow",
      },
      className: "luoyang-chart-tooltip",
+      show: false,
    },
    series: [
      {
-        data: [120, 200, 150, 80, 70, 110],
+        data: dataProps,
        type: "bar",
        barWidth: 10,
        label: {
@@ -69,8 +69,8 @@ export default function getOptions() {
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#9DD5FF" },
-            { offset: 1, color: "#1295FF" },
+            { offset: 0, color: color[0] },
+            { offset: 1, color: color[1] },
          ]),
        },
      },
--- a/src/page/LinePage/Left/BarChart/index.tsx
+++ b/src/page/LinePage/Left/BarChart/index.tsx
@@ -1,6 +0,0 @@
-import ReactECharts from "echarts-for-react";
-import getOptions from "./chart.config";
-function BarChart() {
-  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
-}
-export default BarChart;
--- a/src/page/LinePage/Left/LeftDown.tsx
+++ b/src/page/LinePage/Left/LeftDown.tsx
@@ -1,15 +1,23 @@
+import ReactECharts from "echarts-for-react";
 import TitleBox from "../Component/TitleBox";
 import SwitchButton from "../Component/SwitchButton";
-import BarChart from "./BarChart";
 import ScrollBoard from "./../../Component/ScrollBoard";
 import { useState } from "react";
+import getOptions from "./BarChart/chart.config";
 function LeftDown() {
-  const nameList = [{ name: "表单" }, { name: "柱状" }];
-  const [activeName, setActiveName] = useState<string>(nameList[0].name);
+  const nameList = [
+    { name: "表单", ename: "table" },
+    { name: "柱状", ename: "chart" },
+  ];
+  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
+  const handleButtonChange = (activeName: string) => {
+    setActiveName(activeName);
+  };
  const config = {
-    header: ["序号", "缺陷种类", "缺陷数量"],
+    header: ["序号", "工序类型", "报废数量"],
    headerHeight: 30,
    rowNum: 4,
+    align: ["center", "left", "left"],
    headerBGC: "rgba(79, 114, 136, 0.3)",
    oddRowBGC: "rgba(79, 114, 136, 0.3)",
    evenRowBGC: "rgba(76, 97, 123, 0.1)",
@@ -27,15 +35,64 @@ function LeftDown() {
      ["行10列1", "行10列2", "行10列3"],
    ],
  };
+  const config1 = {
+    header: ["序号", "工序类型", "报废数量"],
+    headerHeight: 30,
+    rowNum: 4,
+    align: ["center", "left", "left"],
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [73, 117, 190],
+    data: [
+      ["1", "磨边后", 224],
+      ["2", "包装1", 322],
+      ["3", "包装2", 66],
+    ],
+  };
+  const config2 = {
+    header: ["序号", "工序类型", "报废数量"],
+    headerHeight: 30,
+    rowNum: 4,
+    align: ["center", "left", "left"],
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [73, 117, 190],
+    data: [
+      ["1", "磨边后", 1119],
+      ["2", "包装1", 1798],
+      ["3", "包装2", 435],
+    ],
+  };
+  const config3 = {
+    header: ["序号", "工序类型", "报废数量"],
+    headerHeight: 30,
+    rowNum: 4,
+    align: ["center", "left", "left"],
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [73, 117, 190],
+    data: [
+      ["1", "磨边后", 5004],
+      ["2", "包装1", 9122],
+      ["3", "包装2", 1924],
+    ],
+  };
+  const color1 = ["#9DD5FF", "#1295FF"];
+  const color2 = ["#85F6E9", "#2EC6B4"];
+  const dataProps1 = [224, 322, 66];
+  const dataProps2 = [1119, 1798, 435];
+  const dataProps3 = [5004, 9122, 1924];
+  const options1 = getOptions(dataProps1, color1);
+  const options2 = getOptions(dataProps2, color2);
+  const options3 = getOptions(dataProps3, color1);
  return (
    <div className="left_down">
      <TitleBox title={"left_down"} />
      <div className="left_up_switch">
-        <SwitchButton
-          nameList={nameList}
-          activeName={activeName}
-          setActiveName={setActiveName}
-        />
+        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
      <div style={{ padding: "10px", height: "555px" }}>
        <div className="left_down_title flex-row">
@@ -44,13 +101,25 @@ function LeftDown() {
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="left_down_content">
-          {activeName === "表单" ? (
+          {activeName === "table" ? (
            <ScrollBoard
-              config={config}
+              config={config1}
              style={{ width: "380px", height: "150px" }}
            />
+          ) : options1 ? (
+            <ReactECharts option={options1} style={{ height: "100%" }} />
          ) : (
-            <BarChart />
+            <p
+              style={{
+                color: "#cccf",
+                fontSize: "24px",
+                userSelect: "none",
+                textAlign: "center",
+                paddingTop: "72px",
+              }}
+            >
+              暂无数据
+            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
@@ -59,13 +128,25 @@ function LeftDown() {
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="left_down_content">
-          {activeName === "表单" ? (
+          {activeName === "table" ? (
            <ScrollBoard
-              config={config}
+              config={config2}
              style={{ width: "380px", height: "150px" }}
            />
+          ) : options2 ? (
+            <ReactECharts option={options2} style={{ height: "100%" }} />
          ) : (
-            <BarChart />
+            <p
+              style={{
+                color: "#cccf",
+                fontSize: "24px",
+                userSelect: "none",
+                textAlign: "center",
+                paddingTop: "72px",
+              }}
+            >
+              暂无数据
+            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
@@ -74,13 +155,25 @@ function LeftDown() {
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="left_down_content">
-          {activeName === "表单" ? (
+          {activeName === "table" ? (
            <ScrollBoard
-              config={config}
+              config={config3}
              style={{ width: "380px", height: "150px" }}
            />
+          ) : options3 ? (
+            <ReactECharts option={options3} style={{ height: "100%" }} />
          ) : (
-            <BarChart />
+            <p
+              style={{
+                color: "#cccf",
+                fontSize: "24px",
+                userSelect: "none",
+                textAlign: "center",
+                paddingTop: "72px",
+              }}
+            >
+              暂无数据
+            </p>
          )}
        </div>
      </div>
--- a/src/page/LinePage/Left/LeftUp.tsx
+++ b/src/page/LinePage/Left/LeftUp.tsx
@@ -1,23 +1,68 @@
+import ReactECharts from "echarts-for-react";
 import TitleBox from "../Component/TitleBox";
 import SwitchButton from "../Component/SwitchButton";
-import SummaryBarChart from "./SummaryBarChart";
+import getOptions from "./SummaryBarChart/chart.config";
 import { useState } from "react";
 function LeftUp() {
-  const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }];
-  const [activeName, setActiveName] = useState<string>(nameList[0].name);
+  // 假数据
+  const dataSource = {
+    day: {
+      xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
+      yData1: [236, 214, 196, 239, 224],
+      yData2: [346, 296, 327, 311, 322],
+      yData3: [78, 85, 56, 106, 66],
+      sumData: [660, 595, 579, 656, 612],
+    },
+    week: {
+      xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
+      yData1: [1336, 1223, 1313, 1134, 1119],
+      yData2: [2146, 1996, 2053, 1857, 1798],
+      yData3: [892, 658, 467, 758, 435],
+      sumData: [4374, 3877, 3833, 3749, 3352],
+    },
+    month: {
+      xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"],
+      yData1: [5789, 6432, 4679, 5456, 5004],
+      yData2: [8762, 9732, 8137, 8820, 9122],
+      yData3: [2468, 3120, 2782, 2395, 1924],
+      sumData: [17019, 19284, 15598, 16671, 16050],
+    },
+  };
+  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);
  return (
    <div className="left_up">
      <TitleBox title={"left_up"} />
      <div className="left_up_switch">
-        <SwitchButton
-          nameList={nameList}
-          activeName={activeName}
-          setActiveName={setActiveName}
-        />
-      </div>
-      <div className="left_up_chart">
-        <SummaryBarChart />
+        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
+      {options && (
+        <div className="left_up_chart">
+          {<ReactECharts option={options} style={{ height: "100%" }} />}
+        </div>
+      )}
+      {!options && (
+        <p
+          style={{
+            color: "#cccf",
+            fontSize: "24px",
+            userSelect: "none",
+            textAlign: "center",
+            paddingTop: "72px",
+          }}
+        >
+          暂无数据
+        </p>
+      )}
    </div>
  );
 }
--- a/src/page/LinePage/Left/SummaryBarChart/chart.config.ts
+++ b/src/page/LinePage/Left/SummaryBarChart/chart.config.ts
@@ -1,18 +1,21 @@
-import * as echarts from "echarts";
-export default function getOptions() {
-  const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"];
+export default function getOptions(chartData: any) {
+  if (Object.keys(chartData).length === 0) {
+    return null;
+  }
+  const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160"];
+  let sum = chartData.sumData;
  return {
    color: colors,
-    grid: { top: 38, right: 12, bottom: 26, left: 48 },
+    grid: { top: 48, right: 20, bottom: 5, left: 15, containLabel: true },
    legend: {
      show: true,
      icon: "roundRect",
      top: 10,
-      right: 10,
+      right: 20,
      padding: 0,
      itemWidth: 10,
      itemHeight: 10,
-      itemGap: 3,
+      itemGap: 15,
      height: 10,
      textStyle: {
        color: "#DFF1FE",
@@ -21,19 +24,10 @@ export default function getOptions() {
    },
    xAxis: {
      type: "category",
-      // data: Array(7)
-      //   .fill(1)
-      //   .map((_, index) => {
-      //     const today = new Date();
-      //     const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
-      //     return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
-      //       dtimestamp
-      //     ).getDate()}`;
-      //   })
-      //   .reverse(),
+      data: chartData.xData,
      axisLabel: {
        color: "#fff",
-        fontSize: 14,
+        fontSize: 16,
      },
      axisTick: { show: false },
      axisLine: {
@@ -52,7 +46,7 @@ export default function getOptions() {
      type: "value",
      axisLabel: {
        color: "#fff",
-        fontSize: 14,
+        fontSize: 16,
        formatter: "{value}",
      },
      axisLine: {
@@ -70,73 +64,84 @@ export default function getOptions() {
      },
    },
    tooltip: {
+      show: false,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      className: "luoyang-chart-tooltip",
    },
-    dataset: {
-      source: [
-        ["product", "产线1", "产线2", "产线3", "产线4", "产线5"],
-        ["缺陷1", 43, 85, 93, 60, 80],
-        ["缺陷2", 83, 73, 55, 67, 90],
-        ["缺陷3", 86, 65, 82, 68, 90],
-        ["缺陷4", 72, 53, 39, 88, 50],
-        ["缺陷5", 72, 53, 39, 88, 50],
-      ],
-    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [
      {
+        data: chartData.yData1,
        type: "bar",
-        barWidth: 8,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#9DD5FF" },
-            { offset: 1, color: "#1295FF" },
-          ]),
+        stack: "a",
+        name: "磨边后",
+        barWidth: 14,
+        label: {
+          show: true,
+          position: "right",
+          color: "inherit",
        },
      },
      {
+        data: chartData.yData2,
        type: "bar",
-        barWidth: 8,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#FFC844" },
-            { offset: 1, color: "#FFB70C" },
-          ]),
+        stack: "a",
+        name: "包装1",
+        label: {
+          show: true,
+          position: "right",
+          color: "inherit",
        },
      },
      {
+        data: chartData.yData3,
        type: "bar",
-        barWidth: 8,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#FF8BC3" },
-            { offset: 1, color: "#EB46A1" },
-          ]),
+        stack: "a",
+        name: "包装2",
+        label: {
+          show: true,
+          position: "right",
+          color: "inherit",
        },
      },
+      // {
+      //   data: chartData.yData4,
+      //   type: "bar",
+      //   stack: "a",
+      //   name: "镀膜",
+      //   label: {
+      //     show: true,
+      //     position: "right",
+      //     color: "inherit",
+      //   },
+      // },
+      // {
+      //   data: chartData.yData5,
+      //   type: "bar",
+      //   stack: "a",
+      //   name: "包装",
+      //   label: {
+      //     show: true,
+      //     position: "right",
+      //     color: "inherit",
+      //   },
+      // },
      {
+        data: [0, 0, 0, 0, 0],
        type: "bar",
-        barWidth: 8,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#85F6E9" },
-            { offset: 1, color: "#2EC6B4" },
-          ]),
-        },
-      },
-      {
-        type: "bar",
-        barWidth: 8,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: "#9496FF" },
-            { offset: 1, color: "#6567FF" },
-          ]),
+        stack: "a",
+        name: "",
+        label: {
+          show: true,
+          position: "top",
+          color: "#fff",
+          formatter: function (params: any) {
+            return sum[params.dataIndex];
+          },
        },
      },
    ],
--- a/src/page/LinePage/Left/SummaryBarChart/index.tsx
+++ b/src/page/LinePage/Left/SummaryBarChart/index.tsx
@@ -1,6 +0,0 @@
-import ReactECharts from "echarts-for-react";
-import getOptions from "./chart.config";
-function SummaryBarChart() {
-  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
-}
-export default SummaryBarChart;
--- a/src/page/LinePage/Right/LineChart/chart.config.ts
+++ b/src/page/LinePage/Right/LineChart/chart.config.ts
@@ -1,9 +1,12 @@
 import * as echarts from "echarts";
-export default function getOptions() {
+export default function getOptions(tempData: any) {
+  if (Object.keys(tempData).length === 0) {
+    return null;
+  }
  const colors = ["#1A99FF", "#50F4E3"];
  return {
    color: colors,
-    grid: { top: 38, right: 12, bottom: 26, left: 48 },
+    grid: { top: 30, right: 12, bottom: 10, left: 10, containLabel: true },
    legend: {
      show: true,
      icon: "roundRect",
@@ -21,17 +24,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: tempData.time,
+      // 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,
@@ -76,19 +80,20 @@ export default function getOptions() {
        type: "line",
        symbol: "circle",
        symbolSize: 4,
-        data: [20, 32, 10, 34, 90, 30, 20],
+        data: tempData.input,
      },
      {
        name: "产出",
        type: "line",
        symbol: "circle",
        symbolSize: 4,
-        data: [22, 82, 91, 34, 90, 33, 31],
+        data: tempData.output,
      },
    ],
    tooltip: {
      trigger: "axis",
      className: "luoyang-chart-tooltip",
+      show: false,
    },
  };
 }
--- a/src/page/LinePage/Right/LineChart/index.tsx
+++ b/src/page/LinePage/Right/LineChart/index.tsx
@@ -1,6 +0,0 @@
-import ReactECharts from "echarts-for-react";
-import getOptions from "./chart.config";
-function BarChart() {
-  return <ReactECharts option={getOptions()} style={{ height: "100%" }} />;
-}
-export default BarChart;
--- a/src/page/LinePage/Right/RightDown.tsx
+++ b/src/page/LinePage/Right/RightDown.tsx
@@ -1,11 +1,122 @@
+import ReactECharts from "echarts-for-react";
 import TitleBox from "../Component/TitleBox";
 import SwitchButton from "../Component/SwitchButton";
-import LineChart from "./LineChart";
 import ScrollBoard from "./../../Component/ScrollBoard";
 import { useState } from "react";
+import getOptions from "./LineChart/chart.config";
 function RightDown() {
-  const nameList = [{ name: "表单" }, { name: "折线" }];
-  const [activeName, setActiveName] = useState<string>(nameList[0].name);
+  // 假数据
+  let tempData = [
+    {
+      type: "day",
+      data: {
+        time: [
+          "0:00",
+          "1:00",
+          "2:00",
+          "3:00",
+          "4:00",
+          "5:00",
+          "6:00",
+          "7:00",
+          "8:00",
+          "9:00",
+          "10:00",
+          "11:00",
+          "12:00",
+          "13:00",
+          "14:00",
+          "15:00",
+          "16:00",
+          "17:00",
+          "18:00",
+          "19:00",
+          "20:00",
+          "21:00",
+          "22:00",
+          "23:00",
+        ],
+        input: [
+          456, 425, 246, 424, 453, 466, 412, 434, 425, 418, 0, 0, 0, 0, 0, 0, 0,
+          0, 0, 0, 0, 0, 0, 0,
+        ],
+        output: [
+          432, 401, 232, 398, 421, 439, 378, 411, 400, 394, 0, 0, 0, 0, 0, 0, 0,
+          0, 0, 0, 0, 0, 0, 0,
+        ],
+      },
+    },
+    {
+      type: "week",
+      data: {
+        time: [
+          "2024/8/22",
+          "2024/8/23",
+          "2024/8/24",
+          "2024/8/25",
+          "2024/8/26",
+          "2024/8/27",
+          "2024/8/28",
+        ],
+        input: [9753, 10357, 11246, 10123, 9872, 9985, 10352],
+        output: [7925, 8216, 9091, 7847, 7589, 8126, 8112],
+      },
+    },
+    {
+      type: "month",
+      data: {
+        time: [
+          "2024/8/1",
+          "2024/8/2",
+          "2024/8/3",
+          "2024/8/4",
+          "2024/8/5",
+          "2024/8/6",
+          "2024/8/7",
+          "2024/8/8",
+          "2024/8/9",
+          "2024/8/10",
+          "2024/8/11",
+          "2024/8/12",
+          "2024/8/13",
+          "2024/8/14",
+          "2024/8/15",
+          "2024/8/16",
+          "2024/8/17",
+          "2024/8/18",
+          "2024/8/19",
+          "2024/8/20",
+          "2024/8/21",
+          "2024/8/22",
+          "2024/8/23",
+          "2024/8/24",
+          "2024/8/25",
+          "2024/8/26",
+          "2024/8/27",
+          "2024/8/28",
+          "2024/8/29",
+          "2024/8/30",
+          "2024/8/31",
+        ],
+        input: [
+          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9813, 9753,
+          10357, 11246, 10123, 9872, 9985, 10352, 4235, 0, 0, 0,
+        ],
+        output: [
+          0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7883, 7925,
+          8216, 9091, 7847, 7589, 8126, 8112, 3962, 0, 0, 0,
+        ],
+      },
+    },
+  ];
+  const nameList = [
+    { name: "表单", ename: "table" },
+    { name: "折线", ename: "chart" },
+  ];
+  const [activeName, setActiveName] = useState<string>(nameList[0].ename);
+  const handleButtonChange = (activeName: string) => {
+    setActiveName(activeName);
+  };
  const config = {
    header: ["时间", "投入数量", "产出数量"],
    headerHeight: 30,
@@ -27,15 +138,72 @@ function RightDown() {
      ["行10列1", "行10列2", "行10列3"],
    ],
  };
+  const config1 = {
+    header: ["时间", "投入数量", "产出数量"],
+    headerHeight: 30,
+    rowNum: 5,
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [120, 130, 130],
+    data: [],
+  };
+  const config2 = {
+    header: ["时间", "投入数量", "产出数量"],
+    headerHeight: 30,
+    rowNum: 5,
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [120, 130, 130],
+    data: [],
+  };
+  const config3 = {
+    header: ["时间", "投入数量", "产出数量"],
+    headerHeight: 30,
+    rowNum: 5,
+    headerBGC: "rgba(79, 114, 136, 0.3)",
+    oddRowBGC: "rgba(79, 114, 136, 0.3)",
+    evenRowBGC: "rgba(76, 97, 123, 0.1)",
+    columnWidth: [120, 130, 130],
+    data: [],
+  };
+  let data1Lenght = tempData[0].data.input.length;
+  for (let i = 0; i < data1Lenght; i++) {
+    (config1.data as any).push([
+      tempData[0].data.time ? tempData[0].data.time[i] : "-",
+      tempData[0].data.input ? tempData[0].data.input[i] : "-",
+      tempData[0].data.output ? tempData[0].data.output[i] : "-",
+    ]);
+  }
+  let data2Lenght = tempData[1].data.input.length;
+  for (let i = 0; i < data2Lenght; i++) {
+    (config2.data as any).push([
+      tempData[1].data.time ? tempData[1].data.time[i] : "-",
+      tempData[1].data.input ? tempData[1].data.input[i] : "-",
+      tempData[1].data.output ? tempData[1].data.output[i] : "-",
+    ]);
+  }
+  let data3Lenght = tempData[0].data.input.length;
+  for (let i = 0; i < data3Lenght; i++) {
+    (config3.data as any).push([
+      tempData[2].data.time ? tempData[2].data.time[i] : "-",
+      tempData[2].data.input ? tempData[2].data.input[i] : "-",
+      tempData[2].data.output ? tempData[2].data.output[i] : "-",
+    ]);
+  }
+
+  const chartData1 = tempData[0].data;
+  const chartData2 = tempData[1].data;
+  const chartData3 = tempData[2].data;
+  const options1 = getOptions(chartData1);
+  const options2 = getOptions(chartData2);
+  const options3 = getOptions(chartData3);
  return (
    <div className="right_down">
      <TitleBox title={"right_down"} />
      <div className="left_up_switch">
-        <SwitchButton
-          nameList={nameList}
-          activeName={activeName}
-          setActiveName={setActiveName}
-        />
+        <SwitchButton nameList={nameList} onChange={handleButtonChange} />
      </div>
      <div style={{ padding: "10px", height: "628px" }}>
        <div className="left_down_title flex-row">
@@ -44,13 +212,25 @@ function RightDown() {
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="right_down_content">
-          {activeName === "表单" ? (
+          {activeName === "table" ? (
            <ScrollBoard
-              config={config}
+              config={config1}
              style={{ width: "380px", height: "180px" }}
            />
+          ) : options1 ? (
+            <ReactECharts option={options1} style={{ height: "100%" }} />
          ) : (
-            <LineChart />
+            <p
+              style={{
+                color: "#cccf",
+                fontSize: "24px",
+                userSelect: "none",
+                textAlign: "center",
+                paddingTop: "72px",
+              }}
+            >
+              暂无数据
+            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
@@ -59,13 +239,25 @@ function RightDown() {
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="right_down_content">
-          {activeName === "表单" ? (
+          {activeName === "table" ? (
            <ScrollBoard
-              config={config}
+              config={config2}
              style={{ width: "380px", height: "180px" }}
            />
+          ) : options2 ? (
+            <ReactECharts option={options2} style={{ height: "100%" }} />
          ) : (
-            <LineChart />
+            <p
+              style={{
+                color: "#cccf",
+                fontSize: "24px",
+                userSelect: "none",
+                textAlign: "center",
+                paddingTop: "72px",
+              }}
+            >
+              暂无数据
+            </p>
          )}
        </div>
        <div className="left_down_title flex-row">
@@ -74,13 +266,25 @@ function RightDown() {
          <div className="left_down_box2 flex-col" />
        </div>
        <div className="right_down_content">
-          {activeName === "表单" ? (
+          {activeName === "table" ? (
            <ScrollBoard
-              config={config}
+              config={config3}
              style={{ width: "380px", height: "180px" }}
            />
+          ) : options3 ? (
+            <ReactECharts option={options3} style={{ height: "100%" }} />
          ) : (
-            <LineChart />
+            <p
+              style={{
+                color: "#cccf",
+                fontSize: "24px",
+                userSelect: "none",
+                textAlign: "center",
+                paddingTop: "72px",
+              }}
+            >
+              暂无数据
+            </p>
          )}
        </div>
      </div>
--- a/src/page/LinePage/Right/RightUp.tsx
+++ b/src/page/LinePage/Right/RightUp.tsx
@@ -2,24 +2,20 @@ import TitleBox from "../Component/TitleBox";
 import ScrollBoard from "./../../Component/ScrollBoard";
 function RightUp() {
  const config = {
-    header: ["产线", "上片数据量", "成品下片数量", "成品下片"],
+    header: ["序号", "产线", "上片数据量", "成品下片数量"],
    headerHeight: 32,
    rowNum: 5,
+    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: [73, 100, 117, 90],
+    columnWidth: [70, 90, 106, 114],
    data: [
-      ["1", "行1列1", "行1列2", "行1列3"],
-      ["2", "行2列1", "行2列2", "行2列3"],
-      ["3", "行3列1", "行3列2", "行3列3"],
-      ["4", "行4列1", "行4列2", "行4列3"],
-      ["5", "行5列1", "行5列2", "行5列3"],
-      ["6", "行6列1", "行6列2", "行6列3"],
-      ["7", "行7列1", "行7列2", "行7列3"],
-      ["8", "行8列1", "行8列2", "行8列3"],
-      ["9", "行9列1", "行9列2", "行9列3"],
-      ["10", "行10列1", "行10列2", "行10列3"],
+      ["1", "钢1线", "82315", "64268"],
+      ["2", "钢2线", "78246", "61235"],
+      ["3", "钢3线", "79092", "63562"],
+      ["4", "钢4线", "84125", "66789"],
+      ["5", "钢5线", "85223", "68246"],
    ],
  };
  return (
--- a/src/page/LinePage/assets/icon/g.png
+++ b/src/page/LinePage/assets/icon/g.png
--- a/src/page/LinePage/assets/icon/r.png
+++ b/src/page/LinePage/assets/icon/r.png
--- a/src/page/LinePage/assets/icon/y.png
+++ b/src/page/LinePage/assets/icon/y.png
--- a/src/page/LinePage/assets/svg/alarmTip.svg
+++ b/src/page/LinePage/assets/svg/alarmTip.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形备份 16</title>
+    <defs>
+        <rect id="path-1" x="107.233171" y="10.535516" width="8" height="8" rx="4"></rect>
+        <filter x="-75.0%" y="-75.0%" width="250.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
+            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.278431373   0 0 0 0 1   0 0 0 0 0.152941176  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="洛阳" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="洛阳现场看板tc" transform="translate(-1374.233171, -640.985634)">
+            <g id="编组-13" transform="translate(1255.024831, 507.964484)">
+                <g id="矩形备份-16" transform="translate(15.975169, 126.485634)">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#47FF27" fill-rule="evenodd" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/page/LinePage/index.css
+++ b/src/page/LinePage/index.css
@@ -64,6 +64,7 @@
  background: url(../../../public/png/rect/lp_center_up.png) no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
+  position: relative;
 }
 .center_down {
  width: 1041px;
@@ -168,6 +169,7 @@
  height: 185px;
  /* padding-bottom: 5px; */
 }
+/* 滚动表格部分 */
 .dv-scroll-board .header .header-item,
 .dv-scroll-board .rows .ceil {
  border-right: 1px solid #0d1728;
@@ -177,7 +179,7 @@
  border-right: none;
  border: none;
 }
-
+/* chart图部分 */
 .luoyang-chart-tooltip {
  background: #0a2b4f77 !important;
  border: none !important;
@@ -187,3 +189,76 @@
 .luoyang-chart-tooltip * {
  color: #fff !important;
 }
+/* 三维页面部分 */
+.center_up .model_name {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 1000;
+}
+.center_up .model_info {
+  position: absolute;
+  left: 100px;
+  bottom: 0px;
+  z-index: 1000;
+  width: 841px;
+  height: 62px;
+  background: url(/public/png/lp/line_part.png) 100% no-repeat;
+  background-size: 100% 100%;
+}
+.center_up .model_info .reset_btn {
+  position: absolute;
+  top: 20px;
+  left: 40px;
+  width: 140px;
+  height: 40px;
+  cursor: pointer;
+}
+.center_up .model_info .title {
+  display: inline-block;
+  width: 361px;
+  text-align: center;
+  font-size: 32px;
+  color: #fff;
+  letter-spacing: 5px;
+  position: absolute;
+  left: 241px;
+  bottom: 10px;
+}
+.center_up .eq_detail_info {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 1002;
+  width: 240px;
+  height: 110px;
+  background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  padding: 15px 0 0 15px;
+}
+.center_up .eq_detail_info .left_name {
+  display: inline-block;
+  width: 95px;
+  height: 28px;
+  text-align: right;
+  font-size: 18px;
+}
+.center_up .eq_detail_info .right_value {
+  display: inline-block;
+  height: 28px;
+  font-size: 18px;
+}
+.center_up .eq_info {
+  position: absolute;
+  z-index: 1002;
+  background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  padding: 10px 15px;
+}
+.center_up .eq_info .eq_info_inner {
+  height: 20px;
+  font-size: 18px;
+  white-space: nowrap;
+}