mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update energy

Browse Source
This commit is contained in:
lb 2024-01-25 15:19:27 +08:00
parent 2fb3d05f8c
commit 6e10a5aacd
8 changed files with 257 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Common/Arrow/index.jsx
View File

@ -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;

43
src/components/Common/Arrow/index.module.css
View File

@ -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);
}

248
src/components/Common/Energy/EnergeCostRealtime/index.jsx
View File

@ -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>
)}
</>
);
};

25
src/components/Common/Energy/EnergeCostRealtime/index.module.scss
View File

@ -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;
}

2
src/components/Common/TodayGood/components/TodayTableData/index.jsx
View File

@ -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) => {

2
src/components/Modules/EnergyCostAnalysis/ElectricityCost/index.jsx
View File

@ -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: ''
},
};
}

5
src/store/features/EnergySlice.js
View File

@ -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

3
src/utils/index.ts
View File

@ -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",