free-sun
/
PumpStation
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

加载卡优化

master
wenlele 2 years ago
parent
17051e64a8
commit
c530fd2ebf
7 changed files with 162 additions and 190 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      web/client/src/sections/bigScreen/components/basis/right_2.js
  2. 167
      web/client/src/sections/bigScreen/components/capacity.js
  3. 2
      web/client/src/sections/bigScreen/components/electrical.js
  4. 12
      web/client/src/sections/bigScreen/components/electrity/levelTrend.js
  5. 22
      web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js
  6. 129
      web/client/src/sections/bigScreen/components/electrity/voltageTrend.js
  7. 10
      web/client/src/sections/bigScreen/components/realTime/below.js

10
web/client/src/sections/bigScreen/components/basis/right_2.js
View File

@ -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])
},
]

167
web/client/src/sections/bigScreen/components/capacity.js
View File

@ -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 })) || []}
/>
</div>
{
(() => {
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)
<ReactECharts
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
},
dataZoom: [
{
type: 'slider',
showDetail: false
},
{
type: 'inside',
return <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: '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'}
/>
</div>
<div style={{
@ -960,16 +940,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
/>
</div>
{(() => {
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 <ReactECharts
<ReactECharts
option={{
title: {
// text: v.name,
@ -977,7 +948,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
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'}
/>
})()}
</div>
</div>
</div >

2
web/client/src/sections/bigScreen/components/electrical.js
View File

@ -187,7 +187,7 @@ const Electrical = ({ dispatch, actions, siteList }) => {
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', }}>
<RealTimeStatus pumpId={pumpId} pumpList={pumpList} setPumpId={setPumpId} pumpOne={pumpOne} strucId={strucId} siteList={siteList} />
<RealTimeStatus setPumpOne={setPumpOne} pumpId={pumpId} pumpList={pumpList} setPumpId={setPumpId} pumpOne={pumpOne} strucId={strucId} siteList={siteList} />
<LineBoxStatus cabinetId={cabinetId} cabinetList={cabinetList} setCabinetId={setCabinetId} cabinetOne={cabinetOne} />
<VoltageTrend pumpList={pumpList} voltagePumpId={voltagePumpId} setVoltagePumpId={setVoltagePumpId} data={voltagepump} />
<LevelTrend depthWater={depthWater} />

12
web/client/src/sections/bigScreen/components/electrity/levelTrend.js
View File

@ -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)]) || []
},
]
}}

22
web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js
View File

@ -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 {
}
})
}

129
web/client/src/sections/bigScreen/components/electrity/voltageTrend.js
View File

@ -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%"
}}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
@ -40,78 +40,65 @@ const VoltageTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, data })
</Select>
</div>
<div style={{ width: '100%', height: 'calc(100% - 46px)', marginTop: 10, backgroundImage: "linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)" }}>
{(()=>{
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)
<ReactECharts
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
},
dataZoom: [
{
type: 'slider',
showDetail: false
},
{
type: 'inside',
return <ReactECharts
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
},
dataZoom: [
{
type: 'slider',
showDetail:false
},
{
type: 'inside',
},
],
tooltip: {
trigger: 'axis'
},
legend: {
data: data?.map(v => 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'}
/>
})()}
</div>
</div>

10
web/client/src/sections/bigScreen/components/realTime/below.js
View File

@ -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)])
},
]
}}

Write Preview
Loading…
Cancel
Save