地图修改
This commit is contained in:
parent
74be13b534
commit
23ea8a9c71
|
|
@ -6,7 +6,7 @@ ENV = 'development'
|
|||
|
||||
# 共享电动车管理系统/开发环境
|
||||
# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
|
||||
VUE_APP_BASE_API = 'http://localhost:8080'
|
||||
VUE_APP_BASE_API = 'http://192.168.2.189:8080'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
|
|
|||
|
|
@ -54,6 +54,14 @@ export function updateArea(data) {
|
|||
data: data
|
||||
})
|
||||
}
|
||||
// 修改导览
|
||||
export function putguide(data) {
|
||||
return request({
|
||||
url: '/system/area/guide',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
// 修改运营区
|
||||
export function updateArea2(data) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="place-search-map" :style="{width: width, height: height}" v-loading="loading">
|
||||
<div class="place-search-map" :style="{ width: width, height: height }" v-loading="loading">
|
||||
<div id="container"></div>
|
||||
<div class="input-card">
|
||||
<h4>轨迹回放控制</h4>
|
||||
|
|
@ -52,7 +52,7 @@ export default {
|
|||
loading: false,
|
||||
keyword: null,
|
||||
markers: [],
|
||||
line:[],
|
||||
line: [],
|
||||
area: {
|
||||
province: '福建省',
|
||||
city: '宁德市',
|
||||
|
|
@ -99,7 +99,40 @@ export default {
|
|||
// 显示轨迹
|
||||
trajectory() {
|
||||
this.line = JSON.parse(this.tripRouteStr)
|
||||
console.log("this.line================"+this.line)
|
||||
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,
|
||||
|
|
@ -196,7 +229,7 @@ export default {
|
|||
line-height: 1.5;
|
||||
border-radius: 1rem;
|
||||
-webkit-appearance: button;
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input-item {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="container">
|
||||
<div class="input-card-right">
|
||||
<div class="img">
|
||||
<image-upload v-model="picture" />
|
||||
<image-upload :limit="1" :isShowTip="false" v-model="picture" />
|
||||
</div>
|
||||
|
||||
<el-button :style="topRightCoord ? buttonStyleActive : buttonStyleInactive" @click="setClickType('topRight')">
|
||||
|
|
@ -16,6 +16,10 @@
|
|||
<el-button @click="generateMap" :disabled="!canGenerateMap">
|
||||
生成导览地图
|
||||
</el-button>
|
||||
|
||||
<el-button @click="saveMap" :disabled="!canSaveMap">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div id="amap-container" class="map-container"></div>
|
||||
|
|
@ -25,15 +29,16 @@
|
|||
<div v-if="bottomLeftCoord">左下角: {{ bottomLeftCoord }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import globalConfig from '@/utils/config/globalConfig';
|
||||
import {getArea, optionselect as getAreaOptionselect} from "@/api/system/area";
|
||||
import { getArea, putguide } from "@/api/system/area";
|
||||
|
||||
export default {
|
||||
name: "NewPage",
|
||||
|
||||
data() {
|
||||
return {
|
||||
map: null,
|
||||
|
|
@ -44,17 +49,31 @@ export default {
|
|||
picture: '',
|
||||
buttonStyleActive: 'background-color: #409EFF; color: white;',
|
||||
buttonStyleInactive: 'background-color: #fff; color: #409EFF;',
|
||||
areaLon: null,
|
||||
areaLat: null,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
parkingName: null,
|
||||
areaId: null,
|
||||
type: "2"
|
||||
},
|
||||
// 默认区域id
|
||||
defaultAreaId: "",
|
||||
isMapGenerated: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canGenerateMap() {
|
||||
return this.picture && this.topRightCoord && this.bottomLeftCoord;
|
||||
},
|
||||
canSaveMap() {
|
||||
return this.isMapGenerated;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const areaId = this.$route.params && this.$route.params.areaId;
|
||||
this.getArea(areaId);
|
||||
// this.getAreaList();
|
||||
},
|
||||
mounted() {
|
||||
this.initMap();
|
||||
|
|
@ -67,7 +86,6 @@ export default {
|
|||
this.areaLon = response.data.longitude;
|
||||
this.areaLat = response.data.latitude;
|
||||
this.defaultAreaId = response.data.areaId;
|
||||
this.getList();
|
||||
});
|
||||
},
|
||||
initMap() {
|
||||
|
|
@ -84,6 +102,7 @@ export default {
|
|||
this.map = new AMap.Map("amap-container", {
|
||||
viewMode: "3D",
|
||||
zoom: 13,
|
||||
center: [this.areaLon, this.areaLat], // 初始化地图中心点位置
|
||||
});
|
||||
this.map.setFitView();
|
||||
this.map.on('click', this.handleMapClick);
|
||||
|
|
@ -93,33 +112,49 @@ export default {
|
|||
},
|
||||
setClickType(type) {
|
||||
this.clickType = type;
|
||||
// 清除相应的坐标和标记
|
||||
if (type === 'topRight' && this.topRightCoord) {
|
||||
this.clearMarker('topRight');
|
||||
this.topRightCoord = null;
|
||||
} else if (type === 'bottomLeft' && this.bottomLeftCoord) {
|
||||
this.clearMarker('bottomLeft');
|
||||
this.bottomLeftCoord = null;
|
||||
}
|
||||
},
|
||||
handleMapClick(event) {
|
||||
const lnglat = event.lnglat;
|
||||
|
||||
// 只有在点击了“右上角坐标”或“左下角坐标”按钮后才能添加标记
|
||||
if (this.clickType === 'topRight') {
|
||||
this.topRightCoord = lnglat;
|
||||
this.addMarker(lnglat, 'topRight');
|
||||
} else if (this.clickType === 'bottomLeft') {
|
||||
this.bottomLeftCoord = lnglat;
|
||||
this.addMarker(lnglat, 'bottomLeft');
|
||||
}
|
||||
|
||||
// 创建标记
|
||||
const marker = new AMap.Marker({
|
||||
position: lnglat,
|
||||
});
|
||||
this.map.add(marker);
|
||||
this.markers.push(marker);
|
||||
|
||||
// 清除点击类型
|
||||
this.clickType = null;
|
||||
},
|
||||
clearMarkers() {
|
||||
this.markers.forEach(marker => {
|
||||
this.map.remove(marker);
|
||||
addMarker(lnglat, type) {
|
||||
// 清除之前的标记
|
||||
this.clearMarker(type);
|
||||
|
||||
// 创建新标记
|
||||
const marker = new AMap.Marker({
|
||||
position: lnglat,
|
||||
});
|
||||
this.map.add(marker);
|
||||
this.markers.push({ marker, type });
|
||||
},
|
||||
clearMarker(type) {
|
||||
this.markers = this.markers.filter(({ marker, type: markerType }) => {
|
||||
if (markerType === type) {
|
||||
this.map.remove(marker);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
this.markers = [];
|
||||
this.topRightCoord = null;
|
||||
this.bottomLeftCoord = null;
|
||||
},
|
||||
generateMap() {
|
||||
if (!this.canGenerateMap) {
|
||||
|
|
@ -136,14 +171,20 @@ export default {
|
|||
const topRight = lnglatToFixed(this.topRightCoord);
|
||||
const bottomLeft = lnglatToFixed(this.bottomLeftCoord);
|
||||
|
||||
console.log('Top Right:', topRight);
|
||||
console.log('Bottom Left:', bottomLeft);
|
||||
|
||||
// 计算边界
|
||||
const bounds = new AMap.Bounds([bottomLeft.lng, bottomLeft.lat], [topRight.lng, topRight.lat]);
|
||||
|
||||
console.log('Bounds:', bounds);
|
||||
|
||||
// 创建图片图层
|
||||
const imageLayer = new AMap.ImageLayer({
|
||||
url: this.picture,
|
||||
bounds: bounds,
|
||||
zooms: [15, 20]
|
||||
zooms: [15, 20],
|
||||
zIndex: 999 // 设置zIndex确保图层在其他图层之上
|
||||
});
|
||||
|
||||
// 清除现有图层
|
||||
|
|
@ -155,6 +196,34 @@ export default {
|
|||
|
||||
// 添加图片图层
|
||||
this.map.add(imageLayer);
|
||||
|
||||
// 设置地图已生成的标志
|
||||
this.isMapGenerated = true;
|
||||
},
|
||||
saveMap() {
|
||||
if (!this.canSaveMap) {
|
||||
this.$message.error('请先生成导览地图');
|
||||
return;
|
||||
}
|
||||
|
||||
// 格式化坐标为字符串格式，不包含方括号
|
||||
const formatLngLat = (lnglat) => `${lnglat.lng},${lnglat.lat}`;
|
||||
|
||||
// 保存逻辑
|
||||
const mapData = {
|
||||
guideMap: this.picture,
|
||||
upperRight: formatLngLat(this.topRightCoord),
|
||||
lowerLeft: formatLngLat(this.bottomLeftCoord),
|
||||
areaId: this.defaultAreaId
|
||||
};
|
||||
|
||||
putguide(mapData).then(response => {
|
||||
// 处理更新后的响应
|
||||
});
|
||||
|
||||
// 例如，将 mapData 发送到后端保存
|
||||
console.log('保存地图数据:', mapData);
|
||||
this.$message.success('地图数据已保存');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
@ -172,11 +241,14 @@ export default {
|
|||
}
|
||||
|
||||
.input-card-right {
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
left: 230px;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-end;
|
||||
// justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -36,14 +36,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="area-options" v-if="userName == 'admin'">
|
||||
<span >切换运营区</span>
|
||||
<span>切换运营区</span>
|
||||
<el-select v-model="areaId" placeholder="请选择运营区" clearable @change="handleAreaChange">
|
||||
<el-option
|
||||
v-for="item in areaOptions"
|
||||
:key="item.areaId"
|
||||
:label="item.areaName"
|
||||
:value="item.areaId"
|
||||
></el-option>
|
||||
<el-option v-for="item in areaOptions" :key="item.areaId" :label="item.areaName"
|
||||
:value="item.areaId"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="input-card">
|
||||
|
|
@ -62,15 +58,12 @@
|
|||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="分区：" style="color:#4c97e7;font-weight: 700">{{ form.areaName }}</el-form-item>
|
||||
<el-form-item label="剩余电量：" >{{ form.remainingPower }}%</el-form-item>
|
||||
<el-form-item label="剩余电量：">{{ form.remainingPower }}%</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="二维码：">
|
||||
<template>
|
||||
<el-popover
|
||||
placement="top"
|
||||
width="180"
|
||||
trigger="hover">
|
||||
<el-popover placement="top" width="180" trigger="hover">
|
||||
<div class="qr-code-box">
|
||||
<qr-code :text="form.qrText" :width="150" :height="150" />
|
||||
</div>
|
||||
|
|
@ -78,23 +71,25 @@
|
|||
</el-popover>
|
||||
</template>
|
||||
</el-form-item>
|
||||
<el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线' }}</el-form-item>
|
||||
<el-form-item label="网络状态：" style="color: #ffcc00;font-weight: 700">{{ form.onlineStatus == 1 ? '在线' : '离线'
|
||||
}}</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<div class="nav-container">
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item index="1" >使用记录</el-menu-item>
|
||||
<el-menu-item index="2" >维修记录</el-menu-item>
|
||||
<el-menu-item index="3" >换电记录</el-menu-item>
|
||||
<el-menu :default-active="activeIndex" class="el-menu-demo nav-menu" mode="horizontal"
|
||||
@select="handleSelect">
|
||||
<el-menu-item index="1">使用记录</el-menu-item>
|
||||
<el-menu-item index="2">维修记录</el-menu-item>
|
||||
<el-menu-item index="3">换电记录</el-menu-item>
|
||||
</el-menu>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<order-record v-show="activeIndex == '1'" :sn="form.sn"/>
|
||||
<repair-record v-show="activeIndex == '2'" :sn="form.sn"/>
|
||||
<replacement-record v-show="activeIndex == '3'" :sn="form.sn"/>
|
||||
<order-record v-show="activeIndex == '1'" :sn="form.sn" />
|
||||
<repair-record v-show="activeIndex == '2'" :sn="form.sn" />
|
||||
<replacement-record v-show="activeIndex == '3'" :sn="form.sn" />
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
|
|
@ -105,46 +100,46 @@
|
|||
|
||||
</template>
|
||||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import globalConfig from "@/utils/config/globalConfig";
|
||||
import { getDevice, listDevice } from '@/api/system/device'
|
||||
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
|
||||
import { listParking } from '@/api/system/parking'
|
||||
import LocationMap from '@/components/Map/location/LocationMap'
|
||||
import OrderRecord from '@/views/system/device/components/orderRecord'
|
||||
import RepairRecord from '@/views/system/device/components/repairRecord'
|
||||
import ReplacementRecord from '@/views/system/device/components/replacementRecord'
|
||||
import QrCode from '@/components/QrCode'
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import globalConfig from "@/utils/config/globalConfig";
|
||||
import { getDevice, listDevice } from '@/api/system/device'
|
||||
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
|
||||
import { listParking } from '@/api/system/parking'
|
||||
import LocationMap from '@/components/Map/location/LocationMap'
|
||||
import OrderRecord from '@/views/system/device/components/orderRecord'
|
||||
import RepairRecord from '@/views/system/device/components/repairRecord'
|
||||
import ReplacementRecord from '@/views/system/device/components/replacementRecord'
|
||||
import QrCode from '@/components/QrCode'
|
||||
|
||||
function formarStatus(status,onlineStatus) {
|
||||
if(onlineStatus == "0"){
|
||||
if(status == "3"){
|
||||
function formarStatus(status, onlineStatus) {
|
||||
if (onlineStatus == "0") {
|
||||
if (status == "3") {
|
||||
return globalConfig.icon.redyellow;
|
||||
}else if(status == "4"){
|
||||
} else if (status == "4") {
|
||||
return globalConfig.icon.orangered;
|
||||
}
|
||||
return globalConfig.icon.red;
|
||||
}else{
|
||||
if(status == "0"){
|
||||
} else {
|
||||
if (status == "0") {
|
||||
return globalConfig.icon.gray;
|
||||
}else if(status == "1"){
|
||||
} else if (status == "1") {
|
||||
return globalConfig.icon.blue;
|
||||
}else if(status == "2"){
|
||||
} else if (status == "2") {
|
||||
return globalConfig.icon.green;
|
||||
}else if(status == "3"){
|
||||
} else if (status == "3") {
|
||||
return globalConfig.icon.yellow;
|
||||
}else if(status == "4"){
|
||||
} else if (status == "4") {
|
||||
return globalConfig.icon.orange;
|
||||
}else if(status == "8"){
|
||||
} else if (status == "8") {
|
||||
return globalConfig.icon.gray;
|
||||
}else if(status == "9"){
|
||||
} else if (status == "9") {
|
||||
return globalConfig.icon.gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
export default {
|
||||
}
|
||||
export default {
|
||||
name: "map-view",
|
||||
components: { OrderRecord, RepairRecord, ReplacementRecord,QrCode,LocationMap },
|
||||
components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap },
|
||||
data() {
|
||||
return {
|
||||
AMap: null,
|
||||
|
|
@ -157,7 +152,7 @@
|
|||
userName: undefined,
|
||||
lon: null,
|
||||
lat: null,
|
||||
area:null,
|
||||
area: null,
|
||||
ids: null,
|
||||
showDialog: null,
|
||||
icons: globalConfig.icon,
|
||||
|
|
@ -184,7 +179,7 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("当前用户信息：",this.$store.state.user.name)
|
||||
console.log("当前用户信息：", this.$store.state.user.name)
|
||||
this.userName = this.$store.state.user.name;
|
||||
this.getAreaList(this.areaId);
|
||||
this.getAreaOptions();
|
||||
|
|
@ -235,14 +230,14 @@
|
|||
console.log(key, keyPath);
|
||||
},
|
||||
showMarkers() {
|
||||
if(this.show){
|
||||
if (this.show) {
|
||||
// this.markers.forEach(marker => {
|
||||
// marker.show();
|
||||
// });
|
||||
this.labels.forEach(label => {
|
||||
label.show();
|
||||
});
|
||||
}else{
|
||||
} else {
|
||||
// this.markers.forEach(marker => {
|
||||
// marker.hide();
|
||||
// });
|
||||
|
|
@ -256,8 +251,8 @@
|
|||
element.style.visibility = this.show ? 'hidden' : 'visible';
|
||||
});
|
||||
},
|
||||
async getAreaList(areaId){
|
||||
listArea({areaId: areaId}).then(response => {
|
||||
async getAreaList(areaId) {
|
||||
listArea({ areaId: areaId }).then(response => {
|
||||
this.areaList = response.rows;
|
||||
if (this.areaList.length > 0) { // 确保数组不为空
|
||||
const firstArea = this.areaList[0]; // 获取第一个元素
|
||||
|
|
@ -265,8 +260,8 @@
|
|||
console.log('第一个区域的信息:', firstArea);
|
||||
this.lon = firstArea.longitude;
|
||||
this.lat = firstArea.latitude;
|
||||
console.log("area============="+JSON.stringify(this.area))
|
||||
listParking({areaId: this.area.areaId}).then(response => {
|
||||
console.log("area=============" + JSON.stringify(this.area))
|
||||
listParking({ areaId: this.area.areaId }).then(response => {
|
||||
let list = response.rows;
|
||||
list.forEach(item => {
|
||||
if (item.type === '1') {
|
||||
|
|
@ -277,17 +272,17 @@
|
|||
this.noridingList.push(item);
|
||||
}
|
||||
});
|
||||
console.log("parkingList============="+JSON.stringify(this.parkingList));
|
||||
console.log("noParkingList============="+JSON.stringify(this.noParkingList));
|
||||
console.log("noriding============="+JSON.stringify(this.noridingList));
|
||||
console.log("parkingList=============" + JSON.stringify(this.parkingList));
|
||||
console.log("noParkingList=============" + JSON.stringify(this.noParkingList));
|
||||
console.log("noriding=============" + JSON.stringify(this.noridingList));
|
||||
this.initAMap();
|
||||
});
|
||||
}else{
|
||||
} else {
|
||||
console.log('区域列表为空');
|
||||
}
|
||||
});
|
||||
},
|
||||
changeMapStyle(){
|
||||
changeMapStyle() {
|
||||
// 创建一个默认的图层组件
|
||||
let defaultLayer = new AMap.TileLayer();
|
||||
// 创建一个卫星图图层组件
|
||||
|
|
@ -298,18 +293,18 @@
|
|||
// 获取当前地图显示的图层
|
||||
let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
|
||||
// 切换图层
|
||||
if(this.type=='default'){
|
||||
if (this.type == 'default') {
|
||||
console.log(1111111)
|
||||
//获取地图图层数据
|
||||
this.map.setLayers([defaultLayer]); // 切换回默认图层
|
||||
this.type = 'Satellite';
|
||||
}else{
|
||||
} else {
|
||||
console.log(222222)
|
||||
this.map.setLayers([satelliteLayer,roadNetLayer]); // 切换到卫星图图层
|
||||
this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
|
||||
this.type = 'default';
|
||||
}
|
||||
},
|
||||
setFitView(){
|
||||
setFitView() {
|
||||
this.map.setFitView(null, false, [150, 60, 100, 60]);
|
||||
},
|
||||
initAMap() {
|
||||
|
|
@ -321,14 +316,14 @@
|
|||
// 设置地图容器id
|
||||
viewMode: "3D", // 是否为3D地图模式
|
||||
zoom: 13, // 初始化地图级别
|
||||
center: [this.lon,this.lat], //初始化地图中心点位置
|
||||
center: [this.lon, this.lat], //初始化地图中心点位置
|
||||
});
|
||||
// 创建信息窗体
|
||||
this.infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(0, -30)
|
||||
});
|
||||
//设备点标记
|
||||
console.log("this.areaId============="+this.areaId)
|
||||
console.log("this.areaId=============" + this.areaId)
|
||||
this.deviceMarker(this.areaId);
|
||||
//运营区边界
|
||||
this.areaList.forEach(area => {
|
||||
|
|
@ -336,18 +331,18 @@
|
|||
});
|
||||
//停车区
|
||||
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.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.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.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
|
||||
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
|
||||
});
|
||||
// setTimeout(() => {
|
||||
// this.setFitView();
|
||||
|
|
@ -360,14 +355,14 @@
|
|||
freshMarker(points) {
|
||||
let that = this;
|
||||
|
||||
console.log("刷新点标记====",points)
|
||||
console.log("刷新点标记====", points)
|
||||
|
||||
// 检查 points 数据格式
|
||||
if (!Array.isArray(points)) {
|
||||
console.error("Points data is not an array");
|
||||
return;
|
||||
}
|
||||
console.log("this.cluster=======",this.cluster)
|
||||
console.log("this.cluster=======", this.cluster)
|
||||
|
||||
// 聚合对象存在，则修改数据
|
||||
if (this.cluster) {
|
||||
|
|
@ -399,37 +394,54 @@
|
|||
},
|
||||
// 点击聚合对象事件
|
||||
onClickCluster(e) {
|
||||
console.log("点击聚合点====",e)
|
||||
console.log("点击聚合点====", e)
|
||||
this.onDeviceList = e.clusterData.map(item => item);
|
||||
// 如果数量 > 1，则打开列表页
|
||||
if (this.onDeviceList.length > 1) {
|
||||
console.log("打开列表====",this.onDeviceList)
|
||||
console.log("打开列表====", this.onDeviceList)
|
||||
let content = this.generateInfoContent(this.onDeviceList);
|
||||
this.infoWindow.setContent(content);
|
||||
this.infoWindow.open(this.map, e.lnglat);
|
||||
}
|
||||
},
|
||||
generateInfoContent(data) {
|
||||
let content = `<div><table class="info-table">
|
||||
let content = `<div style="max-hight: 500px; overflow-y: auto;">
|
||||
<table class="info-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>SN</th>
|
||||
<th>车牌号</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
<th>SN</th>
|
||||
<th>车牌号</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>`;
|
||||
data.forEach(item => {
|
||||
content += `<tr>
|
||||
<td>${item.sn}</td>
|
||||
<td>${item.vehicleNum}</td>
|
||||
<td>${formatVehicleStatus(item.status)}</td>
|
||||
<td><button class="detail-btn" data-device-id="${item.deviceId}">详情</button></td>
|
||||
</tr>`;
|
||||
});
|
||||
|
||||
for (let i = 0; i < data.length; i += 2) {
|
||||
content += `<tr>`;
|
||||
content += generateRowContent(data[i]);
|
||||
if (i + 1 < data.length) {
|
||||
content += generateRowContent(data[i + 1]);
|
||||
} else {
|
||||
content += `<td colspan="4"></td>`;
|
||||
}
|
||||
content += `</tr>`;
|
||||
}
|
||||
|
||||
content += `</tbody>
|
||||
</table></div>`;
|
||||
|
||||
function generateRowContent(item) {
|
||||
return `<td>${item.sn}</td>
|
||||
<td>${item.vehicleNum}</td>
|
||||
<td>${formatVehicleStatus(item.status)}</td>
|
||||
<td><button class="detail-btn" data-device-id="${item.deviceId}">详情</button></td>`;
|
||||
}
|
||||
|
||||
function formatVehicleStatus(status) {
|
||||
switch (status) {
|
||||
case '7':
|
||||
|
|
@ -452,10 +464,12 @@
|
|||
return '未知状态';
|
||||
}
|
||||
}
|
||||
|
||||
return content;
|
||||
},
|
||||
handleInfoWindowClick(event) {
|
||||
console.log("点击详情按钮====",event)
|
||||
console.log("点击详情按钮====", event)
|
||||
|
||||
const button = event.target.closest('.detail-btn');
|
||||
if (button) {
|
||||
const deviceId = button.getAttribute('data-device-id');
|
||||
|
|
@ -468,7 +482,7 @@
|
|||
let content = `
|
||||
<div class="apiary-marker">
|
||||
<div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
|
||||
<image class="apiary-marker-img" src='${formarStatus(device.status,device.onlineStatus)}'/>
|
||||
<image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/>
|
||||
</div>
|
||||
`
|
||||
context.marker.setContent(content);
|
||||
|
|
@ -476,7 +490,7 @@
|
|||
},
|
||||
// 点击非聚合点事件
|
||||
onClickMarker(deviceId) {
|
||||
console.log("点击非聚合点====",deviceId)
|
||||
console.log("点击非聚合点====", deviceId)
|
||||
getDevice(deviceId).then(response => {
|
||||
this.open2 = true;
|
||||
this.form = response.data;
|
||||
|
|
@ -485,7 +499,7 @@
|
|||
});
|
||||
},
|
||||
openDetail(deviceId) {
|
||||
console.log("点击非聚合点====",deviceId)
|
||||
console.log("点击非聚合点====", deviceId)
|
||||
getDevice(deviceId).then(response => {
|
||||
this.open2 = true;
|
||||
this.form = response.data;
|
||||
|
|
@ -532,7 +546,7 @@
|
|||
},
|
||||
]
|
||||
},
|
||||
addMarker2(parking, icon,title,color) {
|
||||
addMarker2(parking, icon, title, color) {
|
||||
let marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
icon: new AMap.Icon({
|
||||
|
|
@ -567,9 +581,9 @@
|
|||
// console.log("text=============",text)
|
||||
this.labels.push(text)
|
||||
},
|
||||
deviceMarker(areaId){
|
||||
deviceMarker(areaId) {
|
||||
this.data = [];
|
||||
listDevice({pageNum: 1,pageSize: 999,areaId:areaId}).then(response => {
|
||||
listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
|
||||
this.deviceList = response.rows;
|
||||
this.deviceList.forEach(device => {
|
||||
// 检查经纬度是否为空且为有效数字
|
||||
|
|
@ -594,7 +608,7 @@
|
|||
console.error('获取设备列表失败:', error);
|
||||
});
|
||||
},
|
||||
addMarker(lng, lat, status, onlineStatus,title) {
|
||||
addMarker(lng, lat, status, onlineStatus, title) {
|
||||
|
||||
|
||||
|
||||
|
|
@ -626,7 +640,7 @@
|
|||
// })
|
||||
this.map.add(polygon);
|
||||
},
|
||||
addParking(data,title,lon,lat) {
|
||||
addParking(data, title, lon, lat) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
|
|
@ -676,7 +690,7 @@
|
|||
});
|
||||
this.map.add(polygon);
|
||||
},
|
||||
addNoriding(data,title,lon,lat) {
|
||||
addNoriding(data, title, lon, lat) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
|
|
@ -702,14 +716,50 @@
|
|||
this.map.add(polygon);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#container {
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 850px;
|
||||
}
|
||||
.container {
|
||||
}
|
||||
.info-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.info-table thead {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.info-table tbody tr:nth-child(even) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.info-table tbody tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Scrollbar styles for WebKit browsers (Chrome, Safari) */
|
||||
.info-table::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.info-table::-webkit-scrollbar-thumb {
|
||||
background-color: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info-table::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
border: 1px solid rgb(204, 204, 204);
|
||||
|
||||
|
|
@ -718,19 +768,24 @@
|
|||
bottom: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
.tips{
|
||||
}
|
||||
|
||||
.tips {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
|
||||
.tip-item {
|
||||
display: flex;
|
||||
align-items: center; /* 垂直居中 */
|
||||
margin-bottom: 10px; /* 可以根据需要调整间距 */
|
||||
align-items: center;
|
||||
/* 垂直居中 */
|
||||
margin-bottom: 10px;
|
||||
/* 可以根据需要调整间距 */
|
||||
color: #38383b;
|
||||
.span-class{
|
||||
|
||||
.span-class {
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 3px 5px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -738,40 +793,47 @@
|
|||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
|
||||
img {
|
||||
width: 25px;
|
||||
padding-top: 5px;
|
||||
height: auto; /* 保持图片高度自适应 */
|
||||
margin-right: 10px; /* 图片与文字间距，根据需要调整 */
|
||||
height: auto;
|
||||
/* 保持图片高度自适应 */
|
||||
margin-right: 10px;
|
||||
/* 图片与文字间距，根据需要调整 */
|
||||
}
|
||||
}
|
||||
.area-options{
|
||||
}
|
||||
|
||||
.area-options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
span{
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 10px;
|
||||
font-size: 13px;
|
||||
color: #535353;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.apiary-marker{
|
||||
.apiary-marker {
|
||||
position: relative;
|
||||
top: -19px;
|
||||
left: -19px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.apiary-marker-img{
|
||||
|
||||
.apiary-marker-img {
|
||||
width: 25px;
|
||||
}
|
||||
.apiary-marker-name{
|
||||
|
||||
.apiary-marker-name {
|
||||
background-color: #1890ff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
|
|
@ -779,8 +841,9 @@
|
|||
font-size: 12px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.detail-btn {
|
||||
}
|
||||
|
||||
.detail-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #007bff;
|
||||
|
|
@ -788,36 +851,35 @@
|
|||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-btn:hover {
|
||||
.detail-btn:hover {
|
||||
color: #0056b3;
|
||||
}
|
||||
}
|
||||
|
||||
.info-table {
|
||||
.info-table {
|
||||
border: 1px solid #ccc;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
.info-table th,
|
||||
.info-table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-table th {
|
||||
.info-table th {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
}
|
||||
|
||||
.amap-info-content{
|
||||
.amap-info-content {
|
||||
padding: 10px 25px 10px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
.el-dialog:not(.is-fullscreen) {
|
||||
margin-top: 6vh !important;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user