forked from gzzfw/frontEnd/gzDyh

dminyi
2024-08-28 d3eefcaf3762ca97483e1517697b6941bd9a58d8
Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master
2 files added
6 files modified
252 ■■■■ changed files
gz-customerSystem/src/assets/images/icon/frame.png patch | view | raw | blame | history
gz-customerSystem/src/assets/images/icon/selectIcon.png patch | view | raw | blame | history
gz-customerSystem/src/components/personCard/index.jsx 4 ●●●● patch | view | raw | blame | history
gz-customerSystem/src/views/register/index.less 45 ●●●●● patch | view | raw | blame | history
gz-customerSystem/src/views/register/visit/component/agentDialog.jsx 30 ●●●● patch | view | raw | blame | history
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx 19 ●●●●● patch | view | raw | blame | history
gz-customerSystem/src/views/register/visit/component/map.jsx 121 ●●●● patch | view | raw | blame | history
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx 33 ●●●●● patch | view | raw | blame | history
gz-customerSystem/src/assets/images/icon/frame.png
gz-customerSystem/src/assets/images/icon/selectIcon.png
gz-customerSystem/src/components/personCard/index.jsx
@@ -18,7 +18,7 @@
 * handleCheckParty, // 点击查看详情
 * handleDeleteParty, // 删除当事人
 */
