Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh into master
2 files added
6 files modified
| | |
| | | * 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 => { |
| | |
| | | <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> |
| | |
| | | padding: 0px 4px; |
| | | 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 { |
| | | |
| | | } |
| | | } |
| | |
| | | const [visitList, setVisitList] = useState([]) |
| | | |
| | | useEffect(() => { |
| | | //过滤代理人 |
| | | setVisitList(props.fakeData.filter(item => { |
| | | console.log(item,props.dialogType); |
| | | if (props.dialogType === 2) { |
| | | return item.partyType === 0 |
| | | } else { |
| | | return item.partyType === 1 |
| | | } |
| | | })) |
| | | }, [props.fakeData]) |
| | | if (props.editData) { |
| | | //编辑 |
| | | formRef.current.setFieldsValue({ |
| | | ...props.editData |
| | | }) |
| | | //过滤代理人 |
| | | setVisitList(props.fakeData.filter(item => { |
| | | 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 |
| | | } |
| | | })) |
| | | } |
| | | }, []) |
| | | |
| | | //保存信息 |
| | | const handleSave = () => { |
| | | if (formRef.current) { |
| | | formRef.current.validate(undefined, (errors, values) => { |
| | | if (!errors) { |
| | | props.handleAddParty({ |
| | | ...values, |
| | | partyType: props.dialogType, |
| | | perClassName: props.dialogType === 2 ? '申请方代理人' : '被申请方代理人', |
| | | }) |
| | | if (props.editData) { |
| | | props.handleAddParty({ |
| | | ...props.editData, |
| | | ...values, |
| | | }) |
| | | } else { |
| | | props.handleAddParty({ |
| | | ...values, |
| | | partyType: props.dialogType, |
| | | perClassName: props.dialogType === 2 ? '申请方代理人' : '被申请方代理人', |
| | | }) |
| | | } |
| | | props.onClose() |
| | | } |
| | | }); |
| | |
| | | requiredSymbol={false} |
| | | initialValues={{ |
| | | }}//默认值 |
| | | scrollToFirstError |
| | | > |
| | | <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}> |
| | | <Col span={24}> |
| | |
| | | <Col span={12}> |
| | | <FormItem |
| | | label={(<div style={{ display: 'flex' }}>代理对象<div className="must">必填</div></div>)} |
| | | rules={[{ required: true }]} |
| | | rules={[{ required: true, message: '请选择代理对象' }]} |
| | | field='dailimap' |
| | | > |
| | | <CheckboxGroup |
| | |
| | | className="dialogPrimary" |
| | | onClick={handleSave} |
| | | > |
| | | 保存信息 |
| | | 保存 |
| | | </Button> |
| | | <Button className="dialogBack"> |
| | | 重置 |
| | |
| | | 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) { |
| | |
| | | if (formRef.current) { |
| | | formRef.current.validate(undefined, (errors, values) => { |
| | | if (!errors) { |
| | | props.handleAddParty({ |
| | | ...values, |
| | | partyType: props.dialogType, |
| | | perClass: perClass, |
| | | perClassName: props.dialogType === 0 ? '申请方当事人' : '被申请方当事人' |
| | | }) |
| | | if (props.editData) { |
| | | props.handleAddParty({ |
| | | ...props.editData, |
| | | ...values |
| | | }) |
| | | } else { |
| | | props.handleAddParty({ |
| | | ...values, |
| | | partyType: props.dialogType, |
| | | perClass: perClass, |
| | | perClassName: props.dialogType === 0 ? '申请方当事人' : '被申请方当事人' |
| | | }) |
| | | } |
| | | props.onClose() |
| | | } |
| | | }); |
| | |
| | | requiredSymbol={false} |
| | | initialValues={{ |
| | | }}//默认值 |
| | | scrollToFirstError |
| | | > |
| | | <Row gutter={[32, 0]} style={{ margin: '0 -10px' }}>{formType(perClass)}</Row> |
| | | </Form> |
| | |
| | | className="dialogPrimary" |
| | | onClick={handleSave} |
| | | > |
| | | 保存信息 |
| | | 保存 |
| | | </Button> |
| | | <Button className="dialogBack"> |
| | | 重置 |
| | |
| | | * @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; |
| | | |
| | |
| | | }, |
| | | }; |
| | | |
| | | // 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('您输入的地址没有解析到结果!'); |
| | | } |
| | |
| | | } |
| | | }; |
| | | |
| | | |
| | | |
| | | // 解析地址为中文 |
| | | 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> |
| | |
| | | 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} {item.title}</div> |
| | | <div style={{ color: '#86909C', marginTop: '43px' }} >附近地址</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} {item.title} |
| | | <div className='mapVicinityIcon'></div> |
| | | </div> |
| | | ))} |
| | | </div> |
| | | </Col> |
| | |
| | | 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' }, |
| | |
| | | |
| | | //添加当事人 |
| | | const handleAddParty = (value) => { |
| | | console.log(value); |
| | | setFakeData([...fakeData, { |
| | | ...value, |
| | | id: flagId |
| | | }]) |
| | | setFlagId(flagId + 1) |
| | | 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) |
| | | } |
| | | } |
| | | |
| | | //删除当事人 |
| | |
| | | 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) |
| | | } |
| | | |
| | | |
| | |
| | | handleCheckParty={handleCheckParty} |
| | | handleAdd={handleAdd} |
| | | handleDeleteParty={handleDeleteParty} |
| | | handleEdit={handleEdit} |
| | | /> |
| | | </div> |
| | | <Col span={24} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}> |
| | |
| | | dialogType={dialogType} |
| | | onClose={() => setAddVisabled(false)} |
| | | handleAddParty={handleAddParty} |
| | | editData={editData} |
| | | /> |
| | | </Modal> |
| | | <Modal |
| | |
| | | onClose={() => setAgentVisible(false)} |
| | | fakeData={fakeData} |
| | | dialogType={dialogType} |
| | | editData={editData} |
| | | /> |
| | | </Modal> |
| | | <Modal |