修改删除逻辑

src/components/ruler.vue

@@ -138,6 +138,8 @@ const getDistanceAndZoom = () => {
   if (props.dotIndex === -1) {
     distance1.value = 0
   } else {
+    console.log(props.dots )
+    console.log(props.dots[props.dotIndex])
     let dotx = props.dots[props.dotIndex].x
     let doty = props.dots[props.dotIndex].y
     let carx = props.boxPos.x

src/views/index.vue

@@ -200,7 +200,11 @@
               @row-click="table1Current"
           >
             <el-table-column type="selection" width="55"/>
-            <el-table-column label="序号" prop="index" width="60"/>
+            <el-table-column label="序号"  width="60">
+              <template #default="scope">
+                {{(currentPage1 - 1) * pageSize1 + scope.$index +1}}
+              </template>
+            </el-table-column>
             <el-table-column prop="Lon" label="目标经度" width="100"/>
             <el-table-column prop="Lat" label="目标纬度" width="100"/>
             <el-table-column prop="Strength" label="强度信息" width="100"/>
@@ -239,7 +243,7 @@
               style="width: 100%"
           >
             <!--            <el-table-column type="selection" width="55"/>-->
-            <el-table-column label="序号" type="index" width="60"/>
+            <el-table-column label="序号" type="index" width="60" />
             <el-table-column prop="name" label="名称" width="100"/>
             <el-table-column prop="lon" label="目标经度" width="100"/>
             <el-table-column prop="lat" label="目标纬度" width="100"/>
@@ -989,7 +993,6 @@ const getShildTableList = () => {
 // 障碍物列表
 const tableData1 = ref([])
 const tableData1Computed =  computed(() => {
-  console.log(tableData1.value.slice((currentPage1.value - 1) * pageSize1.value, currentPage1.value * pageSize1.value))
   return tableData1.value.slice((currentPage1.value - 1) * pageSize1.value, currentPage1.value * pageSize1.value)
 });
 // 上传图片
@@ -1039,10 +1042,8 @@ const delPoint = (e) => {
   let arr = JSON.parse(JSON.stringify(tableData1.value))
   arr.splice((currentPage1.value - 1) * pageSize1.value + e.$index, 1);
   tableData1.value = arr || []
-  console.log(e.index)
-  console.log(dotIndex.value)
   dotIndexF((currentPage1.value - 1) * pageSize1.value + e.$index)
-  console.log(dotIndex.value)
+  table1DataIndexF()
 }
 // 当前页
 const currentPage1 = ref(1)
@@ -1051,7 +1052,6 @@ const pageSize1 = ref(10)
 
 // 打开处置模态框
 const openHandleObstacleDialog = (e) => {
-  console.log(e.row)
   dialog1.value = true
   dialog1Form.value = {
     dotIndex: e.index,
@@ -1075,6 +1075,7 @@ const handleObstacle = () => {
     dialog1.value = false
     dotIndexF(dialog1Form.value.dotIndex)
     tableData1.value.splice((currentPage1.value - 1) * pageSize1.value + dialog1Form.value.index, 1);
+    table1DataIndexF()
   })
 }
 
@@ -1094,6 +1095,7 @@ const batchDisposal = () => {
     tableData1.value = tableData1.value.filter(item => row.index !== item.index);
   })
   getShildTableList()
+  table1DataIndexF()
 }
 // 批量删除
 const batchDel = () => {
@@ -1102,6 +1104,7 @@ const batchDel = () => {
   datas.forEach((row) => {
     tableData1.value = tableData1.value.filter(item => row.index !== item.index);
   })
+  table1DataIndexF()
 }
 // 批量固定
 const batchShild = () => {
@@ -1119,6 +1122,7 @@ const batchShild = () => {
     tableData1.value = tableData1.value.filter(item => row.index !== item.index);
   })
   getShildTableList()
+  table1DataIndexF()
 }
 
 const date1 = ref([])
@@ -1236,11 +1240,11 @@ const dotIndexF = (index) => {
 
   }
 }
