suixy
/
FOD
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改障碍物

Browse Source
main
夜笙歌 3 months ago
parent ab0d86b529
commit 3d98a5bcee
2 changed files with 140 additions and 19 deletions
Show Stats Download Patch File Download Diff File

82
src/components/ruler.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template>
<!-- <div class="container" ref="containerRef" @wheel.prevent="onWheel">-->
<div class="container" ref="containerRef">
<div class="container" ref="containerRef">
<!-- <div class="leftLine"></div>-->
<!-- 左侧竖向刻度尺 -->
<div class="ruler vertical" :style="{ backgroundColor: bgColor }">
@ -44,6 +44,7 @@
}"
>
<div
v-if="props.boxPos.x && props.boxPos.y"
class="box"
:style="{
width: boxSize + 'px',
@ -65,6 +66,11 @@
}">
</div>
<div
v-if="lineStyle"
class="line"
:style="lineStyle"
></div>
</div>
</div>
@ -98,13 +104,15 @@
</div>
</template>
<script setup>
import {ref, computed, onMounted, watch} from 'vue'
import {ref, computed, onMounted, watch, watchEffect} from 'vue'
const props = defineProps({
boxPos: {
type: Object,
default: () => ({x: 200, y: 300, rotate: -45}),
},
index: {type: Number, default: -1} // 默认不选
})
// const boxPos = ref({x: 200, y: 300, rotate: -45})
// setInterval(() => {
@ -123,6 +131,62 @@ const dots = ref([
// y: 200,
// }
])
const setDot = (dot) => {
dots.value = dot
}
const lineStyle = ref(null)
watchEffect(() => {
if (props.index < 0 || !dots.value[props.index]) return
const dot = dots.value[props.index]
// box 中心点
const centerX = props.boxPos.x + boxSize / 2
const centerY = contentHeight.value - props.boxPos.y - boxSize / 2
// box 旋转角度
const rad = props.boxPos.rotate * Math.PI / 180
// 未旋转时顶部中心点（相对中心点）
const dx0 = 0
const dy0 = -boxSize / 2
// 旋转后的偏移
const dx = dx0 * Math.cos(rad) - dy0 * Math.sin(rad)
const dy = dx0 * Math.sin(rad) + dy0 * Math.cos(rad)
// 顶部中心点
const boxTopX = centerX + dx
const boxTopY = centerY + dy
// dot 中心点
const dotX = dot.x + 5
const dotY = contentHeight.value - dot.y - 5
const dX = dotX - boxTopX
const dY = dotY - boxTopY
const length = Math.sqrt(dX * dX + dY * dY)
const angle = Math.atan2(dY, dX) * 180 / Math.PI
// 先清掉上一次的定时器，避免抖动（可选）
// if (lineStyle._timer) clearTimeout(lineStyle._timer)
// 延迟 1 秒更新样式
lineStyle._timer = setTimeout(() => {
lineStyle.value = {
left: boxTopX + 'px',
top: boxTopY + 'px',
width: length + 'px',
transform: `rotate(${angle}deg)`,
transformOrigin: '0 0'
}
}, 1000)
})
defineExpose({
setDot
})
const boxSize = 30
const minScale = 1
@ -162,8 +226,8 @@ watch(
// 获取缩放后 box 的中心坐标（左下角为原点）
function getBoxCenterPos(s) {
const x = boxPos.value.x * s + (boxSize * s) / 2
const y = (contentHeight.value - boxPos.value.y - boxSize / 2) * s
const x = props.boxPos.x * s + (boxSize * s) / 2
const y = props.boxPos.y * s + (boxSize * s) / 2
return {x, y}
}
@ -176,15 +240,19 @@ function onWheel(e) {
newScale = Math.max(minScale, Math.min(maxScale, newScale))
if (newScale === oldScale) return
// box 中心点在旧比例下的位置
const oldCenter = getBoxCenterPos(oldScale)
// box 中心点在新比例下的位置
const newCenter = getBoxCenterPos(newScale)
// 保持 box 中心点在画布中的位置不变
offsetX.value += oldCenter.x - newCenter.x
offsetY.value += oldCenter.y - newCenter.y
scale.value = newScale
}
// 刻度计算
const baseMajorTickSize = 100
const baseMinorTicks = 10
@ -347,4 +415,10 @@ const verticalTicks = computed(() =>
border-right: 3px dashed white;
z-index: 9999;
}
.line {
position: absolute;
height: 2px;
background: yellow;
}
</style>

77
src/views/index.vue
Unescape Escape View File

@ -21,7 +21,7 @@
</div>
</div>
<div class="left">
<Ruler :box-pos="locationData"/>
<Ruler ref="rulerRef" :box-pos="locationData" :index="2"/>
</div>
<div class="right">
<div v-if="itemsId === 1" class="tabsItem">
@ -99,10 +99,11 @@
<el-table :data="tableData1" style="width: 100%">
<el-table-column type="selection" width="55"/>
<el-table-column label="序号" type="index" width="60"/>
<el-table-column property="coordinate" label="目标坐标" width="120"/>
<el-table-column property="Lon" label="目标经度" width="120"/>
<el-table-column property="Lat" label="目标纬度" width="120"/>
<el-table-column label="告警等级" width="160">
<template #default="scope">
<el-rate v-model="scope.row.rate" disabled/>
<el-rate :model-value="scope.row.rate ||3" disabled/>
</template>
</el-table-column>
<el-table-column
@ -387,7 +388,7 @@
</template>
<script setup>
import Ruler from "@/components/ruler.vue";
import {onMounted, ref} from "vue";
import {nextTick, onMounted, ref} from "vue";
import {
getParasPos,
getParasSignalpro,
@ -513,6 +514,7 @@ const list = ref([
value2: '经纬度：(528,11)'
},
])
const rulerRef = ref()
const itemsId = ref(1)
const form1 = ref({})
const form2 = ref({})
@ -569,7 +571,7 @@ const date1 = ref([])
const setItemsId = (e) => {
itemsId.value = e
}
const locationData = ref({})
const locationData = ref({x: 200, y: 300, rotate: -45})
const currentPosition = ref({})
const processData = (data) => {
@ -579,9 +581,10 @@ const processData = (data) => {
console.log(data.radar_work_state)
radarWorkState.value = data.radar_work_state
}
if (data.ty === 1) {
if (data.FodName === '图像数据') {
}
if (data.ty === 2) {
if (data.FodName === 'fod信息') {
setDot(data)
}
if (data.ty === 3) {
}
@ -631,27 +634,56 @@ onMounted(() => {
getShildTableList()
points.value = localStorage.getItem('points') ? JSON.parse(localStorage.getItem('points')) : [
{
lon: 120.38532472236,
lat: 36.14505053622,
lon: 117.213524,
lat: 36.837967,
name: '点位1',
},
{
lon: 120.38532472236,
lat: 36.15302618219,
lon: 117.213524,
lat: 36.847967,
name: '点位2',
},
{
lon: 120.39109582218,
lat: 36.15302618219,
lon: 117.223524,
lat: 36.847967,
name: '点位3',
},
{
lon: 120.39109582218,
lat: 36.14505053622,
lon: 117.223524,
lat: 36.837967,
name: '点位4',
},
]
getArea()
// setDot({
// "DarDatas": [{"Lon": 117.213524, "Lat": 36.837967}, {"Lon": 0.0, "Lat": 0.0}, {
// "Lon": 0.0,
// "Lat": 0.0
// }, {"Lon": 0.0, "Lat": 0.0}, {"Lon": 117.2134, "Lat": 36.837967}, {"Lon": 0.0, "Lat": 0.0}, {
// "Lon": 0.0,
// "Lat": 0.0
// }, {"Lon": 0.0, "Lat": 0.0}, {"Lon": 117.21341, "Lat": 36.837986}, {"Lon": 0.0, "Lat": 0.0}, {
// "Lon": 0.0,
// "Lat": 0.0
// }, {"Lon": 0.0, "Lat": 0.0}, {"Lon": 117.21337, "Lat": 36.838}, {"Lon": 0.0, "Lat": 0.0}],
// "Seq": 0,
// "MD5": "038fb0493c415f58c703ab205f9f2c94",
// "TimeStamp": 1757556826,
// "MissionID": 1757556826,
// "RngRes": 0.075,
// "RngNum": 0,
// "RngMin": 10.0,
// "AziRes": 0.1,
// "AziNum": 0,
// "AziMin": 0.03593219,
// "DataType": 20,
// "LonMin": 117.213844,
// "LatMin": 36.83799,
// "TarNum": 14,
// "ty": 0,
// "FodName": "fod信息"
// })
})
const getOption = () => {
@ -797,6 +829,21 @@ const savePoint = () => {
localStorage.setItem('points', JSON.stringify(points.value))
getArea()
}
const setDot = (e) => {
let dots = e.DarDatas.map((v, k) => {
if (v.Lon == 0 && v.Lat == 0) return null
console.log(v)
console.log(area)
return {
x: 300 - (area.LonMax - v.Lon) / ((area.LonMax - area.LonMin) / 300),
y: 1800 - (area.LatMax - v.Lat) / ((area.LatMax - area.LatMin) / 1800),
index: k
}
}).filter(v => v)
tableData1.value = e.DarDatas
console.log(dots)
rulerRef.value.setDot(dots)
}
</script>
<style>
.app-container {

Write Preview
Loading…
Cancel
Save