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