feats

config/proxy.js

@@ -11,8 +11,8 @@ export default {
     // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
     '/api/': {
       // 要代理的地址
-      // target: 'http://127.0.0.1:7080',
-      target: 'http://192.168.89.76:7080',
+      target: 'http://127.0.0.1:7080',
+      // target: 'http://192.168.89.76:7080',
       // target: 'http://machine.njyunzhi.com',
       // 配置了这个可以从 http 代理到 https
       // 依赖 origin 的功能可能需要这个，比如 cookie

src/pages/MonitoringScreen2/components/BasicChart.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import SquareBox from '@/components/ScreenBox/SquareBox';
+import TitleBox from '@/components/ScreenBox/TitleBox';
+import ECharts from '@/components/ECharts';
+
+export default (props) => {
+  return (
+    <div style={{ height: '100%' }}>
+      <TitleBox value={props.title} />
+      <SquareBox style={{ height: 'calc(100% - 48px)', minHeight: '100px' }}>
+        <ECharts option={props.option} />
+      </SquareBox>
+    </div>
+  );
+};

src/pages/MonitoringScreen2/components/ColorFont.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default (props) => {
+  return <font color={props.color}>{props.children}</font>;
+};

src/pages/MonitoringScreen2/components/List/Item.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+import Styles from './style.less';
+
+export default (props) => {
+  const classList = classNames(Styles['screen-item'], {
+    [Styles['yellow-item']]: props.color !== 'green',
+    [Styles['green-item']]: props.color === 'green',
+  });
+
+  return (
+    <div className={classList}>
+      <div />
+      <div>{props.children}</div>
+    </div>
+  );
+};

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

@@ -0,0 +1,66 @@
+import React, { useCallback, useEffect, useRef } 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) => {
+  const { title, color, children } = props;
+  const swiperRef = useRef();
+  const classList = classNames(Styles['list-title'], {
+    [Styles['yellow-title']]: color !== 'green',
+    [Styles['green-title']]: color === 'green',
+  });
+  const initAutoPlay = useCallback(
+    (swiper) => {
+      if (!children?.length || children?.length <= 3) {
+        swiper.autoplay.stop();
+      } else {
+        swiper.autoplay.start();
+      }
+    },
+    [children?.length],
+  );
+
+  useEffect(() => {
+    if (swiperRef.current) {
+      initAutoPlay(swiperRef.current);
+    }
+  }, [children?.length, initAutoPlay]);
+
+  const enable = children?.length && children?.length > 3;
+
+  return (
+    <div className={Styles['screen-list']}>
+      <div className={classList}>
+        <div>{title}</div>
+      </div>
+      <Swiper
+        height={48}
+        onSwiper={(swiper) => {
+          swiperRef.current = swiper;
+          initAutoPlay(swiper);
+        }}
+        className={Styles['list-body']}
+        //因为loop只能在组件初始化时改变所以加一个不让它创建初始化的属性就可以了
+        init={false}
+        autoplay={{
+          delay: 2500,
+          disableOnInteraction: false,
+        }}
+        loop={enable}
+        loopAdditionalSlides={2}
+        modules={[Autoplay]}
+        direction="vertical"
+      >
+        {React.Children.map(children, (child) => (
+          <SwiperSlide>
+            <Item color={color}>{child}</Item>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};

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

@@ -0,0 +1,97 @@
+.screen-list {
+  .list-title {
+    position: relative;
+    padding: 0 20px;
+
+    & > div {
+      height: 28px;
+      color: #ffffff;
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 28px;
+
+      background: linear-gradient(0deg, #ffcf84 0%, #fb9900 93.84765625%);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 10px;
+      height: 10px;
+      background: linear-gradient(0deg, #ffcf84, #fb9900);
+      transform: translateY(-50%);
+      content: ' ';
+    }
+  }
+
+  .yellow-title {
+    &::before {
+      background: linear-gradient(0deg, #ffcf84, #fb9900);
+    }
+  }
+
+  .green-title {
+    & > div {
+      background: linear-gradient(0deg, #9fffc5 0%, #44f68b 93.84765625%);
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    &::before {
+      background: linear-gradient(0deg, #9fffc5, #44f68b);
+    }
+  }
+
+  .screen-item {
+    position: relative;
+    padding: 0 20px;
+
+    & > div {
+      height: 48px;
+      color: #fff;
+      font-size: 16px;
+      line-height: 48px;
+
+      &:first-child {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(0deg, rgba(61, 129, 240, 0.24), rgba(61, 129, 240, 0));
+        opacity: 0.5;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: 4px;
+      height: 8px;
+      background: #fb9900;
+      transform: translateY(-40%);
+      content: ' ';
+    }
+  }
+
+  .yellow-item {
+    &::before {
+      background: #fb9900;
+    }
+  }
+
+  .green-item {
+    &::before {
+      background: #25e1aa;
+    }
+  }
+
+  .list-body {
+    width: 100%;
+    height: 144px;
+  }
+}

src/pages/MonitoringScreen2/components/MachineryStatus.jsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import * as echarts from 'echarts/core';
+import deepCopy from '@/utils/deepCopy';
+import { hex2Rgb } from '@/utils/color';
+
+import { colorArr } from '@/components/ScreenBox/utils';
+import BasicChart from './BasicChart';
+
+const colorList = colorArr.map((x) => {
+  const rgb = hex2Rgb(x);
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+      offset: 0,
+      color: x, // 0% 处的颜色
+    },
+    {
+      offset: 0.2,
+      color: x, // 20% 处的颜色
+    },
+    {
+      offset: 1,
+      color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`, // 100% 处的颜色
+    },
+  ]);
+});
+
+const defaultOpt = {
+  tooltip: {
+    extraCssText: 'width:160px;height:40px;',
+  },
+  grid: {
+    top: 40,
+    right: 20,
+    bottom: 20,
+    left: 20,
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',
+    splitLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: '#fff',
+    },
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        color: ['rgba(255, 255, 255, 0.1)'],
+        type: 'dashed',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: '#fff',
+    },
+  },
+  series: [
+    {
+      type: 'bar',
+      barMaxWidth: 18,
+      itemStyle: {
+        borderRadius: 10,
+      },
+      label: {
+        show: true,
+        color: '#fff',
+        textBorderWidth: 0,
+        position: 'top',
+        // align: 'right',
+      },
+    },
+  ],
+};
+
+export default (props) => {
+  const option = useMemo(() => deepCopy(defaultOpt), []);
+  option.xAxis.data = props.source.map((x) => x.name);
+  option.series[0].data = props.source.map((x, i) => ({
+    value: x.value,
+    itemStyle: {
+      color: colorList[i % 6],
+    },
+  }));
+
+  return <BasicChart title="农机状态统计" option={option} />;
+};

src/pages/MonitoringScreen2/components/MachineryType.jsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import * as echarts from 'echarts/core';
+import deepCopy from '@/utils/deepCopy';
+import { hex2Rgb } from '@/utils/color';
+import { colorArr } from '@/components/ScreenBox/utils';
+import BasicChart from './BasicChart';
+
+const colorList = colorArr.map((x) => {
+  const rgb = hex2Rgb(x);
+  return new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+    {
+      offset: 0,
+      color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`, // 0% 处的颜色
+    },
+    {
+      offset: 0.8,
+      color: x, // 80% 处的颜色
+    },
+    {
+      offset: 1,
+      color: x, // 100% 处的颜色
+    },
+  ]);
+});
+
+const defaultOpt = {
+  tooltip: {
+    extraCssText: 'width:160px;height:40px;',
+  },
+  legend: {},
+  grid: {
+    top: 20,
+    right: 40,
+    bottom: 20,
+    left: 10,
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'value',
+    splitLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      show: false,
+    },
+  },
+  yAxis: {
+    type: 'category',
+    axisLine: {
+      show: false,
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      color: '#fff',
+      width: 40,
+      overflow: 'truncate',
+    },
+  },
+  series: [
+    {
+      type: 'bar',
+      barMaxWidth: 16,
+      itemStyle: {
+        borderRadius: 10,
+      },
+      encode: {
+        x: 'value',
+        y: 'key',
+      },
+      label: {
+        show: true,
+        color: '#fff',
+        textBorderWidth: 0,
+        position: 'right',
+        // align: 'right',
+      },
+      // showBackground: true,
+    },
+  ],
+};
+
+export default (props) => {
+  const option2 = useMemo(() => deepCopy(defaultOpt), []);
+
+  const [option, setOption] = useState(option2);
+
+  useEffect(() => {
+    var option3 = { ...option2 };
+    option3.yAxis.data = props.source.map((x) => x.name);
+    option3.series[0].data = props.source.map((x, i) => ({
+      value: x.value,
+      itemStyle: {
+        color: colorList[i % 3],
+      },
+    }));
+    setOption(option3);
+  }, [props.source]);
+
+  return <BasicChart title="农机类型统计" option={option} />;
+};

src/pages/MonitoringScreen2/components/WorkArea.jsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import deepCopy from '@/utils/deepCopy';
+import { colorArr } from '@/components/ScreenBox/utils';
+import BasicChart from './BasicChart';
+
+const defaultOpt = {
+  // tooltip: {
+  //   trigger: 'item',
+  //   formatter: '{b} : {c} ({d}%)',
+  // },
+  color: colorArr,
+  legend: {
+    orient: 'vertical',
+    left: 'right',
+    bottom: '5%',
+    textStyle: { color: '#fff' },
+  },
+  toolbox: {},
+  series: [
+    {
+      type: 'pie',
+      radius: ['40%', '55%'],
+      center: ['40%', '50%'],
+      selectedMode: 'single',
+      avoidLabelOverlap: false,
+      label: {
+        color: '#fff',
+        formatter: '{b} \n{d}%',
+      },
+      // labelLine: {
+      //   length: 10,
+      //   length2: 36,
+      // },
+    },
+  ],
+};
+
+export default (props) => {
+  const option2 = useMemo(() => deepCopy(defaultOpt), []);
+
+  const [option, setOption] = useState(option2);
+
+  useEffect(() => {
+    var option3 = { ...option2 };
+    option3.series[0].data = props.source;
+    // 设置第一个是选中状态
+    (option3.series[0].data[0] || {}).selected = true;
+    setOption(option3);
+  }, [props.source]);
+
+  return <BasicChart title="农机作业量面积统计" option={option} />;
+};

src/pages/MonitoringScreen2/components/WorkData.jsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import deepCopy from '@/utils/deepCopy';
+import { colorArr } from '@/components/ScreenBox/utils';
+import BasicChart from './BasicChart';
+
+const defaultOpt = {
+  // tooltip: {
+  //   trigger: 'item',
+  //   formatter: '{b} : {c} ({d}%)',
+  // },
+  color: colorArr,
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    top: '5%',
+    textStyle: { color: '#fff' },
+  },
+  series: [
+    {
+      type: 'pie',
+      radius: ['45%', '65%'],
+      itemStyle: {
+        borderRadius: 4,
+        borderColor: '#041B38',
+        borderWidth: 2,
+      },
+      label: {
+        show: false,
+        position: 'center',
+        formatter: '{b}\n{d}%',
+      },
+      emphasis: {
+        label: {
+          color: '#25E1AA',
+          show: true,
+          fontSize: '18',
+        },
+      },
+      labelLine: {
+        show: false,
+      },
+    },
+  ],
+};
+
+export default (props) => {
+  const option2 = useMemo(() => deepCopy(defaultOpt), []);
+
+  const [option, setOption] = useState(option2);
+
+  useEffect(() => {
+    var option3 = { ...option2 };
+    option3.series[0].data = props.source;
+    // 设置第一个是选中状态
+    setOption(option3);
+  }, [props.source]);
+
+  return <BasicChart title="农机作业数统计" option={option} />;
+};

src/pages/MonitoringScreen2/hook.js

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import useResize from '@/utils/hooks/useResize';
+
+export function useFullScreen(elRef) {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const fullScreenRef = useRef();
+  fullScreenRef.current = isFullScreen;
+
+  const toggleFullScreen = useCallback((e) => {
+    if (!document.fullscreenElement) {
+      elRef.current
+        .requestFullscreen()
+        .then(() => {
+          setIsFullScreen(true);
+        })
+        .catch((err) => {
+          console.log(err.message);
+        });
+    }
+  }, []);
+
+  useEffect(() => {
+    const handleFullScreenChange = (e) => {
+      setIsFullScreen(document.fullscreenElement === fullScreenRef.current);
+    };
+
+    elRef.current.onfullscreenchange = handleFullScreenChange;
+
+    // elRef.current.addEventListener('fullscreenchange', handleFullScreenChange);
+
+    return elRef.current.removeEventListener('fullscreenchange', handleFullScreenChange);
+  }, []);
+
+  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.3,
+          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.3,
+          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/MonitoringScreen2/index.jsx

@@ -0,0 +1,257 @@
+import getWeather from '@/components/AMap/weather';
+import GeoMap from '@/components/GeoMap';
+import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
+import SquareBox from '@/components/ScreenBox/SquareBox';
+import StatisCard from '@/components/ScreenBox/StatisCard';
+import classNames from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import {
+  getBasic,
+  getOrgDetail,
+  getTypeList,
+  getAreaDetail,
+  getMachineryBar,
+  getWorkNumPie,
+  getTypeBasic,
+  getMessageList,
+} from '@/services/monitoringScreen';
+import MachineryStatus from './components/MachineryStatus';
+import MachineryType from './components/MachineryType';
+import { useParticlesJs } from './hook';
+
+import ColorFont from './components/ColorFont';
+import List from './components/List';
+import WorkArea from './components/WorkArea';
+import WorkData from './components/WorkData';
+import Styles from './style.less';
+
+export default (props) => {
+  const screenRef = useRef();
+  const [weather, setWeather] = useState('暂无天气信息');
+
+  const [basic, setBasic] = useState();
+
+  const [machineryTypeData, setMachineryTypeData] = useState([]);
+
+  const [machineryStatusData, setMachineryStatusData] = useState([
+    { name: '预约', value: 350 },
+    { name: '作业', value: 900 },
+    { name: '闲置', value: 650 },
+    { name: '离线', value: 180 },
+    { name: '维修', value: 380 },
+  ]);
+
+  const [workData, setWorkData] = useState([]);
+
+  const [workAreaData, setWorkAreaData] = useState([]);
+
+  const [machineTypeList, setMachineTypeList] = useState([{ id: 't0', name: '合作社' }]);
+
+  const [orgList, setOrgList] = useState();
+
+  const [machineList, setMachineList] = useState([]);
+  const [appointList, setAppointList] = useState();
+  const [acceptList, setAcceptList] = useState();
+
+  useEffect(() => {
+    //顶部基本数据
+    getBasic()
+      .then((res) => {
+        var data = {};
+        for (let i = 0; i < res.length; i++) {
+          const element = res[i];
+          data[element.name] = element.value;
+        }
+        setBasic(data);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //地图上合作社的marker
+    getOrgDetail()
+      .then((res) => {
+        res.forEach((item) => {
+          item.lnglat = [item['lng'] - 0, item['lat'] - 0];
+          item.machineryNum = item.machineryNum - 0;
+        });
+        setOrgList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //获取地图上所有农机markers
+    getTypeBasic()
+      .then((res) => {
+        res.forEach((item) => {
+          item.lnglat = [item.location.split(',')[0] - 0, item.location.split(',')[1] - 0];
+        });
+        setMachineList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //获取地图左侧选择的农机列表
+    getTypeList()
+      .then((res) => {
+        let data = [].concat(machineTypeList);
+        res.forEach((item) => {
+          data.push({ id: item.typeId, name: item.name });
+        });
+        setMachineTypeList(data);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //作业面积统计
+    getAreaDetail()
+      .then((res) => {
+        setWorkAreaData([].concat(res));
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //农机类型统计
+    getMachineryBar()
+      .then((res) => {
+        setMachineryTypeData(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    //农机作业数统计
+    getWorkNumPie()
+      .then((res) => {
+        setWorkData(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+
+    getMessageList({ messageType: 'appoint' })
+      .then((res) => {
+        setAppointList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+    getMessageList({ messageType: 'accept' })
+      .then((res) => {
+        setAcceptList(res);
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+
+    getWeather()
+      .then((res) => {
+        if (res && res.length) {
+          const { casts, city } = res[0];
+          const { dayweather, nighttemp, daytemp } = casts[0];
+          const [min, max] =
+            parseInt(nighttemp) > parseInt(daytemp) ? [daytemp, nighttemp] : [nighttemp, daytemp];
+          setWeather(`${city} ${dayweather} ${min}-${max} °C`);
+        } else {
+          setWeather('暂无天气信息');
+        }
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
+  }, []);
+
+  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 className="flex-1" style={{ marginTop: '30px' }}>
+                <MachineryStatus source={machineryStatusData} />
+              </div>
+            </div>
+          </div>
+          <div className={classNames(Styles['grail-content'], Styles['pd-lr-40'])}>
+            <div className={Styles['statis-container']}>
+              <StatisCard
+                color="#23E8AE"
+                icon="icon1"
+                value={basic?.totalMachineryNum}
+                title="农机总数（台）"
+              />
+              <StatisCard
+                color="#0BDAFF"
+                icon="icon2"
+                value={basic?.totalMachineryUsed}
+                title="农机使用数（台）"
+              />
+              <StatisCard
+                color="#F5CC5C"
+                icon="icon3"
+                value={basic?.totalOrderNum}
+                title="总预约数"
+              />
+              <StatisCard
+                color="#C579FF"
+                icon="icon4"
+                value={basic?.totalServiceNum}
+                title="总服务数"
+              />
+            </div>
+            <GeoMap machineTypeList={machineTypeList} orgList={orgList} machineList={machineList} />
+          </div>
+          <div className={Styles['grail-right']}>
+            <div className="flex flex-column full-height">
+              <div className="flex-0" style={{ minHeight: '46%' }}>
+                <WorkData source={workData} />
+              </div>
+              <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="预约订单">
+                  {appointList?.map((item) => {
+                    return (
+                      <div key={item.messageId}>
+                        <ColorFont color="#44F68B">[{item.appointTime}]</ColorFont>{' '}
+                        <ColorFont color="#F5CC5C">{item.appointPerson}</ColorFont> 预约了一台
+                        {item.appointMachineryType}。
+                      </div>
+                    );
+                  })}
+                </List>
+              </div>
+              <div className={classNames('flex-0', Styles['footer-middle'])} />
+              <div className="flex-1">
+                <List title="作业订单" color="green">
+                  {acceptList?.map((item) => {
+                    return (
+                      <div key={item.messageId}>
+                        <ColorFont color="#44F68B">[{item.acceptTime}]</ColorFont>{' '}
+                        <ColorFont color="#F5CC5C">{item.acceptPerson}</ColorFont> 接到了一个订单。
+                      </div>
+                    );
+                  })}
+                </List>
+              </div>
+            </div>
+          </SquareBox>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/MonitoringScreen2/style.less

@@ -0,0 +1,88 @@
+.screen-page {
+  position: relative;
+  width: 100%;
+  // height: 100%;
+  height: 100vh;
+  padding-bottom: 30px;
+
+  background-color: #021222;
+  background-image: url('~@/assets/images/screen/bg.png');
+  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;
+    left: 0;
+    z-index: 1000;
+  }
+
+  .grail-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .grail-header,
+    .grail-footer {
+      flex: none;
+    }
+
+    .grail-container {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+
+      .grail-left,
+      .grail-right {
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .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;
+  }
+
+  .footer-middle {
+    width: 1px;
+    margin: 0 30px;
+    background: #03122a;
+    border: 1px solid #204a89;
+    opacity: 0.26;
+  }
+}
+
+.pd-lr-40 {
+  padding-right: 40px;
+  padding-left: 40px;
+}
+
+.mg-tp-30 {
+  margin-top: 30px;
+}