From 3a188607647cbf05c08e7675186ec48764cc657c Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Wed, 04 Sep 2024 14:55:27 +0800
Subject: [PATCH] feat: 滚动优化、查看当事人报错、事件流转静态

---
 gz-customerSystem/src/views/register/visit/component/map.jsx |   85 +++++++++++++++++++++++++++---------------
 1 files changed, 55 insertions(+), 30 deletions(-)

diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx
index fd7dcfc..f7ee283 100644
--- a/gz-customerSystem/src/views/register/visit/component/map.jsx
+++ b/gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -7,8 +7,8 @@
  * @Description: 地图
  */
 import React, { useEffect, useRef, useState } from 'react';
-import { Map, Marker, NavigationControl, InfoWindow, CustomOverlay } from 'react-bmapgl';
-import { Form, Input, Button, Message, Popconfirm } from '@arco-design/web-react';
+import { Map, CustomOverlay } from 'react-bmapgl';
+import { Form, Input, Button, Message, Spin } from '@arco-design/web-react';
 
 import { Row, Col } from 'antd';
 const FormItem = Form.Item;
@@ -36,10 +36,12 @@
   const [addressList, setAddressList] = useState([])
   const [addressData, setAddressData] = useState({})
   const [selectData, setSelectData] = useState({})
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     //初次进入定位在当前浏览器
     if (mapRef.current) {
+      setLoading(true)
       let geolocation = new BMapGL.Geolocation();
       geolocation.getCurrentPosition((r) => {
         if (geolocation.getStatus() === 0) {
@@ -47,19 +49,20 @@
         } else {
           Message.warning(`Failed with status ${geolocation.getStatus()}`);
         }
+        setLoading(false)
       }, '广州市');
     }
   }, [mapRef]);
 
   //查询
-  const handleSubmit = () => {
+  const handleSubmit = (addItem) => {
     if (formRef.current) {
       formRef.current.validate(undefined, (errors, values) => {
         if (!errors) {
           var myGeo = new BMapGL.Geocoder();
           myGeo.getPoint(values.name, (point) => {
             if (point) {
-              handleAnalysis(point); // 添加地点名称
+              handleAnalysis(point, addItem); // 添加地点名称
             } else {
               Message.warning('您输入的地址没有解析到结果！');
             }
@@ -70,21 +73,32 @@
   };
 
   // 解析地址为中文
-  const handleAnalysis = (pt) => {
-    let geoc = new BMapGL.Geocoder();
-    geoc.getLocation(pt, (rs) => {
-      let addComp = rs.content;
-      let addName = `${addComp.address}  ${addComp.poi_desc}`;
-      let surroundingPois = rs.surroundingPois;
-      mapRef.current?.map.centerAndZoom(pt, 15);//地图指向中心
+  const handleAnalysis = (pt, addItem) => {
+    if (!addItem) {
+      let geoc = new BMapGL.Geocoder();
+      geoc.getLocation(pt, (rs) => {
+        let addComp = rs.content;
+        let addName = `${addComp.address}  ${addComp.poi_desc}`;
+        let surroundingPois = rs.surroundingPois;
+        mapRef.current?.map.centerAndZoom(pt, 15);//地图指向中心
+        mapRef.current?.map.clearOverlays();//清除所有标点
+        mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点
+        setAddressList(surroundingPois);
+        setAddressData({
+          pt,
+          addName
+        })
+      });
+    } else {
+      mapRef.current?.map.centerAndZoom(addItem.point, 15);//地图指向中心
       mapRef.current?.map.clearOverlays();//清除所有标点
-      mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点
-      setAddressList(surroundingPois);
+      mapRef.current?.map.addOverlay(new BMapGL.Marker(addItem.point, { icon: myIcon }));//添加标点
       setAddressData({
-        pt,
-        addName
+        pt: addItem.point,
+        addName: addItem.address + addItem.title
       })
-    });
+    }
+
   };
 
   //点击附近地址
@@ -95,18 +109,26 @@
       address
     })
     formRef.current.setFieldValue('name', address)
-    handleSubmit()
+    handleSubmit(data)
   }
 
   //使用地址
   const handleUseAddress = (e) => {
     e.stopPropagation()
-    console.log(addressData);
+    props.selectAdd(addressData)
   }
 
   return (
-    <div>
-      <Row gutter={[16, 0]}>
+    <Spin tip='正在获取附近地址...' loading={loading} style={{ width: '100%', height: '100%' }}>
+      <Row
+        gutter={[16, 0]}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            handleSubmit(false)
+          }
+        }}
+      >
         <Col span={16}>
           <Form
             ref={formRef}
@@ -125,7 +147,7 @@
             </Button>
             <Button
               type="primary"
-              onClick={handleSubmit}
+              onClick={() => { handleSubmit(false) }}
             >
               查询
             </Button>
@@ -138,21 +160,24 @@
               let pt = e.latlng;
               handleAnalysis(pt);
             }}
+            center={new BMapGL.Point(113.27142900886543, 23.13533647285972)}
           >
-            <CustomOverlay
-              position={addressData.pt || new BMapGL.Point(113.26552377996691, 23.143506946336696)}
+            {addressData.pt && <CustomOverlay
+              position={addressData.pt}
               offset={{ width: -91, height: -25 }}
             >
               <div className='mapPopconfirm'>
-                <div>{addressData.addName}</div>
-                <div className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</div>
+                <div style={{marginBottom: '10px'}}>{addressData.addName}</div>
+                <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
+                  <div className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</div>
+                </div>
               </div>
-            </CustomOverlay>
+            </CustomOverlay>}
           </Map>
         </Col>
         <Col span={8}>
           <div style={{ color: '#86909C', marginTop: '43px' }} >附近地址</div>
-          <div style={{ height: '343px', overflowY: 'scroll' }}>
+          <div style={{ height: '343px', overflowY: 'scroll', paddingRight: '10px' }}>
             {addressList?.map(item => (
               <div
                 key={item.uid}
@@ -160,13 +185,13 @@
                 onClick={() => { clickVicinity(item) }}
                 style={{ color: selectData.uid === item.uid ? '#1A6FB8' : '' }}
               >
-                {item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}
-                <div className='mapVicinityIcon'></div>
+                <div style={{ marginRight: '5px', flex: 1 }}>{item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}</div>
+                {selectData.uid === item.uid ? <div className='mapVicinityIcon'></div> : <div style={{ width: '14px' }}></div>}
               </div>
             ))}
           </div>
         </Col>
       </Row>
-    </div>
+    </Spin>
   )
 }
\ No newline at end of file

--
Gitblit v1.8.0