Browse Source

(*) 消防-消防救援队伍

master
liujiangyong 1 year ago
parent
commit
c90531aedf
  1. 48
      super-screen/client/src/sections/fire-control/components/left-top.js
  2. 113
      super-screen/client/src/sections/fire-control/components/style.less
  3. 2
      super-screen/client/src/sections/fire-control/containers/homePage.js

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

@ -1,38 +1,30 @@
import React from 'react'
import { Box } from '$components';
import { Box, AutoRollComponent, NoData } from '$components';
function BasicInfo() {
function BasicInfo(props) {
const { emergencyList } = props;
return <Box title={"警情数据分析"} subtitle={true} >
<div className='alarm_data_analysis'>
<div className='_item_left'>
<div className='_img' >65<span style={{ fontSize: 12 }}>%</span></div>
<div className='_text'>真警占比率</div>
</div>
<div className='_item_right'>
<div className='flex-row flex-item-center'>
<div className='_iconphone' />
<div className='right_item_right'>
<div className='alarm_title'>电话联系数量</div>
<div><span className='alarm_number'>479</span><span className='alarm_unit'></span></div>
const getContent = () => {
return <div className='xfjy_data'>
{emergencyList.xfjy?.map(item => <div className='xfjy_item'>
<div className='_text'>
<div className='_row1'>
<span>救援队伍</span>
<span>负责人及电话</span>
</div>
</div>
<div className='flex-row flex-item-center'>
<div className='_iconreal' />
<div className='right_item_right'>
<div className='alarm_title'>真警数量</div>
<div><span className='alarm_number'>273</span><span className='alarm_unit'></span></div>
</div>
</div>
<div className='flex-row flex-item-center'>
<div className='_iconmistake' />
<div className='right_item_right'>
<div className='alarm_title'>误报数量</div>
<div><span className='alarm_number'>276</span><span className='alarm_unit'></span></div>
<div className='_row2'>
<span>{item.teamName}</span>
<span>{item.leaderContactPhone}</span>
</div>
</div>
</div>
</div>)}
</div>
}
return <Box title={"消防救援队伍"}>
{emergencyList?.xfjy?.length
? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-top`} />
: <NoData height={250} />
}
</Box>
}

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

@ -246,94 +246,47 @@
}
//警情数据分析
.alarm_data_analysis {
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
._item_left {
width: 209px;
height: 100%;
//消防救援队伍
.xfjy_data {
padding-left: 28px;
padding-right: 28px;
._img {
width: 209px;
height: 209px;
background: url('/assets/images/homepage/fire/realalarmbg.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 48px;
color: #FFFFFF;
letter-spacing: 0;
}
.xfjy_item {
display: flex;
background: url('/assets/images/homepage/fire/realtimebg.png') no-repeat;
background-size: 100% 100%;
height: 110px;
width: 100%;
margin-bottom: 5%;
align-items: center;
justify-content: center;
._text {
font-family: YouSheBiaoTiHei;
font-size: 20px;
color: #FFFFFF;
letter-spacing: 0;
margin-top: -30px;
text-align: center;
}
}
._item_right {
width: 200px;
._iconphone {
width: 50.96px;
height: 45px;
background: url('/assets/images/homepage/fire/iconphone.png') no-repeat;
background-size: 100% 100%;
}
._iconreal {
width: 50.96px;
height: 45px;
background: url('/assets/images/homepage/fire/iconreal.png') no-repeat;
background-size: 100% 100%;
}
._iconmistake {
width: 50.96px;
height: 45px;
background: url('/assets/images/homepage/fire/iconmistake.png') no-repeat;
background-size: 100% 100%;
}
.right_item_right {
width: 155px;
margin-left: 16px;
.alarm_title {
font-size: 14px;
color: #ECF7FF;
letter-spacing: 0;
}
width: calc(100% - 40px);
display: flex;
flex-direction: column;
.alarm_number {
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 28px;
color: #24DCF7;
letter-spacing: 0;
margin-right: 50px;
._row1 {
color: #C3E6FF;
width: 100%;
height: 22px;
background: rgba(0, 88, 204, 0.5);
justify-content: space-around;
display: flex;
}
.alarm_unit {
font-size: 14px;
color: #5999C8;
letter-spacing: 0;
._row2 {
justify-content: space-around;
display: flex;
height: 42px;
font-family: SourceHanSansSC-Regular;
font-weight: 400;
font-size: 16px;
color: #ECF7FF;
letter-spacing: 0.67px;
padding-top: 4px;
}
}
}
}

2
super-screen/client/src/sections/fire-control/containers/homePage.js

@ -50,7 +50,7 @@ function homePage(props) {
{tab == 'overview' ?
<>
<div className='child' style={childStyle}>
<LeftTop />
<LeftTop emergencyList={emergencyList} />
</div>
<div className='child' style={childStyle}>
<LeftMiddle />

Loading…
Cancel
Save