-
{
- map.setCenter([115.922069, 28.554867])
- map.clearInfoWindow();
- }} />
-
- 泵站名称：
- {x.name}
-
-
-
-
-
,
- document.getElementById(`contentid${x.name}`));
- }
- }, 50)
- })
- })
-
-
- if (tab == 'device') {
- const data = [
- { lng: 115.921895, lat: 28.556351, type: 'device', name: '廉租房1', kind: 'devicemarker' },
- { lng: 115.920839, lat: 28.555323, type: 'device', name: '廉租房2', kind: 'devicemarker' },
- { lng: 115.918329, lat: 28.55445, type: 'device', name: '廉租房3', kind: 'devicemarker' },
- { lng: 115.919309, lat: 28.553166, type: 'device', name: '廉租房1', kind: 'devicemarker' },
- { lng: 115.921585, lat: 28.553925, type: 'device', name: '廉租房2', kind: 'devicemarker' },
- { lng: 115.92565, lat: 28.556996, type: 'device', name: '廉租房3', kind: 'devicemarker' },
- { lng: 115.922671, lat: 28.558769, type: 'device', name: '廉租房1', kind: 'devicemarker' },
- ]
-
- data.filter(s => s.type == tab).map((x, index) => {
- var marker = new AMap.Marker({
- position: new AMap.LngLat(x.lng, x.lat),
- // 将一张图片的地址设置为 icon
- icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
- // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
- offset: new AMap.Pixel(-13, -30),
- zooms: [15, 19],
- });
- marker.setTitle(x.name);
- map.add(marker);
- })
- }
-
-
- }
-
- const renderAlarms = () => {
- if (tab == 'person' || !waterLevelAlarms.length || !trendData.length) {
- return;
- }
- const alarms = waterLevelAlarms.map(a => {
- let alarm = {
- lng: a.lng,
- lat: a.lat,
- // type: 'device',
- name: a.alarms[0]?.source.name,
- kind: 'markeralarm'
- };
- for (const t of trendData) {
- if (t?.id == a.alarms[0]?.source.id) {
- alarm.waterLevel = t.waterLevel;
- alarm.alert = t.alert;
- }
- }
- return alarm;
- })
- alarms.map((x, index) => {
- var marker = new AMap.Marker({
- position: new AMap.LngLat(x.lng, x.lat),
- // 将一张图片的地址设置为 icon
- icon: '/assets/images/homepage/communtity/' + x.kind + '.png',
- // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
- offset: new AMap.Pixel(-13, -30),
- zooms: [3, 14],
- zIndex: 13,
- });
- marker.setTitle(x.name);
- map.add(marker);
-
- let infowindow = new AMap.InfoWindow({
- isCustom: true, //使用自定义窗体
- content: `
`,
- offset: new AMap.Pixel(233, 260)
- });
-
- let alarmOk = new AMap.InfoWindow({
- isCustom: true, //使用自定义窗体
- // content: `
`,
- offset: new AMap.Pixel(233, 440)
- });
-
- marker.on('click', () => {
- let position = marker.getPosition ? marker.getPosition() : marker.getCenter();
- infowindow.open(map, position);
- // map.setCenter(position)
- setTimeout(() => {
- if (document.getElementById(`alarmcontentid${x.name}`)) {
- render(
-
{
- map.setCenter([115.922069, 28.554867])
- map.clearInfoWindow();
- }} />
-
- 点位名称
- {x.name}
-
-
- 实时水位
- {x.waterLevel}m
-
-
- 预警水位
- {x.alert}m
-
-
- 近1h雨量
- 1.5mm
-
-
- 告警
- 高风险
-
-
-
,
- document.getElementById(`alarmcontentid${x.name}`));
- }
- }, 50)
- })
- })
- }
-
- const renderLeftTop = () => {
- return
- {[{ name: '高风险区域', key: 'high', data: 3 },
- { name: '中风险区域', key: 'middle', data: 13 },
- { name: '低风险区域', key: 'low', data: 13 }].map(s => {
- return
-
-
-
{s.name}
-
{s.data}/21
-
-
- })}
-
-
- }
-
- const renderRightBottom = () => {
- return tab == 'overview' ?
-
-
-
-
预警阈值参照表
-
-
三级告警二级告警一级告警
-
- {/*
- 0m
- 5m
- 10m
- 15m
- 20m
- 25m
- 30m
-
*/}
-
-
-
:
-
{
- setTab('overview')
- props.changeTab('overview')
- }}>
-
返回实时监测
-
- }
-
- const renderWaterwarningbg = () => {
- return
-
-
-
2023-02-12 16:42:34
-
- 6月11日上午11点左右，低洼堤坝出现江水倒灌灾，需要进行救援。6月11日上午11点左右，低洼堤坝出现江水倒灌灾，需要进行救援。
-
-
-
- }
-
- const tabs = tab == 'overview' ? [
- { name: '实时监测', tab: 'overview' },
- { name: '应急抢险', tab: 'emergency' }
- ] : [
- { name: '应急物资', tab: 'yjwz', className: 'emergency_button' },
- { name: '消防救援', tab: 'xfjy', className: 'emergency_button' },
- { name: '人民武装部', tab: 'rmwzb', className: 'emergency_button' },
- { name: '医疗救援', tab: 'yljy', className: 'emergency_button' },
- { name: '应急避难场所', tab: 'yjbns', className: 'emergency_button' },
- ]
-
- return (
- <>
- {/* 延缓加载遮罩 */}
- {delay &&
-
}
-
- {/* 地图容器 */}
-
-
-
- {/* 底部按钮 */}
- {!delay && tabs.map((s, index) => {
- return <>
-
{
- setTab(s.tab)
- s.className ? props.changeEmengencyTab(s.tab) : props.changeTab(s.tab)
- }}
- >
-
-
{s.name}
- {s.className &&
{emergencyList[s.tab]?.length}
}
-
- {/* {
- tab !== 'overview' && <>
-
- } */}
-
- })
- }
-
- {/* 左上角图例 */}
- {tab == 'overview' && renderLeftTop()}
- {tab == 'emergency' && renderWaterwarningbg()}
- {renderRightBottom()}
- {/* 四周遮罩 */}
-
-
-
-
-
- );
-}
-
-export default connect()(Map);