-const table1Current = (e, v) => {
+const table1Current = (e,  ) => {
-  if (dotIndex.value === e.index) {
+  if (dotIndex.value ===e.index) {
     dotIndex.value = -1
   } else {
-    dotIndex.value = e.index || 0
+    dotIndex.value = e.index
   }
 }
 
@@ -1322,35 +1326,51 @@ const getAreaData = () => {
 
 
 const testFun = () => {
-
+ let areaData111 = [
-  areaPoints.value = [
+   {
-    {
+     "id": 8,
-      name: '点位1',
+     "name": "点位4",
-      lon: 120.263824,
+     "lon": 119.684151,
-      lat: 36.985199,
+     "lat": 25.93293,
-    },
+     "isDel": 0,
-    {
+     "fodAreaId": 1,
-      name: '点位2',
+     "fodAirId": 1
-      lon: 120.271545,
+   },
-      lat: 36.9816399,
+   {
-    },
+     "id": 7,
-    {
+     "name": "点位3",
-      name: '点位3',
+     "lon": 119.680298,
-      lon: 120.271736,
+     "lat": 25.9260902,
-      lat: 36.9818535,
+     "isDel": 0,
-    },
+     "fodAreaId": 1,
-    {
+     "fodAirId": 1
-      name: '点位4',
+   },
-      lon: 120.264008,
+   {
-      lat: 36.985424,
+     "id": 6,
-    },
+     "name": "点位2",
-  ]
+     "lon": 119.679855,
-  let data = calcRectangleFromPoints(areaPoints.value)
+     "lat": 25.9263058,
+     "isDel": 0,
+     "fodAreaId": 1,
+     "fodAirId": 1
+   },
+   {
+     "id": 5,
+     "name": "点位1",
+     "lon": 119.683708,
+     "lat": 25.9331474,
+     "isDel": 0,
+     "fodAreaId": 1,
+     "fodAirId": 1
+   }
+ ]
+  areaPoints.value =areaData111
+  let data = calcRectangleFromPoints(areaData111)
   areaData.value = data
-  getDeviationValue(areaPoints.value.find(e => e.name === '点位3'))
+  getDeviationValue(areaData111.find(e => e.name === '点位3'))
   let data1 = {
-    lon: 120.2716405,
+    lon: 119.684151,
-    lat: 36.9817467,
+    lat: 25.93293,
     rotate: 303
   }
   const getLocal = () => {
@@ -1360,15 +1380,6 @@ const testFun = () => {
     boxPos.value = local
   }
   getLocal()
-  let fx = 1
-  setInterval(() => {
-    data1.lon += fx * -0.0077245 * 0.01 / 60
-    data1.lat += fx * 0.0035648 * 0.01 / 60
-    getLocal()
-  }, 1000 / 60)
-  setInterval(() => {
-    fx *= -1
-  }, 1000 * 80)
 }
 const getDotsData = () => {
   dots.value = [...tableData1.value.map((v, k) => {
@@ -1388,31 +1399,49 @@ watch(() => JSON.stringify([tableData1.value, areaPoints.value]), (oldVal, newVa
   console.log(tableData1.value)
   localStorage.setItem('tableData1', JSON.stringify(tableData1.value));
   getDotsData()
+  console.log(dots.value)
 }, {deep: true})
+
+const table1DataIndexF = () =>{
+
+  tableData1.value = tableData1.value.map((v, k) => {
+    return {
+      ...v,
+      index: k,
+    }
+  })
+}
+const readTableData = () =>{
+
+  const storedStr = localStorage.getItem('tableData1');
+  if (!storedStr) {
+    console.log('localStorage中无数据');
+    return;
+  }
+  const storedData = JSON.parse(storedStr);
+  if (!Array.isArray(storedData)) {
+    console.error('存储的数据不是数组');
+    return;
+  }
+  tableData1.value.splice(0, tableData1.value.length, ...(storedData.map((e,index)=>{
+    return {
+      ...e,
+      index: index,
+    }
+  })));
+  if (table1Ref.value) {
+    table1Ref.value.doLayout(); // 强制表格重新计算布局
+  }
+  console.log('加载成功，数据长度：', tableData1.value.length);
+}
 onMounted(() => {
+  readTableData()
   getTableData()
   getSocket()
   getOption()
   getShildTableList()
   // testFun()
   getDotsData()
-  setTimeout(() => {
-    const storedStr = localStorage.getItem('tableData1');
-    if (!storedStr) {
-      console.log('localStorage中无数据');
-      return;
-    }
-    const storedData = JSON.parse(storedStr);
-    if (!Array.isArray(storedData)) {
-      console.error('存储的数据不是数组');
-      return;
-    }
-    tableData1.value.splice(0, tableData1.value.length, ...storedData);
-    if (table1Ref.value) {
-      table1Ref.value.doLayout(); // 强制表格重新计算布局
-    }
-    console.log('加载成功，数据长度：', tableData1.value.length);
-  }, 1000)
 })