@@ -6,7 +6,7 @@ function BottomBarItem(props) { | |||
<Container | |||
icon={props.icon} | |||
title={props.title} | |||
desc="hello world" | |||
desc={props.desc} | |||
className={`${cls.bottomBarItem} ${props.className}`} | |||
style={props.style} | |||
> | |||
@@ -6,6 +6,7 @@ import * as echarts from "echarts"; | |||
import { Switch } from "antd"; | |||
import { useState, useEffect } from "react"; | |||
import { useSelector, useDispatch } from "react-redux"; | |||
import dayjs from "dayjs"; | |||
/** 助燃风流量 */ | |||
function GasI(props) { | |||
@@ -22,10 +23,17 @@ function GasI(props) { | |||
setShowChart(false); | |||
} | |||
} | |||
const desc = | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"); | |||
return ( | |||
<BottomBarItem | |||
icon="pause" | |||
title="助燃风流量" | |||
desc={desc} | |||
className={cls.gas} | |||
style={props.style} | |||
> | |||
@@ -39,10 +47,7 @@ function GasI(props) { | |||
<div className={cls.chart}> | |||
{showChart && ( | |||
<ReactECharts | |||
option={options} | |||
style={{ height: "100%" }} | |||
/> | |||
<ReactECharts option={options} style={{ height: "100%" }} /> | |||
)} | |||
{!showChart && ( | |||
<div className={cls.gridList}> | |||
@@ -1,11 +1,12 @@ | |||
// 天然气流量 | |||
import cls from "./index.module.css"; | |||
import BottomBarItem from "../BottomItemBackground"; | |||
import { Switch, Radio } from "antd"; | |||
import triangle from "../../../assets/Icon/triangle.svg"; | |||
import { Switch, Select, Radio } from "antd"; | |||
import { useState } from "react"; | |||
import GridList from "./gridList"; | |||
import GasChart from "./gasChart"; | |||
import dayjs from "dayjs"; | |||
function GasII(props) { | |||
const [dataSource, setDataSource] = useState("gas-i"); // gas-i , gas-ii | |||
@@ -19,20 +20,33 @@ function GasII(props) { | |||
} | |||
} | |||
function handleSourceChange(e) { | |||
if (e.target.value == "ii") { | |||
// 天然气II | |||
setDataSource("gas-ii"); | |||
} else if (e.target.value == "i") { | |||
// 天然气 I | |||
// function handleSourceChange(e) { | |||
// if (e.target.value == "ii") { | |||
// // 天然气II | |||
// setDataSource("gas-ii"); | |||
// } else if (e.target.value == "i") { | |||
// // 天然气 I | |||
// setDataSource("gas-i"); | |||
// } | |||
// } | |||
function handleDateChange(value) { | |||
if (value == "天然气I") { | |||
setDataSource("gas-i"); | |||
} else { | |||
setDataSource("gas-ii"); | |||
} | |||
} | |||
const desc = | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD"); | |||
return ( | |||
<BottomBarItem | |||
icon="pause" | |||
title="天然气流量" | |||
desc={desc} | |||
className={`${cls.gas} ${props.className}`} | |||
style={props.style} | |||
> | |||
@@ -44,7 +58,32 @@ function GasII(props) { | |||
{!showChart && <span className={cls.switchLabel}>实时流量</span>} | |||
</div> | |||
<Radio.Group | |||
<Select | |||
defaultValue={"天然气I"} | |||
style={{ width: 90 }} | |||
popupClassName="xc-date-selector-menu" | |||
className={cls.radioGroup} | |||
options={["天然气I", "天然气II"].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)} | |||
/> | |||
{/* <Radio.Group | |||
defaultValue="i" | |||
buttonStyle="solid" | |||
className={cls.radioGroup} | |||
@@ -56,7 +95,7 @@ function GasII(props) { | |||
<Radio.Button value="ii" className="radio-group__item"> | |||
天然气 II | |||
</Radio.Button> | |||
</Radio.Group> | |||
</Radio.Group> */} | |||
</div> | |||
<div className={cls.chart}> | |||
@@ -70,7 +70,7 @@ | |||
.radioGroup * { | |||
border: none !important; | |||
border-radius: 0 !important; | |||
border-radius: 6px !important; | |||
} | |||
.radioGroup *:focus-within { | |||
@@ -1,10 +1,11 @@ | |||
import cls from "./index.module.css"; | |||
import { randomInt } from "../../../../utils"; | |||
import * as echarts from "echarts"; | |||
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 triangle from "../../../../assets/Icon/triangle.svg"; | |||
const SmokeTrendChart = (props) => { | |||
const dayTrend = useSelector((state) => state.smoke?.dayTrend); | |||
@@ -26,6 +27,12 @@ const SmokeTrendChart = (props) => { | |||
const options = getOptions(source, period, currentTrend); | |||
function handleDateChange(value) { | |||
setPeriod({ | |||
日: 'day', 周: 'week', 月: 'month', 年: 'year' | |||
}[value]) | |||
} | |||
return ( | |||
<div className={cls.energyCostChart}> | |||
<div className={cls.titleBar}> | |||
@@ -62,7 +69,7 @@ const SmokeTrendChart = (props) => { | |||
</Radio.Button> | |||
</Radio.Group> | |||
<Radio.Group | |||
{/* <Radio.Group | |||
value={period} | |||
onChange={(e) => setPeriod(e.target.value)} | |||
buttonStyle="solid" | |||
@@ -80,7 +87,32 @@ const SmokeTrendChart = (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> | |||
{options && <ReactECharts option={options} style={{ height: "240px" }} />} | |||
{!options && ( | |||
@@ -73,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; | |||
} | |||
@@ -39,7 +39,7 @@ function FaultTotal(props) { | |||
timeDesc = dayjs().subtract(1, 'day').format('YYYY.MM.DD') + " 7点 - " + dayjs().format('YYYY.MM.DD') + " 7点"; | |||
break; | |||
case "周": | |||
timeDesc = dayjs().subtract(8, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ; | |||
timeDesc = dayjs().subtract(7, 'day').format('YYYY.MM.DD') + " - " + dayjs().subtract(1, 'day').format('YYYY.MM.DD') ; | |||
break; | |||
case "月": | |||
timeDesc = dayjs().subtract(1, 'month').format('YYYY.MM.') + "29 - " + dayjs().format('YYYY.MM.') + '28' ; | |||
@@ -44,18 +44,18 @@ const GoodRateChart = (props) => { | |||
case "月": | |||
v = "month"; | |||
setTimestr( | |||
dayjs().subtract(8, "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" | |||
); | |||
break; | |||
case "周": | |||
v = "week"; | |||
setTimestr( | |||
dayjs().subtract(1, "month").format("YYYY.MM.") + | |||
"29 - " + | |||
dayjs().format("YYYY.MM.") + | |||
"28" | |||
dayjs().subtract(7, "day").format("YYYY.MM.DD") + | |||
" - " + | |||
dayjs().subtract(1, "day").format("YYYY.MM.DD") | |||
); | |||
break; | |||
case "年": | |||
@@ -33,8 +33,9 @@ | |||
.graphBaseDesc { | |||
margin: 0 6px; | |||
margin-left: 110px; | |||
margin-left: 108px; | |||
font-size: 16px; | |||
line-height: 1; | |||
color: #76fff9; | |||
flex: 1; | |||
} | |||