From 0e851bfec21faa84a838bf0bab2f0a7de00e9b85 Mon Sep 17 00:00:00 2001 From: dminyi <1301963064@qq.com> Date: Sat, 17 Aug 2024 17:13:47 +0800 Subject: [PATCH] 百度地图的引入+弹窗的修改+假数据的修改 --- gz-customerSystem/package.json | 1 gz-customerSystem/src/views/register/visit/component/map.jsx | 21 ++++ gz-customerSystem/public/index.html | 5 gz-customerSystem/package-lock.json | 19 +++ gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx | 143 +++++++++++++++++++++++++-- gz-customerSystem/src/views/register/visit/preview.jsx | 84 +++++++++------- gz-customerSystem/yarn.lock | 13 ++ 7 files changed, 233 insertions(+), 53 deletions(-) diff --git a/gz-customerSystem/package-lock.json b/gz-customerSystem/package-lock.json index 5d00727..5f9571f 100644 --- a/gz-customerSystem/package-lock.json +++ b/gz-customerSystem/package-lock.json @@ -27,6 +27,7 @@ "import": "0.0.6", "prop-types": "^15.8.1", "react": "^17.0.2", + "react-bmapgl": "^0.2.27", "react-custom-scrollbars": "^4.2.1", "react-dom": "^17.0.2", "react-infinite-scroll-component": "^6.1.0", @@ -15758,6 +15759,11 @@ "node": ">=6.4.0" } }, + "node_modules/mapvgl": { + "version": "1.0.0-beta.191", + "resolved": "https://registry.npmmirror.com/mapvgl/-/mapvgl-1.0.0-beta.191.tgz", + "integrity": "sha512-kbcLSXPSZybMgvJ0RTPEpISC6hpc27P/UwYCFASKLRe6Z7LC0Z11FwNXvQT/jkAK/LdBm2GqsE9i+GQViqRIYg==" + }, "node_modules/material-colors": { "version": "1.2.6", "resolved": "https://registry.npmmirror.com/material-colors/-/material-colors-1.2.6.tgz", @@ -18943,6 +18949,19 @@ "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==", "license": "MIT" }, + "node_modules/react-bmapgl": { + "version": "0.2.27", + "resolved": "https://registry.npmmirror.com/react-bmapgl/-/react-bmapgl-0.2.27.tgz", + "integrity": "sha512-pCVAuYFwG0rU9j1u9sZ4IWNmUP84pFa5y8nq/lxjzMiQdl04iO39NkTdEg2YRLjF2NF11eigcal/Ne1+zPz4ng==", + "dependencies": { + "mapvgl": "^1.0.0-beta.189", + "shallowequal": "^1.1.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-clientside-effect": { "version": "1.2.6", "resolved": "https://registry.npmmirror.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz", diff --git a/gz-customerSystem/package.json b/gz-customerSystem/package.json index 21fa917..da96f23 100644 --- a/gz-customerSystem/package.json +++ b/gz-customerSystem/package.json @@ -22,6 +22,7 @@ "import": "0.0.6", "prop-types": "^15.8.1", "react": "^17.0.2", + "react-bmapgl": "^0.2.27", "react-custom-scrollbars": "^4.2.1", "react-dom": "^17.0.2", "react-infinite-scroll-component": "^6.1.0", diff --git a/gz-customerSystem/public/index.html b/gz-customerSystem/public/index.html index a68910f..ec0ecf8 100644 --- a/gz-customerSystem/public/index.html +++ b/gz-customerSystem/public/index.html @@ -2,8 +2,8 @@ * @Company: hugeInfo * @Author: ldh * @Date: 2022-02-18 14:58:23 - * @LastEditTime: 2023-05-12 19:19:14 - * @LastEditors: lwh + * @LastEditTime: 2024-08-17 11:55:06 + * @LastEditors: dminyi 1301963064@qq.com * @Version: 1.0.0 * @Description: --> @@ -34,6 +34,7 @@ <title>白云区矛盾纠纷多元化解平台</title> <script type="text/javascript" src="http://120.79.193.119:8000/pageoffice/pageoffice.js"></script> <script type="text/javascript" src="./locationSelect.js"></script> + <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=13i28TcWWSbyYIqjHaJceqQbZa1dFlOt"></script> <script> window.onload = () => { document.getElementById('loader-wrapper').remove(); diff --git a/gz-customerSystem/src/views/register/visit/component/map.jsx b/gz-customerSystem/src/views/register/visit/component/map.jsx new file mode 100644 index 0000000..2833d94 --- /dev/null +++ b/gz-customerSystem/src/views/register/visit/component/map.jsx @@ -0,0 +1,21 @@ +/* + * @Author: dminyi 1301963064@qq.com + * @Date: 2024-08-17 14:41:57 + * @LastEditors: dminyi 1301963064@qq.com + * @LastEditTime: 2024-08-17 16:25:27 + * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\map.jsx + * @Description: 地图 + */ +import React from 'react'; +import { Map, Marker, NavigationControl, InfoWindow } from 'react-bmapgl'; +export default function MapView() { + return ( + <div> + <Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11"> + <Marker position={{ lng: 116.402544, lat: 39.928216 }} /> + <NavigationControl /> + <InfoWindow position={{ lng: 113.27, lat: 23.12 }} text="广州市" title="地标" /> + </Map> + </div> + ) +} \ No newline at end of file diff --git a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx index f8413d3..6d50eca 100644 --- a/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx +++ b/gz-customerSystem/src/views/register/visit/component/visitorRegister.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect, useRef } from "react"; import { Row, Col, Space, Tooltip, Button } from 'antd'; -import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload } from '@arco-design/web-react'; +import { Form, Input, Radio, Select, DatePicker, Cascader, Modal, Upload, InputNumber } from '@arco-design/web-react'; import "@arco-design/web-react/dist/css/arco.css"; import MyModal from '../../../../components/MyModal'; import PersonCard from '../../../../components/personCard'; @@ -27,7 +27,7 @@ IconUpload, IconLink, } from '@arco-design/web-react/icon'; - +import MapView from './map' const RadioGroup = Radio.Group;// 根据调解案号获取纠纷登记信息 const FormItem = Form.Item; @@ -108,6 +108,9 @@ const [fileView, setFileView] = useState(); const [selectedAddress, setSelectedAddress] = useState(''); const [fileTip, setFileTip] = useState('0'); + const [mapView, setMapView] = useState(false); + const formRef = useRef(); + const addressOptions = [ { label: '地址1', value: 'address1' }, @@ -132,7 +135,7 @@ const formType = (type) => { if (type === '09_01010-1') { - //自然人 + //申请材料 return ( <> <Col span={24}> @@ -148,17 +151,77 @@ height={158} onDrop={(e) => { }} - onChange={(v) => { v.length > 0 && setFileTip(v.length); console.log(v, 'vvvvvvv') }} + showUploadList={{ + // Please dont remove this comment + fileIcon: <IconLink style={{ color: '#1D2129' }} />, + }} + onChange={(v) => { + setFileTip((prevLength) => { + if (v.length > 0) { + console.log(v, 'vvvvvvv'); + return v.length; + } + return v.length; + }); + }} tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' /> </FormItem> - {fileTip && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>} + {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 申请材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>} + </Col> + </> + ) + } + if (type === '09_01010-2') { + //证据材料 + return ( + <> + <Col span={24}> + <FormItem + field='file' + + > + <Upload + drag + multiple + accept='image/*' + action='/' + height={158} + onDrop={(e) => { + }} + showUploadList={{ + // Please dont remove this comment + fileIcon: <IconLink style={{ color: '#1D2129' }} />, + }} + onChange={(v) => { + setFileTip((prevLength) => { + if (v.length > 0) { + console.log(v, 'vvvvvvv'); + return v.length; + } + return v.length; + }); + }} + tip='支持png、 jpg、excel、word、pdf等格式的文件上传,每次上传大小不超过10M' + /> + + </FormItem> + {fileTip > 0 && <div style={{ position: 'absolute', top: '203px', left: '16px', color: '#86909C' }}> 证据材料累计上传:<span style={{ color: '#1A6FB8' }}>{fileTip}</span></div>} </Col> </> ) } } + + const formItemLayout = { + labelCol: { + span: 4, + }, + wrapperCol: { + span: 17, + }, + }; const peopleMap = { 0: '申请方', @@ -172,7 +235,7 @@ caseNo: 'A20230101', judicNo: '申请材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -193,7 +256,7 @@ caseNo: 'A20230101', judicNo: '证据材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -219,7 +282,7 @@ title: '序号', dataIndex: 'caseNo', key: 'caseNo', - width: 60, + width: 100, render: (text, record, index) => <span>{index + 1}</span>, }, { @@ -234,6 +297,12 @@ dataIndex: 'inputUserName', key: 'perClassName', width: 180, + render: (text) => ( + <> + {text}份 + </> + ) + }, { @@ -350,7 +419,7 @@ //添加申请人: 0、被申请人: 1、代理人: 2 const handleAdd = (type) => { - if(type === 2) { + if (type === 2) { setAgentVisible(true) } else { setAddVisabled(true) @@ -363,8 +432,13 @@ setSelectedAddress(value); }; + + + + return ( <div className='dataSync-page'> + <Col span={24} style={{ display: 'flex', alignItems: 'center' }}> <Space size='small'> <div className='MediationInfo-subTitle' style={{ marginTop: '-9px' }}></div><h5>当事人信息</h5> @@ -418,7 +492,7 @@ </Col> <Col span={8}> <FormItem label='来访人数(人)' field='visitingNumber'> - <Input placeholder='请填写' /> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={8}> @@ -463,6 +537,7 @@ placeholder='选择纠纷发生地的详细地址' searchButton='选择' readOnly={true} // 设置为只读,防止直接编辑 + onSearch={() => setMapView(true)} /> </FormItem> </Col> @@ -480,13 +555,13 @@ </Col> <Col span={8}> <FormItem label='涉及人数(人)' field='peopleNumber'> - <Input placeholder='请填写' /> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={8}> <FormItem label='涉及金额(元)' field='money'> - <Input placeholder='请填写' /> + <InputNumber placeholder='请填写' /> </FormItem> </Col> <Col span={24}> @@ -577,7 +652,8 @@ > <Upload drag - multiple + // multiple + limit={1} accept='image/*' // action='/' onDrop={(e) => { @@ -701,8 +777,47 @@ > <AgentDialog /> </Modal> + <Modal style={{ width: '1200px' }} visible={mapView} onCancel={() => setMapView(false)} footer={null} title='选择纠纷发生地' centered> + <Row gutter={[16, 0]}> + <Col span={16}> + <Form + ref={formRef} + requiredSymbol={false} + layout='inline' + {...formItemLayout} + style={{ marginBottom: '8px' }} + > + <FormItem + label='查询位置:' + field='name' + onChange={(e) => console.log(e.target.value, 'vvv')} + > + <Input placeholder='请输入' style={{ width: '510px' }} /> + </FormItem> + <Button style={{ marginRight: '20px' }}> + 重置 + </Button> + <Button + type="primary" + // onClick={handleSave} + > + 查询 + </Button> + </Form> + <MapView /> + </Col> + <Col span={8}> + <div style={{ color: '#86909C', marginTop: '43px' }}>附近地址</div> + </Col> + + </Row> + </Modal> </div> ) } -export default VisitorRegister; \ No newline at end of file +export default VisitorRegister; + + + + diff --git a/gz-customerSystem/src/views/register/visit/preview.jsx b/gz-customerSystem/src/views/register/visit/preview.jsx index 1c34ede..9caef71 100644 --- a/gz-customerSystem/src/views/register/visit/preview.jsx +++ b/gz-customerSystem/src/views/register/visit/preview.jsx @@ -2,7 +2,7 @@ * @Author: dminyi 1301963064@qq.com * @Date: 2024-08-13 15:19:57 * @LastEditors: dminyi 1301963064@qq.com - * @LastEditTime: 2024-08-16 17:09:12 + * @LastEditTime: 2024-08-17 17:03:50 * @FilePath: \gzDyh\gz-customerSystem\src\views\basicInformation\organization\preview.jsx * @Description: 预览信息 */ @@ -27,7 +27,7 @@ caseNo: 'A20230101', judicNo: '申请材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -48,7 +48,7 @@ caseNo: 'A20230101', judicNo: '证据材料', perClassName: '李晓明的纠纷化解申请表、身份证...', - inputUserName: '张三', + inputUserName: '0', mediateUserName: '2024-7-12 12:00', judgeName: '王五', mediator: '赵六', @@ -74,7 +74,7 @@ title: '序号', dataIndex: 'caseNo', key: 'caseNo', - width: 60, + width: 100, render: (text, record, index) => <span>{index + 1}</span>, }, { @@ -89,6 +89,11 @@ dataIndex: 'inputUserName', key: 'perClassName', width: 180, + render: (text) => ( + <> + {text}份 + </> + ) }, { @@ -134,33 +139,38 @@ <div className="line middle-line"></div> <div className="line right-line"></div> </div> - <table border="1" align="center" cellpadding="8" className="table"> + <table border="1" align="center" cellpadding="6" className="table"> <tr> <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th> <td width='380'><div style={{ display: 'flex' }}><div>李晓明</div><div className="title-personRemark">自然人</div></div></td> <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th> - <td width='380'>19</td> + <td width='380'>13591990202</td> <th bgcolor="#F7F8FA" className="table-title" width='140'>性别</th> - <td>汉</td> + <td>女</td> <td rowspan="4" width="112" height='147' style={{ padding: '0px' }}> - <img border="0" src={person} alt="" style={{ width: '100%', height: '100%' }} /> + <img border="0" src={person} alt="" style={{ + width: '100%', + height: '100%', + objectFit: 'cover', // 保持原始宽高比并填充整个容器 + objectPosition: 'center', // 图片居中显示 + }} /> </td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">证件类型</th> - <td>19970000</td> + <td>身份证</td> <th bgcolor="#F7F8FA" className="table-title">证件号码</th> - <td>团员</td> + <td>410106198802021148</td> <th bgcolor="#F7F8FA" className="table-title">民族</th> - <td>本科</td> + <td>汉族</td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">联系地址</th> - <td>网络工程</td> + <td>广东科贸服务有限公司</td> <th bgcolor="#F7F8FA" className="table-title">户籍地址</th> - <td>淮南师范学院</td> + <td>广州市天河区棠下街120号</td> <th bgcolor="#F7F8FA" className="table-title" rowspan="2" >是否有个人极端倾向</th> - <td rowspan="2" >237483</td> + <td rowspan="2" >否</td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">工作单位</th> @@ -173,49 +183,49 @@ </td> </tr> </table> - <table border="1" align="center" cellpadding="8" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}> + <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}> <tr> <th bgcolor="#F7F8FA" className="table-title" width="120">姓名</th> <td width='380'><div style={{ display: 'flex' }}><div>李巧凤</div><div className="title-personRemark">代理人</div></div></td> <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th> - <td width='380'>19</td> + <td width='380'>13591990202</td> <th bgcolor="#F7F8FA" className="table-title" width="140">性别</th> - <td>汉</td> + <td>女</td> <td rowspan="4" width="112" height='147' style={{ padding: '0px' }}> <img border="0" src={person} alt="" style={{ width: '100%', height: '100%' }} /> </td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">证件类型</th> - <td>19970000</td> + <td>身份证</td> <th bgcolor="#F7F8FA" className="table-title">证件号码</th> - <td>团员</td> + <td>410106198802021148</td> <th bgcolor="#F7F8FA" className="table-title">民族</th> - <td>本科</td> + <td>汉族</td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">联系地址</th> - <td>网络工程</td> + <td>广州市天河区棠下街120号</td> <th bgcolor="#F7F8FA" className="table-title">户籍地址</th> - <td>淮南师范学院</td> + <td>广州市天河区棠下街120号</td> <th bgcolor="#F7F8FA" className="table-title" >是否有个人极端倾向</th> - <td>237483</td> + <td>否</td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">工作单位</th> - <td>玩,拆,装</td> + <td>广东科贸服务有限公司</td> <th bgcolor="#F7F8FA" className="table-title">委托关系</th> - <td>皖</td> + <td>亲属</td> <th bgcolor="#F7F8FA" className="table-title">委托类型</th> - <td>皖</td> + <td>一般授权代理</td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">代理对象</th> - <td>玩,拆,装</td> + <td>李晓明</td> <th bgcolor="#F7F8FA" className="table-title">身份证明材料</th> <td> <a href="your-link-here.html" target="_blank"> - <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf + <img src={link} alt="" className="title-file" />李巧凤身份证明材料.pdf </a> </td> <th bgcolor="#F7F8FA" className="table-title">代理人授权委托书</th> @@ -233,36 +243,36 @@ <div className="line middle-line"></div> <div className="line right-line"></div> </div> - <table border="1" align="center" cellpadding="8" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}> + <table border="1" align="center" cellpadding="6" className="table" style={{ marginTop: '20px', marginBottom: '20px' }}> <tr> <th bgcolor="#F7F8FA" className="table-title" width="120">企业名称</th> <td width='380'><div style={{ display: 'flex' }}><div>广东好又多贸易有限公司</div><div className="title-personRemark">法人</div></div></td> <th bgcolor="#F7F8FA" className="table-title" width="120">联系方式</th> - <td width='380'>19</td> + <td width='380'>13091990202</td> <th bgcolor="#F7F8FA" className="table-title" width="120">企业所在地</th> - <td>汉</td> + <td>广州市天河区棠下街120号</td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">企业类型</th> - <td>19970000</td> + <td>餐饮服务</td> <th bgcolor="#F7F8FA" className="table-title">法定代表人</th> - <td>团员</td> + <td>江照月</td> <th bgcolor="#F7F8FA" className="table-title">统一社会信用代码</th> - <td>本科</td> + <td>914401015454Z</td> </tr> <tr> <th bgcolor="#F7F8FA" className="table-title">住所</th> - <td>网络工程</td> + <td>广州市天河区棠下街120号</td> <th bgcolor="#F7F8FA" className="table-title">企业登记材料</th> <td> <a href="your-link-here.html" target="_blank"> - <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf + <img src={link} alt="" className="title-file" />广东好又多贸易有限公司营业执照副本.pdf </a> </td> <th bgcolor="#F7F8FA" className="table-title" >法定代表人身份证明材料</th> <td> <a href="your-link-here.html" target="_blank"> - <img src={link} alt="" className="title-file" />李晓明身份证明材料.pdf + <img src={link} alt="" className="title-file" />江照月法人身份证明.pdf </a> </td> </tr> diff --git a/gz-customerSystem/yarn.lock b/gz-customerSystem/yarn.lock index 3c9dcb7..d8b2953 100644 --- a/gz-customerSystem/yarn.lock +++ b/gz-customerSystem/yarn.lock @@ -8427,6 +8427,11 @@ tinyqueue "^2.0.3" vt-pbf "^3.1.1" +mapvgl@^1.0.0-beta.189: + version "1.0.0-beta.191" + resolved "https://registry.npmmirror.com/mapvgl/-/mapvgl-1.0.0-beta.191.tgz" + integrity sha512-kbcLSXPSZybMgvJ0RTPEpISC6hpc27P/UwYCFASKLRe6Z7LC0Z11FwNXvQT/jkAK/LdBm2GqsE9i+GQViqRIYg== + material-colors@^1.2.1: version "1.2.6" resolved "https://registry.npmmirror.com/material-colors/-/material-colors-1.2.6.tgz" @@ -10277,6 +10282,14 @@ regenerator-runtime "^0.13.9" whatwg-fetch "^3.6.2" +react-bmapgl@^0.2.27: + version "0.2.27" + resolved "https://registry.npmmirror.com/react-bmapgl/-/react-bmapgl-0.2.27.tgz" + integrity sha512-pCVAuYFwG0rU9j1u9sZ4IWNmUP84pFa5y8nq/lxjzMiQdl04iO39NkTdEg2YRLjF2NF11eigcal/Ne1+zPz4ng== + dependencies: + mapvgl "^1.0.0-beta.189" + shallowequal "^1.1.0" + react-clientside-effect@^1.2.6: version "1.2.6" resolved "https://registry.npmmirror.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz" -- Gitblit v1.8.0