├── .env ├── public ├── robots.txt ├── manifest.json └── index.html ├── src ├── assets │ ├── demo.png │ └── icon │ │ ├── triangle-down.svg │ │ ├── triangle-up.svg │ │ ├── area.svg │ │ ├── poweroff.svg │ │ ├── riverway1.svg │ │ ├── wind.svg │ │ ├── pig.svg │ │ ├── pig-gray.svg │ │ ├── crops3.svg │ │ ├── crops3-gray.svg │ │ ├── administrator.svg │ │ ├── farm.svg │ │ ├── temperature.svg │ │ ├── rainfull.svg │ │ ├── crops2-gray.svg │ │ ├── crops2.svg │ │ ├── crops4.svg │ │ ├── company.svg │ │ ├── sell.svg │ │ ├── setting.svg │ │ ├── forest.svg │ │ ├── geogarphy.svg │ │ ├── crops5.svg │ │ ├── crops1.svg │ │ ├── riverway2.svg │ │ └── crops6.svg ├── utils │ └── index.js ├── styles │ ├── variable.scss │ ├── index.scss │ ├── containers │ │ ├── farming.scss │ │ ├── natural.scss │ │ ├── advantage.scss │ │ ├── industrial.scss │ │ ├── economic.scss │ │ └── profittrend.scss │ ├── layouts │ │ └── box.scss │ ├── components │ │ └── navigation.scss │ └── app.scss ├── index.js ├── layouts │ └── Box.jsx ├── components │ ├── BoxTitle.jsx │ └── Navigation.jsx ├── Test.jsx ├── App.jsx └── containers │ ├── Farming.jsx │ ├── Natural.jsx │ ├── Industrial.jsx │ ├── Advantage.jsx │ ├── Economic.jsx │ └── Profittrend.jsx ├── .editorconfig ├── README.md ├── .gitignore └── package.json /.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP = false 2 | 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Lizhooh/agricultural-big-data/HEAD/src/assets/demo.png -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = false -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## agricultural-big-data 3 | 一个智慧农业大数据平台 · 大屏中心数据可视化 Demo。 4 | 5 | 使用的技术：React，Scss，Antd G2 6 | 7 | 看起来还可以，主题颜色偏绿色，无后端交互，知识一个静态页面。 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | 2 | export const $icon = name => name ? require('../assets/icon/' + name + '.svg') : ''; 3 | 4 | export const chunk = (arr, size) => 5 | Array.from({ length: Math.ceil(arr.length / size) }, (v, i) => 6 | arr.slice(i * size, i * size + size) 7 | ); 8 | -------------------------------------------------------------------------------- /src/styles/variable.scss: -------------------------------------------------------------------------------- 1 | 2 | $app-width: 1440px; 3 | $app-height: 800px; 4 | $app-color: #252525; 5 | 6 | $theme-color: #0ff7ab; 7 | 8 | $navigation-height: 30px; 9 | $navigation-color: transparent; 10 | 11 | $text-light-color: $theme-color; 12 | $text-color: lighten(#44827f, 15%); 13 | $text-white-color: rgba(255, 255, 255, 0.75); 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'react-app-polyfill/ie11'; 4 | 5 | import './styles/index.scss'; 6 | import 'react-circular-progressbar/dist/styles.css'; 7 | import App from './App'; 8 | 9 | ReactDOM.render( 10 | 11 | 12 | , 13 | document.getElementById('root'), 14 | ); 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | 2 | @import './variable.scss'; 3 | @import './app.scss'; 4 | 5 | // components 6 | @import './components/navigation.scss'; 7 | 8 | // containers 9 | @import './containers/natural.scss'; 10 | @import './containers/economic.scss'; 11 | @import './containers/farming.scss'; 12 | @import './containers/industrial.scss'; 13 | @import './containers/advantage.scss'; 14 | @import './containers/profittrend.scss'; 15 | 16 | // layouts 17 | @import './layouts/box.scss'; 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "智慧农业大数据平台", 3 | "name": "智慧农业大数据平台", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/layouts/Box.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // 布局用的盒子 4 | export default function Box({ title, minTitle, children, style }) { 5 | return ( 6 |
7 |
8 |

9 | {title} 10 | {minTitle && 11 | {minTitle} 12 | } 13 |

