108 lines
3.5 KiB
JavaScript
108 lines
3.5 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 config from '../../../../config';
|
||
import DpAlert from '../../../../layouts/mui/DpAlert';
|
||
import { DcpjPromise } from '../../../../models/_/dcpj';
|
||
|
||
function Item({ data, viewInfo }) {
|
||
return (
|
||
<div className="item">
|
||
<div className={`header alert${data.warngradeid === 5 ? 1 : 2}`}>
|
||
</div>
|
||
<div className="content">
|
||
<div className="main">
|
||
<div className="title" onClick={() => viewInfo(data)}>{data.adnm || '--'}</div>
|
||
<div className="span"></div>
|
||
<div className="extra">{appconsts.warnStatus_TYPE[data.warnstatusid]}</div>
|
||
</div>
|
||
<div className="desc">
|
||
<span>{data.warndesc}</span>
|
||
</div>
|
||
<div className="tail">
|
||
<span>{data.warnstm.substr(0, 'yyyy-mm-dd hh:mm'.length)}</span>
|
||
<a onClick={() => viewInfo(data, 'danad')} style={{ textAlign: 'right' }}>危险区</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|
||
function ShYj({ data }) {
|
||
|
||
const [hisdata, sethisdata] = useState();
|
||
|
||
useEffect(() => {
|
||
if (!data) {
|
||
return;
|
||
}
|
||
|
||
if (data.length === 0) {
|
||
httpget(apiurl.shyj.find, { adcd: config.SHYJ_ADCD, page: 1, size: 10, warnstatusid: 30 })
|
||
.then(({ data }) => sethisdata(data.list || []))
|
||
}
|
||
}, [data?.length]);
|
||
|
||
const dispatch = useDispatch();
|
||
const viewInfo = useCallback((record, type) => {
|
||
if (type === 'danad') {
|
||
const adcd = record?.adcd?.replace(/([0]{3})*$/, '');
|
||
if (adcd) {
|
||
Promise.all([
|
||
DcpjPromise.danad.get(),
|
||
DcpjPromise.transfer.get(),
|
||
DcpjPromise.placement.get(),
|
||
]).then(([danads, transfers, placements]) => {
|
||
const highlights = [
|
||
...((danads || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'danad' }))),
|
||
...((transfers || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'transfer' }))),
|
||
...((placements || []).filter(o => o?.ADCD?.startsWith(adcd)).map(o => ({ ...o, type: 'placement' })))
|
||
];
|
||
if (highlights.length > 0) {
|
||
dispatch.map.openHighlights({
|
||
title: `${record.adnm}危险区/转移路线/安置点`,
|
||
records: highlights.map(o => ({
|
||
id: o.PID,
|
||
adcd: o.ADCD,
|
||
lgtd: o.lgtd,
|
||
lttd: o.lttd,
|
||
name: o.NAME,
|
||
type: o.type,
|
||
}))
|
||
})
|
||
}
|
||
dispatch.map.highlightFeatures(highlights.map(o => ({
|
||
type: o.type,
|
||
props: o,
|
||
fill: 'rgb(239, 164, 114)',
|
||
stroke: o.type === 'danad' ? 'rgb(239, 164, 114)' : '#f6f082'
|
||
})));
|
||
});
|
||
}
|
||
} else {
|
||
dispatch.runtime.setInfoDlg({ layerId: 'ShWarn', properties: record })
|
||
}
|
||
}, [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.warnid} viewInfo={viewInfo} data={o} />
|
||
))
|
||
}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default React.memo(ShYj);
|