From 6e10a5aacdd25c18ca743ad6222f336096b0e5d2 Mon Sep 17 00:00:00 2001 From: lb Date: Thu, 25 Jan 2024 15:19:27 +0800 Subject: [PATCH] update energy --- src/components/Common/Arrow/index.jsx | 36 ++- src/components/Common/Arrow/index.module.css | 43 ++- .../Energy/EnergeCostRealtime/index.jsx | 248 +++++++++++------- .../EnergeCostRealtime/index.module.scss | 25 +- .../components/TodayTableData/index.jsx | 2 +- .../ElectricityCost/index.jsx | 2 - src/store/features/EnergySlice.js | 5 + src/utils/index.ts | 3 +- 8 files changed, 257 insertions(+), 107 deletions(-) diff --git a/src/components/Common/Arrow/index.jsx b/src/components/Common/Arrow/index.jsx index 563d35b..4f3e9f9 100644 --- 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 ( -
-
-
-
- ) -} +const Arrow = ({ direction, disabled, onClick }) => { + function handleClick() { + onClick(direction) + } + return ( + + ); +}; -export default Arrow; \ No newline at end of file +export default Arrow; diff --git a/src/components/Common/Arrow/index.module.css b/src/components/Common/Arrow/index.module.css index 24251c7..6ac697f 100644 --- 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); } diff --git a/src/components/Common/Energy/EnergeCostRealtime/index.jsx b/src/components/Common/Energy/EnergeCostRealtime/index.jsx index 3f2b131..6ed66bc 100644 --- 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 ( -
-
-
- - 余热发电(实时) - - - {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh - -
+ <> + + + {isPage1 && ( +
+
+
+ + 余热发电(实时) + + + {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh + +
-
- - 余热发电(总量) - - - {(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh - +
+ + 余热发电(总量) + + + {(+energyInfo?.elecQty3)?.toFixed(2) || 0}kWh + +
+
+
+
+ + 水耗量 + + + {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³ + +
+
+ + 天然气I + + + {energyInfo?.ngQty1 || "0Nm³"} + +
+
+ + 电耗量 + + + {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh + +
+
+ + 天然气II + + + {energyInfo?.ngQty2 || "0Nm³"} + +
+
-
-
-
- - 水耗量 - - - {(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³ - + )} + {!isPage1 && ( +
+
+ + 智慧能源光伏发电(昨日)/kwh + + + {(+energyInfo?.elecQty6)?.toFixed(2) || 0}kWh + +
+
+ + 许昌安彩光伏发电(昨日)/kwh + + + {(+energyInfo?.elecQty7)?.toFixed(2) || 0}kWh + +
+
+ + 智慧能源光伏发电(总量)/kwh + + + {(+energyInfo?.elecQty4)?.toFixed(2) || 0}kWh + +
+
+ + 许昌安彩光伏发电(总量)/kwh + + + {(+energyInfo?.elecQty5)?.toFixed(2) || 0}kWh + +
-
- - 天然气I - - - {energyInfo?.ngQty1 || "0Nm³"} - -
-
- - 电耗量 - - - {(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh - -
-
- - 天然气II - - - {energyInfo?.ngQty2 || "0Nm³"} - -
-
-
+ )} + ); }; diff --git a/src/components/Common/Energy/EnergeCostRealtime/index.module.scss b/src/components/Common/Energy/EnergeCostRealtime/index.module.scss index 5147cf5..9896b8c 100644 --- 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; +} diff --git a/src/components/Common/TodayGood/components/TodayTableData/index.jsx b/src/components/Common/TodayGood/components/TodayTableData/index.jsx index 8997a73..4ce3035 100644 --- 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) => { diff --git a/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx b/src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx index 6760591..c1e9951 100644 --- 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: '' }, }; } diff --git a/src/store/features/EnergySlice.js b/src/store/features/EnergySlice.js index 960665d..abb2d15 100644 --- 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 diff --git a/src/utils/index.ts b/src/utils/index.ts index c8c0f44..e10187d 100644 --- 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",