wenlele 1 year ago
parent
commit
81c5ac9f09
  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

Binary file not shown.

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

32
web/client/index.ejs

@ -2,22 +2,28 @@
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/assets/images/logo.png">
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
}
</script>
<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> -->
<meta charset="UTF-8">
<link rel="shortcut icon" href="/assets/images/logo.png">
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
}
</script>
<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> -->
</head>
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
</style>
<body style="background: transparent">
<div id='App'></div>
<div id='App'></div>
</body>
</html>

15
web/client/index.html

@ -8,16 +8,22 @@
<link rel="stylesheet" type="text/css" href="/assets/font_sc/iconfont.css">
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
securityJsCode: 'e955cd5ddfc3a752aa27d1e1c67d182d',
}
</script>
</script>
<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>
<body>
<style>
@font-face {
font-family: YouSheBiaoTiHei;
src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
}
</style>
<body>
<script>
window.less = {
async: false,
@ -27,7 +33,6 @@
<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/app.js"></script>
</body>
</html>

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

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

@ -1,21 +1,26 @@
import React from 'react';
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 './basis.less'
const Basis = ({ user, module, setModule }) => {
return <div style={{ width: '100%', height: '100%' }}>
基础信息
useEffect(() => {
}, [])
return <div>
<div className='super-screen-body left'>
基础信息
</div>
<div className='super-screen-body right'>
基础信息
</div>
</div >
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { auth, global } = state;
return {
user: auth.user,

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

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

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

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

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

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

Loading…
Cancel
Save