tsg-web/src/views/Home/MapCtrl/Pops/YiFaZaiHaiDian.js

54 lines
2.0 KiB
JavaScript
Raw Normal View History

2024-09-20 15:02:50 +08:00
import React, { useEffect, useState } from 'react';
import { Descriptions } from 'antd';
import moment from "moment"
import {CloseOutlined} from '@ant-design/icons';
import genDamImage from '../../../../components/DamGraph/DamImage';
import './TangYanBa.less'
function YiFaZaiHaiDian({ id, data, dispatch }) {
const closePop = () => {
dispatch.runtime.closeFeaturePop(id);
};
const width = 780;
return (
<>
<div className="dp-popup" style={{ position: 'absolute', top: '10px', left: 0, width, lineHeight: 1, background:'#ffffff' ,transform: 'translateX(-50%)' }}>
<div className="dp-popup-tip" style={{marginTop:'-10px',borderBottomColor:'#f7f7f7'}}></div>
<div className="dp-popup-content">
<div className="content-body tyb" id='tyb'>
<div className="title">
<div className="name flex flexac">
<div className='nameBorder'></div>
{data.name}
</div>
<div className="extra">
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
</div>
</div>
<div className="body">
<Descriptions size="small" column={2}>
<Descriptions.Item label="易涝点名称">{data.name}</Descriptions.Item>
<Descriptions.Item label="所属行政位置">{data.adnm}</Descriptions.Item>
<Descriptions.Item label="所在河流">{data.rvName}</Descriptions.Item>
<Descriptions.Item label="积水最大深度(m)">{data.depth}</Descriptions.Item>
<Descriptions.Item label="影响人口" span={3}>{data.pop}</Descriptions.Item>
<Descriptions.Item label="影响区域" span={3}>{data.area}</Descriptions.Item>
<Descriptions.Item label="备注" span={3}>
{data.remark}
</Descriptions.Item>
</Descriptions>
</div>
<div className="boxfoot"></div>
</div>
</div>
</div>
</>
)
}
export default React.memo(YiFaZaiHaiDian);