update

src/App.js

@@ -1,8 +1,6 @@
-// import "./App.css";
 import "./global.css";
 import "./index.css";
 import Head from "./components/Common/Company";
-// import { SocketContextProvider } from "../store/socket-data-provider";
 import useSlider, { Slider } from "./hooks/useSlider";
 import NavMenu from "./components/Common/NavMenu";
 import { useState } from "react";

src/components/Common/CurrentTemp/index.jsx

@@ -1,138 +1,136 @@
-import BottomBarItem from '../BottomItemBackground';
-import GraphBase from '../GraphBase';
-import { Radio } from 'antd';
-import cls from './index.module.css';
-import { useState } from 'react';
+import GraphBase from "../GraphBase";
+import cls from "./index.module.css";
+import { useState } from "react";
 
 const SmallBox = (props) => {
-	return (
-		<div
-			className="small-box"
-			style={{
-				boxShadow: 'inset 0 0 18px 10px #fff1',
-				borderRadius: '3px',
-				padding: '6px',
-				display: 'flex',
-				alignItems: 'center',
-				justifyContent: 'center',
-				color: '#fff',
-				position: 'relative',
-				userSelect: 'none',
-			}}
-		>
-			{props.split !== false && (
-				<span
-					className="vertical-line"
-					style={{
-						position: 'absolute',
-						display: 'inline-block',
-						width: '2px',
-						height: '80%',
-						top: '10%',
-						left: '50%',
-						background:
-							'linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)',
-					}}
-				></span>
-			)}
-			{props.children}
-		</div>
-	);
+  return (
+    <div
+      className="small-box"
+      style={{
+        boxShadow: "inset 0 0 18px 10px #fff1",
+        borderRadius: "3px",
+        padding: "6px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "#fff",
+        position: "relative",
+        userSelect: "none",
+      }}
+    >
+      {props.split !== false && (
+        <span
+          className="vertical-line"
+          style={{
+            position: "absolute",
+            display: "inline-block",
+            width: "2px",
+            height: "80%",
+            top: "10%",
+            left: "50%",
+            background:
+              "linear-gradient(to bottom, transparent, #fff3, #fffa, #fff3, transparent)",
+          }}
+        ></span>
+      )}
+      {props.children}
+    </div>
+  );
 };
 
 function WindFrequence(props) {
-	const [dataSource, setDataSource] = useState('风机');
+  const [dataSource, setDataSource] = useState("风机");
 
-	function handleSourceChange(v) {
-		console.log('val', v);
-	}
+  function handleSourceChange(v) {
+    console.log("val", v);
+  }
 
-	return (
-		<GraphBase
-			icon="pause"
-			title="当前温度"
-			dateOptions={['风机', '风阀', '电加热']}
-			onDateChange={handleSourceChange}
-			size={['middle', 'long']}
-		>
-			<div className={cls.mainContent + ' ' + cls.grid}>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox split={false}>
-					<div className={cls.areaPureContent}>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox split={false}>
-					<div className={cls.areaPureContent}>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-						<span className={cls.areaPureValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-				<SmallBox>
-					<h1 className={cls.areaName}>A1区板上</h1>
-					<div className={cls.areaContent}>
-						<span className={cls.areaValue}>123.8℃</span>
-					</div>
-				</SmallBox>
-			</div>
-		</GraphBase>
-	);
+  return (
+    <GraphBase
+      icon="pause"
+      title="当前温度"
+      dateOptions={["风机", "风阀", "电加热"]}
+      onDateChange={handleSourceChange}
+      size={["middle", "long"]}
+    >
+      <div className={cls.mainContent + " " + cls.grid}>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox split={false}>
+          <div className={cls.areaPureContent}>
+            <span className={cls.areaPureValue}>123.8℃</span>
+            <span className={cls.areaPureValue}>123.8℃</span>
+            <span className={cls.areaPureValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox split={false}>
+          <div className={cls.areaPureContent}>
+            <span className={cls.areaPureValue}>123.8℃</span>
+            <span className={cls.areaPureValue}>123.8℃</span>
+            <span className={cls.areaPureValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+        <SmallBox>
+          <h1 className={cls.areaName}>A1区板上</h1>
+          <div className={cls.areaContent}>
+            <span className={cls.areaValue}>123.8℃</span>
+          </div>
+        </SmallBox>
+      </div>
+    </GraphBase>
+  );
 }
 
 export default WindFrequence;

src/components/Common/FanInfo/index.jsx

@@ -3,17 +3,6 @@ import "./index.module.scss";
 import { useSelector } from "react-redux";
 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());
-}
-
 function attachStyle(data) {
   return data.map((arr) => {
     return arr.map((item, index) => {
@@ -23,9 +12,9 @@ function attachStyle(data) {
                 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>`;
+        }"></span><span style="color: ${
+          item == 1 ? "#2760ff" : item == 0 ? "#a81b26" : "#E6A23C"
+        }">${item == 1 ? "运行" : item == 0 ? "故障" : "未运行"}</span></div>`;
       }
       return `<span style='color: #fffa'>${item}</span>`;
     });
@@ -34,11 +23,14 @@ function attachStyle(data) {
 
 function FanInfo(props) {
   const rowNum = props.rows || 8;
-  // let data = getRandomRows(100);
   const fanInfo = useSelector((state) => state.fanInfo.fanInfo);
 
   const data = Object.keys(fanInfo).map((key, index) => {
-    return [index+1, key, fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2];
+    return [
+      index + 1,
+      key,
+      fanInfo[key] == "运行" ? 1 : fanInfo[key] == "故障" ? 0 : 2,
+    ];
   });
 
   let config = {

src/components/Common/FanRunFrequence/index.jsx

@@ -1,61 +1,15 @@
 // FanRunFrequence
 import cls from "./index.module.css";
-import ReactECharts from "echarts-for-react";
 import * as echarts from "echarts";
 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;
-
-//   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;
-//   }
-// }
+import { useState } from "react";
+import { useSelector } from "react-redux";
 
 function WindFrequence(props) {
   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]);
-
   let dataList = [];
   let seriesData = [];
   const colors = [

src/components/Common/Feeder/index.jsx

@@ -1,5 +1,5 @@
 import { useSelector } from "react-redux";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion } from "framer-motion";
 
 function FeederStatus(props) {
   const feeder = useSelector((state) => state.feeder);
@@ -29,7 +29,12 @@ function FeederStatus(props) {
           color: "#fff",
           border: "1px solid #fff",
           padding: "12px",
-          background: leftFeeder == "运行" ? "#0f03" : leftFeeder == "故障" ? "#f003" : "#da33",
+          background:
+            leftFeeder == "运行"
+              ? "#0f03"
+              : leftFeeder == "故障"
+              ? "#f003"
+              : "#da33",
         }}
       >
         投料机1 : {leftFeeder}
@@ -39,7 +44,12 @@ function FeederStatus(props) {
           color: "#fff",
           border: "1px solid #fff",
           padding: "12px",
-          background: rightFeeder == "运行" ? "#0f03" : rightFeeder == "故障" ? "#f003" : "#da33",
+          background:
+            rightFeeder == "运行"
+              ? "#0f03"
+              : rightFeeder == "故障"
+              ? "#f003"
+              : "#da33",
         }}
       >
         投料机2 : {rightFeeder}

src/components/Common/GasFlow/index.jsx

@@ -41,23 +41,9 @@ import { useSelector, useDispatch } from "react-redux";
 /** 助燃风流量 */
 function GasI(props) {
   const [showChart, setShowChart] = useState(true);
-  // const dispath = useDispatch();
   const runState = useSelector((state) => state.combustionAir.runtime);
   const hisState = useSelector((state) => state.combustionAir.history);
 
-  // useEffect(() => {
-  //   setInterval(() => {
-  //     dispath({
-  //       type: "combustionAir/setRuntime",
-  //       payload: mockData("runtime"),
-  //     });
-  //     dispath({
-  //       type: "combustionAir/setHistory",
-  //       payload: mockData("history"),
-  //     });
-  //   }, 60000);
-  // }, [dispath]);
-
   let dataList = [];
   let seriesData = [];
   const colors = [

src/components/Common/KilnInfo/Kiln.jsx

@@ -1,53 +1,16 @@
 import cls from "./kiln.module.scss";
 import Container from "../../Container";
-import { useEffect } from "react";
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector } from "react-redux";
 import { stateNameMap } from "../../../store/features/kilnSlice";
 
 export default function Kiln() {
   const kilnInfo = useSelector((state) => state.kiln);
-  // const dispatch = useDispatch();
 
   const infos = Object.keys(kilnInfo).map((key) => ({
     label: stateNameMap[key],
     value: kilnInfo[key],
   }));
 
-  // useEffect(() => {
-  //   setInterval(() => {
-  //     dispatch({
-  //       type: "kiln/setKilnInfo",
-  //       payload: {
-  //         kilnPressure: Math.ceil(Math.random() * 100) + "Pa",
-  //         waterTemp: Math.ceil(Math.random() * 100) + "℃",
-  //         waterFlow: Math.ceil(Math.random() * 100) + "m³/h",
-  //         waterPressure: Math.ceil(Math.random() * 100) + "Pa",
-  //         combustionAirPressure: Math.ceil(Math.random() * 100) + "Pa",
-  //         topTemp: Math.ceil(Math.random() * 100) + "℃",
-  //         compressedAirPressure: Math.ceil(Math.random() * 100) + "Pa",
-  //         meltTemp: Math.ceil(Math.random() * 100) + "℃",
-  //       },
-  //     });
-  //   }, 30000);
-  // }, [dispatch]);
-
-  // const infos = [
-  //   { label: "窑炉压力", value: ctx?.runState?.kilnPressure || "0Pa" },
-  //   { label: "循环水温度", value: ctx?.runState?.waterTemp || "0℃" },
-  //   { label: "循环水流量", value: ctx?.runState?.waterFlow || "0㎡/h" },
-  //   { label: "循环水压力", value: ctx?.runState?.waterPressure || "0Pa" },
-  //   {
-  //     label: "助燃风压力",
-  //     value: ctx?.runState?.combustionAirPressure || "0℃",
-  //   },
-  //   { label: "碹顶加权温度", value: ctx?.runState?.topTemp || "0℃" },
-  //   {
-  //     label: "压缩气压力",
-  //     value: ctx?.runState?.compressedAirPressure || "0Pa",
-  //   },
-  //   { label: "融化加权温度", value: ctx?.runState?.meltTemp || "0℃" },
-  // ];
-
   return (
     <Container title="窑炉信息" icon="kiln" className={cls.leftBar__top}>
       <div className={cls.leftBar__top__content}>

src/components/Modules/EnergyCostAnalysis/O/index.jsx

@@ -2,27 +2,6 @@ import GraphBase from '../../../Common/GraphBase';
 import ReactECharts from 'echarts-for-react';
 import getOptions from '../../../../hooks/getChartOption';
 
-// function rand(max) {
-// 	return Math.ceil(Math.random() * max);
-// }
-// function getArr(len) {
-// 	return Array(len).fill(1).map(() => rand(100))
-// }
-// function getArrs(len) {
-// 	return Array(len).fill(1).map(() => getArr(7))
-// }
-// function fan4(...arrs) {
-// 	const total = arrs[0].map((_, i) =>
-// 		arrs.reduce((sum, arr) => sum + arr[i], 0),
-// 	);
-// 	arrs.unshift(total);
-// 	return arrs;
-// }
-// function main() {
-// 	// console.log(JSON.stringify(fan(getArrs(3))))
-// 	console.log(fan(getArrs(3)))
-// }
-
 function Oxygen(props) {
 	function handleSwitch(v) {
 		console.log('switched ', v);

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

@@ -2,7 +2,6 @@ import { useState } from "react";
 import cls from "./index.module.css";
 import Chart2 from "../../../Common/TimeFireDir";
 import VideoContainer from "./VideoContainer";
-import TemperatureTop from "../../../Common/TemperatureTop";
 
 function KilnCenter() {
   const [floor, setFloor] = useState(0);
@@ -57,71 +56,8 @@ function KilnCenter() {
         </div>
       </div>
 
-      {/* 覆盖层温度信息  */}
-      {/* <TemperatureTop /> */}
-
       {/* video  */}
       <VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
-
-      {/* <div className={cls.videoLayer2}></div> */}
-
-      {/* left side  */}
-      {/* <div
-				className="leftSide"
-				style={{
-					position: 'absolute',
-					left: '88px',
-					top: '24%',
-					display: 'grid',
-					gridTemplateColumns: '100px 100px',
-					gap: '20px 18px',
-					gridAutoRows: '64px',
-				}}
-			>
-				{data.map((item) => (
-					<div
-						className="leftSideItem"
-						style={{
-							background: '#fff3',
-							display: 'flex',
-							flexDirection: 'column',
-							alignItems: 'center',
-							justifyContent: 'center',
-							background: '#32535d',
-						}}
-					>
-						<span style={{ fontSize: '18px', lineHeight: 1, color: '#2EE4E6' }}>
-							{item.name}
-						</span>
-						<span
-							style={{ fontSize: '24px', lineHeight: '32px', color: '#fff' }}
-						>
-							{item.value} ℃
-						</span>
-					</div>
-				))}
-			</div>
-
-			<div
-				className="toolbox"
-				style={{
-					position: 'absolute',
-					bottom: '32px',
-					left: '64px',
-					display: 'flex',
-					alignItems: 'center',
-					gap: '24px',
-				}}
-			>
-				<div
-					className="tlj tlj1"
-					style={{ background: '#ccc', width: '200px', height: '100px' }}
-				></div>
-				<div
-					className="tlj tlj2"
-					style={{ background: '#ccc', width: '200px', height: '100px' }}
-				></div>
-			</div> */}
     </div>
   );
 }

src/components/Modules/KilnInner/Center/videoComponents/EnterToFloor1.jsx

@@ -69,19 +69,6 @@ function EnterToFloorOne(props) {
             ></video>
           )}
 
-          {/* <motion.div
-            className={cls.videoLayer1}
-            key="eto1div"
-            style={{
-              top: "336px",
-              left: "730px",
-              width: "2380px",
-            }}
-            animate={{
-              opacity: [0, 0, 0, 0.6, 1],
-              transition: { duration: 0.3, delay: 2 },
-            }}
-          ></motion.div> */}
           <TemperatureBottom
             style={{
               top: "218px",

src/components/Modules/KilnInner/Center/videoComponents/Floor1To2.jsx

@@ -72,20 +72,6 @@ function FloorOneToTwo(props) {
             ></video>
           )}
 
-          {/* <motion.div
-            className={cls.videoLayer2}
-            key="1to2div"
-            style={{
-              top: "360px",
-              left: "740px",
-              width: "2415px",
-              height: "690px",
-            }}
-            animate={{
-              opacity: [0, 0, 0, 0.6, 1],
-              transition: { duration: 0.3, delay: 2 },
-            }}
-          ></motion.div> */}
           <TemperatureTop
             style={{
               top: "208px",

src/components/Modules/KilnInner/Center/videoComponents/Floor2To1.jsx

@@ -72,20 +72,6 @@ function FloorTwoToOne(props) {
             ></video>
           )}
 
-          {/* <motion.div
-            className={cls.videoLayer1}
-            key="eto1div"
-            style={{
-              top: "336px",
-              left: "730px",
-              width: "2380px",
-            }}
-            animate={{
-              opacity: [0, 0, 0, 0.6, 1],
-              transition: { duration: 0.3, delay: 2 },
-            }}
-          ></motion.div> */}
-
           <TemperatureBottom
             style={{
               top: "208px",

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

@@ -1,12 +1,8 @@
 import React from 'react';
-import FanInfo from '../../../Common/FanInfo';
-import WindFrequence from '../../../Common/FanRunFrequence';
 import FaultType from '../../../Common/TodayFaultType';
 import FaultTotal from '../../../Common/TodayFaultTotal';
 import { motion } from 'framer-motion';
 
-import cls from './index.module.scss';
-
 export default function index() {
 	return (
 		<motion.div

src/pages/Home/index.jsx

@@ -10,12 +10,8 @@ import FireCheckLeft from "../../components/Modules/FireCheck/LeftSide";
 import QualityCheckLeft from "../../components/Modules/QualityCheck/LeftSide";
 import FireCheckRight from "../../components/Modules/FireCheck/RightSide";
 import QualityCheckRight from "../../components/Modules/QualityCheck/RightSide";
-// import SocketContext from '../../store/socket-data-provider';
-import { useContext } from "react";
 
 export default function Home({ active }) {
-  // const ctx = useContext(SocketContext);
-
   const ctx = null;
 
   const fireDir = ctx?.runState?.fireDirection || null;