14 |
15 |
16 |
17 | {children} 18 |
19 |
20 | ); 21 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 13 | 14 | 智慧农业大数据平台 · 算符科技 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /src/assets/icon/triangle-down.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/triangle-up.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/BoxTitle.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { css } from 'emotion'; 3 | 4 | export default function BoxTitle({ title, minTitle }) { 5 | return ( 6 |
7 |

{title} {minTitle}

8 |
9 | ); 10 | } 11 | 12 | const root = css` 13 | width: 100%; 14 | > h3 { 15 | color: #0ff7ab; 16 | text-shadow: 1px 2px 2px rgba(1, 1, 1, 0.12); 17 | margin: 0; 18 | > span { 19 | font-size: 10px; 20 | color: rgba(255, 255, 255, 0.75); 21 | } 22 | } 23 | 24 | &::after { 25 | height: 2px; 26 | width: 20px; 27 | background-color: #0ff7ab; 28 | } 29 | `; 30 | 31 | -------------------------------------------------------------------------------- /src/assets/icon/area.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/poweroff.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/containers/farming.scss: -------------------------------------------------------------------------------- 1 | 2 | .farming { 3 | display: flex; 4 | align-items: center; 5 | padding: 16px; 6 | 7 | &-item { 8 | flex: 1; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | &-icon { 14 | width: 45px; 15 | height: 45px; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 100%; 20 | border: 0.5px solid rgba($theme-color, 0.15); 21 | background-color: rgba(47, 238, 226, 0.05); 22 | 23 | > img { 24 | width: 55%; 25 | } 26 | } 27 | &-right { 28 | margin-left: 12px; 29 | } 30 | &-title { 31 | color: darken($text-color, 12%); 32 | font-weight: bold; 33 | } 34 | &-val { 35 | color: $text-white-color; 36 | font-size: 20px; 37 | line-height: 1.2; 38 | } 39 | } -------------------------------------------------------------------------------- /src/styles/layouts/box.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .layout-box { 4 | padding: 8px; 5 | 6 | & > .header { 7 | position: relative; 8 | width: 100%; 9 | margin-bottom: 12px; 10 | 11 | > h3 { 12 | color: $text-light-color; 13 | text-shadow: 1px 2px 2px rgba(1, 1, 1, 0.12); 14 | margin: 0; 15 | margin-left: 15px; 16 | > span { 17 | font-size: 10px; 18 | color: lighten(#44827f, 22%); 19 | margin-left: 6px; 20 | } 21 | } 22 | 23 | .line { 24 | position: absolute; 25 | height: 2px; 26 | width: 20px; 27 | background-color: #0ff7ab; 28 | bottom: -4px; 29 | left: 32px; 30 | } 31 | } 32 | 33 | & > .panel { 34 | background-color: rgba(1, 1, 1, 0.28); 35 | border-radius: 3px; 36 | box-shadow: 1px 2px 22px rgba(1, 1, 1, 0.13); 37 | } 38 | } -------------------------------------------------------------------------------- /src/components/Navigation.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { $icon } from '../utils'; 4 | 5 | 6 | export default function Navigation() { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 |
14 |

智慧农业大数据平台 · 大屏中心

15 |

Smart Agriculture Big Data Platform · Large Screen Center

16 |
17 |
18 |
19 |
20 | 21 | 设置 22 |
23 |
24 | 25 | 退出 26 |
27 |
28 |
29 | ); 30 | } 31 | 32 | -------------------------------------------------------------------------------- /src/assets/icon/riverway1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/Test.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react'; 2 | import { RangeBar } from '@antv/g2plot'; 3 | import { css } from 'emotion'; 4 | 5 | export default function App() { 6 | const ref = useRef(null); 7 | const data = [ 8 | { type: '分类一', values: [76, 100] }, 9 | { type: '分类二', values: [56, 108] }, 10 | { type: '分类三', values: [38, 129] }, 11 | { type: '分类四', values: [58, 155] }, 12 | { type: '分类五', values: [45, 120] }, 13 | { type: '分类六', values: [23, 99] }, 14 | { type: '分类七', values: [18, 56] }, 15 | { type: '分类八', values: [18, 34] }, 16 | ]; 17 | useEffect(() => { 18 | console.log('???'); 19 | if (!ref.current) return; 20 | const bp = new RangeBar(ref.current, { 21 | title: { 22 | visible: true, 23 | text: '区间条形图', 24 | }, 25 | data: data, 26 | xField: 'values', 27 | yField: 'type', 28 | }); 29 | bp.render(); 30 | }, []); 31 | 32 | return
; 33 | } 34 | 35 | const root = css` 36 | width: 700px; 37 | height: 500px; 38 | `; 39 | -------------------------------------------------------------------------------- /src/assets/icon/wind.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "agricultural-big-data", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@antv/g2plot": "^1.1.6", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "animated-number-react": "^0.1.0", 11 | "emotion": "^10.0.27", 12 | "react": "^16.13.1", 13 | "react-app-polyfill": "^1.0.6", 14 | "react-circular-progressbar": "^2.0.3", 15 | "react-dom": "^16.13.1", 16 | "react-scripts": "3.4.1", 17 | "sass": "^1.26.8", 18 | "serve": "^11.3.2", 19 | "source-map-explorer": "^2.4.2" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject", 26 | "server": "serve ./build", 27 | "analyze": "source-map-explorer 'build/static/js/*.js'" 28 | }, 29 | "eslintConfig": { 30 | "extends": "react-app" 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/assets/icon/pig.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/pig-gray.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Navigation from './components/Navigation'; 4 | import Natural from './containers/Natural'; 5 | import Economic from './containers/Economic'; 6 | import Farming from './containers/Farming'; 7 | import Industrial from './containers/Industrial'; 8 | import Advantage from './containers/Advantage'; 9 | import Profittrend from './containers/Profittrend'; 10 | 11 | export default function App() { 12 | return ( 13 |
14 | 15 |
16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 |
26 | 27 |
28 | 29 | 30 |
31 |
32 |
33 |

Copyright © 2020 Lizhooh

34 |
35 |
36 | ); 37 | } 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/containers/Farming.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AnNumber from 'animated-number-react'; 3 | 4 | import Layout from '../layouts/Box'; 5 | import { $icon } from '../utils'; 6 | 7 | export default function Farming() { 8 | const data = [ 9 | { icon: $icon('sell'), title: '加工销售', val: 203 }, 10 | { icon: $icon('company'), title: '龙头企业', val: 18 }, 11 | { icon: $icon('farm'), title: '家庭农场', val: 117 }, 12 | { icon: $icon('crops1'), title: '合作社区', val: 1290 }, 13 | ]; 14 | 15 | return ( 16 | 17 |
18 | {data.map((item, index) => ( 19 |
20 |
21 | 22 |
23 |
24 |
{item.title}
25 |
26 | val.toFixed(0) + ' 家'} 29 | duration={1250} 30 | /> 31 |
32 |
33 |
34 | ))} 35 |
36 | 37 | ); 38 | } -------------------------------------------------------------------------------- /src/assets/icon/crops3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/crops3-gray.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/components/navigation.scss: -------------------------------------------------------------------------------- 1 | 2 | .navigation { 3 | background-color: $navigation-color; 4 | height: $navigation-height; 5 | width: 100%; 6 | position: relative; 7 | border-bottom: 0.5px solid rgba($theme-color, 0.18); 8 | 9 | .center { 10 | position: absolute; 11 | z-index: 2; 12 | left: 50%; 13 | transform: translateX(-50%); 14 | padding: 12px; 15 | background-color: $app-color; 16 | border-radius: 20px; 17 | box-shadow: 1px 2px 20px rgba(1, 1, 1, 0.12); 18 | 19 | .title { 20 | p { 21 | margin: 0; 22 | text-align: center; 23 | font-size: 28px; 24 | color: $text-light-color; 25 | text-shadow: 1px 2px 2px rgba(1, 1, 1, 0.12); 26 | } 27 | p:last-child { 28 | font-size: 12px; 29 | color: $text-color; 30 | } 31 | } 32 | 33 | .logo { 34 | width: 100px; 35 | height: 100px; 36 | margin: 0 auto; 37 | > img { 38 | width: 100%; 39 | } 40 | } 41 | } 42 | 43 | .tool { 44 | float: right; 45 | display: flex; 46 | align-items: center; 47 | height: 100%; 48 | &-item { 49 | margin: 0 12px; 50 | display: flex; 51 | align-items: center; 52 | color: $text-color; 53 | > img { 54 | width: 18px; 55 | height: 18px; 56 | margin-right: 6px; 57 | } 58 | > span { 59 | font-size: 14px; 60 | } 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /src/styles/app.scss: -------------------------------------------------------------------------------- 1 | html, body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 5 | font-size: 15px; 6 | line-height: 1.6; 7 | background-color: #fff; 8 | color: #222; 9 | user-select: none; 10 | } 11 | 12 | a { 13 | text-decoration: none; 14 | } 15 | 16 | ::selection { 17 | background-color: rgba(1, 1, 1, 0.12); 18 | } 19 | 20 | img { 21 | pointer-events: none; 22 | } 23 | 24 | .app { 25 | background-color: $app-color; 26 | width: 100%; 27 | min-width: $app-width; 28 | min-height: 100vh; 29 | // background-image: linear-gradient($app-color, #32373a); 30 | 31 | .main { 32 | $w: 400px; 33 | padding: 10px 8px; 34 | padding-bottom: 4px; 35 | 36 | &-left { 37 | width: $w; 38 | float: left; 39 | } 40 | &-right { 41 | width: $w; 42 | float: right; 43 | } 44 | &-center { 45 | margin-left: $w; 46 | margin-right: $w; 47 | 48 | &-panel { 49 | height: 618px; 50 | background-color: #212121; 51 | margin: 12px; 52 | margin-top: 138px; 53 | padding-bottom: 4px; 54 | } 55 | } 56 | 57 | &::after { 58 | content: ' '; 59 | display: table; 60 | clear: both; 61 | } 62 | } 63 | 64 | > footer { 65 | padding-bottom: 5px; 66 | > p { 67 | text-align: center; 68 | font-size: 14px; 69 | color: $text-color; 70 | margin: 0; 71 | a { 72 | color: $text-color; 73 | } 74 | } 75 | } 76 | } 77 | 78 | 79 | -------------------------------------------------------------------------------- /src/assets/icon/administrator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/farm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/temperature.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/rainfull.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/containers/natural.scss: -------------------------------------------------------------------------------- 1 | 2 | .natural { 3 | padding: 16px; 4 | 5 | .box { 6 | display: flex; 7 | flex: 1; 8 | padding: 14px 0; 9 | 10 | &-icon { 11 | position: relative; 12 | width: 50px; 13 | height: 50px; 14 | background-color: rgba(47, 238, 226, 0.1); 15 | border: 0.5px solid rgba($theme-color, 0.15); 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | .dot { 20 | display: block; 21 | width: 2px; 22 | height: 2px; 23 | border-radius: 100%; 24 | position: absolute; 25 | z-index: 2; 26 | background-color: rgba($theme-color, 0.7); 27 | &:nth-of-type(1) { top: -1px; left: -1px; } 28 | &:nth-of-type(2) { top: -1px; right: -1px; } 29 | &:nth-of-type(3) { bottom: -1px; left: -1px; } 30 | &:nth-of-type(4) { bottom: -1px; right: -1px; } 31 | } 32 | > img { 33 | width: 70%; 34 | } 35 | } 36 | &-right { 37 | display: flex; 38 | align-items: center; 39 | } 40 | 41 | &-item { 42 | margin-left: 12px; 43 | > h4 { 44 | font-size: 14px; 45 | color: darken($text-color, 12%); 46 | margin: 0; 47 | line-height: 1.3; 48 | } 49 | > h2 { 50 | color: rgba(255, 255, 255, 0.85); 51 | font-weight: normal; 52 | margin: 0; 53 | font-size: 20px; 54 | } 55 | 56 | border-right: 0.5px solid rgba(255, 255, 255, 0.35); 57 | padding-right: 12px; 58 | 59 | &:last-of-type { 60 | border: 0; 61 | padding-right: 0; 62 | } 63 | } 64 | } 65 | 66 | &-list { 67 | display: flex; 68 | } 69 | &-item { 70 | flex: 1; 71 | } 72 | &-row { 73 | display: flex; 74 | flex: 1; 75 | } 76 | } -------------------------------------------------------------------------------- /src/containers/Natural.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Layout from '../layouts/Box'; 4 | import { $icon } from '../utils'; 5 | 6 | const Box = ({ icon, list = [] }) => ( 7 |
8 |
9 | 10 | {[...new Array(4)].map((v, i) => )} 11 |
12 |
13 | {list.map((item, index) => ( 14 |
15 |

{item.title}

16 |

{item.val}

17 |
18 | ))} 19 |
20 |
21 | ); 22 | 23 | export default function Natural() { 24 | const data = [ 25 | [ 26 | { icon: $icon('temperature'), list: [{ title: '平均气温', val: '13.7°C' }] }, 27 | { icon: $icon('rainfull'), list: [{ title: '年均降雨', val: '384.5mm' }] }, 28 | ], 29 | [ 30 | { icon: $icon('wind'), list: [{ title: '平均风速', val: '3.4m/s' }] }, 31 | { icon: $icon('geogarphy'), list: [{ title: '地形地貌', val: '冲击平原区' }] }, 32 | ], 33 | { 34 | icon: $icon('riverway1'), list: [ 35 | { title: '一级河道', val: '5个' }, 36 | { title: '二级河道', val: '12个' }, 37 | { title: '蓄水量', val: '1.7亿m3' }, 38 | ] 39 | }, 40 | { 41 | icon: $icon('forest'), list: [ 42 | { title: '区域面积', val: '1296km2' }, 43 | { title: '林地面积', val: '90万亩' }, 44 | ], 45 | } 46 | ]; 47 | 48 | return ( 49 | 50 |
51 | {data.map((item, index) => ( 52 |
53 | {Array.isArray(item) ? 54 |
55 | {item.map((v, idx) => )} 56 |
: 57 |
58 | 59 |
60 | } 61 |
62 | ))} 63 |
64 | 65 | ); 66 | } -------------------------------------------------------------------------------- /src/assets/icon/crops2-gray.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/crops2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/crops4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/company.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/sell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/containers/advantage.scss: -------------------------------------------------------------------------------- 1 | 2 | .advantage { 3 | padding-bottom: 12px; 4 | 5 | .list { 6 | &-item { 7 | display: flex; 8 | align-items: center; 9 | padding: 5px 0; 10 | padding-right: 4px; 11 | border-bottom: 0.5px solid rgba($theme-color, 0.15); 12 | } 13 | &-val { 14 | color: $text-white-color; 15 | width: 80px; 16 | text-align: right; 17 | padding-bottom: 4px; 18 | padding-right: 6px; 19 | font-size: 15px; 20 | } 21 | &-right { 22 | flex: 1; 23 | display: flex; 24 | align-items: center; 25 | } 26 | &-icons { 27 | position: relative; 28 | padding: 0 3px; 29 | > img { 30 | width: 24px; 31 | height: 24px; 32 | } 33 | > span { 34 | position: absolute; 35 | z-index: 2; 36 | top: -18px; 37 | left: -5px; 38 | color: $text-color; 39 | font-size: 13px; 40 | } 41 | } 42 | } 43 | .news { 44 | display: flex; 45 | align-items: center; 46 | padding: 0 12px; 47 | 48 | &-item { 49 | flex: 1; 50 | display: flex; 51 | align-items: center; 52 | padding: 5px; 53 | padding-top: 0; 54 | &:first-child { 55 | padding-top: 5px; 56 | } 57 | } 58 | &-index { 59 | background-color: $theme-color; 60 | color: #343434; 61 | font-weight: bold; 62 | font-family: 'consolas'; 63 | font-size: 14px; 64 | width: 20px; 65 | height: 20px; 66 | line-height: 20px; 67 | border-radius: 15px; 68 | display: block; 69 | text-align: center; 70 | } 71 | &-title { 72 | color: $text-color; 73 | margin-left: 10px; 74 | font-size: 14px; 75 | } 76 | } 77 | 78 | .mark-title { 79 | color: $text-color; 80 | padding: 16px; 81 | padding-left: 30px; 82 | padding-bottom: 0; 83 | font-size: 13px; 84 | position: relative; 85 | display: block; 86 | .dot { 87 | display: block; 88 | position: absolute; 89 | width: 3px; 90 | height: 3px; 91 | border-radius: 100%; 92 | background-color: $text-color; 93 | top: 24px; left: 19px; 94 | z-index: 2; 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /src/assets/icon/setting.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/forest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/icon/geogarphy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/containers/Industrial.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AnNumber from 'animated-number-react'; 3 | 4 | import Layout from '../layouts/Box'; 5 | 6 | const MarkTitle = ({ title }) => ( 7 |
8 | {title} 9 |
10 | ); 11 | 12 | export default function Industrial() { 13 | const data = { 14 | l1: [ 15 | { title: '总人数', val: 2.44, unit: '万' }, 16 | { title: '占地面积', val: 62.31, unit: '万亩' }, 17 | { title: '支配收入', val: 2.42, unit: '万元' }, 18 | ], 19 | l2: [ 20 | { title: '耕地面积', val: 23.78, unit: '万亩' }, 21 | { title: '小站稻', val: 9.61, unit: '万亩' }, 22 | { title: '生猪出栏', val: 38.74, unit: '万头' }, 23 | ], 24 | }; 25 | return ( 26 | 27 |
28 | 29 |
30 | {data.l1.map((item, index) => ( 31 |
32 |
{item.title}
33 |
34 | val.toFixed(2) + item.unit} 37 | duration={1250} 38 | /> 39 |
40 |
41 | ))} 42 |
43 |
44 | {data.l2.map((item, index) => ( 45 |
46 |
{item.title}
47 |
48 | val.toFixed(2) + item.unit} 51 | duration={1250} 52 | /> 53 |
54 |
55 | ))} 56 |
57 | 58 |
59 |
60 | 中蒙俄经济走廊节点 61 | 海陆联运大通道 62 | 一路一带 63 | 消费终端 64 | 内需建设之路 65 | 大数据新经济 66 | 抗病毒疫苗 67 |
68 |
69 | 70 | ); 71 | } -------------------------------------------------------------------------------- /src/assets/icon/crops5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/styles/containers/industrial.scss: -------------------------------------------------------------------------------- 1 | 2 | .industrial { 3 | .list { 4 | color: #ddd; 5 | display: flex; 6 | text-align: center; 7 | padding: 15px 12px; 8 | 9 | &-item { 10 | flex: 1; 11 | background-color: rgba(47, 238, 226, 0.03); 12 | margin: 0 12px; 13 | position: relative; 14 | } 15 | &-title { 16 | color: $text-color; 17 | font-weight: bold; 18 | background-color: rgba(30, 255, 60, 0.08); 19 | height: 30px; 20 | line-height: 30px; 21 | } 22 | &-val { 23 | height: 40px; 24 | line-height: 40px; 25 | font-size: 18px; 26 | color: $text-white-color; 27 | } 28 | } 29 | 30 | .mark-title { 31 | color: $text-color; 32 | padding: 16px; 33 | padding-left: 30px; 34 | padding-bottom: 0; 35 | font-size: 13px; 36 | position: relative; 37 | display: block; 38 | .dot { 39 | display: block; 40 | position: absolute; 41 | width: 3px; 42 | height: 3px; 43 | border-radius: 100%; 44 | background-color: $text-color; 45 | top: 24px; left: 19px; 46 | z-index: 2; 47 | } 48 | } 49 | 50 | .wordcloud { 51 | height: 200px; 52 | background-color: rgba(1, 1, 1, 0.1); 53 | position: relative; 54 | 55 | > span { 56 | font-size: 14px; 57 | // font-weight: bold; 58 | position: absolute; 59 | z-index: 2; 60 | text-shadow: 1px 2px 2px rgba(1, 1, 1, 0.12); 61 | transition: all 0.2s ease-in-out; 62 | background-color: rgba(255, 255, 255, 0.04); 63 | border-radius: 35px; 64 | padding: 0.2em 0.9em; 65 | &:hover { 66 | transform: scale(1.2); 67 | } 68 | } 69 | .w1 { 70 | color: #3c9; 71 | top: 80px; 72 | left: 170px; 73 | font-size: 16px; 74 | } 75 | .w2 { 76 | color: #78f; 77 | left: 50px; 78 | top: 20px; 79 | } 80 | .w3 { 81 | color: #f34; 82 | right: 50px; 83 | top: 30px; 84 | font-size: 20px; 85 | } 86 | .w4 { 87 | color: #38f; 88 | bottom: 20px; 89 | right: 40px; 90 | font-size: 18px; 91 | } 92 | .w5 { 93 | color: #f90; 94 | top: 65px; 95 | left: 20px; 96 | font-size: 16px; 97 | } 98 | .w6 { 99 | color: #f7a; 100 | bottom: 15px; 101 | left: 40px; 102 | } 103 | .w7 { 104 | color: #ff4; 105 | left: 100px; 106 | bottom: 50px; 107 | } 108 | } 109 | } 110 | 111 | -------------------------------------------------------------------------------- /src/styles/containers/economic.scss: -------------------------------------------------------------------------------- 1 | 2 | .economic { 3 | 4 | .industry-one { 5 | color: #ddd; 6 | display: flex; 7 | text-align: center; 8 | padding: 20px 12px; 9 | &-item { 10 | flex: 1; 11 | background-color: rgba(47, 238, 226, 0.03); 12 | margin: 0 12px; 13 | position: relative; 14 | } 15 | &-title { 16 | color: $text-color; 17 | font-weight: bold; 18 | // box-shadow: 0px 0px 13px rgba($theme-color, 0.13); 19 | background-color: rgba(30, 255, 60, 0.08); 20 | height: 30px; 21 | line-height: 30px; 22 | } 23 | &-val { 24 | height: 40px; 25 | line-height: 40px; 26 | font-size: 20px; 27 | color: $text-white-color; 28 | } 29 | } 30 | 31 | .industry-two { 32 | color: $text-color; 33 | display: flex; 34 | flex-direction: column; 35 | &-item { 36 | display: flex; 37 | align-items: center; 38 | padding: 6px 12px; 39 | border-bottom: 0.5px solid rgba($theme-color, 0.15); 40 | } 41 | &-circular { 42 | width: 24px; 43 | height: 24px; 44 | margin-right: 8px; 45 | } 46 | &-pre { 47 | width: 60px; 48 | color: #6a1; 49 | } 50 | &-title { 51 | flex: 1; 52 | color: darken($text-color, 15%); 53 | font-weight: bold; 54 | } 55 | &-val { 56 | width: 120px; 57 | text-align: right; 58 | color: darken($text-color, 4%); 59 | font-weight: bold; 60 | } 61 | } 62 | 63 | .industry-three { 64 | display: flex; 65 | align-items: center; 66 | &-item { 67 | flex: 1; 68 | padding: 20px; 69 | position: relative; 70 | 71 | > h4 { 72 | text-align: center; 73 | margin: 0; 74 | color: $text-color; 75 | margin-top: 8px; 76 | } 77 | 78 | .line { 79 | position: absolute; 80 | bottom: 80px; 81 | left: 50%; 82 | transform: translateX(-50%); 83 | width: 40px; 84 | height: 2px; 85 | background-color: rgba(30, 255, 60, 0.12); 86 | } 87 | } 88 | } 89 | 90 | .mark-title { 91 | color: $text-color; 92 | margin: 12px 0 0 26px; 93 | font-size: 13px; 94 | position: relative; 95 | display: block; 96 | .dot { 97 | display: block; 98 | position: absolute; 99 | width: 3px; 100 | height: 3px; 101 | border-radius: 100%; 102 | background-color: $text-color; 103 | top: 9px; left: -11px; 104 | z-index: 2; 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/containers/Advantage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import AnNumber from 'animated-number-react'; 3 | 4 | import Layout from '../layouts/Box'; 5 | import { $icon, chunk } from '../utils'; 6 | 7 | const MarkTitle = ({ title }) => ( 8 |
9 | {title} 10 |
11 | ); 12 | 13 | export default function Advantage() { 14 | const data = { 15 | list: [ 16 | { 17 | title: '小站稻', val: 9.61, unit: '万亩', num: 0.7371, 18 | icon: $icon('crops2'), iconHas: $icon('crops2-gray'), 19 | }, 20 | { 21 | title: '生猪出栏', val: 38.74, unit: '万头', num: 0.5554, 22 | icon: $icon('pig'), iconHas: $icon('pig-gray'), 23 | }, 24 | ], 25 | news: chunk([ 26 | { title: '优质小站稻', index: 1 }, 27 | { title: '万家水稻创意产业园', index: 5 }, 28 | { title: '“天河”水产示范区', index: 2 }, 29 | { title: '设福农业示范区', index: 6 }, 30 | { title: '华南生猪养殖研究中心', index: 3 }, 31 | { title: '抗蓝耳病种猪群中心', index: 7 }, 32 | { title: '精品小站稻种植园', index: 4 }, 33 | { title: '农村合作社示范企业', index: 8 }, 34 | ], 2), 35 | }; 36 | 37 | return ( 38 | 39 |
40 | {data.list.map((item, index) => ( 41 |
42 | 43 | 44 |
45 | 46 | val.toFixed(2) + item.unit} 49 | duration={1250} 50 | /> 51 | 52 |
53 | {[...new Array(10)].map((v, i) => ( 54 |
55 | 56 | {i + 1 === Math.floor(item.num * 10) && {item.num * 10000 / 100}%} 57 |
58 | ))} 59 |
60 |
61 |
62 | ))} 63 |
64 | 65 |
66 | {data.news.map((list, index) => ( 67 |
68 | {list.map((item, idx) => ( 69 |
70 | {item.index} 71 | {item.title} 72 |
73 | ))} 74 |
75 | ))} 76 |
77 |
78 | 79 | ); 80 | } -------------------------------------------------------------------------------- /src/assets/icon/crops1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/containers/Economic.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CircularProgressbar, buildStyles } from 'react-circular-progressbar'; 3 | import AnNumber from 'animated-number-react'; 4 | 5 | import Layout from '../layouts/Box'; 6 | 7 | const MarkTitle = ({ title }) => ( 8 |
9 | {title} 10 |
11 | ); 12 | 13 | export default function Economic() { 14 | const data = { 15 | industryOne: [ 16 | { title: 'CPI（当月）', val: '3.3%' }, 17 | { title: 'PPI（当月）', val: '-2.6%' }, 18 | { title: 'PMI（当月）', val: '52%' }, 19 | ], 20 | industryTwo: [ 21 | { title: '第一产业', val: 17.43, unit: '亿元', num: 0.0398, color: '#0ff7ab' }, 22 | { title: '第二产业', val: 297.62, unit: '亿元', num: 0.6793, color: '#0ff7ab' }, 23 | { title: '第三产业', val: 122.98, unit: '亿元', num: 0.2809, color: '#0ff7ab' }, 24 | ], 25 | industryThree: [ 26 | { title: '种植业', val: 0.27, color: '#3c5' }, 27 | { title: '畜牧业', val: 0.47, color: '#39f' }, 28 | { title: '养渔业', val: 0.26, color: '#fa0' }, 29 | ], 30 | }; 31 | 32 | return ( 33 | 34 |
35 |
36 | 37 |
38 | {data.industryOne.map((item, index) => ( 39 |
40 |
{item.title}
41 |
{item.val}
42 |
43 | ))} 44 |
45 |
46 | {data.industryTwo.map((item, index) => ( 47 |
48 |
49 | 59 |
60 |
{item.num * 10000 / 100 + '%'}
61 |
{item.title}
62 |
63 | val.toFixed(2) + item.unit} 66 | duration={1250} 67 | /> 68 |
69 |
70 | ))} 71 |
72 | 73 |
74 | {data.industryThree.map((item, index) => ( 75 |
76 | 87 |
88 |

{item.title}

89 |
90 | ))} 91 |
92 |
93 | 94 | ); 95 | } 96 | -------------------------------------------------------------------------------- /src/styles/containers/profittrend.scss: -------------------------------------------------------------------------------- 1 | 2 | .profittrend { 3 | padding: 2px 6px 10px; 4 | margin: 0 auto; 5 | 6 | .header { 7 | display: flex; 8 | align-items: center; 9 | padding: 12px; 10 | box-sizing: border-box; 11 | 12 | &-icon { 13 | width: 50px; 14 | height: 50px; 15 | background-color: rgba(47, 238, 226, 0.05); 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 100%; 20 | margin-bottom: 4px; 21 | border: 0.5px solid rgba($theme-color, 0.15); 22 | > img { 23 | width: 67%; 24 | } 25 | } 26 | &-left, &-right { 27 | color: $text-color; 28 | } 29 | &-pre { 30 | flex: 1; 31 | display: flex; 32 | margin: 0 12px; 33 | flex-direction: column; 34 | justify-items: center; 35 | &-line { 36 | flex: 1; 37 | justify-content: space-between; 38 | display: flex; 39 | background-color: rgba(255, 255, 255, 0.1); 40 | border-radius: 2px; 41 | overflow: hidden; 42 | > div { 43 | height: 18px; 44 | line-height: 18px; 45 | background-color: rgba($theme-color, 0.8); 46 | text-align: center; 47 | font-size: 13px; 48 | font-weight: bold; 49 | &:first-of-type { 50 | background-color: darken($theme-color, 20%); 51 | } 52 | } 53 | } 54 | > p { 55 | text-align: center; 56 | color: $text-color; 57 | margin: 0; 58 | margin-top: 4px; 59 | font-size: 14px; 60 | } 61 | } 62 | } 63 | 64 | .dataview { 65 | display: flex; 66 | align-items: center; 67 | } 68 | 69 | .table { 70 | flex: 1.35; 71 | &-title { 72 | color: $text-light-color; 73 | padding-left: 12px; 74 | font-size: 17.55px; 75 | margin: 0; 76 | margin-bottom: 4px; 77 | } 78 | &-panel { 79 | border: 0.5px solid rgba($theme-color, 0.12); 80 | flex: 1; 81 | margin: 0 8px; 82 | } 83 | &-row { 84 | display: flex; 85 | color: $text-color; 86 | border-bottom: 0.5px solid rgba($theme-color, 0.15); 87 | &:first-of-type { 88 | border-radius: 2px 2px 0 0; 89 | // color: #222; 90 | // background-color: darken($theme-color, 12%); 91 | background-color: rgba(12, 13, 11, 0.24); 92 | font-weight: bold; 93 | font-size: 15px; 94 | color: $theme-color; 95 | border: none; 96 | } 97 | &:last-of-type { 98 | border-radius: 0 0 2px 2px; 99 | border: none; 100 | } 101 | 102 | > span, > div { 103 | flex: 1; 104 | align-items: center; 105 | padding: 2px 8px; 106 | font-size: 14px; 107 | } 108 | > div { 109 | display: flex; 110 | align-items: center; 111 | > span { 112 | width: 40px; 113 | } 114 | > img { 115 | width: 13px; 116 | height: 13px; 117 | } 118 | } 119 | } 120 | } 121 | 122 | .devote { 123 | flex: 1; 124 | margin: 0 10px; 125 | &-title { 126 | color: $text-light-color; 127 | margin: 0; 128 | font-size: 17.55px; 129 | } 130 | &-text { 131 | margin-bottom: 1px; 132 | font-size: 13px; 133 | color: $text-color; 134 | > span:last-of-type { 135 | float: right; 136 | } 137 | } 138 | &-item { 139 | margin-top: 1px; 140 | } 141 | &-line { 142 | height: 9px; 143 | width: 100%; 144 | background-color: rgba(255, 255, 255, 0.1); 145 | border-radius: 5px; 146 | overflow: hidden; 147 | > div { 148 | border-radius: 5px; 149 | height: 100%; 150 | background-color: $theme-color; 151 | } 152 | } 153 | } 154 | } -------------------------------------------------------------------------------- /src/assets/icon/riverway2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/containers/Profittrend.jsx: -------------------------------------------------------------------------------- 1 | import React, { useRef, useEffect } from 'react'; 2 | import { Chart } from '@antv/g2'; 3 | import AnNumber from 'animated-number-react'; 4 | 5 | import Layout from '../layouts/Box'; 6 | import { $icon } from '../utils'; 7 | 8 | const MyChart = () => { 9 | const ref = useRef(null); 10 | const data = [ 11 | { time: '1 月', type: '蔬菜类', value: 12000 }, 12 | { time: '1 月', type: '肉禽类', value: 10000 }, 13 | { time: '2 月', type: '蔬菜类', value: 7000 }, 14 | { time: '2 月', type: '肉禽类', value: 4000 }, 15 | { time: '3 月', type: '蔬菜类', value: 5000 }, 16 | { time: '3 月', type: '肉禽类', value: 8000 }, 17 | { time: '4 月', type: '蔬菜类', value: 8000 }, 18 | { time: '4 月', type: '肉禽类', value: 9000 }, 19 | { time: '5 月', type: '蔬菜类', value: 7000 }, 20 | { time: '5 月', type: '肉禽类', value: 8000 }, 21 | { time: '6 月', type: '蔬菜类', value: 14000 }, 22 | { time: '6 月', type: '肉禽类', value: 8000 }, 23 | { time: '7 月', type: '肉禽类', value: 23000 }, 24 | { time: '7 月', type: '蔬菜类', value: 17000 }, 25 | ]; 26 | 27 | useEffect(() => { 28 | if (!ref) return; 29 | 30 | const chart = new Chart({ 31 | container: ref.current, 32 | autoFit: true, 33 | height: 260, 34 | }); 35 | chart.data(data); 36 | chart.scale('value', { alias: '金额（千元）' }); 37 | chart.axis('time', { tickLine: null }); 38 | chart.axis('value', { 39 | label: { 40 | formatter: text => text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'), 41 | }, 42 | title: { 43 | offset: 80, 44 | style: { fill: '#aaa' }, 45 | }, 46 | }); 47 | chart.legend({ position: 'top' }); 48 | chart.tooltip(false); 49 | chart.interaction('active-region'); 50 | chart 51 | .interval() 52 | .adjust('stack') 53 | .position('time*value') 54 | .color('type', ['#0fc7abcc', '#0ff7abdd']); 55 | chart.render(); 56 | }, [data]); 57 | 58 | return ( 59 |
60 | ); 61 | } 62 | 63 | export default function Profittrend() { 64 | const data = { 65 | head: [ 66 | { icon: $icon('crops5'), title: '蔬菜类', num: 0.37 }, 67 | { icon: $icon('pig'), title: '肉禽类', num: 0.63 }, 68 | ], 69 | // 蔬菜 70 | veget: [ 71 | { title: '菜心', yo: 0.015, mo: 0.012 }, 72 | { title: '水稻', yo: 0.072, mo: -0.008 }, 73 | { title: '生菜', yo: -0.022, mo: -0.024 }, 74 | { title: '芹菜', yo: 0.009, mo: -0.006 }, 75 | { title: '韭菜', yo: 0.032, mo: 0.019 }, 76 | ], 77 | // 肉禽 78 | meat: [ 79 | { title: '猪肉', yo: 0.045, mo: -0.009 }, 80 | { title: '牛肉', yo: 0.037, mo: -0.012 }, 81 | { title: '鸡肉', yo: 0.012, mo: 0.004 }, 82 | { title: '鱼肉', yo: -0.011, mo: -0.016 }, 83 | { title: '羊肉', yo: -0.018, mo: 0.008 }, 84 | ], 85 | devote: [ 86 | { title: '猪肉', num: 0.6212 }, 87 | { title: '牛肉', num: 0.2253 }, 88 | { title: '韭菜', num: 0.0848 }, 89 | { title: '鸡肉', num: 0.0691 }, 90 | { title: '菜籽', num: 0.0211 }, 91 | ], 92 | }; 93 | 94 | const rootStyle = { 95 | margin: '0 auto', maxWidth: 720 96 | }; 97 | 98 | return ( 99 | 100 |
101 |
102 |
103 |
104 | 105 |
106 |
{data.head[0].title}
107 |
108 |
109 |
110 |
111 | val.toFixed(0) + '%'} 114 | duration={1250} 115 | /> 116 |
117 |
118 | val.toFixed(0) + '%'} 121 | duration={1250} 122 | /> 123 |
124 |
125 |

{data.head[0].title}/{data.head[1].title}盈利比例

126 |
127 |
128 |
129 | 130 |
131 |
{data.head[1].title}
132 |
133 |
134 |
135 | 136 |
137 |
138 |
139 |

当月增速同比/环比

140 |
141 |
142 | 名称 143 | 同比增速 144 | 环比增速 145 |
146 | {data.veget.map((item, index) => ( 147 |
148 | {item.title} 149 |
150 | {item.yo * 10000 / 100}% 151 | 0 ? 'triangle-up' : 'triangle-down')} /> 152 |
153 |
154 | {item.mo * 10000 / 100}% 155 | 0 ? 'triangle-up' : 'triangle-down')} /> 156 |
157 |
158 | ))} 159 |
160 |
161 |
162 |

盈利贡献前五

163 |
164 | {data.devote.map((item, index) => ( 165 |
166 |
167 | {item.num * 10000 / 100}% 168 | {item.title} 169 |
170 |
171 |
172 |
173 |
174 | ))} 175 |
176 |
177 |
178 |
179 | 180 | ); 181 | } -------------------------------------------------------------------------------- /src/assets/icon/crops6.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------