Merge branch 'master' of http://git.ycjcjy.com/nanyang/machinery-admin

src/components/AMap/loader.js

@@ -1,7 +1,7 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 
-const WEB_KEY = '29259f677b42900507074fd92ecb628a';
-const SERVER_KEY = '3be0a9567a794d2690d378476f057a6f';
+const WEB_KEY = '7c02d93b855ab284c12911c231aa2233';
+const SERVER_KEY = 'a30b66a26ea1890fd656cf11cb2647fb';
 
 export default (plugins, uiPlugins) => {
   return AMapLoader.load({

src/components/GeoMap/geoPolygon.js

@@ -12,13 +12,13 @@ export default (AMap, map) => {
   const pathArray = [outer, holes];
 
   const polygon = new AMap.Polygon({
-    pathL: pathArray,
-    strokeColor: '#3D81F0',
+    zIndex: 6,
+    path: pathArray,
+    strokeColor: '#001024',
     strokeWeight: 1,
-    strokeOpacity: 0.1,
-    fillColor: '#3D81F0',
-    fillOpacity: 0.5,
+    strokeOpacity: 0.5,
+    fillColor: '#061E3F',
+    fillOpacity: 1,
   });
-  polygon.setPath(pathArray);
   map.add(polygon);
 };

src/components/GeoMap/index.jsx

@@ -1,27 +1,64 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import loader from '@/components/AMap/loader';
+import getMarker from './marker';
 import geoPolygon from './geoPolygon';
+import Styles from './style.less';
 
 const plugins = [];
 
 export default (props) => {
   const container = useRef();
+  const amapRef = useRef();
+  const [map, setMap] = useState();
 
   useEffect(() => {
     loader(plugins).then((AMap) => {
-      const map = new AMap.Map(container.current, {
-        mapStyle: 'amap://styles/darkblue',
+      amapRef.current = AMap;
+      const mapInst = new AMap.Map(container.current, {
+        // mapStyle: 'amap://styles/669a7d8709a9bab0945747a1a1db3327',
+        mapStyle: 'amap://styles/blue',
         zoom: 10,
         resizeEnable: true,
         center: [112.092716, 32.681642],
       });
 
-      map.setFeatures(['road', 'bg']); // 只显示道路
-
       // 遮罩层;
-      geoPolygon(AMap, map);
+      geoPolygon(AMap, mapInst);
+
+      //
+      setMap(mapInst);
     });
   }, []);
 
-  return <div ref={container} style={{ height: '100%' }} />;
+  useEffect(() => {
+    if (!map) return;
+
+    // 先搞一个 marker demo
+    getMarker(amapRef.current, map, {
+      position: [112.092716, 32.681642],
+      extData: { value: '68辆' },
+    });
+  }, [map]);
+
+  return (
+    <div className={Styles['geo-map-container']}>
+      {/* 占位图片 */}
+      <div className={Styles['geo-map-header']}>
+        <div />
+        <div />
+        <div />
+      </div>
+
+      <div className={Styles['geo-map-body']}>
+        <div ref={container} />
+      </div>
+
+      {/* 占位图片 */}
+      <div className={Styles['geo-map-footer']}>
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  );
 };

src/components/GeoMap/marker.js

@@ -0,0 +1,36 @@
+import markerImg from '@/assets/images/screen/map-marker.png';
+
+export default (AMap, map, opts = {}) => {
+  const marker = new AMap.Marker({
+    map,
+    icon: markerImg,
+    anchor: 'top-center',
+    offset: new AMap.Pixel(0, 0),
+    ...opts,
+  });
+
+  let show = false;
+  const content = opts?.extData?.value;
+
+  marker.on('click', () => {
+    if (show) {
+      marker.setLabel({ content: '' });
+      show = false;
+      return;
+    }
+
+    if (!content) {
+      marker.setLabel({ content: '' });
+    } else {
+      marker.setLabel({
+        direction: 'top',
+        offset: new AMap.Pixel(0, 0),
+        content: `<div class='geo-map-marker-label'><div class='geo-map-marker-label-text'>${content}</div></div>`,
+      });
+    }
+
+    show = true;
+  });
+
+  return marker;
+};

src/components/GeoMap/style.less

@@ -0,0 +1,71 @@
+.geo-map-container {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+
+  .geo-map-body {
+    height: calc(100% - 54px);
+    padding: 0 20px;
+    background-color: #061e3f;
+    border-right: 1px solid rgba(61, 129, 240, 0.5);
+    border-left: 1px solid rgba(61, 129, 240, 0.5);
+
+    & > div {
+      height: 100%;
+    }
+  }
+
+  .geo-map-header {
+    display: flex;
+    background-color: #061e3f;
+    & > div {
+      &:first-child {
+        flex: 1;
+        height: 37px;
+        border-top: 1px solid rgba(61, 129, 240, 0.5);
+        border-left: 1px solid rgba(61, 129, 240, 0.5);
+        border-top-left-radius: 12px;
+      }
+      &:last-child {
+        flex: 1;
+        height: 37px;
+        border-top: 1px solid rgba(61, 129, 240, 0.5);
+        border-right: 1px solid rgba(61, 129, 240, 0.5);
+        border-top-right-radius: 12px;
+      }
+      &:nth-child(2) {
+        flex: none;
+        width: 326px;
+        height: 37px;
+        background: #061e3f url('~@/assets/images/screen/map-bg-header.png') no-repeat center 100%;
+      }
+    }
+  }
+
+  .geo-map-footer {
+    display: flex;
+    height: 17px;
+
+    & > div {
+      &:first-child {
+        flex: none;
+        width: 99px;
+        height: 17px;
+        background: url('~@/assets/images/screen/map-bg-lbt.png') no-repeat 100% 100%;
+      }
+      &:last-child {
+        flex: none;
+        width: 99px;
+        height: 17px;
+        background: url('~@/assets/images/screen/map-bg-rbt.png') no-repeat 100% 100%;
+      }
+      &:nth-child(2) {
+        flex: 1;
+        height: 17px;
+        background: url('~@/assets/images/screen/map-bg-mbt.png') repeat-x;
+      }
+    }
+  }
+}

src/components/ScreenBox/StatisCard/index.jsx

@@ -0,0 +1,32 @@
+import React, { useMemo } from 'react';
+
+import icon1 from '@/assets/images/screen/statis-icon1.png';
+import icon2 from '@/assets/images/screen/statis-icon2.png';
+import icon3 from '@/assets/images/screen/statis-icon3.png';
+import icon4 from '@/assets/images/screen/statis-icon4.png';
+import Styles from './style.less';
+
+const icon = {
+  icon1,
+  icon2,
+  icon3,
+  icon4,
+};
+
+export default (props) => {
+  const titleStyle = useMemo(() => ({ color: props.color || '#23E8AE' }), [props.color]);
+
+  return (
+    <div className={Styles['statis-card']}>
+      <div>
+        <div className={Styles['statis-title']} style={titleStyle}>
+          <span>
+            <img src={icon[props.icon]} alt="" />
+          </span>
+          <span>{props.value}</span>
+        </div>
+        <div className={Styles['statis-subtitle']}>{props.title}</div>
+      </div>
+    </div>
+  );
+};

src/components/ScreenBox/StatisCard/style.less

@@ -0,0 +1,41 @@
+.statis-card {
+  display: grid;
+  width: 100%;
+
+  height: 96px;
+  border: 6px solid #fff;
+  border-image: url('~@/assets/images/screen/statis-bg.png');
+  border-image-slice: 3 6 4 fill;
+  border-image-repeat: repeat;
+  place-items: center;
+
+  & + .statis-card {
+    margin-left: 30px;
+  }
+
+  .statis-title {
+    color: #23e8ae;
+    font-size: 28px;
+    line-height: 28px;
+    letter-spacing: 2px;
+
+    span + span {
+      display: inline-block;
+      margin-left: 4px;
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+      margin-bottom: 2px; // line-height: 28px;
+    }
+  }
+
+  .statis-subtitle {
+    margin-top: 1em;
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: bold;
+    font-size: 12px;
+    letter-spacing: 2px;
+  }
+}

src/global.less

@@ -55,3 +55,22 @@ ol {
     min-height: 100vh;
   }
 }
+
+.amap-marker-label {
+  background: transparent;
+  border: none;
+}
+
+.geo-map-marker-label {
+  display: inline-block;
+  padding: 20px;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.geo-map-marker-label-text {
+  font-size: 24px;
+  line-height: 24px;
+  background-image: linear-gradient(180deg, #fca790 0%, #e63404 93.84765625%);
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

src/pages/MonitoringScreen/index.jsx

@@ -13,6 +13,7 @@ import DateCommponetsBottomRight from './DateCommponetsBottomRight';
 import DateCommponetsBottomLeft from './DateCommponetsBottomLeft';
 
 import Styles from './style.less';
+import StatisCard from '@/components/ScreenBox/StatisCard';
 export default (props) => {
   const screenRef = useRef();
   const [height, setHeight] = useState('auto');
@@ -44,20 +45,24 @@ export default (props) => {
           <div className={Styles['grail-header']}>
             <ScreenHeader weather="多云 21-28 °C" />
           </div>
-          <div className={classNames(Styles['grail-container'], Styles['mg-tp-40'])}>
+          <div className={classNames(Styles['grail-container'], Styles['pd-tp-40'])}>
             <div className={Styles['grail-left']}>
               <DateCommponetsLeft />
-              <div className={Styles['mg-tp-40']}>{/* 占位 */}</div>
-              <DateCommponetsBottomLeft />
             </div>
             <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
+              <div className={Styles['statis-container']}>
+                <StatisCard color="#23E8AE" icon="icon1" value={2346} title="农机总数（台）" />
+                <StatisCard color="#0BDAFF" icon="icon2" value={528} title="农机使用数（台）" />
+                <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数（台）" />
+                <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数（台）" />
+              </div>
               <GeoMap></GeoMap>
             </div>
             <div className={Styles['grail-right']}>
               <DateCommponetsBottomRight />
             </div>
           </div>
-          <div className={classNames(Styles['grail-footer'], Styles['mg-tp-40'])}></div>
+          <div className={classNames(Styles['grail-footer'], Styles['pd-tp-40'])}></div>
         </div>
       </div>
     </PageHeaderWrapper>

src/pages/MonitoringScreen/style.less

@@ -16,15 +16,18 @@
   }
 
   .grail-layout {
+    display: flex;
+    flex-direction: column;
     height: 100%;
 
     .grail-header,
     .grail-footer {
-      //
+      flex: none;
     }
 
     .grail-container {
       display: flex;
+      flex: 1;
       height: 100%;
 
       .grail-left,
@@ -33,10 +36,27 @@
       }
 
       .grail-content {
+        display: flex;
         flex: 2;
+        flex-direction: column;
+
+        & > div {
+          &:first-child {
+            flex: none;
+          }
+
+          &:last-child {
+            flex: 1;
+          }
+        }
       }
     }
   }
+
+  .statis-container {
+    display: flex;
+    margin-bottom: 30px;
+  }
 }
 
 .pd-lr-40 {
@@ -44,6 +64,6 @@
   padding-left: 40px;
 }
 
-.mg-tp-40 {
-  margin-top: 40px;
+.pd-tp-40 {
+  padding-top: 40px;
 }