Browse Source
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0.git into develop
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0.git into develop
# Conflicts: # src/assets/css/mixin.scsstags/PMS_V1.0.0_Alpha6
59 changed files with 766 additions and 168 deletions
-
3src/assets/css/mixin.scss
-
144src/assets/fonts/font_pda/demo_index.html
-
30src/assets/fonts/font_pda/iconfont.css
-
2src/assets/fonts/font_pda/iconfont.js
-
42src/assets/fonts/font_pda/iconfont.json
-
BINsrc/assets/fonts/font_pda/iconfont.ttf
-
BINsrc/assets/fonts/font_pda/iconfont.woff
-
BINsrc/assets/fonts/font_pda/iconfont.woff2
-
BINsrc/assets/images/search-map.png
-
4src/components/Export/ExportBtnNew/index.jsx
-
13src/components/SelectGaodeLngLat/index.jsx
-
3src/components/SelectGaodeLngLat/index.scss
-
BINsrc/components/SelectGaodeLngLat2/blue-point.png
-
231src/components/SelectGaodeLngLat2/index.jsx
-
29src/components/SelectGaodeLngLat2/index.scss
-
2src/components/index.jsx
-
2src/pages/DataAnalysisPrediction/ParkingBusinessAly/CarTypeAly/loadable.jsx
-
30src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyDuration/loadable.jsx
-
4src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyOverview/index.scss
-
2src/pages/DataAnalysisPrediction/ParkingBusinessAly/ParkingAlyOverview/loadable.jsx
-
4src/pages/DataAnalysisPrediction/ParkingIncomeAly/ArrearageAly/PlateArrear/index.jsx
-
4src/pages/FinancialMgm/ExceptionDeal/DealRecordAudit/index.jsx
-
4src/pages/FinancialMgm/ExceptionDeal/DealRecordList/index.jsx
-
2src/pages/FinancialMgm/ExceptionDeal/StartExceptionDeal/index.jsx
-
2src/pages/FinancialMgm/OrderInquiry/OrderChangeInquiry/index.jsx
-
11src/pages/FinancialMgm/OrderInquiry/ParkingOrderInquiry/index.jsx
-
2src/pages/FinancialMgm/OrderInquiry/ProductOrderInquiry/index.jsx
-
12src/pages/InRoadMgm/EquipmentMgm/NvrMgm/loadable.jsx
-
4src/pages/InRoadMgm/InRoadOverview/loadable.jsx
-
2src/pages/InRoadMgm/PersonMgm/Performance/SalesStat/loadable.jsx
-
71src/pages/InRoadMgm/RecordInquiry/ParkRecordTotal/loadable.jsx
-
2src/pages/InRoadMgm/RoadMgm/ConfigRoad/loadable.jsx
-
3src/pages/MerchantMgm/FunctionMgm/loadable.jsx
-
3src/pages/NewEnergy/ChargeDeviceMgm/ElectricModal/loadable.jsx
-
4src/pages/NewEnergy/ChargeStationMgm/index.scss
-
45src/pages/NewEnergy/ChargeStationMgm/loadable.jsx
-
7src/pages/NewEnergy/ChargingMgm/BillingRule/index.scss
-
28src/pages/NewEnergy/ChargingMgm/BillingRule/loadable.jsx
-
3src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/index.scss
-
18src/pages/NewEnergy/ChargingMgm/IllegalRuleConfigMgm/loadable.jsx
-
7src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/index.scss
-
16src/pages/NewEnergy/ChargingMgm/OrderRuleMgm/loadable.jsx
-
26src/pages/NewEnergy/NewEnergyOverview/Map.jsx
-
18src/pages/NewEnergy/NewEnergyOverview/index.scss
-
10src/pages/NewEnergy/NewEnergyOverview/loadable.jsx
-
26src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/index.scss
-
8src/pages/NewEnergy/RealtimeMonitor/ChargerMonitor/loadable.jsx
-
8src/pages/OffPeak/OffPeakShareRecords/ShareParkMgm/infoModal/index.jsx
-
2src/pages/OutRoadMgm/OutPersonMgm/TollCollector/index.jsx
-
2src/pages/OutRoadMgm/OutPersonMgm/TransitionReport/index.jsx
-
2src/pages/OutRoadMgm/OutRemoteDevice/index.jsx
-
12src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx
-
5src/pages/SystemMgm/AreaManage/ModalAreaAdd/index.jsx
-
3src/pages/SystemMgm/BusinessConfig/BusinessConf/index.scss
-
2src/pages/SystemMgm/OrgnizationMgm/loadable.jsx
-
5src/pages/SystemMgm/RoleMgm/index.scss
-
4src/pages/SystemMgm/RoleMgm/loadable.jsx
-
2src/pages/SystemMgm/SystemLog/loadable.jsx
-
4src/services/InroadMgm/RoadMgm/RoadMgm.js
144
src/assets/fonts/font_pda/demo_index.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
30
src/assets/fonts/font_pda/iconfont.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
src/assets/fonts/font_pda/iconfont.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
After Width: 20 | Height: 20 | Size: 600 B |
After Width: 48 | Height: 54 | Size: 2.3 KiB |
@ -0,0 +1,231 @@ |
|||
import React, { useState, useEffect, useRef } from "react"; |
|||
import { Button, Input, Modal, message, AutoComplete } from "antd"; |
|||
import L from "leaflet"; |
|||
import "leaflet/dist/leaflet.css"; |
|||
import "leaflet.chinatmsproviders"; |
|||
import ajax from "@/services"; |
|||
import "./index.scss"; |
|||
import Rerm from "./blue-point.png"; |
|||
let timer = null; |
|||
function SelectGaodeLngLat(props) { |
|||
const { |
|||
getLntLat = () => { }, |
|||
onChange = () => { }, |
|||
_lngLat = [], // 数据回填 经纬度 |
|||
_address = "", // 数据回填 地址 |
|||
} = props; |
|||
const mapConfig = { |
|||
center: sysConfig.map.center, |
|||
zoom: sysConfig.map.zoom, |
|||
zooms: sysConfig.map.zooms, |
|||
maxZoom: sysConfig.map.zooms[1], |
|||
minZoom: sysConfig.map.zooms[0], |
|||
mapTileHost: sysConfig.map.mapTileHost, |
|||
zoomOffset: sysConfig.map.zoomOffset, |
|||
mapTileType: sysConfig.map.mapTileType, |
|||
}; |
|||
const [visible, setVisible] = useState(false); |
|||
const [lnglat, setLnglat] = useState([]); |
|||
const [address, setAddress] = useState(""); |
|||
const [searchLnglatValue, setSearchLnglatValue] = useState([]); |
|||
const [getLngLabel, setGetLngLabel] = useState([]) |
|||
const [map, setMap] = useState(null); |
|||
const [markers, setMarkers] = useState(null); |
|||
const mapRef = useRef(null); |
|||
|
|||
const searchLnglat = (values) => { |
|||
clearTimeout(timer); |
|||
timer = setTimeout(() => { |
|||
ajax.handleLng({ |
|||
keywords: values, |
|||
}).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setGetLngLabel( |
|||
res?.data.map((ele) => { |
|||
return { |
|||
...ele, |
|||
label: ( |
|||
<div className="labds"> |
|||
<span>{ele.label}</span> |
|||
</div> |
|||
), |
|||
value: ele.label, |
|||
values: ele.value |
|||
}; |
|||
}) |
|||
); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}, 1000); |
|||
|
|||
}; |
|||
//选择 |
|||
const onSelect = (data) => { |
|||
let add = getLngLabel.filter((ele) => ele.value == data)[0] || []; |
|||
setLnglat([add.lng, add.lat]); |
|||
}; |
|||
function getLocationMessage(v) { |
|||
// const lat_lng = lnglat.reverse().join(","); |
|||
const lat_lng = v ? v.join(",") : lnglat.join(","); |
|||
ajax.getLocationNameByLngLat({ lat_lng }).then((res) => { |
|||
if (res.status === 20000) { |
|||
setAddress(res.data.address); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}); |
|||
} |
|||
// 打开弹窗 |
|||
const open = () => { |
|||
setVisible(true) |
|||
} |
|||
// 保存 |
|||
const save = () => { |
|||
setVisible(false) |
|||
onChange(address); |
|||
getLntLat(lnglat); |
|||
getLocationMessage(); |
|||
} |
|||
// 地图 |
|||
const initMap = () => { |
|||
let _map = new AMap.Map("mapid", { |
|||
resizeEnable: true, |
|||
layers: [ |
|||
new AMap.TileLayer.Satellite(), |
|||
new AMap.TileLayer.RoadNet() |
|||
] |
|||
}); |
|||
_map.setCenter([mapConfig.center[1], mapConfig.center[0]], mapConfig.zoom); |
|||
setMap(_map) |
|||
if (_lngLat && _lngLat.length) { |
|||
let marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(parseFloat(_lngLat[0]), parseFloat(_lngLat[1])), |
|||
content: markerContent, |
|||
offset: new AMap.Pixel(-24, -45), |
|||
}); |
|||
_map.add(marker); |
|||
setMarkers(marker); |
|||
setTimeout(() => { |
|||
_map.setCenter(new AMap.LngLat(parseFloat(_lngLat[0]), parseFloat(_lngLat[1]))); |
|||
}, 800); |
|||
} |
|||
_map.on('click', function (e) { |
|||
setLnglat([e.lnglat.lng.toFixed(4), e.lnglat.lat.toFixed(4)]); |
|||
}) |
|||
mapRef.current = map |
|||
}; |
|||
const markerContent = `<div class="custom-content-marker"> |
|||
<img src='${Rerm}' /> |
|||
</div>`; |
|||
// 添加标记 |
|||
const addMarker = (data) => { |
|||
// console.log('marker',data); |
|||
if (markers) { |
|||
map.remove(markers); |
|||
} |
|||
if (data.length == 0) return |
|||
let marker = new AMap.Marker({ |
|||
position: new AMap.LngLat(parseFloat(data[0]), parseFloat(data[1])), |
|||
content: markerContent, |
|||
offset: new AMap.Pixel(-24, -45), |
|||
}); |
|||
map.add(marker); |
|||
setMarkers(marker); |
|||
setTimeout(() => { |
|||
map.setCenter(new AMap.LngLat(parseFloat(data[0]), parseFloat(data[1]))); |
|||
}, 800); |
|||
}; |
|||
|
|||
useEffect(() => { |
|||
if (visible) { |
|||
setAddress(_address); |
|||
setLnglat(_lngLat); |
|||
setTimeout(() => { |
|||
initMap() |
|||
}, 500) |
|||
} |
|||
}, [visible]); |
|||
|
|||
useEffect(() => { |
|||
lnglat?.length > 0 && getLocationMessage(lnglat) |
|||
if (map) { |
|||
addMarker(lnglat); // 添加点位 |
|||
} |
|||
}, [lnglat]); |
|||
|
|||
useEffect(() => { |
|||
setTimeout(() => { |
|||
if (searchLnglatValue.length === 0) return; |
|||
mapRef.current.setView(searchLnglatValue, 13); |
|||
}, 800) |
|||
}, [searchLnglatValue]); |
|||
|
|||
return ( |
|||
<div className="SelectLnglat"> |
|||
<Button |
|||
onClick={open} |
|||
type="primary" |
|||
> |
|||
打开 |
|||
</Button> |
|||
<Modal |
|||
className="map-modal" |
|||
open={visible} |
|||
destroyOnClose |
|||
width={1000} |
|||
footer={false} |
|||
onCancel={() => { setVisible(false) }} |
|||
> |
|||
<div |
|||
style={{ |
|||
width: "100%", |
|||
height: "500px", |
|||
}} |
|||
> |
|||
<div |
|||
id="mapid" |
|||
className="map" |
|||
style={{ |
|||
height: "100%", |
|||
width: "100%", |
|||
}} |
|||
></div> |
|||
</div> |
|||
|
|||
<div className="bottom-input"> |
|||
<div className="input-search"> |
|||
<AutoComplete |
|||
options={getLngLabel} |
|||
placeholder={address ? address : "请选择地址"} |
|||
onSearch={searchLnglat} |
|||
onSelect={onSelect} |
|||
// enterButton={"搜索"} |
|||
style={{ width: 300 }} |
|||
></AutoComplete> |
|||
</div> |
|||
<div className="result-search"> |
|||
<label>已选择的经纬度:</label> |
|||
<Input value={lnglat} /> |
|||
</div> |
|||
<div style={{ marginLeft: "40px" }}> |
|||
<Button |
|||
type="primary" |
|||
onClick={save} |
|||
> |
|||
保存 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
export default SelectGaodeLngLat; |
@ -0,0 +1,29 @@ |
|||
.SelectLnglat { |
|||
|
|||
} |
|||
.map-modal { |
|||
.ant-modal-body { |
|||
border-radius: 4px; |
|||
} |
|||
.ant-modal-close-x { |
|||
width: 30px; |
|||
height: 30px; |
|||
line-height: 30px; |
|||
} |
|||
} |
|||
.bottom-input { |
|||
display: flex; |
|||
margin: 10px 0 0 0; |
|||
.input-search { |
|||
margin: 0 10px 0 0; |
|||
width: 300px; |
|||
} |
|||
.result-search{ |
|||
label{ |
|||
width: 160px; |
|||
line-height: 32px; |
|||
height:32px; |
|||
} |
|||
display: flex; |
|||
} |
|||
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue