123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140 |
- import React, { useState, useEffect } from 'react';
- import mapstyles from '@/assets/css/map.less';
- import useMapList from '@/hooks/useMapList';
- import cx from 'classnames';
- import Icon from '@/tenants-ui/Icon';
- type MapProps = {
- type: string;
- searchText: string;
- render: (item: API.MapInfo, index: number) => React.ReactNode;
- };
- const Map: React.FC<MapProps> = ({ type, searchText, render }) => {
- const mapList = useMapList();
- const [startPageX, setStartPageX] = useState<number>(0);
- const [startPageY, setStartPageY] = useState<number>(0);
- const [translateX, setTranslateX] = useState<number>(0);
- const [translateY, setTranslateY] = useState<number>(0);
- const [mscale, setMscale] = useState<number>(1);
- const [canMove, setCanMove] = useState<boolean>(false);
- // let mapWidth:number = 3000,
- // mapHeight:number = 1200;
- const mouseDownEvent = (event: React.MouseEvent) => {
- // startPageX = event.pageX;
- //startPageY = event.pageY;
- setStartPageX(event.pageX);
- setStartPageY(event.pageY);
- console.log('mouseDownEvent', startPageX, event.pageY);
- setCanMove(true);
- };
- const mouseUpEvent = (event: React.MouseEvent) => {
- console.log('mouseUpEvent', event);
- setCanMove(false);
- };
- const mouseMoveEvent = (event: React.MouseEvent) => {
- if (canMove) {
- let nowPageX = event.pageX;
- let nowPageY = event.pageY;
- setTranslateX(translateX + nowPageX - startPageX);
- setTranslateY(translateY + nowPageY - startPageY);
- console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
- // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
- setStartPageX(event.pageX);
- setStartPageY(event.pageY);
- }
- };
- const mapZoom = (event: React.MouseEvent) => {
- event.stopPropagation();
- if (mscale < 1.6) {
- setMscale(mscale + 0.1);
- }
- };
- const mapReduce = (event: React.MouseEvent) => {
- event.stopPropagation();
- console.log('mapReduce', mscale);
- if (mscale > 0.3) {
- setMscale(mscale - 0.1);
- }
- };
- useEffect(() => {
- debugger;
- console.log('searchText', searchText);
- if (searchText) {
- let left: any = 0,
- top: any = 0;
- mapList.map((item, index) => {
- if (item.localName == searchText) {
- left = -(item.left || 0);
- top = -(item.top || 0);
- }
- });
- // debugger;
- setTranslateX(left);
- setTranslateY(top);
- }
- searchText = '';
- }, [searchText]);
- // useEffect(() => {// todo 要不要用呢
- // document.querySelector('#root').addEventListener(
- // 'mouseup',
- // function () {
- // console.log('mouseUpEvent');
- // setCanMove(false);
- // },
- // true,
- // );
- // }, []);
- return (
- <div
- className={mapstyles.mapwrap}
- onMouseDown={(event) => {
- mouseDownEvent(event);
- }}
- onMouseUp={(event) => {
- mouseUpEvent(event);
- }}
- onMouseMove={(event) => {
- mouseMoveEvent(event);
- }}
- >
- <div
- className={cx(mapstyles.map, { [mapstyles.equipmentMap]: type == 'equipment' })}
- style={{
- transform: `translate(${translateX}px,${translateY}px) scale(${mscale},${mscale})`,
- }}
- >
- {mapList.map(function (item, index) {
- return render(item, index);
- })}
- </div>
- <div className={mapstyles.mapControl}>
- <div
- className={mapstyles.zoom}
- onClick={(event) => {
- mapZoom(event);
- }}
- >
- <Icon className="" type="zoom"></Icon>
- </div>
- <div
- className={mapstyles.zoom}
- onClick={(event) => {
- mapReduce(event);
- }}
- >
- <Icon className="" type="reduce"></Icon>
- </div>
- </div>
- </div>
- );
- };
- export default Map;
|