mt-fe-group/xuchang-new
9
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
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" }}>

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

@@ -16,6 +16,12 @@
letter-spacing: 1.2px;
color: #52fff8;
}
.graphBaseDesc {
margin: 0 12px;
line-height: 1;
color: #76fff9;
flex: 1;
}
.energyCostChart .titleBar .legend {
display: flex;
@@ -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;
}

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

@@ -3,9 +3,10 @@ import { randomInt } from "../../../../utils";
import * as echarts from "echarts";
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,
}))}

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

@@ -43,7 +43,7 @@
padding-left: 16px;
}
.energyCostChart .titleBar .legend ul li::before {
content: '';
content: "";
position: absolute;
left: 2px;
top: 2px;
@@ -93,3 +93,9 @@
.radioGroup_button_wrapper.ant-radio-button-wrapper-checked {
background: #02457e !important;
}
.graphBaseDesc {
margin: 0 12px;
line-height: 1;
color: #76fff9;
flex: 1;
}