#

luxiaotao1123

2024-10-15 f01613f2d65ce199c6595de9e29ba96e7e6ac4f9

#

 zy-acs-flow/src/map/MapPage.jsx

@@ -255,16 +255,6 @@
                    curZone={curZone}
                    setSpriteSettings={setSpriteSettings}
                />
                {/* <TextField
                    variant="outlined"
                    size="small"
                    placeholder="搜索..."
                    sx={{
                        width: '200px',
                        backgroundColor: theme.palette.background.paper,
                        borderRadius: 1,
                    }}
                /> */}
                <Box sx={{ flexGrow: 1 }} />

                {mode === MAP_MODE.OBSERVER_MODE && (

 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>
    );
};