张延森 3 years ago
parent
commit
3ac589a82d

+ 34
- 18
src/components/GeoMap/index.jsx View File

7
 
7
 
8
 import geoPolygon from './geoPolygon';
8
 import geoPolygon from './geoPolygon';
9
 import Styles from './style.less';
9
 import Styles from './style.less';
10
+import RadioGroup from '../ScreenBox/Radio/RadioGroup';
10
 
11
 
11
 const plugins = [];
12
 const plugins = [];
12
 
13
 
13
-
14
-
15
 export default (props) => {
14
 export default (props) => {
16
-
15
+  const { machineTypeList } = props;
17
 
16
 
18
   const container = useRef();
17
   const container = useRef();
19
   const amapRef = useRef();
18
   const amapRef = useRef();
20
   const [map, setMap] = useState();
19
   const [map, setMap] = useState();
21
 
20
 
22
-  const [isModalVisible, setIsModalVisible] = useState(false)
23
-
24
-  window.openVideo = function () {
25
-    console.log(' window.foo 全局方法');
26
-    setIsModalVisible(true)
27
-
28
-  }
21
+  const [isModalVisible, setIsModalVisible] = useState(false);
22
+  const [machineType, setMachineType] = useState();
29
 
23
 
30
   useEffect(() => {
24
   useEffect(() => {
31
     loader(plugins).then((AMap) => {
25
     loader(plugins).then((AMap) => {
44
       //
38
       //
45
       setMap(mapInst);
39
       setMap(mapInst);
46
     });
40
     });
41
+
42
+    window.openVideo = function () {
43
+      console.log(' window.foo 全局方法');
44
+      setIsModalVisible(true);
45
+    };
46
+
47
+    return () => (window.openVideo = undefined);
47
   }, []);
48
   }, []);
48
 
49
 
49
   useEffect(() => {
50
   useEffect(() => {
55
       extData: { value: '68辆' },
56
       extData: { value: '68辆' },
56
     });
57
     });
57
 
58
 
58
-
59
     // 合作社图标定位
59
     // 合作社图标定位
60
     getRuralMarker(amapRef.current, map, {
60
     getRuralMarker(amapRef.current, map, {
61
       position: [111.909659, 32.651123],
61
       position: [111.909659, 32.651123],
64
         ruralAddress: '南阳市邓州市林扒镇',
64
         ruralAddress: '南阳市邓州市林扒镇',
65
         ruralNumber: '9辆',
65
         ruralNumber: '9辆',
66
         ruralPhone: '13613949434',
66
         ruralPhone: '13613949434',
67
-      }
68
-    })
67
+      },
68
+    });
69
 
69
 
70
     // 农机监控
70
     // 农机监控
71
     getCarsMarker(amapRef.current, map, {
71
     getCarsMarker(amapRef.current, map, {
73
       extData: {
73
       extData: {
74
         carsName: '播种机0001',
74
         carsName: '播种机0001',
75
         carsRural: 'ABC合作社',
75
         carsRural: 'ABC合作社',
76
-      }
77
-    })
76
+      },
77
+    });
78
   }, [map]);
78
   }, [map]);
79
 
79
 
