Compare commits

...

7 Commits

Author SHA1 Message Date
liulei
86e33ca582 前端整体框架 2024-11-01 10:06:22 +08:00
liulei
ccc8df4d7a 前端部分整体框架,执行npm install和npm start 2024-11-01 10:01:14 +08:00
123456
f7a5a2c440 测试 2024-11-01 09:40:50 +08:00
123456
576ef7c62e Merge branch 'dev1.0' of https://ydliu.weneye.cn/git/liulei/samrtAgriculturalSystem into dev1.0 2024-11-01 09:40:28 +08:00
123456
97650cbe23 测试 2024-11-01 09:38:41 +08:00
123456
886ebc731a test 2024-10-31 19:18:08 +08:00
123456
e41d8411e4 测试删除 2024-10-31 18:18:03 +08:00
54 changed files with 22022 additions and 2 deletions

View File

@ -1 +0,0 @@
dev测试111

23
front-end/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

2
front-end/README.md Normal file
View File

@ -0,0 +1,2 @@
2024.11.1
这是前端的部分打开这个项目之后执行npm install命令下载一些依赖下载完成后执行npm start可以在浏览器看到整个框架结构src下有三个文件夹其中components一些可以复用的组件pages是各个界面的详细信息routers是路由信息管理各个界面的路由。目前的主要工作在pages文件下可以看到有三个文件夹分别是admin、login、和404在admin下是我们5个主路由界面的详细信息打开自己负责的部分对相应的组件修改即可。

20837
front-end/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

42
front-end/package.json Normal file
View File

@ -0,0 +1,42 @@
{
"name": "react-work",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"antd": "^5.21.4",
"chinese-lunar-calendar": "^1.0.1",
"lunar-javascript": "^1.6.12",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^6.27.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -0,0 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

View File

@ -0,0 +1,3 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

10
front-end/record.txt Normal file
View File

@ -0,0 +1,10 @@
10.21记录:
种植者界面的侧边导航栏跳转有问题,需要改一下
10.22
1、区分内联式和外部样式的一些区别命名、引号、分号
10.23
1、dropdown样式的使用
2、理解直接用navigate重定向

10
front-end/src/App.css Normal file
View File

@ -0,0 +1,10 @@
html,body,#root,.ant-layout{
width: 100%;
height: 100%;
}
.site-layout-background{
padding:0 !important;
}

29
front-end/src/App.js Normal file
View File

@ -0,0 +1,29 @@
import logo from './logo.svg';
import './App.css';
import {Routes,Route, Navigate} from 'react-router-dom'
import { adminRoutes } from './routers/routers';
import Frame from './components/frame/frame';
import {isLogined } from './utils/auth'
import Login from './pages/login/login';
//权限判断也放在这里
function App() {
return (isLogined()?
<Frame>
<Routes>
{adminRoutes.map(route => {
// return(<Route key={route.path} {...route}/>)
return(<Route key={route.path} path={route.path} element={route.element}/>)
})}
<Route path='/' element={<Navigate to={'/admin/gis'}/>}/>
<Route path='/*' element={<Navigate to={'/notfound'}/>}/>
</Routes>
</Frame>:
<Routes>
<Route path="/login" element={<Login />}/>
<Route path='*' element={<Navigate to={'/login'}/>}/>
</Routes>
);
}
export default App;

View File

@ -0,0 +1,8 @@
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});

View File

@ -0,0 +1,18 @@
.change-menu .ant-menu-item-selected {
font-size: 23px;
font-weight: 520;
background-color: white;
color: black;
}
.change-menu{
font-size: 14px;
font-weight:100;
padding-top: 15px;
}
.change-menu .ant-menu-item {
padding-top: 30px; /* 控制每个选项上方的间距 */
padding-bottom: 25px; /* 控制每个选项下方的间距 */
}

View File

