mt-fe-group/xuchang-new
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 天然气数据

Browse Source
This commit is contained in:
lb
2023-11-30 17:01:30 +08:00
parent d65fc0e3ed
commit a880f62393
4 changed files with 144 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Common/NatGasFlow/gasChart/index.jsx
View File

@@ -1,37 +1,34 @@
import cls from './index.module.css';
import ReactECharts from 'echarts-for-react';
import getOptions from './chart.config';
// import SocketContext from '../../../../store/socket-data-provider';
import { useContext } from 'react';
import cls from "./index.module.css";
import ReactECharts from "echarts-for-react";
import getOptions from "./chart.config";
import { useSelector, useDispatch } from "react-redux";
function GasChart(props) {
const { dataSource } = props;
// const { hisState } = useContext(SocketContext);
const hisState = null;
const dataName = dataSource == 'gas-i' ? 'kilnGasT1' : 'kilnGasT2';
const { dataSource } = props;
const hisState = useSelector((state) => state.combustionAir.runtime);
const dataName = dataSource == "gas-i" ? "hisGas1" : "hisGas2";
// keys() 的结果不是按照顺序的，需要 sort()
const seriesData = hisState?.[dataName]
? Object.keys(hisState?.[dataName])
.sort()
.map((key, index) => hisState?.[dataName][key])
: Array(dataSource == 'gas-i' ? 8 : 4).fill(Array(7).fill(0));
const seriesData = hisState?.[dataName]
? Object.keys(hisState?.[dataName])
.sort()
.map((key, index) => hisState?.[dataName][key])
: Array(dataSource == "gas-i" ? 8 : 4).fill(Array(7).fill(0));
// debug
console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
// // debug
// console.log('天然气 series data', dataName, hisState?.[dataName], seriesData);
return (
<div className={cls.gasChart}>
<ReactECharts
key={Math.random()}
option={getOptions(
seriesData,
dataSource == 'gas-i' ? '天然气I' : '天然气II',
)}
style={{ height: '100%' }}
/>
</div>
);
return (
<div className={cls.gasChart}>
<ReactECharts
key={Math.random()}
option={getOptions(
seriesData,
dataSource == "gas-i" ? "天然气I" : "天然气II"
)}
style={{ height: "100%" }}
/>
</div>
);
}
export default GasChart;

118
src/components/Common/NatGasFlow/index.jsx
View File

@@ -1,71 +1,71 @@
// 天然气流量
import cls from './index.module.css';
import BottomBarItem from '../BottomItemBackground';
import cls from "./index.module.css";
import BottomBarItem from "../BottomItemBackground";
import { Switch, Radio } from 'antd';
import { useState } from 'react';
import GridList from './gridList';
import GasChart from './gasChart';
import { Switch, Radio } from "antd";
import { useState } from "react";
import GridList from "./gridList";
import GasChart from "./gasChart";
function GasII(props) {
const [dataSource, setDataSource] = useState('gas-i'); // gas-i , gas-ii
const [showChart, setShowChart] = useState(true);
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 handleSwitchChange(val) {
if (val) {
setShowChart(true);
} else {
setShowChart(false);
}
}
function handleSourceChange(e) {
console.log('val', e.target.value);
if (e.target.value == 'ii') {
// 天然气II
setDataSource('gas-ii');
} else if (e.target.value == 'i') {
// 天然气 I
setDataSource('gas-i');
}
}
function handleSourceChange(e) {
console.log("val", e.target.value);
if (e.target.value == "ii") {
// 天然气II
setDataSource("gas-ii");
} else if (e.target.value == "i") {
// 天然气 I
setDataSource("gas-i");
}
}
return (
<BottomBarItem
icon="pause"
title="天然气流量"
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>
return (
<BottomBarItem
icon="pause"
title="天然气流量"
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>
<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>
<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>
);
<div className={cls.chart}>
{showChart && <GasChart dataSource={dataSource} />}
{!showChart && <GridList dataSource={dataSource} />}
</div>
</BottomBarItem>
);
}
export default GasII;