From d142b16df31514b11a5f025ec8e82dc4aa20d7ee Mon Sep 17 00:00:00 2001 From: juzi <819872918@qq.com> Date: Thu, 12 Sep 2024 16:14:54 +0800 Subject: [PATCH] =?UTF-8?q?1-1=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 14 + package.json | 1 + src/App.tsx | 17 +- src/page/Component/BarChart/chart.config.ts | 79 +++++ src/page/Component/ChangeFullButton.tsx | 36 --- src/page/Component/ChangeLangButton.tsx | 19 -- src/page/Component/LineChart/chart.config.ts | 121 ++++++++ .../Component/LineChartRight/chart.config.ts | 99 +++++++ src/page/Component/QualityRightTable.tsx | 51 ---- src/page/Component/StyledTable.tsx | 71 ----- .../Component/SummaryBarChart/chart.config.ts | 128 ++++++++ src/page/Component/SwitchOnOff.tsx | 26 -- src/page/Component/TabPanel.tsx | 19 -- src/page/LinePage/Left/LeftUp.tsx | 4 + src/page/LinePage1_1/Center/CenterDown.tsx | 215 ++++++++++++++ src/page/LinePage1_1/Center/CenterUp.tsx | 12 + src/page/LinePage1_1/Center/index.tsx | 12 + .../Component/SwitchButton/index.css | 19 ++ .../Component/SwitchButton/index.tsx | 65 +++++ .../LinePage1_1/Component/TitleBox/index.css | 13 + .../LinePage1_1/Component/TitleBox/index.tsx | 53 ++++ src/page/LinePage1_1/Left/LeftDown.tsx | 245 ++++++++++++++++ src/page/LinePage1_1/Left/LeftUp.tsx | 229 +++++++++++++++ src/page/LinePage1_1/Left/index.tsx | 11 + src/page/LinePage1_1/Right/RightDown.tsx | 273 ++++++++++++++++++ src/page/LinePage1_1/Right/RightUp.tsx | 52 ++++ src/page/LinePage1_1/Right/index.tsx | 12 + src/page/LinePage1_1/TopP.tsx | 14 + src/page/LinePage1_1/assets/icon/alarm.png | Bin 0 -> 2365 bytes src/page/LinePage1_1/assets/icon/defect.png | Bin 0 -> 2622 bytes src/page/LinePage1_1/assets/icon/finished.png | Bin 0 -> 1700 bytes src/page/LinePage1_1/assets/icon/g.png | Bin 0 -> 2359 bytes .../assets/icon/inputAndOutput.png | Bin 0 -> 2862 bytes src/page/LinePage1_1/assets/icon/num.png | Bin 0 -> 2151 bytes src/page/LinePage1_1/assets/icon/r.png | Bin 0 -> 2110 bytes src/page/LinePage1_1/assets/icon/record.png | Bin 0 -> 1565 bytes src/page/LinePage1_1/assets/icon/y.png | Bin 0 -> 2299 bytes src/page/LinePage1_1/index.css | 264 +++++++++++++++++ src/page/LinePage1_1/index.tsx | 18 ++ src/store/LinePageSlice.ts | 76 ++++- src/store/UpdateData.tsx | 189 +++++++++++- 41 files changed, 2208 insertions(+), 249 deletions(-) create mode 100644 src/page/Component/BarChart/chart.config.ts delete mode 100644 src/page/Component/ChangeFullButton.tsx delete mode 100644 src/page/Component/ChangeLangButton.tsx create mode 100644 src/page/Component/LineChart/chart.config.ts create mode 100644 src/page/Component/LineChartRight/chart.config.ts delete mode 100644 src/page/Component/QualityRightTable.tsx delete mode 100644 src/page/Component/StyledTable.tsx create mode 100644 src/page/Component/SummaryBarChart/chart.config.ts delete mode 100644 src/page/Component/SwitchOnOff.tsx delete mode 100644 src/page/Component/TabPanel.tsx create mode 100644 src/page/LinePage1_1/Center/CenterDown.tsx create mode 100644 src/page/LinePage1_1/Center/CenterUp.tsx create mode 100644 src/page/LinePage1_1/Center/index.tsx create mode 100644 src/page/LinePage1_1/Component/SwitchButton/index.css create mode 100644 src/page/LinePage1_1/Component/SwitchButton/index.tsx create mode 100644 src/page/LinePage1_1/Component/TitleBox/index.css create mode 100644 src/page/LinePage1_1/Component/TitleBox/index.tsx create mode 100644 src/page/LinePage1_1/Left/LeftDown.tsx create mode 100644 src/page/LinePage1_1/Left/LeftUp.tsx create mode 100644 src/page/LinePage1_1/Left/index.tsx create mode 100644 src/page/LinePage1_1/Right/RightDown.tsx create mode 100644 src/page/LinePage1_1/Right/RightUp.tsx create mode 100644 src/page/LinePage1_1/Right/index.tsx create mode 100644 src/page/LinePage1_1/TopP.tsx create mode 100644 src/page/LinePage1_1/assets/icon/alarm.png create mode 100644 src/page/LinePage1_1/assets/icon/defect.png create mode 100644 src/page/LinePage1_1/assets/icon/finished.png create mode 100644 src/page/LinePage1_1/assets/icon/g.png create mode 100644 src/page/LinePage1_1/assets/icon/inputAndOutput.png create mode 100644 src/page/LinePage1_1/assets/icon/num.png create mode 100644 src/page/LinePage1_1/assets/icon/r.png create mode 100644 src/page/LinePage1_1/assets/icon/record.png create mode 100644 src/page/LinePage1_1/assets/icon/y.png create mode 100644 src/page/LinePage1_1/index.css create mode 100644 src/page/LinePage1_1/index.tsx 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 0000000000000000000000000000000000000000..eb335f3598be2d528d90760cc70ce0d1e341b5d6 GIT binary patch literal 2365 zcmV-D3BvY?P)Px-_en%SRA@u(S#5}%R~0_z&d%3rqm58%^R*bI&=?dCs{A@ADVF&+Ui*19-1J_^x>1K;u7KTdn2+ zMA||?8vt=Vf_#erXF=e^hYHz~qqzQJ8sJj{@D-x$^umQBAmCw=a+eBD_izFN00Kk+ zA_5^`835}-z%#YNEid*0BozSVg?IKzh@O@tZ&Su-L$%TBr3}}W2Sn~W1M-Co;-l5# zEi=~xq$dDGgu{y$en=$0;Z9tcjmkjvWc>%3clVk3(0-|Yhw85@Lg1lVVZ({Fg1Bw~ zBSg82ix-{+phNn!?Fk#x$b^p#8RdZRGM;f>a!>%EEf6267dQT5Eg-HNzV*xbRs&+q07?t@42`fV2!{NI+!Z;aYC%FH-?9LR7qT<*k1cKt7z9 z<@he4!>aBpdkdTHeXTM3A`pBwNv$2HZxdY?KcH&8uUGh1|4 zV7P>k-B~Ywbh@-ObBq8EYlCf#@SgPH<}$$L7A&sIZCyW#*jx$3szYdaVeTmj@>_-` zStVt$Zus3w2mLO-R4;CPR{f;ZnErv3@XdH_2vylLl|2Zb;2HW%Jv;Pr?*JCxe2D-) zXCCYdkv(-wovs?#IDdY;e~Zl*4d5{%c#^LT0#7~1sVA4@CLc0FJX+0dd%9-;`xf8$ z8vxyDV#U&)eJT$f^%Vlm6^ofWkK@L7+{WeR%ok-OwKwAHtxDB$#D$>=Q*|H$@n|hS z_;?Bc-ke9In{=2YD=IHu0ttc2^}^K6e0g!BObC<2&+aUw4v0xR|W_6Je` za9#s&yv-9Mw z@$uro(X|?{nxb-R>Q$2R6CLu~I5sT+=QIG<9`dFI0baeKu;tUEh|yXB>~BsTkuv&8 z81RJNS$!rDE7fcoA+&TZ0wNLD{Ccy?S%RG>iUViYY&@O4nOg0C63GwywU&j9gGnK% z)U&sxkONDz8i4O@HB+Ga_msd46I`L{XJlsKYQW0P)6bElLt1Lv_R|0fR4s(4RMP-Z zYRpC|$%v$79lMcE3SNY))-eU`ceTRcz1=)>pfx!hNm=KG&4J)u9U)cf*^l+^fzr}U zM2bc|M<*H=*CsMqfe3%9=LbKY1TaG9iVMx9zZ1x<_UJ>K>DQa*3jvjCUm5@!GZ9%9 za&9&f!pI8VHkz`aL+l^*{NNp(MQ!pZK=d8m{M(6!83afJ#Lbb6u&Y#4@jzo*hfut~ z^|IHf&_qQgqO;?LTeormpQp*&TdnA?0FaH(i>yrd!vOD?wt|goAg!n39bTo{cSr9@TwYcHtQNB2;y2@SPoCrm?Rsu|RslFj zXKq?nM0B|8 zP|Jp1SRW`_RpPO9JfHvsvBfJgZ_GnMGR3Hn&EME+w{}a4UNUBxWM65$FJyKIj7XJg z-;UlxsI)v4q=Z*=ol}WmfQe<172Bd#G!8(6-f+F%O7L!DcQ&3ufXY}J0Lsf#rjW5o zG-o8&&^y}^%p{&B;hg+Yj*3 zN_>*$>i{2M`7X{k|E%ls>zz+olACdRWlW?5AlCAAQK0;y!jBMn!rLmY-+ddOYgg^N56BH8@7irk^6{Ea3bZW*c-+5_nTcvKnvo)?BeSP5TVw1KYC%m-q zR=ALJLsHe?*gVsTuXC*pKtDeTyN@8MF=pbmzjgXCDdm%nDY_ZV`+*p^WMiJV4|WE7 zC80lXH~1X`t#Ae9npDL|f8> zCfnVOrYmrXVisHP7=mAp;P=OH&l6odF!2Nte9ujh^=*vja=S@PfU%7&ZN&Ox$LszX zR~LZJyS_i>5u$33^_oC9d;;(JRi_7Navim!8WMfd@wlt1d>Xf6=-AT@lG)zcyL@p# zxL0}TS&LlH=SM9}iX-CjBJ3GalfV^O=zf~ojL=>s3tjU*`WiH|;uToOx-7uO-{S5$ j_r;0;R!?m2?Jxfe_|i&(ckEB600000NkvXXu0mjfd7*Sb literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..76ed17c949fe97444a60668bf472bc1818c3a487 GIT binary patch literal 2622 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..113ed13c16867d83248332c6f38b976481111b10 GIT binary patch literal 2862 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..e77c4098bc93caa846c3cfbd6d2c2d40091e588b GIT binary patch literal 2151 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 P00000NkvXXu0mjf{bcL% literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..72c796a1eea8c884c76a8b7dc574e0e1db779d8d GIT binary patch literal 2299 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 literal 0 HcmV?d00001 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();