|  |  |  | 
|---|
|  |  |  | // MapSearch.js | 
|---|
|  |  |  | import React, { useState, useEffect } from 'react'; | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | Select, | 
|---|
|  |  |  | 
|---|
|  |  |  | 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.STATION, id: 'page.map.devices.station' }, | 
|---|
|  |  |  | { key: DEVICE_TYPE.POINT, id: 'page.map.devices.point' }, | 
|---|
|  |  |  | // 添加其他设备类型 | 
|---|
|  |  |  | // ... other devices | 
|---|
|  |  |  | ]; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return deviceTypes.map(({ key, id }) => ({ | 
|---|
|  |  |  | 
|---|
|  |  |  | const { | 
|---|
|  |  |  | mode, | 
|---|
|  |  |  | setMode, | 
|---|
|  |  |  | dataFetched, | 
|---|
|  |  |  | curZone, | 
|---|
|  |  |  | curSprite, | 
|---|
|  |  |  | setCurSprite, | 
|---|
|  |  |  | setSpriteSettings, | 
|---|
|  |  |  | } = props; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const theme = useTheme(); | 
|---|
|  |  |  | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Stack direction="row" spacing={2} alignItems="center"> | 
|---|
|  |  |  | <Stack direction="row" spacing={1} alignItems="center"> | 
|---|
|  |  |  | <Select | 
|---|
|  |  |  | variant="outlined" | 
|---|
|  |  |  | size="small" | 
|---|
|  |  |  | 
|---|
|  |  |  | size="small" | 
|---|
|  |  |  | options={filterDeviceList} | 
|---|
|  |  |  | getOptionLabel={(option) => option.value} | 
|---|
|  |  |  | renderOption={(props, option) => ( | 
|---|
|  |  |  | <li {...props}> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | 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} | 
|---|
|  |  |  | 
|---|
|  |  |  | onClick={() => { | 
|---|
|  |  |  | setInputValue(''); | 
|---|
|  |  |  | setSelectedOption(null); | 
|---|
|  |  |  | setCurSprite(null); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <CloseIcon fontSize="small" /> | 
|---|
|  |  |  | 
|---|
|  |  |  | </> | 
|---|
|  |  |  | ), | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | sx={{ minWidth: 360 }} | 
|---|
|  |  |  | sx={{ | 
|---|
|  |  |  | minWidth: 360, | 
|---|
|  |  |  | marginBottom: '7px', | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | )} | 
|---|
|  |  |  | value={selectedOption} | 
|---|
|  |  |  | 
|---|
|  |  |  | onInputChange={(event, newInputValue) => { | 
|---|
|  |  |  | setInputValue(newInputValue); | 
|---|
|  |  |  | }} | 
|---|
|  |  |  | disableClearable | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | ); | 
|---|