Browse Source

(*)消防事件概况功能调整

master
peng.peng 2 years ago
parent
commit
d694210b7f
  1. BIN
      super-screen/client/assets/images/homepage/fire/lefticon3.png
  2. 6
      super-screen/client/src/sections/fire-control/components/alarm-add.js
  3. 48
      super-screen/client/src/sections/fire-control/components/item-left.js
  4. 20
      super-screen/client/src/sections/fire-control/components/style.less
  5. 6
      super-screen/client/src/sections/fire-control/constants/index.js

BIN
super-screen/client/assets/images/homepage/fire/lefticon3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

6
super-screen/client/src/sections/fire-control/components/alarm-add.js

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { Modal, Form, Select, DatePicker, Tooltip } from 'antd'; import { Modal, Form, Select, DatePicker, Tooltip } from 'antd';
import { typeParam_data, alarm_levels, eventType_Data, fireMaterial_data } from '../constants/index' import { typeParam_data, alarm_levels, eventType_Data, fireScene_data } from '../constants/index'
import moment from 'moment'; import moment from 'moment';
const { Option } = Select; const { Option } = Select;
@ -76,9 +76,9 @@ function FireAddForm(props) {
</Select> </Select>
</Form.Item>} </Form.Item>}
{eventType == '火灾扑救' && <Form.Item name="fireMaterial" label="着火场所" rules={[{ required: true, message: '请选择着火场所!' }]}> {eventType == '火灾扑救' && <Form.Item name="scene" label="着火场所" rules={[{ required: true, message: '请选择着火场所!' }]}>
<Select placeholder="请选择场所"> <Select placeholder="请选择场所">
{fireMaterial_data?.map(s => <Option value={s}>{s}</Option>)} {fireScene_data?.map(s => <Option value={s}>{s}</Option>)}
</Select> </Select>
</Form.Item>} </Form.Item>}

48
super-screen/client/src/sections/fire-control/components/item-left.js

