72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import ReactECharts from "echarts-for-react";
|
|
import TitleBox from "../Component/TitleBox";
|
|
import getOptions from "../../Component/BarLineChart/chart.config";
|
|
import {useAppSelector} from "./../../../store/hooks"
|
|
import { selectAllLine } from "./../../../store/LeaderPageSlice";
|
|
function LeftDown() {
|
|
const data = useAppSelector(selectAllLine);
|
|
interface Detail {
|
|
time: string;
|
|
input: string;
|
|
output: string;
|
|
Yield: string;
|
|
}
|
|
interface DataSource {
|
|
time: string[];
|
|
input: number[];
|
|
output: number[];
|
|
yield: number[];
|
|
}
|
|
let dataSource:DataSource = {
|
|
time:[],
|
|
input:[],
|
|
output:[],
|
|
yield:[]
|
|
};
|
|
if (data.numDet && Array.isArray(data.numDet)) {
|
|
(data.numDet as Detail[]).forEach((item: Detail) => {
|
|
dataSource.time.push(item.time);
|
|
dataSource.input.push(Number(item.input));
|
|
dataSource.output.push(Number(item.output));
|
|
dataSource.yield.push(Number(item.Yield));
|
|
})
|
|
}else{
|
|
dataSource.time = []
|
|
dataSource.input = []
|
|
dataSource.output = []
|
|
dataSource.yield = []
|
|
}
|
|
const options1 = getOptions(dataSource);
|
|
return(
|
|
<div className="ld_left_down">
|
|
<TitleBox title={"left_down"} />
|
|
{
|
|
dataSource.time.length>0?(
|
|
<div>
|
|
<div className="top_legend">
|
|
<span className="chart_legend_icon1">投入</span>
|
|
<span className="chart_legend_icon2">产出</span>
|
|
<span><span className="chart_legend_icon3"></span>良品率</span>
|
|
</div>
|
|
<div style={{ width: "402px", height: "288px" }}>
|
|
<ReactECharts option={options1} style={{ height: "100%" }} />
|
|
</div>
|
|
</div>
|
|
):(<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "50px",
|
|
margin:0
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>)
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
export default LeftDown; |