diff --git a/package-lock.json b/package-lock.json index 3f62a41..b063eae 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "jest-resolve": "^27.4.2", "jest-watch-typeahead": "^1.0.0", "mini-css-extract-plugin": "^2.4.5", + "moment": "^2.30.1", "postcss": "^8.4.4", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^6.2.1", @@ -11973,6 +11974,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz", @@ -25921,6 +25930,11 @@ "minimist": "^1.2.6" } }, + "moment": { + "version": "2.30.1", + "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==" + }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 64ae578..dc3b790 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "jest-resolve": "^27.4.2", "jest-watch-typeahead": "^1.0.0", "mini-css-extract-plugin": "^2.4.5", + "moment": "^2.30.1", "postcss": "^8.4.4", "postcss-flexbugs-fixes": "^5.0.2", "postcss-loader": "^6.2.1", diff --git a/src/App.tsx b/src/App.tsx index 7cbaf52..07787da 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -14,6 +14,7 @@ import { selectGlassStatus } from "./store/ProductionMonitoringEntity"; import TestPage from "./page/TestPage"; import LDPage from "./page/LDPage"; import LinePage from "./page/LinePage"; +import LinePage1_1 from "./page/LinePage1_1"; // const LOCALES_LIST = [ // { @@ -65,16 +66,18 @@ function App() { errorElement: , }, /////////////////////////////////////////////////////////////// + // { + // path: "/LP/:LineID?", + // element: , + // errorElement: , + // }, + /////////////////////////////////////////////////////////////// { - path: "/LP/:LineID?", - element: , + path: "/LP/1-1", + element: , errorElement: , }, - // { - // path: "/TP/:LineID?", - // element: , - // errorElement: - // }, + ]); useEffect(() => { const timerId = setInterval(() => { diff --git a/src/page/Component/BarChart/chart.config.ts b/src/page/Component/BarChart/chart.config.ts new file mode 100644 index 0000000..2ca3daa --- /dev/null +++ b/src/page/Component/BarChart/chart.config.ts @@ -0,0 +1,79 @@ +import * as echarts from "echarts"; +export default function getOptions(dataProps: number[],xData:string[], color: string[]) { + if (dataProps.length === 0) return null; + return { + grid: { top: 30, right: 12, bottom: 26, left: 48 }, + legend: { + show: false, + }, + xAxis: { + type: "category", + data: xData, + axisLabel: { + color: "#fff", + fontSize: 12, + interval: 0, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + yAxis: { + name: "单位/片", + nameTextStyle: { + color: "#fff", + fontSize: 12, + }, + type: "value", + axisLabel: { + color: "#fff", + fontSize: 12, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + splitLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + className: "luoyang-chart-tooltip", + show: false, + }, + series: [ + { + data: dataProps, + type: "bar", + barWidth: 10, + label: { + show: true, + fontSize: 12, + color: "#9CD4FF", + position: "top", + }, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: color[0] }, + { offset: 1, color: color[1] }, + ]), + }, + }, + ], + }; +} diff --git a/src/page/Component/ChangeFullButton.tsx b/src/page/Component/ChangeFullButton.tsx deleted file mode 100644 index 6f41e9a..0000000 --- a/src/page/Component/ChangeFullButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, {useState} from "react"; -import intl from "react-intl-universal"; -import '../../lanhuapp/common.css'; -import "../../lanhuapp/index.css"; - -function ChangeFullButton() { - const [isFull, setIsFull] = useState(false); - - function fullExit() { - let element = document.documentElement; - - //HTML5 W3C 提议 - document.exitFullscreen(); - - setIsFull(false) - } - - function fullScreen() { - let element = document.documentElement; - - //HTML W3C 提议 - element.requestFullscreen(); - - setIsFull(true) - } - - const click = () => { - isFull ? fullExit() : fullScreen(); - } - - return ( - + ); + })} + + ); +} +export default SwitchButton; diff --git a/src/page/LinePage1_1/Component/TitleBox/index.css b/src/page/LinePage1_1/Component/TitleBox/index.css new file mode 100644 index 0000000..3ae06db --- /dev/null +++ b/src/page/LinePage1_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/LinePage1_1/Component/TitleBox/index.tsx b/src/page/LinePage1_1/Component/TitleBox/index.tsx new file mode 100644 index 0000000..dd43a66 --- /dev/null +++ b/src/page/LinePage1_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 ( +
+ title + {filteredTitles().title} +
+ ); +} +export default TitleBox; diff --git a/src/page/LinePage1_1/Left/LeftDown.tsx b/src/page/LinePage1_1/Left/LeftDown.tsx new file mode 100644 index 0000000..bfa2591 --- /dev/null +++ b/src/page/LinePage1_1/Left/LeftDown.tsx @@ -0,0 +1,245 @@ +import ReactECharts from "echarts-for-react"; +import TitleBox from "../Component/TitleBox"; +import SwitchButton from "../Component/SwitchButton"; +import ScrollBoard from "./../../Component/ScrollBoard"; +import { useState } from "react"; +import getOptions from "../../Component/BarChart/chart.config"; +import {useAppSelector} from "./../../../store/hooks" +import {selectLine1Before} from "./../../../store/LinePageSlice" +function LeftDown() { + const data = useAppSelector(selectLine1Before); + // console.log('页面数据：',data) + 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: 4, + align: ["center", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [73, 117, 190], + data: [ + ["1", "磨边后", 224], + ["2", "包装1", 322], + ["3", "包装2", 66], + ], + }; + const configWeek = { + header: ["序号", "工序类型", "报废数量"], + headerHeight: 30, + rowNum: 4, + align: ["center", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [73, 117, 190], + data: [ + ["1", "磨边后", 1119], + ["2", "包装1", 1798], + ["3", "包装2", 435], + ], + }; + const configMonth = { + header: ["序号", "工序类型", "报废数量"], + headerHeight: 30, + rowNum: 4, + align: ["center", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [73, 117, 190], + data: [ + ["1", "磨边后", 5004], + ["2", "包装1", 9122], + ["3", "包装2", 1924], + ], + }; + const color1 = ["#9DD5FF", "#1295FF"]; + const color2 = ["#85F6E9", "#2EC6B4"]; + // @ts-ignore + let xData: string[] = data.scrapBars + let dataProps1: number[] = []; + let dataProps2: number[] = []; + let dataProps3: number[] = []; + let arr1: any = []; + let arr2: any = []; + let arr3: any = []; + // @ts-ignore + if (data.todayProductionScraps && data.todayProductionScraps.length > 0) { + // @ts-ignore + data.todayProductionScraps.map((item,index)=>{ + let arrInner = []; + arrInner.push(index+1,item.sectionName,item.scrapNum); + arr1.push(arrInner); + dataProps1.push(item.scrapNum); + }) + }else{ + dataProps1 = [] + } + // @ts-ignore + if (data.weekProductionScraps && data.weekProductionScraps.length > 0) { + // @ts-ignore + data.weekProductionScraps.map((item,index)=>{ + let arrInner = []; + arrInner.push(index+1,item.sectionName,item.scrapNum); + arr2.push(arrInner); + dataProps2.push(item.scrapNum); + }) + }else{ + dataProps2 = [] + } + // @ts-ignore + if (data.monthProductionScraps && data.monthProductionScraps.length > 0) { + // @ts-ignore + data.monthProductionScraps.map((item,index)=>{ + let arrInner = []; + arrInner.push(index+1,item.sectionName,item.scrapNum); + arr3.push(arrInner); + dataProps3.push(item.scrapNum); + }) + }else{ + dataProps3 = [] + } + configDay.data = arr1; + configWeek.data = arr2; + configMonth.data = arr3; + const options1 = getOptions(dataProps1,xData, color1); + const options2 = getOptions(dataProps2,xData, color2); + const options3 = getOptions(dataProps3,xData, color1); + return ( +
+ +
+ +
+
+
+
+ 当天 +
+
+
+ {activeName === "table" ? ( + arr1.length > 0 ? :(

+ 暂无数据 +

) + ) : dataProps1.length>0 ? ( + + ) : ( +

+ 暂无数据 +

+ )} +
+
+
+ 本周 +
+
+
+ {activeName === "table" ? ( + arr2.length > 0 ? :(

+ 暂无数据 +

) + ) : dataProps2.length>0 ? ( + + ) : ( +

+ 暂无数据 +

+ )} +
+
+
+ 本月 +
+
+
+ {activeName === "table" ? ( + arr3.length > 0 ? :(

+ 暂无数据 +

) + ) : dataProps3.length>0 ? ( + + ) : ( +

+ 暂无数据 +

+ )} +
+
+
+ ); +} +export default LeftDown; diff --git a/src/page/LinePage1_1/Left/LeftUp.tsx b/src/page/LinePage1_1/Left/LeftUp.tsx new file mode 100644 index 0000000..a53c437 --- /dev/null +++ b/src/page/LinePage1_1/Left/LeftUp.tsx @@ -0,0 +1,229 @@ +import ReactECharts from "echarts-for-react"; +import TitleBox from "../Component/TitleBox"; +import SwitchButton from "../Component/SwitchButton"; +import getOptions from "../../Component/SummaryBarChart/chart.config"; +import { useState } from "react"; +import {useAppSelector} from "./../../../store/hooks" +import {selectLine1Before} from "./../../../store/LinePageSlice" +function LeftUp() { + const data = useAppSelector(selectLine1Before); + console.log('页面数据：',data) + // 假数据 + const dataSource = { + day: { + xData: [], + series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[], + }, + week: { + xData: [], + series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[], + }, + month: { + xData: [], + series: [] as { data: number[]; type: string; stack: string; name: any; barWidth?: number; label: { show: boolean; position: string; color: string;formatter?:any }; }[], + }, + }; + const nameList = [ + { name: "天", ename: "day" }, + { name: "周", ename: "week" }, + { name: "月", ename: "month" }, + ]; + const [activeName, setActiveName] = useState(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.map((item,index)=>{ + let sumIner = 0 + // @ts-ignore + data.todayAllProductionScraps[item].map((itemInner,indexInner)=>{ + sumIner += itemInner.scrapNum + dataSource.day.series.map((itemSeries,indexSeries)=>{ + // @ts-ignore + if (itemSeries.name === itemInner.sectionName) { + // @ts-ignore + itemSeries.data.push(itemInner.scrapNum) + } + }) + }) + 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.map((item,index)=>{ + let sumIner = 0 + // @ts-ignore + data.weekAllProductionScraps[item].map((itemInner,indexInner)=>{ + sumIner += itemInner.scrapNum + dataSource.week.series.map((itemSeries,indexSeries)=>{ + // @ts-ignore + if (itemSeries.name === itemInner.sectionName) { + // @ts-ignore + itemSeries.data.push(itemInner.scrapNum) + } + }) + }) + 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.map((item,index)=>{ + let sumIner = 0 + // @ts-ignore + data.monthAllProductionScraps[item].map((itemInner,indexInner)=>{ + sumIner += itemInner.scrapNum + dataSource.month.series.map((itemSeries,indexSeries)=>{ + // @ts-ignore + if (itemSeries.name === itemInner.sectionName) { + // @ts-ignore + itemSeries.data.push(itemInner.scrapNum) + } + }) + }) + 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); + return ( +
+ +
+ +
+ {// @ts-ignore + dataSource[activeName].xData.length>0 ? ( +
+ {} +
+ ):( +

+ 暂无数据 +

+ )} +
+ ); +} +export default LeftUp; diff --git a/src/page/LinePage1_1/Left/index.tsx b/src/page/LinePage1_1/Left/index.tsx new file mode 100644 index 0000000..6524b82 --- /dev/null +++ b/src/page/LinePage1_1/Left/index.tsx @@ -0,0 +1,11 @@ +import LeftUp from "./LeftUp"; +import LeftDown from "./LeftDown"; +function Left() { + return ( +
+ + +
+ ); +} +export default Left; diff --git a/src/page/LinePage1_1/Right/RightDown.tsx b/src/page/LinePage1_1/Right/RightDown.tsx new file mode 100644 index 0000000..1af50b3 --- /dev/null +++ b/src/page/LinePage1_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 {selectLine1Before} from "./../../../store/LinePageSlice" +import moment from "moment"; +function RightDown() { + const data = useAppSelector(selectLine1Before); + // 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(moment(item.recTime).format("HH:mm"),item.inputNum,item.outputNum); + arr1.push(arrInner); + tempData[0].data.time.push(moment(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(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); + arr2.push(arrInner); + tempData[1].data.time.push(moment(item.recTime).format("HH:mm")); + 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(moment(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum); + arr3.push(arrInner); + tempData[2].data.time.push(moment(item.recTime).format("HH:mm")); + 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 ? ( + + ) : ( +

+ 暂无数据 +

+ )} +
+
+
+ ); +} +export default RightDown; diff --git a/src/page/LinePage1_1/Right/RightUp.tsx b/src/page/LinePage1_1/Right/RightUp.tsx new file mode 100644 index 0000000..a7d1a46 --- /dev/null +++ b/src/page/LinePage1_1/Right/RightUp.tsx @@ -0,0 +1,52 @@ +import TitleBox from "../Component/TitleBox"; +import ScrollBoard from "./../../Component/ScrollBoard"; +import {useAppSelector} from "./../../../store/hooks" +import {selectLine1Before} from "./../../../store/LinePageSlice" +function RightUp() { + const data = useAppSelector(selectLine1Before); + const config = { + header: ["序号", "产线", "上片数据量", "成品下片数量"], + headerHeight: 32, + rowNum: 5, + align: ["center", "left", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [70, 90, 106, 114], + data: [], + }; + let arr:any = [] + // @ts-ignore + if (data.sumProductionDets && data.sumProductionDets.length > 0) { + // @ts-ignore + data.sumProductionDets.map((item, index) => { + let arrInner = [] + arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum) + arr.push(arrInner) + }) + } + config.data = arr + return ( +
+ +
+ {arr.length>0?:(

+ 暂无数据 +

)} +
+
+ ); +} +export default RightUp; diff --git a/src/page/LinePage1_1/Right/index.tsx b/src/page/LinePage1_1/Right/index.tsx new file mode 100644 index 0000000..53c802a --- /dev/null +++ b/src/page/LinePage1_1/Right/index.tsx @@ -0,0 +1,12 @@ +import RightDown from "./RightDown"; +import RightUp from "./RightUp"; + +function Right() { + return ( +
+ + +
+ ); +} +export default Right; diff --git a/src/page/LinePage1_1/TopP.tsx b/src/page/LinePage1_1/TopP.tsx new file mode 100644 index 0000000..e7c7a64 --- /dev/null +++ b/src/page/LinePage1_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/LinePage1_1/assets/icon/alarm.png b/src/page/LinePage1_1/assets/icon/alarm.png new file mode 100644 index 0000000..eb335f3 Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/alarm.png differ diff --git a/src/page/LinePage1_1/assets/icon/defect.png b/src/page/LinePage1_1/assets/icon/defect.png new file mode 100644 index 0000000..76ed17c Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/defect.png differ diff --git a/src/page/LinePage1_1/assets/icon/finished.png b/src/page/LinePage1_1/assets/icon/finished.png new file mode 100644 index 0000000..99b411b Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/finished.png differ diff --git a/src/page/LinePage1_1/assets/icon/g.png b/src/page/LinePage1_1/assets/icon/g.png new file mode 100644 index 0000000..bf1b107 Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/g.png differ diff --git a/src/page/LinePage1_1/assets/icon/inputAndOutput.png b/src/page/LinePage1_1/assets/icon/inputAndOutput.png new file mode 100644 index 0000000..113ed13 Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/inputAndOutput.png differ diff --git a/src/page/LinePage1_1/assets/icon/num.png b/src/page/LinePage1_1/assets/icon/num.png new file mode 100644 index 0000000..e77c409 Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/num.png differ diff --git a/src/page/LinePage1_1/assets/icon/r.png b/src/page/LinePage1_1/assets/icon/r.png new file mode 100644 index 0000000..d11591e Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/r.png differ diff --git a/src/page/LinePage1_1/assets/icon/record.png b/src/page/LinePage1_1/assets/icon/record.png new file mode 100644 index 0000000..4622f01 Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/record.png differ diff --git a/src/page/LinePage1_1/assets/icon/y.png b/src/page/LinePage1_1/assets/icon/y.png new file mode 100644 index 0000000..72c796a Binary files /dev/null and b/src/page/LinePage1_1/assets/icon/y.png differ diff --git a/src/page/LinePage1_1/index.css b/src/page/LinePage1_1/index.css new file mode 100644 index 0000000..1a28491 --- /dev/null +++ b/src/page/LinePage1_1/index.css @@ -0,0 +1,264 @@ +/* 顶部 */ +.block_top { + width: 1920px; + height: 94px; + background: url(/public/svg/topback.svg) 100% no-repeat; + background-size: 100% 100%; + opacity: 1; + display: flex; + justify-content: center; +} + +.block_top_title { + width: 651px; + height: 77px; + background: url(/public/png/topTiltle.png) 100% no-repeat; + background-size: 100% 100%; + margin-top: 18px; +} +/* 中部 */ +.block_bottom { + width: 1920px; + height: 966px; + padding-top: 20px; +} + +.group_left { + width: 402px; + height: 966px; + margin: 0 0 0 24px; +} + +.group_center { + width: 1041px; + height: 966px; + margin: 0 0 0 15px; +} + +.group_right { + width: 401px; + height: 966px; + margin-left: 15px; +} + +.left_up { + width: 402px; + height: 332px; + background: url(../../../public/png/rect/lp_left_up.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + position: relative; +} +.left_down { + width: 402px; + height: 599px; + background: url(../../../public/png/rect/lp_left_down.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + margin-top: 14px; + position: relative; +} +.center_up { + width: 1041px; + height: 562px; + background: url(../../../public/png/rect/lp_center_up.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + position: relative; +} +.center_down { + width: 1041px; + height: 368px; + margin-top: 17px; +} +.center_down_inner { + width: 513px; + height: 366px; + background: url(../../../public/png/rect/lp_center_down.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + position: relative; +} +.center_down .left-box { + margin-right: 15px; + position: relative; +} +.center_down .left-box .alarm_num_title { + position: absolute; + left: 220px; + top: 22px; + font-size: 13px; + letter-spacing: 3px; + color: #fff; +} +.center_down .left-box .alarm_num { + color: #52fff1; + font-size: 40px; + text-align: center; + font-family: PingFangSC, PingFang SC; +} +.center_down .right_box .chart_box { + width: 100%; + height: 310px; + margin-top: 10px; +} +.right_up { + width: 401px; + height: 257px; + background: url(../../../public/png/rect/lp_right_up.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; +} +.right_down { + width: 401px; + height: 673px; + background: url(../../../public/png/rect/lp_right_down.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + margin-top: 14px; + position: relative; +} +.left_up_switch { + position: absolute; + right: 10px; + top: 12px; +} +.left_up_chart { + height: 275px; + margin-top: 10px; +} +/* 左侧 */ +.left_down_title { + height: 18px; + justify-content: center; + margin-bottom: 4px; +} +.left_down_box1 { + width: 56px; + height: 13px; + background: url(/public/png/leftbar.png) 100% no-repeat; + background-size: 100% 100%; + margin-top: 2px; +} +.left_down_box2 { + width: 56px; + height: 13px; + background: url(/public/png/rightbar.png) 100% no-repeat; + background-size: 100% 100%; + margin: 2px 0 0 0px; +} +.left_down_text { + /*width: 40px;*/ + height: 18px; + overflow-wrap: break-word; + color: rgba(1, 207, 204, 1); + font-size: 18px; + letter-spacing: 5px; + font-family: PingFangSC-Regular; + white-space: nowrap; + line-height: 18px; + margin-left: 18px; + margin-right: 16px; + text-align: center; +} +.left_down_content { + height: 160px; + /* padding-bottom: 5px; */ +} +.right_down_content { + height: 185px; + /* padding-bottom: 5px; */ +} +/* 滚动表格部分 */ +.dv-scroll-board .header .header-item, +.dv-scroll-board .rows .ceil { + border-right: 1px solid #0d1728; +} +.dv-scroll-board .header .header-item:last-child, +.dv-scroll-board .rows .ceil:last-child { + border-right: none; + border: none; +} +/* chart图部分 */ +.luoyang-chart-tooltip { + background: #0a2b4f77 !important; + border: none !important; + backdrop-filter: blur(12px); +} + +.luoyang-chart-tooltip * { + color: #fff !important; +} +/* 三维页面部分 */ +.center_up .model_name { + position: absolute; + left: 0px; + top: 0px; + z-index: 1000; +} +.center_up .model_info { + position: absolute; + left: 100px; + bottom: 0px; + z-index: 1000; + width: 841px; + height: 62px; + background: url(/public/png/lp/line_part.png) 100% no-repeat; + background-size: 100% 100%; +} +.center_up .model_info .reset_btn { + position: absolute; + top: 20px; + left: 40px; + width: 140px; + height: 40px; + cursor: pointer; +} +.center_up .model_info .title { + display: inline-block; + width: 361px; + text-align: center; + font-size: 32px; + color: #fff; + letter-spacing: 5px; + position: absolute; + left: 241px; + bottom: 10px; +} +.center_up .eq_detail_info { + position: absolute; + right: 0px; + bottom: 0px; + z-index: 1002; + width: 240px; + height: 110px; + background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat; + background-size: 100% 100%; + color: #fff; + padding: 15px 0 0 15px; +} +.center_up .eq_detail_info .left_name { + display: inline-block; + width: 95px; + height: 28px; + text-align: right; + font-size: 18px; +} +.center_up .eq_detail_info .right_value { + display: inline-block; + height: 28px; + font-size: 18px; +} +.center_up .eq_info { + position: absolute; + z-index: 1002; + background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat; + background-size: 100% 100%; + color: #fff; + padding: 10px 15px; +} +.center_up .eq_info .eq_info_inner { + height: 24px; + font-size: 17px; + white-space: nowrap; +} diff --git a/src/page/LinePage1_1/index.tsx b/src/page/LinePage1_1/index.tsx new file mode 100644 index 0000000..daf9389 --- /dev/null +++ b/src/page/LinePage1_1/index.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import TopP from "./TopP"; +import Left from "./Left"; +import Right from "./Right"; +import Center from "./Center"; +function LinePage() { + return ( + + +
+ +
+ +
+ + ); +} +export default LinePage; 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/UpdateData.tsx b/src/store/UpdateData.tsx index eb8e28b..ce4d426 100644 --- a/src/store/UpdateData.tsx +++ b/src/store/UpdateData.tsx @@ -2,7 +2,18 @@ import React, {useState} from "react"; import {useAppDispatch, useAppSelector} from "./hooks"; import axios from "axios"; -import {UpdateLine1Before} from "./LinePageSlice" +import { + UpdateLine1Before, + UpdateLine1After, + UpdateLine2Before, + UpdateLine2After, + UpdateLine3Before, + UpdateLine3After, + UpdateLine4Before, + UpdateLine4After, + UpdateLine5Before, + UpdateLine5After +} from "./LinePageSlice" //将消息显示在网页上 // @ts-ignore @@ -66,22 +77,74 @@ function UpdateData() { .then((r) => { setUrl(r.data.url) }) - let websocketB1 = null; - let websocketA1 = 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; if ('WebSocket' in window) { - websocketB1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1"); + 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"); + websocket1_1.onopen = function (event) { + setMessageInnerHTML("websocket1_1-open"); } + // @ts-ignore + // websocket1_2.onopen = function (event) { + // setMessageInnerHTML("websocket1_2-open"); + // } + // // @ts-ignore + // websocket2_1.onopen = function (event) { + // setMessageInnerHTML("websocket1_1-open"); + // } + // // @ts-ignore + // websocket2_2.onopen = function (event) { + // setMessageInnerHTML("websocket1_2-open"); + // } + // // @ts-ignore + // websocket3_1.onopen = function (event) { + // setMessageInnerHTML("websocket1_1-open"); + // } + // // @ts-ignore + // websocket3_2.onopen = function (event) { + // setMessageInnerHTML("websocket1_2-open"); + // } + // // @ts-ignore + // websocket4_1.onopen = function (event) { + // setMessageInnerHTML("websocket1_1-open"); + // } + // // @ts-ignore + // websocket4_2.onopen = function (event) { + // setMessageInnerHTML("websocket1_2-open"); + // } + // // @ts-ignore + // websocket5_1.onopen = function (event) { + // setMessageInnerHTML("websocket1_1-open"); + // } + // // @ts-ignore + // websocket5_2.onopen = function (event) { + // setMessageInnerHTML("websocket1_2-open"); + // } //接收到消息的回调方法 // @ts-ignore - websocketB1.onmessage = function (event) { - console.log('接收到消息：',event.data) + websocket1_1.onmessage = function (event) { let msgData = event.data try { msgData = JSON.parse(event.data); @@ -90,8 +153,116 @@ function UpdateData() { } if (!Object.prototype.toString.call(msgData).includes('Object')) return; console.log(msgData) - dispatch(UpdateLine1Before(msgData.data)); + 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // 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; + // console.log(msgData) + // dispatch(UpdateLine5After(msgData)); + // } const dispatch = useAppDispatch();