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}) => { const Arrow = ({ direction, disabled, onClick }) => {
return ( function handleClick() {
<div className={cls["arrow"]}> onClick(direction)
<div className={cls['arrow-top']}></div> }
<div className={cls["arrow-bottom"]}></div> return (
</div> <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 { .arrow {
appearance: none;
outline: none;
border: none;
background: transparent;
width: 16px; width: 16px;
height: 48px; 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 { .arrow-top {
background: #00f3ed; transition: background 0.1s ease-out;
background: #1eaba9;
width: 8px; width: 8px;
height: 24px; height: 24px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
border-radius: 12px; border-radius: 12px;
transform: rotateZ(20deg) translateY(2px) translateX(4px);
} }
.arrow-bottom { .arrow-bottom {
background: #00f3ed; transition: background 0.1s ease-out;
background: #1eaba9;
width: 8px; width: 8px;
height: 24px; height: 24px;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
border-radius: 12px; 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 cls from "./index.module.scss";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import Arrow from "../../Arrow";
const EnergyCostRealtime = () => { const EnergyCostRealtime = () => {
const [isPage1, setIsPage1] = useState(false);
const energyInfo = useSelector((state) => state.energy?.info); const energyInfo = useSelector((state) => state.energy?.info);
function handleClick() {
setIsPage1((pre) => !pre);
}
return ( return (
<div className={`${cls.cost__info} flex`}> <>
<div className={`${cls.info__item_groups_col1}`}> <Arrow key="left" direction="left" onClick={handleClick} />
<div className={cls.info__item}> <Arrow key="right" direction="right" onClick={handleClick} />
<i {isPage1 && (
style={{ <div className={`${cls.cost__info} flex`}>
fontSize: "18px", <div className={`${cls.info__item_groups_col1}`}>
fontStyle: "normal", <div className={cls.info__item}>
paddingRight: "6px", <i
}} style={{
> fontSize: "18px",
余热发电(实时) fontStyle: "normal",
</i> paddingRight: "6px",
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> }}
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh >
</span> 余热发电(实时)
</div> </i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.elecQty2)?.toFixed(2) || 0}kWh
</span>
</div>
<div className={cls.info__item}> <div className={cls.info__item}>
<i <i
style={{ style={{
fontSize: "18px", fontSize: "18px",
fontStyle: "normal", fontStyle: "normal",
paddingRight: "6px", paddingRight: "6px",
}} }}
> >
余热发电(总量) 余热发电(总量)
</i> </i>
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh {(+energyInfo?.elecQty3)?.toFixed(2) || 0}kWh
</span> </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> )}
<div className={cls.info__item_groups}> {!isPage1 && (
<div className={cls.info__item}> <div className={cls.energy_info_new}>
<i <div className="energy_info_new--item">
style={{ <i
fontSize: "18px", style={{
fontStyle: "normal", fontSize: "18px",
paddingRight: "6px", fontStyle: "normal",
}} paddingRight: "6px",
> }}
水耗量 >
</i> 智慧能源光伏发电(昨日)/kwh
<span style={{ fontSize: "17px", color: "#3ce8ff" }}> </i>
{(+energyInfo?.waterQty)?.toFixed(2) || 0}Km³ <span style={{ fontSize: "17px", color: "#3ce8ff" }}>
</span> {(+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>
<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 { .cost__info {
margin-top: 4px; margin-top: 4px;
margin-bottom: 12px; margin-bottom: 6px;
// margin-bottom: 12px;
} }
.info__item { .info__item {
@ -35,3 +36,25 @@
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
gap: 8px; 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"; import { useSelector } from "react-redux";
function getRate(decimal) { function getRate(decimal) {
return decimal != null ? (decimal.toFixed(2) * 100).toFixed(2) + "%" : undefined; return decimal != null ? (decimal * 100).toFixed(2) + "%" : undefined;
} }
const TodayTableData = (props) => { const TodayTableData = (props) => {

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

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

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

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

3
src/utils/index.ts
View File

@ -123,7 +123,8 @@ new XClient(
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, // url: "ws://192.168.1.74:48080/websocket/message?userId=ENERGY" + newUser,
name: "MES_DATA", name: "MES_DATA",
// "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111", // "ws://192.168.1.74:48080/websocket/message?userId=ENERGY111",