mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update faninfostretch

Browse Source
This commit is contained in:
lb 2024-01-02 16:11:37 +08:00
parent a32e6fb591
commit c9829d4f5a
3 changed files with 300 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
src/components/Common/FanInfoStretch/index.jsx Normal file
View 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
View 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;
}
}
}

4
src/components/Modules/FireCheck/RightSide/index.jsx
View File

@ -1,5 +1,5 @@
import { motion } from 'framer-motion';
import FanInfo from '../../../Common/FanInfo';
import FanInfo from '../../../Common/FanInfoStretch';
import cls from './index.module.scss';
export default function index() {
@ -18,7 +18,7 @@ export default function index() {
transition={{ type: 'tween' }}
>
<div style={{ flex: 1 }}>
<FanInfo longBg={true} rows={24} source="annealFanInfo" />
<FanInfo longBg={true} source="annealFanInfo" />
</div>
</motion.div>
);