chuangte/bick_back
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

地图更新

Browse Source
This commit is contained in:
tx 2024-08-23 18:05:58 +08:00
parent 7f2c968e00
commit 18870b33f2
9 changed files with 2268 additions and 896 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/system/area.js
View File

@ -102,3 +102,10 @@ export function selectDeptByAreaId(areaId) {
method: 'get'
})
}
// 根据运营区id获取运营商
export function getleaderboard(type,timeLimit) {
return request({
url: '/index/admim/leaderboard?type='+type+'&timeLimit='+timeLimit,
method: 'get'
})
}

8
src/api/system/device.js
View File

@ -132,6 +132,14 @@ export function reboot(data){
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查询设备
export function getDeviceBySn(sn){
return request({

2
src/components/Map/TrajectoryMap.vue
View File

@ -86,7 +86,7 @@ export default {
console.log("轨迹=====地图已销毁");
} else {
console.log("轨迹=====地图实例不存在，无需销毁");
}
}
},
showMarkers() {
if (this.show) {

616
src/components/Map/location/LocationMaps.vue Normal file
View 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>

14
src/router/index.js
View File

@ -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',
component: Layout,

1260
src/views/index.vue
View File

File diff suppressed because it is too large Load Diff

17
src/views/system/area/areaRange.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<div class="page">
11111111
</div>
</template>
<script>
export default {
}
</script>
<style lang='scss'>
.page{
margin-top: 200rpx;
}
</style>

7
src/views/system/area/index.vue
View File

@ -95,6 +95,13 @@
<span>去设置</span>
</router-link>
</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 label="收费方式" align="center" prop="ruleStr" :show-overflow-tooltip="true" />
<!-- <el-table-column label="联系人" align="center" prop="contact" />-->

1233
src/views/system/device/index.vue
View File

File diff suppressed because it is too large Load Diff