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 { |
.super-screen-body { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
|
||||
|
.super-screen-card { |
||||
position: absolute; |
position: absolute; |
||||
top: 174px; |
top: 100px; |
||||
width: 20%; |
width: 23%; |
||||
height: calc(100% - 174px); |
height: calc(100% - 100px); |
||||
z-index: 5; |
z-index: 7; |
||||
// 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; |
|
||||
color: #fff; |
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 { |
||||
left: 0; |
left: 20px; |
||||
} |
} |
||||
|
|
||||
.right { |
.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