121 lines
3.6 KiB
JavaScript
121 lines
3.6 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 = [{
|
||
"stcd": "716129061",
|
||
"type": "sk",
|
||
"hasRz": true,
|
||
"stnm": "仰天窝水库",
|
||
"adcd": "421181201000",
|
||
"wscd": null,
|
||
"importancy": 0,
|
||
"lgtd": 115.106667,
|
||
"lttd": 31.126389,
|
||
"elev": 0,
|
||
"damel": 325.08,
|
||
"dsflz": 324.18,
|
||
"fsltdz": 323.5,
|
||
"ddz": 319.5,
|
||
"zcxsw": 323.5,
|
||
"drpTm": "2025-04-11T05:00:00.000Z",
|
||
"today": 0,
|
||
"h1": 0,
|
||
"h3": 0,
|
||
"h6": 0,
|
||
"h12": 0,
|
||
"h24": 0,
|
||
"h48": 0,
|
||
"drpState": 2,
|
||
"rz": 328.16,
|
||
"w": 0.132,
|
||
"a_fsltdz": 4.660000000000025,
|
||
"rzTm": "2025-04-11T05:00:00.000Z",
|
||
"rzWarning": 1,
|
||
"rzState": 2,
|
||
"pic": [
|
||
{
|
||
"stcd": "716129061",
|
||
"tm": "2023-03-12T06:05:00.000Z",
|
||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129061/20230312140500.jpg"
|
||
},
|
||
{
|
||
"stcd": "716129061",
|
||
"tm": "2023-03-12T07:25:00.000Z",
|
||
"url": "http://223.75.53.106:8891/skjgimages/2023/0312/716129062/20230312152500.jpg"
|
||
}
|
||
],
|
||
"aRz": 4.66,
|
||
"strarz": "4.66"
|
||
}];
|
||
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;
|