Skip to content

F
FleetTruckView
Commit 8b5440d8 authored by 高晓帆's avatar 高晓帆
Browse files
Options

最新代码

parent 40ebeb68
Show whitespace changes
Inline Side-by-side
Showing with 352 additions and 389 deletions
package.json
View file @ 8b5440d8
......@@ -10,7 +10,6 @@
"dependencies": {
"@turf/turf": "^6.5.0",
"axios": "^1.3.4",
"deck.gl": "^8.9.21",
"dexie": "^3.2.3",
"leaflet": "^1.9.3",
"leaflet-rotate": "^0.2.5",
......
src/views/js/view_def.js
View file @ 8b5440d8
......@@ -71,6 +71,30 @@ export const INFORMATION_MESSAGE = [
],
[
{
name: 'loadBrakeCmd',
label: '装载制动给定'
},
],
[
{
name: 'loadBrakeStatus',
label: '装载制动反馈'
},
],
[
{
name: 'mechBrakeCmd',
label: '机械制动给定'
},
],
[
{
name: 'mechBrakeStatus',
label: '机械制动反馈'
},
],
[
{
name: 'AutoChangeFlag',
label: '转向状态码'
},
......
src/views/map/MapLeaflet.vue
View file @ 8b5440d8
<template>
<div class="map-contain" id="container">
<!-- <div id="map" ref="root"></div> -->
<img src="/image/compass.png" class="compass" ref="compass"
:style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
<div class="map-contain">
<div id="map" ref="root"></div>
<img src="/image/compass.png" class="compass" ref="compass" :style="`transform: rotateZ(${compassRotationAngle}rad)`" alt="" @click="changeCompass">
<div class="navigate-preview">
<img src="/image/navigate.png" class="navigate" @click="changeNavigate" alt="" />
</div>
......@@ -10,21 +9,20 @@
</template>
<script setup>
import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
import { useMapStore } from '@/store/MapStore.js'
import { useVehicleStore } from '@/store/VehicleStore'
import { storeToRefs } from 'pinia'
import { vehicleScale } from '../js/tools'
import Deck from "@/tools/Deck"
import L from 'leaflet'
import 'leaflet-rotate'
import '@/tools/Leaflet.LayerGroup.Collision'
import * as turf from '@turf/turf'
const safe_color = '#FFA500'
const BASE_RAD = 1.5707963267948966
const MAP_ZOOM = 18
const LAYER_PROPOITY = {
import { markRaw, onMounted, watch, ref, computed, onBeforeUnmount, nextTick } from 'vue'
import { useMapStore } from '@/store/MapStore.js'
import { useVehicleStore } from '@/store/VehicleStore'
import { storeToRefs } from 'pinia'
import { vehicleScale } from '../js/tools'
import L from 'leaflet'
import 'leaflet-rotate'
import '@/tools/Leaflet.LayerGroup.Collision'
import * as turf from '@turf/turf'
const safe_color = '#FFA500'
const BASE_RAD = 1.5707963267948966
const MAP_ZOOM = 18
const LAYER_PROPOITY = {
runablearea: 1,
staticobjs: 2,
diggingarea: 3,
......@@ -43,40 +41,39 @@ const LAYER_PROPOITY = {
avoidancePath: 15,
traj: 16,
obstacle: 17
}
}
const vehicles = {}
let ismousedown = false
let ismousemove = false
let resetTime = null
let obstaclePolygons = []
let dynamicPaths = []
const vehicles = {}
let ismousedown = false
let ismousemove = false
let resetTime = null
let obstaclePolygons = []
let dynamicPaths=[]
const reNavigateTime = 10 * 1000
const reNavigateTime = 10 * 1000
const props = defineProps({
const props = defineProps({
isShowBasic: Boolean,
clearSinglePointEnable: Boolean,
reloadData: Boolean
})
let map = markRaw({})
const layers = ref([])
let currentPosition = markRaw([])
const root = ref(null)
const mapLayers = markRaw({})
const safeObjects = markRaw({})
const safeTrajs = markRaw({})
const singlePaths = markRaw([])
const navigate = ref(true)
const currentRotation = ref(0)
const markerLayerGroupLists = markRaw({})
const isSinglePreview = ref(false)
const compassRotationAngle = ref(0)
const compass = ref(null)
const mapStore = useMapStore()
const mapStoreToRefs = storeToRefs(mapStore)
const {
})
let map = markRaw({})
let currentPosition = markRaw([])
const root = ref(null)
const mapLayers = markRaw({})
const safeObjects = markRaw({})
const safeTrajs = markRaw({})
const singlePaths = markRaw([])
const navigate = ref(true)
const currentRotation = ref(0)
const markerLayerGroupLists = markRaw({})
const isSinglePreview = ref(false)
const compassRotationAngle = ref(0)
const compass = ref(null)
const mapStore = useMapStore()
const mapStoreToRefs = storeToRefs(mapStore)
const {
lanenode,
lane,
runablearea,
......@@ -97,94 +94,69 @@ const {
avoidancePath, // 绕障路径
obstacleData,
dynamicPathinfo, // 车辆动态路权信息
} = mapStoreToRefs
const vehicleStore = useVehicleStore()
const vehicleStoreToRefs = storeToRefs(vehicleStore)
const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
} = mapStoreToRefs
const vehicleStore = useVehicleStore()
const vehicleStoreToRefs = storeToRefs(vehicleStore)
const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
const deviceId = computed(() => {
const deviceId = computed(() => {
return paraminfo.value.deviceId
})
const emits = defineEmits(['handleSend'])
onMounted(() => {
let timer=null
map = new Deck({
id:'maps',
parent: document.getElementById('container'),
initialViewState: {
latitude: document.location.mapCenter[0],
longitude: document.location.mapCenter[1],
zoom: 15,
maxZoom: 20,
pitch: 0,
bearing: 0
},
controller: true,
onViewStateChange: f => {
// navigate.value = false
// if(timer){
// clearTimeout(timer)
// timer = null
// }
// timer=setTimeout(() => {
// navigate.value = true
// }, 3 * 1000)
},
})
// map = L.map(root.value, {
// center: document.location.mapCenter,
// zoom: 14,
// zoomControl: false,
// minZoom: 10,
// maxZoom: 21,
// rotate: true,
// touchRotate: true
// })
// map.on('zoomend', () => {
// let zoom = map.getZoom()
// let { iconSize, iconAnchor } = vehicleScale(zoom)
// for (let vehicle in vehicles) {
// let icon = vehicles[vehicle].getIcon()
// let { iconUrl } = icon.options
// let newIcon = L.icon({
// iconUrl,
// iconSize,
// iconAnchor
// })
// vehicles[vehicle].setIcon(newIcon)
// }
// })
const emits = defineEmits(['handleSend'])
onMounted(() => {
map = L.map(root.value, {
center: document.location.mapCenter,
zoom: 14,
zoomControl: false,
minZoom: 10,
maxZoom: 21,
rotate: true,
touchRotate: true
})
map.on('zoomend', () => {
let zoom = map.getZoom()
let { iconSize, iconAnchor } = vehicleScale(zoom)
for (let vehicle in vehicles) {
let icon = vehicles[vehicle].getIcon()
let { iconUrl } = icon.options
let newIcon = L.icon({
iconUrl,
iconSize,
iconAnchor
})
vehicles[vehicle].setIcon(newIcon)
}
})
// let mapDom = root.value
// mapDom.addEventListener('mousedown', () => {
// changeMouseDown()
// })
let mapDom = root.value
mapDom.addEventListener('mousedown', () => {
changeMouseDown()
})
// mapDom.addEventListener('mousemove', (evt) => {
// changeMouseMove()
// })
mapDom.addEventListener('mousemove', (evt) => {
changeMouseMove()
})
// mapDom.addEventListener('mouseup', (evt) => {
// changeMouseUp()
// })
mapDom.addEventListener('mouseup', (evt) => {
changeMouseUp()
})
emits('handleSend', {
type: 'syncMapVersion',
msg: {}
})
})
})
function changeNavigate() {
function changeNavigate() {
navigate.value = true
// dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
}
dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
}
// 指南针
function changeCompass() {
// 指南针
function changeCompass() {
dealVehicleRotate(0)
currentRotation.value = BASE_RAD
if (navigate.value) {
......@@ -192,13 +164,13 @@ function changeCompass() {
dealVehicleRotate()
}, 3 * 1000)
}
}
}
function changeMouseDown() {
function changeMouseDown() {
ismousedown = true
}
}
function changeMouseMove() {
function changeMouseMove() {
if (ismousedown) {
ismousemove = true
if (resetTime) {
......@@ -206,9 +178,9 @@ function changeMouseMove() {
resetTime = null
}
}
}
}
function changeMouseUp() {
function changeMouseUp() {
if (!currentPosition) return
if (ismousedown && ismousemove) {
navigate.value = false
......@@ -222,9 +194,9 @@ function changeMouseUp() {
ismousedown = false
ismousemove = false
}
}
}
function dealVehicleRotate(rotate) {
function dealVehicleRotate(rotate) {
let keys = Object.keys(vehicles)
let target = keys.find(item => item === deviceId.value)
let currentTarget = vehicles[target]
......@@ -245,74 +217,51 @@ function dealVehicleRotate(rotate) {
vehicles[key].setRotation(-oldHeading + vehicleHeading)
}
}
}
}
function dealMapLayer(value, color, layerName) {
function dealMapLayer(value, color, layerName) {
if (!value || !map) return
let result = JSON.parse(value)
if (!result) return
// if (mapLayers[layerName]) {
// map.removeLayer(mapLayers[layerName])
// delete mapLayers[layerName]
// }
let obj = {};
if (layerName === 'barricade') {
obj = {
getLineColor: map.convertColor('#0066ff'),
if (mapLayers[layerName]) {
map.removeLayer(mapLayers[layerName])
delete mapLayers[layerName]
}
let layer = L.geoJSON(result, {
style: function (feature) {
if(layerName === 'barricade'){
return {
color: '#0066ff',
opacity: 1,
width: 5
width:5
}
} else {
obj = {
getLineColor: feature => {
return layerName === 'lane' ? map.convertColor('#eee', 0.5) : map.convertColor(feature.properties.color, 1)
},
getFillColor: feature => {
let opacity = layerName === 'runablearea' ? .5 : .7
return layerName === 'electronicFence'
? map.convertColor(feature.properties.color, opacity)
: map.convertColor(color, opacity) ? map.convertColor(color, opacity) : map.convertColor(feature.properties.color, opacity)
// const hex = f.properties.color;
// // convert to RGB
// return color ? color.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)) : hex ? hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16)) : [0, 0, 0];
},
}else{
return {
color: layerName === 'lane' ? '#eee' : feature.properties.color,
opacity: layerName === 'lane' ? .5 : 1,
fillColor: layerName === 'electronicFence'
? feature.properties.color
: color ? color : feature.properties.color,
fillOpacity: layerName === 'runablearea' ? .5 : .7
}
}
map.createGeoJsonLayer(result, obj, layerName)
// let layer = L.geoJSON(result, {
// style: function (feature) {
// if (layerName === 'barricade') {
// return {
// color: '#0066ff',
// opacity: 1,
// width: 5
// }
// } else {
// return {
// color: layerName === 'lane' ? '#eee' : feature.properties.color,
// opacity: layerName === 'lane' ? .5 : 1,
// fillColor: layerName === 'electronicFence'
// ? feature.properties.color
// : color ? color : feature.properties.color,
// fillOpacity: layerName === 'runablearea' ? .5 : .7
// }
// }
// },
// })
// mapLayers[layerName] = layer.addTo(map)
// let bottomLayerOne = mapLayers['diggingworkarea']
// let bottomLayerTwo = mapLayers['runablearea']
// let bottomLayerThree = mapLayers['barricade']
// bottomLayerThree && bottomLayerThree.bringToFront()
// bottomLayerOne && bottomLayerOne.bringToBack()
// bottomLayerTwo && bottomLayerTwo.bringToBack()
// mapStore.setData(layerName, null)
}
},
})
mapLayers[layerName] = layer.addTo(map)
let bottomLayerOne = mapLayers['diggingworkarea']
let bottomLayerTwo = mapLayers['runablearea']
let bottomLayerThree = mapLayers['barricade']
bottomLayerThree && bottomLayerThree.bringToFront()
bottomLayerOne && bottomLayerOne.bringToBack()
bottomLayerTwo && bottomLayerTwo.bringToBack()
mapStore.setData(layerName, null)
}
function dealMapPath(value, layerName, color) {
function dealMapPath(value, layerName, color) {
if (mapLayers[layerName]) {
map.removeLayer(mapLayers[layerName])
delete mapLayers[layerName]
......@@ -338,11 +287,11 @@ function dealMapPath(value, layerName, color) {
}).addTo(map)
mapLayers[`${layerName}Buffer`].bringToFront()
}
}
}
function deleteMarker(features, layerName) {
function deleteMarker(features, layerName) {
Object.keys(markerLayerGroupLists).forEach(item => {
if (item.includes(layerName)) {
if(item.includes(layerName)){
map.removeLayer(markerLayerGroupLists[item])
}
})
......@@ -359,9 +308,9 @@ function deleteMarker(features, layerName) {
})
markerLayerGroupLists[`${layerName}${id}`].setIcon(icon)
}
}
}
function dealDivIcon(value, layerName) {
function dealDivIcon(value, layerName) {
if (!value || !map) return
let result = JSON.parse(value)
if (!result) return
......@@ -405,17 +354,17 @@ function dealDivIcon(value, layerName) {
markerLayerGroup.addTo(map)
mapStore.setData(layerName, null)
}
}
function removeLayer(obj, vehicleID) {
function removeLayer(obj, vehicleID) {
if (obj[vehicleID]) {
for (let item in obj[vehicleID]) {
map.removeLayer(obj[vehicleID][item])
}
}
}
}
function adjustmentLayer() {
function adjustmentLayer() {
mapLayers['currentPath'] && mapLayers['currentPath'].bringToFront()
mapLayers['nextPath'] && mapLayers['nextPath'].bringToFront()
......@@ -429,9 +378,9 @@ function adjustmentLayer() {
for (let key in safeTrajs) {
safeTrajs[key] && safeTrajs[key]['pathBuffer'] && safeTrajs[key]['pathBuffer'].bringToFront()
}
}
}
function dealSafe(vehicleID, safe) {
function dealSafe(vehicleID, safe) {
if (!map) return
const { enable, data, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = safe
......@@ -447,16 +396,16 @@ function dealSafe(vehicleID, safe) {
safeObjects[vehicleID][i] = layer.addTo(map)
safeObjects[vehicleID][i].bringToFront()
}
}
}
function dealTraj(vehicleID, traj) {
function dealTraj(vehicleID, traj) {
if (!traj || !map) return
const { trajPathWid, radius, dealedData, vehicleType, vehicleLatitude, vehicleLongtitude } = traj
removeLayer(safeTrajs, vehicleID)
safeTrajs[vehicleID] = {}
// if (!dealedData) return
// if ((dealedData && !dealedData.length) || !radius)) return
if ([1, 20, 21].includes(vehicleType && !radius)) return;
if([1, 20, 21].includes(vehicleType && !radius)) return;
const zIndex = LAYER_PROPOITY['traj']
if ([1, 20, 21].includes(vehicleType) && radius) {
......@@ -464,7 +413,7 @@ function dealTraj(vehicleID, traj) {
safeTrajs[vehicleID]['circle'] = layer.addTo(map)
safeTrajs[vehicleID]['circle'].bringToFront()
} else {
if (dealedData && !dealedData.length) return;
if(dealedData && !dealedData.length) return;
let path = L.polyline(JSON.parse(JSON.stringify(dealedData)), {})
safeTrajs[vehicleID]['path'] = path
let bufferLine = turf.buffer(path.toGeoJSON(), trajPathWid / 2, { units: "meters" })
......@@ -479,18 +428,18 @@ function dealTraj(vehicleID, traj) {
safeTrajs[vehicleID]['pathBuffer'] = layer.addTo(map)
safeTrajs[vehicleID]['pathBuffer'].bringToFront()
}
}
}
function rotateVehicles(vehicleHeading) {
function rotateVehicles(vehicleHeading) {
for (let key in vehicles) {
if (key !== deviceId.value) {
let oldHeading = vehicles[key].options['vehicleHeading']
vehicles[key].setRotation(-oldHeading + vehicleHeading)
}
}
}
}
function dealMapRotate(rotationAngle, center, zoom) {
function dealMapRotate(rotationAngle, center, zoom) {
let rotate = 0
if (rotationAngle) {
rotate = turf.radiansToDegrees(rotationAngle - BASE_RAD)
......@@ -499,108 +448,83 @@ function dealMapRotate(rotationAngle, center, zoom) {
compassRotationAngle.value = rotationAngle
map.setBearing(rotate)
}
center && center.length && map.flyTo(center, zoom, { animate: false })
}
let num = 0
let markerList = {}
function dealVehiclePosition(value) {
center && center.length && map.flyTo(center, zoom, {animate: false})
}
function dealVehiclePosition(value) {
if (!map || !value.length) return
// if(num==1) return
let list = []
// let zoom = map.getZoom()
// let { iconSize, iconAnchor } = vehicleScale(zoom)
let zoom = map.getZoom()
let { iconSize, iconAnchor } = vehicleScale(zoom)
for (let i = 0; i < value.length; i++) {
const item = value[i]
const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
let vehiclePosition = [vehicleLongtitude, vehicleLatitude]
let obj = {
name: vehicleID,
coordinates: vehiclePosition,
rotate: vehicleHeading
let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
if (vehicles[vehicleID]) {
let beforeIconUrl = vehicles[vehicleID].getIcon().options
? vehicles[vehicleID].getIcon().options.iconUrl
: vehicles[vehicleID].getIcon().iconUrl
if (!beforeIconUrl.includes(image)) {
let newIcon = L.icon({
iconUrl: `/image/${image}.png`,
iconSize,
iconAnchor
})
vehicles[vehicleID].setIcon(newIcon)
}
markerList[vehicleID] = obj
vehicles[vehicleID].setLatLng(vehiclePosition)
} else {
let icon = L.icon({
iconUrl: `/image/${image}.png`,
iconSize,
iconAnchor,
})
vehicles[vehicleID] = L.marker(vehiclePosition, {
icon: icon,
draggable: false,
rotationOrigin: 'center',
rotationAngle: 0,
zIndexOffset: 999
}).addTo(map)
vehicles[vehicleID].bindTooltip(`${vehicleID}`, {
permanent: true,
direction: 'center',
}).openTooltip()
}
vehicles[vehicleID].options = Object.assign({}, vehicles[vehicleID].options, {
vehicleHeading,
vehicleLongtitude,
vehicleLatitude
})
if (vehicleID === deviceId.value) {
// map.setRotation(30)
// if (navigate.value) {
// map.flyTo(vehiclePosition)
// }
if(num==0){
map.flyTo(vehiclePosition)
currentPosition = vehiclePosition
if (navigate.value) {
if (vehicleHeading !== currentRotation.value) {
rotateVehicles(vehicleHeading)
}
currentRotation.value = vehicleHeading
dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
vehicles[vehicleID].setRotation(0)
} else {
// 再不旋转地图的情况下，需要旋转车辆本身(弧度)
vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
}
} else {
// 非本车
vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
}
// if (vehicles[vehicleID]) {
// let beforeIconUrl = vehicles[vehicleID].getIcon().options
// ? vehicles[vehicleID].getIcon().options.iconUrl
// : vehicles[vehicleID].getIcon().iconUrl
// if (!beforeIconUrl.includes(image)) {
// let newIcon = L.icon({
// iconUrl: `/image/${image}.png`,
// iconSize,
// iconAnchor
// })
// vehicles[vehicleID].setIcon(newIcon)
// }
// vehicles[vehicleID].setLatLng(vehiclePosition)
// } else {
// let icon = L.icon({
// iconUrl: `/image/${image}.png`,
// iconSize,
// iconAnchor,
// })
// vehicles[vehicleID] = L.marker(vehiclePosition, {
// icon: icon,
// draggable: false,
// rotationOrigin: 'center',
// rotationAngle: 0,
// zIndexOffset: 999
// }).addTo(map)
// vehicles[vehicleID].bindTooltip(`${vehicleID}`, {
// permanent: true,
// direction: 'center',
// }).openTooltip()
// }
// vehicles[vehicleID].options = Object.assign({}, vehicles[vehicleID].options, {
// vehicleHeading,
// vehicleLongtitude,
// vehicleLatitude
// })
// if (vehicleID === deviceId.value) {
// currentPosition = vehiclePosition
// if (navigate.value) {
// if (vehicleHeading !== currentRotation.value) {
// rotateVehicles(vehicleHeading)
// }
// currentRotation.value = vehicleHeading
// dealMapRotate(vehicleHeading, vehiclePosition, zoom <= MAP_ZOOM ? MAP_ZOOM : zoom)
// vehicles[vehicleID].setRotation(0)
// } else {
// // 再不旋转地图的情况下，需要旋转车辆本身(弧度)
// vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
// }
// } else {
// // 非本车
// vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
// }
}
for (let key in markerList) {
list.push(markerList[key])
}
map.createCarModel(list, 'car-marker')
num++
}
function dealSingleDatas(datas) {
function dealSingleDatas(datas) {
const { color, coor } = datas
let path = L.polyline(coor, {
color,
}).addTo(map)
singlePaths.push(path)
}
}
function dealObtacleData(value) {
function dealObtacleData(value) {
if (obstaclePolygons.length) {
obstaclePolygons.forEach(item => map.removeLayer(item))
obstaclePolygons = []
......@@ -624,10 +548,10 @@ function dealObtacleData(value) {
obstaclePolygons.push(obstaclePolygon)
}
}
}
}
function dealDynamicDatas(datas) {
let name = 'dynamicLine';
function dealDynamicDatas(datas) {
let name='dynamicLine';
if (mapLayers[name]) {
map.removeLayer(mapLayers[name])
delete mapLayers[name]
......@@ -639,164 +563,162 @@ function dealDynamicDatas(datas) {
const { color, path } = datas
let pathNew = L.polyline(path, {
color,
opacity: 0.3,
weight: 30,
opacity:0.3,
weight:30,
}).addTo(map)
mapLayers[name] = pathNew
mapLayers[name].bringToFront()
// dynamicPaths.push(pathNew)
}
}
// 直接监听props.isShowBasic 不会触发
watch(() => props.isShowBasic, () => {
// 直接监听props.isShowBasic 不会触发
watch(() => props.isShowBasic, () => {
nextTick(() => {
map.invalidateSize(true)
})
})
})
watch(lanenode, (value) => {
// dealDivIcon(value, 'lanenode', '#ff0000')
}, { immediate: true, deep: true })
watch(lanenode, (value) => {
dealDivIcon(value, 'lanenode', '#ff0000')
}, {immediate: true, deep: true})
watch(lane, (value) => {
watch(lane, (value) => {
dealMapLayer(value, '#fff', 'lane')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(runablearea, (value) => {
watch(runablearea, (value) => {
dealMapLayer(value, '#98a0a0', 'runablearea')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(centerline, (value) => {
watch(centerline, (value) => {
dealMapLayer(value, '#eee', 'centerline')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(obstacles, (value) => {
// dealDivIcon(value, 'obstacles')
watch(obstacles, (value) => {
dealDivIcon(value, 'obstacles')
dealMapLayer(value, '#6f9bdd', 'obstacles')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(diggingworkarea, (value) => {
// dealDivIcon(value, 'diggingworkarea')
watch(diggingworkarea, (value) => {
dealDivIcon(value, 'diggingworkarea')
dealMapLayer(value, '#886e26', 'diggingworkarea')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(dumparea, (value) => {
// dealDivIcon(value, 'dumparea')
watch(dumparea, (value) => {
dealDivIcon(value, 'dumparea')
dealMapLayer(value, '#886e26', 'dumparea')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(barricade, (value) => {
watch(barricade, (value) => {
dealMapLayer(value, '#0000ff', 'barricade')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(stationarea, (value) => {
// dealDivIcon(value, 'stationarea')
watch(stationarea, (value) => {
dealDivIcon(value, 'stationarea')
dealMapLayer(value, '#90ee90', 'stationarea')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(parkspot, (value) => {
// dealDivIcon(value, 'parkspot')
watch(parkspot, (value) => {
dealDivIcon(value, 'parkspot')
dealMapLayer(value, '#7e8185', 'parkspot')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(staticobjs, (value) => {
watch(staticobjs, (value) => {
dealMapLayer(value, '#98a0a0', 'staticobjs')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(electronicFence, (value) => {
// dealDivIcon(value, 'electronicFence')
watch(electronicFence, (value) => {
dealDivIcon(value, 'electronicFence')
dealMapLayer(value, '#d51d20', 'electronicFence')
}, { immediate: true, deep: true })
}, {immediate: true, deep: true})
watch(nextPathinfo, (value) => {
// dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
// adjustmentLayer()
}, { immediate: true, deep: true })
watch(nextPathinfo, (value) => {
dealMapPath(value, 'nextPath', nextPathAvailable.value === 1 ? '#19ae19' : '#8B4513')
adjustmentLayer()
}, {immediate: true, deep: true})
watch(currPathinfo, (value) => {
// dealMapPath(value, 'currentPath', '#19ae19')
// adjustmentLayer()
}, { immediate: true, deep: true })
watch(currPathinfo, (value) => {
dealMapPath(value, 'currentPath', '#19ae19')
adjustmentLayer()
}, {immediate: true, deep: true})
watch(avoidancePath, (value) => {
// dealMapPath(value, 'avoidancePath', 'blue')
}, { immediate: true, deep: true })
watch(avoidancePath, (value) => {
dealMapPath(value, 'avoidancePath', 'blue')
}, {immediate: true, deep: true})
watch(vehiclesPositioninfo, (value) => {
watch(vehiclesPositioninfo, (value) => {
dealVehiclePosition(value)
}, {
}, {
immediate: true,
deep: true
})
})
watch(safeObj, (value) => {
watch(safeObj, (value) => {
Object.keys(value).forEach(item => {
// dealSafe(item, value[item])
dealSafe(item, value[item])
})
}, {
}, {
immediate: true,
deep: true
})
})
watch(trajObj, (value) => {
watch(trajObj, (value) => {
Object.keys(value).forEach(item => {
// dealTraj(item, value[item])
dealTraj(item, value[item])
})
}, {
}, {
immediate: true,
deep: true
})
})
watch(obstacleData, (value) => {
// dealObtacleData(value)
}, { immediate: true, deep: true })
watch(obstacleData, (value) => {
dealObtacleData(value)
}, {immediate: true, deep: true})
watch(deleteVehicles, (data) => {
watch(deleteVehicles, (data) => {
if (!map) return
if (data && data.length) {
data.forEach(item => {
// map.removeLayer(vehicles[item])
// removeLayer(safeTrajs, item)
// removeLayer(safeObjects, item)
// delete vehicles[item]
map.removeLayer(vehicles[item])
removeLayer(safeTrajs, item)
removeLayer(safeObjects, item)
delete vehicles[item]
})
}
}, {
}, {
immediate: true
})
})
watch(() => props.clearSinglePointEnable, (enable) => {
watch(() => props.clearSinglePointEnable, (enable) => {
if (!enable) return
isSinglePreview.value = true
// singlePaths.forEach(item => map.removeLayer(item))
}, { deep: true })
singlePaths.forEach(item => map.removeLayer(item))
}, {deep: true})
watch([morepoint, morepath], (pointData, pathData) => {
watch([morepoint, morepath], (pointData, pathData) => {
if (isSinglePreview.value && (pointData || pathData)) {
let datas = pointData.concat(pathData)
for (let i = 0; i < datas.length; i++) {
// dealSingleDatas(datas[i])
dealSingleDatas(datas[i])
}
}
}, { deep: true })
}, {deep: true})
watch(dynamicPathinfo, (pathData) => {
if (pathData.length > 0) {
for (let i = 0; i < pathData.length; i++) {
// dealDynamicDatas(pathData[i])
watch(dynamicPathinfo, (pathData) => {
if (pathData.length>0) {
for(let i=0;i<pathData.length;i++) {
dealDynamicDatas(pathData[i])
}
}
}, { deep: true })
}, {deep: true})
watch(deviceId, (value) => {
watch(deviceId, (value) => {
if (value && map) {
// dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
}
}, { deep: true })
}, {deep: true})
function doUnmount() {
function doUnmount() {
Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
let mapDom = root.value
mapDom.removeEventListener('mousedown', changeMouseDown)
......@@ -805,17 +727,17 @@ function doUnmount() {
map.remove()
map = null
}
}
watch(() => props.reloadData, (value) => {
watch(() => props.reloadData, (value) => {
if (value) {
doUnmount()
}
})
})
onBeforeUnmount(() => {
onBeforeUnmount(() => {
doUnmount()
})
})
</script>
<style lang="less" scope>
......@@ -823,7 +745,6 @@ onBeforeUnmount(() => {
height: 100%;
overflow: hidden;
}
#map {
width: 200%;
height: 200%;
......@@ -912,5 +833,4 @@ onBeforeUnmount(() => {
.leaflet-control-attribution {
display: none !important;
}
</style>
\ No newline at end of file
}</style>
\ No newline at end of file
src/views/set-tags/RunControl.vue
View file @ 8b5440d8
......@@ -26,6 +26,10 @@
</div>
<div class="content">
<p class="c-box b-box">
<Button type="primary" @click="boxDown(10)">货箱回落</Button>
<span>仅在0/1级故障下且货箱功能正常时点击</span>
</p>
<p class="c-box b-box">
<Button type="primary" @click="handleSave(6)">解锁</Button>
<span>解锁上次异常退出导致的路权锁定</span>
</p>
......@@ -34,11 +38,18 @@
<span>触发控制模块重新加载参数</span>
</p>
</div>
<Modal v-model="isShow"
:closable="false"
:mask-closable="true"
@on-ok="handleSave(10)"
@on-cancel="boxCancel()">
<p style="text-align: center;">是否执行货箱回落指令</p>
</Modal>
</div>
</template>
<script setup>
import { reactive, toRefs, watch, markRaw } from 'vue';
import { ref,reactive, toRefs, watch, markRaw } from 'vue';
import { useVehicleStore } from '../../store/VehicleStore';
import { storeToRefs } from 'pinia';
......@@ -99,6 +110,8 @@
const vehicleStoreToRefs = storeToRefs(vehicleStore)
const { controlInfo } = vehicleStoreToRefs
const isShow=ref(false);
const emits = defineEmits(['sendMsg'])
function handleSend(msg) {
......@@ -125,9 +138,16 @@
type: Number(type),
value
}
handleSend(data)
}
function boxDown(){
isShow.value=true;
}
function boxCancel(){
isShow.value=false;
}
watch(controlInfo, (value) => {
data.form = {...value}
}, {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment