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