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.
1016 lines
50 KiB
1016 lines
50 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Spin, Card, Modal, Select, Carousel, Progress } from 'antd';
|
|
import moment from 'moment'
|
|
import ReactECharts from 'echarts-for-react';
|
|
import './index.less'
|
|
|
|
const Capacity = ({ actions, dispatch, siteList, }) => {
|
|
const { bigScreen } = actions
|
|
const [pageLeft, setPageLeft] = useState(0) //左边翻页
|
|
const [pageRight, setPageRight] = useState(0) //左边翻页
|
|
// const [siteList, setSiteList] = useState([]) //站点列表
|
|
const [pumpList, setPumpList] = useState([]) //水泵列表
|
|
const [strucId, setStrucId] = useState() //站点ID
|
|
const [pumpId, setPumpId] = useState([]) //水泵id
|
|
const [usePumpId, setUsePumpId] = useState([]) //水泵id
|
|
const [pumpData, setPumpData] = useState([]) //水泵数据
|
|
const [cabinetData, setCabinetData] = useState([]) //进线柜数据
|
|
const [centreData, setCentreData] = useState({}) //中间数据
|
|
const [depthWater, setDepthWater] = useState([]) //液位趋势
|
|
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
|
|
const [useTrend, setUseTrend] = useState([]) //用电趋势
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
setStrucId(siteList[0]?.value)
|
|
}, [siteList])
|
|
|
|
useEffect(async () => {
|
|
|
|
let pump = []
|
|
let cabinetSun = []
|
|
let sun = {}
|
|
let day1 = 0
|
|
let day30 = 0
|
|
let day365 = 0
|
|
let daySun = 0
|
|
if (strucId) {
|
|
await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${strucId}/factors` })).then(async r => {
|
|
if (r.success) {
|
|
//水泵信息
|
|
let waterId = r.payload.data?.find(v => v.name == '泵站水泵')?.id
|
|
if (waterId) {
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `structures/${strucId}/stations`,
|
|
params: { query: { factorId: waterId } }
|
|
})).then(async p => {
|
|
if (p.success) {
|
|
let dataId = []
|
|
let voltageId = []
|
|
p.payload.data?.map(v => {
|
|
v.groups?.map(s => {
|
|
s.stations?.map(f => {
|
|
dataId.push(f.id)
|
|
if (voltageId?.length < 3) {
|
|
voltageId.push(f.id)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
setPumpList(p.payload.data[0]?.groups[0]?.stations)
|
|
setPumpId(voltageId)
|
|
setUsePumpId(voltageId)
|
|
if (dataId.length) {
|
|
// 当前时间
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
pump = d.payload.data?.stations || []
|
|
d.payload.data?.stations?.map(f => {
|
|
daySun += f?.data[0]?.eMotor_EQ
|
|
})
|
|
}
|
|
})
|
|
// 今天
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.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(f => {
|
|
f.data?.map(h => {
|
|
if (!h.changData) {
|
|
day1 += h.values.eMotor_EQ
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
// 本月
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('month').format('x'),
|
|
end: moment().endOf('month').format('x'),
|
|
aggtype: "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data[0]?.stations.map(f => {
|
|
f.data?.map(h => {
|
|
if (!h.changData) {
|
|
day30 += h.values.eMotor_EQ
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
// 今年
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.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(f => {
|
|
f.data?.map(h => {
|
|
if (!h.changData) {
|
|
day365 += h.values.eMotor_EQ
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
//进线柜
|
|
let wireCabinetId = r.payload.data?.find(v => v.name == '泵站进线柜')?.id
|
|
if (wireCabinetId) {
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `structures/${strucId}/stations`,
|
|
params: { query: { factorId: wireCabinetId } }
|
|
})).then(async p => {
|
|
if (p.success) {
|
|
let dataId = []
|
|
p.payload.data?.map(v => {
|
|
v.groups?.map(s => {
|
|
s.stations?.map(f => {
|
|
dataId.push(f.id)
|
|
})
|
|
})
|
|
})
|
|
if (dataId.length) {
|
|
// // 当前时间
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
d.payload.data?.stations?.map(f => {
|
|
daySun += f?.data[0]?.eQF_EQ
|
|
cabinetSun.push({
|
|
today: 0,
|
|
sameMonth: 0,
|
|
thisYear: 0,
|
|
eQF_EQ: f?.data[0]?.eQF_EQ,
|
|
id: f.id,
|
|
name: f.name,
|
|
sQF_CLOSING: f?.data[0]?.sQF_CLOSING
|
|
})
|
|
})
|
|
}
|
|
})
|
|
// 今天
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('day').format('x'),
|
|
end: moment().endOf('day').format('x'),
|
|
aggtype: "h",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
cabinetSun.forEach(p => {
|
|
d.payload.data[0]?.stations.map(f => {
|
|
if (p.id == f.id) {
|
|
f.data?.map(h => {
|
|
if (!h.changData) {
|
|
p.today = p.today + h.values.eQF_EQ
|
|
p.sameMonth = p.sameMonth + h.values.eQF_EQ
|
|
p.thisYear = p.thisYear + h.values.eQF_EQ
|
|
day1 += h.values.eQF_EQ
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
// 本月
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('month').format('x'),
|
|
end: moment().endOf('month').format('x'),
|
|
aggtype: "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
cabinetSun.forEach(p => {
|
|
d.payload.data[0]?.stations.map(f => {
|
|
if (p.id == f.id) {
|
|
f.data?.map(h => {
|
|
if (!h.changData) {
|
|
p.sameMonth = p.sameMonth + h.values.eQF_EQ
|
|
day30 += h.values.eQF_EQ
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
// 今年
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/data/theme`, params: {
|
|
query: {
|
|
stations: dataId.join(),
|
|
begin: moment().startOf('year').format('x'),
|
|
end: moment().endOf('year').format('x'),
|
|
aggtype: "d",
|
|
method: 'diff'
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
// year = d.payload.data[0]?.stations
|
|
cabinetSun.forEach(p => {
|
|
d.payload.data[0]?.stations.map(f => {
|
|
if (p.id == f.id) {
|
|
f.data?.map(h => {
|
|
if (!h.changData) {
|
|
p.thisYear = p.thisYear + h.values.eQF_EQ
|
|
day365 += h.values.eQF_EQ
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
//泵站信息
|
|
let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
|
|
if (informationId) {
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `structures/${strucId}/stations`,
|
|
params: { query: { factorId: informationId } }
|
|
})).then(async p => {
|
|
if (p.success) {
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
|
|
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
sun.sHumidity = d.payload.data?.stations[0]?.data[0]?.sHumidity
|
|
sun.sTEMP = d.payload.data?.stations[0]?.data[0]?.sTEMP
|
|
sun.sGrille_level = d.payload.data?.stations[0]?.data[0]?.sGrille_level
|
|
}
|
|
})
|
|
|
|
// 液位趋势
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
|
|
startTime: moment().add(-6, 'hours').format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1440
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
setDepthWater(d.payload.data?.stations[0]?.data)
|
|
}
|
|
})
|
|
}
|
|
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
setPumpData(pump)
|
|
setCabinetData(cabinetSun)
|
|
|
|
//计算各个阶段的总点电量
|
|
|
|
sun.day1 = day1
|
|
sun.day30 = day30 + day1
|
|
sun.day365 = day365 + day1
|
|
sun.daySun = daySun
|
|
setPageLeft(0)
|
|
setPageRight(0)
|
|
setCentreData(sun)
|
|
}, [strucId])
|
|
|
|
useEffect(async () => {
|
|
if (pumpId?.length > 0) {
|
|
//电流趋势
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: pumpId?.join(),
|
|
startTime: moment().add(-6, 'hours').format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1440
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
setElectricityTrend(d.payload.data?.stations)
|
|
}
|
|
})
|
|
|
|
}
|
|
}, [pumpId])
|
|
|
|
useEffect(async () => {
|
|
if (usePumpId?.length > 0) {
|
|
//电流趋势
|
|
await dispatch(bigScreen.axyData({
|
|
type: 'get', url: `stations/theme/data`, params: {
|
|
query: {
|
|
stations: usePumpId?.join(),
|
|
startTime: moment().add(-6, 'hours').format('YYYY-MM-DD HH:mm:ss'),
|
|
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
|
limit: 1440
|
|
}
|
|
}
|
|
})).then(d => {
|
|
if (d.success) {
|
|
setUseTrend(d.payload.data?.stations)
|
|
}
|
|
})
|
|
|
|
}
|
|
}, [usePumpId])
|
|
|
|
|
|
|
|
|
|
return <div style={{ width: '100%', height: 'calc(100% - 160px)', position: "absolute", top: 160, right: 0 }}>
|
|
|
|
<div style={{ width: '100%', height: 'calc(60%)', display: 'flex', }}>
|
|
{/* 水泵 */}
|
|
<div style={{
|
|
width: '30%', height: '100%', display: 'flex', justifyContent: 'center',
|
|
}}>
|
|
<div style={{ width: '80%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
|
|
{pumpData.length > 0 && <>
|
|
<img style={{ width: 36, height: 36 }} src="/assets/images/monitor/left.png"
|
|
onClick={() => {
|
|
if (pageLeft > 0) setPageLeft(pageLeft - 1)
|
|
}} />
|
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
|
{
|
|
pumpData?.slice(pageLeft * 2, (pageLeft + 1) * 2)?.map((v, index) => {
|
|
return <div key={'waterPump' + index} style={{ width: 250, height: 200 }}>
|
|
<div style={{
|
|
width: '100%', height: 38,
|
|
backgroundImage: 'url(/assets/images/monitor/pump-head.png)',
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center'
|
|
}}>
|
|
<div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF', fontFamily: "YouSheBiaoTiHei" }}>{v.name}</div>
|
|
<div style={{
|
|
width: 50, height: 26, background: [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00434180' : '#a7110033', border: `1px solid ${[2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00434180' : '#A71100'}`, cursor: "pointer",
|
|
borderRadius: 4, color: [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
|
|
}}>{[1, 3, 5].includes(v.data[0]?.sMotor_State) ? '停止' : [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '运行' : v.data[0]?.sMotor_State == 7 ? '故障' : '无状态'}</div>
|
|
</div>
|
|
<div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}>
|
|
<Carousel style={{ width: '100%', height: 66 }} autoplay>
|
|
<div style={{ width: '100%', height: '100%', }}>
|
|
<div style={{
|
|
width: '100%', height: '100%', display: 'flex', justifyContent: 'space-around'
|
|
}}>
|
|
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
|
|
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
|
|
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
|
|
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_A_A} A</div>
|
|
<div>A相电流</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
|
|
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
|
|
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
|
|
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_A_V} V</div>
|
|
<div>A相电压</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ width: '100%', height: '100%', }}>
|
|
<div style={{
|
|
width: '100%', height: '100%', display: 'flex', justifyContent: 'space-around'
|
|
}}>
|
|
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
|
|
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
|
|
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
|
|
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_B_A} A</div>
|
|
<div>B相电流</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
|
|
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
|
|
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
|
|
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_B_V} V</div>
|
|
<div>B相电压</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ width: '100%', height: '100%', }}>
|
|
<div style={{
|
|
width: '100%', height: '100%', display: 'flex', justifyContent: 'space-around'
|
|
}}>
|
|
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
|
|
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
|
|
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
|
|
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_C_A} A</div>
|
|
<div>C相电流</div>
|
|
</div>
|
|
</div>
|
|
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
|
|
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
|
|
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
|
|
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_C_V} V</div>
|
|
<div>C相电压</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</Carousel>
|
|
<div style={{ width: "100%", height: 90, padding: '10px 25px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', color: 'white' }}>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 90, textAlign: 'end' }}>总用电量:</div>
|
|
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_EQ?.toFixed(2)} kWh</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 90, textAlign: 'end' }}>单次运行时间:</div>
|
|
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.dPump_T_S} min</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 90, textAlign: 'end' }}>总积累时间:</div>
|
|
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.dPump_T_T} h</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
})
|
|
}
|
|
|
|
</div>
|
|
<img style={{ width: 36, height: 36 }} src="/assets/images/monitor/right.png"
|
|
onClick={() => {
|
|
if (pageLeft + 1 < Math.ceil(pumpData.length / 2)) setPageLeft(pageLeft + 1)
|
|
}} />
|
|
</>}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* 中间位置 */}
|
|
<div style={{
|
|
width: '40%', height: '100%',
|
|
backgroundImage: 'url(/assets/images/monitor/pillar.png)',
|
|
backgroundSize: '80% 80%',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
position: 'relative'
|
|
}}>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center',
|
|
position: 'absolute', top: '6%', left: 10,
|
|
}}>
|
|
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
|
|
湿度：</div>
|
|
<span style={{ fontFamily: "D-DIN-Italic" }}>{centreData?.sHumidity}</span> %
|
|
</div>
|
|
<div style={{ color: '#00FFF8', fontSize: 20, position: 'absolute', top: '15%', left: "calc(50% - 90px)", display: 'inline-block' }}>
|
|
<span style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600, }}>
|
|
总用量：</span><span title={centreData?.daySun?.toFixed(2)} style={{ width: 50, fontFamily: "D-DIN-Italic", lineHeight: "16px", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.daySun?.toFixed(2)}</span> kWh
|
|
</div>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center',
|
|
position: 'absolute', top: '6%', right: -10,
|
|
}}>
|
|
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
|
|
温度：</div>
|
|
<sapn style={{ fontFamily: "D-DIN-Italic" }}>{centreData?.sTEMP}</sapn> ℃
|
|
</div>
|
|
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
|
|
position: 'absolute', top: '35%', left: -60,
|
|
}}>
|
|
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
|
|
今年用电：</div>
|
|
<span title={centreData?.day365?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day365?.toFixed(2) || '--'}</span> kWh
|
|
</div>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
|
|
position: 'absolute', top: '54%', left: 0,
|
|
}}>
|
|
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
|
|
当月用电：</div>
|
|
<span title={centreData?.day30?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day30?.toFixed(2) || '--'}</span> kWh
|
|
</div>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
|
|
position: 'absolute', top: '67%', left: 'calc(50% - 80px)',
|
|
}}>
|
|
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
|
|
当日用电：</div>
|
|
<span title={centreData?.day1?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day1?.toFixed(2) || '--'}</span> kWh
|
|
</div>
|
|
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
height: 130, width: 180, position: 'absolute', top: '37%', right: 0,
|
|
display: 'flex', flexDirection: 'column', alignItems: 'center'
|
|
}}>
|
|
<div style={{ width: "100%", height: "100%", position: "relative" }}>
|
|
<div style={{ position: "absolute", top: 0, left: 20, fontSize: 18, fontWeight: 600, color: "#E2F8FF", width: 160, marginBottom: 18 }}>集水池液位</div>
|
|
<ReactECharts
|
|
option={{
|
|
series: [
|
|
{
|
|
type: 'gauge',
|
|
startAngle: 180,
|
|
endAngle: 0,
|
|
center: ['50%', '75%'],
|
|
radius: '90%',
|
|
min: 0,
|
|
max: 30,
|
|
// splitNumber: 8,
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: 2,
|
|
color: [
|
|
[1, '#58D9F9']]
|
|
}
|
|
},
|
|
pointer: {
|
|
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
|
|
length: '60%',
|
|
width: 2,
|
|
itemStyle: {
|
|
color: 'auto'
|
|
}
|
|
},
|
|
axisTick: {
|
|
length: 0,
|
|
// offsetCenter: [0, '-60%'],
|
|
lineStyle: {
|
|
color: 'auto',
|
|
width: 1
|
|
}
|
|
},
|
|
splitLine: {
|
|
length: 0,
|
|
lineStyle: {
|
|
color: 'auto',
|
|
width: 2
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#FFF',
|
|
fontSize: 8,
|
|
distance: 2,
|
|
rotate: 'tangential',
|
|
},
|
|
detail: {
|
|
fontSize: 10,
|
|
offsetCenter: [0, '-10%'],
|
|
valueAnimation: true,
|
|
color: 'inherit'
|
|
},
|
|
data: [
|
|
{
|
|
value: centreData?.sGrille_level?.toFixed(2) || 0,
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}}
|
|
notMerge={true}
|
|
lazyUpdate={true}
|
|
style={{ width: '100%', height: '100%' }}
|
|
theme={'ReactEChart'}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div className='site' style={{
|
|
display: 'flex', justifyContent: 'center', alignItems: 'center',
|
|
width: '100%', tpo: '80%', position: 'absolute', top: '80%'
|
|
}}>
|
|
<img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' />
|
|
<div style={{
|
|
width: 180, height: 41, backgroundImage: 'url(/assets/images/monitor/title.png)',
|
|
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
|
|
textAlign: 'center', lineHeight: '41px', fontSize: 20, color: '#FFF', fontStyle: "italic"
|
|
}}>{siteList?.filter(v => v.value == strucId)[0]?.label}</div>
|
|
<Select
|
|
showSearch
|
|
placeholder="请选择站点"
|
|
value={strucId}
|
|
style={{ width: 155 }}
|
|
optionFilterProp="children"
|
|
onSelect={v => {
|
|
setStrucId(v)
|
|
}}
|
|
options={siteList}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* 进线柜 */}
|
|
<div style={{ width: '30%', height: '100%', display: 'flex', justifyContent: 'center', }}>
|
|
<div style={{ width: '80%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
|
|
{cabinetData.length > 0 && <>
|
|
<img style={{ width: 36, height: 36 }} src="/assets/images/monitor/left.png"
|
|
onClick={() => {
|
|
if (pageRight > 0) setPageRight(pageRight - 1)
|
|
}} />
|
|
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
|
|
{
|
|
cabinetData?.slice(pageRight * 2, (pageRight + 1) * 2)?.map((v, index) => {
|
|
return <div key={'waterPump' + index} style={{ width: 250, height: 200 }}>
|
|
<div style={{
|
|
width: '100%', height: 38,
|
|
backgroundImage: 'url(/assets/images/monitor/pump-head.png)',
|
|
backgroundSize: '100% 100%',
|
|
backgroundPosition: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center'
|
|
}}>
|
|
<div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF', fontFamily: "YouSheBiaoTiHei" }}>{v.name}</div>
|
|
<div style={{
|
|
width: 50, height: 26, background: v.sQF_CLOSING ? "#00434180" : '#a7110033', border: `1px solid ${v.sQF_CLOSING ? "#00FFF8" : '#A71100'}`, cursor: "pointer",
|
|
borderRadius: 4, color: v.sQF_CLOSING ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
|
|
}}>{v.sQF_CLOSING ? '合闸' : '分闸'}</div>
|
|
</div>
|
|
<div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}>
|
|
|
|
<div style={{ width: "100%", height: 160, padding: '10px 25px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', color: 'white' }}>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 90, textAlign: 'end' }}>当日用电:</div>
|
|
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.today) ? v.today : v.today?.toFixed(2)} kWh</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 90, textAlign: 'end' }}>当月用电:</div>
|
|
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.sameMonth) ? v.sameMonth : v.sameMonth?.toFixed(2)} kWh</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 90, textAlign: 'end' }}>今年用电:</div>
|
|
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.thisYear) ? v.thisYear : v.thisYear?.toFixed(2)} kWh</div>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<div style={{ width: 90, textAlign: 'end' }}>总用电量:</div>
|
|
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.eQF_EQ?.toFixed(2) || '--'} kWh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
})
|
|
}
|
|
|
|
</div>
|
|
<img style={{ width: 36, height: 36 }} src="/assets/images/monitor/right.png"
|
|
onClick={() => {
|
|
if (pageRight + 1 < Math.ceil(cabinetData.length / 2)) setPageRight(pageRight + 1)
|
|
}} /></>}
|
|
|
|
</div>
|
|
</div>
|
|
</div >
|
|
<div style={{ width: '100%', height: 'calc(31% )', display: 'flex', justifyContent: 'space-between' }}>
|
|
<div style={{
|
|
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
|
|
backgroundSize: '100% 36px',
|
|
backgroundPosition: '0 0',
|
|
backgroundRepeat: 'no-repeat',
|
|
width: '31%', 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',
|
|
showDetail: false
|
|
},
|
|
{
|
|
type: 'inside',
|
|
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: ['集水池液位', '池前（上游）液位'],
|
|
right: '10%',
|
|
textStyle: {
|
|
color: '#FFF',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
// name: "时间",
|
|
boundaryGap: false,
|
|
minInterval: 1000 * 60,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "单位：m",
|
|
areaStyle: {
|
|
color: '#FFF',
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
name: '集水池液位',
|
|
smooth: true,
|
|
areaStyle: {
|
|
color: '#0e9cff26',
|
|
},
|
|
data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sLiquid_level?.toFixed(2) || null])||[]
|
|
}, {
|
|
type: 'line',
|
|
name: '池前（上游）液位',
|
|
smooth: true,
|
|
areaStyle: {
|
|
color: '#0e9cff26',
|
|
},
|
|
data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sGrille_level?.toFixed(2) || null])||[]
|
|
},
|
|
]
|
|
}}
|
|
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: '31%', 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>
|
|
<Select
|
|
className='bigscreen-select'
|
|
bordered={false}
|
|
style={{ width: 150 }}
|
|
value={pumpId}
|
|
maxTagCount={1}
|
|
mode="multiple"
|
|
optionFilterProp="children"
|
|
onChange={v => {
|
|
if (v?.length < 4) {
|
|
setPumpId(v)
|
|
}
|
|
}}
|
|
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
|
|
/>
|
|
</div>
|
|
<ReactECharts
|
|
option={{
|
|
title: {
|
|
// text: v.name,
|
|
},
|
|
grid: {
|
|
// width: 300,
|
|
// height: 200
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',
|
|
showDetail: false
|
|
},
|
|
{
|
|
type: 'inside',
|
|
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: electricityTrend?.map(v => v.name) || [],
|
|
right: '10%',
|
|
textStyle: {
|
|
color: '#FFF',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
// name: "时间",
|
|
boundaryGap: false,
|
|
minInterval: 1000 * 60,
|
|
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "单位：A",
|
|
areaStyle: {
|
|
color: '#FFF',
|
|
},
|
|
},
|
|
series: electricityTrend?.map(v => ({
|
|
type: 'line',
|
|
name: v.name,
|
|
smooth: true,
|
|
areaStyle: {
|
|
color: '#0e9cff26',
|
|
},
|
|
data: v.data?.map(f => [moment(f.time).format('YYYY-MM-DD HH:mm:ss'), f.eMotor_A_A?.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: '31%', 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>
|
|
<Select
|
|
className='bigscreen-select'
|
|
bordered={false}
|
|
style={{ width: 150 }}
|
|
value={usePumpId}
|
|
maxTagCount={1}
|
|
mode="multiple"
|
|
optionFilterProp="children"
|
|
onChange={v => {
|
|
if (v?.length < 4) {
|
|
setUsePumpId(v)
|
|
}
|
|
}}
|
|
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
|
|
/>
|
|
</div>
|
|
<ReactECharts
|
|
option={{
|
|
title: {
|
|
// text: v.name,
|
|
},
|
|
grid: {
|
|
// width: 300,
|
|
// height: 200
|
|
left: 100
|
|
},
|
|
dataZoom: [
|
|
{
|
|
type: 'slider',
|
|
showDetail: false
|
|
},
|
|
{
|
|
type: 'inside',
|
|
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data: useTrend?.map(v => v.name) || [],
|
|
right: '10%',
|
|
textStyle: {
|
|
color: '#FFF',
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
// name: "时间",
|
|
boundaryGap: false,
|
|
minInterval: 1000 * 60,
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name: "单位：kwh",
|
|
areaStyle: {
|
|
color: '#FFF',
|
|
},
|
|
},
|
|
series: useTrend?.map(v => {
|
|
return {
|
|
type: 'line',
|
|
name: v.name,
|
|
smooth: true,
|
|
areaStyle: {
|
|
color: '#0e9cff26',
|
|
},
|
|
data: v.data?.map(f => [moment(f.time).format('YYYY-MM-DD HH:mm:ss'), f.eMotor_EQ?.toFixed(2)]) || []
|
|
}
|
|
}) || []
|
|
}}
|
|
notMerge={true}
|
|
lazyUpdate={true}
|
|
style={{ width: "100%", height: "100%" }}
|
|
theme={'ReactEChart'}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div >
|
|
}
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global } = state;
|
|
return {
|
|
user: auth.user,
|
|
clientHeight: global.clientHeight,
|
|
actions: global.actions,
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(Capacity)
|