| New file |
| | |
| | | import React from 'react'; |
| | | import { Box, Grid, TextField, Button } from '@mui/material'; |
| | | import { useTranslate } from 'react-admin'; |
| | | |
| | | const AreaAdvancedTab = ({ |
| | | areaCode, |
| | | setAreaCode, |
| | | maxQty, |
| | | setMaxQty, |
| | | speedLimit, |
| | | setSpeedLimit, |
| | | shapeData, |
| | | setShapeData, |
| | | priority, |
| | | setPriority, |
| | | onSave, |
| | | }) => { |
| | | const translate = useTranslate(); |
| | | |
| | | return ( |
| | | <Box component="form" onSubmit={(e) => { e.preventDefault(); onSave(); }}> |
| | | <Grid container spacing={2}> |
| | | <Grid item xs={12}> |
| | | <TextField |
| | | label={translate('page.map.area.code', { _: '区域编码' })} |
| | | fullWidth |
| | | value={areaCode} |
| | | onChange={(e) => setAreaCode(e.target.value)} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={6}> |
| | | <TextField |
| | | label={translate('page.map.area.maxQty', { _: '最大数量' })} |
| | | fullWidth |
| | | type="number" |
| | | value={maxQty} |
| | | onChange={(e) => setMaxQty(e.target.value)} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={6}> |
| | | <TextField |
| | | label={translate('page.map.area.speedLimit', { _: '速度限制' })} |
| | | fullWidth |
| | | type="number" |
| | | value={speedLimit} |
| | | onChange={(e) => setSpeedLimit(e.target.value)} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={12}> |
| | | <TextField |
| | | label={translate('page.map.area.shape', { _: '形状数据' })} |
| | | fullWidth |
| | | multiline |
| | | minRows={3} |
| | | value={shapeData} |
| | | onChange={(e) => setShapeData(e.target.value)} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={12}> |
| | | <TextField |
| | | label={translate('page.map.area.priority', { _: '优先级' })} |
| | | fullWidth |
| | | type="number" |
| | | value={priority} |
| | | onChange={(e) => setPriority(e.target.value)} |
| | | /> |
| | | </Grid> |
| | | <Grid item xs={12}> |
| | | <Button variant="contained" type="submit"> |
| | | {translate('common.action.save', { _: '保存' })} |
| | | </Button> |
| | | </Grid> |
| | | </Grid> |
| | | </Box> |
| | | ); |
| | | }; |
| | | |
| | | export default AreaAdvancedTab; |
| New file |
| | |
| | | import React from 'react'; |
| | | import { Stack, TextField, Button, Typography, Box } from '@mui/material'; |
| | | import { useTranslate } from 'react-admin'; |
| | | |
| | | const AreaBasicTab = ({ |
| | | areaName, |
| | | setAreaName, |
| | | agvList, |
| | | setAgvList, |
| | | barcodeList, |
| | | setBarcodeList, |
| | | onSave, |
| | | }) => { |
| | | const translate = useTranslate(); |
| | | |
| | | return ( |
| | | <Stack spacing={2}> |
| | | <Stack direction="row" spacing={1} alignItems="center"> |
| | | <TextField |
| | | label={translate('page.map.area.name', { _: '名称' })} |
| | | fullWidth |
| | | value={areaName} |
| | | onChange={(e) => setAreaName(e.target.value)} |
| | | /> |
| | | <Button variant="contained" onClick={onSave}> |
| | | {translate('common.action.save', { _: '保存' })} |
| | | </Button> |
| | | </Stack> |
| | | |
| | | <Box> |
| | | <Typography variant="subtitle2" gutterBottom> |
| | | {translate('page.map.area.agv', { _: '添加AGV小车' })} |
| | | </Typography> |
| | | <TextField |
| | | placeholder={translate('page.map.area.agv.placeholder', { _: '用逗号分隔:agv01, agv02' })} |
| | | fullWidth |
| | | multiline |
| | | minRows={3} |
| | | value={agvList} |
| | | onChange={(e) => setAgvList(e.target.value)} |
| | | /> |
| | | </Box> |
| | | |
| | | <Box> |
| | | <Typography variant="subtitle2" gutterBottom> |
| | | {translate('page.map.area.barcodes', { _: '区域内条码集合' })} |
| | | </Typography> |
| | | <TextField |
| | | placeholder={translate('page.map.area.barcodes.placeholder', { _: '每行一个条码' })} |
| | | fullWidth |
| | | multiline |
| | | minRows={6} |
| | | maxRows={10} |
| | | value={barcodeList} |
| | | onChange={(e) => setBarcodeList(e.target.value)} |
| | | /> |
| | | </Box> |
| | | </Stack> |
| | | ); |
| | | }; |
| | | |
| | | export default AreaBasicTab; |
| | |
| | | import React, { useState, useRef, useEffect } from 'react'; |
| | | import React, { useState, useEffect } from 'react'; |
| | | import { useTranslate } from "react-admin"; |
| | | import { Drawer, Box, Typography, Tabs, Tab, IconButton, Stack, useTheme, Card, CardContent, Divider } from '@mui/material'; |
| | | import { |
| | | Drawer, |
| | | Box, |
| | | Typography, |
| | | Tabs, |
| | | Tab, |
| | | IconButton, |
| | | Stack, |
| | | useTheme, |
| | | Card, |
| | | CardContent, |
| | | Divider, |
| | | } from '@mui/material'; |
| | | import CloseIcon from '@mui/icons-material/Close'; |
| | | import { PAGE_DRAWER_WIDTH } from '@/config/setting'; |
| | | import MapSettings from './MapSettings'; |
| | | import ConfigSettings from './ConfigSettings'; |
| | | import AreaBasicTab from './AreaBasicTab'; |
| | | import AreaAdvancedTab from './AreaAdvancedTab'; |
| | | |
| | | const AreaSettings = (props) => { |
| | | const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH, title, setSpriteSettings } = props; |
| | | const { open, onCancel, sprite, width = PAGE_DRAWER_WIDTH } = props; |
| | | const theme = useTheme(); |
| | | const themeMode = theme.palette.mode; |
| | | const translate = useTranslate(); |
| | | |
| | | const [lastCopiedSprites, setLastCopiedSprites] = useState([]); |
| | | |
| | | const handleClose = () => { |
| | | onCancel(); |
| | | } |
| | | |
| | | const [activeTab, setActiveTab] = useState(0); |
| | | const [areaName, setAreaName] = useState(''); |
| | | const [agvList, setAgvList] = useState(''); |
| | | const [barcodeList, setBarcodeList] = useState(''); |
| | | const [areaCode, setAreaCode] = useState(''); |
| | | const [maxQty, setMaxQty] = useState(''); |
| | | const [speedLimit, setSpeedLimit] = useState(''); |
| | | const [shapeData, setShapeData] = useState(''); |
| | | const [priority, setPriority] = useState(''); |
| | | |
| | | useEffect(() => { |
| | | if (sprite?.data) { |
| | | setAreaName(sprite.data.name || ''); |
| | | setAreaCode(sprite.data.code || ''); |
| | | setMaxQty(sprite.data.maxQty || ''); |
| | | setSpeedLimit(sprite.data.speedLimit || ''); |
| | | setShapeData(sprite.data.shape || ''); |
| | | setPriority(sprite.data.priority || ''); |
| | | setAgvList((sprite.data.agvs || []).join(', ')); |
| | | setBarcodeList((sprite.data.barcodes || []).join('\n')); |
| | | } else { |
| | | setAreaName(''); |
| | | setAreaCode(''); |
| | | setMaxQty(''); |
| | | setSpeedLimit(''); |
| | | setShapeData(''); |
| | | setPriority(''); |
| | | setAgvList(''); |
| | | setBarcodeList(''); |
| | | } |
| | | }, [sprite]); |
| | | |
| | | const handleTabChange = (event, newValue) => { |
| | | setActiveTab(newValue); |
| | | }; |
| | | |
| | | const handleSaveBasic = () => { |
| | | // placeholder for save logic |
| | | }; |
| | | |
| | | const handleSaveAdvanced = () => { |
| | | // placeholder for save logic |
| | | }; |
| | | |
| | | return ( |
| | |
| | | variant="fullWidth" |
| | | sx={{ mb: 0 }} |
| | | > |
| | | <Tab label={translate('page.map.settings.map.title')} /> |
| | | <Tab label={translate('page.map.settings.config.title')} /> |
| | | <Tab label={translate('page.map.area.basic', { _: '基础' })} /> |
| | | <Tab label={translate('page.map.area.advanced', { _: '高级' })} /> |
| | | </Tabs> |
| | | |
| | | <Divider /> |
| | | |
| | | <Box p={3}> |
| | | {activeTab === 0 && ( |
| | | <MapSettings |
| | | sprite={sprite} |
| | | setSpriteSettings={setSpriteSettings} |
| | | onSubmit={() => { |
| | | }} |
| | | width={width} |
| | | lastCopiedSprites={lastCopiedSprites} |
| | | setLastCopiedSprites={setLastCopiedSprites} |
| | | <AreaBasicTab |
| | | areaName={areaName} |
| | | setAreaName={setAreaName} |
| | | agvList={agvList} |
| | | setAgvList={setAgvList} |
| | | barcodeList={barcodeList} |
| | | setBarcodeList={setBarcodeList} |
| | | onSave={handleSaveBasic} |
| | | /> |
| | | )} |
| | | {activeTab === 1 && ( |
| | | <ConfigSettings |
| | | sprite={sprite} |
| | | onSubmit={() => { |
| | | }} |
| | | <AreaAdvancedTab |
| | | areaCode={areaCode} |
| | | setAreaCode={setAreaCode} |
| | | maxQty={maxQty} |
| | | setMaxQty={setMaxQty} |
| | | speedLimit={speedLimit} |
| | | setSpeedLimit={setSpeedLimit} |
| | | shapeData={shapeData} |
| | | setShapeData={setShapeData} |
| | | priority={priority} |
| | | setPriority={setPriority} |
| | | onSave={handleSaveAdvanced} |
| | | /> |
| | | )} |
| | | </Box> |
| | |
| | | ) |
| | | } |
| | | |
| | | export default AreaSettings; |
| | | export default AreaSettings; |