106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
|
import React, { useCallback, useEffect, useState } from 'react';
|
|||
|
|
import './ShYj.less';
|
|||
|
|
import appconsts from '../../../../models/appconsts';
|
|||
|
|
import { useDispatch } from 'react-redux';
|
|||
|
|
import apiurl from '../../../../models/apiurl';
|
|||
|
|
import { httpget } from '../../../../utils/request';
|
|||
|
|
import DpAlert from '../../../../layouts/mui/DpAlert';
|
|||
|
|
import moment from 'moment';
|
|||
|
|
import { HDRealPromise } from '../../../../models/_/real';
|
|||
|
|
import { InfoPopNames } from '../../InfoPops';
|
|||
|
|
import { hdyjLatestClosed } from '../../../../models/_/hdyj';
|
|||
|
|
import config from '../../../../config';
|
|||
|
|
|
|||
|
|
|
|||
|
|
function Item({ data, viewInfo, flyTo }) {
|
|||
|
|
const tm1 = moment(data.exptm).format('YYYY-MM-DD HH:mm');
|
|||
|
|
const tm2 = moment(data.tm).format('YYYY-MM-DD HH:mm');
|
|||
|
|
|
|||
|
|
const rz = data.rz;
|
|||
|
|
const brz = data[appconsts.stWarnLevelKey[data.level]];
|
|||
|
|
const arz = typeof brz === 'number' ? (rz - brz).toFixed(2) : '-';
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="item">
|
|||
|
|
<div className={`header level${data.level}`}>
|
|||
|
|
</div>
|
|||
|
|
<div className="content">
|
|||
|
|
<div className="main">
|
|||
|
|
<div className="title">
|
|||
|
|
<span style={{ cursor: 'pointer' }} onClick={() => flyTo(data)}>{data.stnm}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="span"></div>
|
|||
|
|
<div className="extra">{appconsts.stWarnStatus[data.status]}</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="desc">
|
|||
|
|
<span>{`报警水位${rz}m，测站${appconsts.stWarnLevel[data.level]}为${brz ?? '-'}m，超${arz || '-'}m`}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="tail">
|
|||
|
|
<span>报警: {tm1}</span>
|
|||
|
|
{
|
|||
|
|
tm2 !== tm1 ? (
|
|||
|
|
<span>更新: {tm2}</span>
|
|||
|
|
) : null
|
|||
|
|
}
|
|||
|
|
<a style={{ cursor: 'pointer' }} onClick={() => viewInfo(data)}>处理</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function Hdyj({ data }) {
|
|||
|
|
|
|||
|
|
const [hisdata, sethisdata] = useState();
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!data) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (data.length === 0) {
|
|||
|
|
hdyjLatestClosed().then(data => {
|
|||
|
|
sethisdata(data || [])
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, [data?.length]);
|
|||
|
|
|
|||
|
|
const dispatch = useDispatch();
|
|||
|
|
const viewInfo = useCallback((record) => {
|
|||
|
|
dispatch.runtime.setInfoDlg({ layerId: 'StWarnRecord', properties: record })
|
|||
|
|
}, [dispatch]);
|
|||
|
|
|
|||
|
|
|
|||
|
|
const flyTo = useCallback(async ({ stcd, source }) => {
|
|||
|
|
const list = await HDRealPromise.get() || [];
|
|||
|
|
const record = list.find(o => o.stcd === stcd) || {};
|
|||
|
|
const { lgtd, lttd } = record;
|
|||
|
|
if (lgtd && lttd) {
|
|||
|
|
dispatch.runtime.setFeaturePop({ type: InfoPopNames.RealHDPop, properties: record, coordinates: [lgtd, lttd] });
|
|||
|
|
dispatch.runtime.setCameraTarget({
|
|||
|
|
center: [lgtd, lttd],
|
|||
|
|
zoom: 15,
|
|||
|
|
pitch: config.poiPitch,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}, [dispatch]);
|
|||
|
|
|
|||
|
|
const showdata = hisdata?.length > 0 ? hisdata : (data || []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="dppanel-shyj">
|
|||
|
|
{
|
|||
|
|
hisdata?.length > 0 && <DpAlert severity="info">当前无预警，显示最新10条已关闭预警</DpAlert>
|
|||
|
|
}
|
|||
|
|
{
|
|||
|
|
showdata.map(o => (
|
|||
|
|
<Item key={o.id} flyTo={flyTo} viewInfo={viewInfo} data={o} />
|
|||
|
|
))
|
|||
|
|
}
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default React.memo(Hdyj);
|