Browse Source

聚集数据替换完结

master
wenlele 1 year ago
parent
commit
22526d10ab
  1. 4
      api/.vscode/launch.json
  2. 2
      api/app/lib/controllers/auth/index.js
  3. BIN
      web/client/assets/images/monitor/oblique.png
  4. BIN
      web/client/assets/images/realTime/buttom-d.png
  5. BIN
      web/client/assets/images/realTime/center.png
  6. BIN
      web/client/assets/images/realTime/left-p.png
  7. BIN
      web/client/assets/images/realTime/level.png
  8. BIN
      web/client/assets/images/realTime/right-p.png
  9. BIN
      web/client/assets/images/realTime/soft-one.png
  10. BIN
      web/client/assets/images/realTime/soft-two.png
  11. BIN
      web/client/assets/images/realTime/this-day.png
  12. BIN
      web/client/assets/images/realTime/this-week.png
  13. BIN
      web/client/assets/images/realTime/this-year.png
  14. 4
      web/client/index.html
  15. 2
      web/client/src/sections/auth/actions/auth.js
  16. 4
      web/client/src/sections/bigScreen/components/amap.js
  17. 10
      web/client/src/sections/bigScreen/components/basis.js
  18. 4
      web/client/src/sections/bigScreen/components/basis/right_2.js
  19. 452
      web/client/src/sections/bigScreen/components/capacity.js
  20. 46
      web/client/src/sections/bigScreen/components/electrical.js
  21. 6
      web/client/src/sections/bigScreen/components/electrity/levelTrend.js
  22. 18
      web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js
  23. 2
      web/client/src/sections/bigScreen/components/electrity/voltageTrend.js
  24. 406
      web/client/src/sections/bigScreen/components/realTime.js
  25. 64
      web/client/src/sections/bigScreen/components/realTime/accumulateTime.js
  26. 448
      web/client/src/sections/bigScreen/components/realTime/below.js
  27. 181
      web/client/src/sections/bigScreen/components/realTime/general.js
  28. 64
      web/client/src/sections/bigScreen/components/realTime/runTime.js
  29. 35
      web/client/src/sections/bigScreen/components/realTime/softStart.js
  30. 21
      web/client/src/sections/bigScreen/containers/systemManagement.js

4
api/.vscode/launch.json

