setup

src/components/Common/FanInfo/index.jsx

@@ -0,0 +1,115 @@
+import GraphBase from "../../Common/GraphBase";
+import "./index.module.scss";
+
+// import { ScrollBoard } from '@jiaminghi/data-view-react';
+
+function getRandomRow() {
+  const idx = Math.ceil(Math.random() * 100);
+  return [idx, `${idx}#风机`, Math.ceil(Math.random() * 2) - 1];
+}
+
+function getRandomRows(rows) {
+  return Array(rows)
+    .fill(0)
+    .map(() => getRandomRow());
+}
+
+// let data = [
+// 	[1, '1#风机', 1], // 1 正常 2 故障 0 离线
+// 	[2, '2#风机', 1],
+// 	[3, '3#风机', 1],
+// 	[4, '4#风机', 0],
+// 	[5, '5#风机', 1],
+// 	[6, '6#风机', 1],
+// 	[7, '7#风机', 0],
+// 	[8, '8#风机', 1],
+// 	[9, '9#风机', 1],
+// 	[10, '10#风机', 1],
+// ];
+
+// let header = ['序号', '风机名称', '故障情况'];
+
+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" : "#a81b2655"
+              }; margin-right: 8px; width: 8px; height: 8px; border-radius: 8px; background: ${
+          item == 1 ? "#2760ff" : "#a81b26"
+        }"></span><span style="color: ${item == 1 ? "#2760ff" : "#a81b26"}">${
+          item == 1 ? "正常" : "故障"
+        }</span></div>`;
+      }
+      return `<span style='color: #fffa'>${item}</span>`;
+    });
+  });
+}
+
+function FanInfo(props) {
+  const rowNum = props.rows || 8;
+  let data = getRandomRows(100);
+
+  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: [70, 96],
+    rowNum,
+    // headerHeight: 40,
+    hoverPause: false,
+    // data: replaceStyle(data, 0.7),
+    data: attachStyle(data),
+  };
+
+  return (
+    <GraphBase
+      icon="kiln"
+      title="风机信息"
+      size={props.longBg ? ["middle", "full"] : ["middle", "short"]}
+    >
+      <div
+        className="flex"
+        style={{
+          display: "flex",
+          gap: "20px",
+          height: "100%",
+          position: "relative",
+        }}
+      >
+        <div className="flex-1" style={{ flex: 1 }}>
+          {/* <ScrollBoard
+            config={config}
+            style={{ width: "280px", height: "100%" }}
+          /> */}
+        </div>
+        <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}
+						style={{ width: '280px', height: '100%' }}
+					/> */}
+        </div>
+      </div>
+    </GraphBase>
+  );
+}
+
+export default FanInfo;

src/components/Common/FanInfo/index.module.scss

@@ -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;
+		}
+	}
+}