@@ -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 ( | |||
<Container title="能耗" icon="charger" className={cls.energyCost}> | |||
<div className={`flex flex-col`}> | |||
@@ -12,13 +29,13 @@ function EnergyCost(props) { | |||
className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`} | |||
> | |||
<span>余 热 发 电</span> | |||
<span>922kWh</span> | |||
<span>{restHeat}</span> | |||
</div> | |||
<div className={cls.info__item_groups}> | |||
<div className={cls.info__item}>水 耗 量 : 32Km³</div> | |||
<div className={cls.info__item}>天 然 气 I : 83m³</div> | |||
<div className={cls.info__item}>电 耗 量 : 52kWh</div> | |||
<div className={cls.info__item}>天 然 气 II: 32m³</div> | |||
<div className={cls.info__item}>水 耗 量 : {water}</div> | |||
<div className={cls.info__item}>天 然 气 I : {gasi}</div> | |||
<div className={cls.info__item}>电 耗 量 : {electricity}</div> | |||
<div className={cls.info__item}>天 然 气 II: {gasii}</div> | |||
</div> | |||
</div> | |||
@@ -10,15 +10,15 @@ export default (props) => { | |||
}, 1000); | |||
return ( | |||
<header class="header"> | |||
<header className="header"> | |||
<div> | |||
<span class="header--logo"></span> | |||
<span className="header--logo"></span> | |||
<h1>宜兴新能源生产线大数据指挥中心</h1> | |||
</div> | |||
<span class="header--wing absolute company"> | |||
<span className="header--wing absolute company"> | |||
设计单位:中建材智能自动化研究院 | |||
</span> | |||
<span class="header--wing absolute datetime"> | |||
<span className="header--wing absolute datetime"> | |||
{moment(today).format('YYYY.M.D dddd HH:mm:ss')} | |||
</span> | |||
</header> | |||
@@ -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 ( | |||
<SocketContext.Provider value={{ kilnInfo, runState, hisState }}> | |||
<SocketContext.Provider | |||
value={{ kilnInfo, energyState, runState, hisState }} | |||
> | |||
{props.children} | |||
</SocketContext.Provider> | |||
); | |||
@@ -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", "正常"], | |||
@@ -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; | |||