index.tsx 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. import React, { useState, useEffect } from 'react';
  2. import mapstyles from '@/assets/css/map.less';
  3. import { useModel } from 'umi';
  4. import cx from 'classnames';
  5. import Icon from '@/tenants-ui/Icon';
  6. type MapProps = {
  7. type: string;
  8. searchText: any;
  9. selFloorId?: string;
  10. render: (item: API.MapInfo, index: number) => React.ReactNode;
  11. mapList: API.MapInfo[];
  12. };
  13. const Map: React.FC<MapProps> = ({ type, searchText, selFloorId, render, mapList }) => {
  14. //useModel 注释掉 不用啦 晚会删
  15. // const { mapList, getMapListData } = useModel('map');
  16. // useEffect(() => {
  17. // getMapListData(selFloorId);
  18. // }, [selFloorId]);
  19. const [startPageX, setStartPageX] = useState<number>(0);
  20. const [startPageY, setStartPageY] = useState<number>(0);
  21. const [translateX, setTranslateX] = useState<number>(0);
  22. const [translateY, setTranslateY] = useState<number>(0);
  23. const [mscale, setMscale] = useState<number>(1);
  24. const [canMove, setCanMove] = useState<boolean>(false);
  25. const [mapKey, setMapKey] = useState<number>(0);
  26. // let mapWidth: number = 3000,
  27. // mapHeight: number = 1200;
  28. const mouseDownEvent = (event: React.MouseEvent) => {
  29. // startPageX = event.pageX;
  30. //startPageY = event.pageY;
  31. setStartPageX(event.pageX);
  32. setStartPageY(event.pageY);
  33. //console.log('mouseDownEvent', startPageX, event.pageY);
  34. setCanMove(true);
  35. };
  36. const mouseUpEvent = (event: React.MouseEvent) => {
  37. //console.log('mouseUpEvent', event);
  38. setCanMove(false);
  39. };
  40. const mouseMoveEvent = (event: React.MouseEvent) => {
  41. if (canMove) {
  42. let nowPageX = event.pageX;
  43. let nowPageY = event.pageY;
  44. setTranslateX(translateX + nowPageX - startPageX);
  45. setTranslateY(translateY + nowPageY - startPageY);
  46. //console.log('mouseMoveEvent-xx', translateX, nowPageX, startPageX);
  47. // console.log('mouseMoveEvent-yy', translateY, nowPageY, startPageY);
  48. setStartPageX(event.pageX);
  49. setStartPageY(event.pageY);
  50. }
  51. };
  52. const mapZoom = (event: React.MouseEvent) => {
  53. event.stopPropagation();
  54. if (mscale < 1.6) {
  55. setMscale(mscale + 0.1);
  56. }
  57. };
  58. const mapReduce = (event: React.MouseEvent) => {
  59. event.stopPropagation();
  60. //console.log('mapReduce', mscale);
  61. if (mscale > 0.3) {
  62. setMscale(mscale - 0.1);
  63. }
  64. };
  65. //实现搜索 搜索时 出现结果
  66. useEffect(() => {
  67. //console.log('searchText', searchText);
  68. //searchText使用对象 防止修改了 不再重新定位
  69. if (searchText && searchText.text) {
  70. let left: any = 0,
  71. top: any = 0;
  72. debugger;
  73. // mapList.map((item, index) => {
  74. // if (item.localName == (searchText && searchText.text)) {
  75. // left = -(item.left || 0);
  76. // top = -(item.top || 0);
  77. // }
  78. // });
  79. var filterItem = mapList.filter((item) => {
  80. return item.localName == (searchText && searchText.text);
  81. });
  82. if (filterItem.length == 0) {
  83. return;
  84. } else {
  85. left = -(filterItem[0].left || 0);
  86. top = -(filterItem[0].top || 0);
  87. setTranslateX(left);
  88. setTranslateY(top);
  89. }
  90. }
  91. }, [searchText, mapList]);
  92. useEffect(() => {
  93. //debugger;
  94. }, [mapList]);
  95. // useEffect(() => {// todo 要不要用呢
  96. // document.querySelector('#root').addEventListener(
  97. // 'mouseup',
  98. // function () {
  99. // console.log('mouseUpEvent');
  100. // setCanMove(false);
  101. // },
  102. // true,
  103. // );
  104. // }, []);
  105. return (
  106. <div
  107. className={mapstyles.mapwrap}
  108. onMouseDown={(event) => {
  109. mouseDownEvent(event);
  110. }}
  111. onMouseUp={(event) => {
  112. mouseUpEvent(event);
  113. }}
  114. onMouseMove={(event) => {
  115. mouseMoveEvent(event);
  116. }}
  117. >
  118. <div
  119. className={cx(mapstyles.map, { [mapstyles.equipmentMap]: type == 'equipment' })}
  120. style={{
  121. transform: `translate(${translateX}px,${translateY}px) scale(${mscale},${mscale})`,
  122. }}
  123. >
  124. {mapList.map(function (item, index) {
  125. return render(item, index);
  126. })}
  127. </div>
  128. <div className={mapstyles.mapControl}>
  129. <div
  130. className={mapstyles.zoom}
  131. onClick={(event) => {
  132. mapZoom(event);
  133. }}
  134. >
  135. <Icon className="" type="zoom"></Icon>
  136. </div>
  137. <div
  138. className={mapstyles.zoom}
  139. onClick={(event) => {
  140. mapReduce(event);
  141. }}
  142. >
  143. <Icon className="" type="reduce"></Icon>
  144. </div>
  145. </div>
  146. </div>
  147. );
  148. };
  149. export default Map;