1
This commit is contained in:
lb
parent
1ebda5cf6f
commit
d6f9744ded
@ -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" }}>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}))}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user