free-sun
/
PumpStation
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of https://gitea.anxinyun.cn/wenlele/PumpStation

master
wenlele 2 years ago
parent
cd92f292df da1c46d61c
commit
81c5ac9f09
11 changed files with 163 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      web/client/assets/font_sc/YouSheBiaoTiHei-2.ttf
  2. BIN
      web/client/assets/images/monitor/bg-bottom.png
  3. BIN
      web/client/assets/images/monitor/bg-header.png
  4. 32
      web/client/index.ejs
  5. 15
      web/client/index.html
  6. 50
      web/client/src/sections/bigScreen/components/amap.js
  7. 23
      web/client/src/sections/bigScreen/components/basis.js
  8. 19
      web/client/src/sections/bigScreen/components/basis.less
  9. 10
      web/client/src/sections/bigScreen/components/header.js
  10. 31
      web/client/src/sections/bigScreen/containers/style.less
  11. 32
      web/client/src/sections/bigScreen/containers/systemManagement.js

BIN
web/client/assets/font_sc/YouSheBiaoTiHei-2.ttf
View File

Binary file not shown.

BIN
web/client/assets/images/monitor/bg-bottom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
web/client/assets/images/monitor/bg-header.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

32
web/client/index.ejs
View File

@ -2,22 +2,28 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="shortcut icon" href="/assets/images/logo.png"> <link rel="shortcut icon" href="/assets/images/logo.png">
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> <link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript"> <script type="text/javascript">
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d', securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
} }
</script> </script>
<script <script
src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch"></script> src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch"></script>
<!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> --> <!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> -->
</head> </head>
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
</style>
<body style="background: transparent"> <body style="background: transparent">
<div id='App'></div> <div id='App'></div>
</body> </body>
</html> </html>

15
web/client/index.html
View File

