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

页面优化

master
wenlele 2 years ago
parent
c8039238f9
commit
2de5f0dfe0
9 changed files with 144 additions and 120 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. BIN
      web/client/assets/images/favicon.ico
  2. 2
      web/client/index.html
  3. 1
      web/client/src/sections/bigScreen/components/basis/right_2.js
  4. 42
      web/client/src/sections/bigScreen/components/capacity.js
  5. 26
      web/client/src/sections/bigScreen/components/electrical.js
  6. 1
      web/client/src/sections/bigScreen/components/electrity/levelTrend.js
  7. 6
      web/client/src/sections/bigScreen/components/electrity/realTimeStatus.js
  8. 127
      web/client/src/sections/bigScreen/components/electrity/voltageTrend.js
  9. 59
      web/client/src/sections/bigScreen/components/realTime/below.js

BIN
web/client/assets/images/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

2
web/client/index.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<title></title>
<link rel="shortcut icon" href="/assets/images/logo.png">
<link rel="shortcut icon" href="/assets/images/favicon.ico">
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript">
window._AMapSecurityConfig = {

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

@ -30,6 +30,7 @@ export default function Right_2 ({ depthWater }) {
},
{
type: 'inside',
showDetail:false
},
],
tooltip: {

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

@ -442,14 +442,14 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
<div>{v.data[0]?.eMotor_A_A} A</div>
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_A_A} A</div>
<div>A相电流</div>
</div>
</div>
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
<div>{v.data[0]?.eMotor_A_V} V</div>
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_A_V} V</div>
<div>A相电压</div>
</div>
</div>
@ -462,14 +462,14 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
<div>{v.data[0]?.eMotor_B_A} A</div>
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_B_A} A</div>
<div>B相电流</div>
</div>
</div>
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
<div>{v.data[0]?.eMotor_B_V} V</div>
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_B_V} V</div>
<div>B相电压</div>
</div>
</div>
@ -482,14 +482,14 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
<div>{v.data[0]?.eMotor_C_A} A</div>
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_C_A} A</div>
<div>C相电流</div>
</div>
</div>
<div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
<img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
<div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
<div>{v.data[0]?.eMotor_C_V} V</div>
<div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_C_V} V</div>
<div>C相电压</div>
</div>
</div>
@ -506,11 +506,11 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: 90, textAlign: 'end' }}>单次运行时间:</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00' }}>{v.data[0]?.dPump_T_S} min</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.dPump_T_S} min</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: 90, textAlign: 'end' }}>总积累时间:</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00' }}>{v.data[0]?.dPump_T_T} h</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.dPump_T_T} h</div>
</div>
</div>
</div>
@ -545,11 +545,12 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
position: 'absolute', top: '6%', left: 10,
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
湿度：</div>{centreData?.sHumidity} %
湿度：</div>
<span style={{ fontFamily: "D-DIN-Italic" }}>{centreData?.sHumidity}</span> %
</div>
<div style={{ color: '#00FFF8', fontSize: 20, position: 'absolute', top: '15%', left: "calc(50% - 90px)", display: 'inline-block' }}>
<span style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600, }}>
总用量：</span><span title={centreData?.daySun?.toFixed(2)} style={{ width: 50, lineHeight: "16px", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.daySun?.toFixed(2)}</span> kWh
总用量：</span><span title={centreData?.daySun?.toFixed(2)} style={{ width: 50, fontFamily: "D-DIN-Italic", lineHeight: "16px", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.daySun?.toFixed(2)}</span> kWh
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
@ -558,7 +559,8 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
position: 'absolute', top: '6%', right: -10,
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
温度：</div>{centreData?.sTEMP} ℃
温度：</div>
<sapn style={{ fontFamily: "D-DIN-Italic" }}>{centreData?.sTEMP}</sapn> ℃
</div>
<div style={{
@ -569,7 +571,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
}}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
今年用电：</div>
<span title={centreData?.day365?.toFixed(2)} style={{ width: 90, textAlign:"center",display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day365?.toFixed(2) || '--'}</span> kWh
<span title={centreData?.day365?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day365?.toFixed(2) || '--'}</span> kWh
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
@ -579,7 +581,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
}}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
当月用电：</div>
<span title={centreData?.day30?.toFixed(2)} style={{ width: 90, textAlign:"center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day30?.toFixed(2) || '--'}</span> kWh
<span title={centreData?.day30?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day30?.toFixed(2) || '--'}</span> kWh
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/oblique.png)',
@ -589,7 +591,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
}}>
<div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
当日用电：</div>
<span title={centreData?.day1?.toFixed(2)} style={{ width: 90, textAlign:"center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day1?.toFixed(2) || '--'}</span> kWh
<span title={centreData?.day1?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day1?.toFixed(2) || '--'}</span> kWh
</div>
<div style={{
@ -730,19 +732,19 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
<div style={{ width: "100%", height: 160, padding: '10px 25px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', color: 'white' }}>
<div style={{ display: 'flex' }}>
<div style={{ width: 90, textAlign: 'end' }}>当日用电:</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00' }}>{isNaN(v.today) ? v.today : v.today?.toFixed(2)} kwh</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.today) ? v.today : v.today?.toFixed(2)} kwh</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: 90, textAlign: 'end' }}>当月用电:</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00' }}>{isNaN(v.sameMonth) ? v.sameMonth : v.sameMonth?.toFixed(2)} min</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.sameMonth) ? v.sameMonth : v.sameMonth?.toFixed(2)} kwh</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: 90, textAlign: 'end' }}>今年用电:</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00' }}>{isNaN(v.thisYear) ? v.thisYear : v.thisYear?.toFixed(2)} h</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.thisYear) ? v.thisYear : v.thisYear?.toFixed(2)} kwh</div>
</div>
<div style={{ display: 'flex' }}>
<div style={{ width: 90, textAlign: 'end' }}>总用电量:</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00' }}>{v.eQF_EQ?.toFixed(2) || '--'} h</div>
<div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.eQF_EQ?.toFixed(2) || '--'} kwh</div>
</div>
</div>
</div>
@ -786,6 +788,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
},
{
type: 'inside',
showDetail: false
},
],
tooltip: {
@ -889,6 +892,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
},
{
type: 'inside',
showDetail: false
},
],
tooltip: {
@ -978,6 +982,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
grid: {
// width: 300,
// height: 200
left:100
},
dataZoom: [
{
@ -986,6 +991,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
},
{
type: 'inside',
showDetail: false
},
],
tooltip: {

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

@ -64,23 +64,6 @@ const Electrical = ({ dispatch, actions, siteList }) => {
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) {
// }
// })
// }
}
})
}
@ -218,7 +201,8 @@ const Electrical = ({ dispatch, actions, siteList }) => {
fontSize: 20, width: 160, height: 160, textAlign: 'center',
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
环境湿度：</div>{depthWater[0]?.sHumidity || "--"} %
环境湿度：</div>
<span style={{color: '#00FFF8',fontFamily:"D-DIN-Italic"}}>{depthWater[depthWater.length-1]?.sHumidity || "--"} %</span>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
@ -226,7 +210,8 @@ const Electrical = ({ dispatch, actions, siteList }) => {
fontSize: 20, width: 160, height: 160, textAlign: 'center',
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
环境温度：</div>{depthWater[0]?.sTEMP || "--"} ℃
环境温度：
<span style={{color: '#00FFF8',fontFamily:"D-DIN-Italic"}}>{depthWater[depthWater.length-1]?.sTEMP || "--"} ℃</span></div>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
@ -234,7 +219,8 @@ const Electrical = ({ dispatch, actions, siteList }) => {
fontSize: 20, width: 160, height: 160, textAlign: 'center',
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
信号：</div>{depthWater[0]?.CSQ4G || "--"}
信号：</div>
<span style={{color: '#00FFF8',fontFamily:"D-DIN-Italic"}}>{depthWater[depthWater.length-1]?.CSQ4G || "--"}</span>
</div>
</div>
<img style={{ width: "44%", height: "46%", position: "absolute", left: "28%", top: "34%" }} src={`/assets/images/electrical/centre.png`} />

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

@ -39,6 +39,7 @@ const LevelTrend = ({ user, voltagePumpId, pumpList, setVoltagePumpId, depthWate
},
{
type: 'inside',
showDetail:false
},
],
tooltip: {

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

@ -119,9 +119,9 @@ const RealTimeStatus = (props) => {
</div>
<div style={{ height: "calc(100% - 36px)", display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>
<div style={{ width: '100%', height: 116, marginTop: 20, display: 'flex', justifyContent: 'space-between', }}>
{pumpOne?.data ? <img src={`/assets/images/electrical/${[1, 3, 5].includes(pumpOne?.data[0]?.sMotor_RunMode)
? 'close' : [2, 4, 6].includes(pumpOne?.data[0]?.sMotor_RunMode)
? 'open' : pumpOne?.data[0]?.sMotor_RunMode == 7
{pumpOne?.data ? <img src={`/assets/images/electrical/${[1, 3, 5].includes(pumpOne?.data[0]?.sMotor_State)
? 'close' : [2, 4, 6].includes(pumpOne?.data[0]?.sMotor_State)
? 'open' : pumpOne?.data[0]?.sMotor_State == 7
? '故障' : '无状态'}.png`} style={{ width: 98, height: 115 }} />
: <img src={`/assets/images/electrical/open.png`} style={{ width: 98, height: 115 }} />}
<div style={{ width: 'calc(100% - 110px)', display: 'flex', flexDirection: "column", justifyContent: 'space-between' }}>

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

@ -40,63 +40,78 @@ 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%)" }}>
<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: data?.map(v => v.name) || [],
right: '10%',
textStyle: {
color: '#FFF',
},
},
xAxis: {
type: 'category',
// name: "时间",
boundaryGap: false,
data: data[0]?.data?.map(v => moment(v.time).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: v.data?.map(s => s.eMotor_A_V) || []
})) || []
{(()=>{
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)
}}
notMerge={true}
lazyUpdate={true}
style={{ width: "100%", height: "90%" }}
theme={'ReactEChart'}
/>
return <ReactECharts
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
},
dataZoom: [
{
type: 'slider',
// startValue: depthWater?.map(v=>v.time)
},
{
type: 'inside',
showDetail:false
},
],
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.time).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
}) || []
})) || []
}}
notMerge={true}
lazyUpdate={true}
style={{ width: "100%", height: "90%" }}
theme={'ReactEChart'}
/>
})()}
</div>
</div>

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

@ -30,30 +30,43 @@ const Below = ({ dispatch, actions, stations, level }) => {
})).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
}
})
})
}
let timeSet = new Set()
d.payload.data?.stations?.map(p => {
p.data?.map(s => {
timeSet.add(moment(s.time).format('YYYY-MM-DD HH:mm:ss'))
})
})
threedata.forEach((f, i) => {
if (d.payload.data?.stations?.length) {
f.A = f.A / d.payload.data?.stations?.length
f.B = f.B / d.payload.data?.stations?.length
f.C = f.C / d.payload.data?.stations?.length
let time = [...timeSet].sort((a, b) => moment(a).isBefore(b) ? -1 : 1)
time?.map(x => {
let A = []
let B = []
let C = []
d.payload.data?.stations?.map((s, index) => {
let a = s.data?.find(f => moment(f.time).format('YYYY-MM-DD HH:mm:ss') == x)?.eMotor_A_A
let b = s.data?.find(f => moment(f.time).format('YYYY-MM-DD HH:mm:ss') == x)?.eMotor_B_A
let c = s.data?.find(f => moment(f.time).format('YYYY-MM-DD HH:mm:ss') == x)?.eMotor_C_A
if (a) A.push(a)
if (b) B.push(b)
if (c) C.push(c)
})
const sum = (arr) => {
let sum = 0
arr.map(h => {
sum += h
})
return sum
}
threedata?.push({
A: A.length && (sum(A) / A.length) || null,
B: B.length && (sum(B) / B.length) || null,
C: C.length && (sum(C) / C.length) || null,
time: x
})
})
console.log(threedata);
setThreePower(threedata);
}
})
@ -216,6 +229,7 @@ const Below = ({ dispatch, actions, stations, level }) => {
},
{
type: 'inside',
showDetail: false
},
],
tooltip: {
@ -388,7 +402,8 @@ const Below = ({ dispatch, actions, stations, level }) => {
type: 'inside'
},
{
type: 'slider'
type: 'slider',
showDetail: false
}
],
tooltip: {

Write Preview
Loading…
Cancel
Save