-
-
-
+ 
@@ -49,4 +44,4 @@ const LoginPage = (props) => {
)
}
-export default LoginPage;
\ No newline at end of file
+export default LoginPage;
diff --git a/src/page/login/LoginPage2.js b/src/page/login/LoginPage2.js
index efacffc..dc77d3a 100644
--- a/src/page/login/LoginPage2.js
+++ b/src/page/login/LoginPage2.js
@@ -1,60 +1,92 @@
import {Content} from "antd/es/layout/layout";
import styles from "../../component/LoginPage2.module.css";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
-import {useNavigate} from "react-router-dom";
import {Form,Input,Checkbox,Button,Radio} from "antd";
import React, {useState} from 'react';
+import LoginPageHeader from "../../component/LoginPageHeader";
+import axios from 'axios';
+import {useNavigate} from "react-router-dom";
const LoginPage2 = (props) => {
+ const [userId,setUserId] = useState('');
+ const [password,setPassword] = useState('');
+ const [authority,setAuthority] = useState('0');
+ const [msg,setMsg] = useState('');
const navigate = useNavigate();
+ const signInRequest = {
+ "userId" : userId,
+ "password" : password
+ };
+
- const goRegisterPage = () => {
- navigate('../account/Register');
- }
- const goLoginPage = () => {
- navigate('../account/Login');
- }
- const goAccountPage = () => {
- navigate('../account');
- }
+ const loginUser = async () => {
+ if (authority == 0 && userId.length != 0 && password.length != 0) {
+ setMsg('관리자 또는 사용자를 체크해주세요.');
+ }
+ else if (userId.length == 0 && password.length != 0) {
+ setMsg('아이디는 필수 입력사항입니다.');
+ }
+ else if (userId.length != 0 && password.length == 0) {
+ setMsg('비밀번호는 필수 입력사항입니다.');
+ }
+ else if (userId.length == 0 && password.length == 0) {
+ setMsg('회원이 아니신 경우 회원가입을 눌러주세요.');
+ }
+ else {
+ setMsg('');
+ try {
+ let result = (await axios.post("http://localhost:8080/account/signin",signInRequest));
+ if(result.status ===200){
+ localStorage.setItem("accessToken", result.data.accessToken)
+ localStorage.setItem("refreshToken", result.data.refreshToken)
+
+ if(authority == '1') {
+ navigate('../../');
+ }
+ if(authority == '2') {
+ navigate('../../user');
+ }
+ }
+
+ } catch (e) {
+ setMsg('정보를 올바르게 입력해주세요.');
+ }
+ };
+ }
return (
Everything Of Container
- -
-
-
+
);
+ const checkId = async() => {
+ // console.log(value);
+ // window.open("/account/Register/checkDup","form","width=700, height=400, left=410, top=250");
+ try {
+ let result = (await axios.get("http://localhost:8080/account/checkid/"+userId))
+
+ console.log(result);
+ if (result.status == 200) {
+ setMsg('사용가능한 아이디입니다.');
+ }
+ } catch (e) {
+ setMsg('중복된 아이디입니다.');
+ };
+ };
+
+
+ const moveAddress = (data) => {
+ let fullAddress = data.address;
+ let extraAddress = '';
+
+ if(data.addressType === 'R') {
+ if(data.bname !== '') {
+ extraAddress += data.bname;
+ }
+ if(data.buildingName !== '') {
+ extraAddress += extraAddress !== '' ? `, ${data.buildingName}` : data.buildingName;
+ }
+ fullAddress += extraAddress!== ''? `(${extraAddress})` : '';
+ }
+ setAddress(data.zonecode);
+ setAddr(data.address);
+ setExtraAddress(extraAddress);
+ console.log(fullAddress);
+ };
+ const handleClick= () => {
+ open({onComplete : moveAddress });
+ };
+
+ const validatePassword = useCallback((_, value) => {
+ const regExp = /(?=.*\d{1,20})(?=.*[~`!@#$%\^&*()-+=]{1,20})(?=.*[a-z]{1,20}||[A-z]{1,20}).{5,20}$/;
+ if (!value) {
+ return Promise.reject(new Error('비밀번호는 필수 항목입니다.'));
+ }
+ if (!regExp.test(value)) {
+ return Promise.reject(new Error('비밀번호는 5~20자이며 영문, 숫자, 특수문자를 모두 포함해야 합니다.'));
+ }
+ return Promise.resolve();
+ }, []);
+
+ const validateNumber = useCallback((_,value) => {
+ const phnExp = /(?=.*\d{1,8}).{8}$/;
+ if (!value) {
+ return Promise.reject(new Error('전화번호는 필수 항목입니다.'));
+ }
+ if(value.length > 8) {
+ return Promise.reject(new Error('전화번호는 -를 제외한 8자리 숫자를 입력해야 합니다.'));
+ }
+ if (!phnExp.test(value)) {
+ return Promise.reject(new Error('전화번호는 -를 제외한 8자리 숫자를 입력해야 합니다.'));
+ }
+ if(phnExp.test(value)) {
+ setAdmCall (value);
+ }
+ return Promise.resolve();
+ }, []);
+
+ const registerUser = async () => {
+ console.log(signUpRequest);
+
+ try {
+ let result = (await axios.post("http://localhost:8080/account/signup",signUpRequest));
+ if (result.status == 200) {
+ console.log(result);
+ localStorage.setItem("accessToken", result.data.accessToken)
+ localStorage.setItem("refreshToken", result.data.refreshToken)
+
+ alert('회원가입 되었습니다.');
+ navigate('../account');
+ }
+ } catch (e) {
+ alert('회원정보를 올바르게 입력해주세요.');
+ }
+ };
return (
-
+
-
+
)
}
diff --git a/src/page/login/useInput.js b/src/page/login/useInput.js
new file mode 100644
index 0000000..4b1ef5a
--- /dev/null
+++ b/src/page/login/useInput.js
@@ -0,0 +1,10 @@
+import {useCallback, useState} from "react";
+
+export default (initialValue = null) => {
+ const [value, setValue] = useState(initialValue);
+ const handler = useCallback((e) => {
+ setValue(e.target.value);
+ }, []);
+
+ return [value, handler, setValue];
+};
\ No newline at end of file
diff --git a/src/page/manager/DataManage.css b/src/page/manager/DataManage.css
index e18d91b..78d1155 100644
--- a/src/page/manager/DataManage.css
+++ b/src/page/manager/DataManage.css
@@ -1,9 +1,21 @@
.search {
- width : 150px;
- margin-top : 60px;
+ width: 170px;
+ margin-top: 50px;
+ margin-left: 10px;
}
-
.button {
margin-top : 10px;
- height : 30px;
-}
\ No newline at end of file
+ height : 40px;
+ width: 100px;
+}
+
+.upload {
+ margin-left : 60px;
+ margin-top: 30px;
+}
+
+.submit {
+ margin-left: 30px;
+ margin-top : 30px;
+
+}
diff --git a/src/page/manager/DataManage.js b/src/page/manager/DataManage.js
index a3aa62c..57b6953 100644
--- a/src/page/manager/DataManage.js
+++ b/src/page/manager/DataManage.js
@@ -1,29 +1,12 @@
-import {Anchor, Layout, Table, Tabs} from "antd";
+import {Layout, Table, Tabs} from "antd";
import Sider from "antd/es/layout/Sider";
import {Content} from "antd/es/layout/layout";
-import axios from "axios";
-import {useEffect, useState} from "react";
-import { AudioOutlined } from '@ant-design/icons';
-import { Input, Space, Button } from 'antd';
+import {createRef, useState} from "react";
import './DataManage.css';
+import DataManageTabControl from "./DataManageTabControl";
+import ContainerTab from "./container/ContainerTab";
+import PaletteTab from "./palette/PaletteTab";
-
-const { Search } = Input;
-const suffix = (
- ,},
+ {key: 'palette', label: `팔레트 관리`, children: ,}
];
+
return (
-
-
-
+
)
}
-const ContainerManage = (props) => {
- const [containers, setContainers] = useState([
-
- ]);
-
- useEffect(()=>{
- getContainerData()
- },[])
-
- const columns = [
- {title: '컨테이너ID', dataIndex: 'id', key: 'id',},
- {title: '가로(m)', dataIndex: 'width', key: 'width',},
- {title: '세로(m)', dataIndex: 'depth', key: 'depth',},
- {title: '높이(m)', dataIndex: 'height', key: 'height',},
- {title: '부피(m^3)', dataIndex: 'volume', key: 'volume',},
- {title: '무게(kg)', dataIndex: 'weight', key: 'weight',},
- {title: '무게제한(kg)', dataIndex: 'weightlimit', key: 'weightlimit',},
- {title: '출고마감시간', dataIndex: 'deadline', key: 'deadline',},
- ];
-
-
- const getContainerData = async ()=>{
- let result = (await axios.get("http://localhost:8080/api/container")).data
- setContainers(result)
- }
-
- return (
-
Everything Of Container
- -
-
diff --git a/src/page/login/Register.js b/src/page/login/Register.js
index 6d336ae..0825797 100644
--- a/src/page/login/Register.js
+++ b/src/page/login/Register.js
@@ -1,26 +1,61 @@
import {Content} from "antd/es/layout/layout";
import styles from "../../component/RegisterPage.module.css";
-import {useNavigate} from "react-router-dom";
import {Form,Input,Radio,Select,Button} from "antd";
-import React, {useState} from 'react';
+import React, {useState,useCallback} from 'react';
+import useInput from './useInput';
+import LoginPageHeader from "../../component/LoginPageHeader";
+import {useDaumPostcodePopup} from "react-daum-postcode";
+import axios from 'axios';
+import {useNavigate} from "react-router-dom";
const { Option }= Select;
const Register = (props) => {
+ const scriptUrl = "//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js";
+ const navigate = useNavigate();
+ const open = useDaumPostcodePopup(scriptUrl);
+ const [address,setAddress] = useState('');
+ const [addr,setAddr] = useState('');
+ const [extraAddress,setExtraAddress] = useState('');
+ const [pwd, onChangePassword] = useInput('');
+ const [number, onChangeNumber] = useInput('');
+ const [msg,setMsg] = useState('');
+ /*DB 연동*/
+ const [userId,setUserId] = useState('');
+ const [password,setPassword] = useState('');
+ const [admCall,setAdmCall] = useState('');
+ const [department,setDepartment] = useState('');
+ const [position,setPosition] = useState('');
+ const [facName,setFacName] = useState('');
+ const [adName,setAdName] = useState('');
+ const [rep,setRep] = useState('');
+ const [location,setLocation] = useState('');
+ const [role,setRole] = useState('');
+ const signUpRequest = {
+ "userId": userId,
+ "password": password,
+ "admCall" : admCall,
+ "department" : department,
+ "position" : position,
+ "facName" : facName,
+ "adName" : adName,
+ "rep" : rep,
+ "location" : location,
+ "role" : role,
+ };
- const navigate = useNavigate();
-
- const goRegisterPage = () => {
- navigate('../account/Register');
- }
- const goLoginPage = () => {
- navigate('../account/Login');
- }
- const goAccountPage = () => {
- navigate('../account');
+ const formItemLayout = {
+ labelCol: {
+ xs: { span: 24 },
+ sm: { span: 4},
+ },
+ wrapperCol: {
+ xs: { span: 24 },
+ sm: { span: 16 },
+ }
}
const [admin_informDisabled, setAdmin_informDisabled] = useState (true);
@@ -29,104 +64,193 @@ const Register = (props) => {
const prefixSelector = (
-
-
- )
-}
-
-const PalleteManage = (props) => {
- const [pallete, setPallete] = useState([
-
- ]);
-
- useEffect(()=>{
- getPalleteData()
- },[])
-
- const columns = [
- {title: '팔레트ID', dataIndex: 'id', key: 'id',},
- {title: '상품명', dataIndex: 'name', key: 'name',},
- {title: '수량(개)', dataIndex: 'count', key: 'count',},
- {title: '가로(m)', dataIndex: 'width', key: 'width',},
- {title: '세로(m)', dataIndex: 'depth', key: 'depth',},
- {title: '높이(m)', dataIndex: 'height', key: 'height',},
- {title: '부피(m^3)', dataIndex: 'volume', key: 'volume',},
- {title: '무게(kg)', dataIndex: 'weight', key: 'weight',},
- ];
-
- const getPalleteData = async ()=>{
- let result = (await axios.get("http://localhost:8080/api/palette")).data
- setPallete(result)
- }
-
- return (
-
+
+
+
▼ 컨테이너 내 팔레트 실시간 적재 현황
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+ {/* */}
+ {/**/}
+
+
+
+
+
+ );
+}
+function createCube(width, height, depth) {
+ const vertices = [
+ [0, height, depth],
+ [width, height, depth],
+ [width, height, 0],
+ [0, height, 0],
+ [0, 0, depth],
+ [width, 0, depth],
+ [width, 0, 0],
+ [0, 0, 0],
+ ];
+
+ const indices = [
+ 0, 1, 1, 2, 2, 3, 3, 0,
+ 4, 5, 5, 6, 6, 7, 7, 4,
+ 0, 4, 1, 5, 2, 6, 3, 7,
+ ];
+
+ const geometry = new THREE.BufferGeometry();
+ const positionNumComponents = 3;
+ const positions = new Float32Array(vertices.flat());
+ geometry.setAttribute(
+ "position",
+ new THREE.BufferAttribute(positions, positionNumComponents)
+ );
+ geometry.setIndex(indices);
+
+ const material = new THREE.LineBasicMaterial({ color: 0x000000 });
+ const cube = new THREE.LineSegments(geometry, material);
+
+ return cube;
+}
+
+const contentStyle = {
+ textAlign: 'center',
+ minHeight: 120,
+ lineHeight: '120px',
+ backgroundColor: '#fff',
+
+
+};
+const siderStyle = {
+ textAlign: 'right',
+ lineHeight: '120px',
+ color: '#fff',
+ backgroundColor: '#fff',
+ borderRight: "1px solid #CCC",
+ height: '580px',
+ border: '1px solid black'
+};
+
+const onSearch = (value) => {
+ console.log(value)
+};
+
+const onClick4 = (value) => {
+ console.log(value);
+ window.open("/SetPallet", "a", "width=1200, height=600, left=100, top=50"); // 팝업 띄우기
+};
+
+export default LoadResultManage;
\ No newline at end of file
diff --git a/src/page/manager/Mapping.js b/src/page/manager/Mapping.js
new file mode 100644
index 0000000..ed2a2f0
--- /dev/null
+++ b/src/page/manager/Mapping.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+ Button,
+ Form,
+ InputNumber,
+
+} from 'antd';
+
+import axios from "axios";
+
+const Mapping = () => {
+ const [newContainer] = Form.useForm()
+ const registerContainer = async () => {
+ let formValue
+ let canRegister = false
+ try {
+ formValue = await newContainer.validateFields()
+ canRegister = true
+ } catch (e) {
+ alert('필수값은 모두 입력하여야합니다.')
+ }
+ if(!canRegister) return
+ try {
+ let result = (await axios.put(`http://localhost:8080/palette/${formValue.paletteId}/container/${formValue.containerId}`,{},
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem('accessToken')}`,},
+ }));
+ if(result.status === 200 ) {
+ alert('매핑되었습니다.')
+ }
+ } catch(e){
+ alert('매핑 실패하였습니다.')
+ }
+ }
+ return (
+
+ );
+};
+
+export default Mapping;
diff --git a/src/page/manager/OrderManage.js b/src/page/manager/OrderManage.js
deleted file mode 100644
index ae0febc..0000000
--- a/src/page/manager/OrderManage.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import {Anchor, Layout, Table, Tabs} from "antd";
-import Sider from "antd/es/layout/Sider";
-import {Content} from "antd/es/layout/layout";
-import axios from "axios";
-import {useEffect, useState} from "react";
-
-const contentStyle = {
- textAlign: 'center',
- minHeight: 120,
- lineHeight: '120px',
- backgroundColor: '#fff',
-};
-const siderStyle = {
- textAlign: 'center',
- lineHeight: '120px',
- color: '#fff',
- backgroundColor: '#fff',
-};
-
-const OrderManage = (props) => {
- const [orders, setOrders] = useState([
- {index: '1', orderNum: 2023, name: '삼성갤럭시Z플립4', count: 5, width: 32, depth: 10, height: 100, volume:1000, weight: 32000, },
- {index: '1', orderNum: 2023, name: '삼성갤럭시Z플립4', count: 5, width: 32, depth: 10, height: 100, volume:1000, weight: 32000, },
- {index: '1', orderNum: 2023, name: '삼성갤럭시Z플립4', count: 5, width: 32, depth: 10, height: 100, volume:1000, weight: 32000, },
- ]);
-
- useEffect(()=>{
- getOrderData()
- },[])
-
- const columns = [
- {title: '번호', dataIndex: 'index', key: 'index',},
- {title: '주문번호', dataIndex: 'orderNum', key: 'orderNum',},
- {title: '상품명', dataIndex: 'name', key: 'name',},
- {title: '수량(개)', dataIndex: 'count', key: 'count',},
- {title: '가로(m)', dataIndex: 'width', key: 'width',},
- {title: '세로(m)', dataIndex: 'depth', key: 'depth',},
- {title: '높이(m)', dataIndex: 'height', key: 'height',},
- {title: '부피(m^3)', dataIndex: 'volume', key: 'volume',},
- {title: '무게(kg)', dataIndex: 'weight', key: 'weight',},
- ];
-
-
- const getOrderData = async ()=>{
- let result = (await axios.get("http://localhost:8080/api/memo/{id}")).data
- setOrders(result)
- }
-
- return (
-
| Pallet Type | +가로 길이 | +높이 길이 | +세로 길이 | +
|---|---|---|---|
| + | 1.1 | +0.8 | +1.1 | +
| + | 1.1 | +1.0 | +1.1 | +
| + | 1.1 | +1.5 | +1.1 | +
+
+
+ )
+})
+
+export default ContainerTab
\ No newline at end of file
diff --git a/src/page/manager/container/ContainerTabControl.js b/src/page/manager/container/ContainerTabControl.js
new file mode 100644
index 0000000..a26d42c
--- /dev/null
+++ b/src/page/manager/container/ContainerTabControl.js
@@ -0,0 +1,48 @@
+import {SearchOutlined} from '@ant-design/icons';
+import {Button, DatePicker, Form, InputNumber} from "antd";
+
+
+const ContainerTabControl = (props) => {
+ const [searchParam] = Form.useForm()
+ const createUpdate = () => {
+ window.open("/upload", "a", "width=500, height=700, left=100, top=50"); // =팝업 띄우기
+ };
+
+ const createMapping = () => {
+ window.open("/mapping", "a", "width=600, height=200, left=100, top=50");
+ }
+
+ const onSearch = async () => {
+ let formValue = await searchParam.validateFields()
+ let searchParamRequest = {...formValue}
+ // dLine을 format에 맞는 문자열로 바꿔줌
+ if(formValue.releaseDateFrom !== undefined){
+ searchParamRequest.releaseDateFrom = formValue.releaseDateFrom.format().replace('+09:00','')
+ }
+
+ if(formValue.releaseDateTo !== undefined){
+ searchParamRequest.releaseDateTo = formValue.releaseDateTo.format().replace('+09:00','')
+ }
+
+ props.containerRef.current.search(searchParamRequest)
+ };
+
+ return (
+
+ )
+}
+
+export default ContainerTabControl
\ No newline at end of file
diff --git a/src/page/manager/palette/PaletteTab.js b/src/page/manager/palette/PaletteTab.js
new file mode 100644
index 0000000..87c9266
--- /dev/null
+++ b/src/page/manager/palette/PaletteTab.js
@@ -0,0 +1,50 @@
+import {forwardRef, useEffect, useImperativeHandle, useState} from "react";
+import axios from "axios";
+import {Table} from "antd";
+
+const PaletteTab = forwardRef((props, ref) => {
+
+ const [pallete, setPallete] = useState([]);
+
+ useEffect(()=>{
+ getPalleteData()
+ },[])
+
+ useImperativeHandle(ref, () => ({
+ async search(searchParam){
+ let result = (await axios.get(`http://localhost:8080/palette`,{
+ params: searchParam,
+ headers: {Authorization: `Bearer ${localStorage.getItem('accessToken')}`,},
+ })).data
+ setPallete(result)
+ }
+ }));
+ const columns = [
+ {title: '팔레트ID', dataIndex: 'paletteId', key: 'palleteId',},
+ {title: '상품명', dataIndex: 'paletteName', key: 'paletteName',},
+ {title: '수량(개)', dataIndex: 'quantity', key: 'quantity',},
+ {title: '가로(m)', dataIndex: 'width', key: 'width',},
+ {title: '세로(m)', dataIndex: 'length', key: 'length',},
+ {title: '높이(m)', dataIndex: 'height', key: 'height',},
+ {title: '부피(m^3)', dataIndex: 'volume', key: 'volume',},
+ {title: '무게(kg)', dataIndex: 'weight', key: 'weight',},
+ {title: '출고마감시간', dataIndex: 'deadLine', key: 'deadLine',},
+ ];
+
+ const getPalleteData = async ()=>{
+ let result = (await axios.get("http://localhost:8080/palette",
+ {
+ headers: {Authorization: `Bearer ${localStorage.getItem('accessToken')}`,},
+ }
+ )).data
+ setPallete(result)
+ }
+
+ return (
+