@ -3,12 +3,17 @@ import { Box, AutoRollComponent } from '$components';
import moment from 'moment' import moment from 'moment'
import { getName, getPhone } from '$utils'; import { getName, getPhone } from '$utils';
import TimeComponent from './time'; import TimeComponent from './time';
import { typeParam_data } from '../constants/index'
import './style.less' import './style.less'
function BasicInfo(props) { function BasicInfo(props) {
const { info: { const { info: { alarmInfo, rescueInfo } } = props;
alarmInfo,
rescueInfo const getContent = () => {
} } = props; return <div style={{ color: "#8FCBFF", marginTop: 9, paddingTop: 10 }}>
{alarmInfo?.routes?.steps?.map((s, index) => (index + 1) + '.' + s?.instruction).map(x => {
return <div style={{ marginBottom: 10 }}>{x}</div>
})}</div>
}
let name = '', phone = '' let name = '', phone = ''
if (rescueInfo?.leaderContactPhone) { if (rescueInfo?.leaderContactPhone) {
@ -27,18 +32,35 @@ function BasicInfo(props) {
<div className='left_second_bg'> <div className='left_second_bg'>
<div className='_second_item1'> <div className='_second_item1'>
<div className='_title'>负责人</div> <div className='_title'>负责人</div>
<div className='_content'>{getName(name)}</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>
<div className='_second_item2'> <div className='_second_item2'>
<div className='_title'>联系方式</div> <div className='_title'>联系方式</div>
<div className='_content' style={{ marginBottom: 9 }}>{getPhone(phone)}</div> <div className='_content' style={{ marginBottom: 9 }}>{getPhone(phone)}</div>
<div className='_title' >危险等级</div>
<div className='_content'>{alarmInfo?.level}</div>
</div> </div>
</div> </div>
<div className='left_third_bg'> <div className='left_third_bg'>
<div className='left_item_left1' /> <div className='left_item_left1' />
<div className='left_item_right1'> <div className='left_item_right1'>
<div className='flex-row '><span style={{ marginRight: 30 }}>警情类型</span><span></span></div> <div className='flex-row'>
<div className='flex-row ' style={{ color: "#8FCBFF", marginTop: 9 }}><span style={{ marginRight: 30 }}>{alarmInfo?.type}</span><span>{moment(alarmInfo?.createTime).format('YYYY-MM-DD HH:mm:ss')}</span></div> <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> </div>
@ -54,11 +76,13 @@ function BasicInfo(props) {
<div className='left_item_left3' /> <div className='left_item_left3' />
<div className='left_item_right1' style={{ textAlign: 'left' }}> <div className='left_item_right1' style={{ textAlign: 'left' }}>
<div><span style={{ marginRight: 30, marginBottom: 15 }}>路线规划</span></div> <div><span style={{ marginRight: 30, marginBottom: 15 }}>路线规划</span></div>
<AutoRollComponent key={alarmInfo?.id} canScroll={alarmInfo?.routes?.steps?.length > 3} <AutoRollComponent
content={<div style={{ color: "#8FCBFF", marginTop: 9, paddingTop: 10 }}>{alarmInfo?.routes?.steps?.map((s, index) => (index + 1) + '.' + s?.instruction).map(x => { key={alarmInfo?.id}
return <div style={{ marginBottom: 10 }}>{x}</div> canScroll={alarmInfo?.routes?.steps?.length > 3}
})}</div>} content={getContent()}
divHeight={100} divId={`fire-left-bottom${alarmInfo?.id}`} /> divHeight={100}
divId={`fire-left-bottom${alarmInfo?.id}`}
/>
</div> </div>
</div> </div>
</div> </div>

20
super-screen/client/src/sections/fire-control/components/style.less

@ -77,14 +77,14 @@
} }
._content { ._content {
font-size: 16px; font-size: 14px;
color: #ECF7FF; color: #ECF7FF;
} }
._second_item1 { ._second_item1 {
width: 95px; width: 153px;
height: 100%; height: 100%;
text-align: right; text-align: center;
padding-top: 12px; padding-top: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -105,17 +105,6 @@
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
} }
@media screen and (min-height:1080px) {
._second_item1 {
padding-top: 24px;
}
._second_item2 {
padding-top: 24px;
}
}
} }
.left_third_bg { .left_third_bg {
@ -143,6 +132,7 @@
height: 50px; height: 50px;
background: url('/assets/images/homepage/fire/lefticon2.png') no-repeat; background: url('/assets/images/homepage/fire/lefticon2.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-right: 20px;
} }
.left_item_left3 { .left_item_left3 {
@ -150,6 +140,7 @@
height: 50px; height: 50px;
background: url('/assets/images/homepage/fire/lefticon3.png') no-repeat; background: url('/assets/images/homepage/fire/lefticon3.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-right: 20px;
} }
.left_item_left4 { .left_item_left4 {
@ -157,6 +148,7 @@
height: 50px; height: 50px;
background: url('/assets/images/homepage/fire/lefticon4.png') no-repeat; background: url('/assets/images/homepage/fire/lefticon4.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-right: 20px;
} }
.left_item_right1 { .left_item_right1 {

6
super-screen/client/src/sections/fire-control/constants/index.js

@ -18,13 +18,13 @@ const typeParam_data = {
}, },
} }
//着火材料 //着火场所
const fireMaterial_data = ["民用建筑", "工业建筑", "森林", "地下建筑", "水上"] const fireScene_data = ["民用建筑", "工业建筑", "森林", "地下建筑", "水上"]
//危险等级 //危险等级
const alarm_levels = ['I级', 'II级', 'III级', 'IV级', 'V级'] const alarm_levels = ['I级', 'II级', 'III级', 'IV级', 'V级']
//警情类型 //警情类型
const eventType_Data = ['火灾扑救', '救援抢险', '自然灾害', '灾难事故', '其他出动',] const eventType_Data = ['火灾扑救', '救援抢险', '自然灾害', '灾难事故', '其他出动',]
export { export {
typeParam_data, fireMaterial_data, alarm_levels, eventType_Data typeParam_data, fireScene_data, alarm_levels, eventType_Data
} }
Loading…
Cancel
Save