地图功能接入

src/components/MapView.vue

@@ -28,12 +28,11 @@ export default {
       }, 2500);
       myBridge.bridgeContent = bridge = new CityGis.Bridge({
         id: "i_map",
-        // url: 'http://58.34.215.19:8095/map-tool-widget/#/jk_map',
-        url: 'http://localhost:5173/map-tool-widget/',
+        // url: 'http://localhost:5173/map-tool-widget/',
         // url: 'http://10.1.163.210:5173/map-tool-widget/#/jk_map',
         // url: 'http://58.34.215.19:8100/map-tool-widget/',
         // url: 'https://cimweb.zjw.sh.cegn.cn:2007/map-tool-widget/#/',
-        // url: 'http://58.34.215.19:8095/map-tool-widget/#/jk_map',
+        url: 'http://58.34.215.19:8095/map-tool-widget/#/jk_map',
         onReady: function () {
           console.log("地图创建完成")
         }

src/utils/map/addLayer.js

@@ -1164,10 +1164,19 @@ export function QueryCube(params) {
 
 // 查询行政区划
 export function QueryDistrict(districtArr) {
-  const type = districtArr.length===1? "区县": "街道"
+  const type = districtArr.length === 1 ? "区县" : "街道"
   invokeParams('QueryIn2D', {
     type,
     where: `${type}名称='${districtArr.at(-1)}'`,
     token: ""
   })
 }
+
+// 比例尺无极切换(空域栅格)
+export function addKysgScale(show) {
+  invokeParams('ShowLayersWithScaleEvents', {
+    "status": show ? "show" : 'hide',
+    "scale_handle_id": "scale_handle_cube",
+    "token": ""
+  })
+}

src/views/home/cpns/FloatPanelKysg.vue

@@ -2,7 +2,7 @@
   <div class="slider-container" v-if="!layoutStore.asideCollapse">
 
     <el-form v-model="form" inline class="top-form">
-      <el-form-item label="网格类型" prop="meshType">
+      <el-form-item label="类型" prop="meshType">
         <el-radio-group v-model="form.meshType">
           <el-radio label="二维" value="二维" />
           <el-radio label="三维" value="三维" />
@@ -11,15 +11,19 @@
       <el-form-item>
         <el-checkbox v-model="form.grade">三维评分</el-checkbox>
       </el-form-item>
-      <el-form-item label="网格范围" prop="meshRange">
+      <el-form-item label="范围" prop="meshRange">
         <el-radio-group v-model="form.meshRange">
-          <el-radio label="自适应范围" value="自适应范围" />
-          <el-radio label="自定义范围" value="自定义范围" />
+          <el-radio label="自适应" value="自适应" />
+          <el-radio label="自定义" value="自定义" />
           <el-radio label="行政区划" value="行政区划" />
         </el-radio-group>
       </el-form-item>
-      <el-form-item>
-        <el-button class="btn-secondary">绘制</el-button>
+      <el-form-item v-if="form.meshRange === '自定义'">
+        <el-button class="btn-secondary" @click="handleDraw">绘制</el-button>
+      </el-form-item>
+      <el-form-item v-if="form.meshRange === '行政区划'">
+        <el-cascader v-model="form.district" @change="handleSelectDistrict" :options="districtList"
+          :props="cascaderProps" placeholder="请选择行政区划" />
       </el-form-item>
     </el-form>
 
@@ -27,8 +31,8 @@
     <div class="slider-bg single-slider">
       <div class="slider">
         <div v-for="(point, index) in DenseData" :key="index" class="marker"
-          :class="{ 'key-point': selectedPoint === index }" :style="{ left: index * (100 / (DenseData.length - 1)) + '%' }"
-          @click="selectPoint(index)">
+          :class="{ 'key-point': selectedPoint === index }"
+          :style="{ left: index * (100 / (DenseData.length - 1)) + '%' }" @click="selectPoint(index)">
           <span class="label">{{ point.label }}</span>
           <span class="des">{{ point.des }}</span>
         </div>
@@ -48,8 +52,8 @@
           'active': (rangeStart !== null && rangeEnd === null && index === rangeStart) || (rangeStart !== null && rangeEnd !== null && index >= rangeStart && index <= rangeEnd),
           'hover': shouldHighlightOnHover(index),
           'key-point': index === rangeStart || index === rangeEnd
-        }" :style="{ left: index * (100 / (heightData.length - 1)) + '%' }" @click="selectRange(index)" @mouseover="handleMouseOver(index)"
-          @mouseleave="handleMouseLeave">
+        }" :style="{ left: index * (100 / (heightData.length - 1)) + '%' }" @click="selectRange(index)"
+          @mouseover="handleMouseOver(index)" @mouseleave="handleMouseLeave">
           <span class="label">{{ point.label }}</span>
         </div>
       </div>
@@ -58,83 +62,95 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
-// import { useMapStore } from "@/store/map.js";
-// import { GetRealPower2 } from "@/utils/map/addLayer.js";
+import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue';
+import { addKysgScale, DrawPolygon, QueryDistrict, QueryCube, clearDraw } from "@/utils/map/addLayer.js";
 import useLayoutStore from '@/store/layout';
+import { useMapStore } from '@/store/map';
+import { GetDistrictTree } from '@/service/http';
 
 export default {
   setup(props, { emit }) {
+    const mapStore = useMapStore()
     const layoutStore = useLayoutStore()
     const form = ref({
       meshType: '二维',
       grade: true,
-      meshRange: '自适应范围'
+      meshRange: '自适应'
     })
-    // const mapStore = useMapStore();
-    let chosenType = ref([]);
-    let typeData = ref([
-      {
-        id: "1",
-        label: '综合指数',
-        value: "all",
-        chosen: true,
-      },
-      {
-        id: "2",
-        label: '人口',
-        value: "demographics",
-        chosen: false,
-      },
-      {
-        id: "3",
-        label: '绿地',
-        value: "green",
-        chosen: false,
-      },
-      {
-        id: "4",
-        label: '河流',
-        value: "river",
-        chosen: false,
-      },
-      {
-        id: "5",
-        label: '道路',
-        value: "road",
-        chosen: false,
-      },
-      {
-        id: "6",
-        label: '建筑物',
-        value: "collision_buffer",
-        chosen: false,
-      },
-      {
-        id: "7",
-        label: '禁飞区',
-        value: "no_fly_zone_buffer",
-        chosen: false,
-      },
-      {
-        id: "8",
-        label: '净空区',
-        value: "clear_zone_buffer",
-        chosen: false,
+
+    let lastEvaluation
+    let rings
+
+    const selectedPoint = ref(null); // 单点选择的索引
+    const rangeStart = ref(null); // 范围选择起点
+    const rangeEnd = ref(null); // 范围选择终点
+    const hoverIndex = ref(null); // 鼠标悬浮的索引
+
+    const districtList = ref([])
+
+    function handleSelectDistrict(val) {
+      QueryDistrict(val)
+    }
+
+    const cascaderProps = {
+      expandTrigger: 'hover',
+      checkStrictly: true
+    }
+
+    watch(() => form.value.meshRange, (val) => {
+      console.log(val)
+      clearDraw()
+      clearQueryCube()
+      rings = null
+      if (val === '自适应') {
+        addKysgScale(true)
+        clearPoints()
+      } else {
+        addKysgScale(false)
+        if (val === '行政区划' && !districtList.value.length) {
+          GetDistrictTree().then(res => {
+            if (!Array.isArray(res.data)) {
+              ElMessage({ offset: 90, type: 'warning', message: '行政区划获取失败' })
+              return
+            }
+            districtList.value = res.data
+          }).catch(() => {
+            ElMessage({ offset: 90, type: 'warning', message: '行政区划获取失败' })
+          })
+        }
       }
-    ])
+    }, { immediate: true })
+
+    watch(form, (val) => {
+      showGrid()
+    }, { deep: true })
+
+    function handleDraw() {
+      clearQueryCube()
+      DrawPolygon({ hasZ: true })
+    }
+
+    watch(() => mapStore.draw_geometry, (val) => {
+      rings = val?.rings
+      showGrid()
+    }, { deep: true })
+
+    watch(() => mapStore.queryResult, (val) => {
+      rings = val[0].geometry.rings
+      showGrid()
+    }, { deep: true })
 
     const DenseData = reactive([
       // { label: '1/8″网格', level: 24, size: { x: 3.3055614085396883, y: 3.8513467134689563, z: 3.3678982462941303 }, des: '(3.9m)'},
-      { label: '1/4″网格', level: 23, size: { x: 6.7358, y: 7.7024, z: 6.6111 }, des: '(7m)'},
-      { label: '1/2″网格', level: 22, size: { x: 13.222978864358083, y: 15.406742669116284, z: 13.471596544164798 }, des: '(15m)'},
-      { label: '1′网格', level: 21, size: { x: 26.44107169853396, y: 30.815525255577086, z: 26.943221541824816 }, des: '(30.9m)'},
-      { label: '2′网格', level: 20, size: { x: 52.887881893650956, y: 61.627412608112536, z: 53.887012166300096 }, des: '(61m)'},
-      { label: '4′网格', level: 19, size: { x: 105.79869494173579, y: 123.43930203184209, z: 107.77356906534683 }, des: '(123.7m)'},
-      { label: '8′网格', level: 18, size: { x: 211.66439868324142, y: 246.49964316944533, z: 215.5489592181181 }, des: '(247.4m)'},
-      { label: '16′网格', level: 17, size: { x: 424.0518521273334, y: 492.09123171765896, z: 431.1052029077298 }, des: '(376.7m)'},
-      { label: '32′网格', level: 16, size: { x: 844.8477050379952, y: 990.1345935064928, z: 862.239544684298 }, des: '(746.4m)'},
-      { label: '1′网格', level: 15, size: { x: 1582.2726823222256, y: 1856.6079667204758, z: 1724.5956527210265 }, des: '(1850m)'},
+      { label: '1/4″网格', level: 23, size: { x: 6.7358, y: 7.7024, z: 6.6111 }, des: '(7m)' },
+      { label: '1/2″网格', level: 22, size: { x: 13.222978864358083, y: 15.406742669116284, z: 13.471596544164798 }, des: '(15m)' },
+      { label: '1′网格', level: 21, size: { x: 26.44107169853396, y: 30.815525255577086, z: 26.943221541824816 }, des: '(30.9m)' },
+      { label: '2′网格', level: 20, size: { x: 52.887881893650956, y: 61.627412608112536, z: 53.887012166300096 }, des: '(61m)' },
+      { label: '4′网格', level: 19, size: { x: 105.79869494173579, y: 123.43930203184209, z: 107.77356906534683 }, des: '(123.7m)' },
+      { label: '8′网格', level: 18, size: { x: 211.66439868324142, y: 246.49964316944533, z: 215.5489592181181 }, des: '(247.4m)' },
+      { label: '16′网格', level: 17, size: { x: 424.0518521273334, y: 492.09123171765896, z: 431.1052029077298 }, des: '(376.7m)' },
+      { label: '32′网格', level: 16, size: { x: 844.8477050379952, y: 990.1345935064928, z: 862.239544684298 }, des: '(746.4m)' },
+      { label: '1′网格', level: 15, size: { x: 1582.2726823222256, y: 1856.6079667204758, z: 1724.5956527210265 }, des: '(1850m)' },
       // { label: '2′网格', level: 14, size: { x: 2984.4, y: 2984.4, z: 2984.4 }, des: '(2984.4m)'},
     ]);
 
@@ -152,36 +168,16 @@ export default {
       { label: "1000m", value: 1000 },
     ]);
 
-    const changeType = (item) => {
-      item.chosen = !item.chosen;
-      if (item.id == "1") {
-        if (item.chosen) {
-          chosenType.value = ["demographics", "green", "river", "road", "collision_buffer", "no_fly_zone_buffer", "clear_zone_buffer"];
-        }
-      } else {
-        chosenType.value = [];
-        typeData.value.forEach((item) => {
-          if (item.id == "1") {
-            item.chosen = false;
-          }
-          if (item.chosen && item.id != "1") {
-            chosenType.value.push(item.value);
-          }
-        })
-      }
-      showGrid();
+    function clearPoints() {
+      selectedPoint.value = null
+      rangeStart.value = null
+      rangeEnd.value = null
     }
 
-    const selectedPoint = ref(null); // 单点选择的索引
-    const rangeStart = ref(0); // 范围选择起点
-    const rangeEnd = ref(4); // 范围选择终点
-    const hoverIndex = ref(null); // 鼠标悬浮的索引
-    let lastChosenIndex = ref(null); // 上一次网格鼠标选中的索引
     // 单点选择逻辑
     const selectPoint = (index) => {
       selectedPoint.value = index;
-      emit('densePicked', DenseData[index].label);
-      showGrid(index);
+      showGrid()
     };
 
     // 范围选择逻辑
@@ -198,7 +194,7 @@ export default {
           [rangeStart.value, rangeEnd.value] = [rangeEnd.value, rangeStart.value];
         }
       }
-      handleRangePicked();
+      showGrid()
     };
 
     const handleMouseOver = (index) => {
@@ -222,58 +218,67 @@ export default {
       }
       return false; // 不满足条件时，不高亮
     };
-    // 显示网格
-    const showGrid = (index) => {
-      // GetRealPower2({
-      //   id: "power"+DenseData[selectedPoint.value].level,
-      //   lastId:"power"+lastChosenIndex,
-      //   status: "show",
-      //   fields:chosenType.value,
-      //   center: mapStore.center,
-      //   radius: (mapStore.extent.xmax - mapStore.extent.xmin) > (mapStore.extent.ymax - mapStore.extent.ymin) ? (mapStore.extent.xmax - mapStore.extent.xmin) : (mapStore.extent.ymax - mapStore.extent.ymin),
-      //   minZ: heightData[rangeStart.value].value,
-      //   maxZ: heightData[rangeEnd.value].value,
-      //   level: DenseData[selectedPoint.value].level,
-      //   size: DenseData[selectedPoint.value].size,
-      // });
-      lastChosenIndex = DenseData[selectedPoint.value].level;
-    };
 
-    // 范围选择处理
-    const handleRangePicked = () => {
-      if (rangeStart.value !== null && rangeEnd.value !== null) {
-        const heightRange = [heightData[rangeStart.value].value, heightData[rangeEnd.value].value];
+    let timer_showGrid
+
+    // 显示网格
+    const showGrid = () => {
+      if (timer_showGrid) {
+        clearTimeout(timer_showGrid)
       }
+      timer_showGrid = setTimeout(() => {
+        console.log('showGrid')
+        console.log('rings:',rings)
+        console.log('points',selectedPoint.value, rangeStart.value, rangeEnd.value)
+        if (!rings) return
+        if (selectedPoint.value===null || rangeStart.value===null || rangeEnd.value===null) return
+        clearQueryCube()
+        setTimeout(() => {
+          QueryCube({
+            id: 'query_cube_kysg',
+            evaluation: form.value.grade,
+            show: true,
+            level: DenseData[selectedPoint.value].level,
+            minZ: heightData[rangeStart.value].value,
+            maxZ: heightData[rangeEnd.value].value,
+            rings: rings
+          })
+        }, 300);
+        lastEvaluation = form.value.grade
+      }, 1000)
     };
 
-    onMounted(() => {
-      // 组件挂载后处理的逻辑
-      chosenType.value = ["demographics", "green", "river", "road", "collision_buffer", "no_fly_zone_buffer", "clear_zone_buffer"];
-    });
+    function clearQueryCube() {
+      QueryCube({
+        id: 'query_cube_kysg',
+        evaluation: lastEvaluation,
+        show: false,
+      })
+    }
+
     onBeforeUnmount(() => {
-      // GetRealPower2({
-      //   id: "power"+ lastChosenIndex,
-      //   status: "hide"
-      // })
+      addKysgScale(false)
+      clearDraw()
+      clearQueryCube()
     })
 
-
     return {
       layoutStore,
       form,
-      typeData,
       DenseData,
       heightData,
       selectedPoint,
       rangeStart,
       rangeEnd,
-      changeType,
       selectPoint,
       selectRange,
-      showGrid,
       handleMouseOver,
       handleMouseLeave,
-      shouldHighlightOnHover
+      shouldHighlightOnHover,
+      handleDraw,
+      handleSelectDistrict,
+      cascaderProps,
+      districtList
     };
   },
 };
@@ -294,11 +299,11 @@ export default {
 .top-form {
   display: flex;
   flex-wrap: nowrap;
-  justify-content: space-between;
   align-items: center;
   margin: 15px 12px 0;
+
   .el-form-item {
-    margin-right: 0;
+    margin-right: 10px;
   }
 }
 

src/views/home/cpns/PanelKyhs.vue

@@ -82,7 +82,7 @@
             <el-button class="btn-secondary" @click="handleDraw">绘制</el-button>
           </el-form-item>
           <el-form-item label="网格查询">
-            <el-button :disabled="!hasDraw" class="btn-secondary">查询网格</el-button>
+            <el-button :disabled="!hasDraw" class="btn-secondary" @click="handleInspect(true)">查询网格</el-button>
           </el-form-item>
         </el-form>
       </Transition>
@@ -134,7 +134,7 @@
 
 <script setup>
 import { onBeforeUnmount, reactive, ref, watch } from 'vue';
-import { drawArea, clearDraw } from '@/utils/map/addLayer'
+import { drawArea, clearDraw, InspectCube } from '@/utils/map/addLayer'
 import { airSpaceTypes } from '@/utils/options';
 import { hexToRgb } from '@/utils/tools';
 import { useMapStore } from '@/store/map';
@@ -162,11 +162,11 @@ const rules = {
 }
 
 const drawTypes = [
-  { label: '矩形', value: 'rectangle', geoType: '2' },
-  { label: '圆柱', value: 'circle', geoType: '1' },
-  { label: '多面体', value: 'polygon', geoType: '3' },
-  { label: '圆台', value: 'mesh', geoType: '6' },
-  { label: '圆锥', value: 'point', geoType: '4' },
+  { label: '矩形', value: 'rectangle', geoType: '2', shapeType: 'polygon' },
+  { label: '圆柱', value: 'circle', geoType: '1', shapeType: 'polygon' },
+  { label: '多面体', value: 'polygon', geoType: '3', shapeType: 'polygon' },
+  { label: '圆台', value: 'mesh', geoType: '6', shapeType: 'frustum-cone' },
+  { label: '圆锥', value: 'point', geoType: '4', shapeType: 'inverted-cone' },
 ]
 
 const results = ref([
@@ -216,6 +216,7 @@ function handleDraw() {
     if (!isValid) return
     if (hasDraw.value) {
       clearDraw()
+      handleInspect(false)
       await new Promise((res) => {
         setTimeout(() => res(), 500);
       })
@@ -229,6 +230,48 @@ function handleDraw() {
   })
 }
 
+function getShapeInfo() {
+  let res = {}
+  const {height, topRadius, bottomRadius} = form.value
+  const geoType = drawTypes.find(i => i.value === form.value.drawType).geoType
+  const { x, y, z } = drawGeometry
+  switch (geoType) {
+    case '1':
+    case '2':
+    case '3':
+      res = {
+        height,
+        rings: drawGeometry.rings
+      }
+      break;
+    case '4':
+      res = {
+        point: { x, y, z },
+        height,
+        radius: topRadius
+      }
+      break;
+    case '6':
+      res = {
+        point: { x, y, z },
+        height,
+        topRadius,
+        bottomRadius
+      }
+      break;
+  }
+  return res
+}
+
+function handleInspect(show=true) {
+  InspectCube({
+    type: drawTypes.find(i => i.value=== form.value.drawType).shapeType,
+    id: 'inspect_kyhs',
+    show,
+    shape: show? getShapeInfo() : {}
+  })
+}
+
 let drawGeometry
 
 watch(() => mapStore.draw_geometry, (val) => {
@@ -263,33 +306,7 @@ function handleSave() {
     geoType: drawTypes.find(i => i.value === form.value.drawType).geoType,
     upRadius: form.value.topRadius,
     downRadius: form.value.bottomRadius,
-    shape: ''
-  }
-  const { x, y, z } = drawGeometry
-  switch (params.geoType) {
-    case '1':
-    case '2':
-    case '3':
-      params.shape = JSON.stringify({
-        height: params.height,
-        rings: drawGeometry.rings
-      })
-      break;
-    case '4':
-      params.shape = JSON.stringify({
-        point: { x, y, z },
-        height: params.height,
-        radius: params.upRadius
-      })
-      break;
-    case '6':
-      params.shape = JSON.stringify({
-        point: { x, y, z },
-        height: params.height,
-        topRadius: params.upRadius,
-        bottomRadius: params.downRadius
-      })
-      break;
+    shape: JSON.stringify(getShapeInfo())
   }
   AddArea(params).then(({data: res}) => {
     if(res.msg==='success') {
@@ -306,6 +323,7 @@ function handleSave() {
 
 onBeforeUnmount(() => {
   clearDraw()
+  handleInspect(false)
 })
 
 </script>

src/views/home/cpns/PanelQjchs.vue

@@ -98,7 +98,7 @@
             <el-button class="btn-secondary" @click="handleDraw">绘制</el-button>
           </el-form-item>
           <el-form-item label="网格查询">
-            <el-button :disabled="!hasDraw" class="btn-secondary">查询网格</el-button>
+            <el-button :disabled="!hasDraw" class="btn-secondary" @click="handleInspect(true)">查询网格</el-button>
           </el-form-item>
         </el-form>
       </Transition>
@@ -148,7 +148,7 @@
 
 <script setup>
 import { onBeforeUnmount, ref, watch, reactive } from 'vue';
-import { drawArea, clearDraw } from '@/utils/map/addLayer'
+import { drawArea, clearDraw, InspectCube } from '@/utils/map/addLayer'
 import { useMapStore } from '@/store/map';
 import { uavList } from '@/utils/options';
 import { AddPlot } from '@/service/http';
@@ -170,9 +170,9 @@ const form = ref({
 })
 
 const drawTypes = [
-  { label: '圆台', value: 'mesh', geoType: '6' },
-  { label: '圆锥', value: 'point', geoType: '4' },
-  { label: '漏斗', value: 'funnel', geoType: '5' },
+  { label: '圆台', value: 'mesh', geoType: '6', shapeType: 'frustum-cone' },
+  { label: '圆锥', value: 'point', geoType: '4', shapeType: 'inverted-cone' },
+  { label: '漏斗', value: 'funnel', geoType: '5', shapeType: 'funnel' },
 ]
 
 const rules = {
@@ -229,10 +229,11 @@ const results = ref([
 const hasDraw = ref(false)
 
 async function handleDraw() {
-  formRef.value.validateField(['height', 'topRadius', 'bottomRadius','topHeight','bottomHeight'], async (isValid) => {
+  formRef.value.validateField(['height', 'topRadius', 'bottomRadius', 'topHeight', 'bottomHeight'], async (isValid) => {
     if (!isValid) return
     if (hasDraw.value) {
       clearDraw()
+      handleInspect(false)
       await new Promise((res) => {
         setTimeout(() => res(), 500);
       })
@@ -245,6 +246,49 @@ async function handleDraw() {
   })
 }
 
+function getShapeInfo() {
+  let res = {}
+  const { height, topRadius, bottomRadius, topHeight, bottomHeight } = form.value
+  const geoType = drawTypes.find(i => i.value === form.value.drawType).geoType
+  const { x, y, z } = drawGeometry
+  switch (geoType) {
+    case '4':
+      res = {
+        point: { x, y, z },
+        height,
+        radius: topRadius
+      }
+      break;
+    case '5':
+      res = {
+        point: { x, y, z },
+        coneHeight: topHeight,
+        cylinderHeight: bottomHeight,
+        topRadius,
+        bottomRadius
+      }
+      break;
+    case '6':
+      res = {
+        point: { x, y, z },
+        height,
+        topRadius,
+        bottomRadius
+      }
+      break;
+  }
+  return res
+}
+
+function handleInspect(show = true) {
+  InspectCube({
+    type: drawTypes.find(i => i.value === form.value.drawType).shapeType,
+    id: 'inspect_qjchs',
+    show,
+    shape: show ? getShapeInfo() : {}
+  })
+}
+
 let drawGeometry
 
 watch(() => mapStore.draw_geometry, (val) => {
@@ -279,37 +323,10 @@ function handleSave() {
     downRadius: form.value.bottomRadius,
     nature: form.value.type,
     drawType: '01',
-    shape: ''
-  }
-  const { x, y, z } = drawGeometry
-  switch (params.geoType) {
-    case '4':
-      params.shape = JSON.stringify({
-        point: { x, y, z },
-        height: params.height,
-        radius: params.upRadius
-      })
-      break;
-    case '5':
-      params.shape = JSON.stringify({
-        point: { x, y, z },
-        coneHeight: form.value.topHeight,
-        cylinderHeight: form.value.bottomHeight,
-        topRadius: params.upRadius,
-        bottomRadius: params.downRadius
-      })
-      break;
-    case '6':
-      params.shape = JSON.stringify({
-        point: { x, y, z },
-        height: params.height,
-        topRadius: params.upRadius,
-        bottomRadius: params.downRadius
-      })
-      break;
+    shape: JSON.stringify(getShapeInfo())
   }
-  AddPlot(params).then(({data: res}) => {
-    if(res.msg==='success') {
+  AddPlot(params).then(({ data: res }) => {
+    if (res.msg === 'success') {
       ElMessage({ offset: 90, type: 'success', message: '保存成功' })
     } else {
       ElMessage({ offset: 90, type: 'error', message: `保存失败，${res.msg}` })
@@ -323,6 +340,7 @@ function handleSave() {
 
 onBeforeUnmount(() => {
   clearDraw()
+  handleInspect(false)
 })
 
 </script>

src/views/home/cpns/PanelSgzy.vue

@@ -96,7 +96,7 @@ function handleCalc() {
       level: Number(form.value.level),
       rings: drawResult
     })
-  }, 0);
+  }, 300);
 }
 
 onBeforeUnmount(() => {