@ -8,16 +8,22 @@
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css"> <link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript"> <script type="text/javascript">
window._AMapSecurityConfig = { window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d', securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
} }
</script> </script>
<script <script
src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch"></script> src="https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch"></script>
<!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> --> <!-- <script src="https://webapi.amap.com/loca?v=2.0.0&key=00f9a29dedcdbd8befec3dfe0cef5003"></script> -->
</head> </head>
<body> <style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
</style>
<body>
<script> <script>
window.less = { window.less = {
async: false, async: false,
@ -27,7 +33,6 @@
<div id='App'></div> <div id='App'></div>
<script type="text/javascript" src="http://localhost:5901/client/build/vendor.js"></script> <script type="text/javascript" src="http://localhost:5901/client/build/vendor.js"></script>
<script type="text/javascript" src="http://localhost:5901/client/build/app.js"></script> <script type="text/javascript" src="http://localhost:5901/client/build/app.js"></script>
</body> </body>
</html> </html>

50
web/client/src/sections/bigScreen/components/amap.js
View File

@ -0,0 +1,50 @@
import React, { useEffect, useState } from 'react';
let map = '';
const Amap = (props) => {
const [mapComplete, setMapComplete] = useState(false);
useEffect(() => {
drawMap();
}, []);
const drawMap = () => {
try {
if (AMap) loadMap();
} catch (e) {
var script = document.createElement("script");
script.src = "https://webapi.amap.com/maps?v=2.0&key=00f9a29dedcdbd8befec3dfe0cef5003&plugin=AMap.AutoComplete,AMap.PlaceSearch";
document.body.appendChild(script);
loadMap();
}
}
const loadMap = () => {
map = new AMap.Map("amapId", {
resizeEnable: true,
center: [115.934544, 28.664365], // 地图中心点，初始定位加载显示楼块
// center: [115.857952, 28.683003],// 地图中心点
zoom: 14, // 地图显示的缩放级别
zooms: [3, 20],
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
viewMode: '3D', // 地图模式
// rotation: 60
// showLabel: false
});
// 主题样式
map.setMapStyle("amap://styles/fb26776387242721c2fc32e2cb1daccc");
map.on('complete', function () {
console.log("map-complete")
setMapComplete(true);
});
window.onload = function () {
console.log("window.onload")
}
};
return <div style={{ width: '100%', height: '100%', }}>
<div id='amapId' style={{ width: '100%', height: '100%', background: "#101824" }} />
</div>
}
export default Amap;

23
web/client/src/sections/bigScreen/components/basis.js
View File

@ -1,21 +1,26 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Spin, Card, Modal, TreeSelect, message } from 'antd'; import { Spin, Card, Modal, TreeSelect, message } from 'antd';
import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form'; import ProForm, { ProFormText, ModalForm, ProFormSwitch, ProFormTreeSelect } from '@ant-design/pro-form';
import './basis.less'
const Basis = ({ user, module, setModule }) => { const Basis = ({ user, module, setModule }) => {
useEffect(() => {
}, [])
return <div style={{ width: '100%', height: '100%' }}> return <div>
基础信息 <div className='super-screen-body left'>
基础信息
</div>
<div className='super-screen-body right'>
基础信息
</div>
</div > </div >
} }
function mapStateToProps (state) { function mapStateToProps(state) {
const { auth, global } = state; const { auth, global } = state;
return { return {
user: auth.user, user: auth.user,

19
web/client/src/sections/bigScreen/components/basis.less
View File

@ -0,0 +1,19 @@
.super-screen-body {
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;
color: #fff;
}
.left {
left: 0;
}
.right {
right: 0;
}

10
web/client/src/sections/bigScreen/components/header.js
View File

@ -17,10 +17,10 @@ const Header = ({ dispatch, actions, user, module, setModule, history }) => {
alignItems: 'center' alignItems: 'center'
}}> }}>
<div style={{ width: 200, color: 'white', }}>天气</div> <div style={{ width: 200, color: 'white', }}>天气</div>
{/* <div style={{ <div style={{
width: 424, lineHeight: '136px', lineHeight: '136px', fontFamily: 'YouSheBiaoTiHei',
fontFamily: 'YouSheBiaoTiHei', fontSize: 43, color: '#E2F8FF', letterSpacing: 4, fontWeight: 600 fontSize: 48, color: '#E2F8FF', letterSpacing: 4,
}}>泵站自动化控制系统</div> */} }}>泵站自动化控制系统</div>
<div style={{ width: 200, color: 'white', display: 'flex', alignItems: 'center' }}> <div style={{ width: 200, color: 'white', display: 'flex', alignItems: 'center' }}>
<div style={{ <div style={{
width: 130, height: 52, width: 130, height: 52,
@ -66,7 +66,7 @@ const Header = ({ dispatch, actions, user, module, setModule, history }) => {
</div > </div >
} }
function mapStateToProps (state) { function mapStateToProps(state) {
const { auth, global } = state; const { auth, global } = state;
return { return {
user: auth.user, user: auth.user,

31
web/client/src/sections/bigScreen/containers/style.less
View File

@ -0,0 +1,31 @@
.map {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}
.super-screen-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px;
z-index: 6;
}
.super-screen-bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 6;
}
.header {
position: absolute;
width: 100%;
z-index: 6;
}

32
web/client/src/sections/bigScreen/containers/systemManagement.js
View File

@ -9,6 +9,8 @@ import Basis from '../components/basis';
import Capacity from '../components/capacity'; import Capacity from '../components/capacity';
import Electrical from '../components/electrical'; import Electrical from '../components/electrical';
import RealTime from '../components/realTime'; import RealTime from '../components/realTime';
import Amap from '../components/AMap';
import './style.less';
const TreeNode = Tree.TreeNode; const TreeNode = Tree.TreeNode;
@ -19,34 +21,30 @@ const SystemManagement = ({ clientHeight, user, history }) => {
}, []) }, [])
return ( return (
<div style={{ <div style={{
width: '100vw', height: '100vh', width: '100vw', height: '100vh',
backgroundImage: 'url(/assets/images/monitor/screen-bg.png)', backgroundImage: module == 'basis' ? 'none' : 'url(/assets/images/monitor/screen-bg.png)',
backgroundSize: '100% 100%', backgroundSize: 'cover',
backgroundPosition: 'center' backgroundPosition: 'center'
}}> }}>
<div style={{ <img src='/assets/images/monitor/bg-header.png' className='super-screen-top'></img>
width: '100%', height: '100%', <img src='/assets/images/monitor/bg-bottom.png' className='super-screen-bottom'></img>
backgroundImage: 'url(/assets/images/monitor/header-bg.png)', <div className='header'>
backgroundSize: '100% 100%',
backgroundPosition: 'center'
}}>
<Header module={module} setModule={setModule} history={history} /> <Header module={module} setModule={setModule} history={history} />
{module == 'basis' ? <Basis /> : ""}
{module == 'capacity' ? <Capacity /> : ""}
{module == 'electrical' ? <Electrical /> : ""}
{module == 'realTime' ? <RealTime /> : ""}
</div> </div>
{module == 'basis' ? <>
<div className='map'><Amap /></div>
<Basis />
</> : ""}
{module == 'capacity' ? <Capacity /> : ""}
{module == 'electrical' ? <Electrical /> : ""}
{module == 'realTime' ? <RealTime /> : ""}
</div> </div>
) )
} }
function mapStateToProps (state) { function mapStateToProps(state) {
const { auth, global } = state; const { auth, global } = state;
return { return {
user: auth.user, user: auth.user,

Write Preview
Loading…
Cancel
Save