From f01613f2d65ce199c6595de9e29ba96e7e6ac4f9 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期二, 15 十月 2024 14:19:51 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/header/MapSearch.jsx | 112 +++++++++++++++++++++++++------------------------------
1 files changed, 51 insertions(+), 61 deletions(-)
diff --git a/zy-acs-flow/src/map/header/MapSearch.jsx b/zy-acs-flow/src/map/header/MapSearch.jsx
index c3f0e09..0adc126 100644
--- a/zy-acs-flow/src/map/header/MapSearch.jsx
+++ b/zy-acs-flow/src/map/header/MapSearch.jsx
@@ -1,3 +1,4 @@
+// MapSearch.js
import React, { useState, useEffect } from 'react';
import {
Select,
@@ -7,60 +8,27 @@
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.STATION, id: 'page.map.devices.station' },
+ { key: DEVICE_TYPE.AGV, id: 'page.map.devices.agv' },
+ { key: DEVICE_TYPE.POINT, id: 'page.map.devices.point' },
+ // 娣诲姞鍏朵粬璁惧绫诲瀷
];
return deviceTypes.map(({ key, id }) => ({
value: key,
label: translate(id),
}));
-};
-
-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) => {
@@ -73,15 +41,10 @@
} = 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('');
@@ -111,11 +74,11 @@
} 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);
@@ -138,35 +101,60 @@
}
};
+ 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={2} 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>
+ <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>
)}
renderInput={(params) => (
<TextField
{...params}
- variant="filled"
+ variant="outlined"
placeholder={translate('common.msg.placeholder')}
InputProps={{
...params.InputProps,
@@ -176,18 +164,20 @@
{inputValue && (
<InputAdornment position="end">
<IconButton
+ size="small"
onClick={() => {
setInputValue('');
setSelectedOption(null);
}}
>
- <CloseIcon />
+ <CloseIcon fontSize="small" />
</IconButton>
</InputAdornment>
)}
</>
),
}}
+ sx={{ minWidth: 360 }}
/>
)}
value={selectedOption}
@@ -200,7 +190,7 @@
setInputValue(newInputValue);
}}
/>
- </>
+ </Stack>
);
};
--
Gitblit v1.9.1