修改显示

src/components/ruler.vue

@@ -84,9 +84,16 @@ watch(() => props.boxPos, (newVal, oldVal) => {
 onMounted(() => {
   getBoxPos()
   nextTick(() => {
-    getLineData('head', `dot${props.dotIndex + 1}`)
+    if (props.dotIndex >= 0) {
+      getLineData('head', `dot${props.dotIndex + 1}`)
+    }
   })
 })
+watch(() => props.dotIndex, (newVal, oldVal) => {
+  if (props.dotIndex >= 0) {
+    getLineData('head', `dot${props.dotIndex + 1}`)
+  }
+})
 const getBoxPos = () => {
   centerValue.value = props.boxPos.y
   boxContentX.value = (props.boxPos.x / props.width) * 100
@@ -130,7 +137,7 @@ const getLineData = (fromId, toId) => {
 }
 
 
-const centerValue = ref(100)
+const centerValue = ref(0)
 const zoomType = ref(0)
 
 function zoomScale(value, type) {
@@ -138,6 +145,8 @@ function zoomScale(value, type) {
   zoomType.value = type
 }
 
+// zoomScale(300, 1)
+
 function getAxisRange() {
   if (!leftTicks.value || leftTicks.value.length === 0) return {min: 0, max: props.height}
   const values = leftTicks.value.map(t => t.value)

src/views/index.vue

@@ -91,7 +91,7 @@ const LEFT = defineComponent({
               height={areaData.value.height}
               boxPos={boxPos.value}
               dots={dots.value}
-              dotIndex={0}
+              dotIndex={dotIndex.value}
           />
         </div>
     )
@@ -377,7 +377,8 @@ const RIGHT = defineComponent({
                         />
                         <ElButton type="primary" onClick={() => getPoint(k)}
                                   style={{marginLeft: "20px"}}>获取</ElButton>
-                        <ElButton type="danger" onClick={() => DeleteCData({id:parseFloat(i.id)}).then(()=>getArea2())}
+                        <ElButton type="danger"
+                                  onClick={() => DeleteCData({id: parseFloat(i.id)}).then(() => getArea2())}
                                   style={{marginLeft: "20px"}}>删除</ElButton>
                       </div>
                   ))}
@@ -784,6 +785,7 @@ function getXYDistanceFromMin(current, minPoint) {
 
   return {xDistance, yDistance};
 }
+
 const processData = (data) => {
   // console.log('data',data.ty)
   // console.log('FodName', data.FodName)
@@ -1072,11 +1074,37 @@ const savePoint = () => {
 const setDot = (e) => {
   let dots = e.DarDatas.map((v, k) => {
     if (v.Lon == 0 && v.Lat == 0) return null
-    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
+    let xAndy = getXYDistanceFromMin({lon: v.Lon, lat: v.Lat}, {lon: area.LonMin, lat: area.LatMin})
+
+    let location = {}
+    if (areaType.value === 1) {
+      location = {
+        x: xAndy.xDistance,
+        y: xAndy.yDistance,
+      }
+    } else if (areaType.value === 2) {
+      location = {
+        x: areaData.value.width - xAndy.yDistance,
+        y: xAndy.xDistance,
+      }
+    } else if (areaType.value === 3) {
+      location = {
+        x: areaData.value.width - xAndy.xDistance,
+        y: areaData.value.height - xAndy.yDistance,
+      }
+    } else if (areaType.value === 4) {
+      location = {
+        x: xAndy.yDistance,
+        y: areaData.value.height - xAndy.xDistance,
+      }
+    } else {
+      location = {
+        x: xAndy.xDistance,
+        y: xAndy.yDistance,
+      }
     }
+
+    return location
   }).filter(v => v)
   tableData1.value = [...tableData1.value, ...e.DarDatas.filter(v => v.Lon !== 0 && v.Lat !== 0).map((v, k) => {
     return {...v, index: k}