@@ -2,8 +2,25 @@ import cls from './index.module.less'; | |||||
import Container from '../../Container'; | import Container from '../../Container'; | ||||
import TechSplitline from '../TechSplitline'; | import TechSplitline from '../TechSplitline'; | ||||
import EnergyCostChart from './EnergyCostChart'; | import EnergyCostChart from './EnergyCostChart'; | ||||
import SocketContext from '../../../store/socket-data-provider'; | |||||
import { useContext } from 'react'; | |||||
function EnergyCost(props) { | 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 ( | return ( | ||||
<Container title="能耗" icon="charger" className={cls.energyCost}> | <Container title="能耗" icon="charger" className={cls.energyCost}> | ||||
<div className={`flex flex-col`}> | <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`} | className={`${cls.info__item} ${cls.hAuto} flex flex-col justify-center items-center self-stretch`} | ||||
> | > | ||||
<span>余 热 发 电</span> | <span>余 热 发 电</span> | ||||
<span>922kWh</span> | |||||
<span>{restHeat}</span> | |||||
</div> | </div> | ||||
<div className={cls.info__item_groups}> | <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> | ||||
</div> | </div> | ||||
@@ -10,15 +10,15 @@ export default (props) => { | |||||
}, 1000); | }, 1000); | ||||
return ( | return ( | ||||
<header class="header"> | |||||
<header className="header"> | |||||
<div> | <div> | ||||
<span class="header--logo"></span> | |||||
<span className="header--logo"></span> | |||||
<h1>宜兴新能源生产线大数据指挥中心</h1> | <h1>宜兴新能源生产线大数据指挥中心</h1> | ||||
</div> | </div> | ||||
<span class="header--wing absolute company"> | |||||
<span className="header--wing absolute company"> | |||||
设计单位:中建材智能自动化研究院 | 设计单位:中建材智能自动化研究院 | ||||
</span> | </span> | ||||
<span class="header--wing absolute datetime"> | |||||
<span className="header--wing absolute datetime"> | |||||
{moment(today).format('YYYY.M.D dddd HH:mm:ss')} | {moment(today).format('YYYY.M.D dddd HH:mm:ss')} | ||||
</span> | </span> | ||||
</header> | </header> | ||||
@@ -5,6 +5,7 @@ const SocketContext = React.createContext(); | |||||
export const SocketContextProvider = (props) => { | export const SocketContextProvider = (props) => { | ||||
const [kilnInfo, setkilnInfo] = useState(null); | const [kilnInfo, setkilnInfo] = useState(null); | ||||
const [runState, setRunState] = useState(null); | const [runState, setRunState] = useState(null); | ||||
const [energyState, setEnergyState] = useState(null); | |||||
const [hisState, setHisState] = useState(null); | const [hisState, setHisState] = useState(null); | ||||
useEffect(() => { | useEffect(() => { | ||||
@@ -26,10 +27,14 @@ export const SocketContextProvider = (props) => { | |||||
case 'kiln-info': | case 'kiln-info': | ||||
console.log('设置窑炉信息'); | console.log('设置窑炉信息'); | ||||
setkilnInfo(incommingData.data); | setkilnInfo(incommingData.data); | ||||
case 'RunData': | |||||
console.log('run data arrived, set 运行时数据'); | |||||
case 'run-state': | |||||
console.log('设置运行时数据'); | |||||
setRunState(incommingData.data); | setRunState(incommingData.data); | ||||
break; | break; | ||||
case 'energy-cost': | |||||
console.log('设置能耗数据'); | |||||
setEnergyState(incommingData.data); | |||||
break; | |||||
case 'HisData': | case 'HisData': | ||||
console.log('his data arrived, set 历史数据'); | console.log('his data arrived, set 历史数据'); | ||||
setHisState(incommingData.data); | setHisState(incommingData.data); | ||||
@@ -40,7 +45,9 @@ export const SocketContextProvider = (props) => { | |||||
}, []); | }, []); | ||||
return ( | return ( | ||||
<SocketContext.Provider value={{ kilnInfo, runState, hisState }}> | |||||
<SocketContext.Provider | |||||
value={{ kilnInfo, energyState, runState, hisState }} | |||||
> | |||||
{props.children} | {props.children} | ||||
</SocketContext.Provider> | </SocketContext.Provider> | ||||
); | ); | ||||
@@ -9,6 +9,18 @@ | |||||
"topTemperature": "...℃", | "topTemperature": "...℃", | ||||
"meltTemperature": "...℃" | "meltTemperature": "...℃" | ||||
}, | }, | ||||
"energyCost": { | |||||
"restHeat": "***kWh", | |||||
"water": "+++Km³", | |||||
"electricity": "+++kWh", | |||||
"gasi": "...m³", | |||||
"gasii": "...m³" | |||||
}, | |||||
"runState": { | |||||
"lastFireChangeTime": "3分28秒", | |||||
"fireChangeTime": "04:00", | |||||
"fireDirection": "东火" | |||||
}, | |||||
"fan": [ | "fan": [ | ||||
["8#压延冷却风机", "4373Hz", "正常"], | ["8#压延冷却风机", "4373Hz", "正常"], | ||||
["7#压延冷却风机", "4772Hz", "正常"], | ["7#压延冷却风机", "4772Hz", "正常"], | ||||
@@ -3,7 +3,7 @@ import demoData from './demo.json'; | |||||
import utils from './utils'; | import utils from './utils'; | ||||
const wss = new WebSocketServer({ port: 9800 }); | const wss = new WebSocketServer({ port: 9800 }); | ||||
const frequency = 3; // seconds | |||||
const frequency = 10; // seconds | |||||
wss.on('connection', function (ws, req) { | wss.on('connection', function (ws, req) { | ||||
// console.log("ws", ws); | // console.log("ws", ws); | ||||
console.log( | console.log( | ||||
@@ -26,10 +26,12 @@ wss.on('connection', function (ws, req) { | |||||
const timer = setInterval(() => { | const timer = setInterval(() => { | ||||
sendMsg(ws, 'kiln-info'); // 窑炉信息 | 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); | }, frequency * 1000); | ||||
ws.on('close', function () { | 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) { | function sendMsg(ws: WebSocket, type: MsgType) { | ||||
let data: { | let data: { | ||||
@@ -52,6 +61,16 @@ function sendMsg(ws: WebSocket, type: MsgType) { | |||||
); | ); | ||||
} | } | ||||
break; | 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': | case 'fan': | ||||
// data = demoData.fan; | // data = demoData.fan; | ||||
break; | break; | ||||