71 lines
2.8 KiB
JavaScript
71 lines
2.8 KiB
JavaScript
|
import React, { useEffect, useState } from 'react';
|
||
|
|
import { Descriptions,Modal,Tabs } from 'antd';
|
||
|
|
import moment from "moment"
|
||
|
|
import { CloseOutlined } from '@ant-design/icons';
|
||
|
|
import genDamImage from '../../../../components/DamGraph/DamImage';
|
||
|
|
import './TangYanBa.less'
|
||
|
|
import Dzzhtc from './Dzzhtc';
|
||
|
|
|
||
|
|
function DiZhiZaiHaiDian({ id, data, dispatch }) {
|
||
|
|
|
||
|
|
const [visible , setVisible] = useState(false)
|
||
|
|
const closePop = () => {
|
||
|
|
dispatch.runtime.closeFeaturePop(id);
|
||
|
|
};
|
||
|
|
const mapOb = {
|
||
|
|
1: '小型',
|
||
|
|
2: '中型',
|
||
|
|
3: '大型'
|
||
|
|
}
|
||
|
|
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">
|
||
|
|
<span style={{ display: 'inline-block', marginRight: 50,cursor:'pointer' }}
|
||
|
|
onClick={()=>{setVisible(true)}}>详情</span>
|
||
|
|
<CloseOutlined onClick={closePop} style={{ color: "#333" }} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="body">
|
||
|
|
<Descriptions size="small" column={2}>
|
||
|
|
<Descriptions.Item label="位置" >{data.adnm}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="面积(万m²)" >{data.area}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="体积(万m³)" >{data.vol}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="规模分级" >{mapOb[data.scaleLevel]}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="网格责任人" >{data.person}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="联系电话" >{data.personContact}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="网格管理员" >{data.admin}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="联系电话" >{data.adminContact}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="监测员" >{data.monitor}</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="联系电话" >{data.monitorContact}</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
</div>
|
||
|
|
<div className="boxfoot"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Modal
|
||
|
|
visible={visible}
|
||
|
|
footer={null}
|
||
|
|
onCancel={()=>{setVisible(false)}}
|
||
|
|
closeIcon={()=><></>}
|
||
|
|
destroyOnClose
|
||
|
|
>
|
||
|
|
<Dzzhtc data={data} closeM={()=>setVisible(false)}/>
|
||
|
|
</Modal>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default React.memo(DiZhiZaiHaiDian);
|