wenlele 1 year ago
parent
commit
d1171ab4c5
  1. BIN
      web/client/assets/font_sc/D-DIN-Bold.ttf
  2. BIN
      web/client/assets/font_sc/D-DIN-Italic.otf
  3. BIN
      web/client/assets/font_sc/D-DIN.ttf
  4. BIN
      web/client/assets/font_sc/SourceHanSansCN-Medium.otf
  5. BIN
      web/client/assets/font_sc/SourceHanSansCN-Regular.otf
  6. BIN
      web/client/assets/images/monitor/card-header.png
  7. 18
      web/client/assets/images/monitor/gradation-bg.svg
  8. BIN
      web/client/assets/images/monitor/liquid-level.png
  9. 13
      web/client/assets/images/monitor/pump-info-item-bg.svg
  10. 16
      web/client/assets/images/monitor/pump-models-bg.svg
  11. BIN
      web/client/assets/images/monitor/pump.png
  12. 25
      web/client/index.ejs
  13. 25
      web/client/index.html
  14. 8
      web/client/src/sections/bigScreen/components/amap.js
  15. 31
      web/client/src/sections/bigScreen/components/basis.js
  16. 69
      web/client/src/sections/bigScreen/components/basis.less
  17. 22
      web/client/src/sections/bigScreen/components/basis/left_1.js
  18. 47
      web/client/src/sections/bigScreen/components/basis/left_1.less
  19. 13
      web/client/src/sections/bigScreen/components/basis/left_2.js
  20. 100
      web/client/src/sections/bigScreen/components/basis/right_1.js
  21. 125
      web/client/src/sections/bigScreen/components/basis/right_1.less
  22. 14
      web/client/src/sections/bigScreen/components/basis/right_2.js
  23. 13
      web/client/src/sections/bigScreen/components/public/cardTitle.js
  24. 18
      web/client/src/sections/bigScreen/components/public/cardTitle.less
  25. 27
      web/client/src/sections/bigScreen/containers/style.less

BIN
web/client/assets/font_sc/D-DIN-Bold.ttf

Binary file not shown.

BIN
web/client/assets/font_sc/D-DIN-Italic.otf

Binary file not shown.

BIN
web/client/assets/font_sc/D-DIN.ttf

Binary file not shown.

BIN
web/client/assets/font_sc/SourceHanSansCN-Medium.otf

Binary file not shown.

BIN
web/client/assets/font_sc/SourceHanSansCN-Regular.otf

Binary file not shown.

BIN
web/client/assets/images/monitor/card-header.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

18
web/client/assets/images/monitor/gradation-bg.svg

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101 18" class="design-iconfont">
<defs>
<linearGradient x1="1.81398645%" y1="58.1187855%" x2="100%" y2="58.1187855%" id="raenwy13k__dumiv0k9ua">
<stop stop-color="#1A4AA7" stop-opacity="0" offset="0%"/>
<stop stop-color="#1A4AA6" offset="50.4343693%"/>
<stop stop-color="#1A4AA7" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="1.81398645%" y1="58.1187855%" x2="100%" y2="58.1187855%" id="raenwy13k__x8553fq14b">
<stop stop-color="#1A4AA7" stop-opacity="0" offset="0%"/>
<stop stop-color="#1A4AA6" offset="50.4343693%"/>
<stop stop-color="#1A4AA7" stop-opacity="0" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="url(#raenwy13k__dumiv0k9ua)" opacity=".47663225" d="M3 0H101V18H3z"/>
<path fill="url(#raenwy13k__x8553fq14b)" d="M0 0H84V18H0z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 942 B

BIN
web/client/assets/images/monitor/liquid-level.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

13
web/client/assets/images/monitor/pump-info-item-bg.svg

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 45" class="design-iconfont">
<defs>
<linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="m36puv9i4__cmcogni6ga">
<stop stop-color="#24396E" offset="0%"/>
<stop stop-color="#6084DF" offset="51.5489496%"/>
<stop stop-color="#24396E" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path stroke="url(#m36puv9i4__cmcogni6ga)" fill-opacity=".48524913" fill="#24396E" d="M0 0H423V43H0z" transform="translate(1 1)"/>
<path fill="#9DB5F2" d="M3 6L9 6 3 12z" transform="translate(1 1)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 623 B

16
web/client/assets/images/monitor/pump-models-bg.svg

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 307 18" class="design-iconfont">
<defs>
<linearGradient x1="39.9654493%" y1="50%" x2="100%" y2="50%" id="ira5kdg3m__bgq5cxgzha">
<stop stop-color="#1BA1FF" stop-opacity=".29884178" offset="0%"/>
<stop stop-color="#1BA1FF" stop-opacity=".08735795" offset="100%"/>
</linearGradient>
<linearGradient x1=".80535502%" y1="50.0011936%" x2="100%" y2="49.9988064%" id="ira5kdg3m__uoocqy617b">
<stop stop-color="#30AAFF" offset="0%"/>
<stop stop-color="#0073FF" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="url(#ira5kdg3m__bgq5cxgzha)" d="M0 0H307V17H0z"/>
<path fill="url(#ira5kdg3m__uoocqy617b)" d="M0 16H307V17.5H0z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 779 B

