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

1

Browse Source
This commit is contained in:
lb 2024-01-24 17:01:29 +08:00
parent 1ebda5cf6f
commit d6f9744ded
4 changed files with 194 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,11 @@
import cls from "./index.module.css"; import cls from "./index.module.css";
import { Radio } from "antd"; import { Radio, Select } from "antd";
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import { useState } from "react"; import { useState } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { getOptions } from "../../../../utils/energeChartOption"; import { getOptions } from "../../../../utils/energeChartOption";
import triangle from "../../../../assets/Icon/triangle.svg";
import dayjs from "dayjs";
const EnergyCostChart = (props) => { const EnergyCostChart = (props) => {
const elecTrend = useSelector((state) => state.energy.trend.elec); const elecTrend = useSelector((state) => state.energy.trend.elec);
@ -21,6 +23,17 @@ const EnergyCostChart = (props) => {
currentTrend ?? { week: [], month: [], year: [] } currentTrend ?? { week: [], month: [], year: [] }
); );
function handleDateChange(value) {
setPeriod(
{
日: "day",
周: "week",
月: "month",
年: "year",
}[value]
);
}
return ( return (
<div className={cls.energyCostChart}> <div className={cls.energyCostChart}>
<div className={cls.titleBar}> <div className={cls.titleBar}>
@ -45,7 +58,7 @@ const EnergyCostChart = (props) => {
</Radio.Button> </Radio.Button>
</Radio.Group> </Radio.Group>
<Radio.Group {/* <Radio.Group
value={period} value={period}
buttonStyle="solid" buttonStyle="solid"
onChange={(v) => setPeriod(v.target.value)} onChange={(v) => setPeriod(v.target.value)}
@ -60,7 +73,31 @@ const EnergyCostChart = (props) => {
<Radio.Button value="year" className="radio-group__item"> <Radio.Button value="year" className="radio-group__item">
年 年
</Radio.Button> </Radio.Button>
</Radio.Group> </Radio.Group> */}
<Select
defaultValue={"周"}
style={{ width: 60 }}
popupClassName="xc-date-selector-menu"
className={cls.radioGroupShort}
options={["周", "月", "年"].map((item) => ({
label: item,
value: item,
}))}
suffixIcon={<img src={triangle} alt="#" />}
notFoundContent={
<span
style={{
color: "#fff",
fontSize: "14px",
lineHeight: 1,
paddingLeft: "12px",
}}
>
- 无 -
</span>
}
onChange={(value, option) => handleDateChange(value)}
/>
</div> </div>
<div className="flex-1" style={{ marginTop: "8px" }}> <div className="flex-1" style={{ marginTop: "8px" }}>

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

@ -16,7 +16,13 @@
letter-spacing: 1.2px; letter-spacing: 1.2px;
color: #52fff8; color: #52fff8;
} }
.graphBaseDesc {
margin: 0 12px;
line-height: 1;
color: #76fff9;
flex: 1;
}
.energyCostChart .titleBar .legend { .energyCostChart .titleBar .legend {
display: flex; display: flex;
align-items: center; align-items: center;
@ -67,6 +73,10 @@
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
.radioGroupShort * {
border: none !important;
border-radius: 6px !important;
}
.radioGroup *:focus-within { .radioGroup *:focus-within {
box-shadow: none !important; box-shadow: none !important;
} }

96
src/components/Common/SmokeHandle/SmokeTrendChart/index.jsx
View File

@ -1,11 +1,12 @@
import cls from "./index.module.css"; import cls from "./index.module.css";
import { randomInt } from "../../../../utils"; import { randomInt } from "../../../../utils";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { Radio , Select } from "antd"; import { Radio, Select } from "antd";
import ReactECharts from "echarts-for-react"; import ReactECharts from "echarts-for-react";
import { useState } from "react"; import { useEffect, useState } from "react";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import triangle from "../../../../assets/Icon/triangle.svg"; import triangle from "../../../../assets/Icon/triangle.svg";
import dayjs from "dayjs";
const SmokeTrendChart = (props) => { const SmokeTrendChart = (props) => {
const dayTrend = useSelector((state) => state.smoke?.dayTrend); const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@ -27,10 +28,63 @@ const SmokeTrendChart = (props) => {
const options = getOptions(source, period, currentTrend); const options = getOptions(source, period, currentTrend);
const [desc, setDesc] = useState("");
useEffect(() => {
switch (period) {
case "day":
setDesc(
dayjs().subtract(1, "day").format("YYYY.MM.DD") +
" 7点 - " +
dayjs().format("YYYY.MM.DD") +
" 7点"
);
break;
case "month":
setDesc(
dayjs().subtract(1, "month").format("YYYY.MM.") +
"29 - " +
dayjs().format("YYYY.MM.") +
"28"
);
break;
case "week":
setDesc(
dayjs().subtract(7, "day").format("YYYY.MM.DD") +
" - " +
dayjs().subtract(1, "day").format("YYYY.MM.DD")
);
break;
case "year":
setDesc(
dayjs().subtract(1, "year").endOf("year").format("YYYY.MM.") +
"29 - " +
dayjs().endOf("year").format("YYYY.MM.") +
"28"
);
break;
}
}, [period]);
function handleDateChange(value) { function handleDateChange(value) {
setPeriod({ setPeriod(
日: 'day', 周: 'week', 月: 'month', 年: 'year' {
}[value]) 日: "day",
周: "week",
月: "month",
年: "year",
}[value]
);
}
function handleSourceChange(value) {
setPeriod(
{
氧气: "O2_float",
氮氧化物: "NOX_float",
二氧化硫: "SO2_float",
颗粒物: "dust_float",
}[value]
);
} }
return ( return (
@ -49,7 +103,7 @@ const SmokeTrendChart = (props) => {
</div> </div>
<div className={`${cls.choiceBar} flex items-center justify-between`}> <div className={`${cls.choiceBar} flex items-center justify-between`}>
<Radio.Group {/* <Radio.Group
value={source} value={source}
onChange={(e) => setSource(e.target.value)} onChange={(e) => setSource(e.target.value)}
buttonStyle="solid" buttonStyle="solid"
@ -67,7 +121,33 @@ const SmokeTrendChart = (props) => {
<Radio.Button value="dust_float" className="radio-group__item"> <Radio.Button value="dust_float" className="radio-group__item">
颗粒物 颗粒物
</Radio.Button> </Radio.Button>
</Radio.Group> </Radio.Group> */}
<Select
defaultValue={"氧气"}
style={{ width: 100 }}
popupClassName="xc-date-selector-menu"
className={cls.radioGroupShort}
options={["氧气", "氮氧化物", "二氧化硫", "颗粒物"].map((item) => ({
label: item,
value: item,
}))}
suffixIcon={<img src={triangle} alt="#" />}
notFoundContent={
<span
style={{
color: "#fff",
fontSize: "14px",
lineHeight: 1,
paddingLeft: "12px",
}}
>
- 无 -
</span>
}
onChange={(value, option) => handleSourceChange(value)}
/>
<div className={cls.graphBaseDesc}>{desc}</div>
{/* <Radio.Group {/* <Radio.Group
value={period} value={period}
@ -94,7 +174,7 @@ const SmokeTrendChart = (props) => {
style={{ width: 60 }} style={{ width: 60 }}
popupClassName="xc-date-selector-menu" popupClassName="xc-date-selector-menu"
className={cls.radioGroupShort} className={cls.radioGroupShort}
options={["日", "周", "月", '年'].map((item) => ({ options={["日", "周", "月", "年"].map((item) => ({
label: item, label: item,
value: item, value: item,
}))} }))}

104
src/components/Common/SmokeHandle/SmokeTrendChart/index.module.css
View File

@ -1,95 +1,101 @@
.energyCostChart { .energyCostChart {
height: 1px; height: 1px;
flex: 1; flex: 1;
padding-top: 8px; padding-top: 8px;
} }
.energyCostChart .titleBar { .energyCostChart .titleBar {
width: 400px; width: 400px;
margin-bottom: 4px; margin-bottom: 4px;
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;
} }
.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;
} }
.choiceBar { .choiceBar {
margin: 4px 0; margin: 4px 0;
} }
.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;
}
.graphBaseDesc {
margin: 0 12px;
line-height: 1;
color: #76fff9;
flex: 1;
} }