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

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

@ -1,71 +1,71 @@
// 天然气流量 // 天然气流量
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 { Switch, 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";
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
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(true);
function handleSwitchChange(val) { function handleSwitchChange(val) {
if (val) { if (val) {
setShowChart(true); setShowChart(true);
} else { } else {
setShowChart(false); setShowChart(false);
} }
} }
function handleSourceChange(e) { function handleSourceChange(e) {
console.log('val', e.target.value); console.log("val", e.target.value);
if (e.target.value == 'ii') { if (e.target.value == "ii") {
// 天然气II // 天然气II
setDataSource('gas-ii'); setDataSource("gas-ii");
} else if (e.target.value == 'i') { } else if (e.target.value == "i") {
// 天然气 I // 天然气 I
setDataSource('gas-i'); setDataSource("gas-i");
} }
} }
return ( return (
<BottomBarItem <BottomBarItem
icon="pause" icon="pause"
title="天然气流量" title="天然气流量"
className={`${cls.gas} ${props.className}`} className={`${cls.gas} ${props.className}`}
style={props.style} style={props.style}
> >
{/* legend */} {/* legend */}
<div className={cls.headWidget}> <div className={cls.headWidget}>
<div className="flex items-center"> <div className="flex items-center">
<Switch size="small" defaultChecked onChange={handleSwitchChange} /> <Switch size="small" defaultChecked onChange={handleSwitchChange} />
{showChart && <span className={cls.switchLabel}>历史详情</span>} {showChart && <span className={cls.switchLabel}>历史详情</span>}
{!showChart && <span className={cls.switchLabel}>实时流量</span>} {!showChart && <span className={cls.switchLabel}>实时流量</span>}
</div> </div>
<Radio.Group <Radio.Group
defaultValue="i" defaultValue="i"
buttonStyle="solid" buttonStyle="solid"
className={cls.radioGroup} className={cls.radioGroup}
onChange={handleSourceChange} onChange={handleSourceChange}
> >
<Radio.Button value="i" className="radio-group__item"> <Radio.Button value="i" className="radio-group__item">
天然气 I 天然气 I
</Radio.Button> </Radio.Button>
<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}>
{showChart && <GasChart dataSource={dataSource} />} {showChart && <GasChart dataSource={dataSource} />}
{!showChart && <GridList dataSource={dataSource} />} {!showChart && <GridList dataSource={dataSource} />}
</div> </div>
</BottomBarItem> </BottomBarItem>
); );
} }
export default GasII; export default GasII;

63
src/store/features/gasSlice.js
View File

@ -1,47 +1,56 @@
// 风机运行频率 // 天然气流量
import { createSlice } from "@reduxjs/toolkit"; import { createSlice } from "@reduxjs/toolkit";
/**
* 由于接口并没有经过合理的评审，所以这里的数据结构是不确定的，需要根据实际情况进行调整
*/
export const initialState = { export const initialState = {
history: { gasIHistory: {
// 历史数据 // 历史数据
GAS1: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], // GAS1: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))],
GAS2: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], GAS1: [...Array.from({ length: 7 }, () => 0)],
GAS3: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], GAS2: [...Array.from({ length: 7 }, () => 0)],
GAS4: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], GAS3: [...Array.from({ length: 7 }, () => 0)],
GAS5: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], GAS4: [...Array.from({ length: 7 }, () => 0)],
GAS6: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], GAS5: [...Array.from({ length: 7 }, () => 0)],
GAS7: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], GAS6: [...Array.from({ length: 7 }, () => 0)],
GAS8: [...Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))], GAS7: [...Array.from({ length: 7 }, () => 0)],
GAS8: [...Array.from({ length: 7 }, () => 0)],
},
gasIIHistory: {
GAS1: [...Array.from({ length: 7 }, () => 0)],
GAS2: [...Array.from({ length: 7 }, () => 0)],
GAS3: [...Array.from({ length: 7 }, () => 0)],
GAS4: [...Array.from({ length: 7 }, () => 0)],
}, },
runtime: [ gasIRuntime: [
// 实时数据 // 实时数据
...Array.from( ...Array.from(
{ length: 8 }, { length: 8 },
() => Math.floor(Math.random() * 100) + "m³/h" // () => Math.floor(Math.random() * 100) + "m³/h"
() => "0m³/h"
), ),
], ],
gasIIRuntime: [
// 实时数据
...Array.from({ length: 8 }, () => "0m³/h"),
],
}; };
// export const stateNameMap = {
// lastFireChangeTime: "10分20秒",
// fireChangeTime: "10:23",
// fireDirection: "东火",
// };
const gasSlice = createSlice({ const gasSlice = createSlice({
name: "wind", name: "natGas",
initialState, initialState,
reducers: { reducers: {
setHistory: (state, action) => { setGasIHistory: (state, action) => {
state.history = action.payload; state.gasIHistory = action.payload;
}, },
setRuntime: (state, action) => { setGasIIHistory: (state, action) => {
state.runtime = action.payload; state.gasIIHistory = action.payload;
},
setGasIIRuntime: (state, action) => {
state.gasIRuntime = action.payload;
},
setGasIRuntime: (state, action) => {
state.gasIIRuntime = action.payload;
}, },
}, },
}); });

23
src/utils/index.js
View File

@ -48,6 +48,29 @@ export class WsClient {
}); });
break; break;
} }
case "GasInfo": {
// 天然气流量 1 实时
store.dispatch({
type: 'gas/setGasIRuntime',
payload: serializedData.data.gas1Now
})
// 天然气流量 1 历史
store.dispatch({
type: 'gas/setGasIHistory',
payload: serializedData.data.hisGas1
})
// 天然气流量 2 实时
store.dispatch({
type: 'gas/setGasIIRuntime',
payload: serializedData.data.gas2Now
})
// 天然气流量 2 历史
store.dispatch({
type: 'gas/setGasIIHistory',
payload: serializedData.data.hisGas2
})
break;
}
default: { default: {
console.log("websocket message: [unknown] ---> ", e.data); console.log("websocket message: [unknown] ---> ", e.data);
} }