1

src/components/Common/Energy/EnergeCostRealtime/index.jsx

@@ -7,13 +7,23 @@ const EnergyCostRealtime = () => {
   const [isPage1, setIsPage1] = useState(false);
   const energyInfo = useSelector((state) => state.energy?.info);
 
-  function handleClick() {
+  // function handleClick() {
-    setIsPage1((pre) => !pre);
+  //   setIsPage1((pre) => !pre);
+  // }
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIsPage1(pre => !pre);
+    }, 10000);
+    
+    return () => {
+      clearInterval(timer);
     }
+  }, []);
   return (
     <>
-      <Arrow key="left" direction="left" onClick={handleClick} />
+      {/* <Arrow key="left" direction="left" onClick={handleClick} />
-      <Arrow key="right" direction="right" onClick={handleClick} />
+      <Arrow key="right" direction="right" onClick={handleClick} /> */}
       {isPage1 && (
         <div className={`${cls.cost__info} flex`}>
           <div className={`${cls.info__item_groups_col1}`}>

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

@@ -8,9 +8,13 @@ function Energy(props) {
   const energyInfo = useSelector((state) => state.energy?.info);
 
   useEffect(() => {
-    setInterval(() => {
+    const timer = setInterval(() => {
       setIsPage1((pre) => !pre);
-    }, 3000);
+    }, 10000);
+
+    return () => {
+      clearInterval(timer);
+    }
   }, []);
 
   return (

src/components/Modules/EnergyCostAnalysis/Energy/index.module.css

@@ -28,5 +28,5 @@
 
 .infoText > span:last-child {
   color: #00FFF7;
-  font-size: 28px;
+  font-size: 24px;
 }