110 lines
3.0 KiB
JavaScript
110 lines
3.0 KiB
JavaScript
// 天然气流量
|
|
import cls from "./index.module.css";
|
|
import BottomBarItem from "../BottomItemBackground";
|
|
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
|
|
const [showChart, setShowChart] = useState(true);
|
|
|
|
function handleSwitchChange(val) {
|
|
if (val) {
|
|
setShowChart(true);
|
|
} else {
|
|
setShowChart(false);
|
|
}
|
|
}
|
|
|
|
// 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}
|
|
>
|
|
{/* legend */}
|
|
<div className={cls.headWidget}>
|
|
<div className="flex items-center">
|
|
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
|
{showChart && <span className={cls.switchLabel}>历史详情</span>}
|
|
{!showChart && <span className={cls.switchLabel}>实时流量</span>}
|
|
</div>
|
|
|
|
<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}
|
|
onChange={handleSourceChange}
|
|
>
|
|
<Radio.Button value="i" className="radio-group__item">
|
|
天然气 I
|
|
</Radio.Button>
|
|
<Radio.Button value="ii" className="radio-group__item">
|
|
天然气 II
|
|
</Radio.Button>
|
|
</Radio.Group> */}
|
|
</div>
|
|
|
|
<div className={cls.chart}>
|
|
{showChart && <GasChart dataSource={dataSource} />}
|
|
{!showChart && <GridList dataSource={dataSource} />}
|
|
</div>
|
|
</BottomBarItem>
|
|
);
|
|
}
|
|
|
|
export default GasII;
|