소스 검색

地图功能

gr 3 주 전
부모
커밋
26b281cfdf
5개의 변경된 파일318개의 추가작업 그리고 66개의 파일을 삭제
  1. 11 0
      src/utils/map/addLayer.js
  2. 20 13
      src/views/home/cpns/FloatPanelKysg.vue
  3. 103 19
      src/views/home/cpns/PanelHxhs.vue
  4. 92 17
      src/views/home/cpns/PanelKyhs.vue
  5. 92 17
      src/views/home/cpns/PanelQjchs.vue

+ 11 - 0
src/utils/map/addLayer.js

@@ -1185,3 +1185,14 @@ export function addKysgScale(show) {
     "token": ""
   })
 }
+
+// 分类核查网格(航线)
+export function InspectPathCube(params) {
+  invokeParams('ShowThreeCubeDetail', {
+    "id": params.id,
+    "status": params.show? "show": "hide",
+    "points": params.points,
+    "size": params.size,
+    "token": ""
+  })
+}

+ 20 - 13
src/views/home/cpns/FloatPanelKysg.vue

@@ -44,13 +44,13 @@
 
     <!-- 范围选择滑动条 -->
     <el-slider class="slider-bg range-slider" v-model="form.meshHeights" :min="0" :max="600" range :marks="marks"
-      tooltip-class="range-tooltip" placement="bottom" :format-tooltip="val=> val+'m'" />
+      tooltip-class="range-tooltip" placement="bottom" :format-tooltip="val => val + 'm'" />
 
   </div>
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount, watch, reactive } from 'vue';
+import { ref, onBeforeUnmount, watch, reactive, nextTick } from 'vue';
 import { addKysgScale, DrawPolygon, QueryDistrict, QueryCube, clearDraw } from "@/utils/map/addLayer.js";
 import useLayoutStore from '@/store/layout';
 import { useMapStore } from '@/store/map';
