index.tsx 3.8 KB

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