feats

src/components/GeoMap/index.jsx

@@ -7,25 +7,19 @@ import getCarsMarker from './CarsMarker';
 
 import geoPolygon from './geoPolygon';
 import Styles from './style.less';
+import RadioGroup from '../ScreenBox/Radio/RadioGroup';
 
 const plugins = [];
 
-
-
 export default (props) => {
-
+  const { machineTypeList } = props;
 
   const container = useRef();
   const amapRef = useRef();
   const [map, setMap] = useState();
 
-  const [isModalVisible, setIsModalVisible] = useState(false)
-
-  window.openVideo = function () {
-    console.log(' window.foo 全局方法');
-    setIsModalVisible(true)
-
-  }
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [machineType, setMachineType] = useState();
 
   useEffect(() => {
     loader(plugins).then((AMap) => {
@@ -44,6 +38,13 @@ export default (props) => {
       //
       setMap(mapInst);
     });
+
+    window.openVideo = function () {
+      console.log(' window.foo 全局方法');
+      setIsModalVisible(true);
+    };
+
+    return () => (window.openVideo = undefined);
   }, []);
 
   useEffect(() => {
@@ -55,7 +56,6 @@ export default (props) => {
       extData: { value: '68辆' },
     });
 
-
     // 合作社图标定位
     getRuralMarker(amapRef.current, map, {
       position: [111.909659, 32.651123],
@@ -64,8 +64,8 @@ export default (props) => {
         ruralAddress: '南阳市邓州市林扒镇',
         ruralNumber: '9辆',
         ruralPhone: '13613949434',
-      }
-    })
+      },
+    });
 
     // 农机监控
     getCarsMarker(amapRef.current, map, {
@@ -73,12 +73,19 @@ export default (props) => {
       extData: {
         carsName: '播种机0001',
         carsRural: 'ABC合作社',
-      }
-    })
+      },
+    });
   }, [map]);
 
   return (
     <div className={Styles['geo-map-container']}>
+      <RadioGroup
+        className={Styles['radio-group']}
+        list={machineTypeList}
+        value={machineType}
+        onChange={setMachineType}
+      />
+
       {/* 占位图片 */}
       <div className={Styles['geo-map-header']}>
         <div />
@@ -96,13 +103,22 @@ export default (props) => {
         <div />
         <div />
       </div>
-      <Modal title="农机监控" footer={null} visible={isModalVisible} onCancel={() => setIsModalVisible(false)}>
-        <video width="320" height="240" controls src='https://www.runoob.com/try/demo_source/movie.mp4'>
+      <Modal
+        title="农机监控"
+        footer={null}
+        visible={isModalVisible}
+        onCancel={() => setIsModalVisible(false)}
+      >
+        <video
+          width="320"
+          height="240"
+          controls
+          src="https://www.runoob.com/try/demo_source/movie.mp4"
+        >
           <source src="movie.mp4" type="video/mp4" />
           <source src="movie.ogg" type="video/ogg" />
           您的浏览器不支持 video 。
         </video>
-
       </Modal>
     </div>
   );

src/components/GeoMap/style.less

@@ -1,4 +1,5 @@
 .geo-map-container {
+  position: relative;
   width: 100%;
   height: 100%;
   // max-height: 550px;
@@ -6,6 +7,13 @@
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 
+  .radio-group {
+    position: absolute;
+    top: 5%;
+    left: 5%;
+    z-index: 1000;
+  }
+
   .geo-map-body {
     height: calc(100% - 54px);
     padding: 0 20px;

src/components/ScreenBox/Clock/index.jsx

@@ -9,8 +9,6 @@ export default (props) => {
 
   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>

src/components/ScreenBox/Radio/RadioGroup.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { colorArr } from '@/components/ScreenBox/utils';
+import Radio from '.';
+
+export default (props) => {
+  const { className, list, value, onChange } = props;
+
+  const handleChange = (item) => {
+    if (typeof onChange === 'function') {
+      onChange(item.id, item);
+    }
+  };
+
+  return (
+    <div className={className}>
+      {list.map((item, index) => (
+        <Radio
+          key={item.id}
+          checked={item.id === value}
+          label={item.name}
+          color={colorArr[index % colorArr.length]}
+          onChange={() => handleChange(item)}
+        />
+      ))}
+    </div>
+  );
+};

src/components/ScreenBox/Radio/index.jsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import Styles from './style.less';
+
+export default (props) => {
+  const { className, checked, label, color, onChange } = props;
+
+  const classList = useMemo(
+    () => classNames(Styles['c-radio'], className, { [Styles['active']]: checked }),
+    [className, checked],
+  );
+
+  const signStyle = useMemo(() => {
+    return { borderColor: color };
+  }, [color]);
+
+  const pointerStyle = useMemo(() => {
+    return { background: checked ? color : 'transparent' };
+  }, [color, checked]);
+
+  const handleClick = () => {
+    if (typeof onChange === 'function') {
+      onChange(true); // radio 只有选中状态
+    }
+  };
+
+  return (
+    <div className={classList} onClick={handleClick}>
+      <span className={Styles['check-sign']} style={signStyle}>
+        <span className={Styles['check-sign-pointer']} style={pointerStyle} />
+      </span>
+      <span className={Styles['label']}>{label}</span>
+    </div>
+  );
+};

src/components/ScreenBox/Radio/style.less

@@ -0,0 +1,40 @@
+.c-radio {
+  cursor: pointer;
+
+  & + .c-radio {
+    margin-top: 10px;
+  }
+
+  .check-sign {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    vertical-align: middle;
+    border-color: #fb9900;
+
+    border-style: solid;
+    border-width: 2px;
+
+    border-radius: 50%;
+
+    .check-sign-pointer {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 8px;
+      height: 8px;
+      background: transparent;
+      border-radius: 50%;
+    }
+  }
+
+  .label {
+    display: inline-block;
+    margin-left: 1em;
+    color: #ffffff;
+    font-size: 12px;
+    letter-spacing: 1px;
+  }
+}

src/components/ScreenBox/utils.js

@@ -0,0 +1 @@
+export const colorArr = ['#FB9900', '#23E8AE', '#E63404', '#51D4FF', '#B8B2A9', '#C579FF'];

src/pages/MonitoringScreen/components/MachineryStatus.jsx

@@ -1,10 +1,12 @@
 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) => {
+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, [
     {

src/pages/MonitoringScreen/components/MachineryType.jsx

@@ -1,10 +1,11 @@
 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';
+import { colorArr } from '@/components/ScreenBox/utils';
+import BasicChart from './BasicChart';
 
-const colorList = ['#FB9900', '#23E8AE', '#E63404'].map((x) => {
+const colorList = colorArr.map((x) => {
   const rgb = hex2Rgb(x);
   return new echarts.graphic.LinearGradient(0, 1, 1, 1, [
     {

src/pages/MonitoringScreen/components/WorkArea.jsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import BasicChart from './BasicChart';
 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',

src/pages/MonitoringScreen/components/WorkData.jsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import BasicChart from './BasicChart';
 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',

src/pages/MonitoringScreen/index.jsx

@@ -48,6 +48,12 @@ export default (props) => {
     { name: '其他', value: 180 },
   ]);
 
+  const [machineTypeList, setMachineTypeList] = useState([
+    { id: 1, name: '收割机' },
+    { id: 2, name: '播种机' },
+    { id: 3, name: '农药机' },
+  ]);
+
   useEffect(() => {
     getWeather('邓州市').then((res) => {
       if (res && res.length) {
@@ -89,7 +95,7 @@ export default (props) => {
               <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数（台）" />
               <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数（台）" />
             </div>
-            <GeoMap />
+            <GeoMap machineTypeList={machineTypeList} />
           </div>
           <div className={Styles['grail-right']}>
             <div className="flex flex-column full-height">

src/utils/request.js

@@ -24,7 +24,7 @@ function requestInterceptor(url, options) {
     ? { Authorization: localStorage.getItem('token') }
     : {};
 
-  const prefix = `${process.env.API_BASE}/api/admin`;
+  const prefix = `${API_BASE}/api/admin`;
 
   return {
     url: `${prefix}${url}`,