const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd }) => {
const PersonCard = ({ isCheck, data, handleCheckParty, handleDeleteParty, handleAdd, handleEdit }) => {
    let isAgent = false
    let isAgentFor = false
    const typeList = data.map(item => {
@@ -53,7 +53,7 @@
                                <Text style={{ maxWidth: '80%', paddingRight: '8px' }} ellipsis={{ tooltip: x.trueName }}>
                                    {x.trueName}
                                </Text>
                                <Text ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${(x.partyType === 0 || x.partyType === 2) ? 'blue' : 'orange'}`}>
                                <Text onClick={() => { handleEdit(x) }} ellipsis={{ tooltip: x.perClassName }} className={`public-personCard-tag public-personCard-tag-${(x.partyType === 0 || x.partyType === 2) ? 'blue' : 'orange'}`}>
                                    {x.perClassName}
                                </Text>
                            </div>
gz-customerSystem/src/views/register/index.less
@@ -207,3 +207,48 @@
    border-radius: 2px;
    margin-left: 8px;
 }
.mapPopconfirm {
    width: 300px;
    height: 90px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10);
    padding: 15px;
    &::after {
        content: " ";
        position: absolute;
        height: 0;
        width: 0;
        border: solid transparent;
        top: 100%;
        right: 50px;
        border-top-color: white;
        border-width: 10px;
    }
    .mapPopconfirm-btn {
        background-color: #1A6FB8;
        color: #fff;
        cursor: pointer;
        padding: 3px 10px;
        width: 80px;
        text-align: center;
        position: absolute;
        right: 15px;
        bottom: 15px;
    }
}
.mapVicinity {
    margin-bottom: 5px;
    cursor: pointer;
    &:hover {
        color: #1A6FB8;
    }
    .mapVicinityIcon {
    }
}
gz-customerSystem/src/views/register/visit/component/agentDialog.jsx
@@ -17,27 +17,48 @@
  const [visitList, setVisitList] = useState([])
  useEffect(() => {
    if (props.editData) {
      //编辑
      formRef.current.setFieldsValue({
        ...props.editData
      })
    //过滤代理人
    setVisitList(props.fakeData.filter(item => {
      console.log(item,props.dialogType);
        if (props.editData.dialogType === 2) {
          return item.partyType === 0
        } else {
          return item.partyType === 1
        }
      }))
    } else {
      //过滤代理人
      setVisitList(props.fakeData.filter(item => {
      if (props.dialogType === 2) {
        return item.partyType === 0
      } else {
        return item.partyType === 1
      }
    }))
  }, [props.fakeData])
    }
  }, [])
  //保存信息
  const handleSave = () => {
    if (formRef.current) {
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          if (props.editData) {
            props.handleAddParty({
              ...props.editData,
              ...values,
            })
          } else {
          props.handleAddParty({
            ...values,
            partyType: props.dialogType,
            perClassName: props.dialogType === 2 ? '申请方代理人' : '被申请方代理人',
          })
          }
          props.onClose()
        }
      });
@@ -55,6 +76,7 @@
              requiredSymbol={false}
              initialValues={{
              }}//默认值
              scrollToFirstError
            >
              <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>
                <Col span={24}>
@@ -227,7 +249,7 @@
                <Col span={12}>
                  <FormItem
                    label={(<div style={{ display: 'flex' }}>代理对象<div className="must">必填</div></div>)}
                    rules={[{ required: true }]}
                    rules={[{ required: true, message: '请选择代理对象' }]}
                    field='dailimap'
                  >
                    <CheckboxGroup
@@ -256,7 +278,7 @@
          className="dialogPrimary"
          onClick={handleSave}
        >
          保存信息
          保存
        </Button>
        <Button className="dialogBack">
          重置
gz-customerSystem/src/views/register/visit/component/applyDialog.jsx
@@ -29,6 +29,15 @@
  const [perClass, setPerClass] = useState('09_01001-1');
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    if (props.editData) {
      //编辑
      formRef.current.setFieldsValue({
        ...props.editData
      })
    }
  }, [])
  const personIconType = (v) => {
    switch (v) {
@@ -271,12 +280,19 @@
    if (formRef.current) {
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          if (props.editData) {
            props.handleAddParty({
              ...props.editData,
              ...values
            })
          } else {
          props.handleAddParty({
            ...values,
            partyType: props.dialogType,
            perClass: perClass,
            perClassName: props.dialogType === 0 ? '申请方当事人' : '被申请方当事人'
          })
          }
          props.onClose()
        }
      });
@@ -319,6 +335,7 @@
              requiredSymbol={false}
              initialValues={{
              }}//默认值
              scrollToFirstError
            >
              <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>{formType(perClass)}</Row>
            </Form>
@@ -336,7 +353,7 @@
          className="dialogPrimary"
          onClick={handleSave}
        >
          保存信息
          保存
        </Button>
        <Button className="dialogBack">
          重置
gz-customerSystem/src/views/register/visit/component/map.jsx
@@ -7,8 +7,9 @@
 * @Description: 地图
 */
import React, { useEffect, useRef, useState } from 'react';
import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl';
import { Form, Input, Button, Message } from '@arco-design/web-react';
import { Map, Marker, NavigationControl, InfoWindow, CustomOverlay } from 'react-bmapgl';
import { Form, Input, Button, Message, Popconfirm } from '@arco-design/web-react';
import { Row, Col } from 'antd';
const FormItem = Form.Item;
@@ -21,55 +22,44 @@
  },
};
// var map = new window.BMapGL.Map("container");
// map.centerAndZoom(new window.BMapGL.Point(116.401952, 40.032704), 12);
// map.enableScrollWheelZoom();
const BMapGL = window.BMapGL
// 自定义Marker的icon
let myIcon = new BMapGL.Icon(require("@/assets/images/icon/frame.png"), new BMapGL.Size(24, 24), {
  // 是否允许缩放图标
  enableScaling: true
});
export default function MapView(props) {
  const mapRef = useRef()
  const formRef = useRef()
  const [addressList, setAddressList] = useState([])
  const [addressData, setAddressData] = useState({})
  const [selectData, setSelectData] = useState({})
  useEffect(() => {
    //初次进入定位在当前浏览器
    if (mapRef.current) {
      let geolocation = new window.BMapGL.Geolocation();
      let geolocation = new BMapGL.Geolocation();
      geolocation.getCurrentPosition((r) => {
        if (geolocation.getStatus() === 0) {
          handleAnalysis(r.point);
        } else {
          Message.warning(`Failed with status ${geolocation.getStatus()}`);
        }
      });
      }, '广州市');
    }
  }, [mapRef]);
  // const addCustomLabel = (point, content) => {
  //   var label = new window.BMapGL.Label(content, {
  //     position: point,
  //     offset: new window.BMapGL.Size(10, 20)
  //   });
  //   label.setStyle({
  //     color: '#000',
  //     fontSize: '30px',
  //     border: '2px solid #1E90FF'
  //   });
  //   mapRef.current.map.addOverlay(label);
  // };
  //查询
  const handleSubmit = () => {
    if (formRef.current) {
      formRef.current.validate(undefined, (errors, values) => {
        if (!errors) {
          var myGeo = new window.BMapGL.Geocoder();
          var myGeo = new BMapGL.Geocoder();
          myGeo.getPoint(values.name, (point) => {
            if (point) {
              mapRef.current.map.centerAndZoom(point, 15);
              mapRef.current.map.addOverlay(new window.BMapGL.Marker(point, { title: values.name }));
              handleAnalysis(point, values.name); // 添加地点名称
              // addCustomLabel(point, 'label'); // 添加自定义样式标签
              handleAnalysis(point); // 添加地点名称
            } else {
              Message.warning('您输入的地址没有解析到结果!');
            }
@@ -79,35 +69,40 @@
    }
  };
  // 解析地址为中文
  const handleAnalysis = (pt, name) => {
    let geoc = new window.BMapGL.Geocoder();
  const handleAnalysis = (pt) => {
    let geoc = new BMapGL.Geocoder();
    geoc.getLocation(pt, (rs) => {
      console.log(rs, 'rsss')
      let addComp = rs.addressComponents;
      let addName = `${addComp.province}${addComp.city}${addComp.district}${addComp.street}${addComp.streetNumber}`;
      let addComp = rs.content;
      let addName = `${addComp.address}  ${addComp.poi_desc}`;
      let surroundingPois = rs.surroundingPois;
      if (name) {
        addName += ` ${name}`; // 添加地点名称
      }
      mapRef.current?.map.centerAndZoom(pt, 15);
      mapRef.current?.map.addOverlay(new window.BMapGL.Marker(pt, { title: addName }));
      mapRef.current?.map.centerAndZoom(pt, 15);//地图指向中心
      mapRef.current?.map.clearOverlays();//清除所有标点
      mapRef.current?.map.addOverlay(new BMapGL.Marker(pt, { icon: myIcon }));//添加标点
      setAddressList(surroundingPois);
      console.log(pt, addName, 'pt', 'addName')
      setAddressData({
        pt,
        addName
      })
    });
  };
  console.log(addressList, 'addressList')
  //点击附近地址
  const clickVicinity = (data) => {
    const address = data.address + data.title
    setSelectData({
      uid: data.uid,
      address
    })
    formRef.current.setFieldValue('name', address)
    handleSubmit()
  }
  //使用地址
  const handleUseAddress = (e) => {
    e.stopPropagation()
    console.log(addressData);
  }
  return (
    <div>
@@ -141,21 +136,33 @@
            enableScrollWheelZoom
            onClick={(e) => {
              let pt = e.latlng;
              handleAnalysis(pt, null);
              // addCustomLabel(pt, 'label'); // 添加自定义样式标签
              handleAnalysis(pt);
            }}
          >
            <Marker position={{ lng: 116.402544, lat: 39.928216 }} />
            <NavigationControl />
            <InfoWindow position={{ lng: 116.402544, lat: 39.928216 }} text="内容" title="标题" />
            <CustomOverlay
              position={addressData.pt || new BMapGL.Point(113.26552377996691, 23.143506946336696)}
              offset={{ width: -91, height: -25 }}
            >
              <div className='mapPopconfirm'>
                <div>{addressData.addName}</div>
                <div className='mapPopconfirm-btn' onClick={handleUseAddress}>使用地址</div>
              </div>
            </CustomOverlay>
          </Map>
        </Col>
        <Col span={8}>
          <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div>
          <div style={{ height: 'calc(100% - 64px)', overflowY: 'scroll' }}>
            {addressList?.map((item, index) => (
              <div key={index}>{item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}</div>
          <div style={{ height: '343px', overflowY: 'scroll' }}>
            {addressList?.map(item => (
              <div
                key={item.uid}
                className='mapVicinity'
                onClick={() => { clickVicinity(item) }}
                style={{ color: selectData.uid === item.uid ? '#1A6FB8' : '' }}
              >
                {item.address}&nbsp;&nbsp;&nbsp;&nbsp;{item.title}
                <div className='mapVicinityIcon'></div>
              </div>
            ))}
          </div>
        </Col>
gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx
@@ -47,9 +47,10 @@
  const [fileTip, setFileTip] = useState('0');
  const [detailVisabled, setDetailVisabled] = useState(false);//查看信息弹窗控制
  const [mapView, setMapView] = useState(false);
  const [flagId, setFlagId] = useState(0);//赋予当事人唯一id,用于删除
  const [flagId, setFlagId] = useState(1);//赋予当事人唯一id,用于删除
  const [visible, setVisible] = useState(false);
  const [apply, setApply] = useState(false);
  const [editData, setEditData] = useState(null);
  const addressOptions = [
    { label: '地址1', value: 'address1' },
@@ -370,12 +371,24 @@
  //添加当事人
  const handleAddParty = (value) => {
    console.log(value);
    if (value.id) {
      //编辑
      const newList = fakeData.map(item => {
        if (item.id === value.id) {
          return value
        } else {
          return item
        }
      })
      setFakeData(newList)
      setEditData(null)
    } else {
    setFakeData([...fakeData, {
      ...value,
      id: flagId
    }])
    setFlagId(flagId + 1)
    }
  }
  //删除当事人
@@ -383,6 +396,19 @@
    event.stopPropagation();
    const filterData = fakeData.filter(item => item.id !== value.id)
    setFakeData(filterData)
  }
  //编辑
  const handleEdit = (value) => {
    console.log(value);
    if (value.partyType === 0 || value.partyType === 1) {
      //当事人
      setAddVisabled(true)
    } else {
      //代理人
      setAgentVisible(true)
    }
    setEditData(value)
  }
@@ -402,6 +428,7 @@
          handleCheckParty={handleCheckParty}
          handleAdd={handleAdd}
          handleDeleteParty={handleDeleteParty}
          handleEdit={handleEdit}
        />
      </div>
      <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
@@ -734,6 +761,7 @@
          dialogType={dialogType}
          onClose={() => setAddVisabled(false)}
          handleAddParty={handleAddParty}
          editData={editData}
        />
      </Modal>
      <Modal
@@ -752,6 +780,7 @@
          onClose={() => setAgentVisible(false)}
          fakeData={fakeData}
          dialogType={dialogType}
          editData={editData}
        />
      </Modal>
      <Modal