|
|
@@ -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, |
|
|
|
}, |
|
|
|
]; |
|
|
|
|
|
|
|