251 lines
7.7 KiB
TypeScript
251 lines
7.7 KiB
TypeScript
import ReactECharts from "echarts-for-react";
|
|
import TitleBox from "../Component/TitleBox";
|
|
import SwitchButton from "../Component/SwitchButton";
|
|
import ScrollBoard from "./../../Component/ScrollBoard";
|
|
import { useState } from "react";
|
|
import getOptions from "../../Component/BarChart/chart.config";
|
|
import {useAppSelector} from "./../../../store/hooks"
|
|
import {selectLine1After} from "./../../../store/LinePageSlice"
|
|
function LeftDown() {
|
|
const data = useAppSelector(selectLine1After);
|
|
// console.log('页面数据：',data)
|
|
const nameList = [
|
|
{ name: "表单", ename: "table" },
|
|
{ name: "柱状", ename: "chart" },
|
|
];
|
|
const [activeName, setActiveName] = useState<string>(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, 200, 107],
|
|
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, 200, 107],
|
|
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, 200, 107],
|
|
data: [
|
|
["1", "磨边后", 5004],
|
|
["2", "包装1", 9122],
|
|
["3", "包装2", 1924],
|
|
],
|
|
};
|
|
const color1 = ["#9DD5FF", "#1295FF"];
|
|
const color2 = ["#85F6E9", "#2EC6B4"];
|
|
// @ts-ignore
|
|
let xData1: string[] = [];
|
|
let xData2: string[] = [];
|
|
let xData3: string[] = [];
|
|
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.forEach((item,index)=>{
|
|
let arrInner = [];
|
|
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
|
arr1.push(arrInner);
|
|
xData1.push(item.sectionName);
|
|
dataProps1.push(item.scrapNum || 0);
|
|
})
|
|
}else{
|
|
dataProps1 = []
|
|
}
|
|
// @ts-ignore
|
|
if (data.weekProductionScraps && data.weekProductionScraps.length > 0) {
|
|
// @ts-ignore
|
|
data.weekProductionScraps.forEach((item,index)=>{
|
|
let arrInner = [];
|
|
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
|
arr2.push(arrInner);
|
|
xData2.push(item.sectionName);
|
|
dataProps2.push(item.scrapNum || 0);
|
|
})
|
|
}else{
|
|
dataProps2 = []
|
|
}
|
|
// @ts-ignore
|
|
if (data.monthProductionScraps && data.monthProductionScraps.length > 0) {
|
|
// @ts-ignore
|
|
data.monthProductionScraps.forEach((item,index)=>{
|
|
let arrInner = [];
|
|
arrInner.push(index+1,item.sectionName,item.scrapNum || 0);
|
|
arr3.push(arrInner);
|
|
xData3.push(item.sectionName);
|
|
dataProps3.push(item.scrapNum || 0);
|
|
})
|
|
}else{
|
|
dataProps3 = []
|
|
}
|
|
configDay.data = arr1;
|
|
configWeek.data = arr2;
|
|
configMonth.data = arr3;
|
|
const options1 = getOptions(dataProps1,xData1, color1);
|
|
const options2 = getOptions(dataProps2,xData2, color2);
|
|
const options3 = getOptions(dataProps3,xData3, color1);
|
|
return (
|
|
<div className="left_down">
|
|
<TitleBox title={"left_down"} />
|
|
<div className="left_up_switch">
|
|
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
|
</div>
|
|
<div style={{ padding: "10px", height: "555px" }}>
|
|
<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="left_down_content">
|
|
{activeName === "table" ? (
|
|
arr1.length > 0 ? <ScrollBoard
|
|
config={configDay}
|
|
style={{ width: "380px", height: "150px" }}
|
|
/>:(<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "50px",
|
|
margin:0
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>)
|
|
) : dataProps1.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="left_down_content">
|
|
{activeName === "table" ? (
|
|
arr2.length > 0 ? <ScrollBoard
|
|
config={configWeek}
|
|
style={{ width: "380px", height: "150px" }}
|
|
/>:(<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "50px",
|
|
margin:0
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>)
|
|
) : dataProps2.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="left_down_content">
|
|
{activeName === "table" ? (
|
|
arr3.length > 0 ? <ScrollBoard
|
|
config={configMonth}
|
|
style={{ width: "380px", height: "150px" }}
|
|
/>:(<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "50px",
|
|
margin:0
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>)
|
|
) : dataProps3.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 LeftDown;
|