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 | 69 ++++++++++++++++++++-------------- 1 files changed, 40 insertions(+), 29 deletions(-) diff --git a/zy-acs-flow/src/map/header/MapSearch.jsx b/zy-acs-flow/src/map/header/MapSearch.jsx index 0adc126..6d473b1 100644 --- a/zy-acs-flow/src/map/header/MapSearch.jsx +++ b/zy-acs-flow/src/map/header/MapSearch.jsx @@ -1,4 +1,3 @@ -// MapSearch.js import React, { useState, useEffect } from 'react'; import { Select, @@ -19,10 +18,10 @@ 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 }) => ({ @@ -35,9 +34,10 @@ const { mode, setMode, + dataFetched, curZone, + curSprite, setCurSprite, - setSpriteSettings, } = props; const theme = useTheme(); @@ -59,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; @@ -84,19 +89,17 @@ 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; } }; @@ -119,7 +122,7 @@ }; return ( - <Stack direction="row" spacing={2} alignItems="center"> + <Stack direction="row" spacing={1} alignItems="center"> <Select variant="outlined" size="small" @@ -139,18 +142,21 @@ 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} @@ -168,6 +174,7 @@ onClick={() => { setInputValue(''); setSelectedOption(null); + setCurSprite(null); }} > <CloseIcon fontSize="small" /> @@ -177,7 +184,10 @@ </> ), }} - sx={{ minWidth: 360 }} + sx={{ + minWidth: 360, + marginBottom: '7px', + }} /> )} value={selectedOption} @@ -189,6 +199,7 @@ onInputChange={(event, newInputValue) => { setInputValue(newInputValue); }} + disableClearable /> </Stack> ); -- Gitblit v1.9.1