295 lines
8.5 KiB
TypeScript
295 lines
8.5 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 "./LineChart/chart.config";
|
|
function RightDown() {
|
|
// 假数据
|
|
let tempData = [
|
|
{
|
|
type: "day",
|
|
data: {
|
|
time: [
|
|
"0:00",
|
|
"1:00",
|
|
"2:00",
|
|
"3:00",
|
|
"4:00",
|
|
"5:00",
|
|
"6:00",
|
|
"7:00",
|
|
"8:00",
|
|
"9:00",
|
|
"10:00",
|
|
"11:00",
|
|
"12:00",
|
|
"13:00",
|
|
"14:00",
|
|
"15:00",
|
|
"16:00",
|
|
"17:00",
|
|
"18:00",
|
|
"19:00",
|
|
"20:00",
|
|
"21:00",
|
|
"22:00",
|
|
"23:00",
|
|
],
|
|
input: [
|
|
456, 425, 246, 424, 453, 466, 412, 434, 425, 418, 0, 0, 0, 0, 0, 0, 0,
|
|
0, 0, 0, 0, 0, 0, 0,
|
|
],
|
|
output: [
|
|
432, 401, 232, 398, 421, 439, 378, 411, 400, 394, 0, 0, 0, 0, 0, 0, 0,
|
|
0, 0, 0, 0, 0, 0, 0,
|
|
],
|
|
},
|
|
},
|
|
{
|
|
type: "week",
|
|
data: {
|
|
time: [
|
|
"2024/8/22",
|
|
"2024/8/23",
|
|
"2024/8/24",
|
|
"2024/8/25",
|
|
"2024/8/26",
|
|
"2024/8/27",
|
|
"2024/8/28",
|
|
],
|
|
input: [9753, 10357, 11246, 10123, 9872, 9985, 10352],
|
|
output: [7925, 8216, 9091, 7847, 7589, 8126, 8112],
|
|
},
|
|
},
|
|
{
|
|
type: "month",
|
|
data: {
|
|
time: [
|
|
"2024/8/1",
|
|
"2024/8/2",
|
|
"2024/8/3",
|
|
"2024/8/4",
|
|
"2024/8/5",
|
|
"2024/8/6",
|
|
"2024/8/7",
|
|
"2024/8/8",
|
|
"2024/8/9",
|
|
"2024/8/10",
|
|
"2024/8/11",
|
|
"2024/8/12",
|
|
"2024/8/13",
|
|
"2024/8/14",
|
|
"2024/8/15",
|
|
"2024/8/16",
|
|
"2024/8/17",
|
|
"2024/8/18",
|
|
"2024/8/19",
|
|
"2024/8/20",
|
|
"2024/8/21",
|
|
"2024/8/22",
|
|
"2024/8/23",
|
|
"2024/8/24",
|
|
"2024/8/25",
|
|
"2024/8/26",
|
|
"2024/8/27",
|
|
"2024/8/28",
|
|
"2024/8/29",
|
|
"2024/8/30",
|
|
"2024/8/31",
|
|
],
|
|
input: [
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9813, 9753,
|
|
10357, 11246, 10123, 9872, 9985, 10352, 4235, 0, 0, 0,
|
|
],
|
|
output: [
|
|
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7883, 7925,
|
|
8216, 9091, 7847, 7589, 8126, 8112, 3962, 0, 0, 0,
|
|
],
|
|
},
|
|
},
|
|
];
|
|
const nameList = [
|
|
{ name: "表单", ename: "table" },
|
|
{ name: "折线", ename: "chart" },
|
|
];
|
|
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
|
const handleButtonChange = (activeName: string) => {
|
|
setActiveName(activeName);
|
|
};
|
|
const config = {
|
|
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: [
|
|
["行1列1", "行1列2", "行1列3"],
|
|
["行2列1", "行2列2", "行2列3"],
|
|
["行3列1", "行3列2", "行3列3"],
|
|
["行4列1", "行4列2", "行4列3"],
|
|
["行5列1", "行5列2", "行5列3"],
|
|
["行6列1", "行6列2", "行6列3"],
|
|
["行7列1", "行7列2", "行7列3"],
|
|
["行8列1", "行8列2", "行8列3"],
|
|
["行9列1", "行9列2", "行9列3"],
|
|
["行10列1", "行10列2", "行10列3"],
|
|
],
|
|
};
|
|
const config1 = {
|
|
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 config2 = {
|
|
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 config3 = {
|
|
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 data1Lenght = tempData[0].data.input.length;
|
|
for (let i = 0; i < data1Lenght; i++) {
|
|
(config1.data as any).push([
|
|
tempData[0].data.time ? tempData[0].data.time[i] : "-",
|
|
tempData[0].data.input ? tempData[0].data.input[i] : "-",
|
|
tempData[0].data.output ? tempData[0].data.output[i] : "-",
|
|
]);
|
|
}
|
|
let data2Lenght = tempData[1].data.input.length;
|
|
for (let i = 0; i < data2Lenght; i++) {
|
|
(config2.data as any).push([
|
|
tempData[1].data.time ? tempData[1].data.time[i] : "-",
|
|
tempData[1].data.input ? tempData[1].data.input[i] : "-",
|
|
tempData[1].data.output ? tempData[1].data.output[i] : "-",
|
|
]);
|
|
}
|
|
let data3Lenght = tempData[0].data.input.length;
|
|
for (let i = 0; i < data3Lenght; i++) {
|
|
(config3.data as any).push([
|
|
tempData[2].data.time ? tempData[2].data.time[i] : "-",
|
|
tempData[2].data.input ? tempData[2].data.input[i] : "-",
|
|
tempData[2].data.output ? tempData[2].data.output[i] : "-",
|
|
]);
|
|
}
|
|
|
|
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" ? (
|
|
<ScrollBoard
|
|
config={config1}
|
|
style={{ width: "380px", height: "180px" }}
|
|
/>
|
|
) : options1 ? (
|
|
<ReactECharts option={options1} style={{ height: "100%" }} />
|
|
) : (
|
|
<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "72px",
|
|
}}
|
|
>
|
|
暂无数据
|
|
</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" ? (
|
|
<ScrollBoard
|
|
config={config2}
|
|
style={{ width: "380px", height: "180px" }}
|
|
/>
|
|
) : options2 ? (
|
|
<ReactECharts option={options2} style={{ height: "100%" }} />
|
|
) : (
|
|
<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "72px",
|
|
}}
|
|
>
|
|
暂无数据
|
|
</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" ? (
|
|
<ScrollBoard
|
|
config={config3}
|
|
style={{ width: "380px", height: "180px" }}
|
|
/>
|
|
) : options3 ? (
|
|
<ReactECharts option={options3} style={{ height: "100%" }} />
|
|
) : (
|
|
<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "72px",
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default RightDown;
|