249 lines
7.3 KiB
TypeScript
249 lines
7.3 KiB
TypeScript
import ReactECharts from "echarts-for-react";
|
|
import TitleBox from "../Component/TitleBox";
|
|
import ScrollBoard from "./../../Component/ScrollBoard";
|
|
import SwitchButton from "../Component/SwitchButton";
|
|
import { useState } from "react";
|
|
import getOptions from "./LineChart/chart.config";
|
|
import { useParams } from "react-router-dom";
|
|
function CenterDown() {
|
|
const { LineID } = useParams();
|
|
const lineID = LineID?.toString() || "1-1";
|
|
console.log(lineID.slice(-1));
|
|
// 假数据
|
|
const dataSource = {
|
|
day: {
|
|
yData1: [76.1, 77.4, 75.2, 74.1, 78.5, 81.3, 79.2],
|
|
yData2: [77.2, 78.1, 78.2, 77.1, 79.2, 78.3, 79.5],
|
|
yData3: [75.1, 74.3, 71.3, 79.8, 82.3, 81.4, 80.3],
|
|
yData4: [82.4, 83.1, 88.4, 85.3, 87.1, 82.5, 84.9],
|
|
yData5: [82.3, 81.9, 85.8, 81.9, 84.1, 83.5, 82.3],
|
|
},
|
|
week: {
|
|
yData1: [120, 200, 150, 80, 100, 89, 69],
|
|
yData2: [100, 150, 120, 70, 90, 97, 89],
|
|
yData3: [80, 120, 90, 60, 80, 79, 98],
|
|
yData4: [60, 90, 70, 40, 60, 69, 98],
|
|
yData5: [40, 60, 50, 20, 40, 89, 99],
|
|
},
|
|
month: {
|
|
yData1: [1200, 2000, 1500, 800, 1000, 999, 889],
|
|
yData2: [1000, 1500, 1200, 700, 900, 987, 897],
|
|
yData3: [800, 1200, 900, 600, 800, 962, 759],
|
|
yData4: [600, 900, 700, 400, 600, 896, 987],
|
|
yData5: [400, 600, 500, 200, 400, 986, 951],
|
|
},
|
|
};
|
|
const nameList = [
|
|
{ name: "天", ename: "day" },
|
|
{ name: "周", ename: "week" },
|
|
{ name: "月", ename: "month" },
|
|
];
|
|
const [activeName, setActiveName] = useState<string>(nameList[0].ename);
|
|
let chartData = (dataSource as { [key: string]: any })[activeName];
|
|
const handleButtonChange = (activeName: string) => {
|
|
setActiveName(activeName);
|
|
};
|
|
const options = getOptions(chartData);
|
|
const config = {
|
|
header: ["序号", "报警时间", "报警编码", "设备状态"],
|
|
headerHeight: 36,
|
|
rowNum: 6,
|
|
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: [80, 137, 137, 137],
|
|
data: [
|
|
["1", "行1列1", "行1列2", "<span style='color:#FF1E1E'>行1列3</span>"],
|
|
["2", "行2列1", "行2列2", "<span style='color:#FF1E1E'>行2列3</span>"],
|
|
["3", "行3列1", "行3列2", "<span style='color:#FF1E1E'>行3列3</span>"],
|
|
["4", "行4列1", "行4列2", "<span style='color:#FFB40F'>行4列3</span>"],
|
|
["5", "行5列1", "行5列2", "<span style='color:#FF1E1E'>行5列3</span>"],
|
|
["6", "行6列1", "行6列2", "<span style='color:#FFB40F'>行6列3</span>"],
|
|
["7", "行7列1", "行7列2", "<span style='color:#FF1E1E'>行7列3</span>"],
|
|
["8", "行8列1", "行8列2", "<span style='color:#FF1E1E'>行8列3</span>"],
|
|
["9", "行9列1", "行9列2", "<span style='color:#FF1E1E'>行9列3</span>"],
|
|
[
|
|
"10",
|
|
"行10列1",
|
|
"行10列2",
|
|
"<span style='color:#FFB40F'>行10列3</span>",
|
|
],
|
|
],
|
|
};
|
|
const config1 = {
|
|
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
|
headerHeight: 36,
|
|
rowNum: 6,
|
|
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: [80, 137, 137, 137],
|
|
data: [
|
|
[
|
|
"1",
|
|
"2024/8/28 08:32",
|
|
"清洗机5_1",
|
|
"<span style='color:#FF1E1E'>故障</span>",
|
|
],
|
|
[
|
|
"2",
|
|
"2024/8/28 06:12",
|
|
"清洗机5_1",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"3",
|
|
"2024/8/28 06:05",
|
|
"磨边机5_2",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"4",
|
|
"2024/8/28 04:43",
|
|
"二次镀膜机5_1",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"5",
|
|
"2024/8/28 02:14",
|
|
"磨边机5_1",
|
|
"<span style='color:#FF1E1E'>故障</span>",
|
|
],
|
|
[
|
|
"6",
|
|
"2024/8/27 22:54",
|
|
"磨边机5_2",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"7",
|
|
"2024/8/27 21:55",
|
|
"磨边机5_1",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"8",
|
|
"2024/8/27 21:42",
|
|
"一次镀膜机5_2",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"9",
|
|
"2024/8/27 21:37",
|
|
"磨边机5_1",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
],
|
|
};
|
|
const config2 = {
|
|
header: ["序号", "报警时间", "报警设备", "报警内容"],
|
|
headerHeight: 36,
|
|
rowNum: 6,
|
|
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: [80, 137, 137, 137],
|
|
data: [
|
|
[
|
|
"1",
|
|
"2024/8/28 07:44",
|
|
"下片机械手5_1",
|
|
"<span style='color:#FF1E1E'>故障</span>",
|
|
],
|
|
[
|
|
"2",
|
|
"2024/8/28 07:35",
|
|
"下片机械手5_1",
|
|
"<span style='color:#FF1E1E'>故障</span>",
|
|
],
|
|
[
|
|
"3",
|
|
"2024/8/28 03:23",
|
|
"在线铺纸机5_1",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"4",
|
|
"2024/8/28 01:36",
|
|
"下片机械手5_2",
|
|
"<span style='color:#FF1E1E'>故障</span>",
|
|
],
|
|
[
|
|
"5",
|
|
"2024/8/28 00:38",
|
|
"钢化炉5",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"6",
|
|
"2024/8/27 23:58",
|
|
"下片机械手5_3",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"7",
|
|
"2024/8/27 23:45",
|
|
"下片机械手5_2",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"8",
|
|
"2024/8/27 22:34",
|
|
"钢化炉5",
|
|
"<span style='color:#FFB40F'>离线</span>",
|
|
],
|
|
[
|
|
"9",
|
|
"2024/8/27 20:31",
|
|
"在线铺纸机5_1",
|
|
"<span style='color:#FF1E1E'>故障</span>",
|
|
],
|
|
],
|
|
};
|
|
return (
|
|
<div className="center_down flex-row">
|
|
<div className="center_down_inner flex-col left-box">
|
|
<TitleBox title={"center_down_left"} />
|
|
<span className="alarm_num_title">— 报警总数 —</span>
|
|
<div className="alarm_num">321,343</div>
|
|
<div style={{ padding: 10, height: "270px" }}>
|
|
<ScrollBoard
|
|
config={lineID.slice(-1) === "1" ? config1 : config2}
|
|
style={{ width: "492px", height: "250px" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 产线成品率 */}
|
|
<div className="center_down_inner flex-col right_box">
|
|
<TitleBox title={"center_down_right"} />
|
|
{/* <div className="left_up_switch">
|
|
<SwitchButton nameList={nameList} onChange={handleButtonChange} />
|
|
</div> */}
|
|
|
|
{options && (
|
|
<div className="chart_box">
|
|
{<ReactECharts option={options} style={{ height: "100%" }} />}
|
|
</div>
|
|
)}
|
|
{!options && (
|
|
<p
|
|
style={{
|
|
color: "#cccf",
|
|
fontSize: "24px",
|
|
userSelect: "none",
|
|
textAlign: "center",
|
|
paddingTop: "72px",
|
|
}}
|
|
>
|
|
暂无数据
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
export default CenterDown;
|