263 lines
11 KiB
JavaScript
263 lines
11 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 '../TangYanBa.less'
|
|
|
|
function Dzzhtc ({ id, data, dispatch, closeM }) {
|
|
const [visible, setVisible] = useState(false)
|
|
const closePop = () => {
|
|
closeM()
|
|
}
|
|
const mapOb = {
|
|
1: '崩塌',
|
|
2: '滑坡',
|
|
3: '塌陷'
|
|
}
|
|
const level = {
|
|
1: '小型',
|
|
2: '中型',
|
|
3: '大型',
|
|
4: '特大型'
|
|
}
|
|
const state = {
|
|
1: '稳定',
|
|
2: '欠稳定',
|
|
3: '较稳定',
|
|
4: '基本稳定',
|
|
5: '不稳定',
|
|
其他: '稳定'
|
|
}
|
|
const manageLevel = {
|
|
1: '州级',
|
|
2: '县级',
|
|
3: '乡镇级',
|
|
4: '村级'
|
|
}
|
|
// 1=州级 2=县级 3=乡镇级 4=村级
|
|
// 1=稳定 2=欠稳定 3=较稳定 4=基本稳定 5=不稳定 null=未知 其他=稳定
|
|
const width = 800
|
|
console.log(data, '----dtata')
|
|
return (
|
|
<>
|
|
<div
|
|
className='dp-popup'
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
width,
|
|
lineHeight: 1,
|
|
background: '#ffffff'
|
|
}}
|
|
>
|
|
<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 style={{ height: 600, overflowY: 'auto' }}>
|
|
<div style={{ padding: '0 5px 5px 5px' }}>
|
|
<Descriptions
|
|
size='small'
|
|
column={3}
|
|
bordered
|
|
labelStyle={{ backgroundColor: '#fff' }}
|
|
>
|
|
<Descriptions.Item
|
|
label={
|
|
<div style={{ color: '#000', fontWeight: 'bold' }}>
|
|
基本情况
|
|
</div>
|
|
}
|
|
span={3}
|
|
></Descriptions.Item>
|
|
<Descriptions.Item label='野外编号'>
|
|
{data.code}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='名称'>
|
|
{data.name}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='专业监测点'>
|
|
{data.isProfessional == 1 ? '是' : '否'}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='行政区划'>
|
|
{data.adnm}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='位置'>
|
|
{data.adnm}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='灾害类型'>
|
|
{mapOb[data.dtype]}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='经度'>{data.lng}</Descriptions.Item>
|
|
<Descriptions.Item label='纬度' span={2}>
|
|
{data.lat}
|
|
</Descriptions.Item>
|
|
|
|
<Descriptions.Item
|
|
label={
|
|
<div style={{ color: '#000', fontWeight: 'bold' }}>
|
|
灾害体基本特征
|
|
</div>
|
|
}
|
|
span={3}
|
|
></Descriptions.Item>
|
|
<Descriptions.Item label='崩滑方向'>
|
|
{data.direction}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='是否涉水'>
|
|
{data.isWade == 1 ? '是' : '否'}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='面积(万m²)'>
|
|
{data.area}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='体积(万m³)'>
|
|
{data.vol}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='规模分级'>
|
|
{level[data.scaleLevel]}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='现状稳定性'>
|
|
{data.state ? state[data.state] : '未知'}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='潜在稳定性' span={3}>
|
|
{data.latentState ? state[data.latentState] : '未知'}
|
|
</Descriptions.Item>
|
|
|
|
<Descriptions.Item
|
|
label={
|
|
<div style={{ color: '#000', fontWeight: 'bold' }}>
|
|
灾害体危害特征
|
|
</div>
|
|
}
|
|
span={3}
|
|
></Descriptions.Item>
|
|
<Descriptions.Item label='死亡人数'>
|
|
{data.death}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='经济损失(万元)'>
|
|
{data.ecoLoss}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='威胁户数'>
|
|
{data.threatenHouses}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='威胁人口'>
|
|
{data.threatenPops}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='威胁资产(万元)'>
|
|
{data.threatenAsset}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='险情分级'>
|
|
{level[data.dangerLevel]}
|
|
</Descriptions.Item>
|
|
|
|
<Descriptions.Item
|
|
label={
|
|
<div
|
|
style={{ color: '#000', fontWeight: 'bold', width: 95 }}
|
|
>
|
|
防治与管理
|
|
</div>
|
|
}
|
|
span={3}
|
|
></Descriptions.Item>
|
|
<Descriptions.Item label='防治措施建议'>
|
|
{data.suggestion}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='管理层级'>
|
|
{manageLevel[data.manageLevel]}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='灾体位置'>
|
|
{data.orgAddr}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='主管部门' span={3}>
|
|
{data.org}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='网格责任人'>
|
|
{data.person}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='联系电话' span={2}>
|
|
{data.personContact}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='网格管理员'>
|
|
{data.admin}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='联系电话' span={2}>
|
|
{data.adminContact}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='网格协管员'>
|
|
{data.collaborator}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='联系电话' span={2}>
|
|
{data.collaboratorContact}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='网格专管员'>
|
|
{data.manager}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='联系电话' span={2}>
|
|
{data.managerContact}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='监测员'>
|
|
{data.monitor}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label='联系电话' span={2}>
|
|
{data.monitorContact}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
{/* <div className="body">
|
|
<Descriptions size="small" title='灾害体基本特征' column={3} bordered>
|
|
<Descriptions.Item label="崩滑方向" >{data.direction}</Descriptions.Item>
|
|
<Descriptions.Item label="是否涉水">{data.isWade == 1?'是':'否'}</Descriptions.Item>
|
|
<Descriptions.Item label="面积(万m²)">{data.area}</Descriptions.Item>
|
|
<Descriptions.Item label="体积(万m³)">{data.vol}</Descriptions.Item>
|
|
<Descriptions.Item label="规模分级" >{level[data.scaleLevel]}</Descriptions.Item>
|
|
<Descriptions.Item label="现状稳定性" >{data.state?state[data.state]:'未知'}</Descriptions.Item>
|
|
<Descriptions.Item label="潜在稳定性" >{data.latentState?state[data.latentState]:'未知'}</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
<div className="body">
|
|
<Descriptions size="small" title='灾害体危害特征' column={3} bordered>
|
|
<Descriptions.Item label="死亡人数" >{data.death}</Descriptions.Item>
|
|
<Descriptions.Item label="经济损失(万元)" >{data.ecoLoss}</Descriptions.Item>
|
|
<Descriptions.Item label="威胁户数" >{data.threatenHouses}</Descriptions.Item>
|
|
<Descriptions.Item label="威胁人口" >{data.threatenPops}</Descriptions.Item>
|
|
<Descriptions.Item label="威胁资产(万元)" >{data.threatenAsset}</Descriptions.Item>
|
|
<Descriptions.Item label="险情分级" >{level[data.dangerLevel]}</Descriptions.Item>
|
|
</Descriptions>
|
|
</div>
|
|
<div className="body">
|
|
<Descriptions size="small" title='防治与管理' column={3} bordered>
|
|
<Descriptions.Item label="防治措施建议" >{data.suggestion}</Descriptions.Item>
|
|
<Descriptions.Item label="管理层级" >{manageLevel[data.manageLevel]}</Descriptions.Item>
|
|
<Descriptions.Item label="灾体位置" >{data.orgAddr}</Descriptions.Item>
|
|
<Descriptions.Item label="主管部门" span={3}>{data.org}</Descriptions.Item>
|
|
<Descriptions.Item label="网格责任人" >{data.person}</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话" span={2}>{data.personContact}</Descriptions.Item>
|
|
<Descriptions.Item label="网格管理员">{data.admin}</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话" span={2}>{data.adminContact}</Descriptions.Item>
|
|
<Descriptions.Item label="网格协管员" >{data.collaborator}</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话" span={2}>{data.collaboratorContact}</Descriptions.Item>
|
|
<Descriptions.Item label="网格专管员" >{data.manager}</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话" span={2}>{data.managerContact}</Descriptions.Item>
|
|
<Descriptions.Item label="监测员" >{data.monitor}</Descriptions.Item>
|
|
<Descriptions.Item label="联系电话" span={2}>{data.monitorContact}</Descriptions.Item>
|
|
</Descriptions>
|
|
</div> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default React.memo(Dzzhtc)
|