订单详情修改
This commit is contained in:
parent
c75308b390
commit
aaebfc583d
|
|
@ -27,7 +27,7 @@ export default {
|
|||
}
|
||||
|
||||
</style>
|
||||
<style lang="scss" >
|
||||
<!-- <style lang="scss" >
|
||||
.el-select {
|
||||
.el-input__inner{
|
||||
color: red;
|
||||
|
|
@ -39,4 +39,4 @@ export default {
|
|||
color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
|
|
@ -18,6 +18,8 @@
|
|||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import globalConfig from '@/utils/config/globalConfig'
|
||||
import AreaTextSelect from '@/components/AreaTextSelect/index.vue'
|
||||
import { getArea } from '@/api/system/area'
|
||||
import { listParking } from '@/api/system/parking'
|
||||
export default {
|
||||
name: "TrajectoryMap",
|
||||
components: { AreaTextSelect },
|
||||
|
|
@ -38,6 +40,10 @@ export default {
|
|||
type: String,
|
||||
default: '27.101745'
|
||||
},
|
||||
areaId: {
|
||||
type: Number,
|
||||
default: ''
|
||||
},
|
||||
tripRouteStr: {
|
||||
type: String,
|
||||
default: ''
|
||||
|
|
@ -56,11 +62,18 @@ export default {
|
|||
area: {
|
||||
province: '福建省',
|
||||
city: '宁德市',
|
||||
}
|
||||
},
|
||||
area:{},
|
||||
parkingList:[],
|
||||
noParkingList:[],
|
||||
noridingList:[],
|
||||
labels: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initAMap();
|
||||
console.log(this.areaId,'areaIdareaIdareaId');
|
||||
// this.initAMap();
|
||||
this.getAreas(this.areaId)
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyMap();
|
||||
|
|
@ -75,19 +88,91 @@ export default {
|
|||
console.log("轨迹=====地图实例不存在，无需销毁");
|
||||
}
|
||||
},
|
||||
showMarkers() {
|
||||
if (this.show) {
|
||||
// this.markers.forEach(marker => {
|
||||
// marker.show();
|
||||
// });
|
||||
this.labels.forEach(label => {
|
||||
label.show();
|
||||
});
|
||||
} else {
|
||||
// this.markers.forEach(marker => {
|
||||
// marker.hide();
|
||||
// });
|
||||
this.labels.forEach(label => {
|
||||
label.hide();
|
||||
});
|
||||
}
|
||||
this.show = !this.show;
|
||||
const elements = document.querySelectorAll('.apiary-marker-name');
|
||||
elements.forEach(element => {
|
||||
element.style.visibility = this.show ? 'hidden' : 'visible';
|
||||
});
|
||||
},
|
||||
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.MoveAnimation"]
|
||||
}).then((AMap) => {
|
||||
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]);
|
||||
this.AMap = AMap;
|
||||
this.map = new AMap.Map("container", {
|
||||
// 设置地图容器id
|
||||
resizeEnable: true,
|
||||
viewMode: "3D", // 是否为3D地图模式
|
||||
zoom: 16, // 初始化地图级别
|
||||
center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
|
||||
// center: [this.initLng == null ? 120.250452 : this.initLng, this.initLat == null ? 27.101745 : this.initLat], // 初始化地图中心点位置
|
||||
center:[longitude,latitude]
|
||||
});
|
||||
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.trajectory(); //轨迹
|
||||
|
||||
|
|
@ -96,6 +181,142 @@ export default {
|
|||
console.log(e);
|
||||
});
|
||||
},
|
||||
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)
|
||||
},
|
||||
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);
|
||||
},
|
||||
// 显示轨迹
|
||||
trajectory() {
|
||||
this.line = JSON.parse(this.tripRouteStr)
|
||||
|
|
|
|||
|
|
@ -240,6 +240,7 @@
|
|||
v-if="showPlaceSearchMap"
|
||||
ref="map"
|
||||
:key="key"
|
||||
:areaId="form.areaId"
|
||||
height="400px"
|
||||
:trip-route-str="form.tripRouteStr"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user