Browse Source
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop
tags/PMS_V1.0.0_Alpha6
Merge branch 'develop' of http://120.27.195.166:3000/chenglb/PMS_Frontend_v1.0.0 into develop
tags/PMS_V1.0.0_Alpha6
43 changed files with 724 additions and 147 deletions
-
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
-
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
-
2src/pages/FinancialMgm/OrderInquiry/OrderChangeInquiry/index.jsx
-
11src/pages/FinancialMgm/OrderInquiry/ParkingOrderInquiry/index.jsx
-
2src/pages/FinancialMgm/OrderInquiry/ProductOrderInquiry/index.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/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
-
3src/pages/OffPeak/OffPeakShareRecords/ShareParkMgm/infoModal/index.jsx
-
12src/pages/OutRoadMgm/OutSegmentMgm/OutSegment/loadable.jsx
-
5src/pages/SystemMgm/AreaManage/ModalAreaAdd/index.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