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 = ({ type, searchText, selFloorId, render, mapList }) => { //useModel 注释掉 不用啦 晚会删 // const { mapList, getMapListData } = useModel('map'); // useEffect(() => { // getMapListData(selFloorId); // }, [selFloorId]); const [startPageX, setStartPageX] = useState(0); const [startPageY, setStartPageY] = useState(0); const [translateX, setTranslateX] = useState(0); const [translateY, setTranslateY] = useState(0); const [mscale, setMscale] = useState(1); const [canMove, setCanMove] = useState(false); const [mapKey, setMapKey] = useState(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 (
{ mouseDownEvent(event); }} onMouseUp={(event) => { mouseUpEvent(event); }} onMouseMove={(event) => { mouseMoveEvent(event); }} >
{mapList.map(function (item, index) { return render(item, index); })}
{ mapZoom(event); }} >
{ mapReduce(event); }} >
); }; export default Map;