eats

config/config.js

@@ -67,7 +67,7 @@ export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
   },
-  mfsu: {},
+  // mfsu: {},
   webpack5: {},
   exportStatic: {},
 });

config/routes.js

@@ -44,6 +44,7 @@ export default [
   },
   {
     path: '/MonitoringScreen',
+    layout: false,
     name: '数据大屏',
     icon: 'DesktopOutlined',
     component: './MonitoringScreen',

package.json

@@ -47,7 +47,6 @@
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@ant-design/charts": "^1.3.5",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-card": "^1.18.34",
     "@ant-design/pro-descriptions": "^1.10.0",
@@ -70,6 +69,7 @@
     "react-dev-inspector": "^1.7.0",
     "react-dom": "^17.0.0",
     "react-helmet-async": "^1.2.0",
+    "swiper": "^8.0.7",
     "umi": "^3.5.0"
   },
   "devDependencies": {

src/components/AMap/loader.js

@@ -1,7 +1,7 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 
 const WEB_KEY = '7c02d93b855ab284c12911c231aa2233';
-const SERVER_KEY = 'a30b66a26ea1890fd656cf11cb2647fb';
+// const SERVER_KEY = 'a30b66a26ea1890fd656cf11cb2647fb';
 
 export default (plugins, uiPlugins) => {
   window._AMapSecurityConfig = {

src/components/AMap/weather.js

@@ -0,0 +1,15 @@
+const SERVER_KEY = 'a30b66a26ea1890fd656cf11cb2647fb';
+
+export default function getWeather(city) {
+  const url = `https://restapi.amap.com/v3/weather/weatherInfo?key=${SERVER_KEY}&city=${city}&extensions=all`;
+
+  return fetch(url)
+    .then((res) => res.json())
+    .then((res) => {
+      if (res.info === 'OK') {
+        return res.forecasts;
+      } else {
+        return Promise.reject(res.info);
+      }
+    });
+}

src/components/ScreenBox/Clock/hooks.jsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+
+function zeroPadding(num) {
+  return num < 10 ? `0${num}` : `${num}`;
+}
+
+function getTime(dt) {
+  const hour = dt.getHours();
+  const minuts = dt.getMinutes();
+  const seconds = dt.getSeconds();
+
+  return [zeroPadding(hour), zeroPadding(minuts), zeroPadding(seconds)].join(':');
+}
+
+function getDate(dt) {
+  const year = dt.getFullYear();
+  const month = dt.getMonth() + 1;
+  const day = dt.getDate();
+
+  return [year, zeroPadding(month), zeroPadding(day)].join('-');
+}
+
+export function useTime() {
+  const [time, setTime] = useState();
+
+  useEffect(() => {
+    setTime(getTime(new Date()));
+    const t = setInterval(() => {
+      setTime(getTime(new Date()));
+    }, 1000);
+
+    return () => clearInterval(t);
+  }, []);
+
+  return time;
+}
+
+export function useDate() {
+  const [time, setTime] = useState();
+
+  useEffect(() => {
+    setTime(getDate(new Date()));
+    const t = setInterval(() => {
+      setTime(getDate(new Date()));
+    }, 60000);
+
+    return () => clearInterval(t);
+  }, []);
+
+  return time;
+}

src/components/ScreenBox/Clock/index.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useDate, useTime } from './hooks';
+import Styles from './style.less';
+
+export default (props) => {
+  const time = useTime();
+  const day = useDate();
+
+  const str = props.mode === 'time' ? time : day;
+
+  console.log('------strstrstr------>', str);
+
+  return (
+    <div className={classNames(Styles['clock-box'], props.className)}>
+      <div className={Styles['time-label']}>{str}</div>
+    </div>
+  );
+};

src/components/ScreenBox/Clock/style.less

@@ -0,0 +1,11 @@
+.clock-box {
+  height: 100%;
+  color: #daf6ff;
+  font-family: 'Share Tech Mono', monospace;
+  text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
+
+  .time-label {
+    font-weight: bold;
+    letter-spacing: 0.05em;
+  }
+}

src/components/ScreenBox/ScreenHeader/index.jsx

@@ -1,4 +1,5 @@
 import titleImg from '@/assets/images/screen/header-title.png';
+import Clock from '../Clock';
 import Styles from './style.less';
 
 export default (props) => {
@@ -7,11 +8,15 @@ export default (props) => {
       <div className={Styles['screen-header-left']}>
         <div>数据概览</div>
       </div>
-      <div className={Styles['screen-header-left']}>{/* 只负责占位 */}</div>
+      <div className={Styles['screen-header-left']}>
+        <Clock className={Styles['clock-date']} />
+      </div>
       <div className={Styles['screen-header-content']}>
         <img src={titleImg} alt="" />
       </div>
-      <div className={Styles['screen-header-right']}>{/* 只负责占位 */}</div>
+      <div className={Styles['screen-header-right']}>
+        <Clock className={Styles['clock-time']} mode="time" />
+      </div>
       <div className={Styles['screen-header-right']}>
         <div>{props.weather}</div>
       </div>

src/components/ScreenBox/ScreenHeader/style.less

@@ -16,12 +16,17 @@
   .screen-header-right {
     display: grid;
     flex: 1;
-    letter-spacing: 2px;
+    color: #daf6ff;
+    line-height: 2em;
+    letter-spacing: 0.05em;
     text-align: left;
+    text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
     place-items: center;
 
     & > div {
       width: 100%;
+      font-weight: bold;
+      font-size: 16px;
     }
   }
 
@@ -30,6 +35,7 @@
   }
 
   .screen-header-content {
+    position: relative;
     display: flex;
     flex: 6;
     align-items: center;
@@ -40,10 +46,25 @@
     }
   }
 
+  .clock-date {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    margin-left: 2em;
+    font-size: 20px !important;
+  }
+
+  .clock-time {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    font-size: 20px !important;
+  }
+
   .attchment {
     color: #fff;
+    font-weight: bold;
     font-size: 12px;
-    line-height: 2em;
 
     &.attchment-right {
       text-align: right;

src/components/ScreenBox/TitleBox/style.less

@@ -12,7 +12,9 @@
     display: inline-block;
     width: 10px;
     height: 10px;
-    background: linear-gradient(0deg, #0c49c6, #3bd6e8);
+    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+    background-size: 400% 400%;
+    animation: gradient 5s ease infinite;
   }
   .TitleBox-ListBox-value {
     margin-left: 12px;
@@ -22,4 +24,16 @@
     background: linear-gradient(0deg, #0c49c6, #3bd6e8);
     background-clip: text;
   }
+
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
 }

src/global.jsx

@@ -1,6 +1,7 @@
 import { Button, message, notification } from 'antd';
 import { useIntl } from 'umi';
 import defaultSettings from '../config/defaultSettings';
+
 const { pwa } = defaultSettings;
 const isHttps = document.location.protocol === 'https:';
 

src/pages/MonitoringScreen/components/List/index.jsx

@@ -1,9 +1,14 @@
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper';
+import 'swiper/css';
 import classNames from 'classnames';
 import Item from './Item';
 import Styles from './style.less';
 
 export default (props) => {
+  // 每次加载 4 个
+  const tm = 4;
   const { title, color, children } = props;
 
   const classList = classNames(Styles['list-title'], {
@@ -16,9 +21,24 @@ export default (props) => {
       <div className={classList}>
         <div>{title}</div>
       </div>
-      {React.Children.map(children, (child) => (
-        <Item color={color}>{child}</Item>
-      ))}
+      <Swiper
+        height={48}
+        className={Styles['list-body']}
+        autoplay={{
+          delay: 2500,
+          disableOnInteraction: false,
+        }}
+        loop
+        loopAdditionalSlides={2}
+        modules={[Autoplay]}
+        direction="vertical"
+      >
+        {React.Children.map(children, (child) => (
+          <SwiperSlide>
+            <Item color={color}>{child}</Item>
+          </SwiperSlide>
+        ))}
+      </Swiper>
     </div>
   );
 };

src/pages/MonitoringScreen/components/List/style.less

@@ -89,4 +89,9 @@
       background: #25e1aa;
     }
   }
+
+  .list-body {
+    width: 100%;
+    height: 144px;
+  }
 }

src/pages/MonitoringScreen/hook.js

@@ -14,27 +14,8 @@ export function useFullScreen(elRef) {
     }
   }, []);
 
-  // useResize((w, h) => {
-  //   if (fullScreenRef.current) {
-  //     calcStyle();
-  //   } else {
-  //     setStyle({
-  //       width: `${w}px`,
-  //       height: `${h}px`,
-  //     });
-  //   }
-
-  //   setIsFullScreen(!fullScreenRef.current);
-  // });
-
   useEffect(() => {
-    console.log('-----fullscreenchange------>', elRef.current);
     const handleFullScreenChange = (e) => {
-      console.log(
-        '-----handleFullScreenChange------>',
-        document.fullscreenElement,
-        fullScreenRef.current,
-      );
       setIsFullScreen(document.fullscreenElement === fullScreenRef.current);
     };
 
@@ -47,3 +28,118 @@ export function useFullScreen(elRef) {
 
   return { isFullScreen, toggleFullScreen };
 }
+
+export function useParticlesJs(id) {
+  useEffect(() => {
+    window.particlesJS(id, {
+      particles: {
+        number: {
+          value: 20,
+          density: {
+            enable: true,
+            value_area: 400,
+          },
+        },
+        color: {
+          value: '#2FB3DF',
+        },
+        shape: {
+          type: 'circle',
+          stroke: {
+            width: 0,
+            color: '#000000',
+          },
+          polygon: {
+            nb_sides: 5,
+          },
+          image: {
+            src: 'img/github.svg',
+            width: 100,
+            height: 100,
+          },
+        },
+        opacity: {
+          value: 0.5,
+          random: false,
+          anim: {
+            enable: false,
+            speed: 1,
+            opacity_min: 0.1,
+            sync: false,
+          },
+        },
+        size: {
+          value: 3,
+          random: true,
+          anim: {
+            enable: false,
+            speed: 40,
+            size_min: 0.1,
+            sync: false,
+          },
+        },
+        line_linked: {
+          enable: true,
+          distance: 150,
+          color: '#2FB3DF',
+          opacity: 0.5,
+          width: 2,
+        },
+        move: {
+          enable: true,
+          speed: 6,
+          direction: 'none',
+          random: false,
+          straight: false,
+          out_mode: 'out',
+          bounce: false,
+          attract: {
+            enable: false,
+            rotateX: 600,
+            rotateY: 1200,
+          },
+        },
+      },
+      interactivity: {
+        detect_on: 'canvas',
+        events: {
+          onhover: {
+            enable: false,
+            mode: 'bubble',
+          },
+          onclick: {
+            enable: false,
+            mode: 'push',
+          },
+          resize: true,
+        },
+        modes: {
+          grab: {
+            distance: 400,
+            line_linked: {
+              opacity: 1,
+            },
+          },
+          bubble: {
+            distance: 400,
+            size: 40,
+            duration: 2,
+            opacity: 8,
+            speed: 3,
+          },
+          repulse: {
+            distance: 200,
+            duration: 0.4,
+          },
+          push: {
+            particles_nb: 4,
+          },
+          remove: {
+            particles_nb: 2,
+          },
+        },
+      },
+      retina_detect: true,
+    });
+  }, []);
+}

src/pages/MonitoringScreen/index.jsx

@@ -1,15 +1,12 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { history, Link } from 'umi';
 import classNames from 'classnames';
-// import { getPersonList, exportPersonList } from '@/services/person';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { FullscreenOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
 import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
 import GeoMap from '@/components/GeoMap';
 import StatisCard from '@/components/ScreenBox/StatisCard';
 import SquareBox from '@/components/ScreenBox/SquareBox';
-import { useFullScreen } from './hook';
+import getWeather from '@/components/AMap/weather';
+import { useParticlesJs } from './hook';
 import MachineryType from './components/MachineryType';
 import MachineryStatus from './components/MachineryStatus';
 
@@ -21,8 +18,7 @@ import Styles from './style.less';
 
 export default (props) => {
   const screenRef = useRef();
-  const [height, setHeight] = useState('800px');
-  const { isFullScreen, toggleFullScreen } = useFullScreen(screenRef);
+  const [weather, setWeather] = useState('暂无天气信息');
 
   const [machineryTypeData, setMachineryTypeData] = useState([
     { name: '收割机', value: 200 },
@@ -52,98 +48,115 @@ export default (props) => {
     { name: '其他', value: 180 },
   ]);
 
-  return (
-    <PageHeaderWrapper
-      extra={
-        <Button icon={<FullscreenOutlined />} onClick={toggleFullScreen}>
-          全屏
-        </Button>
+  useEffect(() => {
+    console.log('-------process------->', process);
+
+    getWeather('邓州市').then((res) => {
+      if (res && res.length) {
+        const { casts } = res[0];
+        const { dayweather, nighttemp, daytemp } = casts[0];
+        const [min, max] = nighttemp > daytemp ? [daytemp, nighttemp] : [nighttemp, daytemp];
+        setWeather(`${dayweather} ${min}-${max} °C`);
+      } else {
+        setWeather('暂无天气信息');
       }
-    >
-      <div
-        className={classNames(Styles['screen-page'], Styles['pd-lr-40'], {
-          [Styles['full-screen']]: isFullScreen,
-        })}
-        style={{ height }}
-        ref={screenRef}
-      >
-        <div className={Styles['grail-layout']}>
-          <div className={Styles['grail-header']}>
-            <ScreenHeader weather="多云 21-28 °C" />
-          </div>
-          <div className={classNames(Styles['grail-container'], Styles['mg-tp-30'])}>
-            <div className={Styles['grail-left']}>
-              <div className="flex flex-column full-height">
-                <div className="flex-0" style={{ minHeight: '37%' }}>
-                  <MachineryType source={machineryTypeData} />
-                </div>
-                <div className="flex-1" style={{ marginTop: '30px' }}>
-                  <MachineryStatus source={machineryStatusData} />
-                </div>
+    });
+  }, []);
+
+  useParticlesJs(Styles['particles-js']);
+
+  return (
+    <div className={classNames(Styles['screen-page'], Styles['pd-lr-40'])} ref={screenRef}>
+      <div id={Styles['particles-js']} />
+      <div className={Styles['grail-layout']}>
+        <div className={Styles['grail-header']}>
+          <ScreenHeader weather={weather} />
+        </div>
+        <div className={classNames(Styles['grail-container'], Styles['mg-tp-30'])}>
+          <div className={Styles['grail-left']}>
+            <div className="flex flex-column full-height">
+              <div className="flex-0" style={{ minHeight: '37%' }}>
+                <MachineryType source={machineryTypeData} />
               </div>
-            </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 className="flex-1" style={{ marginTop: '30px' }}>
+                <MachineryStatus source={machineryStatusData} />
               </div>
-              <GeoMap />
             </div>
-            <div className={Styles['grail-right']}>
-              <div className="flex flex-column full-height">
-                <div className="flex-0" style={{ minHeight: '37%' }}>
-                  <WorkData source={workData} />
-                </div>
-                <div className="flex-1" style={{ marginTop: '30px' }}>
-                  <WorkArea source={workAreaData} />
-                </div>
-              </div>
+          </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 />
           </div>
-          <div className={classNames(Styles['grail-footer'], Styles['mg-tp-30'])}>
-            <SquareBox>
-              <div className="flex" style={{ padding: '20px 0' }}>
-                <div className="flex-1">
-                  <List title="预约订单">
-                    <div>
-                      <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机，
-                      <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单！
-                    </div>
-                    <div>
-                      <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机，
-                      <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单！尽快赶到！
-                    </div>
-                    <div>
-                      <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机，
-                      <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
-                      接到了此订单！正在赶往目的地！
-                    </div>
-                  </List>
-                </div>
-                <div className={classNames('flex-0', Styles['footer-middle'])} />
-                <div className="flex-1">
-                  <List title="作业订单" color="green">
-                    <div>
-                      <ColorFont color="#44F68B">[收割机001]</ColorFont>
-                      32s前接到了一个订单，距离目的地还有3.2公里，请农户耐心等待！
-                    </div>
-                    <div>
-                      <ColorFont color="#44F68B">[播种机008]</ColorFont>{' '}
-                      2分钟前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
-                    </div>
-                    <div>
-                      <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
-                      2个小时前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
-                    </div>
-                  </List>
-                </div>
+          <div className={Styles['grail-right']}>
+            <div className="flex flex-column full-height">
+              <div className="flex-0" style={{ minHeight: '37%' }}>
+                <WorkData source={workData} />
               </div>
-            </SquareBox>
+              <div className="flex-1" style={{ marginTop: '30px' }}>
+                <WorkArea source={workAreaData} />
+              </div>
+            </div>
           </div>
         </div>
+        <div className={classNames(Styles['grail-footer'], Styles['mg-tp-30'])}>
+          <SquareBox>
+            <div className="flex" style={{ padding: '20px 0' }}>
+              <div className="flex-1">
+                <List title="预约订单">
+                  <div>
+                    <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机，
+                    <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单！
+                  </div>
+                  <div>
+                    <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机，
+                    <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单！尽快赶到！
+                  </div>
+                  <div>
+                    <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机，
+                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
+                    接到了此订单！正在赶往目的地！
+                  </div>
+                  <div>
+                    <ColorFont color="#F5CC5C">[快乐每一天]</ColorFont> 32s前预约了一台收割机，
+                    <ColorFont color="#44F68B">[收割机001]</ColorFont> 接到了此订单！
+                  </div>
+                  <div>
+                    <ColorFont color="#F5CC5C">[幸福人生]</ColorFont> 58分钟前预约了一台收割机，
+                    <ColorFont color="#44F68B">[播种机008]</ColorFont> 接到了此订单！尽快赶到！
+                  </div>
+                  <div>
+                    <ColorFont color="#F5CC5C">[灿烂人生]</ColorFont> 2个小时前预约了一台收割机，
+                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
+                    接到了此订单！正在赶往目的地！
+                  </div>
+                </List>
+              </div>
+              <div className={classNames('flex-0', Styles['footer-middle'])} />
+              <div className="flex-1">
+                <List title="作业订单" color="green">
+                  <div>
+                    <ColorFont color="#44F68B">[收割机001]</ColorFont>
+                    32s前接到了一个订单，距离目的地还有3.2公里，请农户耐心等待！
+                  </div>
+                  <div>
+                    <ColorFont color="#44F68B">[播种机008]</ColorFont>{' '}
+                    2分钟前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
+                  </div>
+                  <div>
+                    <ColorFont color="#44F68B">[收割机007]</ColorFont>{' '}
+                    2个小时前接到一个订单，距离目的地还有3.8公里，请农户耐心等待！
+                  </div>
+                </List>
+              </div>
+            </div>
+          </SquareBox>
+        </div>
       </div>
-    </PageHeaderWrapper>
+    </div>
   );
 };

src/pages/MonitoringScreen/style.less

@@ -1,7 +1,8 @@
 .screen-page {
   position: relative;
   width: 100%;
-  height: 100%;
+  // height: 100%;
+  height: 100vh;
   padding-bottom: 30px;
 
   background-color: #021222;
@@ -9,6 +10,14 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
 
+  #particles-js {
+    position: absolute;
+    z-index: 0;
+    width: calc(100% - 80px);
+    height: 100%;
+    background-color: transparent;
+  }
+
   &.full-screen {
     position: fixed;
     top: 0;

src/pages/document.ejs

@@ -24,6 +24,7 @@
     />
     <title>Ant Design Pro</title>
     <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
+    <script src="./js/particles.min.js"></script>
   </head>
   <body>
     <noscript>