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