76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
|
import React from 'react';
|
|||
|
|
import moment from 'moment';
|
|||
|
|
import { Typography } from '@material-ui/core';
|
|||
|
|
import { useDispatch } from 'react-redux';
|
|||
|
|
import { InfoPopNames } from '../../InfoPops';
|
|||
|
|
import { MailOutline } from '@material-ui/icons';
|
|||
|
|
import { skInfo } from '../../../../models/_/search';
|
|||
|
|
import config from '../../../../config';
|
|||
|
|
|
|||
|
|
function Item({ data, viewInfo, sendMessage }) {
|
|||
|
|
return (
|
|||
|
|
<div className="item">
|
|||
|
|
<div className={`header alertsk`}>
|
|||
|
|
</div>
|
|||
|
|
<div className="content">
|
|||
|
|
<div className="main">
|
|||
|
|
<div className="title cursor-pointer" onClick={() => viewInfo(data)}>{data.stnm}</div>
|
|||
|
|
<div className="span"></div>
|
|||
|
|
<div className="extra">+{(data.rz - data.fsltdz).toFixed(2)}</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="desc">
|
|||
|
|
<Typography variant="body2">
|
|||
|
|
水库汛限水位<span className="bold">{data.fsltdz}</span>m。
|
|||
|
|
</Typography>
|
|||
|
|
<Typography variant="body2">
|
|||
|
|
实时监测水位<span className="bold">{data.rz}</span>m，超出汛限水位<span className="bold red">{(data.rz - data.fsltdz).toFixed(2)}</span>m
|
|||
|
|
</Typography>
|
|||
|
|
</div>
|
|||
|
|
<div className="tail">
|
|||
|
|
<span>{moment(data.rzTm).format('YYYY-MM-DD HH:mm')}</span>
|
|||
|
|
<MailOutline className="action" onClick={() => sendMessage(data)} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ARzSk({ data }) {
|
|||
|
|
data = data || [];
|
|||
|
|
const dispatch = useDispatch();
|
|||
|
|
|
|||
|
|
const flyTo = (record) => {
|
|||
|
|
const { lgtd, lttd } = record;
|
|||
|
|
if (lgtd && lttd) {
|
|||
|
|
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealSkPop, properties: record, coordinates: [lgtd, lttd] });
|
|||
|
|
dispatch.runtime.setCameraTarget({
|
|||
|
|
center: [lgtd, lttd],
|
|||
|
|
zoom: 15,
|
|||
|
|
pitch: config.poiPitch,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const sendMessage = (record) => {
|
|||
|
|
skInfo(record).then(data => {
|
|||
|
|
if (data) {
|
|||
|
|
console.log(record, data);
|
|||
|
|
const txt = `${record.stnm}在${moment(record.rzTm).format('D日H时')}测得水位为${record.rz}米，超汛限水位(${record.fsltdz})${(record.rz - record.fsltdz).toFixed(2)}米，请做好核实防范工作。`;
|
|||
|
|
dispatch.runtime.setInfoDlg({ layerId: 'SkSmtp', properties: { stnm: data.stnm, stcd: data.stcd, personels: data.personels, txt } })
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="dppanel-shyj">
|
|||
|
|
{
|
|||
|
|
data.map(o => (
|
|||
|
|
<Item key={o.stcd} viewInfo={flyTo} sendMessage={sendMessage} data={o} />
|
|||
|
|
))
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ARzSk;
|