25 changed files with 559 additions and 25 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 942 B |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 623 B |
|
After Width: | Height: | Size: 779 B |
|
After Width: | Height: | Size: 21 KiB |
@ -1,19 +1,62 @@ |
|||
.super-screen-body { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
width: 100%; |
|||
|
|||
.super-screen-card { |
|||
position: absolute; |
|||
top: 174px; |
|||
width: 20%; |
|||
height: calc(100% - 174px); |
|||
z-index: 5; |
|||
// background: linear-gradient(to right, #001624 0%, rgba(0, 22, 36, 0.9) 80%, rgba(0, 22, 36, 0.6) 100%); |
|||
padding-left: 1.5vw; |
|||
padding-top: 8px; |
|||
top: 100px; |
|||
width: 23%; |
|||
height: calc(100% - 100px); |
|||
z-index: 7; |
|||
color: #fff; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
|
|||
.card-item { |
|||
.card-content { |
|||
width: 100%; |
|||
height: calc(100% - 37px); |
|||
// opacity: 0.8; |
|||
background-image: linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%); |
|||
} |
|||
|
|||
/* 滚动条整体 */ |
|||
.card-content::-webkit-scrollbar { |
|||
height: 10px; |
|||
width: 10px; |
|||
} |
|||
|
|||
/* 两个滚动条交接处 -- x轴和y轴 */ |
|||
.card-content::-webkit-scrollbar-corner { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/* 滚动条滑块 */ |
|||
.card-content::-webkit-scrollbar-thumb { |
|||
border-radius: 10px; |
|||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|||
background: #133d7b; |
|||
} |
|||
|
|||
/* 滚动条轨道 */ |
|||
.card-content::-webkit-scrollbar-track { |
|||
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); |
|||
border-radius: 10px; |
|||
background: #ededed; |
|||
} |
|||
|
|||
/* 滚动条两端按钮 */ |
|||
.card-content::-webkit-scrollbar-button {} |
|||
} |
|||
} |
|||
|
|||
.left { |
|||
left: 0; |
|||
left: 20px; |
|||
} |
|||
|
|||
.right { |
|||
right: 0; |
|||
right: 20px; |
|||
} |
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
import React from 'react'; |
|||
import CardTitle from '../public/cardTitle'; |
|||
import '../basis.less'; |
|||
import './left_1.less'; |
|||
|
|||
export default function Left_1(props) { |
|||
const { data } = props; |
|||
return ( |
|||
<div className='card-item' style={{ height: '40%' }}> |
|||
<CardTitle title='集水池液位' /> |
|||
<div className='card-content liquid-level-content'> |
|||
{data?.map(d => <div className='liquid-level'> |
|||
<img className='img' src='/assets/images/monitor/liquid-level.png' /> |
|||
<div className='info'> |
|||
<div className='name'>{d.name}</div> |
|||
<div className='level'><span className='num'>{d.level}</span> m</div> |
|||
</div> |
|||
</div>)} |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,47 @@ |
|||
.liquid-level-content { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: flex-start; |
|||
overflow-y: auto; |
|||
|
|||
.liquid-level { |
|||
width: 46%; |
|||
display: flex; |
|||
justify-content: space-evenly; |
|||
align-items: center; |
|||
|
|||
.img { |
|||
width: 84px; |
|||
height: 76px; |
|||
} |
|||
|
|||
.info { |
|||
width: 101px; |
|||
height: 80%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-end; |
|||
align-items: center; |
|||
font-size: 1rem; |
|||
text-align: center; |
|||
font-family: D-DIN-Italic; |
|||
|
|||
.name { |
|||
background-image: url(/assets/images/monitor/gradation-bg.svg); |
|||
width: 100%; |
|||
} |
|||
|
|||
.level { |
|||
background-image: linear-gradient(90deg, #24396e00 2%, #24396e70 51%, #24396e00 100%); |
|||
width: 100%; |
|||
margin-top: 5px; |
|||
|
|||
.num { |
|||
font-size: 1.25rem; |
|||
line-height: 1.25rem; |
|||
letter-spacing: 2.08px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
import React from 'react'; |
|||
import CardTitle from '../public/cardTitle'; |
|||
import '../basis.less'; |
|||
|
|||
export default function Left_2(props) { |
|||
return ( |
|||
<div className='card-item' style={{ height: '55%' }}> |
|||
<CardTitle title='水泵状态' /> |
|||
<div className='card-content'></div> |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,100 @@ |
|||
import React from 'react'; |
|||
import CardTitle from '../public/cardTitle'; |
|||
import { Select } from 'antd'; |
|||
import '../basis.less'; |
|||
import './right_1.less'; |
|||
|
|||
export default function Right_1(props) { |
|||
const renderSelect = () => { |
|||
return <Select |
|||
className='bigscreen-select' |
|||
bordered={false} |
|||
style={{ width: 120 }} |
|||
defaultValue='雄溪站' |
|||
options={[ |
|||
{ |
|||
value: '雄溪站', |
|||
label: '雄溪站', |
|||
}, { |
|||
value: '雄溪站站站', |
|||
label: '雄溪站站站', |
|||
}, { |
|||
value: 'disabled', |
|||
disabled: true, |
|||
label: 'Disabled', |
|||
}, { |
|||
value: 'Yiminghe', |
|||
label: 'yimingheyimingheyiminghe', |
|||
}, |
|||
]} |
|||
/> |
|||
} |
|||
|
|||
return ( |
|||
<div className='card-item' style={{ height: '40%' }}> |
|||
<CardTitle title='泵站基本信息' renderExtend={renderSelect} /> |
|||
<div className='card-content pump-info'> |
|||
<div className='top'> |
|||
<img className='img' src='/assets/images/monitor/pump.png' /> |
|||
<div className='detail'> |
|||
<div className='detail-item'> |
|||
<div className='item pump-models'> |
|||
<div className='pump-models-value'>{'1200ZLB—160轴流泵'}</div> |
|||
<div className='pump-models-key'>水泵型号</div> |
|||
</div> |
|||
</div> |
|||
<div className='detail-item'> |
|||
<div className='item'> |
|||
<div className='key'>电动机型号:</div> |
|||
<div className='value'>{'JsL10—12(210KW)'}</div> |
|||
</div> |
|||
<div className='line' /> |
|||
</div> |
|||
<div className='detail-item'> |
|||
<div className='item'> |
|||
<div className='key'>变压器型号：</div> |
|||
<div className='value'>{'s9—M315KVA、s9—M500KVA'}</div> |
|||
</div> |
|||
<div className='line' /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='bottom'> |
|||
<div className='bottom-item'> |
|||
<div className='item'> |
|||
<div className='key'>类型:</div> |
|||
<div className='value'>{'排涝'}</div> |
|||
</div> |
|||
<div className='vertical-line' /> |
|||
<div className='item'> |
|||
<div className='key'>泵站规模:</div> |
|||
<div className='value'>{'630 (kw)'}</div> |
|||
</div> |
|||
</div> |
|||
<div className='bottom-item'> |
|||
<div className='item'> |
|||
<div className='key'>机组数量：</div> |
|||
<div className='value'>{'3台'}</div> |
|||
</div> |
|||
<div className='vertical-line' /> |
|||
<div className='item'> |
|||
<div className='key'>泵站建成时间：</div> |
|||
<div className='value'>{'2004年'}</div> |
|||
</div> |
|||
</div> |
|||
<div className='bottom-item'> |
|||
<div className='item'> |
|||
<div className='key'>泵站除险加固时间：</div> |
|||
<div className='value'>{'2024年'}</div> |
|||
</div> |
|||
<div className='vertical-line' /> |
|||
<div className='item'> |
|||
<div className='key'>所属区域：</div> |
|||
<div className='value'>{'象湖站'}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,125 @@ |
|||
.pump-info { |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
padding: 12.5px 10px 5px; |
|||
|
|||
.top { |
|||
height: 40%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.img { |
|||
width: 94px; |
|||
height: 111px; |
|||
} |
|||
|
|||
.detail { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin-left: 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
|
|||
.detail-item { |
|||
height: 32%; |
|||
|
|||
.item { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
padding: 0 3px; |
|||
height: 99%; |
|||
width: 100%; |
|||
|
|||
.key { |
|||
font-family: SourceHanSansCN-Regular; |
|||
font-weight: 400; |
|||
font-size: 14px; |
|||
color: #C3E6FF; |
|||
} |
|||
|
|||
.value { |
|||
font-family: D-DIN; |
|||
font-weight: DIN; |
|||
font-size: 16px; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
height: 1px; |
|||
background: #c3e6ff69; |
|||
} |
|||
|
|||
.pump-models { |
|||
background-image: url(/assets/images/monitor/pump-models-bg.svg); |
|||
background-size: cover; |
|||
|
|||
.pump-models-value { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 20px; |
|||
color: #FFFFFF; |
|||
letter-spacing: 0; |
|||
} |
|||
|
|||
.pump-models-key { |
|||
font-family: SourceHanSansCN-Medium; |
|||
font-weight: 500; |
|||
font-size: 12px; |
|||
color: #C3E6FF; |
|||
letter-spacing: 0; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
margin: 0 0 2px 2px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
height: 55%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-evenly; |
|||
|
|||
.bottom-item { |
|||
height: 28%; |
|||
background-image: url(/assets/images/monitor/pump-info-item-bg.svg); |
|||
background-size: cover; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.item { |
|||
width: 44%; |
|||
margin: 0 10px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.key { |
|||
font-family: SourceHanSansCN-Medium; |
|||
font-weight: 500; |
|||
font-size: 13px; |
|||
color: #63B0FF; |
|||
} |
|||
|
|||
.value { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 16px; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
|
|||
.vertical-line { |
|||
width: 2px; |
|||
height: 19px; |
|||
opacity: 0.45; |
|||
background-color: #5F82DC; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
import React from 'react'; |
|||
import CardTitle from '../public/cardTitle'; |
|||
import '../basis.less'; |
|||
|
|||
export default function Right_2(props) { |
|||
return ( |
|||
<div className='card-item' style={{ height: '55%' }}> |
|||
<CardTitle title='泵站水位' /> |
|||
<div className='card-content'> |
|||
|
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,13 @@ |
|||
import React from 'react'; |
|||
import './cardTitle.less'; |
|||
|
|||
export default function CardTitle(props) { |
|||
const { title, width, renderExtend } = props; |
|||
|
|||
return ( |
|||
<div className='card-title' style={{ width: width || '100%' }}> |
|||
<div className='title'>{title}</div> |
|||
{renderExtend && renderExtend()} |
|||
</div> |
|||
) |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
.card-title { |
|||
height: 37px; |
|||
background-image: url(/assets/images/monitor/card-header.png); |
|||
background-size: 100%; |
|||
background-repeat: no-repeat; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: flex-end; |
|||
opacity: 1; |
|||
|
|||
.title { |
|||
font-family: YouSheBiaoTiHei; |
|||
font-size: 1.5rem; |
|||
color: #E2F8FF; |
|||
letter-spacing: 2px; |
|||
margin-left: 13px; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue