You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
4.5 KiB
94 lines
4.5 KiB
import React from 'react'
|
|
import { Box, AutoRollComponent } from '$components';
|
|
import moment from 'moment'
|
|
import { getName, getPhone } from '$utils';
|
|
import TimeComponent, { formatSeconds } from './time';
|
|
import { typeParam_data } from '../constants/index'
|
|
import './style.less'
|
|
function BasicInfo(props) {
|
|
const { info: { alarmInfo, rescueInfo }, routes: { routes } } = props;
|
|
|
|
const getContent = () => {
|
|
return <div style={{ color: "#8FCBFF", marginTop: 9, paddingTop: 10 }}>
|
|
{routes?.steps?.map((s, index) => (index + 1) + '.' + s?.instruction).map(x => {
|
|
return <div style={{ marginBottom: 10 }}>{x}</div>
|
|
})}</div>
|
|
}
|
|
|
|
let name = '', phone = ''
|
|
if (rescueInfo?.leaderContactPhone) {
|
|
let str = rescueInfo?.leaderContactPhone.replace(/\s*/g, "");
|
|
name = str.substring(0, str.length - 11)
|
|
phone = str.substring(str.length - 11, str.length)
|
|
}
|
|
|
|
return <Box title={"事件概况"} >
|
|
<div className='item_left-container'>
|
|
<div className='alarm_time'>
|
|
{alarmInfo?.createTime && <TimeComponent key={alarmInfo?.createTime} createTime={alarmInfo?.createTime} />}
|
|
</div>
|
|
<div className='end_event' onClick={() => { props.endEvent() }}>结束案件</div>
|
|
<div className='event_title'><div className='event_title_left' /><span>{rescueInfo?.teamName}</span><div className='event_title_right' /></div>
|
|
<div className='left_second_bg'>
|
|
<div className='_second_item1'>
|
|
<div className='_title'>负责人</div>
|
|
<div className='_content' style={{ marginBottom: 9 }}>{getName(name)}</div>
|
|
<div className='_title'>事件时间</div>
|
|
<div className='_content'>{moment(alarmInfo?.createTime).format('YYYY-MM-DD HH:mm:ss')}</div>
|
|
</div>
|
|
<div className='_second_item2'>
|
|
<div className='_title'>联系方式</div>
|
|
<div className='_content' style={{ marginBottom: 9 }}>{getPhone(phone)}</div>
|
|
<div className='_title' >危险等级</div>
|
|
<div className='_content'>{alarmInfo?.level}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='left_third_bg'>
|
|
<div className='left_item_left1' />
|
|
<div className='left_item_right1'>
|
|
<div className='flex-row'>
|
|
<div style={{ marginRight: 17 }}>警情类型</div>
|
|
<div style={{ color: "#8FCBFF" }}>{alarmInfo?.type}</div>
|
|
</div>
|
|
{alarmInfo?.typeParam && <div className='flex-row' style={{ marginTop: 12, marginBottom: 12 }}>
|
|
<div style={{ marginRight: 17 }}>{typeParam_data[alarmInfo?.type]?.name}</div>
|
|
<div style={{ color: "#8FCBFF" }}>{alarmInfo?.typeParam}</div>
|
|
</div>}
|
|
{
|
|
alarmInfo?.type == '火灾扑救' && <div className='flex-row'>
|
|
<div style={{ marginRight: 17 }}>着火场所</div>
|
|
<div style={{ color: "#8FCBFF" }}>{alarmInfo?.scene}</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div className='left_third_bg'>
|
|
<div className='left_item_left2' />
|
|
<div className='left_item_right1' style={{ textAlign: 'left' }}>
|
|
<div><span style={{ marginRight: 30 }}>案件地点</span></div>
|
|
<div style={{ color: "#8FCBFF", marginTop: 9 }}>{alarmInfo?.location}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='left_third_bg' style={{ height: 160, paddingTop: 20 }}>
|
|
<div className='left_item_left3' />
|
|
<div className='left_item_right1' style={{ textAlign: 'left' }}>
|
|
<div><span style={{ marginRight: 30, marginBottom: 15 }}>路线规划 {routes?.time && `(${formatSeconds(routes?.time, true)})`}</span></div>
|
|
<AutoRollComponent
|
|
key={alarmInfo?.id}
|
|
canScroll={routes?.steps?.length > 3}
|
|
content={getContent()}
|
|
divHeight={100}
|
|
divId={`fire-left-bottom${alarmInfo?.id}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Box>
|
|
}
|
|
|
|
export default BasicInfo;
|
|
|
|
|
|
|