#

Junjie

2024-10-17 d835d1b51f832889929cdf69010034a30ef44d02

 zy-asrs-flow/src/pages/map/header/search.jsx

@@ -1,79 +1,181 @@
import React, { useState, useRef, useEffect } from 'react';
import { Layout, Button, Flex, Row, Col, FloatButton, Select, Spin, AutoComplete } from 'antd';
import { FormattedMessage, useIntl, useModel } from '@umijs/max';
import {
    CloseOutlined
} from '@ant-design/icons';
import { Select, AutoComplete } from 'antd';
import { FormattedMessage, useIntl } from '@umijs/max';
import { CloseOutlined } from '@ant-design/icons';
import * as Utils from '../utils'

const renderTitle = (title, uuid) => (
    <>
        <span
            style={{
                fontWeight: 'bold'
            }}
        >
            {title}
        </span>
        <span
            style={{
                float: 'right',
                opacity: .3
            }}
        >
            {uuid}
        </span>
        <span style={{ fontWeight: 'bold' }} >{title}</span>
        <span style={{ float: 'right', opacity: .3 }} >{uuid}</span>
    </>
);

const MapSearch = (props) => {
    const intl = useIntl();
    const { curSprite : curSensor, setCurSPrite: setCurSensor } = props;

    const sensorTypeSelectOptions = Utils.sensorTypeSelectOptions(intl);

    const [curSensorType, setCurSensorType] = React.useState(sensorTypeSelectOptions?.[0]?.value);
    const [sensorList, setSensorList] = React.useState([]);
    const [curSensorUuid, setCurSensorUuid] = React.useState(null);
    const [curSensorLabel, setCurSensorLabel] = React.useState(null);

    useEffect(() => {
        setSensorList([]);
        setCurSensorUuid(null);
        setCurSensorLabel(null);
        setCurSensor(null);
    }, [props]);

    React.useEffect(() => {
        if (!Utils.getMapContainer()) {
            return
        }
        setSensorList([]);
        setCurSensorUuid(null);
        setCurSensorLabel(null);
        setCurSensor(null);
        switch (curSensorType) {
const sensorTypeSelectOptionsFn = (intl) => {
    let options = [];
    Object.entries(Utils.SENSOR_TYPE).forEach(([key, value]) => {
        switch (key) {
            case Utils.SENSOR_TYPE.SHELF:
                Utils.getMapContainer().children.forEach(child => {
                    if (child?.data?.type === Utils.SENSOR_TYPE.SHELF) {
                        setSensorList(prevArr => [...prevArr, {
                            value: child.data.uuid,
                            label: renderTitle(child.data.shelfNo, child.data.uuid)
                        }]);
                    }
                options.push({
                    value: value,
                    label:
                        (
                            <>
                                <span style={{ fontWeight: 'bold' }} >{intl.formatMessage({ id: 'map.sensor.type.shelf', defaultMessage: '货架' })}</span>
                            </>
                        )
                })
                break;
            case Utils.SENSOR_TYPE.AGV:
            case Utils.SENSOR_TYPE.CONVEYOR:
                options.push({
                    value: value,
                    label:
                        (
                            <>
                                <span style={{ fontWeight: 'bold' }} >{intl.formatMessage({ id: 'map.sensor.type.conveyor', defaultMessage: '输送线' })}</span>
                            </>
                        )
                })
                break;
            case Utils.SENSOR_TYPE.SHUTTLE:
                options.push({
                    value: value,
                    label:
                        (
                            <>
                                <span style={{ fontWeight: 'bold' }} >{intl.formatMessage({ id: 'map.sensor.type.shuttle', defaultMessage: '穿梭车' })}</span>
                            </>
                        )
                })
                break;
            case Utils.SENSOR_TYPE.LIFT:
                options.push({
                    value: value,
                    label:
                        (
                            <>
                                <span style={{ fontWeight: 'bold' }} >{intl.formatMessage({ id: 'map.sensor.type.lift', defaultMessage: '提升机' })}</span>
                            </>
                        )
                })
                break;
            // case Utils.SENSOR_TYPE.AGV:
            //     options.push({
            //         value: value,
            //         label:
            //             (
            //                 <>
            //                     <span style={{ fontWeight: 'bold' }} >{intl.formatMessage({ id: 'map.sensor.type.agv', defaultMessage: 'AGV' })}</span>
            //                 </>
            //             )
            //     })
            //     break;
            // case Utils.SENSOR_TYPE.POINT:
            //     options.push({
            //         value: value,
            //         label:
            //             (
            //                 <>
            //                     <span style={{ fontWeight: 'bold' }} >{intl.formatMessage({ id: 'map.sensor.type.point', defaultMessage: '定位点' })}</span>
            //                 </>
            //             )
            //     })
            //     break;
            default:
                break;
        }

    })
    return options;
}

function getAllSensorList(curSensorType) {
    let sensorListAll = [];
    Utils.getMapContainer().children.forEach(child => {
        if (child?.data?.type === curSensorType && child?.data?.no) {
            sensorListAll.push({
                value: child.data.no,
                label: renderTitle(child.data.no, child.data.uuid)
            })
        }
        // lift special handling
        if (curSensorType === Utils.SENSOR_TYPE.LIFT) {
            if (child?.data?.type === Utils.SENSOR_TYPE.SHELF && child?.data?.shelfType === Utils.SHELF_TYPE.LIFT) {
                sensorListAll.push({
                    value: child.data.liftNo + '',
                    label: renderTitle(child.data.liftNo + '', child.data.uuid)
                })
            }
        }
    });
    return sensorListAll;
}

const MapSearch = (props) => {
    const intl = useIntl();
    const {
        curSprite: curSensor,
        setCurSPrite: setCurSensor,
        setSpriteBySettings,
        model,
        setModel,
        ModelEnum,
    } = props;

    const sensorTypeSelectOptions = sensorTypeSelectOptionsFn(intl);
    const [curSensorType, setCurSensorType] = React.useState(sensorTypeSelectOptions?.[0]?.value);

    const [sensorList, setSensorList] = React.useState([]);
    const [filterSensorList, setFilterSensorList] = React.useState([]);
    const [curSensorLabel, setCurSensorLabel] = React.useState(null);

    const resetSearch = () => {
        let sensorListAll = getAllSensorList(curSensorType);
        setSensorList(sensorListAll);
        setFilterSensorList(sensorListAll);
        setCurSensorLabel(null);
    }

    // first select and switch floor
    React.useEffect(() => {
        if (!Utils.getMapContainer()) { return }
        setTimeout(() => {
            resetSearch();
        }, 200)
    }, [curSensorType, props.curFloor])

    // second select condition
    React.useEffect(() => {
        if (!Utils.getMapContainer()) { return; }
        if (!Utils.isNullOfUndefined(curSensorLabel) && sensorList && sensorList.length > 0) {
            setFilterSensorList(sensorList.filter(item => item.value.includes(curSensorLabel)));
        }
    }, [curSensorLabel])

    const onSecondSelect = (value, option) => {
        const uuid = option.label?.props?.children?.[1].props.children;
        const selectSensor = Utils.findSpriteByUuid(uuid);
        if (selectSensor) {
            Utils.beCenter(selectSensor);
        }
        switch (model) {
            case ModelEnum.OBSERVER_MODEL:
                setCurSensor(selectSensor);
                break;
            case ModelEnum.MOVABLE_MODEL:
                setModel(ModelEnum.SETTINGS_MODEL);
                // avoid model modify which will clear spriteBySettings
                setTimeout(() => {
                    setSpriteBySettings(selectSensor);
                }, 200)
                break;
            case ModelEnum.SETTINGS_MODEL:
                setSpriteBySettings(selectSensor);
                break;
            default:
                break;
        }
    }, [curSensorType])

    React.useEffect(() => {
        console.log(curSensorUuid);
        setCurSensor(Utils.findSpriteByUuid(curSensorUuid));
    }, [curSensorUuid])
    }

    return (
        <>
@@ -100,29 +202,10 @@
                    clearIcon: <CloseOutlined />
                }}
                popupMatchSelectWidth={500}
                onSearch={() => { }}
                options={sensorList}
                options={filterSensorList}
                value={curSensorLabel}
                onSelect={(value, option) => {
                    setCurSensorUuid(value);
                    let showLable = option.label?.props?.children?.[0].props.children;
                    if (showLable) {
                        setCurSensorLabel(showLable)
                    } else {
                        return setCurSensorLabel(value);
                    }
                }}
                onChange={(value) => {
                    setCurSensorLabel(value);
                    if (!value) {
                        console.log(1);
                        setCurSensorUuid(null);
                        setCurSensorLabel(null);
                        setCurSensor(null);
                    } else {

                    }
                }}
                onSelect={onSecondSelect}
                onChange={setCurSensorLabel}
            />
        </>
    )