109 lines
3.2 KiB
JavaScript
109 lines
3.2 KiB
JavaScript
import GraphBase from "../../Common/GraphBase";
|
|
import "./index.module.scss";
|
|
import { useSelector } from "react-redux";
|
|
import { ScrollBoard } from "@jiaminghi/data-view-react";
|
|
|
|
function attachStyle(data) {
|
|
return data.map((arr) => {
|
|
return arr.map((item, index) => {
|
|
if (index == arr.length - 1) {
|
|
return `<div style="display: flex; align-items: center">
|
|
<span style="box-shadow: 0 0 4px 4px ${
|
|
item == 1 ? "#2760ff55" : item == 0 ? "#a81b2655" : "#E6A23C55"
|
|
}; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
|
|
item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
|
|
}"></span><span style="color: ${
|
|
item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
|
|
}">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
|
|
}
|
|
return `<span style='color: #fffa'>${item}</span>`;
|
|
});
|
|
});
|
|
}
|
|
|
|
function FanInfo(props) {
|
|
const rowNum = props.rows || 8;
|
|
// 默认使用风机信息，可以使用 source 来调整该组件使用 annealFanInfo 的数据
|
|
const fanInfo = useSelector((state) => state[props.source ?? "fanInfo"].data);
|
|
|
|
const data = Object.keys(fanInfo).map((key, index) => {
|
|
return [
|
|
index + 1,
|
|
key,
|
|
fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
|
|
];
|
|
});
|
|
const dataRight = [...data.slice(rowNum), ...data.slice(0, rowNum)];
|
|
|
|
let config = {
|
|
headerBGC: "rgba(4, 44, 76, 0.3)",
|
|
header: [
|
|
'<span style="color:#fff">序号<span/>',
|
|
'<span style="color:#fff">风机名称<span/>',
|
|
'<span style="color:#fff">故障情况<span/>',
|
|
],
|
|
oddRowBGC: "#042444",
|
|
evenRowBGC: "#042c4c",
|
|
// columnWidth: data.length > 12 ? [50, 136] : [88, 256],
|
|
columnWidth: [50, 136],
|
|
rowNum,
|
|
hoverPause: true,
|
|
data: attachStyle(data),
|
|
};
|
|
|
|
return (
|
|
<GraphBase
|
|
icon="kiln"
|
|
title="风机信息"
|
|
size={props.longBg ? ["middle", "full"] : ["middle", "short"]}
|
|
>
|
|
<div
|
|
className="flex"
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
gap: "20px",
|
|
// gap: data.length > 12 ? "20px" : 0,
|
|
height: "100%",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<div className="flex-1" style={{ flex: 1 }}>
|
|
<ScrollBoard
|
|
config={config}
|
|
style={{
|
|
width: "280px",
|
|
// width: data.length > 12 ? "280px" : "100%",
|
|
height: "100%",
|
|
}}
|
|
/>
|
|
</div>
|
|
{/* {data.length > 12 && (
|
|
<> */}
|
|
<div
|
|
className="verticalLine"
|
|
style={{
|
|
position: "absolute",
|
|
top: "10%",
|
|
left: "50%",
|
|
height: "80%",
|
|
width: "2px",
|
|
background:
|
|
"linear-gradient(transparent, #15E8F563, #15E8F599, #15E8F563, transparent)",
|
|
}}
|
|
></div>
|
|
<div className="flex-1" style={{ flex: 1 }}>
|
|
<ScrollBoard
|
|
config={{ ...config, data: attachStyle(dataRight) }}
|
|
style={{ width: "280px", height: "100%" }}
|
|
/>
|
|
</div>
|
|
{/* </>
|
|
)} */}
|
|
</div>
|
|
</GraphBase>
|
|
);
|
|
}
|
|
|
|
export default FanInfo;
|