@@ -61,7 +61,7 @@ const mapStore = useMapStore()
 const layoutStore = useLayoutStore()
 
 const form = ref({
-  meshType: '维',
+  meshType: '维',
   grade: true,
   deepShow: false,
   meshRange: '自适应',
@@ -125,14 +125,6 @@ watch(form, (val) => {
   showGrid()
 }, { deep: true })
 
-// watch(()=>form.value.meshHeights, (val) => {
-//   const sliderBtns = document.getElementsByClassName('el-slider__button-wrapper')
-//   if(!sliderBtns.length) return
-//   for(let i=0;i<sliderBtns.length;i++) {
-//     console.log(sliderBtns[i])
-//   }
-// }, { deep: true, immediate: true })
-
 function handleDraw() {
   clearQueryCube();
   getMesh("hide");
@@ -168,6 +160,18 @@ const DenseData = reactive([
 function clearPoints() {
   form.value.meshLevel = ''
   form.value.meshHeights = [0, 0]
+  nextTick(() => {
+    const toolsTips = document.getElementsByClassName('range-tooltip')
+    for (let i = 0; i < toolsTips.length; i++) {
+      toolsTips[i].style.visibility = 'hidden'
+    }
+    const sliderBtns = document.getElementsByClassName('el-slider__button-wrapper')
+    for (let i = 0; i < toolsTips.length; i++) {
+      sliderBtns[i].addEventListener("mousedown", () => {
+        toolsTips[i].style.visibility = 'visible'
+      });
+    }
+  })
 }
 
 // 单点选择逻辑
@@ -397,7 +401,7 @@ onBeforeUnmount(() => {
     .el-slider__button-wrapper {
       top: -6px;
 
-      pointer-events: none;
+      // pointer-events: none;
 
       .el-slider__button {
         width: 14px;
@@ -433,14 +437,17 @@ onBeforeUnmount(() => {
 
 <style lang="scss">
 .range-tooltip {
-  // display: block !important;
+  display: block !important;
   background: none !important;
   border: none !important;
   margin-top: -7px;
+  visibility: hidden;
+
   span {
     color: #ddd;
     font-size: 16px;
   }
+
   .el-popper__arrow {
     display: none;
   }

+ 103 - 19
src/views/home/cpns/PanelHxhs.vue

@@ -10,7 +10,7 @@
     <div class="flex-1 relative mb-4">
       <Transition name="emerge-left">
         <el-form ref="formRef" v-show="currentStep === 0" :model="form" :rules="rules" label-position="left"
-          size="large" class="p-form p-main">
+          size="large" class="p-form p-main" hide-required-asterisk>
           <el-form-item label="名称" prop="name">
             <el-input v-model="form.name" clearable></el-input>
           </el-form-item>
@@ -109,7 +109,7 @@
             <li v-for="item in plans" class="pt-7 cursor-pointer hover:brightness-125"
               :class="{ 'active': item.id === currentPlan }" @click="handlePickPlan(item)">
               <div class="text-base"><span class="tuli" :style="{ backgroundColor: item.color }"></span>{{ item.feature
-                }}
+              }}
               </div>
               <div class="text-sm py-1">距离&nbsp;<span class="num">{{ item.distance }}</span>&nbsp;公里</div>
               <div class="text-sm">风险度:<span class="num">{{ item.risk }}</span></div>
@@ -147,7 +147,9 @@
                   <tr v-for="row in item.details">
                     <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
                     <td class="w-20">
-                      <el-checkbox size="large" v-model="row.display"></el-checkbox>
+                      <el-checkbox size="large" v-model="row.display"
+                        :disabled="(row.id !== '3-3' && !row.cubes.length) || (row.id === '3-3' && item.details.every(r => r.cubes.length === 0))"
+                        @change="val => toggleCubeDetail(row, val)"></el-checkbox>
                     </td>
                   </tr>
                 </tbody>
@@ -175,6 +177,7 @@
 import { ref, onMounted, watch, onBeforeUnmount, computed } from 'vue';
 import { routePlanAll, saveRoute, searchQJCList } from "@/service/panelHxhs.js";
 import { geometryMeshEffect, getPathCube, showAndRedrawPath } from "@/utils/map/addTool.js";
+import { InspectPathCube } from '@/utils/map/addLayer';
 import useLayoutStore from '@/store/layout'
 import { useMapStore } from "@/store/map.js";
 import { riskTypes } from '@/utils/options';
@@ -230,13 +233,61 @@ const results = ref([
 ])
 
 function handleReInspect() {
-  layoutStore.toggleGlobalLoading(true)
   closeCube()
   setTimeout(() => {
     queryCube()
   }, 500);
 }
 
+let addedCubeDetailIds = []
+
+function toggleCubeDetail(row, status) {
+  console.log(row, status)
+  if (row.id === '3-3') {
+    // 处理综合占比
+    results.value[3].details.forEach(gRow => {
+      if (gRow.display !== status && gRow.cubes.length) {
+        gRow.display = status
+        toggleCubeDetail(gRow, status)
+      }
+    })
+  } else {
+    if (!row.cubes.length) return
+    const id = 'hxhs_' + row.id
+    if(status) {
+      addedCubeDetailIds.push(id)
+    } else {
+      const targetIndex = addedCubeDetailIds.findIndex(i => i===id)
+      addedCubeDetailIds.splice(targetIndex, 1)
+    }
+    InspectPathCube({
+      id,
+      show: status,
+      points: row.cubes.map(c => ({
+        x: c.x,
+        y: c.y,
+        z: c.z,
+        color: c.color
+      })),
+      size: {
+        xLength: row.cubes[0].boxSize.lonLength,
+        yLength: row.cubes[0].boxSize.latLength,
+        zLength: row.cubes[0].boxSize.height
+      }
+    })
+  }
+}
+
+function clearAllCubeDetail() {
+  addedCubeDetailIds.forEach(id => {
+    InspectPathCube({
+      id,
+      show: false,
+    })
+  })
+  addedCubeDetailIds = []
+}
+
 let plans = ref([
   { id: '1', name: 'originalPath', feature: '接近原方案', color: '#FFA500', distance: '', risk: '50' },
   { id: '2', name: 'safePath', feature: '地面风险较低', color: '#00FF00', distance: '', risk: '10' },
@@ -249,8 +300,17 @@ const isSafe = computed(() => {
 
 const hasDraw = ref(false)
 
+function clearResults() {
+  results.value.forEach(v => {
+    v.details = []
+    v.level = null
+  })
+}
+
 function formatResult(res) {
   console.log('formatResult:', res)
+
+  clearResults()
   const { groundSafety, lineConflictArray, obstacle, spaceConflictArray, spaceRisk, lineRisk } = res
 
   results.value[0].level = spaceRisk
@@ -258,23 +318,33 @@ function formatResult(res) {
   results.value[2].level = obstacle.risk
   results.value[3].level = groundSafety.risk
 
-  results.value[0].details = spaceConflictArray.map(i => ({
+  results.value[0].details = spaceConflictArray.map((i, index) => ({
+    id: `0-${index}`,
     areaName: i.gridName,
     height: i.heightRange,
     time: i.conflictTime,
-    display: false
+    cubes: i.gridEntityList,
+    display: false,
   }))
 
-  results.value[1].details = lineConflictArray.map(i => ({
+  results.value[1].details = lineConflictArray.map((i, index) => ({
+    id: `1-${index}`,
     areaName: i.gridName,
     height: i.heightRange,
     time: i.conflictTime,
+    cubes: i.gridEntityList,
     display: false
   }))
 
   results.value[2].details = [
-    { time: '01-249:00-01-25 10-00', object: '建筑物', height: obstacle.buildingConflictHeight, display: false },
-    { time: '01-249:00-01-25 10-00', object: '建筑物缓冲区', height: obstacle.buildingBufferConflictHeight, display: false },
+    {
+      id: '2-0', time: '01-249:00-01-25 10-00', object: '建筑物',
+      height: obstacle.buildingConflictHeight, cubes: obstacle.buildingsConflictArray, display: false
+    },
+    {
+      id: '2-1', time: '01-249:00-01-25 10-00', object: '建筑物缓冲区',
+      height: obstacle.buildingBufferConflictHeight, cubes: obstacle.buildingsBufferConflictArray, display: false
+    },
   ]
 
   const toPercent = (num) => {
@@ -282,10 +352,10 @@ function formatResult(res) {
   }
 
   results.value[3].details = [
-    { element: '道路', coverage: toPercent(groundSafety.road), display: false },
-    { element: '河流', coverage: toPercent(groundSafety.river), display: false },
-    { element: '绿化', coverage: toPercent(groundSafety.green), display: false },
-    { element: '综合占比', coverage: toPercent(groundSafety.road + groundSafety.river + groundSafety.green), display: false },
+    { id: '3-0', element: '道路', coverage: toPercent(groundSafety.road), cubes: groundSafety.gridGoupMap.road, display: false },
+    { id: '3-1', element: '河流', coverage: toPercent(groundSafety.river), cubes: groundSafety.gridGoupMap.river, display: false },
+    { id: '3-2', element: '绿化', coverage: toPercent(groundSafety.green), cubes: groundSafety.gridGoupMap.green, display: false },
+    { id: '3-3', element: '综合占比', coverage: toPercent(groundSafety.road + groundSafety.river + groundSafety.green), display: false },
   ]
 
   layoutStore.toggleGlobalLoading(false)
@@ -298,6 +368,7 @@ function handlePickPlan(plan) {
 
   const conflicts = allPathArr[plan.name]?.conflicts
   if (!conflicts) return
+  clearAllCubeDetail()
   formatResult(conflicts.gridConflict)
 }
 
@@ -314,6 +385,10 @@ function toNext() {
 
 function toPrev() {
   currentStep.value = 0
+  formRef.value.resetFields()
+  allPathArr = {}
+  clearResults()
+  clearAllCubeDetail()
   getPathCube({
     status: "hide",
   })
@@ -418,6 +493,7 @@ function showOriginPath() {
 
 //查询网格
 function queryCube() {
+  layoutStore.toggleGlobalLoading(true)
   getPathCube({
     status: "show",
     paths: [currentPath]
@@ -449,12 +525,20 @@ function getAutoPath() {
     paths: paramsPaths
   }).then(res => {
     debugger
-    let data = res.data.data;
-    allPathArr = data;
-    plans.value.forEach((item) => {
-      item.distance = (data[item.name].length / 1000).toFixed(2)
-    });
-    handlePickPlan(plans.value[0])
+    if(res.data.code!==200) {
+      ElMessage({ type: 'error', message: res.data.msg })
+      currentStep.value = 0
+    } else {
+      let data = res.data.data;
+      allPathArr = data;
+      plans.value.forEach((item) => {
+        item.distance = (data[item.name].length / 1000).toFixed(2)
+      });
+      handlePickPlan(plans.value[0])
+    }
+  }).catch(()=> {
+    ElMessage({ type: 'error', message: '路径规划请求失败' })
+    currentStep.value = 0
   }).finally(() => {
     layoutStore.toggleGlobalLoading(false)
   })

+ 92 - 17
src/views/home/cpns/PanelKyhs.vue

@@ -112,7 +112,8 @@
                     <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
                     <td class="w-20">
                       <el-checkbox size="large" v-model="row.display"
-                        @change="val => handleDisplay(row, val)"></el-checkbox>
+                        :disabled="(row.id !== '3-3' && !row.cubes.length) || (row.id === '3-3' && item.details.every(r => r.cubes.length === 0))"
+                        @change="val => toggleCubeDetail(row, val)"></el-checkbox>
                     </td>
                   </tr>
                 </tbody>
@@ -137,7 +138,7 @@
 
 <script setup>
 import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue';
-import { drawArea, clearDraw, InspectCube, showShapes } from '@/utils/map/addLayer'
+import { drawArea, clearDraw, InspectCube, showShapes, InspectPathCube } from '@/utils/map/addLayer'
 import { airSpaceTypes } from '@/utils/options';
 import { hexToRgb } from '@/utils/tools';
 import { useMapStore } from '@/store/map';
@@ -216,7 +217,6 @@ function handleDraw() {
         id: 'kyhs_drew_non_editable',
         data: null
       })
-      handleInspect(false)
       await new Promise((res) => {
         setTimeout(() => res(), 500);
       })
@@ -285,31 +285,52 @@ watch(() => mapStore.cubeResult, (val) => {
   formatResult(val)
 }, { deep: true })
 
-function formatResult(val) {
-  const { groundSafety, lineConflictArray, obstacle, spaceConflictArray } = val
+function clearResults() {
+  results.value.forEach(v => {
+    v.details = []
+    v.level = null
+  })
+}
+
+function formatResult(res) {
+  console.log('formatResult:', res)
 
-  results.value[0].level = val.spaceRisk
-  results.value[1].level = val.lineRisk
+  clearResults()
+  clearAllCubeDetail()
+  const { groundSafety, lineConflictArray, obstacle, spaceConflictArray, spaceRisk, lineRisk } = res
+
+  results.value[0].level = spaceRisk
+  results.value[1].level = lineRisk
   results.value[2].level = obstacle.risk
   results.value[3].level = groundSafety.risk
 
-  results.value[0].details = spaceConflictArray.map(i => ({
+  results.value[0].details = spaceConflictArray.map((i, index) => ({
+    id: `0-${index}`,
     areaName: i.gridName,
     height: i.heightRange,
     time: i.conflictTime,
-    display: true
+    cubes: i.gridEntityList,
+    display: false,
   }))
 
-  results.value[1].details = lineConflictArray.map(i => ({
+  results.value[1].details = lineConflictArray.map((i, index) => ({
+    id: `1-${index}`,
     areaName: i.gridName,
     height: i.heightRange,
     time: i.conflictTime,
-    display: true
+    cubes: i.gridEntityList,
+    display: false
   }))
 
   results.value[2].details = [
-    { time: '01-249:00-01-25 10-00', object: '建筑物', height: obstacle.buildingConflictHeight, display: true },
-    { time: '01-249:00-01-25 10-00', object: '建筑物缓冲区', height: obstacle.buildingBufferConflictHeight, display: true },
+    {
+      id: '2-0', time: '01-249:00-01-25 10-00', object: '建筑物',
+      height: obstacle.buildingConflictHeight, cubes: obstacle.buildingsConflictArray, display: false
+    },
+    {
+      id: '2-1', time: '01-249:00-01-25 10-00', object: '建筑物缓冲区',
+      height: obstacle.buildingBufferConflictHeight, cubes: obstacle.buildingsBufferConflictArray, display: false
+    },
   ]
 
   const toPercent = (num) => {
@@ -317,10 +338,10 @@ function formatResult(val) {
   }
 
   results.value[3].details = [
-    { element: '道路', coverage: toPercent(groundSafety.road), display: true },
-    { element: '河流', coverage: toPercent(groundSafety.river), display: true },
-    { element: '绿化', coverage: toPercent(groundSafety.green), display: true },
-    { element: '综合占比', coverage: toPercent(groundSafety.road + groundSafety.river + groundSafety.green), display: true },
+    { id: '3-0', element: '道路', coverage: toPercent(groundSafety.road), cubes: groundSafety.gridGoupMap.road, display: false },
+    { id: '3-1', element: '河流', coverage: toPercent(groundSafety.river), cubes: groundSafety.gridGoupMap.river, display: false },
+    { id: '3-2', element: '绿化', coverage: toPercent(groundSafety.green), cubes: groundSafety.gridGoupMap.green, display: false },
+    { id: '3-3', element: '综合占比', coverage: toPercent(groundSafety.road + groundSafety.river + groundSafety.green), display: false },
   ]
 
   layoutStore.toggleGlobalLoading(false)
@@ -361,8 +382,60 @@ function handleReInspect() {
   }, 500);
 }
 
+let addedCubeDetailIds = []
+
+function toggleCubeDetail(row, status) {
+  console.log(row, status)
+  if (row.id === '3-3') {
+    // 处理综合占比
+    results.value[3].details.forEach(gRow => {
+      if (gRow.display !== status && gRow.cubes.length) {
+        gRow.display = status
+        toggleCubeDetail(gRow, status)
+      }
+    })
+  } else {
+    if (!row.cubes.length) return
+    const id = 'hxhs_' + row.id
+    if(status) {
+      addedCubeDetailIds.push(id)
+    } else {
+      const targetIndex = addedCubeDetailIds.findIndex(i => i===id)
+      addedCubeDetailIds.splice(targetIndex, 1)
+    }
+    InspectPathCube({
+      id,
+      show: status,
+      points: row.cubes.map(c => ({
+        x: c.x,
+        y: c.y,
+        z: c.z,
+        color: c.color
+      })),
+      size: {
+        xLength: row.cubes[0].boxSize.lonLength,
+        yLength: row.cubes[0].boxSize.latLength,
+        zLength: row.cubes[0].boxSize.height
+      }
+    })
+  }
+}
+
+function clearAllCubeDetail() {
+  addedCubeDetailIds.forEach(id => {
+    InspectPathCube({
+      id,
+      show: false,
+    })
+  })
+  addedCubeDetailIds = []
+}
+
 function toPrev() {
   currentStep.value = 0
+  handleInspect(false)
+  clearAllCubeDetail()
+  clearResults()
 }
 
 const loading = reactive({
@@ -399,6 +472,8 @@ onBeforeUnmount(() => {
     id: 'kyhs_drew_non_editable',
     data: null
   })
+  clearResults()
+  clearAllCubeDetail()
 })
 
 </script>

+ 92 - 17
src/views/home/cpns/PanelQjchs.vue

@@ -128,7 +128,8 @@
                     <td v-for="key in Object.keys(item.cols)">{{ row[key] }}</td>
                     <td class="w-20">
                       <el-checkbox size="large" v-model="row.display"
-                        @change="val => handleDisplay(row, val)"></el-checkbox>
+                        :disabled="(row.id !== '3-3' && !row.cubes.length) || (row.id === '3-3' && item.details.every(r => r.cubes.length === 0))"
+                        @change="val => toggleCubeDetail(row, val)"></el-checkbox>
                     </td>
                   </tr>
                 </tbody>
@@ -151,7 +152,7 @@
 
 <script setup>
 import { onBeforeUnmount, ref, watch, reactive, computed } from 'vue';
-import { drawArea, clearDraw, InspectCube, showShapes } from '@/utils/map/addLayer'
+import { drawArea, clearDraw, InspectCube, showShapes, InspectPathCube } from '@/utils/map/addLayer'
 import { useMapStore } from '@/store/map';
 import { uavList } from '@/utils/options';
 import { AddPlot } from '@/service/http';
@@ -233,7 +234,6 @@ async function handleDraw() {
         id: 'qjchs_drew_non_editable',
         data: null
       })
-      handleInspect(false)
       await new Promise((res) => {
         setTimeout(() => res(), 500);
       })
@@ -302,31 +302,52 @@ watch(() => mapStore.cubeResult, (val) => {
   formatResult(val)
 }, { deep: true })
 
-function formatResult(val) {
-  const { groundSafety, lineConflictArray, obstacle, spaceConflictArray } = val
+function clearResults() {
+  results.value.forEach(v => {
+    v.details = []
+    v.level = null
+  })
+}
+
+function formatResult(res) {
+  console.log('formatResult:', res)
 
-  results.value[0].level = val.spaceRisk
-  results.value[1].level = val.lineRisk
+  clearResults()
+  clearAllCubeDetail()
+  const { groundSafety, lineConflictArray, obstacle, spaceConflictArray, spaceRisk, lineRisk } = res
+
+  results.value[0].level = spaceRisk
+  results.value[1].level = lineRisk
   results.value[2].level = obstacle.risk
   results.value[3].level = groundSafety.risk
 
-  results.value[0].details = spaceConflictArray.map(i => ({
+  results.value[0].details = spaceConflictArray.map((i, index) => ({
+    id: `0-${index}`,
     areaName: i.gridName,
     height: i.heightRange,
     time: i.conflictTime,
-    display: true
+    cubes: i.gridEntityList,
+    display: false,
   }))
 
-  results.value[1].details = lineConflictArray.map(i => ({
+  results.value[1].details = lineConflictArray.map((i, index) => ({
+    id: `1-${index}`,
     areaName: i.gridName,
     height: i.heightRange,
     time: i.conflictTime,
-    display: true
+    cubes: i.gridEntityList,
+    display: false
   }))
 
   results.value[2].details = [
-    { time: '01-249:00-01-25 10-00', object: '建筑物', height: obstacle.buildingConflictHeight, display: true },
-    { time: '01-249:00-01-25 10-00', object: '建筑物缓冲区', height: obstacle.buildingBufferConflictHeight, display: true },
+    {
+      id: '2-0', time: '01-249:00-01-25 10-00', object: '建筑物',
+      height: obstacle.buildingConflictHeight, cubes: obstacle.buildingsConflictArray, display: false
+    },
+    {
+      id: '2-1', time: '01-249:00-01-25 10-00', object: '建筑物缓冲区',
+      height: obstacle.buildingBufferConflictHeight, cubes: obstacle.buildingsBufferConflictArray, display: false
+    },
   ]
 
   const toPercent = (num) => {
@@ -334,10 +355,10 @@ function formatResult(val) {
   }
 
   results.value[3].details = [
-    { element: '道路', coverage: toPercent(groundSafety.road), display: true },
-    { element: '河流', coverage: toPercent(groundSafety.river), display: true },
-    { element: '绿化', coverage: toPercent(groundSafety.green), display: true },
-    { element: '综合占比', coverage: toPercent(groundSafety.road + groundSafety.river + groundSafety.green), display: true },
+    { id: '3-0', element: '道路', coverage: toPercent(groundSafety.road), cubes: groundSafety.gridGoupMap.road, display: false },
+    { id: '3-1', element: '河流', coverage: toPercent(groundSafety.river), cubes: groundSafety.gridGoupMap.river, display: false },
+    { id: '3-2', element: '绿化', coverage: toPercent(groundSafety.green), cubes: groundSafety.gridGoupMap.green, display: false },
+    { id: '3-3', element: '综合占比', coverage: toPercent(groundSafety.road + groundSafety.river + groundSafety.green), display: false },
   ]
 
   layoutStore.toggleGlobalLoading(false)
@@ -368,6 +389,55 @@ function toNext() {
   })
 }
 
+let addedCubeDetailIds = []
+
+function toggleCubeDetail(row, status) {
+  console.log(row, status)
+  if (row.id === '3-3') {
+    // 处理综合占比
+    results.value[3].details.forEach(gRow => {
+      if (gRow.display !== status && gRow.cubes.length) {
+        gRow.display = status
+        toggleCubeDetail(gRow, status)
+      }
+    })
+  } else {
+    if (!row.cubes.length) return
+    const id = 'hxhs_' + row.id
+    if(status) {
+      addedCubeDetailIds.push(id)
+    } else {
+      const targetIndex = addedCubeDetailIds.findIndex(i => i===id)
+      addedCubeDetailIds.splice(targetIndex, 1)
+    }
+    InspectPathCube({
+      id,
+      show: status,
+      points: row.cubes.map(c => ({
+        x: c.x,
+        y: c.y,
+        z: c.z,
+        color: c.color
+      })),
+      size: {
+        xLength: row.cubes[0].boxSize.lonLength,
+        yLength: row.cubes[0].boxSize.latLength,
+        zLength: row.cubes[0].boxSize.height
+      }
+    })
+  }
+}
+
+function clearAllCubeDetail() {
+  addedCubeDetailIds.forEach(id => {
+    InspectPathCube({
+      id,
+      show: false,
+    })
+  })
+  addedCubeDetailIds = []
+}
+
 function handleReInspect() {
   layoutStore.toggleGlobalLoading(true)
   handleInspect(false)
@@ -378,6 +448,9 @@ function handleReInspect() {
 
 function toPrev() {
   currentStep.value = 0
+  handleInspect(false)
+  clearAllCubeDetail()
+  clearResults()
 }
 
 const loading = reactive({
@@ -416,6 +489,8 @@ onBeforeUnmount(() => {
     id: 'qjchs_drew_non_editable',
     data: null
   })
+  clearResults()
+  clearAllCubeDetail()
 })
 
 </script>