You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
252 lines
9.6 KiB
252 lines
9.6 KiB
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 General = ({ dispatch, actions, stations }) => {
|
|
|
|
const { bigScreen } = actions
|
|
const [electro, setElectro] = useState({ now: 0, before: 0 }) //用电概况
|
|
const [interval, setInterval] = useState('本日') //用电概况区间
|
|
|
|
|
|
useEffect(async () => {
|
|
let now = 0
|
|
let before = 0
|
|
let time = interval == '本日' ?
|
|
"day" : interval == '本月' ?
|
|
"month" : interval == '本年' ?
|
|
"year" : ""
|
|
|
|
let pastTime = {
|
|
begin: interval == '本日' ?
|
|
moment().day(moment().day() - 1).startOf(time).format('x') : interval == '本月' ?
|
|
moment().month(moment().month() - 1).startOf(time).format('x') : interval == '本年' ?
|
|
moment().year(moment().year() - 1).startOf(time).format('x') : "",
|
|
end: interval == '本日' ?
|
|
moment().day(moment().day() - 1).endOf(time).format('x') : interval == '本月' ?
|
|
moment().month(moment().month() - 1).endOf(time).format('x') : interval == '本年' ?
|
|
moment().year(moment().year() - 1).endOf(time).format('x') : "",
|
|
}
|
|
if (stations?.pump) {
|
|
//现在
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: stations?.pump.join(),
|
|
begin: moment().startOf(time).format('x'),
|
|
end: moment().endOf(time).format('x'),
|
|
aggtype: interval == '本日' ? "h" : "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
now += (f?.values?.eMotor_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
if (interval != '本日') {
|
|
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) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
now += (f?.values?.eMotor_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
|
|
//以前
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: stations?.pump?.join(),
|
|
...pastTime,
|
|
aggtype: interval == '本日' ? "h" : "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
before += (f?.values?.eMotor_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
if (stations?.cabine) {
|
|
// 现在
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: stations?.cabine?.join(),
|
|
begin: moment().startOf(time).format('x'),
|
|
end: moment().endOf(time).format('x'),
|
|
aggtype: interval == '本日' ? "h" : "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
now += (f?.values?.eQF_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
if (interval != '本日') {
|
|
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) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
now += (f?.values?.eQF_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
// 以前
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: stations?.cabine?.join(),
|
|
...pastTime,
|
|
aggtype: interval == '本日' ? "h" : "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations?.map(c => {
|
|
c.data?.map(f => {
|
|
if (!f.changData) {
|
|
before += (f?.values?.eQF_EQ || 0)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
setElectro({ now: now, before: before })
|
|
|
|
}, [stations, interval])
|
|
|
|
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", left: 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 style={{ display: "flex", justifyContent: 'space-between', width: 200 }}>
|
|
{['本日', "本月", '本年'].map(v => <div style={{
|
|
width: 60, height: 20, color: interval == v ? "#24DCF7" : '#00A9FF', border: '1px solid',
|
|
background: interval == v ? "#5bc1ff33" : "#236cfe4d", textAlign: "center", cursor: 'pointer'
|
|
}} onClick={() => {
|
|
setInterval(v)
|
|
}}>{v}</div>)}
|
|
</div>
|
|
</div>
|
|
<div style={{
|
|
width: '100%', height: 'calc(100% - 36px)', backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)",
|
|
display: "flex", justifyContent: 'center', alignItems: "center"
|
|
}}>
|
|
<div>
|
|
<div style={{ width: 150, height: 56, display: "flex" }}>
|
|
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" />
|
|
<div style={{ marginLeft: 10 }}>
|
|
<div>{interval == '本日' ?
|
|
"当日用电" : interval == '本月' ?
|
|
"当月用电" : interval == '本年' ?
|
|
"当年用电" : ""}</div>
|
|
<div>{electro?.now.toFixed(2)} kwh</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ width: 150, height: 56, display: "flex" }}>
|
|
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" />
|
|
<div style={{ marginLeft: 10 }}>
|
|
<div>{interval == '本日' ?
|
|
"昨日用电" : interval == '本月' ?
|
|
"上月用电" : interval == '本年' ?
|
|
"上年用电" : ""}</div>
|
|
<div>{electro?.before?.toFixed(2)} kwh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<img style={{ width: 10, height: 100 }} src="/assets/images/realTime/left.png" />
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/realTime/specific.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
|
|
width: 170, height: 50, height: 100, display: "flex", flexDirection: "column", alignItems: "center"
|
|
}}>
|
|
<div style={{ color: "#D4EDFD", fontSize: 18, fontFamily: "PingFangSC-Regular" }}>用电同比</div>
|
|
<div style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: "#FFF" }}>
|
|
{electro?.now && electro?.before ? (((electro?.now - electro?.before) / electro?.before) * 100).toFixed(2) : "--"} %
|
|
|
|
</div>
|
|
</div>
|
|
<img style={{ width: 10, height: 100 }} src="/assets/images/realTime/right.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global } = state;
|
|
return {
|
|
user: auth.user,
|
|
clientHeight: global.clientHeight,
|
|
actions: global.actions,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(General);
|