| | |
| | | import { FormattedMessage, useIntl, useModel } from '@umijs/max'; |
| | | import * as PIXI from 'pixi.js'; |
| | | import { createStyles } from 'antd-style'; |
| | | import './index.css' |
| | | import * as Utils from '../utils' |
| | | |
| | | const useStyles = createStyles(({ token, css }) => { |
| | | let dark = token.colorBgBase === '#000'; |
| | |
| | | transition: all 0.3s ease !important; |
| | | } |
| | | `, |
| | | color: dark ? '#303030' : '#f0f0f0' |
| | | color: dark ? '#303030' : '#f0f0f0', |
| | | title: { |
| | | color: dark ? '#f0f0f0' : '#303030' |
| | | } |
| | | }; |
| | | }); |
| | | |
| | | import shuttle from '/public/img/map/shuttle.svg' |
| | | import agv from '/public/img/map/agv.svg' |
| | | import { set } from 'lodash'; |
| | | import shelf from '/public/img/map/shelf.png' |
| | | import point from '/public/img/map/point.svg' |
| | | |
| | | const Device = (props) => { |
| | | const intl = useIntl(); |
| | | const { styles } = useStyles(); |
| | | const [dragging, setDragging] = useState(false); |
| | | const [dragSprite, setDragSprite] = useState(null); |
| | |
| | | const onDragStart = (e, type) => { |
| | | setDragging(true); |
| | | setDragSpriteType(type); |
| | | const sprite = PIXI.Sprite.from(agv); |
| | | const sprite = Utils.generateSprite(type); |
| | | setDragSprite(sprite); |
| | | }; |
| | | |
| | |
| | | rootStyle={{ position: "absolute" }} |
| | | mask={false} |
| | | width={378} |
| | | style={{ |
| | | opacity: .8 |
| | | }} |
| | | extra={ |
| | | <Space> |
| | | <Button onClick={() => props.onCancel()}><FormattedMessage id='common.cancel' defaultMessage='取消' /></Button> |
| | | </Space> |
| | | } |
| | | > |
| | | <Card className={styles.mapCard}> |
| | | <Row className={styles.mapRow}> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | </Row> |
| | | <Row className={styles.mapRow}> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | </Row> |
| | | <Row className={styles.mapRow}> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, 'AGV')} |
| | | /> |
| | | <div>AGV</div> |
| | | </Col> |
| | | </Row> |
| | | </Card> |
| | | <Row className={styles.mapRow}> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={shuttle} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.SHUTTLE)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.shuttle' defaultMessage='穿梭车' /> |
| | | </div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={shelf} |
| | | width='35px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.SHELF)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.shelf' defaultMessage='货架' /> |
| | | </div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8}> |
| | | <Image |
| | | src={point} |
| | | style={{ |
| | | }} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.POINT)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.point' defaultMessage='定位点' /> |
| | | </div> |
| | | </Col> |
| | | </Row> |
| | | <Row className={styles.mapRow}> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.AGV)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' /> |
| | | </div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={shelf} |
| | | width='35px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.SHELF)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.shelf' defaultMessage='货架' /> |
| | | </div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.AGV)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' /> |
| | | </div> |
| | | </Col> |
| | | </Row> |
| | | <Row className={styles.mapRow}> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.AGV)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' /> |
| | | </div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={shelf} |
| | | width='35px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.SHELF)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.shelf' defaultMessage='货架' /> |
| | | </div> |
| | | </Col> |
| | | <Col className={styles.mapCol} span={8} > |
| | | <Image |
| | | src={agv} |
| | | width='50px' |
| | | preview={false} |
| | | draggable="true" |
| | | onDragStart={(e) => onDragStart(e, Utils.SENSOR_TYPE.AGV)} |
| | | /> |
| | | <div className={styles.title}> |
| | | <FormattedMessage id='map.sensor.type.agv' defaultMessage='无人小车' /> |
| | | </div> |
| | | </Col> |
| | | </Row> |
| | | </Drawer> |
| | | </> |
| | | ) |