@ -0,0 +1,41 @@
import React from "react";
import { Layout, Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import './Sidebar.css'
const { Sider } = Layout;
function Sidebar({ items, basePath }) {
const navigate = useNavigate();
const location = useLocation();
const selectedKey = location.pathname.replace(basePath, "");
const menuItems = items.map((item) => ({
key: item.path, // 这里的 key 是 item.path
label:(<span> {item.label}</span>)
}));
return (
<Sider
width={260}
style={{
background: "#fff",
borderRight: "1px solid #d9d9d9",
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
}}
>
<Menu
mode="inline"
selectedKeys={[selectedKey]}
style={{ height: "100%", borderRight: 0 }}
onClick={(p) => navigate(`${basePath}${p.key}`)}
items={menuItems}
className="change-menu"
/>
</Sider>
);
}
export default Sidebar;

View File

@ -0,0 +1,53 @@
.site-layout {
padding: 0 0px;
width: 100%; /* 设置宽度为100% */
}
.site-layout-background {
padding: 24px;
min-height: 380px;
width: 100%; /* 确保这个div也占满100%宽度 */
}
.headmenu {
background-color: white;
position: sticky;
top: 0;
z-index: 1;
width: 100%;
border-bottom: 1px solid #d9d9d9;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
display: flex;
/* justify-content: space-between;将内容分开对齐 */
align-items: center; /*垂直居中对齐*/
}
.child-box {
flex: 1; /* 使每个框占据相等的空间 */
min-width: 80px; /* 设置最小宽度 */
height: 50px; /* 设置最小 */
display: flex; /* 使用flexbox布局 */
align-items: center; /* 垂直居中对齐内容 */
justify-content: center; /* 水平居中对齐内容 */
text-align: center; /* 文本居中 */
border: 1px solid #d9d9d9; /* 边框 */
padding: 5px; /* 内边距 */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
line-height: 1.5; /*行间距*/
}
/* 右侧个人信息 */
.ant-dropdown-menu {
background-color: #f0f0f0; /* 修改背景颜色 */
}
.ant-dropdown-menu-item {
padding: 10px 20px; /* 修改每个菜单项的内边距 */
color: #333; /* 修改字体颜色 */
}
/* 添加 hover 状态 */
.ant-dropdown-menu-item:hover {
background-color: #e6f7ff; /* 修改悬停时的背景颜色 */
color: #1890ff; /* 修改悬停时的字体颜色 */
}

View File

@ -0,0 +1,145 @@
import { Breadcrumb, Layout, Menu, Dropdown, Button } from "antd";
import React, { useEffect, useState } from "react";
import { adminRoutes } from "../../routers/routers";
import { useNavigate } from "react-router-dom";
import "./frame.css";
import { Lunar } from "lunar-javascript";
import { clearToken } from "../../utils/auth";
const { Header, Content, Footer } = Layout;
const items_header = adminRoutes.map((route) => ({
key: "/admin" + route.path,
label: route.label,
}));
function Frame(props) {
const navigate = useNavigate();
const [dateTime, setDateTime] = useState(new Date());
const [lunarDate, setLunarDate] = useState("");
//右边角色信息栏的数据
const items = [
{
key: "myinf",
label: <a>我的</a>,
},
{
key: "logout",
label: <a
onClick={() => {
clearToken();
navigate('/login');
}}
>退出登录</a>,
},
];
useEffect(() => {
const timer = setInterval(() => {
const now = new Date();
setDateTime(now);
// 创建 Lunar 实例
const lunarInfo = Lunar.fromDate(now);
setLunarDate(
`${lunarInfo.getMonthInChinese()}${lunarInfo.getDayInChinese()}`
);
}, 1000);
return () => clearInterval(timer);
}, []);
const formatDate = (date) => {
return `${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`;
};
const formatTime = (date) => {
const days = ["日", "一", "二", "三", "四", "五", "六"];
return (
<>
{date.toLocaleTimeString()} <br />
星期{days[date.getDay()]}
</>
);
};
return (
<Layout>
<Header className="headmenu">
<Menu
// theme="dark"
mode="horizontal"
defaultSelectedKeys={["2"]}
items={items_header}
onClick={(p) => {
navigate(p.key);
}}
style={{
marginLeft: "15%", // 右移15
gap: "20px",
// borderBottom: "1px solid #d9d9d9"
}}
/>
<div style={{ display: "flex", gap: "10px", marginLeft: "105px" }}>
<div className="child-box">
阳历
<br />
{formatDate(dateTime)}
</div>
<div className="child-box">
农历
<br />
{lunarDate}
</div>
<div className="child-box"></div>
<div className="child-box">{formatTime(dateTime)}</div>
</div>
{/* 这里dropdown的使用显示的仅仅是button交互之后才会显示dropdown的内容所以直接修改button */}
<Dropdown
menu={{
items,
}}
placement="bottom"
arrow={{
pointAtCenter: true,
}}
>
<Button
style={{
margin: "60px",
borderRadius: "20px",
height: "40px",
minWidth: "135px",
padding: "10px 20px",
}}
>
种植者角色
</Button>
</Dropdown>
</Header>
<Content
className="site-layout"
style={{
backgroundColor: "white",
}}
>
<div
className="site-layout-background"
style={{
padding: 24,
minHeight: 380,
}}
>
{props.children}
</div>
</Content>
</Layout>
);
}
export default Frame;

View File

@ -0,0 +1,9 @@
import React from 'react'
function GisFoot() {
return (
<div>GisFoot</div>
)
}
export default GisFoot

13
front-end/src/index.css Normal file
View File

@ -0,0 +1,13 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

27
front-end/src/index.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter as Router,Route,Routes, Navigate} from "react-router-dom"
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {adminRoutes, mainRoutes} from './routers/routers'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Router>
<Routes>
<Route path='/admin/*' element=<App/>/>
{
mainRoutes.map(route => {
return(<Route key={route.path} {...route}/>)
})
}
<Route path='/' element={<Navigate to={'/admin/gis'}/>}/>
<Route path='/*' element={<Navigate to={'/notfound'}/>}/>
</Routes>
</Router>
</React.StrictMode>
);
reportWebVitals();

