Browse Source

水环境跳转自动登录

master
liujiangyong 1 year ago
parent
commit
1b021b64b8
  1. 27
      web/client/src/sections/auth/containers/login.js
  2. 21
      web/client/src/sections/bigScreen/components/basis.js
  3. 126
      web/client/src/sections/bigScreen/components/capacity.js
  4. 25
      web/client/src/sections/bigScreen/components/electrical.js
  5. 17
      web/client/src/sections/bigScreen/components/realTime.js

27
web/client/src/sections/auth/containers/login.js

@ -26,11 +26,16 @@ const Login = props => {
const [codCountDown, setCodeCountDown] = useState(60)
const codCountDownRef = useRef(0)
const [form] = Form.useForm();
useEffect(() => {
useEffect(() => {
// 水环境跳转自动登录
const structId = getUrlParams(window.location.search)?.structId;
if (structId) {
sessionStorage.setItem('structId', structId);
dispatch(login({ username: 'SuperAdmin', password: '123456' }));
}
}, [])
useEffect(() => {
if (user && user.authorized) {
dispatch(push('/systemManagement'));
@ -102,7 +107,7 @@ const Login = props => {
form={form}
onFinish={r => {
form.validateFields().then(r => {
dispatch(login({ username: r.username, password: r.password}));
dispatch(login({ username: r.username, password: r.password }));
})
.catch(err => {
dispatch({
@ -153,7 +158,7 @@ const Login = props => {
);
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,
@ -162,4 +167,16 @@ function mapStateToProps (state) {
}
}
export default connect(mapStateToProps)(Login);
export default connect(mapStateToProps)(Login);
function getUrlParams(url) {
if (!url) return;
let arr = url.split('?');
let params = arr[1].split('&');
let obj = {};
for (let i = 0; i < params.length; i++) {
let param = params[i].split('=');
obj[param[0]] = param[1];
}
return obj;
}

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

@ -46,8 +46,6 @@ const Basis = ({ actions, dispatch, setshowData, siteList, siteData }) => {
useEffect(async () => {
if (siteData) {
setStrucId(siteData[0]?.id)
//获取所有泵站的集水池液位
siteData?.map(async v => {
await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${v.id}/factors` })).then(async r => {
@ -125,12 +123,21 @@ const Basis = ({ actions, dispatch, setshowData, siteList, siteData }) => {
}, [siteData])
useEffect(() => {
setStrucId(siteList[0]?.value)
const autoStructId = sessionStorage.getItem('structId');
let nextStructId = siteList[0]?.value;
if (autoStructId) {
for (let i = 0; i < siteList.length; i++) {
if (autoStructId == siteList[i].value) {
nextStructId = siteList[i].value;
break;
}
}
}
setStrucId(nextStructId);
}, [siteList])
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
@ -155,16 +162,12 @@ const Basis = ({ actions, dispatch, setshowData, siteList, siteData }) => {
}
})
}
})
}
})
}
}, [strucId])
return <div className='super-screen-body'>
<div className='super-screen-card left'>
<Left_1 data={left1Data.current} />
@ -230,7 +233,7 @@ const Basis = ({ actions, dispatch, setshowData, siteList, siteData }) => {
</div >
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,

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

@ -21,12 +21,18 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
const [useTrend, setUseTrend] = useState([]) //用电趋势
useEffect(() => {
setStrucId(siteList[0]?.value)
const autoStructId = sessionStorage.getItem('structId');
let nextStructId = siteList[0]?.value;
if (autoStructId) {
for (let i = 0; i < siteList.length; i++) {
if (autoStructId == siteList[i].value) {
nextStructId = siteList[i].value;
break;
}
}
}
setStrucId(nextStructId);
}, [siteList])
useEffect(async () => {
@ -810,7 +816,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sLiquid_level?.toFixed(2) || null])||[]
data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sLiquid_level?.toFixed(2) || null]) || []
}, {
type: 'line',
name: '池前(上游)液位',
@ -818,7 +824,7 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
areaStyle: {
color: '#0e9cff26',
},
data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sGrille_level?.toFixed(2) || null])||[]
data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sGrille_level?.toFixed(2) || null]) || []
},
]
}}
@ -941,71 +947,71 @@ const Capacity = ({ actions, dispatch, siteList, }) => {
/>
</div>
<ReactECharts
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
left: 100
option={{
title: {
// text: v.name,
},
grid: {
// width: 300,
// height: 200
left: 100
},
dataZoom: [
{
type: 'slider',
showDetail: false
},
dataZoom: [
{
type: 'slider',
showDetail: false
},
{
type: 'inside',
{
type: 'inside',
},
],
tooltip: {
trigger: 'axis'
},
legend: {
data: useTrend?.map(v => v.name) || [],
right: '10%',
textStyle: {
color: '#FFF',
},
],
tooltip: {
trigger: 'axis'
},
legend: {
data: useTrend?.map(v => v.name) || [],
right: '10%',
textStyle: {
color: '#FFF',
},
xAxis: {
type: 'time',
// name: "时间",
boundaryGap: false,
minInterval: 1000 * 60,
},
xAxis: {
type: 'time',
// name: "时间",
boundaryGap: false,
minInterval: 1000 * 60,
},
yAxis: {
type: 'value',
name: "单位:kwh",
areaStyle: {
color: '#FFF',
},
yAxis: {
type: 'value',
name: "单位:kwh",
},
series: useTrend?.map(v => {
return {
type: 'line',
name: v.name,
smooth: true,
areaStyle: {
color: '#FFF',
color: '#0e9cff26',
},
},
series: useTrend?.map(v => {
return {
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_EQ?.toFixed(2)]) || []
}
}) || []
}}
notMerge={true}
lazyUpdate={true}
style={{ width: "100%", height: "100%" }}
theme={'ReactEChart'}
/>
data: v.data?.map(f => [moment(f.time).format('YYYY-MM-DD HH:mm:ss'), f.eMotor_EQ?.toFixed(2)]) || []
}
}) || []
}}
notMerge={true}
lazyUpdate={true}
style={{ width: "100%", height: "100%" }}
theme={'ReactEChart'}
/>
</div>
</div>
</div >
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,

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

@ -31,9 +31,18 @@ const Electrical = ({ dispatch, actions, siteList }) => {
const [electricityTrend, setElectricityTrend] = useState([]) //电流趋势
const [useTrend, setUseTrend] = useState([]) //用电趋势
useEffect(() => {
setStrucId(siteList[0]?.value)
const autoStructId = sessionStorage.getItem('structId');
let nextStructId = siteList[0]?.value;
if (autoStructId) {
for (let i = 0; i < siteList.length; i++) {
if (autoStructId == siteList[i].value) {
nextStructId = siteList[i].value;
break;
}
}
}
setStrucId(nextStructId);
}, [siteList])
useEffect(async () => {
@ -187,7 +196,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 setPumpOne={setPumpOne} 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} />
@ -202,7 +211,7 @@ const Electrical = ({ dispatch, actions, siteList }) => {
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
环境湿度</div>
<span style={{color: '#00FFF8',fontFamily:"D-DIN-Italic"}}>{depthWater[depthWater.length-1]?.sHumidity || "--"} %</span>
<span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{depthWater[depthWater.length - 1]?.sHumidity || "--"} %</span>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
@ -211,8 +220,8 @@ const Electrical = ({ dispatch, actions, siteList }) => {
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
环境温度
</div>
<span style={{color: '#00FFF8',fontFamily:"D-DIN-Italic"}}>{depthWater[depthWater.length-1]?.sTEMP || "--"} </span>
</div>
<span style={{ color: '#00FFF8', fontFamily: "D-DIN-Italic" }}>{depthWater[depthWater.length - 1]?.sTEMP || "--"} </span>
</div>
<div style={{
backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
@ -221,7 +230,7 @@ const Electrical = ({ dispatch, actions, siteList }) => {
}}>
<div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
信号</div>
<span style={{color: '#00FFF8',fontFamily:"D-DIN-Italic"}}>{depthWater[depthWater.length-1]?.CSQ4G || "--"}</span>
<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`} />
@ -254,7 +263,7 @@ const Electrical = ({ dispatch, actions, siteList }) => {
</div >
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,

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

@ -19,11 +19,18 @@ const RealTime = ({ dispatch, actions, user, siteList, }) => {
const [electro, setElectro] = useState({ week: 0, year: 0, day: 0 }) //用电概况
const [level, setLevel] = useState(0) //实时液位
useEffect(() => {
setStrucId(siteList[0]?.value)
const autoStructId = sessionStorage.getItem('structId');
let nextStructId = siteList[0]?.value;
if (autoStructId) {
for (let i = 0; i < siteList.length; i++) {
if (autoStructId == siteList[i].value) {
nextStructId = siteList[i].value;
break;
}
}
}
setStrucId(nextStructId);
}, [siteList])
useEffect(async () => {
@ -333,7 +340,7 @@ const RealTime = ({ dispatch, actions, user, siteList, }) => {
</div >
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,

Loading…
Cancel
Save