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

能耗趋势图

master
wenlele 1 year ago
parent
dce88b7aa4
commit
308c69f04a
4 changed files with 327 additions and 72 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. 5
      web/client/src/sections/bigScreen/components/basis.js
  2. 29
      web/client/src/sections/bigScreen/components/basis/right_1.js
  3. 363
      web/client/src/sections/bigScreen/components/capacity.js
  4. 2
      web/client/src/sections/bigScreen/containers/systemManagement.js

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

@ -30,7 +30,7 @@ const Basis = ({ actions, dispatch, user, setshowData }) => {
useEffect(async () => {
await dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(async res => {
if (res.success) {
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name, latitude: v.latitude, longitude: v.longitude })) || [])
setSiteList(res.payload.data?.map(v => ({ value: v.id, label: v.name })) || [])
setshowData(res.payload.data?.map(v => ({ name: v.name, lat: v.latitude, lng: v.longitude })) || [])
setStrucId(res.payload.data[0]?.id)
for (let key in POWER_STATIONS) {
@ -117,6 +117,7 @@ const Basis = ({ actions, dispatch, user, setshowData }) => {
useEffect(async () => {
if (strucId) {
await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${strucId}/factors` })).then(async r => {
//泵站信息
let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
@ -197,7 +198,7 @@ const Basis = ({ actions, dispatch, user, setshowData }) => {
</div >
<div className='super-screen-card right'>
<Right_1 data={information} />
<Right_1 data={information} siteList={siteList} strucId={strucId} setStrucId={setStrucId} setInformation={setInformation} POWER_STATIONS={POWER_STATIONS} />
<Right_2 depthWater={depthWater} />
</div>
<div style={{ width: '40%', height: 30, display: 'flex', justifyContent: 'space-around', position: 'absolute', left: 'calc(30%)', bottom: 30, zIndex: 7 }}>

29
web/client/src/sections/bigScreen/components/basis/right_1.js
View File

@ -4,30 +4,23 @@ import { Select } from 'antd';
import '../basis.less';
import './right_1.less';
export default function Right_1 ({ data }) {
export default function Right_1 ({ data, siteList, strucId, setStrucId, POWER_STATIONS, setInformation }) {
const renderSelect = () => {
return <Select
className='bigscreen-select'
bordered={false}
style={{ width: 120 }}
defaultValue='雄溪站'
options={[
{
value: '雄溪站',
label: '雄溪站',
}, {
value: '雄溪站站站',
label: '雄溪站站站',
}, {
value: 'disabled',
disabled: true,
label: 'Disabled',
}, {
value: 'Yiminghe',
label: 'yimingheyimingheyiminghe',
},
]}
value={strucId}
options={siteList}
onSelect={(v, option) => {
setStrucId(v);
for (let key in POWER_STATIONS) {
if (POWER_STATIONS[key]?.name == option?.name) {
setInformation(POWER_STATIONS[key])
}
}
}}
/>
}

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

@ -11,10 +11,18 @@ const Capacity = ({ actions, dispatch, user, }) => {
const [pageLeft, setPageLeft] = useState(0) //左边翻页
const [pageRight, setPageRight] = useState(0) //左边翻页
const [siteList, setSiteList] = useState([]) //站点列表
const [pumpList, setPumpList] = useState([]) //水泵列表
const [strucId, setStrucId] = useState() //站点ID
const [pumpId, setPumpId] = useState() //水泵id
const [usePumpId, setUsePumpId] = useState() //水泵id
const [pumpData, setPumpData] = useState([]) //水泵数据
const [cabinetData, setCabinetData] = useState([]) //进线柜数据
const [centreData, setCentreData] = useState({}) //中间数据
const [depthWater, setDepthWater] = useState([]) //液位趋势
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
const [useTrend, setUseTrend] = useState([]) //用电趋势
useEffect(() => {
dispatch(bigScreen.axyData({ type: 'get', url: `organizations/{orgId}/structures` })).then(res => {
@ -49,6 +57,9 @@ const Capacity = ({ actions, dispatch, user, }) => {
})
})
})
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)
if (dataId.length) {
let sameDay //当天最新一条数据
let beforeDay //前一天最新一条数据
@ -225,7 +236,7 @@ const Capacity = ({ actions, dispatch, user, }) => {
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) : '--',
@ -250,18 +261,11 @@ const Capacity = ({ actions, dispatch, user, }) => {
params: { query: { factorId: informationId } }
})).then(async p => {
if (p.success) {
let dataId = []
p.payload.data?.map(v => {
v.groups?.map(s => {
s.stations?.map(f => {
dataId.push(f.id)
})
})
})
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: dataId.join(),
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
@ -274,6 +278,22 @@ const Capacity = ({ actions, dispatch, user, }) => {
sun.sGrille_level = d.payload.data?.stations[0]?.data[0]?.sGrille_level
}
})
// 液位趋势
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
startTime: moment().add(-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)
}
})
}
})
@ -311,6 +331,61 @@ const Capacity = ({ actions, dispatch, user, }) => {
setCentreData(sun)
}, [strucId])
useEffect(async () => {
if (pumpId) {
//电流趋势
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: pumpId,
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) {
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)
}
})
}
}, [pumpId])
useEffect(async () => {
if (usePumpId) {
//电流趋势
await dispatch(bigScreen.axyData({
type: 'get', url: `stations/theme/data`, params: {
query: {
stations: usePumpId,
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) {
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)
}
})
}
}, [usePumpId])
@ -339,8 +414,8 @@ const Capacity = ({ actions, dispatch, user, }) => {
}}>
<div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF' }}>{v.name}</div>
<div style={{
width: 50, height: 26, background: '#a7110033', border: '1px solid #A71100', cursor: "pointer",
borderRadius: 4, color: ' #E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
width: 50, height: 26, background: [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00434180' : '#a7110033', border: `1px solid ${[2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00434180' : '#A71100'}`, cursor: "pointer",
borderRadius: 4, color: [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
}}>{[1, 3, 5].includes(v.data[0]?.sMotor_RunMode) ? '停止' : [2, 4, 6].includes(v.data[0]?.sMotor_RunMode) ? '运行' : v.data[0]?.sMotor_RunMode == 7 ? '故障' : '无状态'}</div>
</div>
<div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}>
@ -561,8 +636,8 @@ const Capacity = ({ actions, dispatch, user, }) => {
}}>
<div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF' }}>{v.name}</div>
<div style={{
width: 50, height: 26, background: '#a7110033', border: '1px solid #A71100', cursor: "pointer",
borderRadius: 4, color: ' #E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
width: 50, height: 26, background: v.sQF_CLOSING ? "#00434180" : '#a7110033', border: `1px solid ${v.sQF_CLOSING ? "#00FFF8" : '#A71100'}`, cursor: "pointer",
borderRadius: 4, color: v.sQF_CLOSING ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
}}>{v.sQF_CLOSING ? '合闸' : '分闸'}</div>
</div>
<div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}>
@ -607,50 +682,236 @@ const Capacity = ({ actions, dispatch, user, }) => {
backgroundRepeat: 'no-repeat',
width: '31%', height: '100%',
}}>
<div className='site' style={{ display: 'flex' }}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>液位趋势</div>
<Select
showSearch
placeholder="请选择站点"
value={strucId}
style={{ width: 155,height:20 }}
optionFilterProp="children"
onChange={() => {
</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: ['集水池液位', '池前（上游）液位'],
right: '10%',
textStyle: {
color: '#FFF',
},
},
xAxis: {
type: 'category',
// name: "时间",
boundaryGap: false,
data: depthWater?.map(v => moment(v.time).format('MM-DD HH:mm'))
},
yAxis: {
type: 'value',
name: "单位：M",
areaStyle: {
color: '#FFF',
},
},
series: [
{
type: 'line',
name: '集水池液位',
smooth: true,
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sLiquid_level)
}, {
type: 'line',
name: '池前（上游）液位',
smooth: true,
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => v.sGrille_level)
},
]
}}
onSearch={() => {
notMerge={true}
lazyUpdate={true}
style={{ width: "100%", height: "90%" }}
theme={'ReactEChart'}
/>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat',
width: '31%', height: '100%',
}}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>电流趋势</div>
<Select
className='bigscreen-select'
bordered={false}
value={pumpId}
optionFilterProp="children"
onSelect={v => {
setPumpId(v)
}}
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
/>
</div>
<ReactECharts
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
},
dataZoom: [
{
type: 'slider',
// startValue: depthWater?.map(v=>v.time)
},
{
type: 'inside',
},
],
tooltip: {
trigger: 'axis'
},
legend: {
// data: ['集水池液位',],
right: '10%',
textStyle: {
color: '#FFF',
},
},
xAxis: {
type: 'category',
// name: "时间",
boundaryGap: false,
data: electricityTrend?.map(v => moment(v.time).format('MM-DD HH:mm'))
},
yAxis: {
type: 'value',
name: "单位：M",
areaStyle: {
color: '#FFF',
},
},
series: [
{
type: 'line',
// name: '集水池液位',
smooth: true,
areaStyle: {
color: '#0e9cff26',
},
data: electricityTrend?.map(v => v.eMotor_A_A)
}
]
}}
filterOption={(input, option) =>
(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
}
options={siteList}
notMerge={true}
lazyUpdate={true}
style={{ width: "100%", height: "90%" }}
theme={'ReactEChart'}
/>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat',
width: '31%', height: '100%',
}}>
<div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>用电趋势</div>
<Select
className='bigscreen-select'
bordered={false}
value={usePumpId}
optionFilterProp="children"
onSelect={v => {
setUsePumpId(v)
}}
options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
/>
</div>
<ReactECharts
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
},
dataZoom: [
{
type: 'slider',
// startValue: depthWater?.map(v=>v.time)
},
{
type: 'inside',
},
],
tooltip: {
trigger: 'axis'
},
legend: {
// data: ['集水池液位',],
right: '10%',
textStyle: {
color: '#FFF',
},
},
xAxis: {
type: 'category',
// name: "时间",
boundaryGap: false,
data: useTrend?.map(v => moment(v.time).format('MM-DD HH:mm'))
},
yAxis: {
type: 'value',
name: "单位：M",
areaStyle: {
color: '#FFF',
},
},
series: [
{
type: 'line',
// name: '集水池液位',
smooth: true,
areaStyle: {
color: '#0e9cff26',
},
data: useTrend?.map(v => v.value)
}
]
}}
notMerge={true}
lazyUpdate={true}
style={{ width: "100%", height: "90%" }}
theme={'ReactEChart'}
/>
</div>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat',
width: '31%', height: '100%',
}}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>电流趋势</div>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
backgroundSize: '100% 36px',
backgroundPosition: '0 0',
backgroundRepeat: 'no-repeat',
width: '31%', height: '100%',
}}>
<div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20 }}>用电趋势</div>
</div>
</div>
</div >
}

2
web/client/src/sections/bigScreen/containers/systemManagement.js
View File

@ -15,7 +15,7 @@ const TreeNode = Tree.TreeNode;
const SystemManagement = ({ clientHeight, user, history }) => {
const [module, setModule] = useState('basis')
const [module, setModule] = useState('capacity')
const [showData, setshowData] = useState([])
useEffect(() => {

Write Preview
Loading…
Cancel
Save