From c530fd2ebf41169af91838bc4dea9e0dfddfc065 Mon Sep 17 00:00:00 2001 From: wenlele Date: Wed, 26 Jul 2023 09:13:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8D=A1=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../bigScreen/components/basis/right_2.js | 10 +- .../sections/bigScreen/components/capacity.js | 167 +++++++----------- .../bigScreen/components/electrical.js | 2 +- .../components/electrity/levelTrend.js | 12 +- .../components/electrity/realTimeStatus.js | 22 ++- .../components/electrity/voltageTrend.js | 129 ++++++-------- .../bigScreen/components/realTime/below.js | 10 +- 7 files changed, 162 insertions(+), 190 deletions(-) diff --git a/web/client/src/sections/bigScreen/components/basis/right_2.js b/web/client/src/sections/bigScreen/components/basis/right_2.js index 3221da4..b735031 100644 --- a/web/client/src/sections/bigScreen/components/basis/right_2.js +++ b/web/client/src/sections/bigScreen/components/basis/right_2.js @@ -44,10 +44,10 @@ export default function Right_2 ({ depthWater }) { }, }, xAxis: { - type: 'category', - name: "时间", + type: 'time', + // name: "时间", boundaryGap: false, - data: depthWater?.map(v => moment(v.time).format('MM-DD HH:mm')) + minInterval: 1000 * 60, }, yAxis: { type: 'value', @@ -64,7 +64,7 @@ export default function Right_2 ({ depthWater }) { areaStyle: { color: '#0e9cff26', }, - data: depthWater?.map(v => (v.sLiquid_level?.toFixed(2) || 0)) + data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'),v.sLiquid_level?.toFixed(2)]) }, { type: 'line', @@ -73,7 +73,7 @@ export default function Right_2 ({ depthWater }) { areaStyle: { color: '#0e9cff26', }, - data: depthWater?.map(v => (v.sGrille_level?.toFixed(2) || 0)) + data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'),v.sGrille_level?.toFixed(2) || 0]) }, ] diff --git a/web/client/src/sections/bigScreen/components/capacity.js b/web/client/src/sections/bigScreen/components/capacity.js index c4ad142..f36154b 100644 --- a/web/client/src/sections/bigScreen/components/capacity.js +++ b/web/client/src/sections/bigScreen/components/capacity.js @@ -644,11 +644,6 @@ const Capacity = ({ actions, dispatch, siteList, }) => { distance: 2, rotate: 'tangential', }, - // title: { - // offsetCenter: [0, '-10%'], - // fontSize: 12, - // color: '#FFF', - // }, detail: { fontSize: 10, offsetCenter: [0, '-10%'], @@ -658,7 +653,6 @@ const Capacity = ({ actions, dispatch, siteList, }) => { data: [ { value: centreData?.sGrille_level?.toFixed(2) || 0, - // name: '实时液位' } ] } @@ -796,10 +790,10 @@ const Capacity = ({ actions, dispatch, siteList, }) => { }, }, xAxis: { - type: 'category', + type: 'time', // name: "时间", boundaryGap: false, - data: depthWater?.map(v => moment(v.time).format('MM-DD HH:mm')) + minInterval: 1000 * 60, }, yAxis: { type: 'value', @@ -816,7 +810,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => { areaStyle: { color: '#0e9cff26', }, - data: depthWater?.map(v => v.sLiquid_level?.toFixed(2) || 0) + data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sLiquid_level?.toFixed(2) || null])||[] }, { type: 'line', name: '池前（上游）液位', @@ -824,7 +818,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => { areaStyle: { color: '#0e9cff26', }, - data: depthWater?.map(v => v.sGrille_level?.toFixed(2) || 0) + data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sGrille_level?.toFixed(2) || null])||[] }, ] }} @@ -860,79 +854,65 @@ const Capacity = ({ actions, dispatch, siteList, }) => { options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []} /> - { - (() => { - console.log(electricityTrend); - let timeSet = new Set() - electricityTrend?.map(p => { - p.data?.map(s => { - timeSet.add(moment(s.time).format('YYYY-MM-DD HH:mm:ss')) - }) - }) - let time = [...timeSet].sort((a, b) => moment(a).isBefore(b) ? -1 : 1) + v.name) || [], - right: '10%', - textStyle: { - color: '#FFF', - }, - }, - xAxis: { - type: 'category', - // name: "时间", - boundaryGap: false, - data: time?.map(v => moment(v).format('MM-DD HH:mm')) + }, + ], + 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: time?.map(d => { - return v.data?.find(f => moment(f.time).format('YYYY-MM-DD HH:mm:ss') == d)?.eMotor_A_A || null - }) || [] - })) || [] - }} - notMerge={true} - lazyUpdate={true} - style={{ width: "100%", height: "100%" }} - theme={'ReactEChart'} - /> - })() - } + }, + 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'} + />
{ options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []} />
- {(() => { - let timeSet = new Set() - useTrend?.map(p => { - p.data?.map(s => { - timeSet.add(moment(s.time).format('YYYY-MM-DD HH:mm:ss')) - }) - }) - let time = [...timeSet].sort((a, b) => moment(a).isBefore(b) ? -1 : 1) - - return { grid: { // width: 300, // height: 200 - left:100 + left: 100 }, dataZoom: [ { @@ -986,7 +957,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => { }, { type: 'inside', - + }, ], tooltip: { @@ -1000,10 +971,10 @@ const Capacity = ({ actions, dispatch, siteList, }) => { }, }, xAxis: { - type: 'category', + type: 'time', // name: "时间", boundaryGap: false, - data: time?.map(v => moment(v).format('MM-DD HH:mm')) + minInterval: 1000 * 60, }, yAxis: { type: 'value', @@ -1020,9 +991,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => { areaStyle: { color: '#0e9cff26', }, - data: time?.map(d => { - return v.data?.find(f => moment(f.time).format('YYYY-MM-DD HH:mm:ss') == d)?.eMotor_EQ || null - }) || [] + data: v.data?.map(f => [moment(f.time).format('YYYY-MM-DD HH:mm:ss'), f.eMotor_EQ?.toFixed(2)]) || [] } }) || [] }} @@ -1031,8 +1000,6 @@ const Capacity = ({ actions, dispatch, siteList, }) => { style={{ width: "100%", height: "100%" }} theme={'ReactEChart'} /> - })()} - diff --git a/web/client/src/sections/bigScreen/components/electrical.js b/web/client/src/sections/bigScreen/components/electrical.js index f41896c..01f38db 100644 --- a/web/client/src/sections/bigScreen/components/electrical.js +++ b/web/client/src/sections/bigScreen/components/electrical.js @@ -187,7 +187,7 @@ const Electrical = ({ dispatch, actions, siteList }) => { return
- + diff --git a/web/client/src/sections/bigScreen/components/electrity/levelTrend.js b/web/client/src/sections/bigScreen/components/electrity/levelTrend.js index 16cecae..b8d8ea3 100644 --- a/web/client/src/sections/bigScreen/components/electrity/levelTrend.js +++ b/web/client/src/sections/bigScreen/components/electrity/levelTrend.js @@ -35,11 +35,11 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate dataZoom: [ { type: 'slider', - showDetail:false + showDetail: false }, { type: 'inside', - + }, ], tooltip: { @@ -53,10 +53,10 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate }, }, xAxis: { - type: 'category', + type: 'time', // name: "时间", boundaryGap: false, - data: depthWater?.map(v => moment(v.time).format('MM-DD HH:mm')) + minInterval: 1000 * 60, }, yAxis: { type: 'value', @@ -73,7 +73,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate areaStyle: { color: '#0e9cff26', }, - data: depthWater?.map(v => v.sLiquid_level?.toFixed(2) || 0) + data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sLiquid_level?.toFixed(2)]) || [] }, { type: 'line', name: '池前（上游）液位', @@ -81,7 +81,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate areaStyle: { color: '#0e9cff26', }, - data: depthWater?.map(v => v.sGrille_level?.toFixed(2) || 0) + data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sGrille_level?.toFixed(2)]) || [] }, ] }} diff --git a/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js b/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js index 3d6f7f9..8ff38d2 100644 --- a/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js +++ b/web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import { Select, Modal, Switch } from 'antd'; const RealTimeStatus = (props) => { - const { dispatch, actions, user, pumpId, pumpList, setPumpId, pumpOne, strucId, siteList } = props; + const { dispatch, actions, user, pumpId, pumpList, setPumpId, pumpOne, strucId, siteList, setPumpOne } = props; const { bigScreen } = actions; const [isModalOpen, setIsModalOpen] = useState(false); @@ -90,8 +90,26 @@ const RealTimeStatus = (props) => { })).then(res => { console.log('控制res', res) }) - } else { + setPumpOne({ ...pumpOne, sMotor_State: label === '启动控制' ? 2 : label === '停止控制' ? 1 : pumpOne.sMotor_State }) + setTimeout(() => { + dispatch(bigScreen.axyData({ + type: 'get', url: `stations/theme/data`, params: { + query: { + stations: pumpId, + startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'), + endTime: moment().format('YYYY-MM-DD HH:mm:ss'), + limit: 1 + } + } + })).then(d => { + if (d.success) { + setPumpOne(d.payload.data?.stations[0] || { data: [] }) + } + }) + }, 70 * 1000) + + } else { } }) } diff --git a/web/client/src/sections/bigScreen/components/electrity/voltageTrend.js b/web/client/src/sections/bigScreen/components/electrity/voltageTrend.js index 35136ab..3ff6c5f 100644 --- a/web/client/src/sections/bigScreen/components/electrity/voltageTrend.js +++ b/web/client/src/sections/bigScreen/components/electrity/voltageTrend.js @@ -16,7 +16,7 @@ const VoltageTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, data }) 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: '60%', minWidth: 360, position: "absolute", right: 10, top: "44%" }}>
@@ -40,78 +40,65 @@ const VoltageTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, data })
- - {(()=>{ - let timeSet = new Set() - data?.map(p => { - p.data?.map(s => { - timeSet.add(moment(s.time).format('YYYY-MM-DD HH:mm:ss')) - }) - }) - let time = [...timeSet].sort((a, b) => moment(a).isBefore(b) ? -1 : 1) + v.name) || [], - right: '10%', - textStyle: { - color: '#FFF', - }, - }, - xAxis: { - type: 'category', - // name: "时间", - boundaryGap: false, - data: time?.map(v => moment(v).format('MM-DD HH:mm')) || [] - }, - yAxis: { - type: 'value', - name: "单位：V", - areaStyle: { - color: '#FFF', - }, - }, - series: data?.map(v => ({ - type: 'line', - name: v.name, - smooth: true, - areaStyle: { - color: '#0e9cff26', - }, - data: time?.map(d => { - return v.data?.find(f => moment(f.time).format('YYYY-MM-DD HH:mm:ss') == d)?.eMotor_A_V || null - }) || [] - })) || [] + }, + ], + tooltip: { + trigger: 'axis' + }, + legend: { + data: data?.map(v => v.name) || [], + right: '10%', + textStyle: { + color: '#FFF', + }, + }, + xAxis: { + type: 'time', + // name: "时间", + boundaryGap: false, + minInterval: 1000 * 60, + }, + yAxis: { + type: 'value', + name: "单位：V", + areaStyle: { + color: '#FFF', + }, + }, + series: data?.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_V?.toFixed(2)]) + })) || [] + + }} + notMerge={true} + lazyUpdate={true} + style={{ width: "100%", height: "90%" }} + theme={'ReactEChart'} + /> - }} - notMerge={true} - lazyUpdate={true} - style={{ width: "100%", height: "90%" }} - theme={'ReactEChart'} - /> - })()} -
diff --git a/web/client/src/sections/bigScreen/components/realTime/below.js b/web/client/src/sections/bigScreen/components/realTime/below.js index a4216d4..a705e57 100644 --- a/web/client/src/sections/bigScreen/components/realTime/below.js +++ b/web/client/src/sections/bigScreen/components/realTime/below.js @@ -243,10 +243,10 @@ const Below = ({ dispatch, actions, stations, level }) => { }, }, xAxis: { - type: 'category', + type: 'time', // name: "时间", boundaryGap: false, - data: threePower?.map(v => moment(v.time).format('MM-DD HH:mm')) + minInterval: 1000 * 60, }, yAxis: { type: 'value', @@ -263,7 +263,7 @@ const Below = ({ dispatch, actions, stations, level }) => { areaStyle: { color: '#0e9cff26', }, - data: threePower?.map(v => v.A?.toFixed(2)) + data: threePower?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.A?.toFixed(2)]) }, { type: 'line', name: 'B相电流', @@ -271,7 +271,7 @@ const Below = ({ dispatch, actions, stations, level }) => { areaStyle: { color: '#0e9cff26', }, - data: threePower?.map(v => v.B?.toFixed(2)) + data: threePower?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.B?.toFixed(2)]) }, { type: 'line', name: 'C相电流', @@ -279,7 +279,7 @@ const Below = ({ dispatch, actions, stations, level }) => { areaStyle: { color: '#0e9cff26', }, - data: threePower?.map(v => v.C?.toFixed(2)) + data: threePower?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.C?.toFixed(2)]) }, ] }}