@ -15,8 +15,8 @@
"args": [
"-p 4900",
//
// "-g postgres://postgres:123456@10.8.30.39:5432/PumpStation",
"-g postgres://FashionAdmin:123456@10.8.30.156:5432/PumpStation",
"-g postgres://postgres:123456@10.8.30.166:5432/PumpStation",
// "-g postgres://FashionAdmin:123456@10.8.30.166:5432/PumpStation",
//
// "--apiEmisUrl http://10.8.30.161:1111",
// "--qnak XuDgkao6cL0HidoMAPnA5OB10Mc_Ew08mpIfRJK5",

2
api/app/lib/controllers/auth/index.js

@ -36,7 +36,7 @@ async function login (ctx, next) {
expired: expired
});
ctx.status = 200;
ctx.body = userInfo;
ctx.body = userInfo
} else {
ctx.status = 400;
ctx.body = {

BIN
web/client/assets/images/monitor/oblique.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
web/client/assets/images/realTime/buttom-d.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
web/client/assets/images/realTime/center.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 698 KiB

BIN
web/client/assets/images/realTime/left-p.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
web/client/assets/images/realTime/level.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
web/client/assets/images/realTime/right-p.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
web/client/assets/images/realTime/soft-one.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
web/client/assets/images/realTime/soft-two.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

BIN
web/client/assets/images/realTime/this-day.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
web/client/assets/images/realTime/this-week.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
web/client/assets/images/realTime/this-year.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

4
web/client/index.html

@ -8,11 +8,11 @@
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
securityJsCode: '9e45b86a05ebb2f85d6d229973bc5ba6',
}
</script>
<script
src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch,aMap.DistrictSearch"></script>
src="https://webapi.amap.com/maps?v=2.0&key=e20863d113b69b83f553ea14dfec668f&plugin=AMap.AutoComplete,AMap.PlaceSearch,aMap.DistrictSearch"></script>
<!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> -->
</head>

2
web/client/src/sections/auth/actions/auth.js

@ -47,7 +47,7 @@ export const LOGOUT = 'LOGOUT';
export function logout (user) {
const token = user.token;
const url = ApiTable.logout;
sessionStorage.removeItem('user');
// sessionStorage.removeItem('user');
localStorage.removeItem('zhongding_selected_sider')
localStorage.removeItem('zhongding_open_sider')
Request.put(url, {

4
web/client/src/sections/bigScreen/components/amap.js

@ -19,7 +19,7 @@ const Amap = ({ showData }) => {
if (AMap) loadMap();
} catch (e) {
var script = document.createElement("script");
script.src = "https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch,AMap.Marker";
script.src = "https://webapi.amap.com/maps?v=2.0&key=e20863d113b69b83f553ea14dfec668f&plugin=AMap.AutoComplete,AMap.PlaceSearch,AMap.Marker";
document.body.appendChild(script);
loadMap();
}
@ -43,7 +43,7 @@ const Amap = ({ showData }) => {
zooms: [5, 20],
pitch: 0, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode: '3D', // 地图模式
mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', // 主题样式
mapStyle: 'amap://styles/1f6a7625ef9b3dc9cdd9ff016a7cc66e', // 主题样式
// rotation: 60
// showLabel: false
layers: [

10
web/client/src/sections/bigScreen/components/basis.js

@ -11,7 +11,7 @@ import Right_2 from './basis/right_2';
import { POWER_STATIONS } from './shuizhan_detail';
import './basis.less'
const Basis = ({ actions, dispatch, user, setshowData }) => {
const Basis = ({ actions, dispatch, setshowData }) => {
const { bigScreen } = actions
const [siteList, setSiteList] = useState([]) //站点列表
@ -93,8 +93,8 @@ const Basis = ({ actions, dispatch, user, setshowData }) => {
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'),
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
}
}
@ -131,7 +131,7 @@ const Basis = ({ actions, dispatch, user, setshowData }) => {
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
startTime: moment().add(-12, 'hours').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
limit: 1440
}
@ -180,7 +180,7 @@ const Basis = ({ actions, dispatch, user, setshowData }) => {
}}>
<div style={{ width: 76, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{v.name}</div>
<div >
{v.data?.map((s, i) => <img style={{ width: 20, height: 20, marginLeft: 3 }} src={`/assets/images/number/${[2, 4, 6].includes(s.data[0]?.sMotor_State) ? 'good' : 'problem'}${i + 1}.png`} />)
{v.data?.map((s, i) => <img style={{ width: 20, height: 20, marginLeft: 3 }} src={`/assets/images/number/${[2, 4, 6].includes(s.data[0]?.sMotor_State) ? 'problem' : 'good'}${i + 1}.png`} />)
}

4
web/client/src/sections/bigScreen/components/basis/right_2.js

@ -63,7 +63,7 @@ export default function Right_2 ({ depthWater }) {
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sLiquid_level)
data: depthWater?.map(v => (v.sLiquid_level?.toFixed(2) || 0))
},
{
type: 'line',
@ -72,7 +72,7 @@ export default function Right_2 ({ depthWater }) {
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sGrille_level)
data: depthWater?.map(v => (v.sGrille_level?.toFixed(2) || 0))
},
]

452
web/client/src/sections/bigScreen/components/capacity.js

@ -5,15 +5,15 @@ import moment from 'moment'
import ReactECharts from 'echarts-for-react';
import './index.less'
const Capacity = ({ actions, dispatch, user, }) => {
const Capacity = ({ actions, dispatch, siteList, }) => {
const { bigScreen } = actions
const [pageLeft, setPageLeft] = useState(0) //左边翻页
const [pageRight, setPageRight] = useState(0) //左边翻页
const [siteList, setSiteList] = useState([]) //站点列表
// const [siteList, setSiteList] = useState([]) //站点列表
const [pumpList, setPumpList] = useState([]) //水泵列表
const [strucId, setStrucId] = useState() //站点ID
const [pumpId, setPumpId] = useState() //水泵id
const [usePumpId, setUsePumpId] = useState() //水泵id
const [pumpId, setPumpId] = useState([]) //水泵id
const [usePumpId, setUsePumpId] = useState([]) //水泵id
const [pumpData, setPumpData] = useState([]) //水泵数据
const [cabinetData, setCabinetData] = useState([]) //进线柜数据
const [centreData, setCentreData] = useState({}) //中间数据
@ -23,20 +23,20 @@ const Capacity = ({ actions, dispatch, user, }) => {
useEffect(() => {
dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => {
if (res.success) {
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name })) || [])
setStrucId(res.payload.data[0]?.id)
}
})
}, [])
setStrucId(siteList[0]?.value)
}, [siteList])
useEffect(async () => {
let pump = []
let cabinetSun = []
let pumpSun = []
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) {
@ -49,98 +49,106 @@ const Capacity = ({ actions, dispatch, user, }) => {
})).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(p.payload.data[0]?.groups[0]?.stations[0]?.id)
setUsePumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
setPumpId(voltageId)
setUsePumpId(voltageId)
if (dataId.length) {
let sameDay //当天最新一条数据
let beforeDay //前一天最新一条数据
let month //上个月最新一条数据
let year //去年最新一条数据
// 当前时间
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'),
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 || []
sameDay = d.payload.data?.stations || []
d.payload.data?.stations?.map(f => {
daySun += f?.data[0]?.eMotor_EQ
})
}
})
// 昨天最后一条数据
// 今天
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
startTime: moment().day(moment().day() - 7).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().day(moment().day() - 1).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
begin: moment().startOf('day').format('x'),
end: moment().endOf('day').format('x'),
aggtype: "h",
method: 'diff'
}
}
})).then(d => {
if (d.success) {
beforeDay = d.payload.data?.stations || []
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/theme/data`, params: {
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
startTime: moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
begin: moment().startOf('month').format('x'),
end: moment().endOf('month').format('x'),
aggtype: "d",
method: 'diff'
}
}
})).then(d => {
if (d.success) {
month = d.payload.data?.stations || []
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/theme/data`, params: {
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
startTime: moment().year(moment().year() - 1).month(moment().month() - 1).startOf('year').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().year(moment().year() - 1).month(moment().month() - 1).endOf('year').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
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?.stations || []
d.payload.data[0]?.stations.map(f => {
f.data?.map(h => {
if (!h.changData) {
day365 += h.values.eMotor_EQ
}
})
})
}
})
sameDay?.map(u => {
let find1 = beforeDay?.find(c => c.id == u.id)
let find2 = month?.find(c => c.id == u.id)
let find3 = year?.find(c => c.id == u.id)
pumpSun.push({
today: u?.data[0]?.eMotor_EQ && find1?.data[0]?.eMotor_EQ ? (u?.data[0]?.eMotor_EQ - find1?.data[0]?.eMotor_EQ) : '--',
sameMonth: u?.data[0]?.eMotor_EQ && find2?.data[0]?.eMotor_EQ ? (u?.data[0]?.eMotor_EQ - find2?.data[0]?.eMotor_EQ) : '--',
thisYear: u?.data[0]?.eMotor_EQ && find3?.data[0]?.eMotor_EQ ? (u?.data[0]?.eMotor_EQ - find3?.data[0]?.eMotor_EQ) : '--',
eMotor_EQ: u?.data[0]?.eMotor_EQ,
id: u.id,
name: u.name,
})
})
}
}
@ -163,11 +171,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
})
})
if (dataId.length) {
let sameDay //当天最新一条数据
let beforeDay //前一天最新一条数据
let month //上个月最新一条数据
let year //去年最新一条数据
// 当前时间
// // 当前时间
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
@ -179,73 +183,107 @@ const Capacity = ({ actions, dispatch, user, }) => {
}
})).then(d => {
if (d.success) {
sameDay = d.payload.data?.stations || []
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/theme/data`, params: {
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
startTime: moment().day(moment().day() - 7).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().day(moment().day() - 1).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
begin: moment().startOf('day').format('x'),
end: moment().endOf('day').format('x'),
aggtype: "h",
method: 'diff'
}
}
})).then(d => {
if (d.success) {
beforeDay = d.payload.data?.stations || []
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/theme/data`, params: {
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
startTime: moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().month(moment().month() - 1).endOf('month').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
begin: moment().startOf('month').format('x'),
end: moment().endOf('month').format('x'),
aggtype: "d",
method: 'diff'
}
}
})).then(d => {
if (d.success) {
month = d.payload.data?.stations || []
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/theme/data`, params: {
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
startTime: moment().year(moment().year() - 1).month(moment().month() - 1).startOf('year').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().year(moment().year() - 1).month(moment().month() - 1).endOf('year').format('YYYY-MM-DD HH:mm:ss'),
limit: 1
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?.stations || []
// 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
}
})
}
})
})
}
})
sameDay?.map(u => {
let find1 = beforeDay?.find(c => c.id == u.id)
let find2 = month?.find(c => c.id == u.id)
let find3 = year?.find(c => c.id == u.id)
cabinetSun.push({
today: u?.data[0]?.eQF_EQ && find1?.data[0]?.eQF_EQ ? (u?.data[0]?.eQF_EQ - find1?.data[0]?.eQF_EQ) : '--',
sameMonth: u?.data[0]?.eQF_EQ && find2?.data[0]?.eQF_EQ ? (u?.data[0]?.eQF_EQ - find2?.data[0]?.eQF_EQ) : '--',
thisYear: u?.data[0]?.eQF_EQ && find3?.data[0]?.eQF_EQ ? (u?.data[0]?.eQF_EQ - find3?.data[0]?.eQF_EQ) : '--',
eQF_EQ: u?.data[0]?.eQF_EQ,
id: u.id,
name: u.name,
sQF_CLOSING: u?.data[0]?.sQF_CLOSING
})
})
}
}
})
@ -260,7 +298,6 @@ const Capacity = ({ actions, dispatch, user, }) => {
params: { query: { factorId: informationId } }
})).then(async p => {
if (p.success) {
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
@ -305,38 +342,22 @@ const Capacity = ({ actions, dispatch, user, }) => {
setCabinetData(cabinetSun)
//计算各个阶段的总点电量
let day1 = 0
let day30 = 0
let day365 = 0
let daySun = 0
pumpSun?.map(h => {
if (!isNaN(h.today)) day1 += h.today
if (!isNaN(h.sameMonth)) day30 += h.sameMonth
if (!isNaN(h.thisYear)) day365 += h.thisYear
if (!isNaN(h.eQF_EQ)) daySun += h.eQF_EQ
})
cabinetSun?.map(h => {
if (!isNaN(h.today)) day1 += h.today
if (!isNaN(h.sameMonth)) day30 += h.sameMonth
if (!isNaN(h.thisYear)) day365 += h.thisYear
if (!isNaN(h.eQF_EQ)) daySun += h.eQF_EQ
})
sun.day1 = day1
sun.day30 = day30
sun.day365 = day365
sun.day30 = day30 + day1
sun.day365 = day365 + day1
sun.daySun = daySun
setCentreData(sun)
}, [strucId])
useEffect(async () => {
if (pumpId) {
if (pumpId?.length > 0) {
//电流趋势
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: pumpId,
stations: pumpId?.join(),
startTime: moment().add(-12, 'hours').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
limit: 1440
@ -344,11 +365,12 @@ const Capacity = ({ actions, dispatch, user, }) => {
}
})).then(d => {
if (d.success) {
let trend = []
d.payload.data?.stations[0]?.data?.map((s, i) => {
trend.push({ time: s.time, eMotor_A_A: s.eMotor_A_A })
})
setElectricityTrend(trend)
// let trend = []
// d.payload.data?.stations[0]?.data?.map((s, i) => {
// trend.push({ time: s.time, eMotor_A_A: s.eMotor_A_A })
// })
setElectricityTrend(d.payload.data?.stations)
}
})
@ -357,28 +379,20 @@ const Capacity = ({ actions, dispatch, user, }) => {
}, [pumpId])
useEffect(async () => {
if (usePumpId) {
if (usePumpId?.length > 0) {
//电流趋势
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: usePumpId,
stations: usePumpId?.join(),
startTime: moment().add(-12, 'hours').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
limit: 1440
limit: 3
}
}
})).then(d => {
if (d.success) {
let trend = []
let front = {}
d.payload.data?.stations[0]?.data?.map((s, i) => {
front = s
if (i > 0) {
trend.push({ time: front.time, value: front?.eMotor_EQ - s.eMotor_EQ })
}
})
setUseTrend(trend)
setUseTrend(d.payload.data?.stations)
}
})
@ -533,7 +547,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
</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>{centreData?.daySun} kWh
总用量</span>{centreData?.daySun?.toFixed(2)} kWh
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
@ -546,43 +560,116 @@ const Capacity = ({ actions, dispatch, user, }) => {
</div>
<div style={{
backgroundImage: 'linear-gradient(180deg, #0F3977 0%, #07327b9c 53%, #002B7E 100%)',
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: 20, color: '#E2F8FF', fontWeight: 600 }}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
今年用电</div>{centreData?.day365?.toFixed(2) || '--'}
</div>
<div style={{
backgroundImage: 'linear-gradient(180deg, #0F3977 0%, #07327b9c 53%, #002B7E 100%)',
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: 20, color: '#E2F8FF', fontWeight: 600 }}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
当月用电</div>{centreData?.day30?.toFixed(2) || '--'}
</div>
<div style={{
backgroundImage: ' linear-gradient(180deg, #0F3977 0%, #07327b9c 53%, #002B7E 100%)',
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: 20, color: '#E2F8FF', fontWeight: 600 }}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
当日用电</div>{centreData?.day1?.toFixed(2) || '--'}
</div>
<div style={{
backgroundImage: 'linear-gradient(180deg, #0F3977 0%, #07327b9c 53%, #002B7E 100%)',
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={{ fontSize: 18, fontWeight: 600, color: "#E2F8FF", width: 160, marginBottom: 18 }}>集水池液位</div>
<div style={{ height: 160, width: 116, }}>
<Progress type="dashboard" percent={75} strokeColor={'#10D2E9'} gapDegree={180}
format={() => <div style={{ color: '#4CA1FF', fontSize: 20 }}>{centreData?.sGrille_level?.toFixed(2) || 0} m</div>}
<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',
},
// title: {
// offsetCenter: [0, '-10%'],
// fontSize: 12,
// color: '#FFF',
// },
detail: {
fontSize: 10,
offsetCenter: [0, '-10%'],
valueAnimation: true,
color: 'inherit'
},
data: [
{
value: centreData?.sGrille_level?.toFixed(2) || 0,
// name: '实时液位'
}
]
}
]
}}
notMerge={true}
lazyUpdate={true}
style={{ width: '100%', height: '100%' }}
theme={'ReactEChart'}
/>
</div>
</div>
@ -667,7 +754,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
</div>
</div>
</div >
<div style={{ width: '100%', height: 'calc(36% )', display: 'flex', justifyContent: 'space-between' }}>
<div style={{ width: '100%', height: 'calc(34% )', display: 'flex', justifyContent: 'space-between' }}>
<div style={{
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
backgroundSize: '100% 36px',
@ -714,7 +801,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
},
yAxis: {
type: 'value',
name: "单位:M",
name: "单位:m",
areaStyle: {
color: '#FFF',
},
@ -727,7 +814,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sLiquid_level)
data: depthWater?.map(v => v.sLiquid_level?.toFixed(2) || 0)
}, {
type: 'line',
name: '池前(上游)液位',
@ -735,7 +822,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sGrille_level)
data: depthWater?.map(v => v.sGrille_level?.toFixed(2) || 0)
},
]
}}
@ -758,10 +845,15 @@ const Capacity = ({ actions, dispatch, user, }) => {
<Select
className='bigscreen-select'
bordered={false}
style={{ width: 150 }}
value={pumpId}
maxTagCount={1}
mode="multiple"
optionFilterProp="children"
onSelect={v => {
setPumpId(v)
onChange={v => {
if (v?.length < 4) {
setPumpId(v)
}
}}
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
/>
@ -788,7 +880,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
trigger: 'axis'
},
legend: {
// data: ['集水池液位',],
data: electricityTrend?.map(v => v.name) || [],
right: '10%',
textStyle: {
color: '#FFF',
@ -798,26 +890,24 @@ const Capacity = ({ actions, dispatch, user, }) => {
type: 'category',
// name: "时间",
boundaryGap: false,
data: electricityTrend?.map(v => moment(v.time).format('MM-DD HH:mm'))
data: electricityTrend[0]?.data?.map(v => moment(v.time).format('MM-DD HH:mm'))
},
yAxis: {
type: 'value',
name: "单位:M",
name: "单位:A",
areaStyle: {
color: '#FFF',
},
},
series: [
{
type: 'line',
// name: '集水池液位',
smooth: true,
areaStyle: {
color: '#0e9cff26',
},
data: electricityTrend?.map(v => v.eMotor_A_A)
}
]
series: electricityTrend?.map(v => ({
type: 'line',
name: v.name,
smooth: true,
areaStyle: {
color: '#0e9cff26',
},
data: v.data?.map(s => s.eMotor_A_A?.toFixed(2) || 0) || []
})) || []
}}
notMerge={true}
lazyUpdate={true}
@ -837,10 +927,15 @@ const Capacity = ({ actions, dispatch, user, }) => {
<Select
className='bigscreen-select'
bordered={false}
style={{ width: 150 }}
value={usePumpId}
maxTagCount={1}
mode="multiple"
optionFilterProp="children"
onSelect={v => {
setUsePumpId(v)
onChange={v => {
if (v?.length < 4) {
setUsePumpId(v)
}
}}
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
/>
@ -867,7 +962,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
trigger: 'axis'
},
legend: {
// data: ['集水池液位',],
data: useTrend?.map(v => v.name) || [],
right: '10%',
textStyle: {
color: '#FFF',
@ -877,26 +972,31 @@ const Capacity = ({ actions, dispatch, user, }) => {
type: 'category',
// name: "时间",
boundaryGap: false,
data: useTrend?.map(v => moment(v.time).format('MM-DD HH:mm'))
data: useTrend[0]?.data?.map(v => moment(v.time).format('MM-DD HH:mm'))
},
yAxis: {
type: 'value',
name: "单位:M",
name: "单位:kwh",
areaStyle: {
color: '#FFF',
},
},
series: [
{
series: useTrend?.map(v => {
let front = [{}, {}]
return {
type: 'line',
// name: '集水池液位',
name: v.name,
smooth: true,
areaStyle: {
color: '#0e9cff26',
},
data: useTrend?.map(v => v.value)
data: v.data?.map(s => {
front[0] = front[1]
front[1] = s
return front[0]?.eMotor_EQ && (s?.eMotor_EQ - front[0]?.eMotor_EQ)?.toFixed(2) || 0
}) || []
}
]
}) || []
}}
notMerge={true}
lazyUpdate={true}

46
web/client/src/sections/bigScreen/components/electrical.js

@ -8,12 +8,12 @@ import LineBoxStatus from '../components/electrity/lineBoxStatus';
import VoltageTrend from '../components/electrity/voltageTrend';
import LevelTrend from '../components/electrity/levelTrend';
const Electrical = ({ dispatch, actions, user, module, setModule }) => {
const Electrical = ({ dispatch, actions, siteList}) => {
const { bigScreen } = actions
const [pageLeft, setPageLeft] = useState(0) //左边翻页
const [pageRight, setPageRight] = useState(0) //左边翻页
const [siteList, setSiteList] = useState([]) //站点列表
// const [siteList, setSiteList] = useState([]) //站点列表
const [pumpList, setPumpList] = useState([]) //水泵列表
const [cabinetList, setCabinetList] = useState([]) //水泵列表
const [strucId, setStrucId] = useState() //站点ID
@ -31,14 +31,10 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
const [useTrend, setUseTrend] = useState([]) //用电趋势
useEffect(() => {
dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => {
if (res.success) {
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name })) || [])
setStrucId(res.payload.data[0]?.id)
}
})
}, [])
setStrucId(siteList[0]?.value)
}, [siteList])
useEffect(async () => {
if (strucId) {
@ -74,8 +70,8 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
// 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'),
// startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
// endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
// limit: 1
// }
// }
@ -106,24 +102,6 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
})
setCabinetList(dataId)
setCabinetId(p.payload.data[0]?.groups[0]?.stations[0]?.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) {
// }
// })
// }
}
})
}
@ -143,7 +121,7 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
startTime: moment().add(-12, 'hours').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
limit: 1440
}
@ -169,7 +147,7 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: pumpId,
startTime: moment().startOf('day').format('YYYY:MM:DD HH:mm:ss'),
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
limit: 1
}
@ -189,7 +167,7 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: cabinetId,
startTime: moment().startOf('day').format('YYYY:MM:DD HH:mm:ss'),
startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
limit: 1
}
@ -209,7 +187,7 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: voltagePumpId?.join(),
startTime: moment().add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
startTime: moment().add(-12, 'hours').format('YYYY-MM-DD HH:mm:ss'),
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
limit: 1440
}
@ -260,6 +238,8 @@ const Electrical = ({ dispatch, actions, user, module, setModule }) => {
</div>
</div>
<img style={{ width: "44%", height: "46%", position: "absolute", left: "28%", top: "34%" }} src={`/assets/images/electrical/centre.png`} />
<div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "33%", top: "58%" }}>集水池水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{depthWater[0]?.sLiquid_level?.toFixed(2) || 0}</span></div>
<div style={{ background: '#102d4c94', border: '1px solid #4CA1FF', position: "absolute", left: "36%", top: "70%" }}>池前上游水位<span style={{ color: '#FFCB00', fontFamily: 'DIN-Medium' }}>{depthWater[0]?.sGrille_level?.toFixed(2) || 0}</span></div>
<div className='site' style={{
display: 'flex', justifyContent: 'center', alignItems: 'center',
width: '40%', bottom: 10, position: 'absolute', left: "28%"

6
web/client/src/sections/bigScreen/components/electrity/levelTrend.js

@ -59,7 +59,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate
},
yAxis: {
type: 'value',
name: "单位:M",
name: "单位:m",
areaStyle: {
color: '#FFF',
},
@ -72,7 +72,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sLiquid_level)
data: depthWater?.map(v => v.sLiquid_level?.toFixed(2) || 0)
}, {
type: 'line',
name: '池前(上游)液位',
@ -80,7 +80,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sGrille_level)
data: depthWater?.map(v => v.sGrille_level?.toFixed(2) || 0)
},
]
}}

18
web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js

@ -14,7 +14,7 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => {
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat',zIndex:2,
backgroundRepeat: 'no-repeat', zIndex: 2,
width: '26%', height: '40%', minWidth: 360, position: "absolute", left: 10, top: 0
}}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
@ -51,14 +51,18 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => {
display: 'flex', alignItems: "center", justifyContent: 'space-between',
}}>
<div style={{ marginLeft: 6 }}>控制方式</div>
<div style={{ marginRight: 6 }}>现场就地</div>
<div style={{ marginRight: 6 }}>{pumpOne?.data[0]?.sMotor_LR ? '现场就地' : "平台远程"}</div>
</div>
<div style={{
height: 30, borderBottom: '1px solid #96b8bcba',
display: 'flex', alignItems: "center", justifyContent: 'space-between',
}}>
<div style={{ marginLeft: 6 }}>远程模式</div>
<div style={{ marginRight: 6 }}>平台手动</div>
<div style={{ marginRight: 6 }}>
{pumpOne?.data[0]?.sMotor_RunMode == 1 ? '就地手动'
: pumpOne?.data[0]?.sMotor_RunMode == 2 ? "平台手动"
: pumpOne?.data[0]?.sMotor_RunMode == 2 ? "平台液控" : "--"}
</div>
</div>
</div>
</div>
@ -68,11 +72,11 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => {
width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center'
}}>
<div style={{ display: 'flex', width: "48%" }}>
<div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>单次时间</div>
<div style={{ width: 80, textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>单次时间</div>
<div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.dPump_T_S} min</div>
</div>
<div style={{ display: 'flex', width: "48%" }}>
<div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>积累时间</div>
<div style={{ width: 80, textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>积累时间</div>
<div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.dPump_T_T} h</div>
</div>
</div>
@ -82,11 +86,11 @@ const RealTimeStatus = ({ user, pumpId, pumpList, setPumpId, pumpOne }) => {
width: '100%', height: 43, display: 'flex', justifyContent: "space-between", alignItems: 'center'
}}>
<div style={{ display: 'flex', width: "48%" }}>
<div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电流</div>
<div style={{ width: 80, textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电流</div>
<div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.eMotor_A_A} min</div>
</div>
<div style={{ display: 'flex', width: "48%" }}>
<div style={{ width: 80,textIndent:10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电压</div>
<div style={{ width: 80, textIndent: 10, fontFamily: "SourceHanSansCN-Medium", color: "#63B0FF", }}>运行电压</div>
<div style={{ flex: 1, textAlign: "end", fontSize: 16, fontFamily: "YouSheBiaoTiHei" }}>{pumpOne?.data[0]?.eMotor_A_V} h</div>
</div>
</div>

2
web/client/src/sections/bigScreen/components/electrity/voltageTrend.js

@ -76,7 +76,7 @@ const VoltageTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, data })
},
yAxis: {
type: 'value',
name: "单位:M",
name: "单位:V",
areaStyle: {
color: '#FFF',
},

406
web/client/src/sections/bigScreen/components/realTime.js

@ -6,14 +6,15 @@ import ReactECharts from 'echarts-for-react';
import General from '../components/realTime/general';
import LineBoxStatus from '../components/electrity/lineBoxStatus';
import SoftStart from '../components/realTime/softStart';
import LevelTrend from '../components/electrity/levelTrend';
import Below from '../components/realTime/below';
import RunTime from '../components/realTime/runTime';
import AccumulateTime from '../components/realTime/accumulateTime';
const RealTime = ({ dispatch, actions, user, module, setModule }) => {
const RealTime = ({ dispatch, actions, user, siteList, }) => {
const { bigScreen } = actions
const [pageLeft, setPageLeft] = useState(0) //左边翻页
const [pageRight, setPageRight] = useState(0) //左边翻页
const [siteList, setSiteList] = useState([]) //站点列表
const [pumpList, setPumpList] = useState([]) //水泵列表
const [cabinetList, setCabinetList] = useState([]) //水泵列表
const [strucId, setStrucId] = useState() //站点ID
@ -30,19 +31,24 @@ const RealTime = ({ dispatch, actions, user, module, setModule }) => {
const [depthWater, setDepthWater] = useState([]) //液位趋势
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
const [useTrend, setUseTrend] = useState([]) //用电趋势
const [interval, setInterval] = useState('本日') //用电概况区间
const [stations, setStations] = useState({}) //测点id
const [softStartData, setSoftStartData] = useState([]) //软启动总用电数据
const [electro, setElectro] = useState({ week: 0, year: 0, day: 0 }) //用电概况
const [level, setLevel] = useState(0) //实时液位
useEffect(() => {
dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => {
if (res.success) {
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name })) || [])
setStrucId(res.payload.data[0]?.id)
}
})
}, [])
setStrucId(siteList[0]?.value)
}, [siteList])
useEffect(async () => {
if (strucId) {
let station = {}
let week = 0 //本周
let year = 0 //年
let day = 0 //今日
await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${strucId}/factors` })).then(async r => {
if (r.success) {
//水泵信息
@ -51,145 +57,267 @@ const RealTime = ({ dispatch, actions, user, module, setModule }) => {
await dispatch(bigScreen.axyData({
type: 'get', url: `structures/${strucId}/stations`,
params: { query: { factorId: waterId } }
})).then(async p => {
if (p.success) {
let dataId = p.payload.data[0]?.groups[0]?.stations?.map(k => k.id) || []
station.pump = dataId
// let voltageId =[]
// setPumpList(p.payload.data[0]?.groups[0]?.stations)
// setPumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
// setVoltagePumpId(voltageId)
// setUsePumpId(p.payload.data[0]?.groups[0]?.stations[0]?.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) {
setSoftStartData(d.payload.data?.stations)
}
})
//今天
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(c => {
c.data?.map(f => {
if (!f.changData) {
day += (f?.values?.eMotor_EQ || 0)
week += (f?.values?.eMotor_EQ || 0)
year += (f?.values?.eMotor_EQ || 0)
}
})
})
}
})
//本周
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
begin: moment().weekday(1).startOf('day').format('x'),
end: moment().weekday(7).endOf('day').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) {
week += (f?.values?.eMotor_EQ || 0)
}
})
})
}
})
//今年
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(c => {
c.data?.map(f => {
if (!f.changData) {
year += (f?.values?.eMotor_EQ || 0)
}
})
})
}
})
}
}
})
}
// 进线柜
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 = []
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(p.payload.data[0]?.groups[0]?.stations[0]?.id)
setVoltagePumpId(voltageId)
setUsePumpId(p.payload.data[0]?.groups[0]?.stations[0]?.id)
// if (dataId.length) {
// // 当前时间
// await dispatch(bigScreen.axyData({
// type: 'get', url: `stations/theme/data`, params: {
// query: {
// stations: dataId.join(),
// startTime: moment().day(moment().day() - 1).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
// endTime: moment().day(moment().day() - 1).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
// limit: 1440
// }
// }
// })).then(d => {
// if (d.success) {
// }
// })
// }
station.cabine = dataId
// setCabinetList(dataId)
// setCabinetId(p.payload.data[0]?.groups[0]?.stations[0]?.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) {
}
})
// // 今天
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
begin: moment().add(-100, 'hours').format('x'),
begin: moment().startOf('day').format('x'),
end: moment().endOf('day').format('x'),
// limit: 1
aggtype:'d',
orderDirection:'ASC',
aggtype: "h",
method: 'diff'
}
}
})).then(d => {
if (d.success) {
d.payload.data[0]?.stations?.map(c => {
c.data?.map(f => {
if (!f.changData) {
day += (f?.values?.eQF_EQ || 0)
week += (f?.values?.eQF_EQ || 0)
year += (f?.values?.eQF_EQ || 0)
}
})
})
}
})
// // 本周
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/data/theme`, params: {
query: {
stations: dataId.join(),
begin: moment().weekday(1).startOf('day').format('x'),
end: moment().weekday(7).endOf('day').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) {
week += (f?.values?.eQF_EQ || 0)
}
})
})
}
})
// // 今年
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(c => {
c.data?.map(f => {
if (!f.changData) {
year += (f?.values?.eQF_EQ || 0)
}
})
})
}
})
}
}
})
}
//泵站信息
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) {
setLevel(d.payload.data?.stations[0]?.data[0]?.sLiquid_level || 0)
}
})
}
})
}
// 进线柜
// 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({ value: f.id, label: f.name })
// })
// })
// })
// setCabinetList(dataId)
// setCabinetId(p.payload.data[0]?.groups[0]?.stations[0]?.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) {
// }
// })
// }
// }
// })
// }
// //泵站信息
// 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().add(-24, '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)
// }
// })
// }
// })
// }
}
})
setStations(station)
setElectro({ day: day, week: week, year: year })
}
}, [strucId])
// useEffect(async () => {
// if (pumpId) {
// await dispatch(bigScreen.axyData({
// type: 'get', url: `stations/theme/data`, params: {
// query: {
// stations: pumpId,
// startTime: moment().startOf('day').format('YYYY:MM:DD HH:mm:ss'),
// startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
// endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
// limit: 1
// }
@ -209,7 +337,7 @@ const RealTime = ({ dispatch, actions, user, module, setModule }) => {
// type: 'get', url: `stations/theme/data`, params: {
// query: {
// stations: cabinetId,
// startTime: moment().startOf('day').format('YYYY:MM:DD HH:mm:ss'),
// startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
// endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
// limit: 1
// }
@ -247,43 +375,45 @@ const RealTime = ({ dispatch, actions, user, module, setModule }) => {
return <div style={{ width: '100%', height: 'calc(100% - 200px', color: '#FFF', position: 'absolute', top: 160, left: 0 }}>
<div style={{ width: '100%', height: "100%", position: 'relative', }}>
<General setInterval={setInterval} interval={interval} />
{/* <LineBoxStatus cabinetId={cabinetId} cabinetList={cabinetList} setCabinetId={setCabinetId} cabinetOne={cabinetOne} /> */}
<SoftStart />
{/* <LevelTrend depthWater={depthWater} /> */}
<General setInterval={setInterval} stations={stations} />
<SoftStart softStartData={softStartData} />
<RunTime softStartData={softStartData} />
<AccumulateTime softStartData={softStartData} />
<Below stations={stations} level={level} />
<div style={{
width: "30%", height: 160, position: "absolute", left: '35%', top: "8%",
display: 'flex', justifyContent: 'space-between',
width: 166, position: "absolute", left: '29%', top: '4%',
}}>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
fontSize: 20, width: 160, height: 160, textAlign: 'center',
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
环境湿度</div>{depthWater[0]?.sHumidity} %
backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
}}> 本周用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.week?.toFixed(2)}</span>
</div>
<img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-week.png`} />
</div>
<div style={{
width: 166, position: "absolute", left: '59%', top: "13%",
}}>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
fontSize: 20, width: 160, height: 160, textAlign: 'center',
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
环境湿度</div>{depthWater[0]?.sTEMP || "--"}
backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
}}>今年用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.year?.toFixed(2)}</span>
</div>
<img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-year.png`} />
</div>
<div style={{
width: 166, position: "absolute", left: '31%', top: '28%',
}}>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
fontSize: 20, width: 160, height: 160, textAlign: 'center',
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
信号</div>{depthWater[0]?.CSQ4G}
backgroundImage: 'url(/assets/images/realTime/buttom-d.png)', backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
width: '100%', height: 40, lineHeight: "40px", textAlign: "center"
}}> 今日用电量:<span style={{ fontFamily: 'D-DIN-Italic', color: '#00FFF8', fontSize: 20 }}>{electro?.day?.toFixed(2)}</span>
</div>
<img style={{ width: "100%", height: 122, }} src={`/assets/images/realTime/this-day.png`} />
</div>
<img style={{ width: "44%", height: "46%", position: "absolute", left: "28%", top: "34%" }} src={`/assets/images/electrical/centre.png`} />
<img style={{ width: '20%', height: '40%', position: "absolute", left: "40%", top: '3%' }} src={`/assets/images/realTime/center.png`} />
<div className='site' style={{
display: 'flex', justifyContent: 'center', alignItems: 'center',
width: '40%', bottom: 10, position: 'absolute', left: "28%"
width: '40%', top: "calc(60% - 70px)", position: 'absolute', left: "30%"
}}>
<img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' />
<div style={{

64
web/client/src/sections/bigScreen/components/realTime/accumulateTime.js

@ -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);

448
web/client/src/sections/bigScreen/components/realTime/below.js

@ -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);

181
web/client/src/sections/bigScreen/components/realTime/general.js

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select } from 'antd';
import ReactECharts from 'echarts-for-react';
@ -6,11 +6,175 @@ import moment from 'moment'
const { Option } = Select;
const General = ({ user, setInterval, interval, }) => {
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)',
@ -42,7 +206,7 @@ const General = ({ user, setInterval, interval, }) => {
"当日用电" : interval == '本月' ?
"当月用电" : interval == '本年' ?
"当年用电" : ""}</div>
<div>{ } kwh</div>
<div>{electro?.now.toFixed(2)} kwh</div>
</div>
</div>
<div style={{ width: 150, height: 56, display: "flex" }}>
@ -52,7 +216,7 @@ const General = ({ user, setInterval, interval, }) => {
"昨日用电" : interval == '本月' ?
"上月用电" : interval == '本年' ?
"上年用电" : ""}</div>
<div>{ } kwh</div>
<div>{electro?.before?.toFixed(2)} kwh</div>
</div>
</div>
</div>
@ -61,9 +225,13 @@ const General = ({ user, setInterval, interval, }) => {
<div style={{
backgroundImage: 'url(/assets/images/realTime/specific.png)',
backgroundSize: '100% 100%', backgroundPosition: '0 0', backgroundRepeat: 'no-repeat',
width: 170, height: 50, height: 100
width: 170, height: 50, height: 100, display: "flex", flexDirection: "column", alignItems: "center"
}}>
<div></div>
<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>
@ -77,6 +245,7 @@ function mapStateToProps (state) {
return {
user: auth.user,
clientHeight: global.clientHeight,
actions: global.actions,
};
}

64
web/client/src/sections/bigScreen/components/realTime/runTime.js

@ -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);

35
web/client/src/sections/bigScreen/components/realTime/softStart.js

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Select } from 'antd';
import ReactECharts from 'echarts-for-react';
@ -6,9 +6,9 @@ import moment from 'moment'
const { Option } = Select;
const SoftStart = ({ user, setInterval, interval }) => {
const SoftStart = ({ user, softStartData }) => {
const [page, setPage] = useState(0)
@ -23,11 +23,30 @@ const SoftStart = ({ user, setInterval, interval }) => {
<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={{ margin: "20px 20px" }}>单位kwh</div>
<div style={{}}>
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" />
<img style={{ width: 40, height: 45 }} src="/assets/images/realTime/notebook.png" />
<div style={{ padding: "16px 20px" }}>单位kwh</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]?.eMotor_EQ}</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>

21
web/client/src/sections/bigScreen/containers/systemManagement.js

@ -13,12 +13,20 @@ import './style.less';
const TreeNode = Tree.TreeNode;
const SystemManagement = ({ clientHeight, user, history }) => {
const SystemManagement = ({ dispatch, actions, user, history }) => {
const { bigScreen } = actions
const [module, setModule] = useState('realTime')
const [module, setModule] = useState('basis')
const [showData, setshowData] = useState([])
useEffect(() => {
const [siteList, setSiteList] = useState([]) //站点列表
useEffect(() => {
dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => {
if (res.success) {
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name })) || [])
}
})
}, [])
return (
@ -37,9 +45,9 @@ const SystemManagement = ({ clientHeight, user, history }) => {
<div className='map' ><Amap showData={showData} /></div>
<Basis setshowData={setshowData} />
</> : ""}
{module == 'capacity' ? <Capacity /> : ""}
{module == 'electrical' ? <Electrical /> : ""}
{module == 'realTime' ? <RealTime /> : ""}
{module == 'capacity' ? <Capacity siteList={siteList} /> : ""}
{module == 'electrical' ? <Electrical siteList={siteList} /> : ""}
{module == 'realTime' ? <RealTime siteList={siteList} /> : ""}
</div>
)
}
@ -49,6 +57,7 @@ function mapStateToProps (state) {
return {
user: auth.user,
clientHeight: global.clientHeight,
actions: global.actions,
};
}

Loading…
Cancel
Save