1
front-end/src/logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -0,0 +1,33 @@
import React from 'react'
import {Routes,Route,Navigate} from "react-router-dom"
import { adminRoutes } from '../../../routers/routers'
import Sidebar from '../../../components/Sidebar/Sidebar'
import { Layout } from 'antd'
import '../../../App.css'
import { Content } from 'antd/es/layout/layout'
function AdminFarm() {
const adminFarmRoute = adminRoutes.find((route)=>route.path === '/adminfarm/*')
const farmChild = adminFarmRoute.children
return (
<Layout style={{ minHeight: "100vh"}}>
<Sidebar items={farmChild} basePath="/admin/adminfarm"/>
<Content style={{
padding: 24,
margin: 0,
minHeight: 280,
background: "#fff",
}}>
<Routes>
{farmChild.map((route)=>{
return(<Route key={route.path} path={route.path} element={route.element}/>)
})}
<Route path='/*' element={<Navigate to='/admin/adminfarm/myfarm'/>}/>
</Routes>
</Content>
</Layout>
)
}
export default AdminFarm

View File

@ -0,0 +1,9 @@
import React from 'react'
function MyFarm() {
return (
<div>我的农场</div>
)
}
export default MyFarm

View File

@ -0,0 +1,9 @@
import React from 'react'
function Account() {
return (
<div>种植者员工账号</div>
)
}
export default Account

View File

@ -0,0 +1,47 @@
import React from "react";
import Sidebar from "../../../components/Sidebar/Sidebar";
import { Layout } from "antd";
import { Outlet, Routes, Route,Navigate } from "react-router-dom";
import { adminRoutes } from "../../../routers/routers";
import '../../../App.css'
const { Content } = Layout;
function AdminGrower() {
const growerRoute = adminRoutes.find(
(route) => route.path === "/admingrower/*"
);
const growerChildren = growerRoute.children;
return (
<Layout style={{ minHeight: "100vh",padding:"0px 0px"}}>
{/* 将 children 传递给 Sidebar生成侧边栏 */}
<Sidebar items={growerChildren} basePath="/admin/admingrower" />
<Layout style={{ padding: "0 0",height:'100vh'}}>
<Content
style={{
padding: 24,
margin: 0,
minHeight: 280,
background: "#fff",
}}
>
<Routes>
{growerChildren.map((route) => (
<Route
key={route.path}
path={route.path}
element={route.element}
/>
))}
<Route path='/*' element={<Navigate to="/admin/admingrower/basicinformation"/>} />
</Routes>
</Content>
</Layout>
</Layout>
// <h1>种植者管理11</h1>
);
}
export default AdminGrower;

View File

@ -0,0 +1,9 @@
import React from 'react'
function BasicInformation() {
return (
<div>种植者基础信息</div>
)
}
export default BasicInformation

View File

@ -0,0 +1,9 @@
import React from 'react'
function ChangeAdmin() {
return (
<div>交接管理</div>
)
}
export default ChangeAdmin

View File

@ -0,0 +1,9 @@
import React from 'react'
function InviteAdmin() {
return (
<div>邀请管理</div>
)
}
export default InviteAdmin

View File

