5个页面的ws接口
This commit is contained in:
273
src/page/LinePage1-2/Right/RightDown.tsx
Normal file
273
src/page/LinePage1-2/Right/RightDown.tsx
Normal file
@@ -0,0 +1,273 @@
|
||||
import ReactECharts from "echarts-for-react";
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import SwitchButton from "../Component/SwitchButton";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import { useState } from "react";
|
||||
import getOptions from "../../Component/LineChartRight/chart.config";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
import moment from "moment";
|
||||
function RightDown() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
// console.log('页面数据：',data)
|
||||
// 假数据
|
||||
let tempData = [
|
||||
{
|
||||
type: "day",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "week",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "month",
|
||||
data: {
|
||||
time: [] as string[],
|
||||
input: [] as number[],
|
||||
output: [] as number[],
|
||||
},
|
||||
},
|
||||
];
|
||||
const nameList = [
|
||||
{ name: "表单", ename: "table" },
|
||||
{ name: "折线", ename: "chart" },
|
||||
];
|
||||
const [activeName, setActiveName] = useState<string>(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 (
|
||||
<div className="right_down">
|
||||
<TitleBox title={"right_down"} />
|
||||
<div className="left_up_switch">
|
||||
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
||||
</div>
|
||||
<div style={{ padding: "10px", height: "628px" }}>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">当天</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr1.length>0?<ScrollBoard
|
||||
config={configDay}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[0].data.time.length>0 ? (
|
||||
<ReactECharts option={options1} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本周</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr2.length>0?<ScrollBoard
|
||||
config={configWeek}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[1].data.time.length>0 ? (
|
||||
<ReactECharts option={options2} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="left_down_title flex-row">
|
||||
<div className="left_down_box1 flex-col" />
|
||||
<span className="left_down_text">本月</span>
|
||||
<div className="left_down_box2 flex-col" />
|
||||
</div>
|
||||
<div className="right_down_content">
|
||||
{activeName === "table" ? (
|
||||
arr3.length>0?<ScrollBoard
|
||||
config={configMonth}
|
||||
style={{ width: "380px", height: "180px" }}
|
||||
/>:(
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)
|
||||
) : tempData[2].data.time.length>0 ? (
|
||||
<ReactECharts option={options3} style={{ height: "100%" }} />
|
||||
) : (
|
||||
<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightDown;
|
||||
52
src/page/LinePage1-2/Right/RightUp.tsx
Normal file
52
src/page/LinePage1-2/Right/RightUp.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import TitleBox from "../Component/TitleBox";
|
||||
import ScrollBoard from "./../../Component/ScrollBoard";
|
||||
import {useAppSelector} from "./../../../store/hooks"
|
||||
import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
headerBGC: "rgba(79, 114, 136, 0.3)",
|
||||
oddRowBGC: "rgba(79, 114, 136, 0.3)",
|
||||
evenRowBGC: "rgba(76, 97, 123, 0.1)",
|
||||
columnWidth: [70, 90, 106, 114],
|
||||
data: [],
|
||||
};
|
||||
let arr:any = []
|
||||
// @ts-ignore
|
||||
if (data.sumProductionDets && data.sumProductionDets.length > 0) {
|
||||
// @ts-ignore
|
||||
data.sumProductionDets.map((item, index) => {
|
||||
let arrInner = []
|
||||
arrInner.push(index + 1, item.lineName, item.inputNum, item.outputNum)
|
||||
arr.push(arrInner)
|
||||
})
|
||||
}
|
||||
config.data = arr
|
||||
return (
|
||||
<div className="right_up">
|
||||
<TitleBox title={"right_up"} />
|
||||
<div style={{ padding: "10px", height: "213px" }}>
|
||||
{arr.length>0?<ScrollBoard
|
||||
config={config}
|
||||
style={{ width: "380px", height: "193px" }}
|
||||
/>:(<p
|
||||
style={{
|
||||
color: "#cccf",
|
||||
fontSize: "24px",
|
||||
userSelect: "none",
|
||||
textAlign: "center",
|
||||
paddingTop: "50px",
|
||||
margin:0
|
||||
}}
|
||||
>
|
||||
暂无数据
|
||||
</p>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default RightUp;
|
||||
12
src/page/LinePage1-2/Right/index.tsx
Normal file
12
src/page/LinePage1-2/Right/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import RightDown from "./RightDown";
|
||||
import RightUp from "./RightUp";
|
||||
|
||||
function Right() {
|
||||
return (
|
||||
<div className="group_right flex-col">
|
||||
<RightUp />
|
||||
<RightDown />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default Right;
|
||||
Reference in New Issue
Block a user