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 { 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';
const { Option } = Select;
@ -76,9 +76,9 @@ function FireAddForm(props) {
</Select>
</Form.Item>}
{eventType == '火灾扑救' && <Form.Item name="fireMaterial" label="着火场所" rules={[{ required: true, message: '请选择着火场所!' }]}>
{eventType == '火灾扑救' && <Form.Item name="scene" label="着火场所" rules={[{ required: true, message: '请选择着火场所!' }]}>
<Select placeholder="请选择场所">
{fireMaterial_data?.map(s => <Option value={s}>{s}</Option>)}
{fireScene_data?.map(s => <Option value={s}>{s}</Option>)}
</Select>
</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 { getName, getPhone } from '$utils';
import TimeComponent from './time';
import { typeParam_data } from '../constants/index'
import './style.less'
function BasicInfo(props) {
const { info: {
alarmInfo,
rescueInfo
} } = props;
const { info: { alarmInfo, rescueInfo } } = props;
const getContent = () => {
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 = ''
if (rescueInfo?.leaderContactPhone) {
@ -27,18 +32,35 @@ function BasicInfo(props) {
<div className='left_second_bg'>
<div className='_second_item1'>
<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 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 '><span style={{ marginRight: 30 }}>警情类型</span><span></span></div>
<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 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>
@ -54,11 +76,13 @@ function BasicInfo(props) {
<div className='left_item_left3' />
<div className='left_item_right1' style={{ textAlign: 'left' }}>
<div><span style={{ marginRight: 30, marginBottom: 15 }}>路线规划</span></div>
<AutoRollComponent key={alarmInfo?.id} canScroll={alarmInfo?.routes?.steps?.length > 3}
content={<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>}
divHeight={100} divId={`fire-left-bottom${alarmInfo?.id}`} />
<AutoRollComponent
key={alarmInfo?.id}
canScroll={alarmInfo?.routes?.steps?.length > 3}
content={getContent()}
divHeight={100}
divId={`fire-left-bottom${alarmInfo?.id}`}
/>
</div>
</div>
</div>

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

@ -77,14 +77,14 @@
}
._content {
font-size: 16px;
font-size: 14px;
color: #ECF7FF;
}
._second_item1 {
width: 95px;
width: 153px;
height: 100%;
text-align: right;
text-align: center;
padding-top: 12px;
display: flex;
flex-direction: column;
@ -105,17 +105,6 @@
padding-top: 15px;
padding-bottom: 15px;
}
@media screen and (min-height:1080px) {
._second_item1 {
padding-top: 24px;
}
._second_item2 {
padding-top: 24px;
}
}
}
.left_third_bg {
@ -143,6 +132,7 @@
height: 50px;
background: url('/assets/images/homepage/fire/lefticon2.png') no-repeat;
background-size: 100% 100%;
margin-right: 20px;
}
.left_item_left3 {
@ -150,6 +140,7 @@
height: 50px;
background: url('/assets/images/homepage/fire/lefticon3.png') no-repeat;
background-size: 100% 100%;
margin-right: 20px;
}
.left_item_left4 {
@ -157,6 +148,7 @@
height: 50px;
background: url('/assets/images/homepage/fire/lefticon4.png') no-repeat;
background-size: 100% 100%;
margin-right: 20px;
}
.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 eventType_Data = ['火灾扑救', '救援抢险', '自然灾害', '灾难事故', '其他出动',]
export {
typeParam_data, fireMaterial_data, alarm_levels, eventType_Data
typeParam_data, fireScene_data, alarm_levels, eventType_Data
}
Loading…
Cancel
Save