@ -0,0 +1,39 @@
import React from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { adminRoutes } from "../../../routers/routers";
import Sidebar from "../../../components/Sidebar/Sidebar";
import { Layout } from "antd";
import { Content } from "antd/es/layout/layout";
function AdminProduce() {
const getProduce = adminRoutes.find(
(route) => route.path === "/adminproduce/*"
);
const produceChildren = getProduce.children;
return (
<Layout style={{ minHeight: "100vh"}}>
<Sidebar items={produceChildren} basePath={"/admin/adminproduce/"} />
<Content
style={{
padding: 24,
margin: 0,
minHeight: 280,
background: "#fff",
}}
>
<Routes>
{produceChildren.map((route) => (
<Route key={route.path} path={route.path} element={route.element} />
))}
<Route
path="/*"
element={<Navigate to="/admin/adminproduce/planning" />}
/>
</Routes>
</Content>
</Layout>
);
}
export default AdminProduce;

View File

@ -0,0 +1,9 @@
import React from 'react'
function Implement() {
return (
<div>实施</div>
)
}
export default Implement

View File

@ -0,0 +1,9 @@
import React from 'react'
function Planning() {
return (
<div>种植计划任务</div>
)
}
export default Planning

View File

@ -0,0 +1,59 @@
import React from "react";
import { Route, Routes, useNavigate,useLocation,Navigate } from "react-router-dom";
import { adminRoutes } from "../../../routers/routers";
import Screen from "./screen/screen";
import Plotinquiry from "./plotinquiry/plotinquiry";
import Mapping from "./mapping/mapping";
import ProduceRecord from "./produceRecord/produceRecord";
import WeatherData from "./weatherData/weatherData";
import Satellite from "./satellite/satellite";
import { Layout, Menu } from "antd";
function Gis() {
const navigate = useNavigate();
const gisRoute = adminRoutes.find((route) => route.path === "/gis/*");
const gisChildren = gisRoute?.children || [];
const location = useLocation();
return (
<Layout style={{height:'100vh' ,backgroundColor:"white"}}>
{/* <h1>GIS主界面</h1> */}
<Routes>
{gisChildren.map((child) => (
<Route
key={child.path}
path={child.path.substring(1)}
element={child.element}
/>
))}
<Route path="/*" element={<Navigate to="/admin/gis/screen" />}/>
</Routes>
<Menu
mode="horizontal"
selectedKeys={[location.pathname.replace('/admin/gis', '')]}
onClick={(p) => navigate(`/admin/gis${p.key}`)}
items={gisChildren.map((child) => ({
key: child.path,
label: child.label,
}))}
style={{
position: "fixed", // 固定在页面底部
bottom: 0,
left: "50%", // 将菜单定位到页面中心
transform: "translateX(-50%)", // 使菜单居中
zIndex: 1, // 确保菜单在上方
display: 'flex', // 使用 flexbox 布局
justifyContent: 'center', // 水平居中
alignItems: 'center', // 垂直居中
lineHeight: '32px', // 确保与菜单高度一致
// whiteSpace: 'nowrap', // 避免菜单项换行
border: '1px solid #ccc', // 显示边框
borderRadius: '4px', // 边框圆角
padding: '0 8px', // 内边距调整
}}
/>
</Layout>
);
}
export default Gis;

View File

@ -0,0 +1,15 @@
import React from 'react'
import { Card } from 'antd'
function Mapping() {
return (
<Card title="测绘导航" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
<p></p>
<p></p>
<p></p>
</Card>
)
}
export default Mapping

View File

@ -0,0 +1,15 @@
import React from 'react'
import { Card } from 'antd'
function Plotinquiry() {
return (
<Card title="地块查询" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
<p></p>
<p></p>
<p></p>
</Card>
)
}
export default Plotinquiry

View File

@ -0,0 +1,15 @@
import React from 'react'
import { Card } from 'antd'
function ProduceRecord() {
return (
<Card title="生产履历" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
<p></p>
<p></p>
<p></p>
</Card>
)
}
export default ProduceRecord

View File

@ -0,0 +1,15 @@
import { Card } from 'antd'
import React from 'react'
function Satellite() {
return (
<Card title="卫星遥感" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
<p></p>
<p></p>
<p></p>
</Card>
)
}
export default Satellite

View File

@ -0,0 +1,28 @@
.topOne{
margin-top: 20px;
height: 150px;
border: 1px solid #787777;
position: absolute; /* 设置为绝对定位 */
left: 50%; /* 距离左侧50% */
transform: translate(-50%, 0%); /* 向上和向左移动自身宽度和高度的一半*/
width: 90%; /* 可选:设置一个固定宽度 */
display: flex;
align-items: center;
justify-content: center;
}
.ant-card-body{
padding:0 !important;
}
.cardOne {
height: 120px;
background-color: #f0f2f5;
border-radius: 0;
display:flex;
align-items:center;
padding: 0;
}

