#

luxiaotao1123

2024-03-16 bd5c76aa213d959081d598c41045d7d36fb86ace

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React, { useState, useRef, useEffect } from 'react';
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>
    </>
);
 
const sensorTypeSelectOptionsFn = (intl) => {
    let options = [];
    Object.entries(Utils.SENSOR_TYPE).forEach(([key, value]) => {
        switch (key) {
            case Utils.SENSOR_TYPE.SHELF:
                options.push({
                    value: value,
                    label:
                        (
                            <>
                                <span style={{ fontWeight: 'bold' }} >{intl.formatMessage({ id: 'map.sensor.type.shelf', 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: '无人小车' })}</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)
            })
        }
    });
    return sensorListAll;
}
 
const MapSearch = (props) => {
    const intl = useIntl();
    const { curSprite: curSensor, setCurSPrite: setCurSensor } = 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);
 
    // first select
    React.useEffect(() => {
        if (!Utils.getMapContainer()) { return; }
        let sensorListAll = getAllSensorList(curSensorType);
        setSensorList(sensorListAll);
        setFilterSensorList(sensorListAll);
        setCurSensorLabel(null);
    }, [curSensorType])
 
    // second select
    React.useEffect(() => {
        if (!Utils.getMapContainer()) { return; }
        if ((curSensorLabel !== null || curSensorLabel != undefined)
            && sensorList && sensorList.length > 0) {
            setFilterSensorList(sensorList.filter(item => item.value.includes(curSensorLabel)));
        }
    }, [curSensorLabel])
 
    return (
        <>
            <Select
                className='map-header-select'
                variant='filled'
                style={{
                    width: 160,
                }}
                size={'large'}
                options={sensorTypeSelectOptions}
                value={curSensorType}
                onChange={setCurSensorType}
            />
            <AutoComplete
                className='map-header-select'
                variant='filled'
                style={{
                    width: 360,
                }}
                size={'large'}
                placeholder={intl.formatMessage({ id: 'common.search.placeholder', defaultMessage: '请输入搜索内容' })}
                allowClear={{
                    clearIcon: <CloseOutlined />
                }}
                popupMatchSelectWidth={500}
                options={filterSensorList}
                value={curSensorLabel}
                onSelect={(value, option) => {
                    const uuid = option.label?.props?.children?.[1].props.children;
                    setCurSensor(Utils.findSpriteByUuid(uuid));
                }}
                onChange={setCurSensorLabel}
            />
        </>
    )
}
 
export default MapSearch;