274 lines
8.4 KiB
TypeScript
274 lines
8.4 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/LineChartRight/chart.config";
|
|
import {useAppSelector} from "./../../../store/hooks"
|
|
import {selectLine3After} from "./../../../store/LinePageSlice"
|
|
import dayjs from "dayjs";
|
|
function RightDown() {
|
|
const data = useAppSelector(selectLine3After);
|
|
// console.log('页面数据：',data)
|
|
// 假数据
|
|
let tempData = [
|
|
{
|
|
type: "day",
|
|
data: {
|
|
time: [] as string[],
|
|
input: [] as number[],
|
|
output: [] as number[],
|
|
},
|
|
},
|
|
{
|
|
type: "week",
|
|
data: {
|
|
time: [] as string[],
|
|
input: [] as number[],
|
|
output: [] as number[],
|
|
},
|
|
},
|
|
{
|
|
type: "month",
|
|
data: {
|
|
time: [] as string[],
|
|
input: [] as number[],
|
|
output: [] as number[],
|
|
},
|
|
},
|
|
];
|
|
const nameList = [
|
|
{ name: "表单", ename: "table" },
|
|
{ name: "折线", ename: "chart" },
|
|
];
|
|
const [activeName, setActiveName] = useState<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.forEach((item,index)=>{
|
|
let arrInner = [];
|
|
arrInner.push(dayjs(item.recTime).format("HH:mm"),item.inputNum,item.outputNum);
|
|
arr1.push(arrInner);
|
|
tempData[0].data.time.push(dayjs(item.recTime).format("HH:mm"));
|
|
tempData[0].data.input.push(item.inputNum);
|
|
tempData[0].data.output.push(item.outputNum);
|
|
})
|
|
}else{
|
|
tempData[0].data.time = []
|
|
tempData[0].data.input = []
|
|
tempData[0].data.output = []
|
|
}
|
|
// @ts-ignore
|
|
if (data.weekProductionDets && data.weekProductionDets.length > 0) {
|
|
// @ts-ignore
|
|
data.weekProductionDets.forEach((item,index)=>{
|
|
let arrInner = [];
|
|
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
|
arr2.push(arrInner);
|
|
tempData[1].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
|
tempData[1].data.input.push(item.inputNum);
|
|
tempData[1].data.output.push(item.outputNum);
|
|
})
|
|
}else{
|
|
tempData[1].data.time = []
|
|
tempData[1].data.input = []
|
|
tempData[1].data.output = []
|
|
}
|
|
// @ts-ignore
|
|
if (data.monthProductionDets && data.monthProductionDets.length > 0) {
|
|
// @ts-ignore
|
|
data.monthProductionDets.forEach((item,index)=>{
|
|
let arrInner = [];
|
|
arrInner.push(dayjs(item.recTime).format("YYYY/MM/DD"),item.inputNum,item.outputNum);
|
|
arr3.push(arrInner);
|
|
tempData[2].data.time.push(dayjs(item.recTime).format("MM.DD"));
|
|
tempData[2].data.input.push(item.inputNum);
|
|
tempData[2].data.output.push(item.outputNum);
|
|
})
|
|
}else{
|
|
tempData[2].data.time = []
|
|
tempData[2].data.input = []
|
|
tempData[2].data.output = []
|
|
}
|
|
configDay.data = arr1;
|
|
configWeek.data = arr2;
|
|
configMonth.data = arr3;
|
|
|
|
const chartData1 = tempData[0].data;
|
|
const chartData2 = tempData[1].data;
|
|
const chartData3 = tempData[2].data;
|
|
const options1 = getOptions(chartData1);
|
|
const options2 = getOptions(chartData2);
|
|
const options3 = getOptions(chartData3);
|
|
return (
|
|
<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;
|