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 { Radio } from "antd";
import { Radio, Select } from "antd";
import ReactECharts from "echarts-for-react";
import { useState } from "react";
import { useSelector } from "react-redux";
import { getOptions } from "../../../../utils/energeChartOption";
import triangle from "../../../../assets/Icon/triangle.svg";
import dayjs from "dayjs";
const EnergyCostChart = (props) => {
const elecTrend = useSelector((state) => state.energy.trend.elec);
@ -21,6 +23,17 @@ const EnergyCostChart = (props) => {
currentTrend ?? { week: [], month: [], year: [] }
);
function handleDateChange(value) {
setPeriod(
{
日: "day",
周: "week",
月: "month",
年: "year",
}[value]
);
}
return (
<div className={cls.energyCostChart}>
<div className={cls.titleBar}>
@ -45,7 +58,7 @@ const EnergyCostChart = (props) => {
</Radio.Button>
</Radio.Group>
<Radio.Group
{/* <Radio.Group
value={period}
buttonStyle="solid"
onChange={(v) => setPeriod(v.target.value)}
@ -60,7 +73,31 @@ const EnergyCostChart = (props) => {
<Radio.Button value="year" className="radio-group__item">
年
</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 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;
color: #52fff8;
}
.graphBaseDesc {
margin: 0 12px;
line-height: 1;
color: #76fff9;
flex: 1;
}
.energyCostChart .titleBar .legend {
display: flex;
align-items: center;
@ -67,6 +73,10 @@
border: none !important;
border-radius: 0 !important;
}
.radioGroupShort * {
border: none !important;
border-radius: 6px !important;
}
.radioGroup *:focus-within {
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 { randomInt } from "../../../../utils";
import * as echarts from "echarts";
import { Radio , Select } from "antd";
import { Radio, Select } from "antd";
import ReactECharts from "echarts-for-react";
import { useState } from "react";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import triangle from "../../../../assets/Icon/triangle.svg";
import dayjs from "dayjs";
const SmokeTrendChart = (props) => {
const dayTrend = useSelector((state) => state.smoke?.dayTrend);
@ -27,10 +28,63 @@ const SmokeTrendChart = (props) => {
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) {
setPeriod({
日: 'day', 周: 'week', 月: 'month', 年: 'year'
}[value])
setPeriod(
{
日: "day",
周: "week",
月: "month",
年: "year",
}[value]
);
}
function handleSourceChange(value) {
setPeriod(
{
氧气: "O2_float",
氮氧化物: "NOX_float",
二氧化硫: "SO2_float",
颗粒物: "dust_float",
}[value]
);
}
return (
@ -49,7 +103,7 @@ const SmokeTrendChart = (props) => {
</div>
<div className={`${cls.choiceBar} flex items-center justify-between`}>
<Radio.Group
{/* <Radio.Group
value={source}
onChange={(e) => setSource(e.target.value)}
buttonStyle="solid"
@ -67,7 +121,33 @@ const SmokeTrendChart = (props) => {
<Radio.Button value="dust_float" className="radio-group__item">
颗粒物
</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
value={period}
@ -94,7 +174,7 @@ const SmokeTrendChart = (props) => {
style={{ width: 60 }}
popupClassName="xc-date-selector-menu"
className={cls.radioGroupShort}
options={["日", "周", "月", '年'].map((item) => ({
options={["日", "周", "月", "年"].map((item) => ({
label: item,
value: item,
}))}

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

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