数据大屏

config/proxy.js

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

src/components/ECharts/index.jsx

 export default forwardRef((props, ref) => {
   const domRef = useRef();
   const echartsRef = useRef();
-
   useEffect(() => {
     echartsRef.current = echarts.init(domRef.current);
-
     const handleResize = () => {
       echartsRef.current.resize();
     };
       echartsRef.current.dispose();
     };
   }, []);
-
   useEffect(() => {
     if (echartsRef.current) {
       echartsRef.current.setOption(props.option);

src/components/GeoMap/RuralMarker.js

   });
 
   // 合作社数据
-  const { name, address, machineNum, phone } = opts?.extData;
+  const { name, address, machineryNum, phone } = opts?.extData;
 
   marker.setLabel({
     direction: 'top',
     <div class='geo-map-rural-box' >
       <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>名 称</span>：${name}</div>
       <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>地 址</span>：${address}</div>
-      <div class="borderBox">农机数量：${machineNum} 辆</div>
+      <div class="borderBox">农机数量：${machineryNum} 辆</div>
       <div class="borderBox">联系电话：${phone}</div>
     </div>`,
   });

src/pages/Machinery/Org/RuralMarker.js

+import ruralMarkerImg from '@/assets/images/screen/map-rural.png';
+
+export default function getRuralMarker(AMap, map, opts = {}) {
+  const marker = new AMap.Marker({
+    icon: ruralMarkerImg,
+    anchor: 'top-center',
+    offset: new AMap.Pixel(0, 0),
+    ...opts,
+  });
+
+  // 合作社数据
+  const { name, address, machineryNum, phone } = opts?.extData;
+
+  marker.setLabel({
+    direction: 'top',
+    offset: new AMap.Pixel(0, 0),
+    content: `
+    <div class='geo-map-rural-box' >
+      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>名 称</span>：${name}</div>
+      <div class="borderBox"><span class='geo-map-rural-text-span borderBox'>地 址</span>：${address}</div>
+      <div class="borderBox">农机数量：${machineryNum || 0} 辆</div>
+      <div class="borderBox">联系电话：${phone}</div>
+    </div>`,
+  });
+
+  return marker;
+}

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

     [Styles['yellow-title']]: color !== 'green',
     [Styles['green-title']]: color === 'green',
   });
-
   return (
     <div className={Styles['screen-list']}>
       <div className={classList}>
           delay: 2500,
           disableOnInteraction: false,
         }}
-        loop
+        loop={children?.length >= 3}
         loopAdditionalSlides={2}
         modules={[Autoplay]}
         direction="vertical"

src/pages/MonitoringScreen/components/MachineryType.jsx

-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import * as echarts from 'echarts/core';
 import deepCopy from '@/utils/deepCopy';
 import { hex2Rgb } from '@/utils/color';
 };
 
 export default (props) => {
-  const option = useMemo(() => deepCopy(defaultOpt), []);
-  option.yAxis.data = props.source.map((x) => x.name);
-  option.series[0].data = props.source.map((x, i) => ({
-    value: x.value,
-    itemStyle: {
-      color: colorList[i % 3],
-    },
-  }));
+  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/MonitoringScreen/components/WorkArea.jsx

-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import deepCopy from '@/utils/deepCopy';
 import { colorArr } from '@/components/ScreenBox/utils';
 import BasicChart from './BasicChart';
 };
 
 export default (props) => {
-  const option = useMemo(() => deepCopy(defaultOpt), []);
-  option.series[0].data = props.source;
-  (option.series[0].data[0] || {}).selected = true; // 设置第一个是选中状态
+  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/MonitoringScreen/components/WorkData.jsx

-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import deepCopy from '@/utils/deepCopy';
 import { colorArr } from '@/components/ScreenBox/utils';
 import BasicChart from './BasicChart';
 };
 
 export default (props) => {
-  const option = useMemo(() => deepCopy(defaultOpt), []);
-  option.series[0].data = props.source;
+  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/MonitoringScreen/index.jsx

 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';
   const screenRef = useRef();
   const [weather, setWeather] = useState('暂无天气信息');
 
-  const [machineryTypeData, setMachineryTypeData] = useState([
-    { name: '收割机', value: 200 },
-    { name: '播种机', value: 100 },
-    { name: '农药机', value: 50 },
-  ]);
+  const [basic, setBasic] = useState();
+
+  const [machineryTypeData, setMachineryTypeData] = useState([]);
 
   const [machineryStatusData, setMachineryStatusData] = useState([
     { name: '预约', value: 350 },
     { name: '维修', value: 380 },
   ]);
 
-  const [workData, setWorkData] = useState([
-    { name: '收割机', value: 35 },
-    { name: '播种机', value: 35 },
-    { name: '农药机', value: 30 },
-    { name: '其他', value: 180 },
-  ]);
+  const [workData, setWorkData] = useState([]);
 
-  const [workAreaData, setWorkAreaData] = useState([
-    { name: '收割机', value: 350 },
-    { name: '播种机', value: 900 },
-    { name: '农药机', value: 650 },
-    { name: '其他', value: 180 },
-  ]);
+  const [workAreaData, setWorkAreaData] = useState([]);
 
-  const [machineTypeList, setMachineTypeList] = useState([
-    { id: 't0', name: '合作社' },
-    { id: 't1', name: '收割机' },
-    { id: 't2', name: '播种机' },
-    { id: 't3', name: '农药机' },
-  ]);
+  const [machineTypeList, setMachineTypeList] = useState([{ id: 't0', name: '合作社' }]);
 
-  const [orgList, setOrgList] = useState([
-    {
-      orgId: 1,
-      name: '合作社1',
-      address: '合作社地址1',
-      phone: '13823838438',
-      machineNum: 12,
-      lnglat: [112.039556, 32.775169],
-    },
-    {
-      orgId: 2,
-      name: '合作社2',
-      address: '合作社地址2',
-      phone: '13823838438',
-      machineNum: 68,
-      lnglat: [112.181692, 32.759002],
-    },
-    {
-      orgId: 3,
-      name: '合作社3',
-      address: '合作社地址3',
-      phone: '13823838438',
-      machineNum: 3,
-      lnglat: [111.958532, 32.631875],
-    },
-    {
-      orgId: 4,
-      name: '合作社4',
-      address: '合作社地址4',
-      phone: '13823838438',
-      machineNum: 42,
-      lnglat: [112.164526, 32.603536],
-    },
-  ]);
+  const [orgList, setOrgList] = useState();
 
-  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],
-    },
-  ]);
+  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) => {
+        console.log('---------res---->', 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) {
           </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="总服务数（台）" />
+              <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="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>
+                  {appointList?.map((item) => {
+                    return (
+                      <div key={item.messageId}>
+                        <ColorFont color="#F5CC5C">{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">
-                  <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>
+                  {acceptList?.map((item) => {
+                    return (
+                      <div key={item.messageId}>
+                        <ColorFont color="#44F68B">{item.acceptTime}</ColorFont>{' '}
+                        <ColorFont color="#44F68B">[{item.acceptPerson}]</ColorFont>
+                        接到了一个订单。
+                      </div>
+                    );
+                  })}
                 </List>
               </div>
             </div>

src/services/monitoringScreen.js

+import request from '@/utils/request';
+
+/**
+ * 基本数据统计
+ * @param {*} params
+ * @returns
+ */
+export const getBasic = (params) => request('/screen-data/basic', { params });
+
+/**
+ * 所有合作社
+ * @param {*} params
+ * @returns
+ */
+export const getOrgDetail = (params) => request('/screen-data/org', { params });
+
+/**
+ *  农机类型列表
+ * @param {*} params
+ * @returns
+ */
+export const getTypeList = (params) => request('/screen-data/machinery-type', { params });
+
+/**
+ *  农机作业面积统计
+ * @param {*} params
+ * @returns
+ */
+export const getAreaDetail = (params) => request('/screen-data/machinery-type/area', { params });
+
+/**
+ *  农机类型统计（左上角柱状图）
+ * @param {*} params
+ * @returns
+ */
+export const getMachineryBar = (params) =>
+  request('/screen-data/machinery-type/machinery', { params });
+
+/**
+ *  农机作业数统计
+ * @param {*} params
+ * @returns
+ */
+export const getWorkNumPie = (params) =>
+  request('/screen-data/machinery-type/work-job', { params });
+
+/**
+ *  依据类型查询农机
+ * @param {*} params
+ * @returns
+ */
+export const getTypeBasic = (params) => request('/screen-data/machinery/all', { params });
+
+/**
+ *  获取消息通知列表
+ * @param {*} params
+ * @returns
+ */
+export const getMessageList = (params) => request('/screen-data/message', { params });