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

2 years ago · 81c5ac9f09
11 changed files with 163 additions and 49 deletions
--- a/web/client/assets/font_sc/YouSheBiaoTiHei-2.ttf
+++ b/web/client/assets/font_sc/YouSheBiaoTiHei-2.ttf
--- a/web/client/assets/images/monitor/bg-bottom.png
+++ b/web/client/assets/images/monitor/bg-bottom.png
--- a/web/client/assets/images/monitor/bg-header.png
+++ b/web/client/assets/images/monitor/bg-header.png
--- a/web/client/index.ejs
+++ b/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>

-<body style="background: transparent">
-    <div id='App'></div>
+<style>
+  @font-face {
+    font-family: YouSheBiaoTiHei;
+    src: url("/assets/font_sc/YouSheBiaoTiHei-2.ttf");
+  }
+</style>

+<body style="background: transparent">
+  <div id='App'></div>
 </body>

 </html>
--- a/web/client/index.html
+++ b/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>
--- a/web/client/src/sections/bigScreen/components/amap.js
+++ b/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;
--- a/web/client/src/sections/bigScreen/components/basis.js
+++ b/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 }) => {

+   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 >
 }

-function mapStateToProps (state) {
+function mapStateToProps(state) {
   const { auth, global } = state;
   return {
      user: auth.user,
--- a/web/client/src/sections/bigScreen/components/basis.less
+++ b/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;
+}
--- a/web/client/src/sections/bigScreen/components/header.js
+++ b/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,
--- a/web/client/src/sections/bigScreen/containers/style.less
+++ b/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;
+}
--- a/web/client/src/sections/bigScreen/containers/systemManagement.js
+++ b/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,