update 风机运行频率

src/components/Common/FanRunFrequence/index.jsx

@@ -6,55 +6,55 @@ import GraphBase from "../../Common/GraphBase";
 import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 
-function mockData(type = "runtime") {
-  const RUNTIME_DATA_LENGTH = 16;
-  const MAX_HISTORY_DATA_LENGTH = 10;
-  const WEEK = 7;
+// function mockData(type = "runtime") {
+//   const RUNTIME_DATA_LENGTH = 16;
+//   const MAX_HISTORY_DATA_LENGTH = 10;
+//   const WEEK = 7;
 
-  switch (type) {
-    case "runtime":
-      return [
-        ...Array.from(
-          { length: RUNTIME_DATA_LENGTH },
-          () => Math.floor(Math.random() * 100) + "m³/h"
-        ),
-      ];
-    case "history":
-      return {
-        ...Array.from(
-          { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
-          (_, index) => ({
-            ["FAIIA" + index]: [
-              ...Array.from({ length: WEEK }, () =>
-                Math.floor(Math.random() * 100)
-              ),
-            ],
-          })
-        ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
-      };
-    default:
-      break;
-  }
-}
+//   switch (type) {
+//     case "runtime":
+//       return [
+//         ...Array.from(
+//           { length: RUNTIME_DATA_LENGTH },
+//           () => Math.floor(Math.random() * 100) + "m³/h"
+//         ),
+//       ];
+//     case "history":
+//       return {
+//         ...Array.from(
+//           { length: Math.floor(Math.random() * MAX_HISTORY_DATA_LENGTH) },
+//           (_, index) => ({
+//             ["FAIIA" + index]: [
+//               ...Array.from({ length: WEEK }, () =>
+//                 Math.floor(Math.random() * 100)
+//               ),
+//             ],
+//           })
+//         ).reduce((arr, curr) => ({ ...arr, ...curr }), {}),
+//       };
+//     default:
+//       break;
+//   }
+// }
 
 function WindFrequence(props) {
-  const [showChart, setShowChart] = useState(true);
-  const dispath = useDispatch();
+  const [showChart, setShowChart] = useState(false);
+  // const dispath = useDispatch();
   const runState = useSelector((state) => state.fanFrequence.runtime);
   const hisState = useSelector((state) => state.fanFrequence.history);
 
-  useEffect(() => {
-    setInterval(() => {
-      dispath({
-        type: "fanFrequence/setRuntime",
-        payload: mockData("runtime"),
-      });
-      dispath({
-        type: "fanFrequence/setHistory",
-        payload: mockData("history"),
-      });
-    }, 50000);
-  }, [dispath]);
+  // useEffect(() => {
+  //   setInterval(() => {
+  //     dispath({
+  //       type: "fanFrequence/setRuntime",
+  //       payload: mockData("runtime"),
+  //     });
+  //     dispath({
+  //       type: "fanFrequence/setHistory",
+  //       payload: mockData("history"),
+  //     });
+  //   }, 50000);
+  // }, [dispath]);
 
   let dataList = [];
   let seriesData = [];
@@ -155,26 +155,10 @@ function WindFrequence(props) {
   } else {
     dataList =
       runState != null
-        ? [
-            { id: 1, name: "1#风机", value: "0m³/h" },
-            { id: 2, name: "2#风机", value: "0m³/h" },
-            { id: 3, name: "3#风机", value: "0m³/h" },
-            { id: 4, name: "4#风机", value: "0m³/h" },
-            { id: 5, name: "5#风机", value: "0m³/h" },
-            { id: 6, name: "6#风机", value: "0m³/h" },
-            { id: 7, name: "7#风机", value: "0m³/h" },
-            { id: 8, name: "8#风机", value: "0m³/h" },
-            { id: 9, name: "9#风机", value: "0m³/h" },
-            { id: 10, name: "10#风机", value: "0m³/h" },
-            { id: 11, name: "11#风机", value: "0m³/h" },
-            { id: 12, name: "12#风机", value: "0m³/h" },
-            { id: 13, name: "13#风机", value: "0m³/h" },
-            { id: 14, name: "14#风机", value: "0m³/h" },
-            { id: 15, name: "15#风机", value: "0m³/h" },
-            { id: 16, name: "16#风机", value: "0m³/h" },
-          ].map((item, index) => ({
-            ...item,
-            value: runState[index] ?? "/",
+        ? Object.keys(runState).map((fan) => ({
+            id: Math.random(),
+            name: fan,
+            value: runState[fan],
           }))
         : [
             { id: 1, name: "1#风机", value: "0m³/h" },
@@ -208,19 +192,35 @@ function WindFrequence(props) {
       icon="kiln"
       title="风机运行频率"
       size={["middle", "long"]}
-      switchOptions={true}
+      switchOptions={false}
       switchPosition={[null, 200]} // [top, left]
       onSwitch={handleSwitchChange}
     >
       <div className={cls.chart}>
-        {showChart && (
+        {/* {showChart && (
           <ReactECharts option={options} style={{ height: "100%" }} />
-        )}
+        )} */}
         {!showChart && (
           <div className={cls.gridList}>
             {dataList.map((item) => (
-              <div key={item.id} className={cls.listItem}>
-                {item.name}: {item.value}
+              <div
+                key={item.id}
+                className={cls.listItem}
+                style={{ padding: props.stretch ? "16px 0" : "" }}
+              >
+                <span className={cls.fanName}>{item.name}</span>
+                <span
+                  className={cls.fanValue}
+                  style={{
+                    fontWeight: 700,
+                    letterSpacing: 1,
+                    fontSize: 16,
+                    // color: "#e03537",
+                    color: "#24aebb",
+                  }}
+                >
+                  {item.value}
+                </span>
               </div>
             ))}
           </div>

src/components/Common/FanRunFrequence/index.module.css

@@ -1,33 +1,52 @@
 .chart {
-	height: 100%;
+  height: 100%;
 }
 
 .gridList {
-	margin-top: 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	/* grid-auto-row: ; */
-	gap: 6px;
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  /* grid-auto-row: ; */
+  gap: 6px;
 }
 
 .listItem {
-	border-radius: 2px;
-	padding: 9px 0;
-	text-align: center;
-	color: #fff;
-	box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  border-radius: 2px;
+  padding: 10px 0;
+  text-align: center;
+  color: #fff;
+  box-shadow: inset 0 0 16px 4px rgba(255, 255, 255, 0.197);
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
+
 .headWidget {
-	position: absolute;
-	top: 22px;
-	right: 24px;
-	height: 32px;
-	width: 410px;
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	color: #fff;
+  position: absolute;
+  top: 22px;
+  right: 24px;
+  height: 32px;
+  width: 410px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: #fff;
 }
 .relative {
-	position: relative;
+  position: relative;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.fanName {
+  text-align: right;
+  flex: 7;
+}
+
+.fanValue {
+  flex: 3;
+  text-align: left;
 }

src/components/Modules/KilnInner/RightSide/index.jsx

@@ -24,7 +24,7 @@ export default function index() {
 				<FanInfo />
 			</div>
 			<div style={{ flex: 1, marginTop: '24px' }}>
-				<WindFrequence />
+				<WindFrequence stretch />
 			</div>
 		</motion.div>
 	);