地图更新
This commit is contained in:
parent
7f2c968e00
commit
18870b33f2
|
|
@ -102,3 +102,10 @@ export function selectDeptByAreaId(areaId) {
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 根据运营区id获取运营商
|
||||||
|
export function getleaderboard(type,timeLimit) {
|
||||||
|
return request({
|
||||||
|
url: '/index/admim/leaderboard?type='+type+'&timeLimit='+timeLimit,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -132,6 +132,14 @@ export function reboot(data){
|
||||||
method: 'post'
|
method: 'post'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 获取轨迹
|
||||||
|
export function gettrajectory(data){
|
||||||
|
console.log(data, 'data');
|
||||||
|
return request({
|
||||||
|
url: '/system/device/trajectory?sn=' + data.sn + '&startTime=' + data.startTime + '&endTime=' + data.endTime,
|
||||||
|
method: 'post'
|
||||||
|
});
|
||||||
|
}
|
||||||
// 根据sn查询设备
|
// 根据sn查询设备
|
||||||
export function getDeviceBySn(sn){
|
export function getDeviceBySn(sn){
|
||||||
return request({
|
return request({
|
||||||
|
|
|
||||||
|
|
@ -86,7 +86,7 @@ export default {
|
||||||
console.log("轨迹=====地图已销毁");
|
console.log("轨迹=====地图已销毁");
|
||||||
} else {
|
} else {
|
||||||
console.log("轨迹=====地图实例不存在，无需销毁");
|
console.log("轨迹=====地图实例不存在，无需销毁");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showMarkers() {
|
showMarkers() {
|
||||||
if (this.show) {
|
if (this.show) {
|
||||||
|
|
|
||||||
616
src/components/Map/location/LocationMaps.vue
Normal file
616
src/components/Map/location/LocationMaps.vue
Normal file
|
|
@ -0,0 +1,616 @@
|
||||||
|
<template>
|
||||||
|
<div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
|
||||||
|
<div id="container"></div>
|
||||||
|
<el-row class="search-row" :gutter="8" type="flex">
|
||||||
|
</el-row>
|
||||||
|
<div id="panel"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
|
import globalConfig from '@/utils/config/globalConfig'
|
||||||
|
import { debounce } from '@/utils'
|
||||||
|
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
|
||||||
|
import { getArea } from '@/api/system/area'
|
||||||
|
import { listParking } from '@/api/system/parking'
|
||||||
|
import { getDeviceBySn } from '@/api/system/device'
|
||||||
|
export default {
|
||||||
|
name: "LocationMap",
|
||||||
|
components: { AreaTextSelect },
|
||||||
|
props: {
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "100%"
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: "100%"
|
||||||
|
},
|
||||||
|
initLng: {
|
||||||
|
type: String,
|
||||||
|
default: '120.250452'
|
||||||
|
},
|
||||||
|
initLat: {
|
||||||
|
type: String,
|
||||||
|
default: '27.101745'
|
||||||
|
},
|
||||||
|
status: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
},
|
||||||
|
onlineStatus: {
|
||||||
|
type: String,
|
||||||
|
default: '0'
|
||||||
|
},
|
||||||
|
deviceSn: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
tripRouteStr: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
AMap: null,
|
||||||
|
map: null, // 地图实例
|
||||||
|
placeSearch: null, // POI查询
|
||||||
|
geocoder: null, // 逆地理编码
|
||||||
|
loading: false,
|
||||||
|
keyword: null,
|
||||||
|
markers: [],
|
||||||
|
area: {
|
||||||
|
// province: '福建省',
|
||||||
|
// city: '宁德市',
|
||||||
|
},
|
||||||
|
// area:{},
|
||||||
|
parkingList:[],
|
||||||
|
noParkingList:[],
|
||||||
|
noridingList:[],
|
||||||
|
labels: [],
|
||||||
|
areaId:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.initAMap();
|
||||||
|
// this.getAreas(this.areaId)
|
||||||
|
|
||||||
|
getDeviceBySn(this.deviceSn).then(response => {
|
||||||
|
this.areaId=response.data.areaId
|
||||||
|
console.log(response,'responseresponse');
|
||||||
|
this.getAreas(this.areaId)
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
console.log("轨迹=====组件将被销毁");
|
||||||
|
this.destroyMap();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
destroyMap() {
|
||||||
|
if (this.map) {
|
||||||
|
console.log("位置=====地图实例存在，销毁地图...");
|
||||||
|
this.map.destroy();
|
||||||
|
console.log("位置=====地图已销毁");
|
||||||
|
} else {
|
||||||
|
console.log("位置=====地图实例不存在，无需销毁");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// onChangeArea() {
|
||||||
|
// this.loadPlaceSearch(this.area.province, this.area.city);
|
||||||
|
// if (this.keyword != null) {
|
||||||
|
// this.doPlaceSearch(this.keyword);
|
||||||
|
// } else {
|
||||||
|
// let city = this.area.city === '市辖区' ? this.area.province : this.area.city;
|
||||||
|
// this.doPlaceSearch(city + '人民政府');
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
async getAreas(areaId) {
|
||||||
|
getArea(this.areaId).then(response => {
|
||||||
|
|
||||||
|
console.log(response,'responseresponse');
|
||||||
|
this.area = response.data;
|
||||||
|
|
||||||
|
|
||||||
|
listParking({ areaId: this.area.areaId }).then(response => {
|
||||||
|
let list = response.rows;
|
||||||
|
console.log(list,'listlistlist');
|
||||||
|
list.forEach(item => {
|
||||||
|
if (item.type == '1') {
|
||||||
|
this.parkingList.push(item);
|
||||||
|
} else if (item.type == '2') {
|
||||||
|
this.noParkingList.push(item);
|
||||||
|
} else if (item.type == '3') {
|
||||||
|
this.noridingList.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.initAMap();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
initAMap() {
|
||||||
|
AMapLoader.load({
|
||||||
|
key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||||
|
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||||
|
plugins: ["AMap.PlaceSearch"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||||
|
}).then((AMap) => {
|
||||||
|
this.AMap = AMap;
|
||||||
|
this.map = new AMap.Map("container", {
|
||||||
|
// 设置地图容器id
|
||||||
|
viewMode: "3D", // 是否为3D地图模式
|
||||||
|
zoom: 16, // 初始化地图级别
|
||||||
|
center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
|
||||||
|
});
|
||||||
|
// this.map.on('click', this.onClickMap);
|
||||||
|
|
||||||
|
// POI
|
||||||
|
// this.loadPlaceSearch(this.area.province, this.area.city);
|
||||||
|
|
||||||
|
// 逆地理编码
|
||||||
|
// this.loadGeoCoder();
|
||||||
|
this.addArea(JSON.parse( this.area.boundaryStr) || []);
|
||||||
|
//停车区
|
||||||
|
this.parkingList.forEach(parking => {
|
||||||
|
this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
|
||||||
|
this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
|
||||||
|
});
|
||||||
|
//禁停区
|
||||||
|
this.noParkingList.forEach(noparking => {
|
||||||
|
this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
|
||||||
|
this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
|
||||||
|
});
|
||||||
|
//禁行区
|
||||||
|
this.noridingList.forEach(noriding => {
|
||||||
|
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
|
||||||
|
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
|
||||||
|
});
|
||||||
|
// 加载初始地址
|
||||||
|
this.initMarker();
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.trajectory()
|
||||||
|
// }, 500);
|
||||||
|
|
||||||
|
|
||||||
|
}).catch((e) => {
|
||||||
|
console.log("地图加载失败！！！");
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
trajectory() {
|
||||||
|
console.log('轨迹调用了',this.tripRouteStr);
|
||||||
|
this.line = JSON.parse(this.tripRouteStr)
|
||||||
|
console.log("this.line================" + this.line)
|
||||||
|
let abb;
|
||||||
|
try {
|
||||||
|
abb = JSON.parse(this.tripRouteStr);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error parsing tripRouteStr:", error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let latitude = parseFloat(abb[0][1]);
|
||||||
|
let longitude = parseFloat(abb[0][0]);
|
||||||
|
let latitude1 = parseFloat(abb[abb.length - 1][1]);
|
||||||
|
let longitude1 = parseFloat( abb[abb.length - 1][0]);
|
||||||
|
|
||||||
|
this.marker = new AMap.Marker({
|
||||||
|
map: this.map,
|
||||||
|
position: [longitude, latitude],
|
||||||
|
icon: new AMap.Icon({
|
||||||
|
size: new AMap.Size(25, 38), // 图标大小
|
||||||
|
image: "https://lxnapi.ccttiot.com/bike/img/static/u06paUGiHLvL08Pw7BGr",
|
||||||
|
imageSize: new AMap.Size(25, 38) // 图标图片大小
|
||||||
|
}),
|
||||||
|
offset: new AMap.Pixel(-12.5, -19.5),
|
||||||
|
});
|
||||||
|
this.marker = new AMap.Marker({
|
||||||
|
map: this.map,
|
||||||
|
position: [longitude1, latitude1],
|
||||||
|
icon: new AMap.Icon({
|
||||||
|
size: new AMap.Size(25, 38), // 图标大小
|
||||||
|
image: "https://lxnapi.ccttiot.com/bike/img/static/uwpAj9vYtPRmhtTOtflx",
|
||||||
|
imageSize: new AMap.Size(25, 38) // 图标图片大小
|
||||||
|
}),
|
||||||
|
offset: new AMap.Pixel(-12.5, -19.5),
|
||||||
|
});
|
||||||
|
// console.log(latitude,longitude,'longitudelongitudelongitude');
|
||||||
|
let line = this.line;
|
||||||
|
this.marker = new AMap.Marker({
|
||||||
|
map: this.map,
|
||||||
|
position: line[0],
|
||||||
|
icon: new AMap.Icon({
|
||||||
|
image: globalConfig.icon.trajectory,
|
||||||
|
size: new AMap.Size(25, 39), // 设置图标的宽高
|
||||||
|
imageSize: new AMap.Size(25, 39) // 设置图标的实际显示尺寸
|
||||||
|
}),
|
||||||
|
offset: new AMap.Pixel(-12.5, -19.5),
|
||||||
|
autoRotation: true,
|
||||||
|
angle: 90
|
||||||
|
});
|
||||||
|
// 绘制轨迹
|
||||||
|
let polyline = new AMap.Polyline({
|
||||||
|
map: this.map,
|
||||||
|
path: line,
|
||||||
|
showDir: true,
|
||||||
|
strokeColor: "#28F", //线颜色
|
||||||
|
// strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 6 //线宽
|
||||||
|
// strokeStyle: "solid" //线样式
|
||||||
|
});
|
||||||
|
|
||||||
|
let passedPolyline = new AMap.Polyline({
|
||||||
|
map: this.map,
|
||||||
|
// path: this.lineArr,
|
||||||
|
strokeColor: "#AF5", //线颜色
|
||||||
|
// strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 6 //线宽
|
||||||
|
// strokeStyle: "solid" //线样式
|
||||||
|
});
|
||||||
|
|
||||||
|
this.marker.on("moving", function (e) {
|
||||||
|
passedPolyline.setPath(e.passedPath);
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.setFitView();
|
||||||
|
},
|
||||||
|
initMarker() {
|
||||||
|
this.removeAllMarker();
|
||||||
|
if (this.initLng != null && this.initLat != null) {
|
||||||
|
// this.getGeoAddress(this.initLng, this.initLat).then(res => {
|
||||||
|
// 标点
|
||||||
|
this.removeAllMarker();
|
||||||
|
console.log("添加标记点")
|
||||||
|
console.log("====",this.initLng, this.initLat,this.deviceSn, this.status, this.onlineStatus)
|
||||||
|
this.addMarker(this.initLng, this.initLat, this.deviceSn, this.status, this.onlineStatus);
|
||||||
|
// this.$emit('map-geo', res, this.initLng, this.initLat);
|
||||||
|
|
||||||
|
// 地区
|
||||||
|
// let component = res.regeocode.addressComponent;
|
||||||
|
// this.area = {
|
||||||
|
// province: component.province,
|
||||||
|
// city: component.city === '' ? '市辖区' : component.city,
|
||||||
|
// }
|
||||||
|
// }).finally(() => {
|
||||||
|
// this.loading = false;
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addMarker2(parking, icon, title, color) {
|
||||||
|
let marker = new AMap.Marker({
|
||||||
|
map: this.map,
|
||||||
|
icon: new AMap.Icon({
|
||||||
|
image: icon,
|
||||||
|
size: new AMap.Size(25, 36), // 设置图标的宽高
|
||||||
|
imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
|
||||||
|
}),
|
||||||
|
position: [parking.longitude, parking.latitude],
|
||||||
|
offset: new AMap.Pixel(-12.5, -36)
|
||||||
|
});
|
||||||
|
|
||||||
|
this.markers.push(marker);
|
||||||
|
|
||||||
|
// console.log("title============="+title)
|
||||||
|
// 创建一个 Text 实例来显示标题
|
||||||
|
let text = new AMap.Text({
|
||||||
|
text: title,
|
||||||
|
anchor: 'center', // 设置文本的锚点
|
||||||
|
position: [parking.longitude, parking.latitude],
|
||||||
|
offset: new AMap.Pixel(0, -50),
|
||||||
|
style: {
|
||||||
|
'background-color': color, // 背景颜色为蓝色
|
||||||
|
'border': 'none', // 边框颜色与背景一致
|
||||||
|
'border-radius': '5px', // 圆角 5px
|
||||||
|
'color': 'white', // 文字颜色为白色
|
||||||
|
'font-size': '12px', // 字体大小
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将文本标签添加到地图实例
|
||||||
|
this.map.add(text);
|
||||||
|
// console.log("text=============",text)
|
||||||
|
this.labels.push(text)
|
||||||
|
},
|
||||||
|
addMarker: function(lng, lat, title, status, onlineStatus) {
|
||||||
|
//创建一个 Marker 实例：
|
||||||
|
console.log('title===========' + title)
|
||||||
|
let icon = this.formarStatus(status, onlineStatus)
|
||||||
|
console.log('icon===========' + icon)
|
||||||
|
let marker = new AMap.Marker({
|
||||||
|
position: new AMap.LngLat(lng, lat), //经纬度对象
|
||||||
|
icon: new AMap.Icon({
|
||||||
|
image: icon,
|
||||||
|
size: new AMap.Size(25, 30), // 设置图标的宽高
|
||||||
|
imageSize: new AMap.Size(25, 30) // 设置图标的实际显示尺寸
|
||||||
|
}),
|
||||||
|
title: title,
|
||||||
|
offset: new AMap.Pixel(-12.5, -35)
|
||||||
|
})
|
||||||
|
|
||||||
|
//将创建的点标记添加到已有的地图实例：
|
||||||
|
this.map.add(marker)
|
||||||
|
this.markers.push(marker)
|
||||||
|
console.log();
|
||||||
|
|
||||||
|
// 创建一个 Text 实例来显示标题
|
||||||
|
let text = new AMap.Text({
|
||||||
|
text: title,
|
||||||
|
anchor: 'center', // 设置文本的锚点
|
||||||
|
position: new AMap.LngLat(lng, lat), // 经纬度对象
|
||||||
|
offset: new AMap.Pixel(0, -50),
|
||||||
|
style: {
|
||||||
|
'background-color': '#1890ff', // 背景颜色为蓝色
|
||||||
|
'border': 'none', // 边框颜色与背景一致
|
||||||
|
'border-radius': '5px', // 圆角 5px
|
||||||
|
'color': 'white', // 文字颜色为白色
|
||||||
|
'font-size': '14px', // 字体大小
|
||||||
|
'padding': '5px 10px' // 内边距，调整文本框的大小
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 将文本标签添加到地图实例
|
||||||
|
this.map.add(text)
|
||||||
|
},
|
||||||
|
addParking(data, title, lon, lat) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: '#ccebc5',
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: '#3b7ed9', // 修改边界颜色为红色
|
||||||
|
strokeWeight: 2, // 加粗边界
|
||||||
|
strokeStyle: 'solid',
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
polygon.on('mouseover', () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.7,
|
||||||
|
fillColor: '#71b7cc' // 鼠标悬浮时填充颜色为红色
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on('mouseout', () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
fillColor: '#a7c1d0' // 鼠标移出时恢复填充颜色
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
addNoParking(data) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: '#ccebc5',
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: '#ff0000', // 修改边界颜色为红色
|
||||||
|
strokeWeight: 2, // 加粗边界
|
||||||
|
strokeStyle: 'solid',
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
polygon.on('mouseover', () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.7,
|
||||||
|
fillColor: '#ff0000' // 鼠标悬浮时填充颜色为红色
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on('mouseout', () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
fillColor: '#cc7b7b' // 鼠标移出时恢复填充颜色
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
addNoriding(data, title, lon, lat) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: '#ccebc5',
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: '#ffcc00', // 修改边界颜色为红色
|
||||||
|
strokeWeight: 2, // 加粗边界
|
||||||
|
strokeStyle: 'solid',
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
polygon.on('mouseover', () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.7,
|
||||||
|
fillColor: '#FFEBA4FF'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
polygon.on('mouseout', () => {
|
||||||
|
polygon.setOptions({
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
fillColor: '#ffeba4'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
|
||||||
|
addArea(data) {
|
||||||
|
let polygon = new AMap.Polygon({
|
||||||
|
path: data,
|
||||||
|
fillColor: '#ccebc5',
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.5,
|
||||||
|
strokeColor: '#2b8cbe',
|
||||||
|
strokeWeight: 1,
|
||||||
|
strokeStyle: 'dashed',
|
||||||
|
strokeDasharray: [5, 5],
|
||||||
|
});
|
||||||
|
// polygon.on('mouseover', () => {
|
||||||
|
// polygon.setOptions({
|
||||||
|
// fillOpacity: 0.7,
|
||||||
|
// fillColor: '#7bccc4'
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// polygon.on('mouseout', () => {
|
||||||
|
// polygon.setOptions({
|
||||||
|
// fillOpacity: 0.5,
|
||||||
|
// fillColor: '#ccebc5'
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
this.map.add(polygon);
|
||||||
|
},
|
||||||
|
formarStatus(status,onlineStatus){
|
||||||
|
if(onlineStatus == "0"){
|
||||||
|
if(status == "3"){
|
||||||
|
return globalConfig.icon.redyellow;
|
||||||
|
}else if(status == "4"){
|
||||||
|
return globalConfig.icon.orangered;
|
||||||
|
}
|
||||||
|
return globalConfig.icon.red;
|
||||||
|
}else{
|
||||||
|
if(status == "0"){
|
||||||
|
return globalConfig.icon.gray;
|
||||||
|
}else if(status == "1"){
|
||||||
|
return globalConfig.icon.blue;
|
||||||
|
}else if(status == "2"){
|
||||||
|
return globalConfig.icon.green;
|
||||||
|
}else if(status == "3"){
|
||||||
|
return globalConfig.icon.yellow;
|
||||||
|
}else if(status == "4"){
|
||||||
|
return globalConfig.icon.orange;
|
||||||
|
}else if(status == "8"){
|
||||||
|
return globalConfig.icon.gray;
|
||||||
|
}else if(status == "9"){
|
||||||
|
return globalConfig.icon.gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 删除所有的标记点
|
||||||
|
removeAllMarker() {
|
||||||
|
this.map.remove(this.markers);
|
||||||
|
this.markers = [];
|
||||||
|
},
|
||||||
|
// 点击地图事件
|
||||||
|
// onClickMap(e) {
|
||||||
|
// console.log('clickMap', e);
|
||||||
|
// let lng = e.lnglat.lng;
|
||||||
|
// let lat = e.lnglat.lat;
|
||||||
|
// this.changeMarker(lng, lat);
|
||||||
|
// },
|
||||||
|
// // 逆地理编码，并标点
|
||||||
|
// changeMarker(lng, lat) {
|
||||||
|
// console.log('changeMarker', lng,lat);
|
||||||
|
// this.loading = true;
|
||||||
|
// this.getGeoAddress(lng, lat).then(res => {
|
||||||
|
// this.removeAllMarker();
|
||||||
|
// this.addMarker(lng, lat, res.regeocode.formattedAddress);
|
||||||
|
// this.$emit('map-geo', res, lng, lat);
|
||||||
|
// }).finally(() => {
|
||||||
|
// this.loading = false;
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// // 获取逆地理编码
|
||||||
|
// getGeoAddress(lng, lat) {
|
||||||
|
// console.log('getGeoAddress', lng,lat);
|
||||||
|
// console.log('this.geocoder', this.geocoder);
|
||||||
|
// if(this.geocoder){
|
||||||
|
// return new Promise((resolve, reject) =>{
|
||||||
|
// this.geocoder.getAddress([lng, lat], (status, result) => {
|
||||||
|
// if (status === 'complete' && result.info === 'OK') {
|
||||||
|
// console.log('resolve', result);
|
||||||
|
// resolve(result);
|
||||||
|
// } else {
|
||||||
|
// console.log('reject', status,result);
|
||||||
|
// reject(status);
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// // 加载逆地理编码
|
||||||
|
// loadGeoCoder() {
|
||||||
|
// AMap.plugin('AMap.Geocoder', () => {
|
||||||
|
// this.geocoder = new AMap.Geocoder({
|
||||||
|
// city: '全国' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// // 加载POI
|
||||||
|
// loadPlaceSearch(province, city) {
|
||||||
|
// if (city == null) {
|
||||||
|
// city = '北京市';
|
||||||
|
// }
|
||||||
|
// if (city === '市辖区') {
|
||||||
|
// city = province;
|
||||||
|
// }
|
||||||
|
// AMap.plugin(["AMap.PlaceSearch"], () => {
|
||||||
|
// //构造地点查询类
|
||||||
|
// this.placeSearch = new AMap.PlaceSearch({
|
||||||
|
// pageSize: 5, // 单页显示结果条数
|
||||||
|
// pageIndex: 1, // 页码
|
||||||
|
// city: city, // 兴趣点城市
|
||||||
|
// citylimit: true, //是否强制限制在设置的城市内搜索
|
||||||
|
// map: this.map, // 展现结果的地图实例
|
||||||
|
// panel: "panel", // 结果列表将在此容器中进行展示。
|
||||||
|
// autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// // 事件绑定
|
||||||
|
// this.placeSearch.on('selectChanged', (data) => {
|
||||||
|
// this.$emit('select-changed', data);
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
//关键字查询
|
||||||
|
doPlaceSearch(keyword) {
|
||||||
|
if (keyword == null) {
|
||||||
|
return this.$message.warning("请输入关键词");
|
||||||
|
}
|
||||||
|
this.loading = true;
|
||||||
|
this.placeSearch.search(keyword, (status, result) => {
|
||||||
|
this.loading = false;
|
||||||
|
console.log("POI", status, result);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 周边搜索
|
||||||
|
doSearchNearBy(keyword, lng, lat, radius = 200) {
|
||||||
|
if (keyword == null) {
|
||||||
|
return this.$message.warning("请输入关键词");
|
||||||
|
}
|
||||||
|
this.loading = true;
|
||||||
|
this.placeSearch.searchNearBy(keyword, [lng, lat], radius, (status, result) => {
|
||||||
|
this.loading = false;
|
||||||
|
console.log("POI NearBy", status, result);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 根据地图中心点查询周边
|
||||||
|
doSearchNearByCenter(keyword) {
|
||||||
|
let center = this.map.getCenter();
|
||||||
|
this.doSearchNearBy(keyword, center.lng, center.lat, 1000);
|
||||||
|
},
|
||||||
|
// 监听输入事件
|
||||||
|
onInputSearch: debounce(function () {
|
||||||
|
this.doPlaceSearch(this.keyword)
|
||||||
|
}, 600)
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.place-search-map {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.search-row {
|
||||||
|
margin: 0.5em;
|
||||||
|
}
|
||||||
|
#container {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#panel {
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
max-height: 90%;
|
||||||
|
overflow-y: auto;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 280px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -246,6 +246,20 @@ export const dynamicRoutes = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/system/areaRange',
|
||||||
|
component: Layout,
|
||||||
|
hidden: true,
|
||||||
|
permissions: ['system:parking:list'],
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index/:areaId(\\d+)?', // 将参数设置为可选
|
||||||
|
component: () => import('@/views/system/area/areaRange'),
|
||||||
|
name: 'Data',
|
||||||
|
meta: { title: '运营区范围设置', activeMenu: '/system/areaRange' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/system/area-noriding',
|
path: '/system/area-noriding',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|
|
||||||
1260
src/views/index.vue
1260
src/views/index.vue
File diff suppressed because it is too large
Load Diff
17
src/views/system/area/areaRange.vue
Normal file
17
src/views/system/area/areaRange.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<template>
|
||||||
|
<div class="page">
|
||||||
|
11111111
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss'>
|
||||||
|
.page{
|
||||||
|
margin-top: 200rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -95,6 +95,13 @@
|
||||||
<span>去设置</span>
|
<span>去设置</span>
|
||||||
</router-link>
|
</router-link>
|
||||||
</template>
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="运营区区域范围设置" align="center" :show-overflow-tooltip="true">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<router-link :to="'/system/areaRange/index/' + scope.row.areaId" class="link-type">
|
||||||
|
<span>去设置</span>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true" />
|
<el-table-column label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true" />
|
||||||
<!-- <el-table-column label="联系人" align="center" prop="contact" />-->
|
<!-- <el-table-column label="联系人" align="center" prop="contact" />-->
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user