80
   return (
80
   return (
81
     <div className={Styles['geo-map-container']}>
81
     <div className={Styles['geo-map-container']}>
82
+      <RadioGroup
83
+        className={Styles['radio-group']}
84
+        list={machineTypeList}
85
+        value={machineType}
86
+        onChange={setMachineType}
87
+      />
88
+
82
       {/* 占位图片 */}
89
       {/* 占位图片 */}
83
       <div className={Styles['geo-map-header']}>
90
       <div className={Styles['geo-map-header']}>
84
         <div />
91
         <div />
96
         <div />
103
         <div />
97
         <div />
104
         <div />
98
       </div>
105
       </div>
99
-      <Modal title="农机监控" footer={null} visible={isModalVisible} onCancel={() => setIsModalVisible(false)}>
100
-        <video width="320" height="240" controls src='https://www.runoob.com/try/demo_source/movie.mp4'>
106
+      <Modal
107
+        title="农机监控"
108
+        footer={null}
109
+        visible={isModalVisible}
110
+        onCancel={() => setIsModalVisible(false)}
111
+      >
112
+        <video
113
+          width="320"
114
+          height="240"
115
+          controls
116
+          src="https://www.runoob.com/try/demo_source/movie.mp4"
117
+        >
101
           <source src="movie.mp4" type="video/mp4" />
118
           <source src="movie.mp4" type="video/mp4" />
102
           <source src="movie.ogg" type="video/ogg" />
119
           <source src="movie.ogg" type="video/ogg" />
103
           您的浏览器不支持 video 。
120
           您的浏览器不支持 video 。
104
         </video>
121
         </video>
105
-
106
       </Modal>
122
       </Modal>
107
     </div>
123
     </div>
108
   );
124
   );

+ 8
- 0
src/components/GeoMap/style.less View File

