140 lines
4.0 KiB
JavaScript
140 lines
4.0 KiB
JavaScript
import { Button, makeStyles } from '@material-ui/core';
|
|
import { Email } from '@material-ui/icons';
|
|
import React from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import config from '../../../../config';
|
|
import { bxstr, drpRealGet, skRealGet } from '../../../../models/_/real';
|
|
import { strNumber } from '../../../../utils/tools';
|
|
import { InfoPopNames } from '../../InfoPops';
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
padding: '1.5rem 0.75rem 0.75rem 0.75rem',
|
|
color: 'rgb(224, 246, 247)',
|
|
fontSize: '0.9rem',
|
|
lineHeight: '1.8rem',
|
|
},
|
|
|
|
titleDate: {
|
|
fontSize: '1.2rem',
|
|
margin: '0.2rem',
|
|
color: '#00deff',
|
|
},
|
|
|
|
number: {
|
|
color: '#ffd220',
|
|
fontSize: '1.2rem',
|
|
margin: '0.2rem',
|
|
},
|
|
|
|
sttype: {
|
|
color: '#92f0ff',
|
|
},
|
|
stname: {
|
|
fontWeight: 'bold',
|
|
fontSize: '1rem',
|
|
margin: '0.25rem',
|
|
cursor: 'pointer'
|
|
},
|
|
|
|
grid: {
|
|
display: 'flex',
|
|
justifyContent: 'space-around',
|
|
marginBottom: '1rem',
|
|
textAlign: 'center',
|
|
|
|
'& .value': {
|
|
fontSize: '1.8rem',
|
|
color: '#6fe9fd',
|
|
lineHeight: '2rem'
|
|
},
|
|
|
|
|
|
'& .key': {
|
|
fontSize: '0.8rem',
|
|
color: '#aaa',
|
|
},
|
|
},
|
|
|
|
action: {
|
|
textAlign: 'right',
|
|
color: '#fff',
|
|
}
|
|
})
|
|
|
|
export default function OverallContent({ data }) {
|
|
const classes = useStyles();
|
|
const dispatch = useDispatch();
|
|
|
|
const {
|
|
drpInfo,
|
|
skInfo,
|
|
tm1, tm2,
|
|
} = data || {};
|
|
|
|
const { h24, h1, h3, h6 } = drpInfo || {};
|
|
|
|
const _showRecord = (record, poptype) => {
|
|
if (record) {
|
|
const { lgtd, lttd } = record;
|
|
if (lgtd && lttd) {
|
|
dispatch.runtime.setFeaturePop({ type: poptype, properties: record, coordinates: [lgtd, lttd] });
|
|
dispatch.runtime.setCameraTarget({
|
|
center: [lgtd, lttd],
|
|
zoom: 15,
|
|
pitch: config.poiPitch,
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
const showRecord = (obj) => {
|
|
if (!obj) {
|
|
return;
|
|
}
|
|
|
|
const { type } = obj;
|
|
if (type === 'sk') {
|
|
skRealGet(obj.stcd).then((record) => {
|
|
_showRecord(record, InfoPopNames.RealSkPop)
|
|
})
|
|
} else {
|
|
drpRealGet(obj).then((record) => {
|
|
_showRecord(record, InfoPopNames.RealDrpPop)
|
|
});
|
|
}
|
|
}
|
|
|
|
const doBx = () => {
|
|
bxstr().then((data) => {
|
|
dispatch.runtime.setInfoDlg({
|
|
layerId: 'OverallSmtp',
|
|
properties: { txt: data }
|
|
})
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<div className={classes.grid} style={{flexWrap:'wrap',justifyContent:'center',columnGap:10,alignItems:'center'}}>
|
|
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|
<div className="value" style={{ color: '#5ecd45' }}>1.12<span style={{fontSize:14}}>亿m³</span><span style={{ color: '#ce010e',fontSize:14,marginLeft:10 }}>同比↑15%</span></div>
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>当日总引水量</div>
|
|
</div>
|
|
<div style={{ padding: "18px 25px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|
<div className="value" style={{ color: '#5ecd45' }}>92<span style={{fontSize:14}}>%</span><span style={{ color: '#ce010e',fontSize:14,marginLeft:10 }}>异常设备3台</span></div>
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>量测设备在线率</div>
|
|
</div>
|
|
{/* <div style={{ padding: "15px 33px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|
<div className="value" style={{ cursor: 'pointer', color: '#5ecd45' }}>9876<span style={{fontSize:14}}>m³</span></div>
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>累计用水量</div>
|
|
</div>
|
|
<div style={{ padding:"15px 30px", background: "linear-gradient(to bottom, #001529, #003366)" }}>
|
|
<div className="value" style={{ color: '#5ecd45' }}>85.6<span style={{fontSize:14}}>%</span></div>
|
|
<div className="key" style={{ color: '#fff', fontSize: 16 }}>渠系利用率</div>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|