From 7f70cb15d035f0c233b9e62b9e43aa985317c908 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 04 十一月 2024 10:22:45 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/header/MapSearch.jsx | 151 +++++++++++++++++++++++++-------------------------
1 files changed, 76 insertions(+), 75 deletions(-)
diff --git a/zy-acs-flow/src/map/header/MapSearch.jsx b/zy-acs-flow/src/map/header/MapSearch.jsx
index c3f0e09..6d473b1 100644
--- a/zy-acs-flow/src/map/header/MapSearch.jsx
+++ b/zy-acs-flow/src/map/header/MapSearch.jsx
@@ -7,38 +7,21 @@
InputAdornment,
IconButton,
useTheme,
+ Stack,
+ Typography,
} from '@mui/material';
import { useTranslate } from 'react-admin';
import CloseIcon from '@mui/icons-material/Close';
import { MAP_MODE, DEVICE_TYPE } from "../constants";
import * as Tool from "../tool";
-const renderTitle = (title, uuid) => (
- <>
- <span style={{ fontWeight: 'bold' }}>{title}</span>
- <span style={{ float: 'right', opacity: 0.3 }}>{uuid}</span>
- </>
-);
-
const deviceTypeSelectOptionsFn = (translate) => {
const deviceTypes = [
- {
- key: DEVICE_TYPE.SHELF,
- id: 'page.map.devices.shelf',
- },
- {
- key: DEVICE_TYPE.STATION,
- id: 'page.map.devices.station',
- },
- {
- key: DEVICE_TYPE.AGV,
- id: 'page.map.devices.agv',
- },
- {
- key: DEVICE_TYPE.POINT,
- id: 'page.map.devices.point',
- },
- // Add other sensor types if needed
+ { key: DEVICE_TYPE.SHELF, id: 'page.map.devices.shelf' },
+ { key: DEVICE_TYPE.AGV, id: 'page.map.devices.agv' },
+ { key: DEVICE_TYPE.STATION, id: 'page.map.devices.station' },
+ { key: DEVICE_TYPE.POINT, id: 'page.map.devices.point' },
+ // ... other devices
];
return deviceTypes.map(({ key, id }) => ({
@@ -47,41 +30,21 @@
}));
};
-const getAllDeviceList = (curDeviceType) => {
- const children = Tool.getMapContainer()?.children || [];
- return children.reduce((list, child) => {
- if (child?.data) {
- const { data } = child;
- if (data.type === curDeviceType && data.no) {
- list.push({
- value: data.no,
- label: renderTitle(data.no, data.uuid),
- });
- }
- }
- return list;
- }, []);
-};
-
const MapSearch = (props) => {
const {
mode,
setMode,
+ dataFetched,
curZone,
+ curSprite,
setCurSprite,
- setSpriteSettings,
} = props;
const theme = useTheme();
- const themeMode = theme.palette.mode;
const translate = useTranslate();
- // type
const deviceTypeOptions = deviceTypeSelectOptionsFn(translate);
- const [curDeviceType, setCurDeviceType] = useState(
- deviceTypeOptions[0]?.value || ''
- );
- // list
+ const [curDeviceType, setCurDeviceType] = useState(deviceTypeOptions[0]?.value || '');
const [deviceList, setDeviceList] = useState([]);
const [filterDeviceList, setFilterDeviceList] = useState([]);
const [inputValue, setInputValue] = useState('');
@@ -96,11 +59,16 @@
};
useEffect(() => {
- if (!Tool.getMapContainer()) return;
- setTimeout(() => {
+ if (dataFetched) {
resetSearch();
- }, 200);
- }, [curDeviceType, curZone]);
+ }
+ }, [curDeviceType, dataFetched, curZone]);
+
+ useEffect(() => {
+ if (!curSprite) {
+ resetSearch();
+ }
+ }, [curSprite]);
useEffect(() => {
if (!Tool.getMapContainer()) return;
@@ -111,62 +79,88 @@
} else {
setFilterDeviceList(deviceList);
}
- }, [inputValue]);
+ }, [inputValue, deviceList]);
const onSecondSelect = (option) => {
if (!option) return;
- const uuid = option.label.props.children[1]?.props?.children;
+ const uuid = option.uuid;
const selectSprite = Tool.findSpriteByUuid(uuid);
if (selectSprite) {
Tool.focusSprite(selectSprite);
}
switch (mode) {
- case MAP_MODE.OBSERVER_MODE:
- setCurSprite(selectSprite);
- break;
+ // case MAP_MODE.OBSERVER_MODE:
+ // case MAP_MODE.SETTINGS_MODE:
+ // break;
case MAP_MODE.MOVABLE_MODE:
setMode(MAP_MODE.SETTINGS_MODE);
setTimeout(() => {
- setSpriteSettings(selectSprite);
+ setCurSprite(selectSprite);
}, 200);
break;
- case MAP_MODE.SETTINGS_MODE:
- setSpriteSettings(selectSprite);
- break;
default:
+ setCurSprite(selectSprite);
break;
}
};
+ const getAllDeviceList = (curDeviceType) => {
+ const children = Tool.getMapContainer()?.children || [];
+ return children.reduce((list, child) => {
+ if (child?.data) {
+ const { data } = child;
+ if (data.type === curDeviceType && data.no) {
+ list.push({
+ value: data.no,
+ label: data.no,
+ uuid: data.uuid,
+ });
+ }
+ }
+ return list;
+ }, []);
+ };
+
return (
- <>
+ <Stack direction="row" spacing={1} alignItems="center">
<Select
- className="map-header-select"
- variant="filled"
- style={{ width: 160, marginRight: 8 }}
- size="medium"
+ variant="outlined"
+ size="small"
value={curDeviceType}
onChange={(event) => setCurDeviceType(event.target.value)}
+ sx={{ minWidth: 160 }}
>
{deviceTypeOptions.map((option) => (
<MenuItem key={option.value} value={option.value}>
- <span style={{ fontWeight: 'bold' }}>{option.label}</span>
+ <Typography variant="body1" fontWeight="bold">
+ {option.label}
+ </Typography>
</MenuItem>
))}
</Select>
<Autocomplete
- className="map-header-select"
- style={{ width: 360 }}
- size="medium"
+ size="small"
options={filterDeviceList}
getOptionLabel={(option) => option.value}
- renderOption={(props, option) => (
- <li {...props}>{option.label}</li>
- )}
+ renderOption={(optionProps, option) => {
+ const { key, ...otherProps } = optionProps;
+ return (
+ <li key={option.uuid} {...otherProps}>
+ <Stack direction="row" justifyContent="space-between" width="100%">
+ <Typography variant="body1" fontWeight="bold">
+ {option.label}
+ </Typography>
+ <Typography variant="body2" color="text.secondary">
+ {option.uuid}
+ </Typography>
+ </Stack>
+ </li>
+ )
+ }}
renderInput={(params) => (
<TextField
{...params}
- variant="filled"
+ variant="outlined"
placeholder={translate('common.msg.placeholder')}
InputProps={{
...params.InputProps,
@@ -176,17 +170,23 @@
{inputValue && (
<InputAdornment position="end">
<IconButton
+ size="small"
onClick={() => {
setInputValue('');
setSelectedOption(null);
+ setCurSprite(null);
}}
>
- <CloseIcon />
+ <CloseIcon fontSize="small" />
</IconButton>
</InputAdornment>
)}
</>
),
+ }}
+ sx={{
+ minWidth: 360,
+ marginBottom: '7px',
}}
/>
)}
@@ -199,8 +199,9 @@
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
+ disableClearable
/>
- </>
+ </Stack>
);
};
--
Gitblit v1.9.1