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

View File

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

View File

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