BIN
web/client/assets/images/monitor/pump.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

25
web/client/index.ejs

@ -20,6 +20,31 @@
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: D-DIN-Italic;
src: url("/assets/font_sc/D-DIN-Italic.otf");
}
@font-face {
font-family: SourceHanSansCN-Medium;
src: url("/assets/font_sc/SourceHanSansCN-Medium.otf");
}
@font-face {
font-family: SourceHanSansCN-Regular;
src: url("/assets/font_sc/SourceHanSansCN-Regular.otf");
}
@font-face {
font-family: D-DIN;
src: url("/assets/font_sc/D-DIN.ttf");
}
@font-face {
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
</style>
<body style="background: transparent">

25
web/client/index.html

@ -21,6 +21,31 @@
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
@font-face {
font-family: D-DIN-Italic;
src: url("/assets/font_sc/D-DIN-Italic.otf");
}
@font-face {
font-family: SourceHanSansCN-Medium;
src: url("/assets/font_sc/SourceHanSansCN-Medium.otf");
}
@font-face {
font-family: SourceHanSansCN-Regular;
src: url("/assets/font_sc/SourceHanSansCN-Regular.otf");
}
@font-face {
font-family: D-DIN;
src: url("/assets/font_sc/D-DIN.ttf");
}
@font-face {
font-family: D-DIN-Bold;
src: url("/assets/font_sc/D-DIN-Bold.ttf");
}
</style>
<body>

8
web/client/src/sections/bigScreen/components/amap.js

@ -21,17 +21,15 @@ const Amap = (props) => {
const loadMap = () => {
map = new AMap.Map("amapId", {
resizeEnable: true,
center: [115.934544, 28.664365], // 地图中心点,初始定位加载显示楼块
// center: [115.857952, 28.683003],// 地图中心点
center: [115.99255, 28.503617], // 地图中心点,初始定位加载显示楼块
zoom: 14, // 地图显示的缩放级别
zooms: [3, 20],
zooms: [5, 20],
pitch: 0, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode: '3D', // 地图模式
mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc', // 主题样式
// rotation: 60
// showLabel: false
});
// 主题样式
map.setMapStyle("amap://styles/fb26776387242721c2fc32e2cb1daccc");
map.on('complete', function () {
console.log("map-complete")

31
web/client/src/sections/bigScreen/components/basis.js

@ -2,20 +2,37 @@ import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Card, Modal, TreeSelect, message } from 'antd';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';
import Left_1 from './basis/left_1';
import Left_2 from './basis/left_2';
import Right_1 from './basis/right_1';
import Right_2 from './basis/right_2';
import './basis.less'
const Basis = ({ user, module, setModule }) => {
useEffect(() => {
}, [])
return <div>
<div className='super-screen-body left'>
基础信息
}, [])
const left1Data = [
{ name: '雄溪站站站站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
{ name: '雄溪站', level: 3 },
]
return <div className='super-screen-body'>
<div className='super-screen-card left'>
<Left_1 data={left1Data} />
<Left_2 />
</div>
<div className='super-screen-body right'>
基础信息
<div className='super-screen-card right'>
<Right_1 />
<Right_2 />
</div>
</div >
}

69
web/client/src/sections/bigScreen/components/basis.less

@ -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 {
left: 20px;
}
.right {
right: 0;
.right {
right: 20px;
}
}

22
web/client/src/sections/bigScreen/components/basis/left_1.js

@ -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>
)
}

47
web/client/src/sections/bigScreen/components/basis/left_1.less

@ -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;
}
}
}
}
}

13
web/client/src/sections/bigScreen/components/basis/left_2.js

@ -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>
)
}

100
web/client/src/sections/bigScreen/components/basis/right_1.js

@ -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>
)
}

125
web/client/src/sections/bigScreen/components/basis/right_1.less

@ -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;
}
}
}
}

14
web/client/src/sections/bigScreen/components/basis/right_2.js

@ -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>
)
}

13
web/client/src/sections/bigScreen/components/public/cardTitle.js

@ -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>
)
}

18
web/client/src/sections/bigScreen/components/public/cardTitle.less

@ -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;
}
}

27
web/client/src/sections/bigScreen/containers/style.less

@ -29,3 +29,30 @@
width: 100%;
z-index: 6;
}
.bigscreen-select {
.ant-select-selector {
background-color: transparent !important;
height: 18px !important;
}
.ant-select-focused {
border: 0px;
}
.ant-select-selection-item {
color: #fff;
font-family: YouSheBiaoTiHei;
height: 16px !important;
line-height: 16px !important;
text-align: right;
}
.ant-select-selection-search {
color: #fff;
}
.ant-select-arrow {
color: #fff;
}
}

Loading…
Cancel
Save