update faninfostretch
This commit is contained in:
lb
parent
a32e6fb591
commit
c9829d4f5a
248
src/components/Common/FanInfoStretch/index.jsx
Normal file
248
src/components/Common/FanInfoStretch/index.jsx
Normal file
@ -0,0 +1,248 @@
|
|||||||
|
import GraphBase from "../GraphBase";
|
||||||
|
import "./index.module.scss";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { ScrollBoard } from "@jiaminghi/data-view-react";
|
||||||
|
import { useMemo } from "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) {
|
||||||
|
// 默认使用风机信息，可以使用 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 y61 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("1#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y62 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("2#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y63 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("3#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y64 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("4#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y65 = useMemo(
|
||||||
|
() => data.filter((item) => item[1].startsWith("5#")) || [],
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
const y66 = useMemo(() => [...y65.slice(5), ...y65.slice(0, 5)], [y65]);
|
||||||
|
|
||||||
|
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: 6,
|
||||||
|
hoverPause: false,
|
||||||
|
data: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GraphBase
|
||||||
|
icon="kiln"
|
||||||
|
title="风机信息"
|
||||||
|
size={props.longBg ? ["middle", "full"] : ["middle", "short"]}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "grid",
|
||||||
|
gridTemplateRows: "auto 2px auto 2px auto",
|
||||||
|
gap: "4px",
|
||||||
|
// height: "100%",
|
||||||
|
position: "relative",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="" style={{ display: "flex", gap: "8px" }}>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y61
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y61"
|
||||||
|
config={{ ...config, data: attachStyle(y61) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y62
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y62"
|
||||||
|
config={{ ...config, data: attachStyle(y62) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="horizontalLine"
|
||||||
|
style={{
|
||||||
|
height: "2px",
|
||||||
|
background:
|
||||||
|
"radial-gradient(ellipse, #15E8F563, #15E8F599, transparent, transparent)",
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div className="" style={{ display: "flex", gap: "8px" }}>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y63
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y63"
|
||||||
|
config={{ ...config, data: attachStyle(y63) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{/* <div style={{ display: "flex", flexDirection: "column" }}> */}
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y64
|
||||||
|
</h1>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y64"
|
||||||
|
config={{ ...config, data: attachStyle(y64) }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "280px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="horizontalLine"
|
||||||
|
style={{
|
||||||
|
height: "2px",
|
||||||
|
background:
|
||||||
|
"radial-gradient(ellipse, #15E8F563, #15E8F599, transparent, transparent)",
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className=""
|
||||||
|
style={{ height: "240px", display: "flex", flexDirection: "column" }}
|
||||||
|
>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "16px",
|
||||||
|
fontWeight: 400,
|
||||||
|
textAlign: "center",
|
||||||
|
letterSpacing: "2px",
|
||||||
|
color: "#fff",
|
||||||
|
background: "#012041",
|
||||||
|
padding: "4px 0",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
产线Y65
|
||||||
|
</h1>
|
||||||
|
<div style={{ flex: 1, height: "1px", display: "flex", gap: "4px" }}>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y65"
|
||||||
|
config={{ ...config, data: attachStyle(y65), rowNum: 5 }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "220px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<ScrollBoard
|
||||||
|
key="y66"
|
||||||
|
config={{ ...config, data: attachStyle(y66), rowNum: 5 }}
|
||||||
|
style={{
|
||||||
|
width: "280px",
|
||||||
|
height: "220px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GraphBase>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default FanInfo;
|
||||||
50
src/components/Common/FanInfoStretch/index.module.scss
Normal file
50
src/components/Common/FanInfoStretch/index.module.scss
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
.CenterChart1itemDetailBorder {
|
||||||
|
width: 100%;
|
||||||
|
height: 240px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
background-color: rgba(4, 44, 76, 0.2);
|
||||||
|
.CenterChart1itemTXT {
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
font-size: 20px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2%;
|
||||||
|
}
|
||||||
|
.CenterChart1itemContainer {
|
||||||
|
width: 95%;
|
||||||
|
height: 100px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.CenterFormitemDetailBorderLine1 {
|
||||||
|
width: 1px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #041c2c;
|
||||||
|
float: left;
|
||||||
|
margin-left: 18%;
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.CenterFormitemDetailBorderLine2 {
|
||||||
|
width: 1px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #041c2c;
|
||||||
|
float: left;
|
||||||
|
margin-left: 46%;
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.CenterFormitemDetailBorderLine3 {
|
||||||
|
width: 1px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: #041c2c;
|
||||||
|
float: left;
|
||||||
|
margin-left: 72%;
|
||||||
|
z-index: 10;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import FanInfo from '../../../Common/FanInfo';
|
import FanInfo from '../../../Common/FanInfoStretch';
|
||||||
import cls from './index.module.scss';
|
import cls from './index.module.scss';
|
||||||
|
|
||||||
export default function index() {
|
export default function index() {
|
||||||
@ -18,7 +18,7 @@ export default function index() {
|
|||||||
transition={{ type: 'tween' }}
|
transition={{ type: 'tween' }}
|
||||||
>
|
>
|
||||||
<div style={{ flex: 1 }}>
|
<div style={{ flex: 1 }}>
|
||||||
<FanInfo longBg={true} rows={24} source="annealFanInfo" />
|
<FanInfo longBg={true} source="annealFanInfo" />
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user