30 changed files with 1381 additions and 394 deletions
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 698 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 75 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 67 KiB |
@ -0,0 +1,64 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Select } from 'antd'; |
|||
import ReactECharts from 'echarts-for-react'; |
|||
import moment from 'moment' |
|||
|
|||
const { Option } = Select; |
|||
|
|||
const AccumulateTime = ({ user, softStartData }) => { |
|||
|
|||
const [page, setPage] = useState(0) |
|||
|
|||
|
|||
|
|||
return <div style={{ |
|||
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|||
backgroundSize: '100% 36px', |
|||
backgroundPosition: '0 0', |
|||
backgroundRepeat: 'no-repeat', zIndex: 2, |
|||
width: '26%', height: '30%', minWidth: 360, position: "absolute", right: 10, top: "30%" |
|||
}}> |
|||
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|||
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>累计运行时间</div> |
|||
</div> |
|||
<div style={{ width: '100%', height: 'calc(100% - 36px)', backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)" }}> |
|||
<div style={{ padding: "16px 20px" }}>单位：h</div> |
|||
<div style={{ display: "flex", alignItems: "center", justifyContent: 'center', width: '100%', height: "calc(100% - 54px)" }}> |
|||
{softStartData?.length > 0 && <> |
|||
<img style={{ width: 24, height: 24 }} src="/assets/images/realTime/left-p.png" |
|||
onClick={() => { |
|||
if (page > 0) setPage(page - 1) |
|||
}} /> |
|||
{ |
|||
softStartData?.slice(page * 2, (page + 1) * 2)?.map((v, index) => { |
|||
return <div style={{ |
|||
backgroundImage: `url(/assets/images/realTime/${index == 0 ? "soft-one" : "soft-two"}.png)`, |
|||
backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat', |
|||
width: 148, height: 130, display: 'flex', flexDirection: "column", alignItems: 'center' |
|||
}}> |
|||
<div style={{ fontFamily: 'YouSheBiaoTiHei', fontSize: 20, }}>{v.name}</div> |
|||
<div>{v.data[0]?.dPump_T_T}</div> |
|||
</div> |
|||
}) |
|||
} |
|||
<img style={{ width: 24, height: 24 }} src="/assets/images/realTime/right-p.png" |
|||
onClick={() => { |
|||
if (page + 1 < Math.ceil(softStartData?.length / 2)) setPage(page + 1) |
|||
}} /> |
|||
</>} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(AccumulateTime); |
|||
@ -0,0 +1,448 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Select } from 'antd'; |
|||
import ReactECharts from 'echarts-for-react'; |
|||
import moment from 'moment' |
|||
|
|||
const { Option } = Select; |
|||
|
|||
const Below = ({ dispatch, actions, stations,level }) => { |
|||
const { bigScreen } = actions |
|||
const [page, setPage] = useState(0) |
|||
const [threePower, setThreePower] = useState([]) |
|||
const [electricity, setElectricity] = useState([]) |
|||
|
|||
|
|||
useEffect(async () => { |
|||
let now = 0 |
|||
let before = 0 |
|||
let timeData = [] |
|||
if (stations?.pump) { |
|||
await dispatch(bigScreen.axyData({ |
|||
type: 'get', url: `stations/theme/data`, params: { |
|||
query: { |
|||
stations: stations?.pump?.join(), |
|||
startTime: moment().add(-6, 'hours').format('YYYY-MM-DD HH:mm:ss'), |
|||
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'), |
|||
limit: 1440 |
|||
} |
|||
} |
|||
})).then(d => { |
|||
if (d.success) { |
|||
let threedata = [] |
|||
d.payload.data?.stations?.map((s, index) => { |
|||
if (index == 0) { |
|||
s.data?.map(a => { |
|||
threedata?.push({ A: a.eMotor_A_A, B: a.eMotor_B_A, C: a.eMotor_C_A, time: a.time }) |
|||
}) |
|||
} else { |
|||
threedata.forEach((f, i) => { |
|||
s.data?.map((a, ii) => { |
|||
if (i == ii) { |
|||
f.A = f.A + a.eMotor_A_A |
|||
f.B = f.B + a.eMotor_B_A |
|||
f.C = f.C + a.eMotor_C_A |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
}) |
|||
setThreePower(threedata); |
|||
} |
|||
}) |
|||
|
|||
|
|||
|
|||
//现在
|
|||
await dispatch(bigScreen.axyData({ |
|||
type: 'get', url: `stations/data/theme`, params: { |
|||
query: { |
|||
stations: stations?.pump.join(), |
|||
begin: moment().startOf('year').format('x'), |
|||
end: moment().endOf('year').format('x'), |
|||
aggtype: "d", |
|||
method: 'diff' |
|||
} |
|||
} |
|||
})).then(d => { |
|||
if (d.success) { |
|||
|
|||
d.payload.data[0]?.stations?.map(c => { |
|||
c.data?.map(f => { |
|||
if (!f.changData) { |
|||
if (timeData.find(p => p.time == moment(f.time).format('YYYY-MM'))) { |
|||
timeData.forEach(x => { |
|||
if (x.time == moment(f.time).format('YYYY-MM')) { |
|||
x.electro = x.electro + f.values?.eMotor_EQ |
|||
} |
|||
}) |
|||
} else { |
|||
timeData.push({ time: moment(f.time).format('YYYY-MM'), electro: f.values?.eMotor_EQ }) |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
|
|||
await dispatch(bigScreen.axyData({ |
|||
type: 'get', url: `stations/data/theme`, params: { |
|||
query: { |
|||
stations: stations?.pump.join(), |
|||
begin: moment().startOf("day").format('x'), |
|||
end: moment().endOf("day").format('x'), |
|||
aggtype: "h", |
|||
method: 'diff' |
|||
} |
|||
} |
|||
})).then(d => { |
|||
if (d.success) { |
|||
console.log(timeData); |
|||
timeData.forEach((x, i) => { |
|||
if (i == (timeData?.length - 1)) { |
|||
d.payload.data[0]?.stations?.map(c => { |
|||
c.data?.map(f => { |
|||
if (!f.changData) { |
|||
x.electro = x.electro + f.values?.eMotor_EQ |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
|
|||
if (stations?.cabine) { |
|||
//现在
|
|||
await dispatch(bigScreen.axyData({ |
|||
type: 'get', url: `stations/data/theme`, params: { |
|||
query: { |
|||
stations: stations?.cabine.join(), |
|||
begin: moment().startOf('year').format('x'), |
|||
end: moment().endOf('year').format('x'), |
|||
aggtype: "d", |
|||
method: 'diff' |
|||
} |
|||
} |
|||
})).then(d => { |
|||
if (d.success) { |
|||
|
|||
d.payload.data[0]?.stations?.map(c => { |
|||
c.data?.map(f => { |
|||
if (!f.changData) { |
|||
if (timeData.find(p => p.time == moment(f.time).format('YYYY-MM'))) { |
|||
timeData.forEach(x => { |
|||
if (x.time == moment(f.time).format('YYYY-MM')) { |
|||
x.electro = x.electro + f.values?.eQF_EQ |
|||
} |
|||
}) |
|||
} else { |
|||
timeData.push({ time: moment(f.time).format('YYYY-MM'), electro: f.values?.eQF_EQ }) |
|||
} |
|||
} |
|||
}) |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
|
|||
await dispatch(bigScreen.axyData({ |
|||
type: 'get', url: `stations/data/theme`, params: { |
|||
query: { |
|||
stations: stations?.cabine.join(), |
|||
begin: moment().startOf("day").format('x'), |
|||
end: moment().endOf("day").format('x'), |
|||
aggtype: "h", |
|||
method: 'diff' |
|||
} |
|||
} |
|||
})).then(d => { |
|||
if (d.success) { |
|||
console.log(timeData); |
|||
timeData.forEach((x, i) => { |
|||
if (i == (timeData?.length - 1)) { |
|||
d.payload.data[0]?.stations?.map(c => { |
|||
c.data?.map(f => { |
|||
if (!f.changData) { |
|||
x.electro = x.electro + f.values?.eQF_EQ |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
}) |
|||
|
|||
} |
|||
}) |
|||
} |
|||
setElectricity(timeData); |
|||
|
|||
}, [stations]) |
|||
|
|||
return <div style={{ |
|||
width: 'calc(100% - 20px)', height: '36%', display: 'flex', justifyContent: 'space-between', |
|||
position: "absolute", left: 10, bottom: 0 |
|||
}}> |
|||
<div style={{ |
|||
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|||
backgroundSize: '100% 36px', |
|||
backgroundPosition: '0 0', |
|||
backgroundRepeat: 'no-repeat', |
|||
width: '33%', height: '100%', |
|||
}}> |
|||
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|||
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>三相电流</div> |
|||
</div> |
|||
<ReactECharts |
|||
option={{ |
|||
title: { |
|||
// text: v.name,
|
|||
}, |
|||
grid: { |
|||
// width: 300,
|
|||
// height: 200
|
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'slider', |
|||
// startValue: depthWater?.map(v=>v.time)
|
|||
}, |
|||
{ |
|||
type: 'inside', |
|||
}, |
|||
], |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
data: ['A相电流', 'B相电流', 'C相电流'], |
|||
right: '10%', |
|||
textStyle: { |
|||
color: '#FFF', |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
// name: "时间",
|
|||
boundaryGap: false, |
|||
data: threePower?.map(v => moment(v.time).format('MM-DD HH:mm')) |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: "单位：A", |
|||
areaStyle: { |
|||
color: '#FFF', |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'line', |
|||
name: 'A相电流', |
|||
smooth: true, |
|||
areaStyle: { |
|||
color: '#0e9cff26', |
|||
}, |
|||
data: threePower?.map(v => v.A?.toFixed(2)) |
|||
}, { |
|||
type: 'line', |
|||
name: 'B相电流', |
|||
smooth: true, |
|||
areaStyle: { |
|||
color: '#0e9cff26', |
|||
}, |
|||
data: threePower?.map(v => v.B?.toFixed(2)) |
|||
}, { |
|||
type: 'line', |
|||
name: 'C相电流', |
|||
smooth: true, |
|||
areaStyle: { |
|||
color: '#0e9cff26', |
|||
}, |
|||
data: threePower?.map(v => v.C?.toFixed(2)) |
|||
}, |
|||
] |
|||
}} |
|||
notMerge={true} |
|||
lazyUpdate={true} |
|||
style={{ width: "100%", height: "100%" }} |
|||
theme={'ReactEChart'} |
|||
/> |
|||
|
|||
</div> |
|||
<div style={{ |
|||
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|||
backgroundSize: '100% 36px', |
|||
backgroundPosition: '0 0', |
|||
backgroundRepeat: 'no-repeat', |
|||
width: '33%', height: '100%', position: "relative" |
|||
}}> |
|||
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|||
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>实时液位</div> |
|||
</div> |
|||
<div style={{ width: '80%', position: "absolute", top: 50, left: "10%", display: "flex", justifyContent: 'space-between' }}> |
|||
<img style={{ width: 90, height: 80 }} src='/assets/images/realTime/level.png' /> |
|||
<div style={{ width: 56 }}><span style={{ color: '#4ca1ff', fontSize: 20, }}>{level?.toFixed(2) || 0}</span> m</div> |
|||
</div> |
|||
<ReactECharts |
|||
option={{ |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
startAngle: 180, |
|||
endAngle: 0, |
|||
center: ['50%', '75%'], |
|||
radius: '90%', |
|||
min: 0, |
|||
max: 30, |
|||
// splitNumber: 8,
|
|||
axisLine: { |
|||
lineStyle: { |
|||
width: 6, |
|||
color: [ |
|||
[1, '#58D9F9']] |
|||
} |
|||
}, |
|||
pointer: { |
|||
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', |
|||
length: '60%', |
|||
width: 4, |
|||
// offsetCenter: [0, '-60%'],
|
|||
itemStyle: { |
|||
color: 'auto' |
|||
} |
|||
}, |
|||
axisTick: { |
|||
length: 6, |
|||
lineStyle: { |
|||
color: 'auto', |
|||
width: 1 |
|||
} |
|||
}, |
|||
splitLine: { |
|||
length: 8, |
|||
lineStyle: { |
|||
color: 'auto', |
|||
width: 2 |
|||
} |
|||
}, |
|||
axisLabel: { |
|||
color: '#FFF', |
|||
fontSize: 10, |
|||
distance: 15, |
|||
rotate: 'tangential', |
|||
}, |
|||
title: { |
|||
offsetCenter: [0, '-10%'], |
|||
fontSize: 20, |
|||
color: '#FFF', |
|||
}, |
|||
detail: { |
|||
fontSize: 20, |
|||
offsetCenter: [0, '-35%'], |
|||
valueAnimation: true, |
|||
color: 'inherit' |
|||
}, |
|||
data: [ |
|||
{ |
|||
value: level?.toFixed(2) || 0, |
|||
name: '实时液位' |
|||
} |
|||
] |
|||
} |
|||
] |
|||
}} |
|||
notMerge={true} |
|||
lazyUpdate={true} |
|||
style={{ width: "100%", height: "100%" }} |
|||
theme={'ReactEChart'} |
|||
/> |
|||
</div> |
|||
<div style={{ |
|||
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|||
backgroundSize: '100% 36px', |
|||
backgroundPosition: '0 0', |
|||
backgroundRepeat: 'no-repeat', |
|||
width: '33%', height: '100%', |
|||
}}> |
|||
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|||
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>用电趋势</div> |
|||
</div> |
|||
<ReactECharts |
|||
option={{ |
|||
title: { |
|||
// text: v.name,
|
|||
}, |
|||
grid: { |
|||
// width: 300,
|
|||
// height: 200
|
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: 'inside' |
|||
}, |
|||
{ |
|||
type: 'slider' |
|||
} |
|||
], |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
// data: ['集水池液位',],
|
|||
right: '10%', |
|||
textStyle: { |
|||
color: '#FFF', |
|||
}, |
|||
}, |
|||
xAxis: { |
|||
// type: 'category',
|
|||
// name: "时间",
|
|||
boundaryGap: false, |
|||
data: electricity?.map(v => moment(v.time).month() + 1) || [] |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name: "单位：kwh", |
|||
areaStyle: { |
|||
color: '#FFF', |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: 'bar', |
|||
name: '总用电量', |
|||
smooth: true, |
|||
areaStyle: { |
|||
color: '#0e9cff26', |
|||
}, |
|||
data: electricity?.map(v => v.electro?.toFixed(2)) || [] |
|||
} |
|||
] |
|||
}} |
|||
notMerge={true} |
|||
lazyUpdate={true} |
|||
style={{ width: "100%", height: "100%" }} |
|||
theme={'ReactEChart'} |
|||
/> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
actions: global.actions, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Below); |
|||
@ -0,0 +1,64 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Select } from 'antd'; |
|||
import ReactECharts from 'echarts-for-react'; |
|||
import moment from 'moment' |
|||
|
|||
const { Option } = Select; |
|||
|
|||
const RunTime = ({ user, softStartData }) => { |
|||
|
|||
const [page, setPage] = useState(0) |
|||
|
|||
|
|||
|
|||
return <div style={{ |
|||
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)', |
|||
backgroundSize: '100% 36px', |
|||
backgroundPosition: '0 0', |
|||
backgroundRepeat: 'no-repeat', zIndex: 2, |
|||
width: '26%', height: '30%', minWidth: 360, position: "absolute", right: 10, top: 0 |
|||
}}> |
|||
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}> |
|||
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>单次运行时间</div> |
|||
</div> |
|||
<div style={{ width: '100%', height: 'calc(100% - 36px)', backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)" }}> |
|||
<div style={{ padding: "16px 20px" }}>单位：min</div> |
|||
<div style={{ display: "flex", alignItems: "center", justifyContent: 'center', width: '100%', height: "calc(100% - 54px)" }}> |
|||
{softStartData?.length > 0 && <> |
|||
<img style={{ width: 24, height: 24 }} src="/assets/images/realTime/left-p.png" |
|||
onClick={() => { |
|||
if (page > 0) setPage(page - 1) |
|||
}} /> |
|||
{ |
|||
softStartData?.slice(page * 2, (page + 1) * 2)?.map((v, index) => { |
|||
return <div style={{ |
|||
backgroundImage: `url(/assets/images/realTime/${index == 0 ? "soft-one" : "soft-two"}.png)`, |
|||
backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat', |
|||
width: 148, height: 130, display: 'flex', flexDirection: "column", alignItems: 'center' |
|||
}}> |
|||
<div style={{ fontFamily: 'YouSheBiaoTiHei', fontSize: 20, }}>{v.name}</div> |
|||
<div>{v.data[0]?.dPump_T_S}</div> |
|||
</div> |
|||
}) |
|||
} |
|||
<img style={{ width: 24, height: 24 }} src="/assets/images/realTime/right-p.png" |
|||
onClick={() => { |
|||
if (page + 1 < Math.ceil(softStartData?.length / 2)) setPage(page + 1) |
|||
}} /> |
|||
</>} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
clientHeight: global.clientHeight, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(RunTime); |
|||
Loading…
Reference in new issue