From 3d98a5bceec0d37a09720cb71a36680baa0546ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 11 Sep 2025 14:17:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=9A=9C=E7=A2=8D=E7=89=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ruler.vue | 82 ++++++++++++++++++++++++++++++++++++++--
 src/views/index.vue      | 77 +++++++++++++++++++++++++++++--------
 2 files changed, 140 insertions(+), 19 deletions(-)

diff --git a/src/components/ruler.vue b/src/components/ruler.vue
index 0fa99e1..d68b628 100644
--- a/src/components/ruler.vue
+++ b/src/components/ruler.vue
@@ -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>
diff --git a/src/views/index.vue b/src/views/index.vue
index dbc6d02..4712e3f 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -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 {