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

src/components/ECharts/index.jsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
+// import * as echarts from 'echarts';
 // 按需导入模块
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
 import * as echarts from 'echarts/core';
 // 引入图表，图表后缀都为 Chart
-import { LineChart } from 'echarts/charts';
+import { BarChart, PieChart } from 'echarts/charts';
 // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
 import {
   TitleComponent,
@@ -12,11 +13,12 @@ import {
   GridComponent,
   DatasetComponent,
   TransformComponent,
+  LegendComponent,
 } from 'echarts/components';
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features';
 // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-import { CanvasRenderer } from 'echarts/renderers';
+import { SVGRenderer } from 'echarts/renderers';
 
 // 注册必须的组件
 echarts.use([
@@ -25,21 +27,27 @@ echarts.use([
   GridComponent,
   DatasetComponent,
   TransformComponent,
-  LineChart,
+  BarChart,
+  PieChart,
   LabelLayout,
   UniversalTransition,
-  CanvasRenderer,
+  SVGRenderer,
+  LegendComponent,
 ]);
 
 import Styles from './style.less';
 
-export default (props) => {
+export default forwardRef((props, ref) => {
   const domRef = useRef();
   const echartsRef = useRef();
 
   useEffect(() => {
     echartsRef.current = echarts.init(domRef.current);
-    echartsRef.current.setOption(props.option);
+    window.onresize = function () {
+      echartsRef.current.resize();
+    };
+
+    return () => echartsRef.current.dispose();
   }, []);
 
   useEffect(() => {
@@ -58,7 +66,11 @@ export default (props) => {
     }
   }, [props.loading]);
 
-  const classList = classNames(Styles.echarts, props.className);
+  useImperativeHandle(ref, () => ({
+    echart: echartsRef,
+  }));
+
+  const classList = classNames(Styles.echart, props.className);
 
   return <div className={classList} ref={domRef} />;
-};
+});

src/components/ECharts/style.less

@@ -1,5 +1,5 @@
 .echart {
   width: 100%;
   height: 100%;
-  min-height: 400px;
+  min-height: 200px;
 }

src/components/ScreenBox/SquareBox/index.jsx

@@ -1,19 +1,13 @@
-
-
-import './style.less'
+import './style.less';
 export default (props) => {
-
-
   return (
-    <div className="SquareBox-box">
+    <div className="SquareBox-box" style={props.style}>
       <div className="border_corner border_corner_left_top" />
       <div className="border_corner border_corner_right_top" />
       <div className="border_corner border_corner_left_bottom" />
       <div className="border_corner border_corner_right_bottom" />
       {/* 内容 */}
-      <div className="SquareBox-body">
-        {props.children}
-      </div>
+      <div className="SquareBox-body">{props.children}</div>
     </div>
-  )
-}
+  );
+};

src/components/ScreenBox/SquareBox/style.less

@@ -1,8 +1,10 @@
 .SquareBox-box {
   position: relative;
+  height: 100%;
 }
 .SquareBox-body {
-  padding: 20px;
+  height: 100%;
+  padding: 0 20px;
   color: #fff;
   background: rgba(8, 40, 90, 0.4);
   border: 2px solid rgba(61, 129, 240, 0.5);

src/components/ScreenBox/TitleBox/style.less

@@ -1,23 +1,24 @@
 .TitleBox {
-  // width: 163px;
   display: inline-block;
   align-items: center;
+  height: 38px;
   margin-bottom: 10px;
-  padding: 11px 11px 9px 11px;
+  padding: 0 12px;
+  line-height: 38px;
   border-radius: 4px;
   box-shadow: 0px 0px 10px 0px #3d81f0 inset;
 
   .TitleBox-ListBox {
     display: inline-block;
-    width: 13px;
-    height: 13px;
-    margin-right: 10px;
+    width: 10px;
+    height: 10px;
     background: linear-gradient(0deg, #0c49c6, #3bd6e8);
   }
   .TitleBox-ListBox-value {
+    margin-left: 12px;
     color: transparent;
     font-weight: 800;
-    font-size: 17px;
+    font-size: 18px;
     background: linear-gradient(0deg, #0c49c6, #3bd6e8);
     background-clip: text;
   }

src/global.less

@@ -56,6 +56,26 @@ ol {
   }
 }
 
+.full-height {
+  height: 100%;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.flex-0 {
+  flex: 0;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
 .amap-marker-label {
   background: transparent;
   border: none;

src/pages/MonitoringScreen/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: '200px', maxHeight: '350px' }}>
+        <ECharts option={props.option} />
+      </SquareBox>
+    </div>
+  );
+};

src/pages/MonitoringScreen/components/ColorFont.jsx

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

src/pages/MonitoringScreen/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/MonitoringScreen/components/List/index.jsx

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

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

@@ -0,0 +1,92 @@
+.screen-list {
+  .list-title {
+    position: relative;
+    padding: 0 20px;
+
+    & > div {
+      height: 48px;
+      color: #ffffff;
+      font-weight: bold;
+      font-size: 18px;
+      line-height: 48px;
+
+      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;
+    }
+  }
+}

src/pages/MonitoringScreen/components/MachineryStatus.jsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import * as echarts from 'echarts/core';
+import BasicChart from './BasicChart';
+import deepCopy from '@/utils/deepCopy';
+import { hex2Rgb } from '@/utils/color';
+
+const colorList = ['#FB9900', '#23E8AE', '#E63404', '#51D4FF', '#B8B2A9', '#C579FF'].map((x) => {
+  const rgb = hex2Rgb(x);
+  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+    {
+      offset: 0,
+      color: x, // 0% 处的颜色
+    },
+    {
+      offset: 0.5,
+      color: x, // 50% 处的颜色
+    },
+    {
+      offset: 1,
+      color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`, // 100% 处的颜色
+    },
+  ]);
+});
+
+const defaultOpt = {
+  tooltip: {},
+  grid: {
+    left: 10,
+    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',
+    },
+  ],
+};
+
+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/MonitoringScreen/components/MachineryType.jsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import * as echarts from 'echarts/core';
+import BasicChart from './BasicChart';
+import deepCopy from '@/utils/deepCopy';
+import { hex2Rgb } from '@/utils/color';
+
+const colorList = ['#FB9900', '#23E8AE', '#E63404'].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.5,
+      color: x, // 50% 处的颜色
+    },
+    {
+      offset: 1,
+      color: x, // 100% 处的颜色
+    },
+  ]);
+});
+
+const defaultOpt = {
+  tooltip: {},
+  legend: {},
+  grid: {
+    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',
+      encode: {
+        x: 'value',
+        y: 'key',
+      },
+      label: {
+        show: true,
+        color: '#fff',
+        textBorderWidth: 0,
+        position: 'right',
+        // align: 'right',
+      },
+      showBackground: true,
+    },
+  ],
+};
+
+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],
+    },
+  }));
+
+  return <BasicChart title="农机类型统计" option={option} />;
+};

src/pages/MonitoringScreen/components/WorkArea.jsx

@@ -0,0 +1,42 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import BasicChart from './BasicChart';
+import deepCopy from '@/utils/deepCopy';
+
+const defaultOpt = {
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'right',
+    bottom: '5%',
+    textStyle: { color: '#fff' },
+  },
+  toolbox: {},
+  series: [
+    {
+      type: 'pie',
+      radius: ['30%', '60%'],
+      roseType: 'area',
+      itemStyle: {
+        borderRadius: 5,
+      },
+      label: {
+        color: '#fff',
+        formatter: '{b} \n{d}%',
+      },
+      // labelLine: {
+      //   length: 10,
+      //   length2: 36,
+      // },
+    },
+  ],
+};
+
+export default (props) => {
+  const option = useMemo(() => deepCopy(defaultOpt), []);
+  option.series[0].data = props.source;
+
+  return <BasicChart title="农机作业量面积统计" option={option} />;
+};

src/pages/MonitoringScreen/components/WorkData.jsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import BasicChart from './BasicChart';
+import deepCopy from '@/utils/deepCopy';
+
+const defaultOpt = {
+  tooltip: {
+    trigger: 'item',
+    formatter: '{b} : {c} ({d}%)',
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    top: '5%',
+    textStyle: { color: '#fff' },
+  },
+  toolbox: {},
+  series: [
+    {
+      type: 'pie',
+      radius: ['30%', '60%'],
+      itemStyle: {
+        borderRadius: 5,
+      },
+      // itemStyle: {
+      //   borderRadius: 10,
+      //   borderColor: '#fff',
+      //   borderWidth: 1,
+      // },
+      label: {
+        show: false,
+        position: 'center',
+      },
+      emphasis: {
+        label: {
+          color: '#fff',
+          show: true,
+          fontSize: '28',
+          fontWeight: 'bold',
+        },
+      },
+      labelLine: {
+        show: false,
+      },
+    },
+  ],
+};
+
+export default (props) => {
+  const option = useMemo(() => deepCopy(defaultOpt), []);
+  option.series[0].data = props.source;
+
+  return <BasicChart title="农机作业数统计" option={option} />;
+};

src/pages/MonitoringScreen/index.jsx

@@ -7,24 +7,50 @@ 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 DateCommponetsLeft from './DateCommponetsLeft';
-import DateCommponetsBottomRight from './DateCommponetsBottomRight';
-import DateCommponetsBottomLeft from './DateCommponetsBottomLeft';
+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';
-import StatisCard from '@/components/ScreenBox/StatisCard';
+
 export default (props) => {
   const screenRef = useRef();
-  const [height, setHeight] = useState('auto');
+  const [height, setHeight] = useState('1080px');
   const { isFullScreen, toggleFullScreen } = useFullScreen(screenRef);
 
-  useEffect(() => {
-    const container = document.querySelector('main.ant-layout-content');
-    const header = container.querySelector('.ant-pro-page-container-warp');
+  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 },
+  ]);
 
-    setHeight(`${container.offsetHeight - header.offsetHeight}px`);
-  }, []);
+  const [workAreaData, setWorkAreaData] = useState([
+    { name: '收割机', value: 350 },
+    { name: '播种机', value: 900 },
+    { name: '农药机', value: 650 },
+    { name: '其他', value: 180 },
+  ]);
 
   return (
     <PageHeaderWrapper
@@ -45,9 +71,16 @@ export default (props) => {
           <div className={Styles['grail-header']}>
             <ScreenHeader weather="多云 21-28 °C" />
           </div>
-          <div className={classNames(Styles['grail-container'], Styles['pd-tp-40'])}>
+          <div className={classNames(Styles['grail-container'], Styles['pd-tp-30'])}>
             <div className={Styles['grail-left']}>
-              <DateCommponetsLeft />
+              <div className="flex flex-column full-height">
+                <div className="flex-0" style={{ height: '250px' }}>
+                  <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']}>
@@ -56,13 +89,60 @@ export default (props) => {
                 <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数（台）" />
                 <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数（台）" />
               </div>
-              <GeoMap></GeoMap>
+              <GeoMap />
             </div>
             <div className={Styles['grail-right']}>
-              <DateCommponetsBottomRight />
+              <div className="flex flex-column full-height">
+                <div className="flex-0" style={{ height: '250px' }}>
+                  <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['pd-tp-40'])}></div>
+          <div className={classNames(Styles['grail-footer'], Styles['pd-tp-30'])}>
+            <SquareBox>
+              <div className="flex">
+                <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>
+            </SquareBox>
+            <div className={Styles['pd-tp-30']} style={{ height: '30px' }} />
+          </div>
         </div>
       </div>
     </PageHeaderWrapper>

src/pages/MonitoringScreen/style.less

@@ -28,6 +28,7 @@
     .grail-container {
       display: flex;
       flex: 1;
+      align-items: stretch;
       height: 100%;
 
       .grail-left,
@@ -57,6 +58,14 @@
     display: flex;
     margin-bottom: 30px;
   }
+
+  .footer-middle {
+    width: 1px;
+    margin: 0 30px;
+    background: #03122a;
+    border: 1px solid #204a89;
+    opacity: 0.26;
+  }
 }
 
 .pd-lr-40 {
@@ -64,6 +73,6 @@
   padding-left: 40px;
 }
 
-.pd-tp-40 {
-  padding-top: 40px;
+.pd-tp-30 {
+  padding-top: 30px;
 }

src/utils/color.js

@@ -0,0 +1,18 @@
+export function hex2Rgb(hex) {
+  let color = hex.toLowerCase();
+
+  // 如果只有三位的值，需变成六位，如：#fff => #ffffff
+  if (color.length === 4) {
+    let colorNew = '#';
+    for (var i = 1; i < 4; i += 1) {
+      colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
+    }
+    color = colorNew;
+  }
+  // 处理六位的颜色值，转为RGB
+  const colors = [];
+  for (var i = 1; i < 7; i += 2) {
+    colors.push(parseInt('0x' + color.slice(i, i + 2)));
+  }
+  return colors;
+}

src/utils/deepCopy.js

@@ -0,0 +1,12 @@
+/**
+ * 极简版本的深拷贝
+ * @param {*} obj
+ * @returns
+ */
+export default function deepCopy(obj) {
+  let _obj = Array.isArray(obj) ? [] : {};
+  for (let i in obj) {
+    _obj[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i];
+  }
+  return _obj;
+}