Skip to content

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

最新代码

parent 40ebeb68
Hide whitespace changes
Inline Side-by-side
Showing with 703 additions and 740 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,812 +9,735 @@ ...@@ -10,812 +9,735 @@
</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, diggingworkarea: 3,
diggingworkarea: 3, dumparea: 4,
dumparea: 4, barricade: 5,
barricade: 5, electronicFence: 6,
electronicFence: 6, wetArea: 7,
wetArea: 7, lane: 8,
lane: 8, obstacles: 9,
obstacles: 9, stationarea: 10,
stationarea: 10, parkspot: 11,
parkspot: 11, lanenode: 12,
lanenode: 12, currPathinfo: 13,
currPathinfo: 13, nextPathinfo: 14,
nextPathinfo: 14, avoidancePath: 15,
avoidancePath: 15, traj: 16,
traj: 16, obstacle: 17
obstacle: 17 }
}
const vehicles = {}
let ismousedown = false
let ismousemove = false
let resetTime = null
let obstaclePolygons = []
let dynamicPaths=[]
const vehicles = {} const reNavigateTime = 10 * 1000
let ismousedown = false
let ismousemove = false const props = defineProps({
let resetTime = null isShowBasic: Boolean,
let obstaclePolygons = [] clearSinglePointEnable: Boolean,
let dynamicPaths = [] reloadData: Boolean
const reNavigateTime = 10 * 1000
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 {
lanenode,
lane,
runablearea,
centerline,
obstacles,
diggingworkarea,
dumparea,
barricade,
stationarea,
parkspot,
staticobjs,
electronicFence,
morepoint, // 单机循迹单路径
morepath, // 单机循迹多路径
nextPathinfo,
currPathinfo,
nextPathAvailable,
avoidancePath, // 绕障路径
obstacleData,
dynamicPathinfo, // 车辆动态路权信息
} = mapStoreToRefs
const vehicleStore = useVehicleStore()
const vehicleStoreToRefs = storeToRefs(vehicleStore)
const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
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, { let map = markRaw({})
// center: document.location.mapCenter, let currentPosition = markRaw([])
// zoom: 14, const root = ref(null)
// zoomControl: false, const mapLayers = markRaw({})
// minZoom: 10, const safeObjects = markRaw({})
// maxZoom: 21, const safeTrajs = markRaw({})
// rotate: true, const singlePaths = markRaw([])
// touchRotate: true const navigate = ref(true)
// }) const currentRotation = ref(0)
// map.on('zoomend', () => { const markerLayerGroupLists = markRaw({})
// let zoom = map.getZoom() const isSinglePreview = ref(false)
const compassRotationAngle = ref(0)
// let { iconSize, iconAnchor } = vehicleScale(zoom) const compass = ref(null)
// for (let vehicle in vehicles) { const mapStore = useMapStore()
// let icon = vehicles[vehicle].getIcon() const mapStoreToRefs = storeToRefs(mapStore)
// let { iconUrl } = icon.options const {
// let newIcon = L.icon({ lanenode,
// iconUrl, lane,
// iconSize, runablearea,
// iconAnchor centerline,
// }) obstacles,
// vehicles[vehicle].setIcon(newIcon) diggingworkarea,
// } dumparea,
// }) barricade,
stationarea,
// let mapDom = root.value parkspot,
// mapDom.addEventListener('mousedown', () => { staticobjs,
// changeMouseDown() electronicFence,
// }) morepoint, // 单机循迹单路径
morepath, // 单机循迹多路径
// mapDom.addEventListener('mousemove', (evt) => { nextPathinfo,
// changeMouseMove() currPathinfo,
// }) nextPathAvailable,
avoidancePath, // 绕障路径
// mapDom.addEventListener('mouseup', (evt) => { obstacleData,
// changeMouseUp() dynamicPathinfo, // 车辆动态路权信息
// }) } = mapStoreToRefs
const vehicleStore = useVehicleStore()
emits('handleSend', { const vehicleStoreToRefs = storeToRefs(vehicleStore)
type: 'syncMapVersion', const { vehiclesPositioninfo, safeObj, trajObj, paraminfo, deleteVehicles } = vehicleStoreToRefs
msg: {}
const deviceId = computed(() => {
return paraminfo.value.deviceId
}) })
})
function changeNavigate() { const emits = defineEmits(['handleSend'])
navigate.value = true
// dealMapRotate(currentRotation.value, currentPosition, map.getZoom()) 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
function changeCompass() { mapDom.addEventListener('mousedown', () => {
dealVehicleRotate(0) changeMouseDown()
currentRotation.value = BASE_RAD })
if (navigate.value) {
setTimeout(() => {
dealVehicleRotate()
}, 3 * 1000)
}
}
function changeMouseDown() { mapDom.addEventListener('mousemove', (evt) => {
ismousedown = true changeMouseMove()
} })
function changeMouseMove() { mapDom.addEventListener('mouseup', (evt) => {
if (ismousedown) { changeMouseUp()
ismousemove = true })
if (resetTime) {
window.clearTimeout(resetTime) emits('handleSend', {
resetTime = null type: 'syncMapVersion',
} msg: {}
})
})
function changeNavigate() {
navigate.value = true
dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
} }
}
function changeMouseUp() { // 指南针
if (!currentPosition) return function changeCompass() {
if (ismousedown && ismousemove) { dealVehicleRotate(0)
navigate.value = false currentRotation.value = BASE_RAD
resetTime = window.setTimeout(() => { if (navigate.value) {
if (!navigate.value) { setTimeout(() => {
navigate.value = true
dealVehicleRotate() dealVehicleRotate()
currentRotation.value = BASE_RAD }, 3 * 1000)
} }
}, reNavigateTime)
ismousedown = false
ismousemove = false
} }
}
function dealVehicleRotate(rotate) { function changeMouseDown() {
let keys = Object.keys(vehicles) ismousedown = true
let target = keys.find(item => item === deviceId.value)
let currentTarget = vehicles[target]
let vehicleHeading = BASE_RAD
let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
if (typeof rotate === 'number') {
dealMapRotate(0, currentPosition, map.getZoom())
currentTarget.setRotation(-currentOldHeading + vehicleHeading)
} else {
vehicleHeading = currentOldHeading
currentRotation.value = vehicleHeading
dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
currentTarget.setRotation(0)
} }
for (let key in vehicles) {
if (key !== deviceId.value) { function changeMouseMove() {
let oldHeading = vehicles[key].options['vehicleHeading'] if (ismousedown) {
vehicles[key].setRotation(-oldHeading + vehicleHeading) ismousemove = true
if (resetTime) {
window.clearTimeout(resetTime)
resetTime = null
}
} }
} }
}
function dealMapLayer(value, color, layerName) { function changeMouseUp() {
if (!value || !map) return if (!currentPosition) return
if (ismousedown && ismousemove) {
let result = JSON.parse(value) navigate.value = false
if (!result) return resetTime = window.setTimeout(() => {
if (!navigate.value) {
// if (mapLayers[layerName]) { navigate.value = true
// map.removeLayer(mapLayers[layerName]) dealVehicleRotate()
// delete mapLayers[layerName] currentRotation.value = BASE_RAD
// } }
let obj = {}; }, reNavigateTime)
if (layerName === 'barricade') { ismousedown = false
obj = { ismousemove = false
getLineColor: map.convertColor('#0066ff'),
opacity: 1,
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];
},
} }
} }
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)
}
function dealMapPath(value, layerName, color) { function dealVehicleRotate(rotate) {
if (mapLayers[layerName]) { let keys = Object.keys(vehicles)
map.removeLayer(mapLayers[layerName]) let target = keys.find(item => item === deviceId.value)
delete mapLayers[layerName] let currentTarget = vehicles[target]
} let vehicleHeading = BASE_RAD
if (mapLayers[`${layerName}Buffer`]) { let currentOldHeading = currentTarget && currentTarget.options.vehicleHeading
map.removeLayer(mapLayers[`${layerName}Buffer`]) if (typeof rotate === 'number') {
delete mapLayers[`${layerName}Buffer`] dealMapRotate(0, currentPosition, map.getZoom())
currentTarget.setRotation(-currentOldHeading + vehicleHeading)
} else {
vehicleHeading = currentOldHeading
currentRotation.value = vehicleHeading
dealMapRotate(vehicleHeading, currentPosition, map.getZoom())
currentTarget.setRotation(0)
}
for (let key in vehicles) {
if (key !== deviceId.value) {
let oldHeading = vehicles[key].options['vehicleHeading']
vehicles[key].setRotation(-oldHeading + vehicleHeading)
}
}
} }
if (value && value.length) { function dealMapLayer(value, color, layerName) {
let data = JSON.parse(JSON.stringify(value)) if (!value || !map) return
let path = L.polyline(data, {
color: '#ffff00',
opacity: 1,
className: 'middle-line',
fillColor: '#ffff00',
fillOpacity: 1,
}).addTo(map)
mapLayers[layerName] = path
let bufferLine = turf.buffer(path.toGeoJSON(), 6.5, { units: "meters" })
mapLayers[`${layerName}Buffer`] = L.geoJSON(bufferLine, {
style: function () { return { color, fillOpacity: .6 } },
}).addTo(map)
mapLayers[`${layerName}Buffer`].bringToFront()
}
}
function deleteMarker(features, layerName) { let result = JSON.parse(value)
Object.keys(markerLayerGroupLists).forEach(item => { if (!result) return
if (item.includes(layerName)) {
map.removeLayer(markerLayerGroupLists[item]) if (mapLayers[layerName]) {
map.removeLayer(mapLayers[layerName])
delete mapLayers[layerName]
} }
})
let marker = Object.keys(markerLayerGroupLists).filter(item => item.includes(layerName)) let layer = L.geoJSON(result, {
for (let i = 0; i < marker.length; i++) { style: function (feature) {
let item = marker[i] if(layerName === 'barricade'){
let isIn = features.find(f => `${layerName}${f.properties.id}` === item) return {
if (isIn) continue color: '#0066ff',
if (item.includes('point')) continue opacity: 1,
let id = item.replace(`${layerName}`, '') width:5
let icon = L.divIcon({ }
html: `<span class="icon-node-name"></span>`, }else{
className: 'icon-node', return {
}) color: layerName === 'lane' ? '#eee' : feature.properties.color,
markerLayerGroupLists[`${layerName}${id}`].setIcon(icon) 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 dealDivIcon(value, layerName) { function dealMapPath(value, layerName, color) {
if (!value || !map) return if (mapLayers[layerName]) {
let result = JSON.parse(value) map.removeLayer(mapLayers[layerName])
if (!result) return delete mapLayers[layerName]
}
const { features } = result if (mapLayers[`${layerName}Buffer`]) {
deleteMarker(features, layerName) map.removeLayer(mapLayers[`${layerName}Buffer`])
let markerLayerGroup = L.LayerGroup.collision({ margin: 5 }) delete mapLayers[`${layerName}Buffer`]
}
for (let i = 0; i < features.length; i++) {
let feature = features[i] if (value && value.length) {
let { name, id } = feature.properties let data = JSON.parse(JSON.stringify(value))
let { coordinates } = feature.geometry let path = L.polyline(data, {
let markerCoor = null color: '#ffff00',
if (layerName === 'lanenode') { opacity: 1,
markerCoor = [coordinates[1], coordinates[0]] className: 'middle-line',
} else { fillColor: '#ffff00',
let center = turf.center(feature) fillOpacity: 1,
markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]] }).addTo(map)
mapLayers[layerName] = path
let bufferLine = turf.buffer(path.toGeoJSON(), 6.5, { units: "meters" })
mapLayers[`${layerName}Buffer`] = L.geoJSON(bufferLine, {
style: function () { return { color, fillOpacity: .6 } },
}).addTo(map)
mapLayers[`${layerName}Buffer`].bringToFront()
} }
let icon = L.divIcon({ }
html: `<span class="icon-node-name">${name}</span>`,
className: 'icon-node', function deleteMarker(features, layerName) {
Object.keys(markerLayerGroupLists).forEach(item => {
if(item.includes(layerName)){
map.removeLayer(markerLayerGroupLists[item])
}
}) })
if (markerLayerGroupLists[`${layerName}${id}`]) { let marker = Object.keys(markerLayerGroupLists).filter(item => item.includes(layerName))
for (let i = 0; i < marker.length; i++) {
let item = marker[i]
let isIn = features.find(f => `${layerName}${f.properties.id}` === item)
if (isIn) continue
if (item.includes('point')) continue
let id = item.replace(`${layerName}`, '')
let icon = L.divIcon({
html: `<span class="icon-node-name"></span>`,
className: 'icon-node',
})
markerLayerGroupLists[`${layerName}${id}`].setIcon(icon) markerLayerGroupLists[`${layerName}${id}`].setIcon(icon)
} else {
let nameMarker = L.marker(markerCoor, { icon, zIndexOffset: -100 })
markerLayerGroup.addLayer(nameMarker)
markerLayerGroupLists[`${layerName}${id}`] = nameMarker
} }
markerLayerGroupLists[`${layerName}${id}point`] = L.marker(markerCoor, {
icon: L.icon({
iconUrl: '/image/bluePoint.png',
iconSize: [12, 12],
iconAnchor: [6, 6],
}),
zIndexOffset: -100,
}).addTo(map)
} }
markerLayerGroup.addTo(map)
mapStore.setData(layerName, null) function dealDivIcon(value, layerName) {
} if (!value || !map) return
let result = JSON.parse(value)
if (!result) return
const { features } = result
deleteMarker(features, layerName)
let markerLayerGroup = L.LayerGroup.collision({ margin: 5 })
for (let i = 0; i < features.length; i++) {
let feature = features[i]
let { name, id } = feature.properties
let { coordinates } = feature.geometry
let markerCoor = null
if (layerName === 'lanenode') {
markerCoor = [coordinates[1], coordinates[0]]
} else {
let center = turf.center(feature)
markerCoor = [center.geometry.coordinates[1], center.geometry.coordinates[0]]
}
let icon = L.divIcon({
html: `<span class="icon-node-name">${name}</span>`,
className: 'icon-node',
})
if (markerLayerGroupLists[`${layerName}${id}`]) {
markerLayerGroupLists[`${layerName}${id}`].setIcon(icon)
} else {
let nameMarker = L.marker(markerCoor, { icon, zIndexOffset: -100 })
markerLayerGroup.addLayer(nameMarker)
markerLayerGroupLists[`${layerName}${id}`] = nameMarker
}
function removeLayer(obj, vehicleID) { markerLayerGroupLists[`${layerName}${id}point`] = L.marker(markerCoor, {
if (obj[vehicleID]) { icon: L.icon({
for (let item in obj[vehicleID]) { iconUrl: '/image/bluePoint.png',
map.removeLayer(obj[vehicleID][item]) iconSize: [12, 12],
iconAnchor: [6, 6],
}),
zIndexOffset: -100,
}).addTo(map)
}
markerLayerGroup.addTo(map)
mapStore.setData(layerName, null)
}
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['currentPath'] && mapLayers['currentPath'].bringToFront()
mapLayers['nextPath'] && mapLayers['nextPath'].bringToFront() mapLayers['nextPath'] && mapLayers['nextPath'].bringToFront()
for (let key in safeObjects) { for (let key in safeObjects) {
let safeLayer = safeObjects[key] let safeLayer = safeObjects[key]
for (let lkey in safeLayer) { for (let lkey in safeLayer) {
lkey && safeLayer[lkey].bringToFront() lkey && safeLayer[lkey].bringToFront()
}
} }
}
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
removeLayer(safeObjects, vehicleID) removeLayer(safeObjects, vehicleID)
safeObjects[vehicleID] = {} safeObjects[vehicleID] = {}
if (!enable) return if (!enable) return
let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle' let safeType = [1, 20, 21].includes(vehicleType) ? 'circle' : 'rectangle'
let zIndex = 16 let zIndex = 16
for (let i = 0; i < dealedData.length; i++) { for (let i = 0; i < dealedData.length; i++) {
let item = JSON.parse(JSON.stringify(dealedData[i])) let item = JSON.parse(JSON.stringify(dealedData[i]))
let layer = safeType === 'rectangle' ? L.polygon(item, { color: safe_color, weight: 1 }) : L.circle([vehicleLatitude, vehicleLongtitude], { radius: data[i], color: safe_color }) let layer = safeType === 'rectangle' ? L.polygon(item, { color: safe_color, weight: 1 }) : L.circle([vehicleLatitude, vehicleLongtitude], { radius: data[i], color: safe_color })
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) {
let layer = L.circle([vehicleLatitude, vehicleLongtitude], { radius, color: '#FFA500' }) let layer = L.circle([vehicleLatitude, vehicleLongtitude], { radius, color: '#FFA500' })
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" })
let layer = L.geoJSON(bufferLine, { let layer = L.geoJSON(bufferLine, {
style: function () { style: function () {
return { return {
color: safe_color, color: safe_color,
fillOpacity: .4 fillOpacity: .4
} }
}, },
}) })
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)
}
if (compass.value) {
compassRotationAngle.value = rotationAngle
map.setBearing(rotate)
}
center && center.length && map.flyTo(center, zoom, { animate: false })
}
let num = 0
let markerList = {}
function dealVehiclePosition(value) {
if (!map || !value.length) return
// if(num==1) return
let list = []
// 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
} }
markerList[vehicleID] = obj if (compass.value) {
compassRotationAngle.value = rotationAngle
if (vehicleID === deviceId.value) { map.setBearing(rotate)
// map.setRotation(30)
// if (navigate.value) {
// map.flyTo(vehiclePosition)
// }
if(num==0){
map.flyTo(vehiclePosition)
}
} }
center && center.length && map.flyTo(center, zoom, {animate: false})
// 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 dealVehiclePosition(value) {
const { color, coor } = datas if (!map || !value.length) return
let path = L.polyline(coor, {
color,
}).addTo(map)
singlePaths.push(path)
}
function dealObtacleData(value) { let zoom = map.getZoom()
if (obstaclePolygons.length) { let { iconSize, iconAnchor } = vehicleScale(zoom)
obstaclePolygons.forEach(item => map.removeLayer(item))
obstaclePolygons = []
}
if (value && value.length) {
for (let i = 0; i < value.length; i++) { for (let i = 0; i < value.length; i++) {
let obstacle = value[i] const item = value[i]
let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle const { vehicleLatitude, vehicleLongtitude, vehicleHeading, vehicleID, image } = item
let obstaclePolygon = L.polygon(JSON.parse(JSON.stringify(coordinate)), { color: typeColor }).addTo(map) let vehiclePosition = [vehicleLatitude, vehicleLongtitude]
let point = turf.point([centerLon, centerLat]) if (vehicles[vehicleID]) {
let obstacleBuffer = turf.buffer(point, centerRadius, { units: "meters" }) let beforeIconUrl = vehicles[vehicleID].getIcon().options
let obstacleCircle = L.geoJSON(obstacleBuffer, { ? vehicles[vehicleID].getIcon().options.iconUrl
style: () => { : vehicles[vehicleID].getIcon().iconUrl
return { if (!beforeIconUrl.includes(image)) {
color: centerColor, let newIcon = L.icon({
fillOpacity: .5 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)
} }
}).addTo(map) } else {
obstaclePolygons.push(obstacleCircle) // 非本车
obstaclePolygons.push(obstaclePolygon) vehicles[vehicleID].setRotation(-vehicleHeading + currentRotation.value)
}
} }
} }
}
function dealDynamicDatas(datas) { function dealSingleDatas(datas) {
let name = 'dynamicLine'; const { color, coor } = datas
if (mapLayers[name]) { let path = L.polyline(coor, {
map.removeLayer(mapLayers[name]) color,
delete mapLayers[name] }).addTo(map)
singlePaths.push(path)
} }
// if (dynamicPaths.length) {
// dynamicPaths.forEach(item => map.removeLayer(item))
// dynamicPaths = []
// }
const { color, path } = datas
let pathNew = L.polyline(path, {
color,
opacity: 0.3,
weight: 30,
}).addTo(map)
mapLayers[name] = pathNew
mapLayers[name].bringToFront()
// dynamicPaths.push(pathNew)
}
function dealObtacleData(value) {
if (obstaclePolygons.length) {
obstaclePolygons.forEach(item => map.removeLayer(item))
obstaclePolygons = []
}
if (value && value.length) {
for (let i = 0; i < value.length; i++) {
let obstacle = value[i]
let { typeColor, coordinate, centerLon, centerLat, centerRadius, centerColor } = obstacle
let obstaclePolygon = L.polygon(JSON.parse(JSON.stringify(coordinate)), { color: typeColor }).addTo(map)
let point = turf.point([centerLon, centerLat])
let obstacleBuffer = turf.buffer(point, centerRadius, { units: "meters" })
let obstacleCircle = L.geoJSON(obstacleBuffer, {
style: () => {
return {
color: centerColor,
fillOpacity: .5
}
}
}).addTo(map)
obstaclePolygons.push(obstacleCircle)
obstaclePolygons.push(obstaclePolygon)
}
}
}
function dealDynamicDatas(datas) {
let name='dynamicLine';
if (mapLayers[name]) {
map.removeLayer(mapLayers[name])
delete mapLayers[name]
}
// if (dynamicPaths.length) {
// dynamicPaths.forEach(item => map.removeLayer(item))
// dynamicPaths = []
// }
const { color, path } = datas
let pathNew = L.polyline(path, {
color,
opacity:0.3,
weight:30,
}).addTo(map)
mapLayers[name] = pathNew
mapLayers[name].bringToFront()
// 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) => {
Object.keys(value).forEach(item => {
// dealSafe(item, value[item])
}) })
}, {
immediate: true, watch(safeObj, (value) => {
deep: true Object.keys(value).forEach(item => {
}) dealSafe(item, value[item])
})
watch(trajObj, (value) => { }, {
Object.keys(value).forEach(item => { immediate: true,
// dealTraj(item, value[item]) deep: true
}) })
}, {
immediate: true, watch(trajObj, (value) => {
deep: true Object.keys(value).forEach(item => {
}) dealTraj(item, value[item])
watch(obstacleData, (value) => {
// dealObtacleData(value)
}, { immediate: true, deep: true })
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]
}) })
} }, {
}, { immediate: true,
immediate: true deep: true
}) })
watch(() => props.clearSinglePointEnable, (enable) => { watch(obstacleData, (value) => {
if (!enable) return dealObtacleData(value)
isSinglePreview.value = true }, {immediate: true, deep: true})
// singlePaths.forEach(item => map.removeLayer(item))
}, { deep: true }) watch(deleteVehicles, (data) => {
if (!map) return
watch([morepoint, morepath], (pointData, pathData) => { if (data && data.length) {
if (isSinglePreview.value && (pointData || pathData)) { data.forEach(item => {
let datas = pointData.concat(pathData) map.removeLayer(vehicles[item])
for (let i = 0; i < datas.length; i++) { removeLayer(safeTrajs, item)
// dealSingleDatas(datas[i]) removeLayer(safeObjects, item)
delete vehicles[item]
})
} }
} }, {
}, { deep: true }) immediate: true
})
watch(dynamicPathinfo, (pathData) => { watch(() => props.clearSinglePointEnable, (enable) => {
if (pathData.length > 0) { if (!enable) return
for (let i = 0; i < pathData.length; i++) { isSinglePreview.value = true
// dealDynamicDatas(pathData[i]) singlePaths.forEach(item => map.removeLayer(item))
}, {deep: true})
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])
}
} }
} }, {deep: true})
}, { deep: true })
watch(deviceId, (value) => { watch(dynamicPathinfo, (pathData) => {
if (value && map) { if (pathData.length>0) {
// dealMapRotate(currentRotation.value, currentPosition, map.getZoom()) for(let i=0;i<pathData.length;i++) {
} dealDynamicDatas(pathData[i])
}, { deep: true }) }
}
}, {deep: true})
function doUnmount() { watch(deviceId, (value) => {
Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer])) if (value && map) {
let mapDom = root.value dealMapRotate(currentRotation.value, currentPosition, map.getZoom())
mapDom.removeEventListener('mousedown', changeMouseDown) }
mapDom.removeEventListener('mousemove', changeMouseMove) }, {deep: true})
mapDom.removeEventListener('mouseup', changeMouseUp)
map.remove() function doUnmount() {
map = null Object.keys(mapLayers).map(layer => map.removeLayer(mapLayers[layer]))
} let mapDom = root.value
mapDom.removeEventListener('mousedown', changeMouseDown)
mapDom.removeEventListener('mousemove', changeMouseMove)
mapDom.removeEventListener('mouseup', changeMouseUp)
watch(() => props.reloadData, (value) => { map.remove()
if (value) { map = null
doUnmount()
} }
})
onBeforeUnmount(() => { watch(() => props.reloadData, (value) => {
doUnmount() if (value) {
}) doUnmount()
}
})
onBeforeUnmount(() => {
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