update
This commit is contained in:
lb
parent
d6f9744ded
commit
be5fbe1c01
88
src/components/Common/Energy/EnergeCostRealtime/index.jsx
Normal file
88
src/components/Common/Energy/EnergeCostRealtime/index.jsx
Normal file
@ -0,0 +1,88 @@
|
||||
import cls from "./index.module.scss";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const EnergyCostRealtime = () => {
|
||||
const energyInfo = useSelector((state) => state.energy?.info);
|
||||
|
||||
return (
|
||||
<div className={`${cls.cost__info} flex`}>
|
||||
<div
|
||||
className={`${cls.info__item} flex flex-col justify-center items-center`}
|
||||
style={{ width: "112px", padding: 0 }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "2px",
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
余热发电
|
||||
</span>
|
||||
<span style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}>
|
||||
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
|
||||
</span>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
export default EnergyCostRealtime;
|
||||
@ -0,0 +1,33 @@
|
||||
.cost__info {
|
||||
margin-top: 4px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.info__item {
|
||||
border-radius: 2px;
|
||||
color: hsl(0, 0%, 100%, 0.9);
|
||||
box-shadow: inset 0 0 17px 0px hsla(0, 0%, 100%, 0.15);
|
||||
// min-width: 190px;
|
||||
// height: 43px;
|
||||
font-size: 14px;
|
||||
// letter-spacing: 1.43px;
|
||||
line-height: 40px;
|
||||
padding-left: 12px;
|
||||
// text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.hAuto {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.info__item_groups {
|
||||
margin-left: 8px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
@ -14,6 +14,12 @@ const EnergyCostChart = (props) => {
|
||||
const [source, setSource] = useState("elec");
|
||||
const [period, setPeriod] = useState("week");
|
||||
|
||||
const [timestr, setTimestr] = useState(
|
||||
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
|
||||
" - " +
|
||||
dayjs().subtract(1, "day").format("YYYY.MM.DD")
|
||||
);
|
||||
|
||||
const currentTrend =
|
||||
source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend;
|
||||
|
||||
@ -26,12 +32,29 @@ const EnergyCostChart = (props) => {
|
||||
function handleDateChange(value) {
|
||||
setPeriod(
|
||||
{
|
||||
日: "day",
|
||||
周: "week",
|
||||
月: "month",
|
||||
年: "year",
|
||||
}[value]
|
||||
);
|
||||
setTimestr(
|
||||
{
|
||||
年:
|
||||
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
|
||||
"29 - " +
|
||||
dayjs().endOf("year").format("YYYY.MM.") +
|
||||
"28",
|
||||
周:
|
||||
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
|
||||
" - " +
|
||||
dayjs().subtract(1, "day").format("YYYY.MM.DD"),
|
||||
月:
|
||||
dayjs().subtract(1, "month").format("YYYY.MM.") +
|
||||
"29 - " +
|
||||
dayjs().format("YYYY.MM.") +
|
||||
"28",
|
||||
}[value]
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -74,6 +97,9 @@ const EnergyCostChart = (props) => {
|
||||
年
|
||||
</Radio.Button>
|
||||
</Radio.Group> */}
|
||||
|
||||
<div className={cls.graphBaseDesc}>{timestr}</div>
|
||||
|
||||
<Select
|
||||
defaultValue={"周"}
|
||||
style={{ width: 60 }}
|
||||
|
||||
@ -1,95 +1,95 @@
|
||||
.energyCostChart {
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
padding-top: 8px;
|
||||
height: 1px;
|
||||
flex: 1;
|
||||
padding-top: 8px;
|
||||
}
|
||||
.energyCostChart .titleBar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
.energyCostChart .titleBar h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
color: #52fff8;
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
letter-spacing: 1.2px;
|
||||
color: #52fff8;
|
||||
}
|
||||
.graphBaseDesc {
|
||||
margin: 0 12px;
|
||||
line-height: 1;
|
||||
color: #76fff9;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
margin: 0 12px;
|
||||
line-height: 1;
|
||||
color: #76fff9;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.energyCostChart .titleBar .legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.energyCostChart .titleBar .legend * {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #dff1fe;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #dff1fe;
|
||||
}
|
||||
|
||||
.energyCostChart .titleBar .legend ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
margin-left: 8px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
margin-left: 8px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
align-items: center;
|
||||
}
|
||||
.energyCostChart .titleBar .legend ul li {
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
padding-left: 16px;
|
||||
position: relative;
|
||||
margin: 4px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.energyCostChart .titleBar .legend ul li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.energyCostChart .titleBar .legend ul li:first-child::before {
|
||||
background-color: #ffd160;
|
||||
background-color: #ffd160;
|
||||
}
|
||||
|
||||
.energyCostChart .titleBar .legend ul li:nth-child(2)::before {
|
||||
background-color: #12fff5;
|
||||
background-color: #12fff5;
|
||||
}
|
||||
|
||||
.energyCostChart .titleBar .legend ul li:nth-child(3)::before {
|
||||
background-color: #2760ff;
|
||||
background-color: #2760ff;
|
||||
}
|
||||
|
||||
.radioGroup * {
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.radioGroupShort * {
|
||||
border: none !important;
|
||||
border-radius: 6px !important;
|
||||
border: none !important;
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
.radioGroup *:focus-within {
|
||||
box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.radioGroup *::before {
|
||||
width: 0 !important;
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.radioGroup_button_wrapper {
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
color: #fff !important;
|
||||
background: #03233c !important;
|
||||
}
|
||||
|
||||
.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
|
||||
background: #02457e !important;
|
||||
background: #02457e !important;
|
||||
}
|
||||
|
||||
@ -2,93 +2,14 @@ import cls from "./index.module.scss";
|
||||
import Container from "../../Container";
|
||||
import TechSplitline from "../TechSplitline";
|
||||
import EnergyCostChart from "./EnergyCostChart";
|
||||
import { useSelector } from "react-redux";
|
||||
import EnergyCostRealtime from "./EnergeCostRealtime";
|
||||
|
||||
function EnergyCost(props) {
|
||||
const energyInfo = useSelector((state) => state.energy?.info);
|
||||
|
||||
return (
|
||||
<Container title="能耗" icon="battery" className={cls.energyCost}>
|
||||
<div className={`flex flex-col`}>
|
||||
<div className={`${cls.cost__info} flex`}>
|
||||
<div
|
||||
className={`${cls.info__item} flex flex-col justify-center items-center`}
|
||||
style={{ width: "112px", padding: 0 }}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "2px",
|
||||
lineHeight: 1.5,
|
||||
}}
|
||||
>
|
||||
余热发电
|
||||
</span>
|
||||
<span
|
||||
style={{ fontSize: "20px", color: "#3ce8ff", lineHeight: 1.5 }}
|
||||
>
|
||||
{(+energyInfo?.elecQty1)?.toFixed(2) || 0}kWh
|
||||
</span>
|
||||
</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>
|
||||
<EnergyCostRealtime />
|
||||
|
||||
<TechSplitline />
|
||||
|
||||
|
||||
@ -28,7 +28,12 @@ const GoodRateChart = (props) => {
|
||||
setShowMore(val);
|
||||
}
|
||||
|
||||
const [timestr, setTimestr] = useState("");
|
||||
const [timestr, setTimestr] = useState(
|
||||
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
|
||||
" 7点 - " +
|
||||
dayjs().format("YYYY.MM.DD") +
|
||||
" 7点"
|
||||
);
|
||||
function handleDateChange(value) {
|
||||
// e: Event
|
||||
let v = "day";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user