修改显示

src/components/ruler.vue

@@ -39,11 +39,15 @@
           }"
       >
         <div class="head" id="head">
-          <div class="line" v-if="lineData" :style="{
+          <div class="line" v-if="lineData && distance1>0" :style="{
             width:lineData.distance + 'px',
             transform: ` rotate(${lineData.degree}deg)`
           }"
-          ></div>
+          >
+            <span style="color: #fff;position:absolute;left: 50%;transform: translateX(-50%)">
+            {{ distance1.toFixed(0) }}
+          </span>
+          </div>
         </div>
         <div class="scan"></div>
       </div>
@@ -58,7 +62,10 @@
             bottom: `${getDotY(dot.y)}%`,
             transform: `translate(-50%, 50%)  `
           }"
-      ></div>
+          style="white-space: nowrap"
+      >
+        <!--        {{ getDotX(dot.x) }} - {{ getDotY(dot.y) }}-->
+      </div>
     </div>
   </div>
 </template>
@@ -69,6 +76,8 @@ import {ref, computed, onMounted, onBeforeUnmount, watch, nextTick} from 'vue'
 
 const boxRef = ref(null)
 
+const distance1 = ref(0)
+
 const props = defineProps({
   width: {type: Number, required: true,},
   height: {type: Number, required: true,},
@@ -78,8 +87,21 @@ const props = defineProps({
 })
 const boxContentX = ref(0)
 const boxContentY = ref(0)
-watch(() => props.boxPos, (newVal, oldVal) => {
+watch(() => JSON.stringify(props.boxPos), (newVal, oldVal) => {
   getBoxPos()
+  getDistanceAndZoom()
+  if (distance1.value) {
+    if (distance1.value <= 100) {
+      zoomScale(props.boxPos.y, 1)
+      if (distance1.value <= 10) {
+        zoomScale(props.boxPos.y, 2)
+      }
+      getBoxPos()
+    }
+  }
+  if (props.dotIndex >= 0) {
+    getLineData('head', `dot${props.dotIndex + 1}`)
+  }
 })
 onMounted(() => {
   getBoxPos()
@@ -90,10 +112,36 @@ onMounted(() => {
   })
 })
 watch(() => props.dotIndex, (newVal, oldVal) => {
+  getBoxPos()
+  getDistanceAndZoom()
+  if (distance1.value) {
+    if (distance1.value <= 100) {
+      zoomScale(props.boxPos.y, 1)
+      if (distance1.value <= 10) {
+        zoomScale(props.boxPos.y, 2)
+      }
+      getBoxPos()
+    }
+  }
   if (props.dotIndex >= 0) {
     getLineData('head', `dot${props.dotIndex + 1}`)
   }
 })
+const getDistanceAndZoom = () => {
+  if (props.dotIndex === -1) {
+    distance1.value = 0
+  } else {
+    let dotx = props.dots[props.dotIndex].x
+    let doty = props.dots[props.dotIndex].y
+    let carx = props.boxPos.x
+    let cary = props.boxPos.y
+    let a = dotx - carx
+    let b = doty - cary
+    distance1.value = Math.sqrt(a * a + b * b);
+  }
+
+
+}
 const getBoxPos = () => {
   centerValue.value = props.boxPos.y
   boxContentX.value = (props.boxPos.x / props.width) * 100
@@ -143,6 +191,9 @@ const zoomType = ref(0)
 function zoomScale(value, type) {
   centerValue.value = value
   zoomType.value = type
+  setTimeout(() => {
+    getLineData('head', `dot${props.dotIndex + 1}`)
+  }, 10)
 }
 
 // zoomScale(300, 1)
@@ -171,7 +222,7 @@ const leftTicks = computed(() => {
     return arr
   }
 
-  let factor = zoomType.value === 1 ? 10 : zoomType.value === 2 ? 100 : 1
+  let factor = zoomType.value === 1 ? 10 : zoomType.value === 2 ? 50 : 1
   let step = Math.floor(10 / factor)
   if (step < 1) step = 1
 

src/views/index.vue

@@ -297,7 +297,7 @@ const RIGHT = defineComponent({
 
                   <ElTable
                       highlightCurrentRow
-                      onCurrentChange={table1Current}
+                      onRowClick={table1Current}
                       data={tableData1.value}
                       style={{width: "100%"}}
                   >
@@ -648,7 +648,11 @@ const setItemsId = (e) => {
 // 雷达状态
 const radarWorkState = ref(0)
 // 车辆位置
-const boxPos = ref({x: 100, y: 100, rotate: 0})
+const boxPos = ref({x: 100, y: 150, rotate: 0})
+setInterval(() => {
+  // boxPos.value.x += ((-1) + Math.ceil(Math.random() * 2))
+  boxPos.value.y += ((-8) + Math.ceil(Math.random() * 10))
+}, 1000)
 // 左侧区域宽高
 const areaData = ref({
   width: 500,
@@ -675,6 +679,7 @@ const dots = ref([
   //   x: 125,
   //   y: 125
   // }
+  {x: 100, y: 100, index: 0}, {x: 100, y: 110, index: 1}
 ])
 // 当前的目标障碍物
 const dotIndex = ref(-1)
@@ -807,7 +812,7 @@ const form4 = ref({})
 const form5 = ref({})
 const form6 = ref({})
 
-const tableData1 = ref([])
+const tableData1 = ref([{x: 10, y: 10, index: 0}, {x: 20, y: 20, index: 1},])
 const tableData2 = ref([
   {
     "id": 2,
@@ -903,8 +908,8 @@ const getPoint = (k) => {
   regionLabeling.value[k].lat = currentPosition.value.lat || 0
 }
 const setDot = (e) => {
-  dots.value = [...dots.value, ...e.DarDatas.map((v, k) => {
-    if (v.Lon == 0 && v.Lat == 0) return null
+  let fodInfo = e.DarDatas.filter(v => v.Lon !== 0 && v.Lat !== 0)
+  dots.value = [...dots.value, ...fodInfo.map((v, k) => {
 
     const rectInfo = calcRectangleFromPoints(areaPoints.value);
     const point = {
@@ -917,8 +922,8 @@ const setDot = (e) => {
     return local
   }).filter(v => v)]
   console.log(dots.value)
-  tableData1.value = [...tableData1.value, ...e.DarDatas.filter(v => v.Lon !== 0 && v.Lat !== 0).map((v, k) => {
-    return {...v, index: k}
+  tableData1.value = [...tableData1.value, ...fodInfo.map((v, k) => {
+    return {...v, index: tableData1.value.length + k}
   })]
   // rulerRef.value.setDot(dots, false)
 }