@@ -36,7 +36,7 @@ function GasI(props) { | |||||
.map((_) => Array(7).fill(0)); | .map((_) => Array(7).fill(0)); | ||||
// debug | // debug | ||||
console.log('助燃风 chart series data', hisState?.wind, seriesData); | |||||
// console.log('助燃风 chart series data', hisState?.wind, seriesData); | |||||
options = { | options = { | ||||
color: colors, | color: colors, | ||||
grid: { top: 32, right: 12, bottom: 20, left: 48 }, | grid: { top: 32, right: 12, bottom: 20, left: 48 }, | ||||
@@ -60,7 +60,8 @@ function GasI(props) { | |||||
axisLine: { | axisLine: { | ||||
lineStyle: { | lineStyle: { | ||||
width: 1, | width: 1, | ||||
color: '#213259', | |||||
color: '#4561AE', | |||||
// color: '#213259', | |||||
}, | }, | ||||
}, | }, | ||||
}, | }, | ||||
@@ -79,12 +80,14 @@ function GasI(props) { | |||||
axisLine: { | axisLine: { | ||||
show: true, | show: true, | ||||
lineStyle: { | lineStyle: { | ||||
color: '#213259', | |||||
color: '#4561AE', | |||||
// color: '#213259', | |||||
}, | }, | ||||
}, | }, | ||||
splitLine: { | splitLine: { | ||||
lineStyle: { | lineStyle: { | ||||
color: '#213259a0', | |||||
color: '#4561AEa0', | |||||
// color: '#213259a0', | |||||
}, | }, | ||||
}, | }, | ||||
// interval: 10, | // interval: 10, | ||||
@@ -50,7 +50,8 @@ export default function getOptions(seriesData, name) { | |||||
axisLine: { | axisLine: { | ||||
lineStyle: { | lineStyle: { | ||||
width: 1, | width: 1, | ||||
color: '#213259', | |||||
// color: '#213259', | |||||
color: '#4561AE', | |||||
}, | }, | ||||
}, | }, | ||||
}, | }, | ||||
@@ -69,18 +70,22 @@ export default function getOptions(seriesData, name) { | |||||
}, | }, | ||||
axisLine: { | axisLine: { | ||||
show: true, | show: true, | ||||
// lineStyle: { | |||||
// color: '#213259', | |||||
// }, | |||||
lineStyle: { | lineStyle: { | ||||
color: '#213259', | |||||
color: '#4561AE', | |||||
}, | }, | ||||
}, | }, | ||||
splitLine: { | splitLine: { | ||||
lineStyle: { | lineStyle: { | ||||
color: '#213259a0', | |||||
// color: '#213259a0', | |||||
color: '#4561AEa0', | |||||
}, | }, | ||||
}, | }, | ||||
}, | }, | ||||
series: seriesData.map((arr, index) => ({ | series: seriesData.map((arr, index) => ({ | ||||
name: index ? index + 1 + '#' + name : '天然气总流量', | |||||
name: index !== 0 ? index + '#' + name : '天然气总流量', | |||||
data: arr, | data: arr, | ||||
type: 'line', | type: 'line', | ||||
areaStyle: { | areaStyle: { | ||||
@@ -18,7 +18,7 @@ function GasChart(props) { | |||||
: 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}> | ||||
@@ -1,18 +1,21 @@ | |||||
import React, { useState, useContext, useEffect } from 'react'; | |||||
import React, { useState, useContext, useEffect, useMemo } from 'react'; | |||||
import SocketContext from '../../../store/socket-data-provider'; | import SocketContext from '../../../store/socket-data-provider'; | ||||
import icon1 from '@/assets/CenterChart2icon1.svg'; | import icon1 from '@/assets/CenterChart2icon1.svg'; | ||||
import icon2 from '@/assets/CenterChart2icon2.svg'; | import icon2 from '@/assets/CenterChart2icon2.svg'; | ||||
import icon3 from '@/assets/CenterChart2icon3.svg'; | import icon3 from '@/assets/CenterChart2icon3.svg'; | ||||
import icon4 from '@/assets/CenterChart2icon4.svg'; | |||||
// import icon4 from '@/assets/CenterChart2icon4.svg'; | |||||
import cls from './leftbox.module.less'; | import cls from './leftbox.module.less'; | ||||
const Chart2 = () => { | const Chart2 = () => { | ||||
const ctx = useContext(SocketContext); | |||||
let [time, setTime] = useState([0, 0]); | |||||
const { runState } = useContext(SocketContext); | |||||
const [time, setTime] = useState([0, 0]); | |||||
// console.clear(); | |||||
// console.log('>>>>>>>> runstate 更新 (', runState, ')'); | |||||
useEffect(() => { | useEffect(() => { | ||||
const restTime = ctx.runState?.lastFireChangeTime; | |||||
const restTime = runState?.lastFireChangeTime; | |||||
if (restTime == null) return; | if (restTime == null) return; | ||||
console.log('restTime is:', restTime); | console.log('restTime is:', restTime); | ||||
let timer = null; | let timer = null; | ||||
@@ -71,23 +74,38 @@ const Chart2 = () => { | |||||
return () => { | return () => { | ||||
clearInterval(timer); | clearInterval(timer); | ||||
}; | }; | ||||
}, [ctx.runState?.lastFireChangeTime]); | |||||
}, [runState?.lastFireChangeTime, runState?.updateKey]); | |||||
const lastFireChangeTime = { | |||||
icon: icon3, | |||||
label: '剩余时间', | |||||
value: `${time[0]}分${time[1]}秒`, | |||||
}; | |||||
const fireChangeTime = useMemo(() => { | |||||
return runState?.fireChangeTime || '00:00'; | |||||
}, [runState?.fireChangeTime]); | |||||
const fireDirection = useMemo(() => { | |||||
// let lastValue = null; | |||||
// if (runState?.fireDirection) { | |||||
// lastValue = runState?.fireDirection; | |||||
// } | |||||
// console.log('换火方向: <', runState?.fireDirection, '>') | |||||
return runState?.fireDirection || '南火'; | |||||
}, [runState?.fireDirection]); | |||||
const data = [ | const data = [ | ||||
{ | { | ||||
icon: icon1, | icon: icon1, | ||||
label: '换火时间', | label: '换火时间', | ||||
value: ctx.runState?.fireChangeTime || '00:00', | |||||
}, | |||||
{ | |||||
icon: icon3, | |||||
label: '剩余时间', | |||||
value: `${time[0]}分${time[1]}秒`, | |||||
value: fireChangeTime, | |||||
}, | }, | ||||
lastFireChangeTime, | |||||
{ | { | ||||
icon: icon2, | icon: icon2, | ||||
label: '当前火向', | label: '当前火向', | ||||
value: ctx.runState?.fireDirection || '南火', | |||||
value: fireDirection, | |||||
}, | }, | ||||
]; | ]; | ||||
@@ -18,7 +18,7 @@ export default function Kiln() { | |||||
label: '压缩气压力', | label: '压缩气压力', | ||||
value: ctx.kilnInfo?.gasPressure || '0Pa', | value: ctx.kilnInfo?.gasPressure || '0Pa', | ||||
}, | }, | ||||
{ label: '融化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' }, | |||||
{ label: '熔化加权温度', value: ctx.kilnInfo?.meltTemperature || '0℃' }, | |||||
]; | ]; | ||||
return ( | return ( | ||||
@@ -112,7 +112,7 @@ const GoodRateChart = (props) => { | |||||
function handleSwitchChange(val) { | function handleSwitchChange(val) { | ||||
// val: boolean | // val: boolean | ||||
console.log('switch change', val); | |||||
// console.log('switch change', val); | |||||
} | } | ||||
return ( | return ( | ||||
@@ -85,7 +85,7 @@ const EnergyCostChart = (props) => { | |||||
function handleSwitchChange(val) { | function handleSwitchChange(val) { | ||||
// val: boolean | // val: boolean | ||||
console.log('switch change', val); | |||||
// console.log('switch change', val); | |||||
} | } | ||||
return ( | return ( | ||||
@@ -7,7 +7,7 @@ import { useContext } from 'react'; | |||||
function EnergyCost(props) { | function EnergyCost(props) { | ||||
const { energyState = {} } = useContext(SocketContext); | const { energyState = {} } = useContext(SocketContext); | ||||
console.log('energyState', energyState); | |||||
// console.log('energyState', energyState); | |||||
// let { | // let { | ||||
// restHeat = '0kWh', | // restHeat = '0kWh', | ||||
// water = '0Km³', | // water = '0Km³', | ||||
@@ -33,9 +33,9 @@ function EnergyCost(props) { | |||||
</div> | </div> | ||||
<div className={cls.info__item_groups}> | <div className={cls.info__item_groups}> | ||||
<div className={cls.info__item}>水 耗 量 : {water}</div> | <div className={cls.info__item}>水 耗 量 : {water}</div> | ||||
<div className={cls.info__item}>天 然 气 I : {gasi}</div> | |||||
<div className={cls.info__item}>天 然 气 : {gasi}</div> | |||||
<div className={cls.info__item}>电 耗 量 : {electricity}</div> | <div className={cls.info__item}>电 耗 量 : {electricity}</div> | ||||
<div className={cls.info__item}>天 然 气 II: {gasii}</div> | |||||
{/* <div className={cls.info__item}>天 然 气 II: {gasii}</div> */} | |||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -20,7 +20,6 @@ export const SocketContextProvider = (props) => { | |||||
}; | }; | ||||
socket.onmessage = (e) => { | socket.onmessage = (e) => { | ||||
if ('data' in e) { | if ('data' in e) { | ||||
console.log('[ws] data ===> ', e.data); | |||||
if (e.data == '连接成功') return; | if (e.data == '连接成功') return; | ||||
let incommingData = JSON.parse(e.data); | let incommingData = JSON.parse(e.data); | ||||
@@ -28,9 +27,10 @@ export const SocketContextProvider = (props) => { | |||||
case 'kiln-info': | case 'kiln-info': | ||||
console.log('设置窑炉信息'); | console.log('设置窑炉信息'); | ||||
setkilnInfo(incommingData.data); | setkilnInfo(incommingData.data); | ||||
break; | |||||
case 'run-state': | case 'run-state': | ||||
console.log('设置运行时数据'); | console.log('设置运行时数据'); | ||||
setRunState(incommingData.data); | |||||
setRunState({ ...incommingData.data, updateKey: Math.random() }); | |||||
break; | break; | ||||
case 'energy-cost': | case 'energy-cost': | ||||
console.log('设置能耗数据'); | console.log('设置能耗数据'); | ||||
@@ -41,7 +41,7 @@ export const SocketContextProvider = (props) => { | |||||
setRealtimeState(incommingData.data); | setRealtimeState(incommingData.data); | ||||
break; | break; | ||||
case 'his-trend': | case 'his-trend': | ||||
console.log('his data arrived, set 历史数据'); | |||||
console.log('设置历史数据'); | |||||
setHisState(incommingData.data); | setHisState(incommingData.data); | ||||
break; | break; | ||||
} | } | ||||
@@ -85,6 +85,8 @@ function sendMsg(ws: WebSocket, type: MsgType) { | |||||
break; | break; | ||||
case 'run-state': | case 'run-state': | ||||
data = template.runState; | data = template.runState; | ||||
data.fireDirection = | |||||
Math.floor(Math.random() * 10) % 2 === 0 ? '南火' : '北火'; | |||||
break; | break; | ||||
case 'realtime': | case 'realtime': | ||||
/** 天然气 实时流量 */ | /** 天然气 实时流量 */ | ||||