diff --git a/src/components/RightBar/EnergyCost/index.jsx b/src/components/RightBar/EnergyCost/index.jsx index b1a3cbb..0189f50 100644 --- a/src/components/RightBar/EnergyCost/index.jsx +++ b/src/components/RightBar/EnergyCost/index.jsx @@ -2,8 +2,25 @@ import cls from './index.module.less'; import Container from '../../Container'; import TechSplitline from '../TechSplitline'; import EnergyCostChart from './EnergyCostChart'; +import SocketContext from '../../../store/socket-data-provider'; +import { useContext } from 'react'; function EnergyCost(props) { + const { energyState = {} } = useContext(SocketContext); + console.log('energyState', energyState); + // let { + // restHeat = '0kWh', + // water = '0Km³', + // gasi = '0m³', + // gasii = '0m³', + // electricity = '0kWh', + // } = energyState; + let restHeat = energyState?.restHeat || '0kWh'; + let water = energyState?.water || '0Km³'; + let gasi = energyState?.gasi || '0m³'; + let gasii = energyState?.gasii || '0m³'; + let electricity = energyState?.electricity || '0kWh'; + return (
@@ -12,13 +29,13 @@ function EnergyCost(props) { className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`} > 余 热 发 电 - 922kWh + {restHeat}
-
水 耗 量 : 32Km³
-
天 然 气 I : 83m³
-
电 耗 量 : 52kWh
-
天 然 气 II: 32m³
+
水 耗 量 : {water}
+
天 然 气 I : {gasi}
+
电 耗 量 : {electricity}
+
天 然 气 II: {gasii}
diff --git a/src/components/yx-dark/Header.jsx b/src/components/yx-dark/Header.jsx index 9075e01..510f180 100644 --- a/src/components/yx-dark/Header.jsx +++ b/src/components/yx-dark/Header.jsx @@ -10,15 +10,15 @@ export default (props) => { }, 1000); return ( -
+
- +

宜兴新能源生产线大数据指挥中心

- + 设计单位：中建材智能自动化研究院 - + {moment(today).format('YYYY.M.D dddd HH:mm:ss')}
diff --git a/src/store/socket-data-provider.js b/src/store/socket-data-provider.js index ae37149..9999537 100644 --- a/src/store/socket-data-provider.js +++ b/src/store/socket-data-provider.js @@ -5,6 +5,7 @@ const SocketContext = React.createContext(); export const SocketContextProvider = (props) => { const [kilnInfo, setkilnInfo] = useState(null); const [runState, setRunState] = useState(null); + const [energyState, setEnergyState] = useState(null); const [hisState, setHisState] = useState(null); useEffect(() => { @@ -26,10 +27,14 @@ export const SocketContextProvider = (props) => { case 'kiln-info': console.log('设置窑炉信息'); setkilnInfo(incommingData.data); - case 'RunData': - console.log('run data arrived, set 运行时数据'); + case 'run-state': + console.log('设置运行时数据'); setRunState(incommingData.data); break; + case 'energy-cost': + console.log('设置能耗数据'); + setEnergyState(incommingData.data); + break; case 'HisData': console.log('his data arrived, set 历史数据'); setHisState(incommingData.data); @@ -40,7 +45,9 @@ export const SocketContextProvider = (props) => { }, []); return ( - + {props.children} ); diff --git a/websocket/demo.json b/websocket/demo.json index 996d698..9b69ca3 100644 --- a/websocket/demo.json +++ b/websocket/demo.json @@ -9,6 +9,18 @@ "topTemperature": "...℃", "meltTemperature": "...℃" }, + "energyCost": { + "restHeat": "***kWh", + "water": "+++Km³", + "electricity": "+++kWh", + "gasi": "...m³", + "gasii": "...m³" + }, + "runState": { + "lastFireChangeTime": "3分28秒", + "fireChangeTime": "04:00", + "fireDirection": "东火" + }, "fan": [ ["8#压延冷却风机", "4373Hz", "正常"], ["7#压延冷却风机", "4772Hz", "正常"], diff --git a/websocket/server.ts b/websocket/server.ts index 23a0f49..21c40f0 100644 --- a/websocket/server.ts +++ b/websocket/server.ts @@ -3,7 +3,7 @@ import demoData from './demo.json'; import utils from './utils'; const wss = new WebSocketServer({ port: 9800 }); -const frequency = 3; // seconds +const frequency = 10; // seconds wss.on('connection', function (ws, req) { // console.log("ws", ws); console.log( @@ -26,10 +26,12 @@ wss.on('connection', function (ws, req) { const timer = setInterval(() => { sendMsg(ws, 'kiln-info'); // 窑炉信息 - sendMsg(ws, 'fan'); - sendMsg(ws, 'gas'); - sendMsg(ws, 'kiln-top'); - sendMsg(ws, 'kiln-bottom'); + sendMsg(ws, 'run-state'); // 运行状态 + sendMsg(ws, 'energy-cost'); // 运行状态 + // sendMsg(ws, 'fan'); + // sendMsg(ws, 'gas'); + // sendMsg(ws, 'kiln-top'); + // sendMsg(ws, 'kiln-bottom'); }, frequency * 1000); ws.on('close', function () { @@ -38,7 +40,14 @@ wss.on('connection', function (ws, req) { }); }); -type MsgType = 'kiln-info' | 'fan' | 'gas' | 'kiln-top' | 'kiln-bottom'; +type MsgType = + | 'kiln-info' + | 'run-state' + | 'energy-cost' + | 'fan' + | 'gas' + | 'kiln-top' + | 'kiln-bottom'; function sendMsg(ws: WebSocket, type: MsgType) { let data: { @@ -52,6 +61,16 @@ function sendMsg(ws: WebSocket, type: MsgType) { ); } break; + case 'energy-cost': + for (const key in demoData.energyCost) { + data[key] = utils.getRandom( + demoData.energyCost[key as keyof typeof demoData.energyCost], + ); + } + break; + case 'run-state': + data = demoData.runState; + break; case 'fan': // data = demoData.fan; break;