|
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
|
|
|
import mapstyles from '@/assets/css/map.less';
|
|
|
import { getMapList } from '@/services/ant-design-pro/environment';
|
|
|
import cx from 'classnames';
|
|
|
+import Icon from '@/tenants-ui/Icon';
|
|
|
|
|
|
type MapProps = {
|
|
|
//mapList: API.MapInfo[];
|
|
@@ -11,17 +12,91 @@ type MapProps = {
|
|
|
|
|
|
const Map: React.FC<MapProps> = ({ type, render }) => {
|
|
|
const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
+
|
|
|
+ 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 = 3000,
|
|
|
+ mapHeight = 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();
|
|
|
+ setMscale(mscale + 0.1);
|
|
|
+ };
|
|
|
+ const mapReduce = (event: React.MouseEvent) => {
|
|
|
+ event.stopPropagation();
|
|
|
+ console.log('mapReduce', mscale);
|
|
|
+ setMscale(mscale - 0.1);
|
|
|
+ };
|
|
|
useEffect(() => {
|
|
|
getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
|
|
|
var data: API.MapInfo[] = res.data || [];
|
|
|
setMapList(data);
|
|
|
});
|
|
|
}, []);
|
|
|
+ // useEffect(() => {// todo 要不要用呢
|
|
|
+ // document.querySelector('#root').addEventListener(
|
|
|
+ // 'mouseup',
|
|
|
+ // function () {
|
|
|
+ // console.log('mouseUpEvent');
|
|
|
+ // setCanMove(false);
|
|
|
+ // },
|
|
|
+ // true,
|
|
|
+ // );
|
|
|
+ // }, []);
|
|
|
+
|
|
|
return (
|
|
|
- <div className={cx(mapstyles.map, { [mapstyles.equipmentMap]: type == 'equipment' })}>
|
|
|
- {mapList.map(function (item, index) {
|
|
|
- return render(item, index);
|
|
|
- })}
|
|
|
+ <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>
|
|
|
);
|
|
|
};
|