+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage1-2/Center/CenterUp.tsx b/src/page/LinePage1-2/Center/CenterUp.tsx
new file mode 100644
index 0000000..5ddf6e2
--- /dev/null
+++ b/src/page/LinePage1-2/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "1-2";
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage1-2/Center/index.tsx b/src/page/LinePage1-2/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage1-2/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage1-2/Component/SwitchButton/index.css b/src/page/LinePage1-2/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage1-2/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage1-2/Component/SwitchButton/index.tsx b/src/page/LinePage1-2/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage1-2/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage1-2/Component/TitleBox/index.css b/src/page/LinePage1-2/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage1-2/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage1-2/Component/TitleBox/index.tsx b/src/page/LinePage1-2/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage1-2/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+ .img})
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage1-2/Left/LeftDown.tsx b/src/page/LinePage1-2/Left/LeftDown.tsx
new file mode 100644
index 0000000..9100416
--- /dev/null
+++ b/src/page/LinePage1-2/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine1After} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine1After);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage1-2/Left/LeftUp.tsx b/src/page/LinePage1-2/Left/LeftUp.tsx
new file mode 100644
index 0000000..ac007f7
--- /dev/null
+++ b/src/page/LinePage1-2/Left/LeftUp.tsx
@@ -0,0 +1,229 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine1After} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine1After);
+ console.log('页面数据1-1：',data)
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage1-2/Left/index.tsx b/src/page/LinePage1-2/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage1-2/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage1-2/Right/RightDown.tsx b/src/page/LinePage1-2/Right/RightDown.tsx
new file mode 100644
index 0000000..d2c51c8
--- /dev/null
+++ b/src/page/LinePage1-2/Right/RightDown.tsx
@@ -0,0 +1,273 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine1After} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine1After);
+ // console.log('页面数据：',data)
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage1-2/Right/RightUp.tsx b/src/page/LinePage1-2/Right/RightUp.tsx
new file mode 100644
index 0000000..c01c7be
--- /dev/null
+++ b/src/page/LinePage1-2/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine1After} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine1After);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage1-2/Right/index.tsx b/src/page/LinePage1-2/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage1-2/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage1-2/TopP.tsx b/src/page/LinePage1-2/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage1-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage1-2/assets/icon/alarm.png b/src/page/LinePage1-2/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/alarm.png differ
diff --git a/src/page/LinePage1-2/assets/icon/defect.png b/src/page/LinePage1-2/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/defect.png differ
diff --git a/src/page/LinePage1-2/assets/icon/finished.png b/src/page/LinePage1-2/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/finished.png differ
diff --git a/src/page/LinePage1-2/assets/icon/g.png b/src/page/LinePage1-2/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/g.png differ
diff --git a/src/page/LinePage1-2/assets/icon/inputAndOutput.png b/src/page/LinePage1-2/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage1-2/assets/icon/num.png b/src/page/LinePage1-2/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/num.png differ
diff --git a/src/page/LinePage1-2/assets/icon/r.png b/src/page/LinePage1-2/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/r.png differ
diff --git a/src/page/LinePage1-2/assets/icon/record.png b/src/page/LinePage1-2/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/record.png differ
diff --git a/src/page/LinePage1-2/assets/icon/y.png b/src/page/LinePage1-2/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage1-2/assets/icon/y.png differ
diff --git a/src/page/LinePage1-2/index.css b/src/page/LinePage1-2/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage1-2/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage1-2/index.tsx b/src/page/LinePage1-2/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage1-2/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage2-1/Center/CenterUp.tsx b/src/page/LinePage2-1/Center/CenterUp.tsx
new file mode 100644
index 0000000..4fe5cdd
--- /dev/null
+++ b/src/page/LinePage2-1/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "2-1"
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage2-1/Center/index.tsx b/src/page/LinePage2-1/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage2-1/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage2-1/Component/SwitchButton/index.css b/src/page/LinePage2-1/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage2-1/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage2-1/Component/SwitchButton/index.tsx b/src/page/LinePage2-1/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage2-1/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage2-1/Component/TitleBox/index.css b/src/page/LinePage2-1/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage2-1/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage2-1/Component/TitleBox/index.tsx b/src/page/LinePage2-1/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage2-1/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage2-1/Left/LeftDown.tsx b/src/page/LinePage2-1/Left/LeftDown.tsx
new file mode 100644
index 0000000..f829d78
--- /dev/null
+++ b/src/page/LinePage2-1/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2Before} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine2Before);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage2-1/Left/LeftUp.tsx b/src/page/LinePage2-1/Left/LeftUp.tsx
new file mode 100644
index 0000000..19a3904
--- /dev/null
+++ b/src/page/LinePage2-1/Left/LeftUp.tsx
@@ -0,0 +1,228 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2Before} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine2Before);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage2-1/Left/index.tsx b/src/page/LinePage2-1/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage2-1/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage2-1/Right/RightDown.tsx b/src/page/LinePage2-1/Right/RightDown.tsx
new file mode 100644
index 0000000..c46ef93
--- /dev/null
+++ b/src/page/LinePage2-1/Right/RightDown.tsx
@@ -0,0 +1,273 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2Before} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine2Before);
+ // console.log('页面数据：',data)
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage2-1/Right/RightUp.tsx b/src/page/LinePage2-1/Right/RightUp.tsx
new file mode 100644
index 0000000..d3c4b67
--- /dev/null
+++ b/src/page/LinePage2-1/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2Before} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine2Before);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage2-1/Right/index.tsx b/src/page/LinePage2-1/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage2-1/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage2-1/TopP.tsx b/src/page/LinePage2-1/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage2-1/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage2-1/assets/icon/alarm.png b/src/page/LinePage2-1/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/alarm.png differ
diff --git a/src/page/LinePage2-1/assets/icon/defect.png b/src/page/LinePage2-1/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/defect.png differ
diff --git a/src/page/LinePage2-1/assets/icon/finished.png b/src/page/LinePage2-1/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/finished.png differ
diff --git a/src/page/LinePage2-1/assets/icon/g.png b/src/page/LinePage2-1/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/g.png differ
diff --git a/src/page/LinePage2-1/assets/icon/inputAndOutput.png b/src/page/LinePage2-1/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage2-1/assets/icon/num.png b/src/page/LinePage2-1/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/num.png differ
diff --git a/src/page/LinePage2-1/assets/icon/r.png b/src/page/LinePage2-1/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/r.png differ
diff --git a/src/page/LinePage2-1/assets/icon/record.png b/src/page/LinePage2-1/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/record.png differ
diff --git a/src/page/LinePage2-1/assets/icon/y.png b/src/page/LinePage2-1/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage2-1/assets/icon/y.png differ
diff --git a/src/page/LinePage2-1/index.css b/src/page/LinePage2-1/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage2-1/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage2-1/index.tsx b/src/page/LinePage2-1/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage2-1/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage2-2/Center/CenterUp.tsx b/src/page/LinePage2-2/Center/CenterUp.tsx
new file mode 100644
index 0000000..2dd19f2
--- /dev/null
+++ b/src/page/LinePage2-2/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "2-2";
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage2-2/Center/index.tsx b/src/page/LinePage2-2/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage2-2/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage2-2/Component/SwitchButton/index.css b/src/page/LinePage2-2/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage2-2/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage2-2/Component/SwitchButton/index.tsx b/src/page/LinePage2-2/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage2-2/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage2-2/Component/TitleBox/index.css b/src/page/LinePage2-2/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage2-2/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage2-2/Component/TitleBox/index.tsx b/src/page/LinePage2-2/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage2-2/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage2-2/Left/LeftDown.tsx b/src/page/LinePage2-2/Left/LeftDown.tsx
new file mode 100644
index 0000000..e7e83d8
--- /dev/null
+++ b/src/page/LinePage2-2/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2After} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine2After);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage2-2/Left/LeftUp.tsx b/src/page/LinePage2-2/Left/LeftUp.tsx
new file mode 100644
index 0000000..e172b49
--- /dev/null
+++ b/src/page/LinePage2-2/Left/LeftUp.tsx
@@ -0,0 +1,228 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2After} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine2After);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage2-2/Left/index.tsx b/src/page/LinePage2-2/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage2-2/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage2-2/Right/RightDown.tsx b/src/page/LinePage2-2/Right/RightDown.tsx
new file mode 100644
index 0000000..48064ca
--- /dev/null
+++ b/src/page/LinePage2-2/Right/RightDown.tsx
@@ -0,0 +1,273 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2After} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine2After);
+ // console.log('页面数据：',data)
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage2-2/Right/RightUp.tsx b/src/page/LinePage2-2/Right/RightUp.tsx
new file mode 100644
index 0000000..8265b0c
--- /dev/null
+++ b/src/page/LinePage2-2/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2After} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine2After);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage2-2/Right/index.tsx b/src/page/LinePage2-2/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage2-2/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage2-2/TopP.tsx b/src/page/LinePage2-2/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage2-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage2-2/assets/icon/alarm.png b/src/page/LinePage2-2/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/alarm.png differ
diff --git a/src/page/LinePage2-2/assets/icon/defect.png b/src/page/LinePage2-2/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/defect.png differ
diff --git a/src/page/LinePage2-2/assets/icon/finished.png b/src/page/LinePage2-2/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/finished.png differ
diff --git a/src/page/LinePage2-2/assets/icon/g.png b/src/page/LinePage2-2/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/g.png differ
diff --git a/src/page/LinePage2-2/assets/icon/inputAndOutput.png b/src/page/LinePage2-2/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage2-2/assets/icon/num.png b/src/page/LinePage2-2/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/num.png differ
diff --git a/src/page/LinePage2-2/assets/icon/r.png b/src/page/LinePage2-2/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/r.png differ
diff --git a/src/page/LinePage2-2/assets/icon/record.png b/src/page/LinePage2-2/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/record.png differ
diff --git a/src/page/LinePage2-2/assets/icon/y.png b/src/page/LinePage2-2/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage2-2/assets/icon/y.png differ
diff --git a/src/page/LinePage2-2/index.css b/src/page/LinePage2-2/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage2-2/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage2-2/index.tsx b/src/page/LinePage2-2/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage2-2/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage3-1/Center/CenterUp.tsx b/src/page/LinePage3-1/Center/CenterUp.tsx
new file mode 100644
index 0000000..933f33d
--- /dev/null
+++ b/src/page/LinePage3-1/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "3-1"
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage3-1/Center/index.tsx b/src/page/LinePage3-1/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage3-1/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage3-1/Component/SwitchButton/index.css b/src/page/LinePage3-1/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage3-1/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage3-1/Component/SwitchButton/index.tsx b/src/page/LinePage3-1/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage3-1/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage3-1/Component/TitleBox/index.css b/src/page/LinePage3-1/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage3-1/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage3-1/Component/TitleBox/index.tsx b/src/page/LinePage3-1/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage3-1/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage3-1/Left/LeftDown.tsx b/src/page/LinePage3-1/Left/LeftDown.tsx
new file mode 100644
index 0000000..bae9c71
--- /dev/null
+++ b/src/page/LinePage3-1/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3Before} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine3Before);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage3-1/Left/LeftUp.tsx b/src/page/LinePage3-1/Left/LeftUp.tsx
new file mode 100644
index 0000000..c7841fb
--- /dev/null
+++ b/src/page/LinePage3-1/Left/LeftUp.tsx
@@ -0,0 +1,229 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3Before} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine3Before);
+ console.log('页面数据1-1：',data)
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage3-1/Left/index.tsx b/src/page/LinePage3-1/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage3-1/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage3-1/Right/RightDown.tsx b/src/page/LinePage3-1/Right/RightDown.tsx
new file mode 100644
index 0000000..61de04b
--- /dev/null
+++ b/src/page/LinePage3-1/Right/RightDown.tsx
@@ -0,0 +1,272 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3Before} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine3Before);
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage3-1/Right/RightUp.tsx b/src/page/LinePage3-1/Right/RightUp.tsx
new file mode 100644
index 0000000..ee87241
--- /dev/null
+++ b/src/page/LinePage3-1/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3Before} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine3Before);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage3-1/Right/index.tsx b/src/page/LinePage3-1/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage3-1/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage3-1/TopP.tsx b/src/page/LinePage3-1/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage3-1/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage3-1/assets/icon/alarm.png b/src/page/LinePage3-1/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/alarm.png differ
diff --git a/src/page/LinePage3-1/assets/icon/defect.png b/src/page/LinePage3-1/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/defect.png differ
diff --git a/src/page/LinePage3-1/assets/icon/finished.png b/src/page/LinePage3-1/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/finished.png differ
diff --git a/src/page/LinePage3-1/assets/icon/g.png b/src/page/LinePage3-1/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/g.png differ
diff --git a/src/page/LinePage3-1/assets/icon/inputAndOutput.png b/src/page/LinePage3-1/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage3-1/assets/icon/num.png b/src/page/LinePage3-1/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/num.png differ
diff --git a/src/page/LinePage3-1/assets/icon/r.png b/src/page/LinePage3-1/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/r.png differ
diff --git a/src/page/LinePage3-1/assets/icon/record.png b/src/page/LinePage3-1/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/record.png differ
diff --git a/src/page/LinePage3-1/assets/icon/y.png b/src/page/LinePage3-1/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage3-1/assets/icon/y.png differ
diff --git a/src/page/LinePage3-1/index.css b/src/page/LinePage3-1/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage3-1/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage3-1/index.tsx b/src/page/LinePage3-1/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage3-1/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage3-2/Center/CenterUp.tsx b/src/page/LinePage3-2/Center/CenterUp.tsx
new file mode 100644
index 0000000..19a9b5e
--- /dev/null
+++ b/src/page/LinePage3-2/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "3-2";
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage3-2/Center/index.tsx b/src/page/LinePage3-2/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage3-2/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage3-2/Component/SwitchButton/index.css b/src/page/LinePage3-2/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage3-2/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage3-2/Component/SwitchButton/index.tsx b/src/page/LinePage3-2/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage3-2/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage3-2/Component/TitleBox/index.css b/src/page/LinePage3-2/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage3-2/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage3-2/Component/TitleBox/index.tsx b/src/page/LinePage3-2/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage3-2/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage3-2/Left/LeftDown.tsx b/src/page/LinePage3-2/Left/LeftDown.tsx
new file mode 100644
index 0000000..d5f6169
--- /dev/null
+++ b/src/page/LinePage3-2/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3After} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine3After);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage3-2/Left/LeftUp.tsx b/src/page/LinePage3-2/Left/LeftUp.tsx
new file mode 100644
index 0000000..9090a2d
--- /dev/null
+++ b/src/page/LinePage3-2/Left/LeftUp.tsx
@@ -0,0 +1,229 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3After} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine3After);
+ console.log('页面数据1-1：',data)
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage3-2/Left/index.tsx b/src/page/LinePage3-2/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage3-2/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage3-2/Right/RightDown.tsx b/src/page/LinePage3-2/Right/RightDown.tsx
new file mode 100644
index 0000000..e2991c1
--- /dev/null
+++ b/src/page/LinePage3-2/Right/RightDown.tsx
@@ -0,0 +1,273 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3After} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine3After);
+ // console.log('页面数据：',data)
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage3-2/Right/RightUp.tsx b/src/page/LinePage3-2/Right/RightUp.tsx
new file mode 100644
index 0000000..8bb8eae
--- /dev/null
+++ b/src/page/LinePage3-2/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3After} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine3After);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage3-2/Right/index.tsx b/src/page/LinePage3-2/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage3-2/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage3-2/TopP.tsx b/src/page/LinePage3-2/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage3-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage3-2/assets/icon/alarm.png b/src/page/LinePage3-2/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/alarm.png differ
diff --git a/src/page/LinePage3-2/assets/icon/defect.png b/src/page/LinePage3-2/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/defect.png differ
diff --git a/src/page/LinePage3-2/assets/icon/finished.png b/src/page/LinePage3-2/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/finished.png differ
diff --git a/src/page/LinePage3-2/assets/icon/g.png b/src/page/LinePage3-2/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/g.png differ
diff --git a/src/page/LinePage3-2/assets/icon/inputAndOutput.png b/src/page/LinePage3-2/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage3-2/assets/icon/num.png b/src/page/LinePage3-2/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/num.png differ
diff --git a/src/page/LinePage3-2/assets/icon/r.png b/src/page/LinePage3-2/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/r.png differ
diff --git a/src/page/LinePage3-2/assets/icon/record.png b/src/page/LinePage3-2/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/record.png differ
diff --git a/src/page/LinePage3-2/assets/icon/y.png b/src/page/LinePage3-2/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage3-2/assets/icon/y.png differ
diff --git a/src/page/LinePage3-2/index.css b/src/page/LinePage3-2/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage3-2/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage3-2/index.tsx b/src/page/LinePage3-2/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage3-2/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage4-1/Center/CenterUp.tsx b/src/page/LinePage4-1/Center/CenterUp.tsx
new file mode 100644
index 0000000..9bc4128
--- /dev/null
+++ b/src/page/LinePage4-1/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "4-1"
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage4-1/Center/index.tsx b/src/page/LinePage4-1/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage4-1/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage4-1/Component/SwitchButton/index.css b/src/page/LinePage4-1/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage4-1/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage4-1/Component/SwitchButton/index.tsx b/src/page/LinePage4-1/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage4-1/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage4-1/Component/TitleBox/index.css b/src/page/LinePage4-1/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage4-1/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage4-1/Component/TitleBox/index.tsx b/src/page/LinePage4-1/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage4-1/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage4-1/Left/LeftDown.tsx b/src/page/LinePage4-1/Left/LeftDown.tsx
new file mode 100644
index 0000000..94e3368
--- /dev/null
+++ b/src/page/LinePage4-1/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4Before} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine4Before);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage4-1/Left/LeftUp.tsx b/src/page/LinePage4-1/Left/LeftUp.tsx
new file mode 100644
index 0000000..7705eff
--- /dev/null
+++ b/src/page/LinePage4-1/Left/LeftUp.tsx
@@ -0,0 +1,228 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4Before} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine4Before);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage4-1/Left/index.tsx b/src/page/LinePage4-1/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage4-1/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage4-1/Right/RightDown.tsx b/src/page/LinePage4-1/Right/RightDown.tsx
new file mode 100644
index 0000000..733ebff
--- /dev/null
+++ b/src/page/LinePage4-1/Right/RightDown.tsx
@@ -0,0 +1,273 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4Before} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine4Before);
+ // console.log('页面数据：',data)
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage4-1/Right/RightUp.tsx b/src/page/LinePage4-1/Right/RightUp.tsx
new file mode 100644
index 0000000..7ef32e7
--- /dev/null
+++ b/src/page/LinePage4-1/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4Before} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine4Before);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage4-1/Right/index.tsx b/src/page/LinePage4-1/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage4-1/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage4-1/TopP.tsx b/src/page/LinePage4-1/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage4-1/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage4-1/assets/icon/alarm.png b/src/page/LinePage4-1/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/alarm.png differ
diff --git a/src/page/LinePage4-1/assets/icon/defect.png b/src/page/LinePage4-1/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/defect.png differ
diff --git a/src/page/LinePage4-1/assets/icon/finished.png b/src/page/LinePage4-1/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/finished.png differ
diff --git a/src/page/LinePage4-1/assets/icon/g.png b/src/page/LinePage4-1/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/g.png differ
diff --git a/src/page/LinePage4-1/assets/icon/inputAndOutput.png b/src/page/LinePage4-1/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage4-1/assets/icon/num.png b/src/page/LinePage4-1/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/num.png differ
diff --git a/src/page/LinePage4-1/assets/icon/r.png b/src/page/LinePage4-1/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/r.png differ
diff --git a/src/page/LinePage4-1/assets/icon/record.png b/src/page/LinePage4-1/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/record.png differ
diff --git a/src/page/LinePage4-1/assets/icon/y.png b/src/page/LinePage4-1/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage4-1/assets/icon/y.png differ
diff --git a/src/page/LinePage4-1/index.css b/src/page/LinePage4-1/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage4-1/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage4-1/index.tsx b/src/page/LinePage4-1/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage4-1/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage4-2/Center/CenterUp.tsx b/src/page/LinePage4-2/Center/CenterUp.tsx
new file mode 100644
index 0000000..eab4e77
--- /dev/null
+++ b/src/page/LinePage4-2/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "4-2";
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage4-2/Center/index.tsx b/src/page/LinePage4-2/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage4-2/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage4-2/Component/SwitchButton/index.css b/src/page/LinePage4-2/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage4-2/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage4-2/Component/SwitchButton/index.tsx b/src/page/LinePage4-2/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage4-2/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage4-2/Component/TitleBox/index.css b/src/page/LinePage4-2/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage4-2/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage4-2/Component/TitleBox/index.tsx b/src/page/LinePage4-2/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage4-2/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage4-2/Left/LeftDown.tsx b/src/page/LinePage4-2/Left/LeftDown.tsx
new file mode 100644
index 0000000..ad3c553
--- /dev/null
+++ b/src/page/LinePage4-2/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4After} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine4After);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage4-2/Left/LeftUp.tsx b/src/page/LinePage4-2/Left/LeftUp.tsx
new file mode 100644
index 0000000..54473c3
--- /dev/null
+++ b/src/page/LinePage4-2/Left/LeftUp.tsx
@@ -0,0 +1,229 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4After} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine4After);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage4-2/Left/index.tsx b/src/page/LinePage4-2/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage4-2/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage4-2/Right/RightDown.tsx b/src/page/LinePage4-2/Right/RightDown.tsx
new file mode 100644
index 0000000..45afc20
--- /dev/null
+++ b/src/page/LinePage4-2/Right/RightDown.tsx
@@ -0,0 +1,273 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4After} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine4After);
+ // console.log('页面数据：',data)
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage4-2/Right/RightUp.tsx b/src/page/LinePage4-2/Right/RightUp.tsx
new file mode 100644
index 0000000..a13347c
--- /dev/null
+++ b/src/page/LinePage4-2/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4After} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine4After);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage4-2/Right/index.tsx b/src/page/LinePage4-2/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage4-2/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage4-2/TopP.tsx b/src/page/LinePage4-2/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage4-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage4-2/assets/icon/alarm.png b/src/page/LinePage4-2/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/alarm.png differ
diff --git a/src/page/LinePage4-2/assets/icon/defect.png b/src/page/LinePage4-2/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/defect.png differ
diff --git a/src/page/LinePage4-2/assets/icon/finished.png b/src/page/LinePage4-2/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/finished.png differ
diff --git a/src/page/LinePage4-2/assets/icon/g.png b/src/page/LinePage4-2/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/g.png differ
diff --git a/src/page/LinePage4-2/assets/icon/inputAndOutput.png b/src/page/LinePage4-2/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage4-2/assets/icon/num.png b/src/page/LinePage4-2/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/num.png differ
diff --git a/src/page/LinePage4-2/assets/icon/r.png b/src/page/LinePage4-2/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/r.png differ
diff --git a/src/page/LinePage4-2/assets/icon/record.png b/src/page/LinePage4-2/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/record.png differ
diff --git a/src/page/LinePage4-2/assets/icon/y.png b/src/page/LinePage4-2/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage4-2/assets/icon/y.png differ
diff --git a/src/page/LinePage4-2/index.css b/src/page/LinePage4-2/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage4-2/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage4-2/index.tsx b/src/page/LinePage4-2/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage4-2/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage5-1/Center/CenterUp.tsx b/src/page/LinePage5-1/Center/CenterUp.tsx
new file mode 100644
index 0000000..08dd7b9
--- /dev/null
+++ b/src/page/LinePage5-1/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "5-1"
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage5-1/Center/index.tsx b/src/page/LinePage5-1/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage5-1/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage5-1/Component/SwitchButton/index.css b/src/page/LinePage5-1/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage5-1/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage5-1/Component/SwitchButton/index.tsx b/src/page/LinePage5-1/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage5-1/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage5-1/Component/TitleBox/index.css b/src/page/LinePage5-1/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage5-1/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage5-1/Component/TitleBox/index.tsx b/src/page/LinePage5-1/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage5-1/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage5-1/Left/LeftDown.tsx b/src/page/LinePage5-1/Left/LeftDown.tsx
new file mode 100644
index 0000000..a12ee94
--- /dev/null
+++ b/src/page/LinePage5-1/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5Before} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine5Before);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage5-1/Left/LeftUp.tsx b/src/page/LinePage5-1/Left/LeftUp.tsx
new file mode 100644
index 0000000..0365d02
--- /dev/null
+++ b/src/page/LinePage5-1/Left/LeftUp.tsx
@@ -0,0 +1,228 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5Before} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine5Before);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage5-1/Left/index.tsx b/src/page/LinePage5-1/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage5-1/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage5-1/Right/RightDown.tsx b/src/page/LinePage5-1/Right/RightDown.tsx
new file mode 100644
index 0000000..8c365f0
--- /dev/null
+++ b/src/page/LinePage5-1/Right/RightDown.tsx
@@ -0,0 +1,273 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5Before} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine5Before);
+ // console.log('页面数据：',data)
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage5-1/Right/RightUp.tsx b/src/page/LinePage5-1/Right/RightUp.tsx
new file mode 100644
index 0000000..c55103e
--- /dev/null
+++ b/src/page/LinePage5-1/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5Before} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine5Before);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage5-1/Right/index.tsx b/src/page/LinePage5-1/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage5-1/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage5-1/TopP.tsx b/src/page/LinePage5-1/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage5-1/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage5-1/assets/icon/alarm.png b/src/page/LinePage5-1/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/alarm.png differ
diff --git a/src/page/LinePage5-1/assets/icon/defect.png b/src/page/LinePage5-1/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/defect.png differ
diff --git a/src/page/LinePage5-1/assets/icon/finished.png b/src/page/LinePage5-1/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/finished.png differ
diff --git a/src/page/LinePage5-1/assets/icon/g.png b/src/page/LinePage5-1/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/g.png differ
diff --git a/src/page/LinePage5-1/assets/icon/inputAndOutput.png b/src/page/LinePage5-1/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage5-1/assets/icon/num.png b/src/page/LinePage5-1/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/num.png differ
diff --git a/src/page/LinePage5-1/assets/icon/r.png b/src/page/LinePage5-1/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/r.png differ
diff --git a/src/page/LinePage5-1/assets/icon/record.png b/src/page/LinePage5-1/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/record.png differ
diff --git a/src/page/LinePage5-1/assets/icon/y.png b/src/page/LinePage5-1/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage5-1/assets/icon/y.png differ
diff --git a/src/page/LinePage5-1/index.css b/src/page/LinePage5-1/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage5-1/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage5-1/index.tsx b/src/page/LinePage5-1/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage5-1/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+export default CenterDown;
diff --git a/src/page/LinePage5-2/Center/CenterUp.tsx b/src/page/LinePage5-2/Center/CenterUp.tsx
new file mode 100644
index 0000000..d800861
--- /dev/null
+++ b/src/page/LinePage5-2/Center/CenterUp.tsx
@@ -0,0 +1,10 @@
+import LinePageBabylon from "../../../babylonjs/LinePageBabylon";
+function CenterUp() {
+ const lineID = "5-2";
+ return (
+
+
+ {/* 产线成品率 */}
+ {sumAlarm}
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+
+
+ {chartData.xData.length>0 && (
+
+ {
+ )}
+ {chartData.xData.length==0 && (
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default CenterUp;
diff --git a/src/page/LinePage5-2/Center/index.tsx b/src/page/LinePage5-2/Center/index.tsx
new file mode 100644
index 0000000..14d5036
--- /dev/null
+++ b/src/page/LinePage5-2/Center/index.tsx
@@ -0,0 +1,12 @@
+import CenterDown from "./CenterDown";
+import CenterUp from "./CenterUp";
+
+function Center() {
+ return (
+
+
+ );
+}
+export default Center;
diff --git a/src/page/LinePage5-2/Component/SwitchButton/index.css b/src/page/LinePage5-2/Component/SwitchButton/index.css
new file mode 100644
index 0000000..604d81a
--- /dev/null
+++ b/src/page/LinePage5-2/Component/SwitchButton/index.css
@@ -0,0 +1,19 @@
+.switch-button {
+ height: 33px;
+}
+.switch-button button {
+ color: #fff;
+ font-size: 18px;
+ padding: 4px 10px;
+ background-color: rgba(49, 135, 140, 0.3);
+ cursor: pointer;
+}
+.switch-button button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.switch-button button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.switch-button button.active {
+ background-color: rgba(86, 244, 231, 0.7);
+}
diff --git a/src/page/LinePage5-2/Component/SwitchButton/index.tsx b/src/page/LinePage5-2/Component/SwitchButton/index.tsx
new file mode 100644
index 0000000..9209c06
--- /dev/null
+++ b/src/page/LinePage5-2/Component/SwitchButton/index.tsx
@@ -0,0 +1,65 @@
+import { useEffect, useState } from "react";
+import "./index.css";
+interface Name {
+ name: string;
+ ename: string;
+}
+interface nameListProps {
+ nameList: Name[];
+ 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
+ {props.nameList.map((item, index) => {
+ return (
+
+ );
+ })}
+
+ );
+}
+export default SwitchButton;
diff --git a/src/page/LinePage5-2/Component/TitleBox/index.css b/src/page/LinePage5-2/Component/TitleBox/index.css
new file mode 100644
index 0000000..3ae06db
--- /dev/null
+++ b/src/page/LinePage5-2/Component/TitleBox/index.css
@@ -0,0 +1,13 @@
+.title_box {
+ font-size: 24px;
+ color: #52fff1;
+ padding: 10px 0 0 15px;
+}
+.title_box img {
+ width: 33px;
+ height: 33px;
+ vertical-align: bottom;
+ margin-right: 3px;
+ position: relative;
+ top: 3px;
+}
diff --git a/src/page/LinePage5-2/Component/TitleBox/index.tsx b/src/page/LinePage5-2/Component/TitleBox/index.tsx
new file mode 100644
index 0000000..dd43a66
--- /dev/null
+++ b/src/page/LinePage5-2/Component/TitleBox/index.tsx
@@ -0,0 +1,53 @@
+import Defect from "./../../assets/icon/defect.png";
+import Alarm from "./../../assets/icon/alarm.png";
+import Finished from "./../../assets/icon/finished.png";
+import InputAndOutput from "./../../assets/icon/inputAndOutput.png";
+import Num from "./../../assets/icon/num.png";
+import Record from "./../../assets/icon/record.png";
+import "./index.css";
+interface titleProps {
+ title: string;
+}
+function TitleBox(props: titleProps) {
+ const filteredTitles = () => {
+ switch (props.title) {
+ case "left_up":
+ return {
+ img: Defect,
+ title: "产线报废汇总",
+ };
+ case "left_down":
+ return {
+ img: Record,
+ title: "当前产线报废情况",
+ };
+ case "center_down_left":
+ return {
+ img: Alarm,
+ title: "异常报警",
+ };
+ case "center_down_right":
+ return {
+ img: Finished,
+ title: "产线成品率",
+ };
+ case "right_up":
+ return {
+ img: Num,
+ title: "各产线总投入和产出",
+ };
+ default:
+ return {
+ img: InputAndOutput,
+ title: "当前产线投入和产出",
+ };
+ }
+ };
+ return (
+
+
+ {filteredTitles().title}
+
+ );
+}
+export default TitleBox;
diff --git a/src/page/LinePage5-2/Left/LeftDown.tsx b/src/page/LinePage5-2/Left/LeftDown.tsx
new file mode 100644
index 0000000..7f35755
--- /dev/null
+++ b/src/page/LinePage5-2/Left/LeftDown.tsx
@@ -0,0 +1,245 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/BarChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5After} from "./../../../store/LinePageSlice"
+function LeftDown() {
+ const data = useAppSelector(selectLine5After);
+ // console.log('页面数据：',data)
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "柱状", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default LeftDown;
diff --git a/src/page/LinePage5-2/Left/LeftUp.tsx b/src/page/LinePage5-2/Left/LeftUp.tsx
new file mode 100644
index 0000000..71df85f
--- /dev/null
+++ b/src/page/LinePage5-2/Left/LeftUp.tsx
@@ -0,0 +1,229 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import getOptions from "../../Component/SummaryBarChart/chart.config";
+import { useState } from "react";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5After} from "./../../../store/LinePageSlice"
+function LeftUp() {
+ const data = useAppSelector(selectLine5After);
+ console.log('页面数据1-1：',data)
+ // 假数据
+ const dataSource = {
+ day: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ week: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ month: {
+ xData: [],
+ series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps1.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps2.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
+ + 暂无数据 +
) + ) : dataProps3.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default LeftUp;
diff --git a/src/page/LinePage5-2/Left/index.tsx b/src/page/LinePage5-2/Left/index.tsx
new file mode 100644
index 0000000..6524b82
--- /dev/null
+++ b/src/page/LinePage5-2/Left/index.tsx
@@ -0,0 +1,11 @@
+import LeftUp from "./LeftUp";
+import LeftDown from "./LeftDown";
+function Left() {
+ return (
+
+
+ {// @ts-ignore
+ dataSource[activeName].xData.length>0 ? (
+
+ {
+ ):(
+ + 暂无数据 +
+ )} +
+
+ );
+}
+export default Left;
diff --git a/src/page/LinePage5-2/Right/RightDown.tsx b/src/page/LinePage5-2/Right/RightDown.tsx
new file mode 100644
index 0000000..6fe188e
--- /dev/null
+++ b/src/page/LinePage5-2/Right/RightDown.tsx
@@ -0,0 +1,272 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import SwitchButton from "../Component/SwitchButton";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import { useState } from "react";
+import getOptions from "../../Component/LineChartRight/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5After} from "./../../../store/LinePageSlice"
+import moment from "moment";
+function RightDown() {
+ const data = useAppSelector(selectLine5After);
+ // 假数据
+ let tempData = [
+ {
+ type: "day",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "week",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ {
+ type: "month",
+ data: {
+ time: [] as string[],
+ input: [] as number[],
+ output: [] as number[],
+ },
+ },
+ ];
+ const nameList = [
+ { name: "表单", ename: "table" },
+ { name: "折线", ename: "chart" },
+ ];
+ const [activeName, setActiveName] = useState
+
+ );
+}
+export default RightDown;
diff --git a/src/page/LinePage5-2/Right/RightUp.tsx b/src/page/LinePage5-2/Right/RightUp.tsx
new file mode 100644
index 0000000..4644deb
--- /dev/null
+++ b/src/page/LinePage5-2/Right/RightUp.tsx
@@ -0,0 +1,52 @@
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5After} from "./../../../store/LinePageSlice"
+function RightUp() {
+ const data = useAppSelector(selectLine5After);
+ const config = {
+ 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: [70, 90, 106, 114],
+ data: [],
+ };
+ let arr:any = []
+ // @ts-ignore
+ if (data.sumProductionDets && data.sumProductionDets.length > 0) {
+ // @ts-ignore
+ data.sumProductionDets.map((item, index) => {
+ let arrInner = []
+ arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
+ arr.push(arrInner)
+ })
+ }
+ config.data = arr
+ return (
+
+
+
+
+
+
+ 当天
+
+
+
+ {activeName === "table" ? (
+ arr1.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[0].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本周
+
+
+
+ {activeName === "table" ? (
+ arr2.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[1].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ 本月
+
+
+
+ {activeName === "table" ? (
+ arr3.length>0?
+ + 暂无数据 +
+ ) + ) : tempData[2].data.time.length>0 ? ( ++ 暂无数据 +
+ )} +
+
+ );
+}
+export default RightUp;
diff --git a/src/page/LinePage5-2/Right/index.tsx b/src/page/LinePage5-2/Right/index.tsx
new file mode 100644
index 0000000..53c802a
--- /dev/null
+++ b/src/page/LinePage5-2/Right/index.tsx
@@ -0,0 +1,12 @@
+import RightDown from "./RightDown";
+import RightUp from "./RightUp";
+
+function Right() {
+ return (
+
+ {arr.length>0?
+ + 暂无数据 +
)} +
+
+ );
+}
+export default Right;
diff --git a/src/page/LinePage5-2/TopP.tsx b/src/page/LinePage5-2/TopP.tsx
new file mode 100644
index 0000000..e7c7a64
--- /dev/null
+++ b/src/page/LinePage5-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./index.css";
+
+function TopP() {
+ return (
+
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage5-2/assets/icon/alarm.png b/src/page/LinePage5-2/assets/icon/alarm.png
new file mode 100644
index 0000000..eb335f3
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/alarm.png differ
diff --git a/src/page/LinePage5-2/assets/icon/defect.png b/src/page/LinePage5-2/assets/icon/defect.png
new file mode 100644
index 0000000..76ed17c
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/defect.png differ
diff --git a/src/page/LinePage5-2/assets/icon/finished.png b/src/page/LinePage5-2/assets/icon/finished.png
new file mode 100644
index 0000000..99b411b
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/finished.png differ
diff --git a/src/page/LinePage5-2/assets/icon/g.png b/src/page/LinePage5-2/assets/icon/g.png
new file mode 100644
index 0000000..bf1b107
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/g.png differ
diff --git a/src/page/LinePage5-2/assets/icon/inputAndOutput.png b/src/page/LinePage5-2/assets/icon/inputAndOutput.png
new file mode 100644
index 0000000..113ed13
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/inputAndOutput.png differ
diff --git a/src/page/LinePage5-2/assets/icon/num.png b/src/page/LinePage5-2/assets/icon/num.png
new file mode 100644
index 0000000..e77c409
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/num.png differ
diff --git a/src/page/LinePage5-2/assets/icon/r.png b/src/page/LinePage5-2/assets/icon/r.png
new file mode 100644
index 0000000..d11591e
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/r.png differ
diff --git a/src/page/LinePage5-2/assets/icon/record.png b/src/page/LinePage5-2/assets/icon/record.png
new file mode 100644
index 0000000..4622f01
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/record.png differ
diff --git a/src/page/LinePage5-2/assets/icon/y.png b/src/page/LinePage5-2/assets/icon/y.png
new file mode 100644
index 0000000..72c796a
Binary files /dev/null and b/src/page/LinePage5-2/assets/icon/y.png differ
diff --git a/src/page/LinePage5-2/index.css b/src/page/LinePage5-2/index.css
new file mode 100644
index 0000000..1a28491
--- /dev/null
+++ b/src/page/LinePage5-2/index.css
@@ -0,0 +1,264 @@
+/* 顶部 */
+.block_top {
+ width: 1920px;
+ height: 94px;
+ background: url(/public/svg/topback.svg) 100% no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.block_top_title {
+ width: 651px;
+ height: 77px;
+ background: url(/public/png/topTiltle.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 18px;
+}
+/* 中部 */
+.block_bottom {
+ width: 1920px;
+ height: 966px;
+ padding-top: 20px;
+}
+
+.group_left {
+ width: 402px;
+ height: 966px;
+ margin: 0 0 0 24px;
+}
+
+.group_center {
+ width: 1041px;
+ height: 966px;
+ margin: 0 0 0 15px;
+}
+
+.group_right {
+ width: 401px;
+ height: 966px;
+ margin-left: 15px;
+}
+
+.left_up {
+ width: 402px;
+ height: 332px;
+ background: url(../../../public/png/rect/lp_left_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.left_down {
+ width: 402px;
+ height: 599px;
+ background: url(../../../public/png/rect/lp_left_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.center_up {
+ width: 1041px;
+ height: 562px;
+ 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;
+ height: 368px;
+ margin-top: 17px;
+}
+.center_down_inner {
+ width: 513px;
+ height: 366px;
+ background: url(../../../public/png/rect/lp_center_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ position: relative;
+}
+.center_down .left-box {
+ margin-right: 15px;
+ position: relative;
+}
+.center_down .left-box .alarm_num_title {
+ position: absolute;
+ left: 220px;
+ top: 22px;
+ font-size: 13px;
+ letter-spacing: 3px;
+ color: #fff;
+}
+.center_down .left-box .alarm_num {
+ color: #52fff1;
+ font-size: 40px;
+ text-align: center;
+ font-family: PingFangSC, PingFang SC;
+}
+.center_down .right_box .chart_box {
+ width: 100%;
+ height: 310px;
+ margin-top: 10px;
+}
+.right_up {
+ width: 401px;
+ height: 257px;
+ background: url(../../../public/png/rect/lp_right_up.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+}
+.right_down {
+ width: 401px;
+ height: 673px;
+ background: url(../../../public/png/rect/lp_right_down.png) no-repeat;
+ background-size: 100% 100%;
+ background-position: 0 0;
+ margin-top: 14px;
+ position: relative;
+}
+.left_up_switch {
+ position: absolute;
+ right: 10px;
+ top: 12px;
+}
+.left_up_chart {
+ height: 275px;
+ margin-top: 10px;
+}
+/* 左侧 */
+.left_down_title {
+ height: 18px;
+ justify-content: center;
+ margin-bottom: 4px;
+}
+.left_down_box1 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/leftbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin-top: 2px;
+}
+.left_down_box2 {
+ width: 56px;
+ height: 13px;
+ background: url(/public/png/rightbar.png) 100% no-repeat;
+ background-size: 100% 100%;
+ margin: 2px 0 0 0px;
+}
+.left_down_text {
+ /*width: 40px;*/
+ height: 18px;
+ overflow-wrap: break-word;
+ color: rgba(1, 207, 204, 1);
+ font-size: 18px;
+ letter-spacing: 5px;
+ font-family: PingFangSC-Regular;
+ white-space: nowrap;
+ line-height: 18px;
+ margin-left: 18px;
+ margin-right: 16px;
+ text-align: center;
+}
+.left_down_content {
+ height: 160px;
+ /* padding-bottom: 5px; */
+}
+.right_down_content {
+ height: 185px;
+ /* padding-bottom: 5px; */
+}
+/* 滚动表格部分 */
+.dv-scroll-board .header .header-item,
+.dv-scroll-board .rows .ceil {
+ border-right: 1px solid #0d1728;
+}
+.dv-scroll-board .header .header-item:last-child,
+.dv-scroll-board .rows .ceil:last-child {
+ border-right: none;
+ border: none;
+}
+/* chart图部分 */
+.luoyang-chart-tooltip {
+ background: #0a2b4f77 !important;
+ border: none !important;
+ backdrop-filter: blur(12px);
+}
+
+.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: 24px;
+ font-size: 17px;
+ white-space: nowrap;
+}
diff --git a/src/page/LinePage5-2/index.tsx b/src/page/LinePage5-2/index.tsx
new file mode 100644
index 0000000..daf9389
--- /dev/null
+++ b/src/page/LinePage5-2/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+function LinePage() {
+ return (
+
+
+
+
+
+