1
 .geo-map-container {
1
 .geo-map-container {
2
+  position: relative;
2
   width: 100%;
3
   width: 100%;
3
   height: 100%;
4
   height: 100%;
4
   // max-height: 550px;
5
   // max-height: 550px;
6
   border-top-left-radius: 12px;
7
   border-top-left-radius: 12px;
7
   border-top-right-radius: 12px;
8
   border-top-right-radius: 12px;
8
 
9
 
10
+  .radio-group {
11
+    position: absolute;
12
+    top: 5%;
13
+    left: 5%;
14
+    z-index: 1000;
15
+  }
16
+
9
   .geo-map-body {
17
   .geo-map-body {
10
     height: calc(100% - 54px);
18
     height: calc(100% - 54px);
11
     padding: 0 20px;
19
     padding: 0 20px;

+ 0
- 2
src/components/ScreenBox/Clock/index.jsx View File

9
 
9
 
10
   const str = props.mode === 'time' ? time : day;
10
   const str = props.mode === 'time' ? time : day;
11
 
11
 
12
-  console.log('------strstrstr------>', str);
13
-
14
   return (
12
   return (
15
     <div className={classNames(Styles['clock-box'], props.className)}>
13
     <div className={classNames(Styles['clock-box'], props.className)}>
16
       <div className={Styles['time-label']}>{str}</div>
14
       <div className={Styles['time-label']}>{str}</div>

+ 27
- 0
src/components/ScreenBox/Radio/RadioGroup.jsx View File

1
+import React from 'react';
2
+import { colorArr } from '@/components/ScreenBox/utils';
3
+import Radio from '.';
4
+
5
+export default (props) => {
6
+  const { className, list, value, onChange } = props;
7
+
8
+  const handleChange = (item) => {
9
+    if (typeof onChange === 'function') {
10
+      onChange(item.id, item);
11
+    }
12
+  };
13
+
14
+  return (
15
+    <div className={className}>
16
+      {list.map((item, index) => (
17
+        <Radio
18
+          key={item.id}
19
+          checked={item.id === value}
20
+          label={item.name}
21
+          color={colorArr[index % colorArr.length]}
22
+          onChange={() => handleChange(item)}
23
+        />
24
+      ))}
25
+    </div>
26
+  );
27
+};

+ 35
- 0
src/components/ScreenBox/Radio/index.jsx View File

1
+import classNames from 'classnames';
2
+import React, { useMemo } from 'react';
3
+import Styles from './style.less';
4
+
5
+export default (props) => {
6
+  const { className, checked, label, color, onChange } = props;
7
+
8
+  const classList = useMemo(
9
+    () => classNames(Styles['c-radio'], className, { [Styles['active']]: checked }),
10
+    [className, checked],
11
+  );
12
+
13
+  const signStyle = useMemo(() => {
14
+    return { borderColor: color };
15
+  }, [color]);
16
+
17
+  const pointerStyle = useMemo(() => {
18
+    return { background: checked ? color : 'transparent' };
19
+  }, [color, checked]);
20
+
21
+  const handleClick = () => {
22
+    if (typeof onChange === 'function') {
23
+      onChange(true); // radio 只有选中状态
24
+    }
25
+  };
26
+
27
+  return (
28
+    <div className={classList} onClick={handleClick}>
29
+      <span className={Styles['check-sign']} style={signStyle}>
30
+        <span className={Styles['check-sign-pointer']} style={pointerStyle} />
31
+      </span>
32
+      <span className={Styles['label']}>{label}</span>
33
+    </div>
34
+  );
35
+};

+ 40
- 0
src/components/ScreenBox/Radio/style.less View File

1
+.c-radio {
2
+  cursor: pointer;
3
+
4
+  & + .c-radio {
5
+    margin-top: 10px;
6
+  }
7
+
8
+  .check-sign {
9
+    position: relative;
10
+    display: inline-block;
11
+    box-sizing: border-box;
12
+    width: 16px;
13
+    height: 16px;
14
+    vertical-align: middle;
15
+    border-color: #fb9900;
16
+
17
+    border-style: solid;
18
+    border-width: 2px;
19
+
20
+    border-radius: 50%;
21
+
22
+    .check-sign-pointer {
23
+      position: absolute;
24
+      top: 2px;
25
+      left: 2px;
26
+      width: 8px;
27
+      height: 8px;
28
+      background: transparent;
29
+      border-radius: 50%;
30
+    }
31
+  }
32
+
33
+  .label {
34
+    display: inline-block;
35
+    margin-left: 1em;
36
+    color: #ffffff;
37
+    font-size: 12px;
38
+    letter-spacing: 1px;
39
+  }
40
+}

+ 1
- 0
src/components/ScreenBox/utils.js View File

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

+ 4
- 2
src/pages/MonitoringScreen/components/MachineryStatus.jsx View File

1
 import React, { useEffect, useMemo, useRef } from 'react';
1
 import React, { useEffect, useMemo, useRef } from 'react';
2
 import * as echarts from 'echarts/core';
2
 import * as echarts from 'echarts/core';
3
-import BasicChart from './BasicChart';
4
 import deepCopy from '@/utils/deepCopy';
3
 import deepCopy from '@/utils/deepCopy';
5
 import { hex2Rgb } from '@/utils/color';
4
 import { hex2Rgb } from '@/utils/color';
6
 
5
 
7
-const colorList = ['#FB9900', '#23E8AE', '#E63404', '#51D4FF', '#B8B2A9', '#C579FF'].map((x) => {
6
+import { colorArr } from '@/components/ScreenBox/utils';
7
+import BasicChart from './BasicChart';
8
+
9
+const colorList = colorArr.map((x) => {
8
   const rgb = hex2Rgb(x);
10
   const rgb = hex2Rgb(x);
9
   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
11
   return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
10
     {
12
     {

+ 3
- 2
src/pages/MonitoringScreen/components/MachineryType.jsx View File

1
 import React, { useMemo } from 'react';
1
 import React, { useMemo } from 'react';
2
 import * as echarts from 'echarts/core';
2
 import * as echarts from 'echarts/core';
3
-import BasicChart from './BasicChart';
4
 import deepCopy from '@/utils/deepCopy';
3
 import deepCopy from '@/utils/deepCopy';
5
 import { hex2Rgb } from '@/utils/color';
4
 import { hex2Rgb } from '@/utils/color';
5
+import { colorArr } from '@/components/ScreenBox/utils';
6
+import BasicChart from './BasicChart';
6
 
7
 
7
-const colorList = ['#FB9900', '#23E8AE', '#E63404'].map((x) => {
8
+const colorList = colorArr.map((x) => {
8
   const rgb = hex2Rgb(x);
9
   const rgb = hex2Rgb(x);
9
   return new echarts.graphic.LinearGradient(0, 1, 1, 1, [
10
   return new echarts.graphic.LinearGradient(0, 1, 1, 1, [
10
     {
11
     {

+ 3
- 1
src/pages/MonitoringScreen/components/WorkArea.jsx View File

1
 import React, { useEffect, useMemo, useRef } from 'react';
1
 import React, { useEffect, useMemo, useRef } from 'react';
2
-import BasicChart from './BasicChart';
3
 import deepCopy from '@/utils/deepCopy';
2
 import deepCopy from '@/utils/deepCopy';
3
+import { colorArr } from '@/components/ScreenBox/utils';
4
+import BasicChart from './BasicChart';
4
 
5
 
5
 const defaultOpt = {
6
 const defaultOpt = {
6
   // tooltip: {
7
   // tooltip: {
7
   //   trigger: 'item',
8
   //   trigger: 'item',
8
   //   formatter: '{b} : {c} ({d}%)',
9
   //   formatter: '{b} : {c} ({d}%)',
9
   // },
10
   // },
11
+  color: colorArr,
10
   legend: {
12
   legend: {
11
     orient: 'vertical',
13
     orient: 'vertical',
12
     left: 'right',
14
     left: 'right',

+ 3
- 1
src/pages/MonitoringScreen/components/WorkData.jsx View File

1
 import React, { useEffect, useMemo, useRef } from 'react';
1
 import React, { useEffect, useMemo, useRef } from 'react';
2
-import BasicChart from './BasicChart';
3
 import deepCopy from '@/utils/deepCopy';
2
 import deepCopy from '@/utils/deepCopy';
3
+import { colorArr } from '@/components/ScreenBox/utils';
4
+import BasicChart from './BasicChart';
4
 
5
 
5
 const defaultOpt = {
6
 const defaultOpt = {
6
   // tooltip: {
7
   // tooltip: {
7
   //   trigger: 'item',
8
   //   trigger: 'item',
8
   //   formatter: '{b} : {c} ({d}%)',
9
   //   formatter: '{b} : {c} ({d}%)',
9
   // },
10
   // },
11
+  color: colorArr,
10
   legend: {
12
   legend: {
11
     orient: 'vertical',
13
     orient: 'vertical',
12
     left: 'left',
14
     left: 'left',

+ 7
- 1
src/pages/MonitoringScreen/index.jsx View File

48
     { name: '其他', value: 180 },
48
     { name: '其他', value: 180 },
49
   ]);
49
   ]);
50
 
50
 
51
+  const [machineTypeList, setMachineTypeList] = useState([
52
+    { id: 1, name: '收割机' },
53
+    { id: 2, name: '播种机' },
54
+    { id: 3, name: '农药机' },
55
+  ]);
56
+
51
   useEffect(() => {
57
   useEffect(() => {
52
     getWeather('邓州市').then((res) => {
58
     getWeather('邓州市').then((res) => {
53
       if (res && res.length) {
59
       if (res && res.length) {
89
               <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数(台)" />
95
               <StatisCard color="#F5CC5C" icon="icon3" value={168} title="总预约数(台)" />
90
               <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数(台)" />
96
               <StatisCard color="#C579FF" icon="icon4" value={1568} title="总服务数(台)" />
91
             </div>
97
             </div>
92
-            <GeoMap />
98
+            <GeoMap machineTypeList={machineTypeList} />
93
           </div>
99
           </div>
94
           <div className={Styles['grail-right']}>
100
           <div className={Styles['grail-right']}>
95
             <div className="flex flex-column full-height">
101
             <div className="flex flex-column full-height">

+ 1
- 1
src/utils/request.js View File

24
     ? { Authorization: localStorage.getItem('token') }
24
     ? { Authorization: localStorage.getItem('token') }
25
     : {};
25
     : {};
26
 
26
 
27
-  const prefix = `${process.env.API_BASE}/api/admin`;
27
+  const prefix = `${API_BASE}/api/admin`;
28
 
28
 
29
   return {
29
   return {
30
     url: `${prefix}${url}`,
30
     url: `${prefix}${url}`,