|
@@ -4,6 +4,7 @@ import { useModel } from 'umi';
|
|
|
|
|
|
import cx from 'classnames';
|
|
|
import Icon from '@/tenants-ui/Icon';
|
|
|
+import user from 'mock/user';
|
|
|
|
|
|
type MapProps = {
|
|
|
type: string;
|
|
@@ -20,21 +21,30 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
|
|
|
// useEffect(() => {
|
|
|
// getMapListData(selFloorId);
|
|
|
// }, [selFloorId]);
|
|
|
- const { searchText, changeSearchText, changeSearchFloorId, changeSearchBuildId } =
|
|
|
- useModel('searchInfo');
|
|
|
+ const {
|
|
|
+ searchText,
|
|
|
+ changeSearchSpace,
|
|
|
+ changeSearchText,
|
|
|
+ changeSearchFloorId,
|
|
|
+ changeSearchBuildId,
|
|
|
+ } = useModel('searchInfo');
|
|
|
|
|
|
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 [originX, setOriginX] = useState<number>(0);
|
|
|
+ const [originY, setOriginY] = useState<number>(0);
|
|
|
const [mscale, setMscale] = useState<number>(1);
|
|
|
//最大的缩放比例
|
|
|
const [maxscale, setMaxscale] = useState<number>(1.6);
|
|
|
const [minscale, setMinscale] = useState<number>(0.3);
|
|
|
const [canMove, setCanMove] = useState<boolean>(false);
|
|
|
- const currentFloorId = useRef<any>(null);
|
|
|
|
|
|
+ const currentFloorId = useRef<any>(null);
|
|
|
+ const mapRef = useRef();
|
|
|
// let mapWidth: number = 3000,
|
|
|
// mapHeight: number = 1200;
|
|
|
|
|
@@ -61,25 +71,51 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
|
|
|
setStartPageY(event.pageY);
|
|
|
}
|
|
|
};
|
|
|
+ useEffect(() => {
|
|
|
+ console.log('mapRef', mapRef);
|
|
|
+ // var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
+ // var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
+ // var originX = mapWrapWidth / 2 - translateX < 0 ? 0 : mapWrapWidth / 2 - translateX;
|
|
|
+ // var originY = mapWrapHeight / 2 - translateY < 0 ? 0 : mapWrapHeight / 2 - translateY;
|
|
|
+ // setOriginX(originX);
|
|
|
+ // setOriginY(originY);
|
|
|
+ console.log('originX', originX, 'originY', originY);
|
|
|
+ }, [translateX, translateY]);
|
|
|
|
|
|
const mapZoom = (event: React.MouseEvent) => {
|
|
|
event.stopPropagation();
|
|
|
if (mscale < maxscale) {
|
|
|
- setMscale(mscale + 0.1);
|
|
|
+ var mscaleTemp = Number((mscale + 0.1).toFixed(4));
|
|
|
+ setMscale(mscaleTemp);
|
|
|
+ var changeWidth = mapSize.width * 0.1;
|
|
|
+ var changeHeight = mapSize.height * 0.1;
|
|
|
+ setTranslateX(translateX - changeWidth / 2);
|
|
|
+ setTranslateY(translateY - changeHeight / 2);
|
|
|
}
|
|
|
+
|
|
|
+ console.log('mscale', mscale);
|
|
|
};
|
|
|
const mapReduce = (event: React.MouseEvent) => {
|
|
|
event.stopPropagation();
|
|
|
//console.log('mapReduce', mscale);
|
|
|
if (mscale > minscale) {
|
|
|
- setMscale(mscale - 0.1);
|
|
|
+ var mscaleTemp = Number((mscale - 0.1).toFixed(4));
|
|
|
+ setMscale(mscaleTemp);
|
|
|
+ var changeWidth = mapSize.width * 0.1;
|
|
|
+ var changeHeight = mapSize.height * 0.1;
|
|
|
+ setTranslateX(translateX + changeWidth / 2);
|
|
|
+ setTranslateY(translateY + changeHeight / 2);
|
|
|
}
|
|
|
+
|
|
|
+ console.log('mscale', mscale);
|
|
|
};
|
|
|
+
|
|
|
const fixWidth = 1300;
|
|
|
useEffect(() => {
|
|
|
- var scale = fixWidth / mapSize.width;
|
|
|
+ var scale = Number((fixWidth / mapSize.width).toFixed(4));
|
|
|
setMscale(scale);
|
|
|
if (scale < 0.3) {
|
|
|
+ console.log('mscale', mscale);
|
|
|
setMinscale(scale);
|
|
|
}
|
|
|
}, [mapSize]);
|
|
@@ -97,10 +133,14 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
|
|
|
return item.localName == (searchText && searchText.text);
|
|
|
});
|
|
|
if (filterItem.length == 0) return;
|
|
|
+ changeSearchSpace(filterItem[0]);
|
|
|
+ console.log('selectSpace2', filterItem[0]);
|
|
|
left = -((filterItem[0] || {}).left || 0);
|
|
|
top = -((filterItem[0] || {}).top || 0);
|
|
|
- setTranslateX(left * mscale);
|
|
|
- setTranslateY(top * mscale);
|
|
|
+ var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
+ var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
+ setTranslateX(left * mscale + mapWrapWidth / 2);
|
|
|
+ setTranslateY(top * mscale + mapWrapHeight / 2);
|
|
|
//搜索完成
|
|
|
changeSearchBuildId(''); //清空搜索记录 以防两次搜索一样的建筑的 没反应
|
|
|
changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
|
|
@@ -124,10 +164,20 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
|
|
|
return item.localName == (searchText && searchText.text);
|
|
|
});
|
|
|
if (filterItem.length == 0) return;
|
|
|
+ changeSearchSpace(filterItem[0]);
|
|
|
+
|
|
|
+ console.log('selectSpace2', filterItem[0]);
|
|
|
left = -((filterItem[0] || {}).left || 0);
|
|
|
top = -((filterItem[0] || {}).top || 0);
|
|
|
- setTranslateX(left * mscale);
|
|
|
- setTranslateY(top * mscale);
|
|
|
+ var mapWrapWidth = (mapRef.current || {}).clientWidth || 0;
|
|
|
+ var mapWrapHeight = (mapRef.current || {}).clientHeight || 0;
|
|
|
+ // left = left * mscale + mapWrapWidth / 2;
|
|
|
+ // top = top * mscale + mapWrapHeight / 2;
|
|
|
+ debugger;
|
|
|
+ setTranslateX(left * mscale + mapWrapWidth / 2);
|
|
|
+ setTranslateY(top * mscale + mapWrapHeight / 2);
|
|
|
+ changeSearchBuildId(''); //清空搜索记录 以防两次搜索一样的建筑的 没反应
|
|
|
+ changeSearchFloorId(''); //清空搜索记录 以防两次搜索一样的楼层时 没反应 要不要换位置
|
|
|
changeSearchText({});
|
|
|
}
|
|
|
}, [searchText]);
|
|
@@ -147,6 +197,7 @@ const Map: React.FC<MapProps> = ({ type, selFloorId, render, mapList, mapSize })
|
|
|
return (
|
|
|
<div
|
|
|
className={mapstyles.mapwrap}
|
|
|
+ ref={mapRef}
|
|
|
onMouseDown={(event) => {
|
|
|
mouseDownEvent(event);
|
|
|
}}
|