Compare commits
5 Commits
8ec0cf4b9a
...
747e595108
Author | SHA1 | Date | |
---|---|---|---|
747e595108 | |||
154320976e | |||
cfe309c965 | |||
345a9cee1b | |||
21081b8618 |
|
@ -5,8 +5,8 @@ VUE_APP_TITLE = 共享电动车管理系统
|
||||||
ENV = 'development'
|
ENV = 'development'
|
||||||
|
|
||||||
# 共享电动车管理系统/开发环境
|
# 共享电动车管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
|
VUE_APP_BASE_API = 'https://dche.ccttiot.com/prod-api'
|
||||||
VUE_APP_BASE_API = 'http://192.168.2.75:8088'
|
# VUE_APP_BASE_API = 'http://192.168.2.75:8088'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
|
|
@ -139,4 +139,11 @@ export function getDeviceBySn(sn){
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 根据运营区id查询设备
|
||||||
|
export function getDeviceLists(areaId){
|
||||||
|
return request({
|
||||||
|
url: '/app/allVehicleByArea?areaId='+areaId,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -13,6 +13,7 @@ import { debounce } from '@/utils'
|
||||||
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
|
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
|
||||||
import { getArea } from '@/api/system/area'
|
import { getArea } from '@/api/system/area'
|
||||||
import { listParking } from '@/api/system/parking'
|
import { listParking } from '@/api/system/parking'
|
||||||
|
import { getDeviceBySn } from '@/api/system/device'
|
||||||
export default {
|
export default {
|
||||||
name: "LocationMap",
|
name: "LocationMap",
|
||||||
components: { AreaTextSelect },
|
components: { AreaTextSelect },
|
||||||
|
@ -45,10 +46,7 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
},
|
},
|
||||||
areaId: {
|
|
||||||
type: Number,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -68,13 +66,18 @@ export default {
|
||||||
noParkingList:[],
|
noParkingList:[],
|
||||||
noridingList:[],
|
noridingList:[],
|
||||||
labels: [],
|
labels: [],
|
||||||
|
areaId:''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// this.initAMap();
|
// this.initAMap();
|
||||||
setTimeout(() =>{
|
// this.getAreas(this.areaId)
|
||||||
this.getAreas(this.areaId)
|
|
||||||
},1000)
|
getDeviceBySn(this.deviceSn).then(response => {
|
||||||
|
this.areaId=response.data.areaId
|
||||||
|
console.log(response,'responseresponse');
|
||||||
|
this.getAreas(this.areaId)
|
||||||
|
});
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
console.log("轨迹=====组件将被销毁");
|
console.log("轨迹=====组件将被销毁");
|
||||||
|
|
|
@ -37,6 +37,7 @@
|
||||||
placeholder="请选择运营商"
|
placeholder="请选择运营商"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<!-- <div class="text" style="color:red;">该运营商没设置收费方式,将无法保存数据,请返回运营管理设置收费方式</div> -->
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item
|
<el-form-item
|
||||||
|
|
|
@ -28,8 +28,8 @@
|
||||||
</router-link>
|
</router-link>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="1.5">
|
<el-col :span="1.5">
|
||||||
<el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="editArea2"
|
<!-- <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="editArea2"
|
||||||
v-hasPermi="['system:area:edit']">修改</el-button>
|
v-hasPermi="['system:area:edit']">修改</el-button> -->
|
||||||
<!-- <el-button
|
<!-- <el-button
|
||||||
type="success"
|
type="success"
|
||||||
plain
|
plain
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div id="container" @click="handleInfoWindowClick"></div>
|
<div id="container" @click="handleInfoWindowClick" v-if="showmap"></div>
|
||||||
<div class="tips">
|
<div class="tips">
|
||||||
<div class="tip-item">
|
<div class="tip-item">
|
||||||
<img :src="icons.blue" alt="蓝色">
|
<img :src="icons.blue" alt="蓝色">
|
||||||
|
@ -102,7 +102,7 @@
|
||||||
<script>
|
<script>
|
||||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||||
import globalConfig from "@/utils/config/globalConfig";
|
import globalConfig from "@/utils/config/globalConfig";
|
||||||
import { getDevice, listDevice } from '@/api/system/device'
|
import { getDevice, getDeviceLists ,listDevice} from '@/api/system/device'
|
||||||
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
|
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
|
||||||
import { listParking } from '@/api/system/parking'
|
import { listParking } from '@/api/system/parking'
|
||||||
import LocationMap from '@/components/Map/location/LocationMap'
|
import LocationMap from '@/components/Map/location/LocationMap'
|
||||||
|
@ -137,17 +137,17 @@ function formarStatus(status, onlineStatus) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "map-view",
|
name: "map-view",
|
||||||
components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap },
|
components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
AMap: null,
|
AMap: null,
|
||||||
map: null, // 地图实例
|
map: null,
|
||||||
markers: [],
|
markers: [],
|
||||||
labels: [],
|
labels: [],
|
||||||
tips: null,
|
tips: null,
|
||||||
// 运营区表格数据
|
|
||||||
areaList: [],
|
areaList: [],
|
||||||
userName: undefined,
|
userName: undefined,
|
||||||
lon: null,
|
lon: null,
|
||||||
|
@ -162,20 +162,18 @@ export default {
|
||||||
cluster: null,
|
cluster: null,
|
||||||
data: [],
|
data: [],
|
||||||
show: false,
|
show: false,
|
||||||
// 详情窗口
|
|
||||||
open2: false,
|
open2: false,
|
||||||
// 表单参数
|
|
||||||
form: {},
|
form: {},
|
||||||
areaId: null,
|
areaId: 14,
|
||||||
areaOptions: [],
|
areaOptions: [],
|
||||||
infoWindow: null,
|
infoWindow: null,
|
||||||
// 设备表格数据
|
|
||||||
deviceList: [],
|
deviceList: [],
|
||||||
onDeviceList: [],
|
onDeviceList: [],
|
||||||
parkingList: [],
|
parkingList: [],
|
||||||
noParkingList: [],
|
noParkingList: [],
|
||||||
noridingList: [],
|
noridingList: [],
|
||||||
type: null
|
type: null,
|
||||||
|
showmap: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -188,17 +186,33 @@ export default {
|
||||||
this.map?.destroy();
|
this.map?.destroy();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleAreaChange(newAreaId) {
|
async handleAreaChange(newAreaId) {
|
||||||
console.log('newAreaId:', newAreaId);
|
console.log('newAreaId:', newAreaId);
|
||||||
|
|
||||||
this.areaId = newAreaId;
|
this.areaId = newAreaId;
|
||||||
this.getAreaList(this.areaId);
|
this.onDeviceList = [];
|
||||||
|
this.parkingList = [];
|
||||||
|
this.noParkingList = [];
|
||||||
|
this.noridingList = [];
|
||||||
|
this.deviceList = [];
|
||||||
|
this.showmap = false;
|
||||||
|
|
||||||
|
if (this.map) {
|
||||||
|
this.map.destroy();
|
||||||
|
this.map = null;
|
||||||
|
this.cluster = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.getAreaList(this.areaId);
|
||||||
},
|
},
|
||||||
|
|
||||||
getAreaOptions() {
|
getAreaOptions() {
|
||||||
getAreaOptionselect().then(response => {
|
getAreaOptionselect().then(response => {
|
||||||
this.areaOptions = response.data;
|
this.areaOptions = response.data;
|
||||||
console.log("areaOptions", this.areaOptions)
|
console.log("areaOptions", this.areaOptions)
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
onMapGeo(data, lat, lng) {
|
onMapGeo(data, lat, lng) {
|
||||||
console.log("onMapGeo", data)
|
console.log("onMapGeo", data)
|
||||||
let component = data.regeocode.addressComponent;
|
let component = data.regeocode.addressComponent;
|
||||||
|
@ -212,6 +226,7 @@ export default {
|
||||||
name: component.street + component.streetNumber
|
name: component.street + component.streetNumber
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onSelectChange(addr) {
|
onSelectChange(addr) {
|
||||||
console.log("onSelectChange", addr)
|
console.log("onSelectChange", addr)
|
||||||
let data = addr.selected.data;
|
let data = addr.selected.data;
|
||||||
|
@ -225,22 +240,18 @@ export default {
|
||||||
name: data.address + data.name,
|
name: data.address + data.name,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSelect(key, keyPath) {
|
handleSelect(key, keyPath) {
|
||||||
this.activeIndex = key;
|
this.activeIndex = key;
|
||||||
console.log(key, keyPath);
|
console.log(key, keyPath);
|
||||||
},
|
},
|
||||||
|
|
||||||
showMarkers() {
|
showMarkers() {
|
||||||
if (this.show) {
|
if (this.show) {
|
||||||
// this.markers.forEach(marker => {
|
|
||||||
// marker.show();
|
|
||||||
// });
|
|
||||||
this.labels.forEach(label => {
|
this.labels.forEach(label => {
|
||||||
label.show();
|
label.show();
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// this.markers.forEach(marker => {
|
|
||||||
// marker.hide();
|
|
||||||
// });
|
|
||||||
this.labels.forEach(label => {
|
this.labels.forEach(label => {
|
||||||
label.hide();
|
label.hide();
|
||||||
});
|
});
|
||||||
|
@ -251,16 +262,16 @@ export default {
|
||||||
element.style.visibility = this.show ? 'hidden' : 'visible';
|
element.style.visibility = this.show ? 'hidden' : 'visible';
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
async getAreaList(areaId) {
|
async getAreaList(areaId) {
|
||||||
listArea({ areaId: areaId }).then(response => {
|
listArea({ areaId: areaId }).then(response => {
|
||||||
this.areaList = response.rows;
|
this.areaList = response.rows;
|
||||||
if (this.areaList.length > 0) { // 确保数组不为空
|
if (this.areaList.length > 0) {
|
||||||
const firstArea = this.areaList[0]; // 获取第一个元素
|
const firstArea = this.areaList[0];
|
||||||
this.area = firstArea;
|
this.area = firstArea;
|
||||||
console.log('第一个区域的信息:', firstArea);
|
|
||||||
this.lon = firstArea.longitude;
|
this.lon = firstArea.longitude;
|
||||||
this.lat = firstArea.latitude;
|
this.lat = firstArea.latitude;
|
||||||
console.log("area=============" + JSON.stringify(this.area))
|
|
||||||
listParking({ areaId: this.area.areaId }).then(response => {
|
listParking({ areaId: this.area.areaId }).then(response => {
|
||||||
let list = response.rows;
|
let list = response.rows;
|
||||||
list.forEach(item => {
|
list.forEach(item => {
|
||||||
|
@ -272,99 +283,89 @@ export default {
|
||||||
this.noridingList.push(item);
|
this.noridingList.push(item);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log("parkingList=============" + JSON.stringify(this.parkingList));
|
|
||||||
console.log("noParkingList=============" + JSON.stringify(this.noParkingList));
|
setTimeout(() => {
|
||||||
console.log("noriding=============" + JSON.stringify(this.noridingList));
|
this.showmap = true;
|
||||||
this.initAMap();
|
this.initAMap();
|
||||||
|
}, 300);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
console.log('区域列表为空');
|
console.log('区域列表为空');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
changeMapStyle() {
|
changeMapStyle() {
|
||||||
// 创建一个默认的图层组件
|
|
||||||
let defaultLayer = new AMap.TileLayer();
|
let defaultLayer = new AMap.TileLayer();
|
||||||
// 创建一个卫星图图层组件
|
|
||||||
let satelliteLayer = new AMap.TileLayer.Satellite();
|
let satelliteLayer = new AMap.TileLayer.Satellite();
|
||||||
let roadNetLayer = new AMap.TileLayer.RoadNet();
|
let roadNetLayer = new AMap.TileLayer.RoadNet();
|
||||||
// 将默认图层添加到地图中
|
|
||||||
this.map.add(defaultLayer);
|
this.map.add(defaultLayer);
|
||||||
// 获取当前地图显示的图层
|
let currentLayer = this.map.getLayers()[0];
|
||||||
let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
|
|
||||||
// 切换图层
|
|
||||||
if (this.type == 'default') {
|
if (this.type == 'default') {
|
||||||
console.log(1111111)
|
this.map.setLayers([defaultLayer]);
|
||||||
//获取地图图层数据
|
|
||||||
this.map.setLayers([defaultLayer]); // 切换回默认图层
|
|
||||||
this.type = 'Satellite';
|
this.type = 'Satellite';
|
||||||
} else {
|
} else {
|
||||||
console.log(222222)
|
this.map.setLayers([satelliteLayer, roadNetLayer]);
|
||||||
this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
|
|
||||||
this.type = 'default';
|
this.type = 'default';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
setFitView() {
|
setFitView() {
|
||||||
this.map.setFitView(null, false, [150, 60, 100, 60]);
|
this.map.setFitView(null, false, [150, 60, 100, 60]);
|
||||||
},
|
},
|
||||||
|
|
||||||
initAMap() {
|
initAMap() {
|
||||||
AMapLoader.load({
|
AMapLoader.load({
|
||||||
key: globalConfig.aMap.key, // 申请好的Web端开发者Key,首次调用 load 时必填
|
key: globalConfig.aMap.key,
|
||||||
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
version: "2.0",
|
||||||
}).then((AMap) => {
|
}).then((AMap) => {
|
||||||
this.map = new AMap.Map("container", {
|
this.map = new AMap.Map("container", {
|
||||||
// 设置地图容器id
|
viewMode: "3D",
|
||||||
viewMode: "3D", // 是否为3D地图模式
|
zoom: 13,
|
||||||
zoom: 13, // 初始化地图级别
|
center: [this.lon, this.lat],
|
||||||
center: [this.lon, this.lat], //初始化地图中心点位置
|
|
||||||
});
|
});
|
||||||
// 创建信息窗体
|
|
||||||
this.infoWindow = new AMap.InfoWindow({
|
this.infoWindow = new AMap.InfoWindow({
|
||||||
offset: new AMap.Pixel(0, -30)
|
offset: new AMap.Pixel(0, -30),
|
||||||
});
|
});
|
||||||
//设备点标记
|
|
||||||
console.log("this.areaId=============" + this.areaId)
|
|
||||||
this.deviceMarker(this.areaId);
|
this.deviceMarker(this.areaId);
|
||||||
//运营区边界
|
|
||||||
this.areaList.forEach(area => {
|
this.areaList.forEach(area => {
|
||||||
this.addArea(JSON.parse(area.boundaryStr) || []);
|
this.addArea(JSON.parse(area.boundaryStr) || []);
|
||||||
});
|
});
|
||||||
//停车区
|
|
||||||
this.parkingList.forEach(parking => {
|
this.parkingList.forEach(parking => {
|
||||||
this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
|
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.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
|
||||||
});
|
});
|
||||||
//禁停区
|
|
||||||
this.noParkingList.forEach(noparking => {
|
this.noParkingList.forEach(noparking => {
|
||||||
this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
|
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.noridingList.forEach(noriding => {
|
||||||
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
|
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
|
||||||
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
|
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
|
||||||
});
|
});
|
||||||
// setTimeout(() => {
|
|
||||||
// this.setFitView();
|
|
||||||
// }, 2000);
|
|
||||||
}).catch((e) => {
|
}).catch((e) => {
|
||||||
console.log(e);
|
console.log(e);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 刷新点标记
|
|
||||||
freshMarker(points) {
|
freshMarker(points) {
|
||||||
let that = this;
|
let that = this;
|
||||||
|
|
||||||
console.log("刷新点标记====", points)
|
console.log("刷新点标记====", points);
|
||||||
|
|
||||||
// 检查 points 数据格式
|
|
||||||
if (!Array.isArray(points)) {
|
if (!Array.isArray(points)) {
|
||||||
console.error("Points data is not an array");
|
console.error("Points data is not an array");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log("this.cluster=======", this.cluster)
|
|
||||||
|
|
||||||
// 聚合对象存在,则修改数据
|
|
||||||
if (this.cluster) {
|
if (this.cluster) {
|
||||||
try {
|
try {
|
||||||
this.cluster.setData(points);
|
this.cluster.setData(points);
|
||||||
|
@ -372,17 +373,16 @@ export default {
|
||||||
console.error("Error setting cluster data: ", error);
|
console.error("Error setting cluster data: ", error);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
// 插件未加载的情况
|
|
||||||
this.map.plugin(["AMap.MarkerCluster"], () => {
|
this.map.plugin(["AMap.MarkerCluster"], () => {
|
||||||
that.cluster = new AMap.MarkerCluster(
|
that.cluster = new AMap.MarkerCluster(
|
||||||
this.map, //地图实例
|
this.map,
|
||||||
points, //海量点数据,数据中需包含经纬度信息字段 lnglat
|
points,
|
||||||
{
|
{
|
||||||
styles: this.getStyles(),
|
styles: this.getStyles(),
|
||||||
renderMarker: this.getRenderMarker, //上述步骤的自定义非聚合点样式
|
renderMarker: this.getRenderMarker,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
// 检查 cluster 对象是否正确初始化
|
|
||||||
if (that.cluster) {
|
if (that.cluster) {
|
||||||
console.log("Cluster 初始化成功");
|
console.log("Cluster 初始化成功");
|
||||||
that.cluster.on('click', that.onClickCluster);
|
that.cluster.on('click', that.onClickCluster);
|
||||||
|
@ -392,18 +392,17 @@ export default {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 点击聚合对象事件
|
|
||||||
onClickCluster(e) {
|
onClickCluster(e) {
|
||||||
console.log("点击聚合点====", e)
|
console.log("点击聚合点====", e)
|
||||||
this.onDeviceList = e.clusterData.map(item => item);
|
this.onDeviceList = e.clusterData.map(item => item);
|
||||||
// 如果数量 > 1,则打开列表页
|
|
||||||
if (this.onDeviceList.length > 1) {
|
if (this.onDeviceList.length > 1) {
|
||||||
console.log("打开列表====", this.onDeviceList)
|
|
||||||
let content = this.generateInfoContent(this.onDeviceList);
|
let content = this.generateInfoContent(this.onDeviceList);
|
||||||
this.infoWindow.setContent(content);
|
this.infoWindow.setContent(content);
|
||||||
this.infoWindow.open(this.map, e.lnglat);
|
this.infoWindow.open(this.map, e.lnglat);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
generateInfoContent(data) {
|
generateInfoContent(data) {
|
||||||
let content = `<div style="max-hight: 500px; overflow-y: auto;">
|
let content = `<div style="max-hight: 500px; overflow-y: auto;">
|
||||||
<table class="info-table">
|
<table class="info-table">
|
||||||
|
@ -467,30 +466,32 @@ export default {
|
||||||
|
|
||||||
return content;
|
return content;
|
||||||
},
|
},
|
||||||
|
|
||||||
handleInfoWindowClick(event) {
|
handleInfoWindowClick(event) {
|
||||||
console.log("点击详情按钮====", event)
|
console.log("点击详情按钮====", event);
|
||||||
|
|
||||||
const button = event.target.closest('.detail-btn');
|
const button = event.target.closest('.detail-btn');
|
||||||
if (button) {
|
if (button) {
|
||||||
const deviceId = button.getAttribute('data-device-id');
|
const deviceId = button.getAttribute('data-device-id');
|
||||||
this.onClickMarker(deviceId);
|
this.onClickMarker(deviceId);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 自定义非聚合点样式
|
|
||||||
getRenderMarker(context) {
|
getRenderMarker(context) {
|
||||||
|
console.log('调用了 getRenderMarker');
|
||||||
let device = context.data[0];
|
let device = context.data[0];
|
||||||
let content = `
|
let content = `
|
||||||
<div class="apiary-marker">
|
<div class="apiary-marker">
|
||||||
<div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
|
<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>
|
</div>
|
||||||
`
|
`;
|
||||||
context.marker.setContent(content);
|
context.marker.setContent(content);
|
||||||
context.marker.on("click", () => this.onClickMarker(device.deviceId));
|
context.marker.on("click", () => this.onClickMarker(device.deviceId));
|
||||||
},
|
},
|
||||||
// 点击非聚合点事件
|
|
||||||
onClickMarker(deviceId) {
|
onClickMarker(deviceId) {
|
||||||
console.log("点击非聚合点====", deviceId)
|
console.log("点击非聚合点====", deviceId);
|
||||||
getDevice(deviceId).then(response => {
|
getDevice(deviceId).then(response => {
|
||||||
this.open2 = true;
|
this.open2 = true;
|
||||||
this.form = response.data;
|
this.form = response.data;
|
||||||
|
@ -498,8 +499,9 @@ export default {
|
||||||
this.key++;
|
this.key++;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
openDetail(deviceId) {
|
openDetail(deviceId) {
|
||||||
console.log("点击非聚合点====", deviceId)
|
console.log("点击非聚合点====", deviceId);
|
||||||
getDevice(deviceId).then(response => {
|
getDevice(deviceId).then(response => {
|
||||||
this.open2 = true;
|
this.open2 = true;
|
||||||
this.form = response.data;
|
this.form = response.data;
|
||||||
|
@ -507,38 +509,34 @@ export default {
|
||||||
this.key++;
|
this.key++;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
getStyles() {
|
getStyles() {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
//聚合量在1-10时,聚合点的样式
|
url: "//a.amap.com/jsapi_demos/static/images/blue.png",
|
||||||
url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址
|
size: new AMap.Size(32, 32),
|
||||||
size: new AMap.Size(32, 32), //图标显示图片的大小
|
offset: new AMap.Pixel(-16, -16),
|
||||||
offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
|
textColor: "#fff",
|
||||||
textColor: "#fff", //文字的颜色
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
//聚合量在11-100时,聚合点的样式
|
|
||||||
url: "//a.amap.com/jsapi_demos/static/images/green.png",
|
url: "//a.amap.com/jsapi_demos/static/images/green.png",
|
||||||
size: new AMap.Size(32, 32),
|
size: new AMap.Size(32, 32),
|
||||||
offset: new AMap.Pixel(-16, -16),
|
offset: new AMap.Pixel(-16, -16),
|
||||||
textColor: "#fff",
|
textColor: "#fff",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
//聚合量在101-1000时,聚合点的样式
|
|
||||||
url: "//a.amap.com/jsapi_demos/static/images/orange.png",
|
url: "//a.amap.com/jsapi_demos/static/images/orange.png",
|
||||||
size: new AMap.Size(36, 36),
|
size: new AMap.Size(36, 36),
|
||||||
offset: new AMap.Pixel(-18, -18),
|
offset: new AMap.Pixel(-18, -18),
|
||||||
textColor: "#fff"
|
textColor: "#fff"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
//聚合量在1001-10000时,聚合点的样式
|
|
||||||
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
||||||
size: new AMap.Size(48, 48),
|
size: new AMap.Size(48, 48),
|
||||||
offset: new AMap.Pixel(-24, -24),
|
offset: new AMap.Pixel(-24, -24),
|
||||||
textColor: "#fff"
|
textColor: "#fff"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
//聚合量在10001-100000时,聚合点的样式
|
|
||||||
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
||||||
size: new AMap.Size(48, 48),
|
size: new AMap.Size(48, 48),
|
||||||
offset: new AMap.Pixel(-24, -24),
|
offset: new AMap.Pixel(-24, -24),
|
||||||
|
@ -546,13 +544,14 @@ export default {
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
addMarker2(parking, icon, title, color) {
|
addMarker2(parking, icon, title, color) {
|
||||||
let marker = new AMap.Marker({
|
let marker = new AMap.Marker({
|
||||||
map: this.map,
|
map: this.map,
|
||||||
icon: new AMap.Icon({
|
icon: new AMap.Icon({
|
||||||
image: icon,
|
image: icon,
|
||||||
size: new AMap.Size(25, 36), // 设置图标的宽高
|
size: new AMap.Size(25, 36),
|
||||||
imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
|
imageSize: new AMap.Size(25, 36)
|
||||||
}),
|
}),
|
||||||
position: [parking.longitude, parking.latitude],
|
position: [parking.longitude, parking.latitude],
|
||||||
offset: new AMap.Pixel(-12.5, -36)
|
offset: new AMap.Pixel(-12.5, -36)
|
||||||
|
@ -560,35 +559,35 @@ export default {
|
||||||
|
|
||||||
this.markers.push(marker);
|
this.markers.push(marker);
|
||||||
|
|
||||||
// console.log("title============="+title)
|
|
||||||
// 创建一个 Text 实例来显示标题
|
|
||||||
let text = new AMap.Text({
|
let text = new AMap.Text({
|
||||||
text: title,
|
text: title,
|
||||||
anchor: 'center', // 设置文本的锚点
|
anchor: 'center',
|
||||||
position: [parking.longitude, parking.latitude],
|
position: [parking.longitude, parking.latitude],
|
||||||
offset: new AMap.Pixel(0, -50),
|
offset: new AMap.Pixel(0, -50),
|
||||||
style: {
|
style: {
|
||||||
'background-color': color, // 背景颜色为蓝色
|
'background-color': color,
|
||||||
'border': 'none', // 边框颜色与背景一致
|
'border': 'none',
|
||||||
'border-radius': '5px', // 圆角 5px
|
'border-radius': '5px',
|
||||||
'color': 'white', // 文字颜色为白色
|
'color': 'white',
|
||||||
'font-size': '12px', // 字体大小
|
'font-size': '12px',
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 将文本标签添加到地图实例
|
|
||||||
this.map.add(text);
|
this.map.add(text);
|
||||||
// console.log("text=============",text)
|
this.labels.push(text);
|
||||||
this.labels.push(text)
|
|
||||||
},
|
},
|
||||||
|
|
||||||
deviceMarker(areaId) {
|
deviceMarker(areaId) {
|
||||||
this.data = [];
|
this.data = [];
|
||||||
listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
|
listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
|
||||||
this.deviceList = response.rows;
|
// getDeviceLists(areaId).then(response => {
|
||||||
|
this.deviceList = response.rows
|
||||||
|
|
||||||
|
|
||||||
|
;
|
||||||
this.deviceList.forEach(device => {
|
this.deviceList.forEach(device => {
|
||||||
// 检查经纬度是否为空且为有效数字
|
|
||||||
if (device.longitude !== null && device.latitude !== null &&
|
if (device.longitude !== null && device.latitude !== null &&
|
||||||
!isNaN(device.longitude) && !isNaN(device.latitude)) {
|
!isNaN(device.longitude) && !isNaN(device.latitude)) {
|
||||||
this.data.push({
|
this.data.push({
|
||||||
lnglat: [device.longitude, device.latitude],
|
lnglat: [device.longitude, device.latitude],
|
||||||
status: device.status,
|
status: device.status,
|
||||||
|
@ -597,24 +596,50 @@ export default {
|
||||||
vehicleNum: device.vehicleNum,
|
vehicleNum: device.vehicleNum,
|
||||||
deviceId: device.deviceId
|
deviceId: device.deviceId
|
||||||
});
|
});
|
||||||
// this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
|
|
||||||
} else {
|
} else {
|
||||||
console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
|
console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 将所有标记添加到聚合器中
|
console.log(this.data,'this.datathis.datathis.data');
|
||||||
this.freshMarker(this.data);
|
this.freshMarker(this.data);
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
console.error('获取设备列表失败:', error);
|
console.error('获取设备列表失败:', error);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
addMarker(lng, lat, status, onlineStatus, title) {
|
addMarker(lng, lat, status, onlineStatus, title) {
|
||||||
|
|
||||||
|
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: [lng, lat],
|
||||||
|
offset: new AMap.Pixel(-12.5, -36)
|
||||||
|
});
|
||||||
|
|
||||||
|
this.markers.push(marker);
|
||||||
|
|
||||||
|
let text = new AMap.Text({
|
||||||
|
text: title,
|
||||||
|
anchor: 'center',
|
||||||
|
position: [lng, lat],
|
||||||
|
offset: new AMap.Pixel(0, -50),
|
||||||
|
style: {
|
||||||
|
'background-color': 'color',
|
||||||
|
'border': 'none',
|
||||||
|
'border-radius': '5px',
|
||||||
|
'color': 'white',
|
||||||
|
'font-size': '12px',
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.add(text);
|
||||||
|
this.labels.push(text);
|
||||||
},
|
},
|
||||||
|
|
||||||
//添加运营区边界
|
|
||||||
addArea(data) {
|
addArea(data) {
|
||||||
let polygon = new AMap.Polygon({
|
let polygon = new AMap.Polygon({
|
||||||
path: data,
|
path: data,
|
||||||
|
@ -626,78 +651,69 @@ export default {
|
||||||
strokeStyle: 'dashed',
|
strokeStyle: 'dashed',
|
||||||
strokeDasharray: [5, 5],
|
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);
|
this.map.add(polygon);
|
||||||
},
|
},
|
||||||
|
|
||||||
addParking(data, title, lon, lat) {
|
addParking(data, title, lon, lat) {
|
||||||
let polygon = new AMap.Polygon({
|
let polygon = new AMap.Polygon({
|
||||||
path: data,
|
path: data,
|
||||||
fillColor: '#ccebc5',
|
fillColor: '#ccebc5',
|
||||||
strokeOpacity: 1,
|
strokeOpacity: 1,
|
||||||
fillOpacity: 0.5,
|
fillOpacity: 0.5,
|
||||||
strokeColor: '#3b7ed9', // 修改边界颜色为红色
|
strokeColor: '#3b7ed9',
|
||||||
strokeWeight: 2, // 加粗边界
|
strokeWeight: 2,
|
||||||
strokeStyle: 'solid',
|
strokeStyle: 'solid',
|
||||||
strokeDasharray: [5, 5],
|
strokeDasharray: [5, 5],
|
||||||
});
|
});
|
||||||
polygon.on('mouseover', () => {
|
polygon.on('mouseover', () => {
|
||||||
polygon.setOptions({
|
polygon.setOptions({
|
||||||
fillOpacity: 0.7,
|
fillOpacity: 0.7,
|
||||||
fillColor: '#71b7cc' // 鼠标悬浮时填充颜色为红色
|
fillColor: '#71b7cc'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
polygon.on('mouseout', () => {
|
polygon.on('mouseout', () => {
|
||||||
polygon.setOptions({
|
polygon.setOptions({
|
||||||
fillOpacity: 0.5,
|
fillOpacity: 0.5,
|
||||||
fillColor: '#a7c1d0' // 鼠标移出时恢复填充颜色
|
fillColor: '#a7c1d0'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.map.add(polygon);
|
this.map.add(polygon);
|
||||||
},
|
},
|
||||||
|
|
||||||
addNoParking(data) {
|
addNoParking(data) {
|
||||||
let polygon = new AMap.Polygon({
|
let polygon = new AMap.Polygon({
|
||||||
path: data,
|
path: data,
|
||||||
fillColor: '#ccebc5',
|
fillColor: '#ccebc5',
|
||||||
strokeOpacity: 1,
|
strokeOpacity: 1,
|
||||||
fillOpacity: 0.5,
|
fillOpacity: 0.5,
|
||||||
strokeColor: '#ff0000', // 修改边界颜色为红色
|
strokeColor: '#ff0000',
|
||||||
strokeWeight: 2, // 加粗边界
|
strokeWeight: 2,
|
||||||
strokeStyle: 'solid',
|
strokeStyle: 'solid',
|
||||||
strokeDasharray: [5, 5],
|
strokeDasharray: [5, 5],
|
||||||
});
|
});
|
||||||
polygon.on('mouseover', () => {
|
polygon.on('mouseover', () => {
|
||||||
polygon.setOptions({
|
polygon.setOptions({
|
||||||
fillOpacity: 0.7,
|
fillOpacity: 0.7,
|
||||||
fillColor: '#ff0000' // 鼠标悬浮时填充颜色为红色
|
fillColor: '#ff0000'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
polygon.on('mouseout', () => {
|
polygon.on('mouseout', () => {
|
||||||
polygon.setOptions({
|
polygon.setOptions({
|
||||||
fillOpacity: 0.5,
|
fillOpacity: 0.5,
|
||||||
fillColor: '#cc7b7b' // 鼠标移出时恢复填充颜色
|
fillColor: '#cc7b7b'
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.map.add(polygon);
|
this.map.add(polygon);
|
||||||
},
|
},
|
||||||
|
|
||||||
addNoriding(data, title, lon, lat) {
|
addNoriding(data, title, lon, lat) {
|
||||||
let polygon = new AMap.Polygon({
|
let polygon = new AMap.Polygon({
|
||||||
path: data,
|
path: data,
|
||||||
fillColor: '#ccebc5',
|
fillColor: '#ccebc5',
|
||||||
strokeOpacity: 1,
|
strokeOpacity: 1,
|
||||||
fillOpacity: 0.5,
|
fillOpacity: 0.5,
|
||||||
strokeColor: '#ffcc00', // 修改边界颜色为红色
|
strokeColor: '#ffcc00',
|
||||||
strokeWeight: 2, // 加粗边界
|
strokeWeight: 2,
|
||||||
strokeStyle: 'solid',
|
strokeStyle: 'solid',
|
||||||
strokeDasharray: [5, 5],
|
strokeDasharray: [5, 5],
|
||||||
});
|
});
|
||||||
|
@ -718,6 +734,7 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#container {
|
#container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
|
@ -214,18 +214,18 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<!-- <el-col :span="12">-->
|
||||||
<el-form-item label="分账项目" prop="dividendItemIds">
|
<!-- <el-form-item label="分账项目" prop="dividendItemIds">-->
|
||||||
<el-checkbox-group v-model="form.dividendItemIds" size="medium">
|
<!-- <el-checkbox-group v-model="form.dividendItemIds" size="medium">-->
|
||||||
<el-checkbox
|
<!-- <el-checkbox-->
|
||||||
v-for="dict in dict.type.et_dividend_item"
|
<!-- v-for="dict in dict.type.et_dividend_item"-->
|
||||||
:key="dict.value"
|
<!-- :key="dict.value"-->
|
||||||
:label="dict.value">
|
<!-- :label="dict.value">-->
|
||||||
{{dict.label}}
|
<!-- {{dict.label}}-->
|
||||||
</el-checkbox>
|
<!-- </el-checkbox>-->
|
||||||
</el-checkbox-group>
|
<!-- </el-checkbox-group>-->
|
||||||
</el-form-item>
|
<!-- </el-form-item>-->
|
||||||
</el-col>
|
<!-- </el-col>-->
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="状态" prop="dividendStatus">
|
<el-form-item label="状态" prop="dividendStatus">
|
||||||
<el-radio-group v-model="form.dividendStatus">
|
<el-radio-group v-model="form.dividendStatus">
|
||||||
|
@ -342,9 +342,9 @@ export default {
|
||||||
{ required: true, message: "分账比例不能为空", trigger: "blur" },
|
{ required: true, message: "分账比例不能为空", trigger: "blur" },
|
||||||
{ pattern: /^\d+$/, message: '分账比例必须为正整数', trigger: 'blur' }
|
{ pattern: /^\d+$/, message: '分账比例必须为正整数', trigger: 'blur' }
|
||||||
],
|
],
|
||||||
dividendItemIds: [
|
// dividendItemIds: [
|
||||||
{ required: true, message: "分账项目不能为空", trigger: "blur" },
|
// { required: true, message: "分账项目不能为空", trigger: "blur" },
|
||||||
],
|
// ],
|
||||||
cooperationTime: [
|
cooperationTime: [
|
||||||
{ required: true, message: "请选择合作时间", trigger: "blur" }
|
{ required: true, message: "请选择合作时间", trigger: "blur" }
|
||||||
],
|
],
|
||||||
|
|
Loading…
Reference in New Issue
Block a user