0 ?
- ) : options3 ? (
+ />:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
) : (
暂无数据
diff --git a/src/page/LinePage1-2/Left/LeftUp.tsx b/src/page/LinePage1-2/Left/LeftUp.tsx
new file mode 100644
index 0000000..52bec78
--- /dev/null
+++ b/src/page/LinePage1-2/Left/LeftUp.tsx
@@ -0,0 +1,268 @@
+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);
+ // 假数据
+ 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(nameList[0].ename);
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ // @ts-ignore
+ if (data.todayAllProductionScraps && Object.keys(data.todayAllProductionScraps).length > 0) {
+ let sum: number[] = [];
+ // 生成obj
+ // @ts-ignore
+ data.scrapBars.map((item,index) => {
+ let obj = {
+ data: [],
+ type: "bar",
+ stack: "a",
+ name: item,
+ barWidth: 14,
+ label: {
+ show: true,
+ position: "right",
+ color: "inherit",
+ },
+ }
+ dataSource.day.series.push(obj)
+ })
+ // @ts-ignore
+ dataSource.day.xData = Object.keys(data.todayAllProductionScraps)
+ dataSource.day.xData.sort((a,b)=>{// 保证横坐标是有序的
+ // @ts-ignore
+ const lastDigitA = parseInt(a[a.length - 1], 10);
+ // @ts-ignore
+ const lastDigitB = parseInt(b[b.length - 1], 10);
+ return lastDigitA - lastDigitB;
+ })
+ for (let k = 0; k < dataSource.day.xData.length; k++) {
+ let item = dataSource.day.xData[k];
+ let sumIner = 0
+ for(let i = 0;i < dataSource.day.series.length;i++){
+ let itemSeries = dataSource.day.series[i]
+ // @ts-ignore
+ data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{
+ // @ts-ignore
+ if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
+ // @ts-ignore
+ itemSeries.data.push(itemInner.scrapNum || 0)
+ sumIner += itemInner.scrapNum || 0
+ return
+ }
+ })
+ if (itemSeries.data.length === k) {
+ itemSeries.data.push(0)
+ }
+ }
+ sum.push(sumIner)
+ }
+ dataSource.day.series.push({
+ data: sum,
+ type: "bar",
+ stack: "a",
+ name: "",
+ label: {
+ show: true,
+ position: "top",
+ color: "#fff",
+ formatter: function (params: any) {
+ return sum[params.dataIndex];
+ },
+ },
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekAllProductionScraps && Object.keys(data.weekAllProductionScraps).length > 0) {
+ let sum: number[] = [];
+ // 生成obj
+ // @ts-ignore
+ data.scrapBars.map((item,index) => {
+ let obj = {
+ data: [],
+ type: "bar",
+ stack: "a",
+ name: item,
+ barWidth: 14,
+ label: {
+ show: true,
+ position: "right",
+ color: "inherit",
+ },
+ }
+ dataSource.week.series.push(obj)
+ })
+ // @ts-ignore
+ dataSource.week.xData = Object.keys(data.weekAllProductionScraps)
+ dataSource.week.xData.sort((a,b)=>{// 保证横坐标是有序的
+ // @ts-ignore
+ const lastDigitA = parseInt(a[a.length - 1], 10);
+ // @ts-ignore
+ const lastDigitB = parseInt(b[b.length - 1], 10);
+ return lastDigitA - lastDigitB;
+ })
+ for (let k = 0; k < dataSource.week.xData.length; k++) {
+ let item = dataSource.week.xData[k];
+ let sumIner = 0
+ for(let i = 0;i < dataSource.week.series.length;i++){
+ let itemSeries = dataSource.week.series[i]
+ // @ts-ignore
+ data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{
+ // @ts-ignore
+ if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
+ // @ts-ignore
+ itemSeries.data.push(itemInner.scrapNum || 0)
+ sumIner += itemInner.scrapNum || 0
+ return
+ }
+ })
+ if (itemSeries.data.length === k) {
+ itemSeries.data.push(0)
+ }
+ }
+ sum.push(sumIner)
+ }
+ dataSource.week.series.push({
+ data: sum,
+ type: "bar",
+ stack: "a",
+ name: "",
+ label: {
+ show: true,
+ position: "top",
+ color: "#fff",
+ formatter: function (params: any) {
+ return sum[params.dataIndex];
+ },
+ },
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthAllProductionScraps && Object.keys(data.monthAllProductionScraps).length > 0) {
+ let sum: number[] = [];
+ // 生成obj
+ // @ts-ignore
+ data.scrapBars.map((item,index) => {
+ let obj = {
+ data: [],
+ type: "bar",
+ stack: "a",
+ name: item,
+ barWidth: 14,
+ label: {
+ show: true,
+ position: "right",
+ color: "inherit",
+ },
+ }
+ dataSource.month.series.push(obj)
+ })
+ // @ts-ignore
+ dataSource.month.xData = Object.keys(data.monthAllProductionScraps)
+ dataSource.month.xData.sort((a,b)=>{// 保证横坐标是有序的
+ // @ts-ignore
+ const lastDigitA = parseInt(a[a.length - 1], 10);
+ // @ts-ignore
+ const lastDigitB = parseInt(b[b.length - 1], 10);
+ return lastDigitA - lastDigitB;
+ })
+ for (let k = 0; k < dataSource.month.xData.length; k++) {
+ let item = dataSource.month.xData[k];
+ let sumIner = 0
+ for(let i = 0;i < dataSource.month.series.length;i++){
+ let itemSeries = dataSource.month.series[i]
+ // @ts-ignore
+ data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{
+ // @ts-ignore
+ if (itemInner.sectionName.indexOf(itemSeries.name)!==-1) {
+ // @ts-ignore
+ itemSeries.data.push(itemInner.scrapNum || 0)
+ sumIner += itemInner.scrapNum || 0
+ return
+ }
+ })
+ if (itemSeries.data.length === k) {
+ itemSeries.data.push(0)
+ }
+ }
+ sum.push(sumIner)
+ }
+ dataSource.month.series.push({
+ data: sum,
+ type: "bar",
+ stack: "a",
+ name: "",
+ label: {
+ show: true,
+ position: "top",
+ color: "#fff",
+ formatter: function (params: any) {
+ return sum[params.dataIndex];
+ },
+ },
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ const options = getOptions(chartData);
+ console.log('dataSource',dataSource)
+ 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..7077534
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..0961467
--- /dev/null
+++ b/src/page/LinePage1-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage1-2/index.tsx b/src/page/LinePage1-2/index.tsx
new file mode 100644
index 0000000..425a1d9
--- /dev/null
+++ b/src/page/LinePage1-2/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=1-2');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=1-2');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage2-1/Center/CenterDown.tsx b/src/page/LinePage2-1/Center/CenterDown.tsx
new file mode 100644
index 0000000..b1f2fa3
--- /dev/null
+++ b/src/page/LinePage2-1/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2Before} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine2Before);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.map((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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 (
+
+
.img})
+
{filteredTitles().title}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..36c7bf7
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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/index.css b/src/page/LinePage2-1/index.css
new file mode 100644
index 0000000..30fbd19
--- /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: 5px;
+}
+.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: 270px;
+ 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..bebcf33
--- /dev/null
+++ b/src/page/LinePage2-1/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=2-1');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=2-1');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage2-2/Center/CenterDown.tsx b/src/page/LinePage2-2/Center/CenterDown.tsx
new file mode 100644
index 0000000..3d1242b
--- /dev/null
+++ b/src/page/LinePage2-2/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine2After} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine2After);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.map((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..3adfaca
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..3c9a765
--- /dev/null
+++ b/src/page/LinePage2-2/TopP.tsx
@@ -0,0 +1,13 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage2-2/index.tsx b/src/page/LinePage2-2/index.tsx
new file mode 100644
index 0000000..e3be42c
--- /dev/null
+++ b/src/page/LinePage2-2/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=2-2');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=2-2');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage3-1/Center/CenterDown.tsx b/src/page/LinePage3-1/Center/CenterDown.tsx
new file mode 100644
index 0000000..f5ed287
--- /dev/null
+++ b/src/page/LinePage3-1/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3Before} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine3Before);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.map((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..f6df6f2
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..0961467
--- /dev/null
+++ b/src/page/LinePage3-1/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage3-1/index.tsx b/src/page/LinePage3-1/index.tsx
new file mode 100644
index 0000000..b43ab75
--- /dev/null
+++ b/src/page/LinePage3-1/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=3-1');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=3-1');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage3-2/Center/CenterDown.tsx b/src/page/LinePage3-2/Center/CenterDown.tsx
new file mode 100644
index 0000000..1386274
--- /dev/null
+++ b/src/page/LinePage3-2/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine3After} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine3After);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.map((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..4da95cc
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..0961467
--- /dev/null
+++ b/src/page/LinePage3-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage3-2/index.tsx b/src/page/LinePage3-2/index.tsx
new file mode 100644
index 0000000..d2b2a02
--- /dev/null
+++ b/src/page/LinePage3-2/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=3-2');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=3-2');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage4-1/Center/CenterDown.tsx b/src/page/LinePage4-1/Center/CenterDown.tsx
new file mode 100644
index 0000000..3b2ad1a
--- /dev/null
+++ b/src/page/LinePage4-1/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4Before} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine4Before);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.map((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..fc2edfe
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.map((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..0961467
--- /dev/null
+++ b/src/page/LinePage4-1/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage4-1/index.tsx b/src/page/LinePage4-1/index.tsx
new file mode 100644
index 0000000..e20e7f1
--- /dev/null
+++ b/src/page/LinePage4-1/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=4-1');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=4-1');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage4-2/Center/CenterDown.tsx b/src/page/LinePage4-2/Center/CenterDown.tsx
new file mode 100644
index 0000000..3cbd808
--- /dev/null
+++ b/src/page/LinePage4-2/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine4After} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine4After);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName, setActiveName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.map((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].map((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.map((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].map((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..2403307
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..0961467
--- /dev/null
+++ b/src/page/LinePage4-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage4-2/index.tsx b/src/page/LinePage4-2/index.tsx
new file mode 100644
index 0000000..711294a
--- /dev/null
+++ b/src/page/LinePage4-2/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=4-2');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=4-2');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage5-1/Center/CenterDown.tsx b/src/page/LinePage5-1/Center/CenterDown.tsx
new file mode 100644
index 0000000..632b12b
--- /dev/null
+++ b/src/page/LinePage5-1/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5Before} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine5Before);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.forEach((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].forEach((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.forEach((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].forEach((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].forEach((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.forEach((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].forEach((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].forEach((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.forEach((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].forEach((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..e5294cd
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..0961467
--- /dev/null
+++ b/src/page/LinePage5-1/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage5-1/index.tsx b/src/page/LinePage5-1/index.tsx
new file mode 100644
index 0000000..35689fb
--- /dev/null
+++ b/src/page/LinePage5-1/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=5-1');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=5-1');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/LinePage5-2/Center/CenterDown.tsx b/src/page/LinePage5-2/Center/CenterDown.tsx
new file mode 100644
index 0000000..d235a27
--- /dev/null
+++ b/src/page/LinePage5-2/Center/CenterDown.tsx
@@ -0,0 +1,213 @@
+import ReactECharts from "echarts-for-react";
+import TitleBox from "../Component/TitleBox";
+import ScrollBoard from "./../../Component/ScrollBoard";
+// import SwitchButton from "../Component/SwitchButton";
+import { useState } from "react";
+import getOptions from "../../Component/LineChart/chart.config";
+import {useAppSelector} from "./../../../store/hooks"
+import {selectLine5After} from "./../../../store/LinePageSlice"
+import dayjs from "dayjs";
+function CenterDown() {
+ const data = useAppSelector(selectLine5After);
+ // 假数据
+ const dataSource = {
+ day: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ week: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ month: {
+ xData:[],
+ series: [] as { name: string; type: string; symbol: string; symbolSize: number; data: never[]; }[],
+ },
+ };
+ const nameList = [
+ { name: "天", ename: "day" },
+ { name: "周", ename: "week" },
+ { name: "月", ename: "month" },
+ ];
+ const [activeName] = useState(nameList[1].ename);
+ // const handleButtonChange = (activeName: string) => {
+ // setActiveName(activeName);
+ // };
+ const config = {
+ header: ["序号", "报警时间", "报警设备", "报警内容"],
+ headerHeight: 36,
+ rowNum: 6,
+ align: ["center", "left", "left", "left"],
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [80, 137, 177, 97],
+ data: []
+ };
+ // 报警数据
+ let arr:any = []
+ let sumAlarm = 0
+ // @ts-ignore
+ if (data.alarms && data.alarms.length > 0) {
+ // @ts-ignore
+ sumAlarm = data.alarms.length
+ // @ts-ignore
+ data.alarms.forEach((item,index) => {
+ let arrInner = []
+ arrInner.push(
+ index+1,
+ dayjs(item.recTime).format("YYYY/MM/DD HH:mm"),
+ item.name,
+ item.status === '故障'?"故障":"离线",
+ );
+ arr.push(arrInner)
+ });
+ }
+ config.data = arr
+ // 工段成品率
+ // @ts-ignore
+ if (data.todayProductionRates && Object.keys(data.todayProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.todayProductionRates)
+ // @ts-ignore
+ data.todayProductionRates[keys[0]].mforEachap((item,index)=>{
+ // @ts-ignore
+ dataSource.day.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.forEach((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.todayProductionRates[item][0].lineName
+ // @ts-ignore
+ data.todayProductionRates[item].forEach((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.day.series.push(obj)
+ })
+ }else{
+ dataSource.day.xData = []
+ dataSource.day.series = []
+ }
+ // @ts-ignore
+ if (data.weekProductionRates && Object.keys(data.weekProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.weekProductionRates)
+ // @ts-ignore
+ data.weekProductionRates[keys[0]].forEach((item,index)=>{
+ // @ts-ignore
+ dataSource.week.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.forEach((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.weekProductionRates[item][0].lineName
+ // @ts-ignore
+ data.weekProductionRates[item].forEach((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.week.series.push(obj)
+ })
+ }else{
+ dataSource.week.xData = []
+ dataSource.week.series = []
+ }
+ // @ts-ignore
+ if (data.monthProductionRates && Object.keys(data.monthProductionRates).length > 0) {
+ // @ts-ignore
+ let keys = Object.keys(data.monthProductionRates)
+ // @ts-ignore
+ data.monthProductionRates[keys[0]].forEach((item,index)=>{
+ // @ts-ignore
+ dataSource.month.xData.push(dayjs(item.recTime).format("HH:mm"))
+ })
+ keys.forEach((item,index)=>{
+ let obj = {
+ name: "",
+ type: "line",
+ symbol: "circle",
+ symbolSize: 4,
+ data:[]
+ }
+ // @ts-ignore
+ obj.name = data.monthProductionRates[item][0].lineName
+ // @ts-ignore
+ data.monthProductionRates[item].forEach((subItem,index)=>{
+ // @ts-ignore
+ obj.data.push(subItem.passRate)
+ })
+ dataSource.month.series.push(obj)
+ })
+ }else{
+ dataSource.month.xData = []
+ dataSource.month.series = []
+ }
+ let chartData = (dataSource as { [key: string]: any })[activeName];
+ const options = getOptions(chartData);
+ 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(null);
+ let updateActiveName = createActiveNameUpdater(props.nameList, activeName);
+ useEffect(() => {
+ const timer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(timer);
+ return () => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ };
+ }, [props.nameList.length]);
+ const btnClick = (ename: string) => {
+ if (timerId !== null) {
+ clearInterval(timerId);
+ }
+ setActiveName(ename);
+ props.onChange(ename); // 通知父组件
+ const newTimer = setInterval(() => {
+ let active = updateActiveName();
+ setActiveName(active);
+ props.onChange(active);
+ }, 60000);
+ setTimerId(newTimer);
+ };
+ return (
+
+ {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..6d654c1
--- /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}
+
+
+
+
+
+
+
+
+ {activeName === "table" ? (
+ arr1.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps1.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr2.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps2.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+ {activeName === "table" ? (
+ arr3.length > 0 ?
:(
+ 暂无数据
+
)
+ ) : dataProps3.length>0 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+
+
+ {// @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..1e50aee
--- /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 dayjs from "dayjs";
+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(nameList[0].ename);
+ const handleButtonChange = (activeName: string) => {
+ setActiveName(activeName);
+ };
+ const configDay = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configWeek = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ const configMonth = {
+ header: ["时间", "投入数量", "产出数量"],
+ headerHeight: 30,
+ rowNum: 5,
+ headerBGC: "rgba(79, 114, 136, 0.3)",
+ oddRowBGC: "rgba(79, 114, 136, 0.3)",
+ evenRowBGC: "rgba(76, 97, 123, 0.1)",
+ columnWidth: [120, 130, 130],
+ data: [],
+ };
+ let arr1: any = [];
+ let arr2: any = [];
+ let arr3: any = [];
+ // @ts-ignore
+ if (data.todayProductionDets && data.todayProductionDets.length > 0) {
+ // @ts-ignore
+ data.todayProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
+ arr1.push(arrInner);
+ tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
+ tempData[0].data.input.push(item.inputNum);
+ tempData[0].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[0].data.time = []
+ tempData[0].data.input = []
+ tempData[0].data.output = []
+ }
+ // @ts-ignore
+ if (data.weekProductionDets && data.weekProductionDets.length > 0) {
+ // @ts-ignore
+ data.weekProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr2.push(arrInner);
+ tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[1].data.input.push(item.inputNum);
+ tempData[1].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[1].data.time = []
+ tempData[1].data.input = []
+ tempData[1].data.output = []
+ }
+ // @ts-ignore
+ if (data.monthProductionDets && data.monthProductionDets.length > 0) {
+ // @ts-ignore
+ data.monthProductionDets.forEach((item,index)=>{
+ let arrInner = [];
+ arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
+ arr3.push(arrInner);
+ tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
+ tempData[2].data.input.push(item.inputNum);
+ tempData[2].data.output.push(item.outputNum);
+ })
+ }else{
+ tempData[2].data.time = []
+ tempData[2].data.input = []
+ tempData[2].data.output = []
+ }
+ configDay.data = arr1;
+ configWeek.data = arr2;
+ configMonth.data = arr3;
+
+ const chartData1 = tempData[0].data;
+ const chartData2 = tempData[1].data;
+ const chartData3 = tempData[2].data;
+ const options1 = getOptions(chartData1);
+ const options2 = getOptions(chartData2);
+ const options3 = getOptions(chartData3);
+ return (
+
+
+
+
+
+
+
+
+ {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 ? (
+
+ ) : (
+
+ 暂无数据
+
+ )}
+
+
+
+
+
+ {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..0961467
--- /dev/null
+++ b/src/page/LinePage5-2/TopP.tsx
@@ -0,0 +1,14 @@
+import '../../lanhuapp/common.css';
+import "./../style/linePage.css";
+
+function TopP() {
+ return (
+
+ );
+}
+
+export default TopP;
\ No newline at end of file
diff --git a/src/page/LinePage5-2/index.tsx b/src/page/LinePage5-2/index.tsx
new file mode 100644
index 0000000..b08e90e
--- /dev/null
+++ b/src/page/LinePage5-2/index.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import TopP from "./TopP";
+import Left from "./Left";
+import Right from "./Right";
+import Center from "./Center";
+import {useEffect} from 'react';
+import {useNavigate} from "react-router-dom";
+function LinePage() {
+ const navigate = useNavigate();
+ useEffect(() => {
+ const handleKeyDown = (event:any) => {
+ if (event.key === 'ArrowUp') {
+ console.log('LDPage向上键被按下');
+ navigate('/LD?lineId=5-2');
+ // 执行向上键的逻辑
+ } else if (event.key === 'ArrowDown') {
+ console.log('LDPage向下键被按下');
+ // 执行向下键的逻辑
+ navigate('/LD?lineId=5-2');
+ }
+ }
+ window.addEventListener('keydown', handleKeyDown);
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown);
+ };
+ });
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+export default LinePage;
diff --git a/src/page/TestPage/CenterUp.tsx b/src/page/TestPage/CenterUp.tsx
deleted file mode 100644
index ea62ec1..0000000
--- a/src/page/TestPage/CenterUp.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useState } from "react"; // 使用useState钩子来管理状态
-import intl from "react-intl-universal";
-import '../../lanhuapp/common.css';
-import "../../lanhuapp/index.css";
-import "../style/standard.css"
-// import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
-// import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
-import { number } from "echarts";
-import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
-
-function CenterUp() {
-
-// 使用 useState 钩子来管理当前的序号状态
-const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
-
-// 定义切换模型序号的函数
-const prevModelIndex = () => {
- // 当前序号减 1，如果小于 1，则变为 5
- setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
-};
-
-const nextModelIndex = () => {
- // 当前序号加 1，如果大于 5，则变为 1
- setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
-};
-
-
-
- return (
-
-
- {/*
*/}
- {/* 添加按钮来切换组件 */}
-
-
-
{modelIndex}
-
TestPage Line{LineID}
- 3434
-
-
- );
-}
-
-export default TestPage;
\ No newline at end of file
diff --git a/src/page/assets/blue-box.png b/src/page/assets/blue-box.png
new file mode 100644
index 0000000..d7f6185
Binary files /dev/null and b/src/page/assets/blue-box.png differ
diff --git a/src/page/assets/icon/a_g.png b/src/page/assets/icon/a_g.png
new file mode 100644
index 0000000..c6c5cc1
Binary files /dev/null and b/src/page/assets/icon/a_g.png differ
diff --git a/src/page/assets/icon/a_r.png b/src/page/assets/icon/a_r.png
new file mode 100644
index 0000000..9e34aa5
Binary files /dev/null and b/src/page/assets/icon/a_r.png differ
diff --git a/src/page/LinePage/assets/icon/alarm.png b/src/page/assets/icon/alarm.png
similarity index 100%
rename from src/page/LinePage/assets/icon/alarm.png
rename to src/page/assets/icon/alarm.png
diff --git a/src/page/assets/icon/defe.png b/src/page/assets/icon/defe.png
new file mode 100644
index 0000000..b384dd8
Binary files /dev/null and b/src/page/assets/icon/defe.png differ
diff --git a/src/page/LinePage/assets/icon/defect.png b/src/page/assets/icon/defect.png
similarity index 100%
rename from src/page/LinePage/assets/icon/defect.png
rename to src/page/assets/icon/defect.png
diff --git a/src/page/LinePage/assets/icon/finished.png b/src/page/assets/icon/finished.png
similarity index 100%
rename from src/page/LinePage/assets/icon/finished.png
rename to src/page/assets/icon/finished.png
diff --git a/src/page/LinePage/assets/icon/g.png b/src/page/assets/icon/g.png
similarity index 100%
rename from src/page/LinePage/assets/icon/g.png
rename to src/page/assets/icon/g.png
diff --git a/src/page/assets/icon/input.png b/src/page/assets/icon/input.png
new file mode 100644
index 0000000..473ecca
Binary files /dev/null and b/src/page/assets/icon/input.png differ
diff --git a/src/page/LinePage/assets/icon/inputAndOutput.png b/src/page/assets/icon/inputAndOutput.png
similarity index 100%
rename from src/page/LinePage/assets/icon/inputAndOutput.png
rename to src/page/assets/icon/inputAndOutput.png
diff --git a/src/page/LinePage/assets/icon/num.png b/src/page/assets/icon/num.png
similarity index 100%
rename from src/page/LinePage/assets/icon/num.png
rename to src/page/assets/icon/num.png
diff --git a/src/page/assets/icon/numBar.png b/src/page/assets/icon/numBar.png
new file mode 100644
index 0000000..88af564
Binary files /dev/null and b/src/page/assets/icon/numBar.png differ
diff --git a/src/page/assets/icon/prod.png b/src/page/assets/icon/prod.png
new file mode 100644
index 0000000..ab888da
Binary files /dev/null and b/src/page/assets/icon/prod.png differ
diff --git a/src/page/LinePage/assets/icon/r.png b/src/page/assets/icon/r.png
similarity index 100%
rename from src/page/LinePage/assets/icon/r.png
rename to src/page/assets/icon/r.png
diff --git a/src/page/LinePage/assets/icon/record.png b/src/page/assets/icon/record.png
similarity index 100%
rename from src/page/LinePage/assets/icon/record.png
rename to src/page/assets/icon/record.png
diff --git a/src/page/LinePage/assets/icon/y.png b/src/page/assets/icon/y.png
similarity index 100%
rename from src/page/LinePage/assets/icon/y.png
rename to src/page/assets/icon/y.png
diff --git a/src/page/assets/yellow-box.png b/src/page/assets/yellow-box.png
new file mode 100644
index 0000000..201ef66
Binary files /dev/null and b/src/page/assets/yellow-box.png differ
diff --git a/src/page/style/linePage.css b/src/page/style/linePage.css
new file mode 100644
index 0000000..30fbd19
--- /dev/null
+++ b/src/page/style/linePage.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: 5px;
+}
+.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: 270px;
+ 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/store/ChangeLangAndCss.ts b/src/store/ChangeLangAndCss.ts
deleted file mode 100644
index 9e6c6e5..0000000
--- a/src/store/ChangeLangAndCss.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {createSlice} from "@reduxjs/toolkit";
-import type {RootState} from "./store";
-
-const initialState = {
- Locale: "zh-CN",
- text_1: "text_1",
- text_34: "text_34"
-}
-
-export const ChangeLangAndCss = createSlice({
- name: 'ChangeCss',
- initialState,
- reducers: {
- UpdateChangeLangAndCss: (state) => {
- if (state.Locale == "zh-CN") {
- state.Locale = "en-US";
- state.text_1 = "text_1_EN";
- state.text_34 = "text_34_EN"
- } else {
- state.Locale = "zh-CN";
- state.text_1 = "text_1";
- state.text_34 = "text_34"
- }
- }
- }
-})
-
-export const {UpdateChangeLangAndCss} = ChangeLangAndCss.actions;
-export const selectChangeLangAndCss = (state: RootState) => state.ChangeCss;
-
-export default ChangeLangAndCss.reducer;
\ No newline at end of file
diff --git a/src/store/ChangeSwitchState.ts b/src/store/ChangeSwitchState.ts
deleted file mode 100644
index d7710e0..0000000
--- a/src/store/ChangeSwitchState.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {createSlice} from "@reduxjs/toolkit";
-import type {RootState} from "./store";
-
-const initialState = {
- switchState: true,
-}
-export const ChangeSwitchState = createSlice({
- name: 'ChangeSwitchState',
- initialState,
- reducers: {
- ChangeSwitch: (state) => {
- if (state.switchState) {
- state.switchState = false;
- } else {
- state.switchState = true;
- }
- }
- }
-})
-
-export const {ChangeSwitch} = ChangeSwitchState.actions;
-
-export const selectSwitchState = (state: RootState) => state.ChangeSwitchState.switchState;
-
-export default ChangeSwitchState.reducer;
diff --git a/src/store/EquStatusEntity.ts b/src/store/EquStatusEntity.ts
deleted file mode 100644
index d891a81..0000000
--- a/src/store/EquStatusEntity.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import {createSlice} from "@reduxjs/toolkit";
-import type {RootState} from "./store";
-
-export interface EquStatusInterface {
- CleanAfterEdge1_1: number
- CleanAfterEdge1_2: number
- CleanAfterEdge2_1: number
- CleanAfterEdge2_2: number
- CleanAfterEdge3_1: number
- CleanAfterEdge3_2: number
- CleanAfterEdge4_1: number
- CleanAfterEdge4_2: number
- CleanAfterTemper1_1: number
- CleanAfterTemper2_1: number
- CleanAfterTemper3_1: number
- CleanAfterTemper4_1: number
- CleanBeforCoat1_1: number
- CleanBeforCoat1_2: number
- CleanBeforCoat4_1: number
- CleanBeforCoat4_2: number
- Edge1_1: number
- Edge1_2: number
- Edge2_1: number
- Edge2_2: number
- Edge3_1: number
- Edge3_2: number
- Edge4_1: number
- Edge4_2: number
- FirstCoat1_1: number
- FirstCoat1_2: number
- FirstCoat2_1: number
- FirstCoat2_2: number
- FirstCoat3_1: number
- FirstCoat3_2: number
- FirstCoat4_1: number
- FirstCoat4_2: number
- Punch1_1: number
- Punch1_2: number
- Punch4_1: number
- Punch4_2: number
- SecondCoat1_1: number
- SecondCoat1_2: number
- SecondCoat2_1: number
- SecondCoat2_2: number
- SecondCoat3_1: number
- SecondCoat3_2: number
- SecondCoat4_1: number
- SecondCoat4_2: number
- Temper1_1: number
- Temper2_1: number
- Temper3_1: number
- Temper4_1: number
- Unload1_1: number
- Unload1_2: number
- Unload2_1: number
- Unload2_2: number
- Unload3_1: number
- Unload3_2: number
- Unload4_1: number
- Unload4_2: number
-}
-
-const initialState: EquStatusInterface = {
- CleanAfterEdge1_1: 0,
- CleanAfterEdge1_2: 0,
- CleanAfterEdge2_1: 0,
- CleanAfterEdge2_2: 0,
- CleanAfterEdge3_1: 0,
- CleanAfterEdge3_2: 0,
- CleanAfterEdge4_1: 0,
- CleanAfterEdge4_2: 0,
- CleanAfterTemper1_1: 0,
- CleanAfterTemper2_1: 0,
- CleanAfterTemper3_1: 0,
- CleanAfterTemper4_1: 0,
- CleanBeforCoat1_1: 0,
- CleanBeforCoat1_2: 0,
- CleanBeforCoat4_1: 0,
- CleanBeforCoat4_2: 0,
- Edge1_1: 0,
- Edge1_2: 0,
- Edge2_1: 0,
- Edge2_2: 0,
- Edge3_1: 0,
- Edge3_2: 0,
- Edge4_1: 0,
- Edge4_2: 0,
- FirstCoat1_1: 0,
- FirstCoat1_2: 0,
- FirstCoat2_1: 0,
- FirstCoat2_2: 0,
- FirstCoat3_1: 0,
- FirstCoat3_2: 0,
- FirstCoat4_1: 0,
- FirstCoat4_2: 0,
- Punch1_1: 0,
- Punch1_2: 0,
- Punch4_1: 0,
- Punch4_2: 0,
- SecondCoat1_1: 0,
- SecondCoat1_2: 0,
- SecondCoat2_1: 0,
- SecondCoat2_2: 0,
- SecondCoat3_1: 0,
- SecondCoat3_2: 0,
- SecondCoat4_1: 0,
- SecondCoat4_2: 0,
- Temper1_1: 0,
- Temper2_1: 0,
- Temper3_1: 0,
- Temper4_1: 0,
- Unload1_1: 0,
- Unload1_2: 0,
- Unload2_1: 0,
- Unload2_2: 0,
- Unload3_1: 0,
- Unload3_2: 0,
- Unload4_1: 0,
- Unload4_2: 0
-}
-export const EquStatusEntity = createSlice({
- name: 'EquStatusEntity',
- initialState,
- reducers: {
- UpdateEquStatus: (state, action) => {
- const JsonData = action.payload;
- state.CleanAfterEdge1_1 = JsonData['CleanAfterEdge1-1'].status;
- state.CleanAfterEdge1_2 = JsonData['CleanAfterEdge1-2'].status;
- state.CleanAfterEdge2_1 = JsonData['CleanAfterEdge2-1'].status;
- state.CleanAfterEdge2_2 = JsonData['CleanAfterEdge2-2'].status;
- state.CleanAfterEdge3_1 = JsonData['CleanAfterEdge3-1'].status;
- state.CleanAfterEdge3_2 = JsonData['CleanAfterEdge3-2'].status;
- state.CleanAfterEdge4_1 = JsonData['CleanAfterEdge4-1'].status;
- state.CleanAfterEdge4_2 = JsonData['CleanAfterEdge4-2'].status;
- state.CleanAfterTemper1_1 = JsonData['CleanAfterTemper1-1'].status;
- state.CleanAfterTemper2_1 = JsonData['CleanAfterTemper2-1'].status;
- state.CleanAfterTemper3_1 = JsonData['CleanAfterTemper3-1'].status;
- state.CleanAfterTemper4_1 = JsonData['CleanAfterTemper4-1'].status;
- state.CleanBeforCoat1_1 = JsonData['CleanBeforCoat1-1'].status;
- state.CleanBeforCoat1_2 = JsonData['CleanBeforCoat1-2'].status;
- state.CleanBeforCoat4_1 = JsonData['CleanBeforCoat4-1'].status;
- state.CleanBeforCoat4_2 = JsonData['CleanBeforCoat4-2'].status;
- state.Edge1_1 = JsonData['Edge1-1'].status;
- state.Edge1_2 = JsonData['Edge1-2'].status;
- state.Edge2_1 = JsonData['Edge2-1'].status;
- state.Edge2_2 = JsonData['Edge2-2'].status;
- state.Edge3_1 = JsonData['Edge3-1'].status;
- state.Edge3_2 = JsonData['Edge3-2'].status;
- state.Edge4_1 = JsonData['Edge4-1'].status;
- state.Edge4_2 = JsonData['Edge4-2'].status;
- state.FirstCoat1_1 = JsonData['FirstCoat1-1'].status;
- state.FirstCoat1_2 = JsonData['FirstCoat1-2'].status;
- state.FirstCoat2_1 = JsonData['FirstCoat2-1'].status;
- state.FirstCoat2_2 = JsonData['FirstCoat2-2'].status;
- state.FirstCoat3_1 = JsonData['FirstCoat3-1'].status;
- state.FirstCoat3_2 = JsonData['FirstCoat3-2'].status;
- state.FirstCoat4_1 = JsonData['FirstCoat4-1'].status;
- state.FirstCoat4_2 = JsonData['FirstCoat4-2'].status;
- state.Punch1_1 = JsonData['Punch1-1'].status;
- state.Punch1_2 = JsonData['Punch1-2'].status;
- state.Punch4_1 = JsonData['Punch4-1'].status;
- state.Punch4_2 = JsonData['Punch4-2'].status;
- state.SecondCoat1_1 = JsonData['SecondCoat1-1'].status;
- state.SecondCoat1_2 = JsonData['SecondCoat1-2'].status;
- state.SecondCoat2_1 = JsonData['SecondCoat2-1'].status;
- state.SecondCoat2_2 = JsonData['SecondCoat2-2'].status;
- state.SecondCoat3_1 = JsonData['SecondCoat3-1'].status;
- state.SecondCoat3_2 = JsonData['SecondCoat3-2'].status;
- state.SecondCoat4_1 = JsonData['SecondCoat4-1'].status;
- state.SecondCoat4_2 = JsonData['SecondCoat4-2'].status;
- state.Temper1_1 = JsonData['Temper1-1'].status;
- state.Temper2_1 = JsonData['Temper2-1'].status;
- state.Temper3_1 = JsonData['Temper3-1'].status;
- state.Temper4_1 = JsonData['Temper4-1'].status;
- state.Unload1_1 = JsonData['Unload1-1'].status;
- state.Unload1_2 = JsonData['Unload1-2'].status;
- state.Unload2_1 = JsonData['Unload2-1'].status;
- state.Unload2_2 = JsonData['Unload2-2'].status;
- state.Unload3_1 = JsonData['Unload3-1'].status;
- state.Unload3_2 = JsonData['Unload3-2'].status;
- state.Unload4_1 = JsonData['Unload4-1'].status;
- state.Unload4_2 = JsonData['Unload4-2'].status;
- }
- }
-})
-
-export const {UpdateEquStatus} = EquStatusEntity.actions;
-
-export const selectEquStatus = (state: RootState) => state.EquStatusEntity;
-
-export default EquStatusEntity.reducer;
\ No newline at end of file
diff --git a/src/store/EquipmentMonitorEntity.ts b/src/store/EquipmentMonitorEntity.ts
deleted file mode 100644
index 674fc32..0000000
--- a/src/store/EquipmentMonitorEntity.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import {createSlice} from "@reduxjs/toolkit";
-import type {RootState} from "./store";
-
-export interface Alarm {
- alarmContent: string;
- equName: string;
- alarmCode: any;
- alarmEquipmentId: number;
- alarmValue: string;
- alarmId: number;
- alarmSource: string;
-}
-
-export interface TickCount {
- equName: string;
- tickCount: number;
-}
-
-export interface Product {
- externalCode: number,
- equipmentCode: number,
- outputNum: number,
- lineName: string,
- equipmentId: number,
- sectionName: string,
- inputNum: number,
- recordTime: number,
- equipmentName: string
-}
-
-export interface Oee {
- workRate: number;
- equName: string;
- downRate: number;
- stopRate: number;
-}
-
-export interface EquipmentLine {
- equipmentAlarm: Array,
- equipmentTickCounts: Array,
- equipmentOees: Array,
- equipmentProductDays: Array,
- equipmentProductWeeks: Array,
- equipmentProductMonths: Array,
- equipmentProductAll: Array,
-}
-
-export interface EquipmentMonitorEntityInterface {
- Line_1: EquipmentLine,
- Line_2: EquipmentLine,
- Line_3: EquipmentLine,
- Line_4: EquipmentLine
-}
-
-const emptyEquipmentLine: EquipmentLine = {
- equipmentAlarm: [],
- equipmentTickCounts: [],
- equipmentOees: [],
- equipmentProductDays: [],
- equipmentProductWeeks: [],
- equipmentProductMonths: [],
- equipmentProductAll: [],
-}
-
-const initialState: EquipmentMonitorEntityInterface = {
- Line_1: emptyEquipmentLine,
- Line_2: emptyEquipmentLine,
- Line_3: emptyEquipmentLine,
- Line_4: emptyEquipmentLine
-}
-
-export const EquipmentMonitorEntity = createSlice({
- name: 'EquipmentMonitorEntity',
- initialState,
- reducers: {
- UpdateEquipmentMonitorEntity: (state, action) => {
- if (action.payload.toString().includes('客户端')) {
- } else {
- const BasicEquipmentMonitorEntity = JSON.parse(action.payload);
- state.Line_1 = BasicEquipmentMonitorEntity.Line_1;
- state.Line_2 = BasicEquipmentMonitorEntity.Line_2;
- state.Line_3 = BasicEquipmentMonitorEntity.Line_3;
- state.Line_4 = BasicEquipmentMonitorEntity.Line_4;
- }
- },
- }
-})
-
-export const {UpdateEquipmentMonitorEntity} = EquipmentMonitorEntity.actions;
-
-export const selectAllLineEquipmentData = (state: RootState) => state.EquipmentMonitorEntity;
-
-export default EquipmentMonitorEntity.reducer;
\ No newline at end of file
diff --git a/src/store/LeaderPageSlice.ts b/src/store/LeaderPageSlice.ts
new file mode 100644
index 0000000..aedeae6
--- /dev/null
+++ b/src/store/LeaderPageSlice.ts
@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit";
+import type { RootState } from "./store";
+interface allLineInterface {
+ lastMonthMap:{},
+ lastYearMap:{},
+ monthMap:{},
+ numAlarm?:number,
+ numDet:[],
+ todayMap:{},
+ yearMap:{},
+ yesterdayMap:{}
+}
+const initialState = {
+ allLine:{} as allLineInterface
+};
+export const LeaderPageSlice = createSlice({
+ name: "LeaderPageSlice",
+ initialState,
+ reducers: {
+ UpdateAllLine: (state, action) => {
+ state.allLine = action.payload;
+ }
+ }
+})
+export const {
+ UpdateAllLine
+} = LeaderPageSlice.actions;
+export const selectAllLine = (state: RootState) =>
+ state.LeaderPageSlice.allLine;
+export default LeaderPageSlice.reducer;
\ No newline at end of file
diff --git a/src/store/LinePageSlice.ts b/src/store/LinePageSlice.ts
index 39ac7a1..f6a25d6 100644
--- a/src/store/LinePageSlice.ts
+++ b/src/store/LinePageSlice.ts
@@ -1,16 +1,16 @@
import { createSlice } from "@reduxjs/toolkit";
import type { RootState } from "./store";
const initialState = {
- "line1_1":{},
- "line1After":{},
- "line2Before":{},
- "line2After":{},
- "line3Before":{},
- "line3After":{},
- "line4Before":{},
- "line4After":{},
- "line5Before":{},
- "line5After":{}
+ line1_1:{},
+ line1_2:{},
+ line2_1:{},
+ line2_2:{},
+ line3_1:{},
+ line3_2:{},
+ line4_1:{},
+ line4_2:{},
+ line5_1:{},
+ line5_2:{}
};
export const LinePageSlice = createSlice({
name: "LinePageSlice",
@@ -19,11 +19,65 @@ export const LinePageSlice = createSlice({
UpdateLine1Before: (state, action) => {
state.line1_1 = action.payload;
},
+ UpdateLine1After: (state, action) => {
+ state.line1_2 = action.payload;
+ },
+ UpdateLine2Before: (state, action) => {
+ state.line2_1 = action.payload;
+ },
+ UpdateLine2After: (state, action) => {
+ state.line2_2 = action.payload;
+ },
+ UpdateLine3Before: (state, action) => {
+ state.line3_1 = action.payload;
+ },
+ UpdateLine3After: (state, action) => {
+ state.line3_2 = action.payload;
+ },
+ UpdateLine4Before: (state, action) => {
+ state.line4_1 = action.payload;
+ },
+ UpdateLine4After: (state, action) => {
+ state.line4_2 = action.payload;
+ },
+ UpdateLine5Before: (state, action) => {
+ state.line5_1 = action.payload;
+ },
+ UpdateLine5After: (state, action) => {
+ state.line5_2 = action.payload;
+ },
}
})
export const {
- UpdateLine1Before
+ UpdateLine1Before,
+ UpdateLine1After,
+ UpdateLine2Before,
+ UpdateLine2After,
+ UpdateLine3Before,
+ UpdateLine3After,
+ UpdateLine4Before,
+ UpdateLine4After,
+ UpdateLine5Before,
+ UpdateLine5After,
} = LinePageSlice.actions;
export const selectLine1Before = (state: RootState) =>
state.LinePageSlice.line1_1;
+export const selectLine1After = (state: RootState) =>
+ state.LinePageSlice.line1_2;
+export const selectLine2Before = (state: RootState) =>
+ state.LinePageSlice.line2_1;
+export const selectLine2After = (state: RootState) =>
+ state.LinePageSlice.line2_2;
+export const selectLine3Before = (state: RootState) =>
+ state.LinePageSlice.line3_1;
+export const selectLine3After = (state: RootState) =>
+ state.LinePageSlice.line3_2;
+export const selectLine4Before = (state: RootState) =>
+ state.LinePageSlice.line4_1;
+export const selectLine4After = (state: RootState) =>
+ state.LinePageSlice.line4_2;
+export const selectLine5Before = (state: RootState) =>
+ state.LinePageSlice.line5_1;
+export const selectLine5After = (state: RootState) =>
+ state.LinePageSlice.line5_2;
export default LinePageSlice.reducer;
\ No newline at end of file
diff --git a/src/store/ProductionMonitoringEntity.ts b/src/store/ProductionMonitoringEntity.ts
deleted file mode 100644
index 42fdc3e..0000000
--- a/src/store/ProductionMonitoringEntity.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-import {createSlice} from "@reduxjs/toolkit";
-import type {RootState} from "./store";
-
-export interface alarm {
- alarmContent: string;
- alarmTime: string;
- alarmCode: string;
-}
-
-export interface ProductionDet {
- lineName: string;
- inputNum: number;
- outputNum: number;
- passRate: number;
-}
-
-export interface ProductionRate {
- lineName: string;
- lineId: number;
- lineExCode: string;
- passRate: number;
- time: number;
-}
-
-export interface RateLine {
- Line_1: Array,
- Line_2: Array,
- Line_3: Array,
- Line_4: Array,
-}
-
-export interface SingleGlassStatus {
- lineViewCode: string,
- status: number
-}
-
-export interface GlassStatus {
- LINE_1_1: number,
- LINE_1_2U: number,
- LINE_1_2D: number,
- LINE_1_3: number,
- LINE_1_4: number,
- LINE_2_1: number,
- LINE_2_2U: number,
- LINE_2_2D: number,
- LINE_2_3: number,
- LINE_2_4: number,
- LINE_3_1: number,
- LINE_3_2U: number,
- LINE_3_2D: number,
- LINE_3_3: number,
- LINE_3_4: number,
- LINE_4_1: number,
- LINE_4_2U: number,
- LINE_4_2D: number,
- LINE_4_3: number,
- LINE_4_4: number,
-}
-
-const initLineGlassStatus: GlassStatus = {
- LINE_1_1: 1,
- LINE_1_2U: 1,
- LINE_1_2D: 1,
- LINE_1_3: 1,
- LINE_1_4: 1,
- LINE_2_1: 1,
- LINE_2_2U: 1,
- LINE_2_2D: 1,
- LINE_2_3: 1,
- LINE_2_4: 1,
- LINE_3_1: 1,
- LINE_3_2U: 1,
- LINE_3_2D: 1,
- LINE_3_3: 1,
- LINE_3_4: 1,
- LINE_4_1: 1,
- LINE_4_2U: 1,
- LINE_4_2D: 1,
- LINE_4_3: 1,
- LINE_4_4: 1,
-}
-
-export interface ProductionMonitoringEntityInterface {
- sumNumber: number;
- alarms: Array;
- sumProductionDets: Array;
- todayProductionDets: Array;
- weekProductionDets: Array;
- monthProductionDets: Array;
- todayProductionRates: RateLine,
- weekProductionRates: RateLine,
- monthProductionRates: RateLine,
- lineGlassStatus: GlassStatus,
-}
-
-const emptyProductionRates: RateLine = {
- Line_4: [
- {
- "lineId": 1,
- "lineName": "产线1",
- "lineExCode": "Line_1",
- "passRate": 101.88,
- "time": 1676840400000
- },
- ],
- Line_3: [
- {
- "lineId": 1619974755856867329,
- "lineName": "产线3",
- "lineExCode": "Line_3",
- "passRate": 32.04,
- "time": 1676822400000
- }
- ],
- Line_2: [
- {
- "lineId": 1619974755856867329,
- "lineName": "产线3",
- "lineExCode": "Line_3",
- "passRate": 32.04,
- "time": 1676822400000
- }
- ],
- Line_1: [
- {
- "lineId": 1619974755856867329,
- "lineName": "产线3",
- "lineExCode": "Line_3",
- "passRate": 32.04,
- "time": 1676822400000
- }
- ]
-}
-
-const initialState: ProductionMonitoringEntityInterface = {
- sumNumber: 0,
- alarms: [],
- sumProductionDets: [],
- todayProductionDets: [],
- weekProductionDets: [],
- monthProductionDets: [],
- todayProductionRates: emptyProductionRates,
- weekProductionRates: emptyProductionRates,
- monthProductionRates: emptyProductionRates,
- lineGlassStatus: initLineGlassStatus,
-}
-
-export const ProductionMonitoringEntity = createSlice({
- name: 'ProductionMonitoringEntity',
- initialState,
- reducers: {
- UpdateProductionMonitoringEntity: (state, action) => {
- if (action.payload.toString().includes('客户端')) {
- } else {
- const ProductionMonitoringEntityData = JSON.parse(action.payload);
-
- //sumNumber
- state.sumNumber = ProductionMonitoringEntityData.alarms.length;
-
- //alarms
- state.alarms = [];
- for (let i = 0; i < 6; i++) {
- state.alarms.push({
- alarmContent: ProductionMonitoringEntityData.alarms[i].alarmContent,
- alarmCode: ProductionMonitoringEntityData.alarms[i].alarmCode,
- alarmTime: new Date(ProductionMonitoringEntityData.alarms[i].alarmTime).toLocaleDateString(),
- }
- )
- }
-
- //sumProductionDets
- state.sumProductionDets = ProductionMonitoringEntityData.sumProductionDets;
-
- //todayProductionDets
- state.todayProductionDets = ProductionMonitoringEntityData.todayProductionDets;
-
-
- //weekProductionDets
- state.weekProductionDets = ProductionMonitoringEntityData.weekProductionDets;
-
- //monthProductionDets
- state.monthProductionDets = ProductionMonitoringEntityData.monthProductionDets;
-
- //todayProductionRates
- state.todayProductionRates = ProductionMonitoringEntityData.todayProductionRates;
-
- //weekProductionRates
- state.weekProductionRates = ProductionMonitoringEntityData.weekProductionRates;
-
- //monthProductionRates
- state.monthProductionRates = ProductionMonitoringEntityData.monthProductionRates;
-
- }
- },
- UpdateGlassStatus: (state, action) => {
- //lineGlassStatus
- state.lineGlassStatus = action.payload;
- }
- }
-})
-
-export const {UpdateProductionMonitoringEntity, UpdateGlassStatus} = ProductionMonitoringEntity.actions;
-
-export const selectAlarms = (state: RootState) => state.ProductionMonitoringEntity.alarms;
-export const selectSumNumber = (state: RootState) => state.ProductionMonitoringEntity.sumNumber;
-export const selectSumProductionDets = (state: RootState) => state.ProductionMonitoringEntity.sumProductionDets;
-export const selectTodayProductionDets = (state: RootState) => state.ProductionMonitoringEntity.todayProductionDets;
-export const selectWeekProductionDets = (state: RootState) => state.ProductionMonitoringEntity.weekProductionDets;
-export const selectMonthProductionDets = (state: RootState) => state.ProductionMonitoringEntity.monthProductionDets;
-export const selectTodayProductionRates = (state: RootState) => state.ProductionMonitoringEntity.todayProductionRates;
-export const selectWeekProductionRates = (state: RootState) => state.ProductionMonitoringEntity.weekProductionRates;
-export const selectMonthProductionRates = (state: RootState) => state.ProductionMonitoringEntity.monthProductionRates;
-export const selectGlassStatus = (state: RootState) => state.ProductionMonitoringEntity.lineGlassStatus;
-export default ProductionMonitoringEntity.reducer;
\ No newline at end of file
diff --git a/src/store/QualityMonitorEntity.ts b/src/store/QualityMonitorEntity.ts
deleted file mode 100644
index dfc9a8a..0000000
--- a/src/store/QualityMonitorEntity.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import {createSlice} from "@reduxjs/toolkit";
-import type {RootState} from "./store";
-
-export interface Quality {
- num: number;
- sort: number;
- content: string;
-}
-
-export interface QualityLineAll {
- Line_1: Array;
- Line_2: Array;
- Line_3: Array;
- Line_4: Array;
-}
-
-export interface QualityMonitorEntityInterface {
- todayQualityAll: Array;
- weekQualityAll: Array;
- monthQualityAll: Array;
- todayQualityLineAll: QualityLineAll;
- weekQualityLineAll: QualityLineAll;
- monthQualityLineAll: QualityLineAll;
-}
-
-const emptyQualityLineAll: QualityLineAll = {
- Line_1: [],
- Line_2: [],
- Line_3: [],
- Line_4: []
-}
-
-const initialState: QualityMonitorEntityInterface = {
- todayQualityAll: [],
- weekQualityAll: [],
- monthQualityAll: [],
- todayQualityLineAll: emptyQualityLineAll,
- weekQualityLineAll: emptyQualityLineAll,
- monthQualityLineAll: emptyQualityLineAll
-}
-
-export const QualityMonitorEntity = createSlice({
- name: 'QualityMonitorEntity',
- initialState,
- reducers: {
- UpdateQualityMonitorEntity: (state, action) => {
- if (action.payload.toString().includes('客户端')) {
- } else {
- const QualityMonitorEntityData = JSON.parse(action.payload);
- state.todayQualityAll = QualityMonitorEntityData.todayQualityAll;
- state.weekQualityAll = QualityMonitorEntityData.weekQualityAll;
- state.monthQualityAll = QualityMonitorEntityData.monthQualityAll;
- state.todayQualityLineAll = QualityMonitorEntityData.todayQualityLineAll;
- state.weekQualityLineAll = QualityMonitorEntityData.weekQualityLineAll;
- state.monthQualityLineAll = QualityMonitorEntityData.monthQualityLineAll;
- }
- }
- }
-})
-
-export const {UpdateQualityMonitorEntity} = QualityMonitorEntity.actions
-
-export const selectQualityMonitorEntity = (state: RootState) => state.QualityMonitorEntity;
-export default QualityMonitorEntity.reducer;
\ No newline at end of file
diff --git a/src/store/UpdateData.tsx b/src/store/UpdateData.tsx
index eb8e28b..4b1a019 100644
--- a/src/store/UpdateData.tsx
+++ b/src/store/UpdateData.tsx
@@ -1,87 +1,101 @@
-import React, {useState} from "react";
-import {useAppDispatch, useAppSelector} from "./hooks";
+import {useState} from "react";
+import {useAppDispatch} from "./hooks";
import axios from "axios";
-import {UpdateLine1Before} from "./LinePageSlice"
-
-//将消息显示在网页上
-// @ts-ignore
-function setMessageInnerHTML(innerHTML) {
- console.log(innerHTML)
-}
-
-// let initLineGlassStatus: Object = {
-// LINE_1_1: 1,
-// LINE_1_2U: 1,
-// LINE_1_2D: 1,
-// LINE_1_3: 1,
-// LINE_1_4: 1,
-// LINE_2_1: 1,
-// LINE_2_2U: 1,
-// LINE_2_2D: 1,
-// LINE_2_3: 1,
-// LINE_2_4: 1,
-// LINE_3_1: 1,
-// LINE_3_2U: 1,
-// LINE_3_2D: 1,
-// LINE_3_3: 1,
-// LINE_3_4: 1,
-// LINE_4_1: 1,
-// LINE_4_2U: 1,
-// LINE_4_2D: 1,
-// LINE_4_3: 1,
-// LINE_4_4: 1,
-// }
-
-// function PrepareGlassStatus(action: string) {
-// let FinalGlassStatus = initLineGlassStatus;
-// if (action.includes('客户端')) {
-// return FinalGlassStatus;
-// } else {
-// const ProductionMonitoringEntityData = JSON.parse(action);
-// let JsonData = ProductionMonitoringEntityData.lineGlassStatus;
-// // console.log(JsonData)
-
-// let keys: Array = [];
-// let values: Array = []
-// let newJson = new Object();
-// JsonData.map((item: SingleGlassStatus) => {
-// keys.push(item.lineViewCode);
-// values.push(item.status);
-// })
-// for (let i = 0; i < keys.length; i++) {
-// let keyName = keys[i];
-// // @ts-ignore
-// newJson[keyName] = values[i];
-// }
-// FinalGlassStatus = newJson;
-// // console.log(FinalGlassStatus)
-// return FinalGlassStatus;
-// }
-// }
-
+import {
+ UpdateLine1Before,
+ UpdateLine1After,
+ UpdateLine2Before,
+ UpdateLine2After,
+ UpdateLine3Before,
+ UpdateLine3After,
+ UpdateLine4Before,
+ UpdateLine4After,
+ UpdateLine5Before,
+ UpdateLine5After
+} from "./LinePageSlice"
+import { UpdateAllLine } from "./LeaderPageSlice"
function UpdateData() {
const [myUrl, setUrl] = useState('')
axios.get('/wsconfig.json')
.then((r) => {
setUrl(r.data.url)
})
- let websocketB1 = null;
- let websocketA1 = null;
+ let websocketAllLine = null;
+ let websocket1_1 = null;
+ let websocket1_2 = null;
+ let websocket2_1 = null;
+ let websocket2_2 = null;
+ let websocket3_1 = null;
+ let websocket3_2 = null;
+ let websocket4_1 = null;
+ let websocket4_2 = null;
+ let websocket5_1 = null;
+ let websocket5_2 = null;
+ const dispatch = useAppDispatch();
if ('WebSocket' in window) {
- websocketB1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1");
+ websocketAllLine = new WebSocket("ws://" + myUrl + "/websocket/message?userId=all");
+ websocket1_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1");
+ websocket1_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-2");
+ websocket2_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=2-1");
+ websocket2_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=2-2");
+ websocket3_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=3-1");
+ websocket3_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=3-2");
+ websocket4_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=4-1");
+ websocket4_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=4-2");
+ websocket5_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=5-1");
+ websocket5_2 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=5-2");
//连接成功建立的回调方法
} else {
alert('Not support websocket');
}
// @ts-ignore
- websocketB1.onopen = function (event) {
- setMessageInnerHTML("websocketB1-open");
+ websocketAllLine.onopen = function (event) {
+ console.log("websocketAllLine-open");
+ }
+ // @ts-ignore
+ websocket1_1.onopen = function (event) {
+ console.log("websocket1_1-open");
+ }
+ // @ts-ignore
+ websocket1_2.onopen = function (event) {
+ console.log("websocket1_2-open");
+ }
+ // @ts-ignore
+ websocket2_1.onopen = function (event) {
+ console.log("websocket2_1-open");
+ }
+ // @ts-ignore
+ websocket2_2.onopen = function (event) {
+ console.log("websocket2_2-open");
+ }
+ // @ts-ignore
+ websocket3_1.onopen = function (event) {
+ console.log("websocket3_1-open");
+ }
+ // @ts-ignore
+ websocket3_2.onopen = function (event) {
+ console.log("websocket3_2-open");
+ }
+ // @ts-ignore
+ websocket4_1.onopen = function (event) {
+ console.log("websocket4_1-open");
+ }
+ // @ts-ignore
+ websocket4_2.onopen = function (event) {
+ console.log("websocket4_2-open");
+ }
+ // @ts-ignore
+ websocket5_1.onopen = function (event) {
+ console.log("websocket5_1-open");
+ }
+ // @ts-ignore
+ websocket5_2.onopen = function (event) {
+ console.log("websocket5_2-open");
}
//接收到消息的回调方法
// @ts-ignore
- websocketB1.onmessage = function (event) {
- console.log('接收到消息：',event.data)
+ websocketAllLine.onmessage = function (event) {
let msgData = event.data
try {
msgData = JSON.parse(event.data);
@@ -89,15 +103,119 @@ function UpdateData() {
console.log("websocket: [unable to msgData] : ", event.data);
}
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
- console.log(msgData)
- dispatch(UpdateLine1Before(msgData.data));
+ dispatch(UpdateAllLine(msgData));
}
-
- const dispatch = useAppDispatch();
-
- return (
- null
- )
+ // @ts-ignore
+ websocket1_1.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine1Before(msgData));
+ }
+ // @ts-ignore
+ websocket1_2.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine1After(msgData));
+ }
+ // @ts-ignore
+ websocket2_1.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine2Before(msgData));
+ }
+ // @ts-ignore
+ websocket2_2.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine2After(msgData));
+ }
+ // @ts-ignore
+ websocket3_1.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine3Before(msgData));
+ }
+ // @ts-ignore
+ websocket3_2.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine3After(msgData));
+ }
+ // @ts-ignore
+ websocket4_1.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine4Before(msgData));
+ }
+ // @ts-ignore
+ websocket4_2.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine4After(msgData));
+ }
+ // @ts-ignore
+ websocket5_1.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine5Before(msgData));
+ }
+ // @ts-ignore
+ websocket5_2.onmessage = function (event) {
+ let msgData = event.data
+ try {
+ msgData = JSON.parse(event.data);
+ } catch (error) {
+ console.log("websocket: [unable to msgData] : ", event.data);
+ }
+ if (!Object.prototype.toString.call(msgData).includes('Object')) return;
+ dispatch(UpdateLine5After(msgData));
+ }
+ return null;
}
export default UpdateData;
\ No newline at end of file
diff --git a/src/store/myDataSlice.ts b/src/store/myDataSlice.ts
deleted file mode 100644
index a162cc0..0000000
--- a/src/store/myDataSlice.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {createSlice} from "@reduxjs/toolkit";
-import type {RootState} from "./store";
-
-export interface MyDataSlice {
- value: number;
-}
-
-const initialState: MyDataSlice = {
- value: 0,
-}
-
-export const myDataSlice = createSlice({
- name: 'myData',
- initialState,
- reducers: {
- addMyData: (state) => {
- state.value += 1
- }
- },
-})
-
-export const {addMyData} = myDataSlice.actions;
-
-export const selectMyData = (state: RootState) => state.myData.value;
-
-export default myDataSlice.reducer;
-
diff --git a/src/store/store.ts b/src/store/store.ts
index 6c9986d..679fdb1 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -1,26 +1,14 @@
import {configureStore} from '@reduxjs/toolkit';
-import myDataReducer from "./myDataSlice";
-import ProductionMonitoringEntityReducer from "./ProductionMonitoringEntity";
-import ChangeCssReducer from "./ChangeLangAndCss";
import ChangeLineIDReducer from "./ChangeLineID";
-import EquipmentMonitorEntityReducer from "./EquipmentMonitorEntity";
-import QualityMonitorEntityReducer from "./QualityMonitorEntity"
-import ChangeSwitchStateReducer from "./ChangeSwitchState"
-import EquStatusEntityReducer, {EquStatusEntity} from "./EquStatusEntity"
import LinePageReducer from "./LinePageSlice"
+import LeaderPageReducer from './LeaderPageSlice';
export const store = configureStore({
reducer: {
- myData: myDataReducer,
- ProductionMonitoringEntity: ProductionMonitoringEntityReducer,
- ChangeCss: ChangeCssReducer,
ChangeLineID: ChangeLineIDReducer,
- EquipmentMonitorEntity: EquipmentMonitorEntityReducer,
- QualityMonitorEntity: QualityMonitorEntityReducer,
- ChangeSwitchState: ChangeSwitchStateReducer,
- EquStatusEntity: EquStatusEntityReducer,
LinePageSlice: LinePageReducer,
+ LeaderPageSlice: LeaderPageReducer
},
})
;
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..967a5a0
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,56 @@
+/**
+ * 将数字或字符串数字转换成每3位加一个逗号的格式
+ * @param {number | string} num - 需要格式化的数字或字符串数字
+ * @returns {string} - 格式化后的字符串
+ */
+export const formatNumberWithCommas = (num: number | string): string => {
+ // 将输入转换为字符串
+ const numStr = num.toString();
+
+ // 使用正则表达式来匹配每3位数字，并在其前面添加逗号
+ // 注意：这里使用了正向前瞻(?=...)来确保逗号不会加在数字的开头
+ return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
+/**
+ * 将字符串解析为数字，并最多保留两位小数
+ * @param {string} str - 需要解析的字符串
+ * @param {boolean} [returnAsNumber=false] - 如果为 true，则返回数字类型；否则返回字符串类型
+ * @returns {string | number} - 解析并格式化后的数字，根据 returnAsNumber 参数返回字符串或数字
+ * @throws {Error} - 如果输入字符串不是有效的数字表示
+ */
+export const parseAndFormatStringToTwoDecimalPlaces = (str: string, returnAsNumber?: boolean): string | number => {
+ // 尝试将字符串解析为数字
+ const num = parseFloat(str);
+
+ // 检查解析是否成功
+ if (isNaN(num)) {
+ throw new Error('Input string is not a valid number');
+ }
+
+ // 使用 toFixed 方法将数字格式化为最多两位小数的字符串
+ const formattedStr = num.toFixed(2);
+
+ // 如果要求返回数字类型，则使用 parseFloat 转换字符串（尽管这里已经是数字了，但为了一致性还是转一下）
+ if (returnAsNumber) {
+ return parseFloat(formattedStr);
+ }
+
+ // 默认返回字符串类型
+ return formattedStr;
+};
+
+// 使用示例
+try {
+ const formattedStr = parseAndFormatStringToTwoDecimalPlaces("123.45678");
+ const formattedNum = parseAndFormatStringToTwoDecimalPlaces("987.654321", true);
+ console.log(formattedStr); // 输出: "123.46"
+ console.log(formattedNum); // 输出: 987.65
+} catch (error) {
+ console.error(error);
+}
+
+
+
+
+
+ 报警
+
+ ) : (
+ <>
+ 
+ 正常
+
+ )}
+
+ 
+ 离线
+
+ )}
+
+