|
@ -1,6 +1,7 @@ |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import React, { useEffect, useState } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { render } from 'react-dom'; |
|
|
import { render } from 'react-dom'; |
|
|
|
|
|
import { Tooltip } from 'antd'; |
|
|
import { data as heatmapData } from './data' |
|
|
import { data as heatmapData } from './data' |
|
|
import { SHUI_ZHAN } from '../constants/water'; |
|
|
import { SHUI_ZHAN } from '../constants/water'; |
|
|
import './gis.less' |
|
|
import './gis.less' |
|
@ -340,21 +341,36 @@ function Map(props) { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const renderLeftTop = () => { |
|
|
const renderLeftTop = () => { |
|
|
|
|
|
let hCount = 0, mCount = 0, lCount = 0; |
|
|
|
|
|
for (const a of waterLevelAlarms) { |
|
|
|
|
|
switch (a.alarms[0].level) { |
|
|
|
|
|
case 1: |
|
|
|
|
|
hCount += 1 |
|
|
|
|
|
break; |
|
|
|
|
|
case 2: |
|
|
|
|
|
mCount += 1 |
|
|
|
|
|
break; |
|
|
|
|
|
case 3: |
|
|
|
|
|
lCount += 1 |
|
|
|
|
|
break; |
|
|
|
|
|
default: |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
return <div className='water_gis_home_left'> |
|
|
return <div className='water_gis_home_left'> |
|
|
{[{ name: '高风险区域', key: 'high', data: 3 }, |
|
|
{[{ name: '高风险区域', key: 'high', data: hCount }, |
|
|
{ name: '中风险区域', key: 'middle', data: 13 }, |
|
|
{ name: '中风险区域', key: 'middle', data: mCount }, |
|
|
{ name: '低风险区域', key: 'low', data: 13 }].map(s => { |
|
|
{ name: '低风险区域', key: 'low', data: lCount }].map(s => { |
|
|
return <div className='left_item'> |
|
|
return <div className='left_item'> |
|
|
<div className='gis_item_left'> |
|
|
<div className='gis_item_left'> |
|
|
<div className={`${s.key}_risk`} /> |
|
|
<div className={`${s.key}_risk`} /> |
|
|
</div> |
|
|
</div> |
|
|
<div className='gis_item_right'> |
|
|
<div className='gis_item_right'> |
|
|
<div>{s.name}</div> |
|
|
<div>{s.name}</div> |
|
|
<div><span className={`${s.key}_text`}>{s.data}</span>/21</div> |
|
|
<div><span className={`${s.key}_text`}>{s.data}</span>/{trendData.length}</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
})} |
|
|
})} |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
@ -392,16 +408,18 @@ function Map(props) { |
|
|
</div> |
|
|
</div> |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const renderWaterwarningbg = () => { |
|
|
const renderWaterwarningbg = (alarm) => { |
|
|
return <div className='waterwarningbg'> |
|
|
return <div className='waterwarningbg'> |
|
|
<div className='_alarm_column1'> |
|
|
<div className='_alarm_column1'> |
|
|
<div>城区沿江水涝<div className='_state'>未启动</div></div> |
|
|
<div><Tooltip title={alarm.structureName}><div className='_name'>{alarm.structureName}</div></Tooltip> |
|
|
<div style={{ color: 'rgba(76, 161, 255, 1)', fontSize: 14 }}>[自然灾害事故]</div> |
|
|
<div className='_state'>未启动</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div style={{ color: 'rgba(76, 161, 255, 1)', fontSize: 14 }}>[{alarm.alarms[0]?.content}]</div> |
|
|
</div> |
|
|
</div> |
|
|
<div className='_alarm_column2'> |
|
|
<div className='_alarm_column2'> |
|
|
<div style={{ textAlign: 'right', color: 'rgba(76, 161, 255, 1)' }}>2023-02-12 16:42:34</div> |
|
|
<div style={{ textAlign: 'right', color: 'rgba(76, 161, 255, 1)' }}>{alarm.alarms[0]?.startTime}</div> |
|
|
<div className='_text_info'> |
|
|
<div className='_text_info'> |
|
|
6月11日上午11点左右,低洼堤坝出现江水倒灌灾,需要进行救援。6月11日上午11点左右,低洼堤坝出现江水倒灌灾,需要进行救援。 |
|
|
{alarm.alarms[0]?.details?.content} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@ -580,7 +598,7 @@ function Map(props) { |
|
|
|
|
|
|
|
|
{/* 左上角图例 */} |
|
|
{/* 左上角图例 */} |
|
|
{tab == 'overview' && renderLeftTop()} |
|
|
{tab == 'overview' && renderLeftTop()} |
|
|
{tab == 'emergency' && renderWaterwarningbg()} |
|
|
{tab == 'emergency' && waterLevelAlarms.length && renderWaterwarningbg(waterLevelAlarms[0])} |
|
|
{renderRightBottom()} |
|
|
{renderRightBottom()} |
|
|
{/* 四周遮罩 */} |
|
|
{/* 四周遮罩 */} |
|
|
<div className='gis-left'></div> |
|
|
<div className='gis-left'></div> |
|
|