update energy

src/components/Common/Arrow/index.jsx

@@ -1,12 +1,28 @@
-import cls from './index.module.css';
+import cls from "./index.module.css";
 
-const Arrow = ({direction, disabled, onClick}) => {
+const Arrow = ({ direction, disabled, onClick }) => {
+  function handleClick() {
+    onClick(direction)
+  }
   return (
-        <div className={cls["arrow"]}>
+    <button
-            <div className={cls['arrow-top']}></div>
+      className={`${cls["arrow"]} ${
-            <div className={cls["arrow-bottom"]}></div>
+        direction == "right" ? cls["arrow__right"] : ""
-        </div>
+      } ${true ? "disabled" : ""}`}
-    )
+      onClick={handleClick}
-}
+    >
+      <div
+        className={`${cls["arrow-top"]} ${
+          direction == "right" ? cls["arrow-top__right"] : ""
+        }`}
+      ></div>
+      <div
+        className={`${cls["arrow-bottom"]} ${
+          direction == "right" ? cls["arrow-bottom__right"] : ""
+        }`}
+      ></div>
+    </button>
+  );
+};
 
 export default Arrow;

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

@@ -1,25 +1,60 @@
+
+
 .arrow {
+  appearance: none;
+  outline: none;
+  border: none;
+  background: transparent;
   width: 16px;
   height: 48px;
-  background: #ccc;
+  position: absolute;
-  position: relative;
+  top: 112px;
+  left: 5px;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.arrow.disabled > div {
+  background: #3d4a56;
+}
+
+.arrow__right {
+  left: unset;
+  right: 5px;
+}
+
+.arrow:hover > div {
+  background: #00f3ed;
 }
 
 .arrow-top {
-  background: #00f3ed;
+  transition: background 0.1s ease-out;
+  background: #1eaba9;
   width: 8px;
   height: 24px;
   position: absolute;
   top: 0;
   left: 0;
   border-radius: 12px;
+  transform: rotateZ(20deg) translateY(2px) translateX(4px);
 }
+
 .arrow-bottom {
-  background: #00f3ed;
+  transition: background 0.1s ease-out;
+  background: #1eaba9;
   width: 8px;
   height: 24px;
   position: absolute;
   bottom: 0;
   left: 0;
   border-radius: 12px;
+  transform: rotateZ(-20deg) translateY(-2px) translateX(4px);
+}
+
+.arrow-top__right {
+  transform: rotateZ(-20deg) translateY(4px) translateX(4px);
+}
+
+.arrow-bottom__right {
+  transform: rotateZ(20deg) translateY(-4px) translateX(4px);
 }

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

@@ -1,10 +1,20 @@
+import { useEffect, useState } from "react";
 import cls from "./index.module.scss";
 import { useSelector } from "react-redux";
+import Arrow from "../../Arrow";
 
 const EnergyCostRealtime = () => {
+  const [isPage1, setIsPage1] = useState(false);
   const energyInfo = useSelector((state) => state.energy?.info);
 
+  function handleClick() {
+    setIsPage1((pre) => !pre);
+  }
   return (
+    <>
+      <Arrow key="left" direction="left" onClick={handleClick} />
+      <Arrow key="right" direction="right" onClick={handleClick} />
+      {isPage1 && (
         <div className={`${cls.cost__info} flex`}>
           <div className={`${cls.info__item_groups_col1}`}>
             <div className={cls.info__item}>
@@ -33,7 +43,7 @@ const EnergyCostRealtime = () => {
                 余热发电(总量)
               </i>
               <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-            {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
+                {(+energyInfo?.elecQty3)?.toFixed(2) || 0}kWh
               </span>
             </div>
           </div>
@@ -96,6 +106,68 @@ const EnergyCostRealtime = () => {
             </div>
           </div>
         </div>
+      )}
+      {!isPage1 && (
+        <div className={cls.energy_info_new}>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              智慧能源光伏发电(昨日)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty6)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              许昌安彩光伏发电(昨日)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty7)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              智慧能源光伏发电(总量)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty4)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+          <div className="energy_info_new--item">
+            <i
+              style={{
+                fontSize: "18px",
+                fontStyle: "normal",
+                paddingRight: "6px",
+              }}
+            >
+              许昌安彩光伏发电(总量)/kwh
+            </i>
+            <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+              {(+energyInfo?.elecQty5)?.toFixed(2) || 0}kWh
+            </span>
+          </div>
+        </div>
+      )}
+    </>
   );
 };
 

src/components/Common/Energy/EnergeCostRealtime/index.module.scss

@@ -1,6 +1,7 @@
 .cost__info {
   margin-top: 4px;
-  margin-bottom: 12px;
+  margin-bottom: 6px;
+  // margin-bottom: 12px;
 }
 
 .info__item {
@@ -35,3 +36,25 @@
   grid-template-rows: 1fr 1fr;
   gap: 8px;
 }
+
+.energy_info_new {
+  color: #fff;
+  display: grid;
+  gap: 8px;
+  grid-template-rows: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  height: 168px;
+  padding: 4px 0;
+}
+
+.energy_info_new > div {
+  border-radius: 2px;
+  box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
+  font-size: 14px;
+  line-height: 28px;
+  color: hsl(0, 0%, 100%, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

src/components/Common/TodayGood/components/TodayTableData/index.jsx

@@ -4,7 +4,7 @@ import { ScrollBoard } from "@jiaminghi/data-view-react";
 import { useSelector } from "react-redux";
 
 function getRate(decimal) {
-  return decimal != null ? (decimal.toFixed(2) * 100).toFixed(2) + "%" : undefined;
+  return decimal != null ? (decimal * 100).toFixed(2) + "%" : undefined;
 }
 
 const TodayTableData = (props) => {

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

@@ -1,6 +1,5 @@
 import GraphBase from "../../../Common/GraphBase";
 import ReactECharts from "echarts-for-react";
-// import getOptions from "../../../../hooks/getChartOption";
 import { useSelector } from "react-redux";
 import { useState } from "react";
 import * as echarts from "echarts";
@@ -202,7 +201,6 @@ function getOptions(period, trend) {
         type: "shadow",
       },
       className: "xc-chart-tooltip",
-      // backgroundColor: ''
     },
   };
 }

src/store/features/EnergySlice.js

@@ -6,6 +6,11 @@ export const initialState = {
     elecQty1: "0", // kWh
     // 电消耗量
     elecQty2: "0", // kWh
+    elecQty3: "0", // kWh
+    elecQty4: "0", // kWh
+    elecQty5: "0", // kWh
+    elecQty6: "0", // kWh
+    elecQty7: "0", // kWh
     // 水消耗量
     waterQty: "0", // Km³
     // 天然气1

src/utils/index.ts

@@ -123,7 +123,8 @@ new XClient(
 
 new XClient(
   {
-    url: "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
+    url: "ws://192.168.1.20:48080/websocket/message?userId=ENERGY" + newUser,
+    // url: "ws://10.70.2.2:8080/websocket/message?userId=ENERGY" + newUser,
     // url: "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser,
     name: "MES_DATA",
     // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",