View File

@ -0,0 +1,17 @@
import React from "react";
import { Card, Row, Col, Carousel, Button } from "antd";
import "./screen.css";
function Screen() {
const carouselRef = React.useRef(null);
return (
<Card title="种植大屏" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
<p></p>
<p></p>
<p></p>
</Card>
);
}
export default Screen;

View File

@ -0,0 +1,14 @@
import React from 'react'
import { Card } from 'antd'
function WeatherData() {
return (
<Card title="气象数据" extra={<a href="#/admin/gis/screen/">More</a>} style={{ padding:'40px', width: 300 }}>
<p></p>
<p></p>
<p></p>
</Card>
)
}
export default WeatherData

View File

@ -0,0 +1,9 @@
import React from 'react'
function BankSv() {
return (
<div>银行</div>
)
}
export default BankSv

View File

@ -0,0 +1,9 @@
import React from 'react'
function InsuranceSv() {
return (
<div>保险</div>
)
}
export default InsuranceSv

View File

@ -0,0 +1,9 @@
import React from 'react'
function PlantSv() {
return (
<div>种植服务</div>
)
}
export default PlantSv

View File

@ -0,0 +1,38 @@
import React from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { adminRoutes } from "../../../routers/routers";
import { Layout } from "antd";
import Sider from "antd/es/layout/Sider";
import Sidebar from "../../../components/Sidebar/Sidebar";
import { Content } from "antd/es/layout/layout";
function Service() {
const getService = adminRoutes.find((route) => route.path === "/service/*");
const serviceChildren = getService.children;
return (
<Layout style={{ minHeight: "100vh"}}>
<Sidebar items={serviceChildren} basePath={"/admin/service"} />
<Content
style={{
padding: 24,
margin: 0,
minHeight: 280,
background: "#fff",
}}
>
<Routes>
{serviceChildren.map((route) => (
<Route key={route.path} path={route.path} element={route.element} />
))}
{/* 这里有个路径问题,不加/是相对路径,加了是绝对 */}
<Route path="/*" element={<Navigate to={"plantsv"} />} />
</Routes>
</Content>
</Layout>
);
}
export default Service;

View File

@ -0,0 +1,9 @@
import React from 'react'
function TestsoilSv() {
return (
<div>测土检验</div>
)
}
export default TestsoilSv

View File

@ -0,0 +1,23 @@
.login-form{
width: 380px;
height: 480px;
position:fixed;
left:50%;
top:50%;
transform: translate3d(-50%,-50%,0);
border: 1px solid #d8cfcf;
display:flex;
align-items: center;
justify-content: center;
}
.login-form .ant-form {
width: 260px;
}
.login-form .ant-form-item {
margin: 30px 0; /* 调整各表单项之间的垂直间距 */
padding: 0; /* 移除内边距 */
}

View File

@ -0,0 +1,82 @@
import React from "react";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { Button, Checkbox, Form, Input,Card } from "antd";
import './login.css'
import { setToken } from "../../utils/auth";
import { Navigate, useNavigate } from "react-router-dom";
// 实际上验证通过之后调接口,这里先直接写存
function Login() {
const navigate = useNavigate();
const onFinish = (values) => {
console.log("Received values of form: ", values);
// 直接写
setToken(values.username);
navigate('/admin');
};
return (
<Card
className="login-form"
>
<h2>登录</h2>
<Form
name="normal_login"
initialValues={{
remember: true,
}}
onFinish={onFinish}
>
<Form.Item
name="username"
rules={[
{
required: true,
message: "请输入用户名!",
},
]}
>
<Input
prefix={<UserOutlined className="site-form-item-icon" />}
placeholder="用户名"
/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: "请输入密码!",
},
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon" />}
type="password"
placeholder="密码"
/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>记住密码</Checkbox>
</Form.Item>
{/* <a className="login-form-forgot" href="">
Forgot password
</a> */}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
登录
</Button>
</Form.Item>
</Form>
</Card>
);
}
export default Login;

View File

@ -0,0 +1,15 @@
import React from 'react'
function NotFound() {
return (
<h1
style={{
position: 'absolute',
left:'50%',
transform:'translate(-50%)',
}}
>NotFound</h1>
)
}
export default NotFound

View File

@ -0,0 +1,13 @@
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;

View File

