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,
|
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);
|
|
// 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])
|
|
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);
|
setSpriteBySettings(selectSensor);
|
break;
|
case ModelEnum.SETTINGS_MODEL:
|
setSpriteBySettings(selectSensor);
|
break;
|
default:
|
break;
|
}
|
}
|
|
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={onSecondSelect}
|
onChange={setCurSensorLabel}
|
/>
|
</>
|
)
|
}
|
|
export default MapSearch;
|
