update energy

2024-01-25 15:19:27 +08:00
parent 2fb3d05f8c
commit 6e10a5aacd
8 changed files with 257 additions and 107 deletions
--- a/src/components/Common/Arrow/index.jsx
+++ b/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}) => {
-    return (
-        <div className={cls["arrow"]}>
-            <div className={cls['arrow-top']}></div>
-            <div className={cls["arrow-bottom"]}></div>
-        </div>
-    )
-}
+const Arrow = ({ direction, disabled, onClick }) => {
+  function handleClick() {
+    onClick(direction)
+  }
+  return (
+    <button
+      className={`${cls["arrow"]} ${
+        direction == "right" ? cls["arrow__right"] : ""
+      } ${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;
+export default Arrow;
--- a/src/components/Common/Arrow/index.module.css
+++ b/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: relative;
+  position: absolute;
+  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);
 }
--- a/src/components/Common/Energy/EnergeCostRealtime/index.jsx
+++ b/src/components/Common/Energy/EnergeCostRealtime/index.jsx
@@ -1,101 +1,173 @@
+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 (
-    <div className={`${cls.cost__info} flex`}>
-      <div className={`${cls.info__item_groups_col1}`}>
-        <div className={cls.info__item}>
-          <i
-            style={{
-              fontSize: "18px",
-              fontStyle: "normal",
-              paddingRight: "6px",
-            }}
-          >
-            余热发电(实时)
-          </i>
-          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-            {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
-          </span>
-        </div>
+    <>
+      <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}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                余热发电(实时)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
+              </span>
+            </div>

-        <div className={cls.info__item}>
-          <i
-            style={{
-              fontSize: "18px",
-              fontStyle: "normal",
-              paddingRight: "6px",
-            }}
-          >
-            余热发电(总量)
-          </i>
-          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-            {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
-          </span>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                余热发电(总量)
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.elecQty3)?.toFixed(2) || 0}kWh
+              </span>
+            </div>
+          </div>
+          <div className={cls.info__item_groups}>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                水耗量
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
+              </span>
+            </div>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                天然气I
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {energyInfo?.ngQty1 || "0Nm³"}
+              </span>
+            </div>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                电耗量
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
+              </span>
+            </div>
+            <div className={cls.info__item}>
+              <i
+                style={{
+                  fontSize: "18px",
+                  fontStyle: "normal",
+                  paddingRight: "6px",
+                }}
+              >
+                天然气II
+              </i>
+              <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
+                {energyInfo?.ngQty2 || "0Nm³"}
+              </span>
+            </div>
+          </div>
        </div>
-      </div>
-      <div className={cls.info__item_groups}>
-        <div className={cls.info__item}>
-          <i
-            style={{
-              fontSize: "18px",
-              fontStyle: "normal",
-              paddingRight: "6px",
-            }}
-          >
-            水耗量
-          </i>
-          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-            {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³
-          </span>
+      )}
+      {!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>
-        <div className={cls.info__item}>
-          <i
-            style={{
-              fontSize: "18px",
-              fontStyle: "normal",
-              paddingRight: "6px",
-            }}
-          >
-            天然气I
-          </i>
-          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-            {energyInfo?.ngQty1 || "0Nm³"}
-          </span>
-        </div>
-        <div className={cls.info__item}>
-          <i
-            style={{
-              fontSize: "18px",
-              fontStyle: "normal",
-              paddingRight: "6px",
-            }}
-          >
-            电耗量
-          </i>
-          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-            {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
-          </span>
-        </div>
-        <div className={cls.info__item}>
-          <i
-            style={{
-              fontSize: "18px",
-              fontStyle: "normal",
-              paddingRight: "6px",
-            }}
-          >
-            天然气II
-          </i>
-          <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
-            {energyInfo?.ngQty2 || "0Nm³"}
-          </span>
-        </div>
-      </div>
-    </div>
+      )}
+    </>
  );
 };

--- a/src/components/Common/Energy/EnergeCostRealtime/index.module.scss
+++ b/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;
+}
--- a/src/components/Common/TodayGood/components/TodayTableData/index.jsx
+++ b/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) => {
--- a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
+++ b/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: ''
    },
  };
 }
--- a/src/store/features/EnergySlice.js
+++ b/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
--- a/src/utils/index.ts
+++ b/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",