machinery-admin/src/pages/MonitoringScreen/index.jsx

import React, { useCallback, useEffect, useRef, useState } from 'react';
import { history, Link } from 'umi';
import classNames from 'classnames';
import ScreenHeader from '@/components/ScreenBox/ScreenHeader';
import GeoMap from '@/components/GeoMap';
import StatisCard from '@/components/ScreenBox/StatisCard';
import SquareBox from '@/components/ScreenBox/SquareBox';
import getWeather from '@/components/AMap/weather';
import { useParticlesJs } from './hook';
import MachineryType from './components/MachineryType';
import MachineryStatus from './components/MachineryStatus';

import WorkArea from './components/WorkArea';
import List from './components/List';
import ColorFont from './components/ColorFont';
import WorkData from './components/WorkData';
import Styles from './style.less';

export default (props) => {
  const screenRef = useRef();
  const [weather, setWeather] = useState('暂无天气信息');

  const [machineryTypeData, setMachineryTypeData] = useState([
    { name: '收割机', value: 200 },
    { name: '播种机', value: 100 },
    { name: '农药机', value: 50 },
  ]);

  const [machineryStatusData, setMachineryStatusData] = useState([
    { name: '预约', value: 350 },
    { name: '作业', value: 900 },
    { name: '闲置', value: 650 },
    { name: '离线', value: 180 },
    { name: '维修', value: 380 },
  ]);

  const [workData, setWorkData] = useState([
    { name: '收割机', value: 35 },
    { name: '播种机', value: 35 },
    { name: '农药机', value: 30 },
    { name: '其他', value: 180 },
  ]);

  const [workAreaData, setWorkAreaData] = useState([
    { name: '收割机', value: 350 },
    { name: '播种机', value: 900 },
    { name: '农药机', value: 650 },
    { name: '其他', value: 180 },
  ]);

  const [machineTypeList, setMachineTypeList] = useState([
    { id: 't0', name: '合作社' },
    { id: 't1', name: '收割机' },
    { id: 't2', name: '播种机' },
    { id: 't3', name: '农药机' },
  ]);

  const [orgList, setOrgList] = useState([
    {
      orgId: 1,
      name: '合作社1',
      address: '合作社地址1',
      phone: '13823838438',
      machineNum: 12,
      lnglat: [111.888505, 32.854667],
    },
    {
      orgId: 2,
      name: '合作社2',
      address: '合作社地址2',
      phone: '13823838438',
      machineNum: 68,
      lnglat: [111.921464, 32.467361],
    },
    {
      orgId: 3,
      name: '合作社3',
      address: '合作社地址3',
      phone: '13823838438',
      machineNum: 3,
      lnglat: [112.367784, 32.815435],
    },
    {
      orgId: 4,
      name: '合作社4',
      address: '合作社地址4',
      phone: '13823838438',
      machineNum: 42,
      lnglat: [112.311479, 32.580836],
    },
  ]);

  const [machineList, setMachineList] = useState([
    {
      machineryId: 'm1',
      name: '农机1',
      typeId: 't1',
      orgName: '合作社1',
      lnglat: [111.867906, 32.799276],
    },
    {
      machineryId: 'm2',
      name: '农机2',
      typeId: 't2',
      orgName: '合作社1',
      lnglat: [112.087632, 32.66527],
    },
    {
      machineryId: 'm3',
      name: '农机3',
      typeId: 't1',
      orgName: '合作社2',
      lnglat: [112.237321, 32.631737],
    },
    {
      machineryId: 'm4',
      name: '农机4',
      typeId: 't3',
      orgName: '合作社2',
      lnglat: [112.002488, 32.563476],
    },
    {
      machineryId: 'm5',
      name: '农机5',
      typeId: 't3',
      orgName: '合作社3',
      lnglat: [112.105485, 32.791195],
    },
  ]);

  useEffect(() => {
    getWeather('邓州市').then((res) => {
      if (res && res.length) {
        const { casts } = res[0];
        const { dayweather, nighttemp, daytemp } = casts[0];
        const [min, max] =
          parseInt(nighttemp) > parseInt(daytemp) ? [daytemp, nighttemp] : [nighttemp, daytemp];
        setWeather(`${dayweather} ${min}-${max} °C`);
      } else {
        setWeather('暂无天气信息');
      }
    });
  }, []);

  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={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 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="预约订单">
                  <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>
    </div>
  );
};