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

update

Browse Source
This commit is contained in:
lb
2024-01-25 09:10:00 +08:00
parent d6f9744ded
commit be5fbe1c01
6 changed files with 208 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/Common/Energy/EnergeCostRealtime/index.jsx Normal file
View 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;

33
src/components/Common/Energy/EnergeCostRealtime/index.module.scss Normal file
View File

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

28
src/components/Common/Energy/EnergyCostChart/index.jsx
View File

@@ -14,6 +14,12 @@ const EnergyCostChart = (props) => {
const [source, setSource] = useState("elec"); const [source, setSource] = useState("elec");
const [period, setPeriod] = useState("week"); 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 = const currentTrend =
source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend; source == "elec" ? elecTrend : source == "gasi" ? gasITrend : gasIITrend;
@@ -26,12 +32,29 @@ const EnergyCostChart = (props) => {
function handleDateChange(value) { function handleDateChange(value) {
setPeriod( setPeriod(
{ {
日: "day",
周: "week", 周: "week",
月: "month", 月: "month",
年: "year", 年: "year",
}[value] }[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 ( return (
@@ -74,6 +97,9 @@ const EnergyCostChart = (props) => {
年 年
</Radio.Button> </Radio.Button>
</Radio.Group> */} </Radio.Group> */}
<div className={cls.graphBaseDesc}>{timestr}</div>
<Select <Select
defaultValue={"周"} defaultValue={"周"}
style={{ width: 60 }} style={{ width: 60 }}

102
src/components/Common/Energy/EnergyCostChart/index.module.css
View File

@@ -1,95 +1,95 @@
.energyCostChart { .energyCostChart {
height: 1px; height: 1px;
flex: 1; flex: 1;
padding-top: 8px; padding-top: 8px;
} }
.energyCostChart .titleBar { .energyCostChart .titleBar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
color: white; color: white;
} }
.energyCostChart .titleBar h2 { .energyCostChart .titleBar h2 {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
letter-spacing: 1.2px; letter-spacing: 1.2px;
color: #52fff8; color: #52fff8;
} }
.graphBaseDesc { .graphBaseDesc {
margin: 0 12px; margin: 0 12px;
line-height: 1; line-height: 1;
color: #76fff9; color: #76fff9;
flex: 1; flex: 1;
} }
.energyCostChart .titleBar .legend { .energyCostChart .titleBar .legend {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.energyCostChart .titleBar .legend * { .energyCostChart .titleBar .legend * {
font-size: 14px; font-size: 14px;
line-height: 14px; line-height: 14px;
color: #dff1fe; color: #dff1fe;
} }
.energyCostChart .titleBar .legend ul { .energyCostChart .titleBar .legend ul {
display: flex; display: flex;
margin: 0; margin: 0;
margin-left: 8px; margin-left: 8px;
padding: 0; padding: 0;
list-style: none; list-style: none;
align-items: center; align-items: center;
} }
.energyCostChart .titleBar .legend ul li { .energyCostChart .titleBar .legend ul li {
position: relative; position: relative;
margin: 4px; margin: 4px;
padding-left: 16px; padding-left: 16px;
} }
.energyCostChart .titleBar .legend ul li::before { .energyCostChart .titleBar .legend ul li::before {
content: ''; content: "";
position: absolute; position: absolute;
left: 2px; left: 2px;
top: 2px; top: 2px;
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 2px; border-radius: 2px;
} }
.energyCostChart .titleBar .legend ul li:first-child::before { .energyCostChart .titleBar .legend ul li:first-child::before {
background-color: #ffd160; background-color: #ffd160;
} }
.energyCostChart .titleBar .legend ul li:nth-child(2)::before { .energyCostChart .titleBar .legend ul li:nth-child(2)::before {
background-color: #12fff5; background-color: #12fff5;
} }
.energyCostChart .titleBar .legend ul li:nth-child(3)::before { .energyCostChart .titleBar .legend ul li:nth-child(3)::before {
background-color: #2760ff; background-color: #2760ff;
} }
.radioGroup * { .radioGroup * {
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
.radioGroupShort * { .radioGroupShort * {
border: none !important; border: none !important;
border-radius: 6px !important; border-radius: 6px !important;
} }
.radioGroup *:focus-within { .radioGroup *:focus-within {
box-shadow: none !important; box-shadow: none !important;
} }
.radioGroup *::before { .radioGroup *::before {
width: 0 !important; width: 0 !important;
} }
.radioGroup_button_wrapper { .radioGroup_button_wrapper {
color: #fff !important; color: #fff !important;
background: #03233c !important; background: #03233c !important;
} }
.radioGroup_button_wrapper.ant-radio-button-wrapper-checked { .radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
background: #02457e !important; background: #02457e !important;
} }

83
src/components/Common/Energy/index.jsx
View File

@@ -2,93 +2,14 @@ import cls from "./index.module.scss";
import Container from "../../Container"; import Container from "../../Container";
import TechSplitline from "../TechSplitline"; import TechSplitline from "../TechSplitline";
import EnergyCostChart from "./EnergyCostChart"; import EnergyCostChart from "./EnergyCostChart";
import { useSelector } from "react-redux"; import EnergyCostRealtime from "./EnergeCostRealtime";
function EnergyCost(props) { function EnergyCost(props) {
const energyInfo = useSelector((state) => state.energy?.info);
return ( return (
<Container title="能耗" icon="battery" className={cls.energyCost}> <Container title="能耗" icon="battery" className={cls.energyCost}>
<div className={`flex flex-col`}> <div className={`flex flex-col`}>
<div className={`${cls.cost__info} flex`}> <EnergyCostRealtime />
<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>
<TechSplitline /> <TechSplitline />

7
src/components/Common/TodayGood/components/GoodRateChart/index.jsx
View File

@@ -28,7 +28,12 @@ const GoodRateChart = (props) => {
setShowMore(val); 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) { function handleDateChange(value) {
// e: Event // e: Event
let v = "day"; let v = "day";