123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- import React, { useState, useEffect } from 'react';
- import mapstyles from '@/assets/css/map.less';
- import { useModel } from 'umi';
- import cx from 'classnames';
- import Icon from '@/tenants-ui/Icon';
- type MapProps = {
- type: string;
- searchText: any;
- selFloorId?: string;
- render: (item: API.MapInfo, index: number) => React.ReactNode;
- mapList: API.MapInfo[];
- };
- const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList }) => {
- //useModel 注释掉 不用啦 晚会删
- // const { mapList, getMapListData } = useModel('map');
- // useEffect(() => {
- // getMapListData(selFloorId);
- // }, [selFloorId]);
- 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);
- const [mapKey, setMapKey] = useState<number>(0);
- // 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(() => {
- //console.log('searchText', searchText);
- //searchText使用对象 防止修改了 不再重新定位
- if (searchText && searchText.text) {
- let left: any = 0,
- top: any = 0;
- debugger;
- // mapList.map((item, index) => {
- // if (item.localName == (searchText && searchText.text)) {
- // left = -(item.left || 0);
- // top = -(item.top || 0);
- // }
- // });
- var filterItem = mapList.filter((item) => {
- return item.localName == (searchText && searchText.text);
- });
- if (filterItem.length == 0) {
- return;
- } else {
- left = -(filterItem[0].left || 0);
- top = -(filterItem[0].top || 0);
- setTranslateX(left);
- setTranslateY(top);
- }
- }
- }, [searchText, mapList]);
- useEffect(() => {
- //debugger;
- }, [mapList]);
- // 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;
|