@ -0,0 +1,92 @@
import AdminFarm from "../pages/admin/adminfarm/adminfarm";
import AdminGrower from "../pages/admin/admingrower/admingrower";
import AdminProduce from "../pages/admin/adminproduce/adminproduce";
import Gis from "../pages/admin/gis/gis";
// import Screen from "../pages/admin/gis/screen/screen";
import Service from "../pages/admin/service/service";
import Login from "../pages/login/login";
import NotFound from "../pages/notfound/notfound";
import Screen from "../pages/admin/gis/screen/screen";
import Plotinquiry from '../pages/admin/gis/plotinquiry/plotinquiry'
import Mapping from '../pages/admin/gis/mapping/mapping'
import ProduceRecord from '../pages/admin/gis/produceRecord/produceRecord'
import WeatherData from '../pages/admin/gis/weatherData/weatherData'
import Satellite from '../pages/admin/gis/satellite/satellite'
import Account from '../pages/admin/admingrower/account/account'
import ChangeAdmin from "../pages/admin/admingrower/changeadmin/changeadmin";
import InviteAdmin from "../pages/admin/admingrower/inviteadmin/inviteadmin";
import BasicInformation from "../pages/admin/admingrower/basicinformation/basicinformation";
import MyFarm from "../pages/admin/adminfarm/myfarm/myfarm";
import Planning from "../pages/admin/adminproduce/planning/planning";
import Implement from "../pages/admin/adminproduce/implement/implement";
import PlantSv from "../pages/admin/service/plantsv/plantsv";
import TestsoilSv from "../pages/admin/service/testsoilsv/testsoilsv";
import BankSv from "../pages/admin/service/banksv/banksv";
import InsuranceSv from "../pages/admin/service/insurancesv/insurancesv";
export const mainRoutes = [
{
path: "/login",
element: <Login />,
},
{
path:'/notfound',
element:<NotFound/>
}
];
export const adminRoutes = [
{
path: "/gis/*",
element: <Gis/>,
label:'GIS',
children:[
{path:'/screen',label:'种植大屏',element:<Screen/>},
{path:'/plotinquiry',label:'地块查询',element:<Plotinquiry/>},
{path:'/mapping',label:'测绘导航',element:<Mapping/>},
{path:'/produceRecord',label:'生产履历',element:<ProduceRecord/>},
{path:'/weatherData',label:'气象数据',element:<WeatherData/>},
{path:'/satellite',label:'卫星遥感',element:<Satellite/>},
]
},
{
path:"/admingrower/*",
element:<AdminGrower/>,
label:'种植者管理',
children:[
{path:'/basicinformation',label:'种植者基础信息',element:<BasicInformation/>},
{path:'/account',label:'种植者员工账号',element:<Account/>},
{path:'/inviteadmin',label:'邀请管理',element:<InviteAdmin/>},
{path:'/changeadmin',label:'交接管理',element:<ChangeAdmin/>},
],
},
{
path:'/adminfarm/*',
element:<AdminFarm/>,
label:'农场管理',
children:[
{path:'/myfarm', label:'我的农场',element:<MyFarm/>}
]
},
{
path:'/adminproduce/*',
element:<AdminProduce/>,
label:'生产管理',
children:[
{path:'planning', label:'种植计划任务', element:<Planning/>},
{path:'implement', label:'种植计划实施', element:<Implement/>}
]
},
{
path:'/service/*',
element:<Service/>,
label:'服务机构',
children:[
{path:'/plantsv',label:'种植服务机构',element:<PlantSv/>},
{path:'/testsoilsv',label:'测土检验机构',element:<TestsoilSv/>},
{path:'/banksv',label:'农业银行机构',element:<BankSv/>},
{path:'/insurance',label:'农业保险机构',element:<InsuranceSv/>},
]
}
];

View File

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';

View File

@ -0,0 +1,18 @@
export const getToken = () => {
return localStorage.getItem('token');
};
export const setToken = (token) => {
localStorage.setItem('token',token);
};
export function isLogined(){
if(localStorage.getItem('token')){
return true
}
return false
}
export function clearToken(){
localStorage.removeItem('token');
}

View File

@ -1 +1 @@
这是测试
front-end是前端的部分打开这个项目之后执行npm install命令下载一些依赖下载完成后执行npm start可以在浏览器看到整个框架结构src下有三个文件夹其中components一些可以复用的组件pages是各个界面的详细信息routers是路由信息管理各个界面的路由。目前的主要工作在pages文件下可以看到有三个文件夹分别是admin、login、和404在admin下是我们5个主路由界面的详细信息打开自己负责的部分对相应的组件修改即可。