|
@@ -1,17 +1,18 @@
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
import mapstyles from '@/assets/css/map.less';
|
|
|
-import { getMapList } from '@/services/ant-design-pro/environment';
|
|
|
+import useMapList from '@/hooks/useMapList';
|
|
|
+
|
|
|
import cx from 'classnames';
|
|
|
import Icon from '@/tenants-ui/Icon';
|
|
|
|
|
|
type MapProps = {
|
|
|
- //mapList: API.MapInfo[];
|
|
|
type: string;
|
|
|
+ searchText: string;
|
|
|
render: (item: API.MapInfo, index: number) => React.ReactNode;
|
|
|
};
|
|
|
|
|
|
-const Map: React.FC<MapProps> = ({ type, render }) => {
|
|
|
- const [mapList, setMapList] = useState<API.MapInfo[]>([]);
|
|
|
+const Map: React.FC<MapProps> = ({ type, searchText, render }) => {
|
|
|
+ const mapList = useMapList();
|
|
|
|
|
|
const [startPageX, setStartPageX] = useState<number>(0);
|
|
|
const [startPageY, setStartPageY] = useState<number>(0);
|
|
@@ -20,8 +21,8 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
|
|
|
const [translateY, setTranslateY] = useState<number>(0);
|
|
|
const [mscale, setMscale] = useState<number>(1);
|
|
|
const [canMove, setCanMove] = useState<boolean>(false);
|
|
|
- let mapWidth = 3000,
|
|
|
- mapHeight = 1200;
|
|
|
+ // let mapWidth:number = 3000,
|
|
|
+ // mapHeight:number = 1200;
|
|
|
|
|
|
const mouseDownEvent = (event: React.MouseEvent) => {
|
|
|
// startPageX = event.pageX;
|
|
@@ -42,7 +43,7 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
|
|
|
setTranslateX(translateX + nowPageX - startPageX);
|
|
|
setTranslateY(translateY + nowPageY - startPageY);
|
|
|
console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
|
|
|
- console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
|
|
|
+ // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
|
|
|
|
|
|
setStartPageX(event.pageX);
|
|
|
setStartPageY(event.pageY);
|
|
@@ -50,19 +51,37 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
|
|
|
};
|
|
|
const mapZoom = (event: React.MouseEvent) => {
|
|
|
event.stopPropagation();
|
|
|
- setMscale(mscale + 0.1);
|
|
|
+ if (mscale < 1.6) {
|
|
|
+ setMscale(mscale + 0.1);
|
|
|
+ }
|
|
|
};
|
|
|
const mapReduce = (event: React.MouseEvent) => {
|
|
|
event.stopPropagation();
|
|
|
console.log('mapReduce', mscale);
|
|
|
- setMscale(mscale - 0.1);
|
|
|
+ if (mscale > 0.3) {
|
|
|
+ setMscale(mscale - 0.1);
|
|
|
+ }
|
|
|
};
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
- getMapList({ floorId: 'sffsdfdsfdf', floorNumber: 22 }).then(function (res) {
|
|
|
- var data: API.MapInfo[] = res.data || [];
|
|
|
- setMapList(data);
|
|
|
- });
|
|
|
- }, []);
|
|
|
+ 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',
|
|
@@ -97,6 +116,24 @@ const Map: React.FC<MapProps> = ({ type, render }) => {
|
|
|
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>
|
|
|
);
|
|
|
};
|