代码提交

src/views/residentAnalysis/index.vue

@@ -74,19 +74,28 @@
       </div>
       <div class="center" id="cesiumContainer"></div>
 
-      <div class="right flex column j-s">
+      <div
+        class="right flex column"
+        v-loading="showLoading"
+        element-loading-text="数据加载中"
+      >
         <!-- 路点 -->
+        <div class="table-title" v-if="roadPointList.length > 0">
+          道路附属点
+        </div>
         <vxe-table
           class="item"
           :data="roadPointList"
           v-if="roadPointList.length > 0"
         >
           <vxe-column type="seq" width="70"></vxe-column>
-          <vxe-column field="name" title="Name"></vxe-column>
+          <vxe-column field="编码" title="编码"></vxe-column>
-          <vxe-column field="sex" title="Sex"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
-          <vxe-column field="age" title="Age"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
+
         <!-- 路线 -->
+        <div class="table-title" v-if="roadLineList.length > 0">道路附属线</div>
         <vxe-table
           class="item"
           :data="roadLineList"
@@ -94,30 +103,38 @@
         >
           <vxe-column type="seq" width="70"></vxe-column>
           <vxe-column field="编码" title="编码"></vxe-column>
-          <vxe-column field="A" title="名称"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
-          <vxe-column field="图形特" title="图形特"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
+
         <!-- 水点 -->
+        <div class="table-title" v-if="waterPointList.length > 0">
+          水系附属点
+        </div>
         <vxe-table
           class="item"
           :data="waterPointList"
           v-if="waterPointList.length > 0"
         >
           <vxe-column type="seq" width="70"></vxe-column>
-          <vxe-column field="name" title="Name"></vxe-column>
+          <vxe-column field="编码" title="编码"></vxe-column>
-          <vxe-column field="sex" title="Sex"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
-          <vxe-column field="age" title="Age"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
+
         <!-- 水线 -->
+        <div class="table-title" v-if="waterLineList.length > 0">
+          水系附属线
+        </div>
         <vxe-table
           class="item"
           :data="waterLineList"
           v-if="waterLineList.length > 0"
         >
           <vxe-column type="seq" width="70"></vxe-column>
-          <vxe-column field="name" title="Name"></vxe-column>
+          <vxe-column field="编码" title="编码"></vxe-column>
-          <vxe-column field="sex" title="Sex"></vxe-column>
+          <vxe-column field="名称" title="名称"></vxe-column>
-          <vxe-column field="age" title="Age"></vxe-column>
+          <vxe-column field="A" title="A"></vxe-column>
         </vxe-table>
       </div>
     </div>
@@ -133,6 +150,7 @@ export default {
   name: '',
   data() {
     return {
+      showLoading: false,
       imagesList: [{id: 1, src: require('@/assets/image/crop.png')}],
       roadPointList: [],
       roadLineList: [],
@@ -682,6 +700,8 @@ export default {
       // 清除之前的矩形
       this.clearRectangles()
 
+      console.log('this.rectangles===>', this.rectangles)
+
       // 获取分割参数
       const xSplit = parseInt(this.form.xLength) || 3
       const ySplit = parseInt(this.form.yLength) || 3
@@ -813,6 +833,7 @@ export default {
         console.error('坡度分析失败', e)
         this.$message.error('坡度分析失败，请检查地形数据')
       } finally {
+        rectInfoMap.clear()
         this.drawLabelAndRec()
       }
     },
@@ -1014,7 +1035,11 @@ export default {
 
     // 选择矩形
     selectRectangle(rect) {
-      console.log('rect===>', rect)
+      this.showLoading = true
+      setTimeout(() => {
+        this.showLoading = false
+      }, 500)
+
       if (this.selectedRect?.id === rect.id) return
       this.selectedRect = {
         id: rect.id,
@@ -1092,17 +1117,17 @@ export default {
     // 清除所有矩形
     clearRectangles() {
       if (this.rectangles.length > 0) {
-        this.rectangles.forEach((rect) => {
+        this.rectangles.forEach((item) => item.remove())
-          window.graphicLayer.removeGraphic(rect)
+        window.graphicLayer.removeGraphic(this.rectangles)
-        })
+        this.rectangles = []
+        this.rectCount = 0
+        this.validBlocks = []
       }
       if (this.labels.length > 0) {
-        this.labels.forEach((label) => {
+        this.labels.forEach((item) => item.remove())
-          window.graphicLayer.removeGraphic(label)
+        window.graphicLayer.removeGraphic(this.labels)
-        })
-      }
-      this.rectangles = []
         this.labels = []
+      }
     },
   },
 }
@@ -1192,11 +1217,20 @@ export default {
     height: 100%;
     background-color: #d4e5db;
     padding-left: 20px;
+    padding-right: 10px;
     overflow: auto;
 
     .item {
       margin-bottom: 10px;
     }
+
+    .table-title {
+      font-size: 16px;
+      font-family: 'Pingfang';
+      font-weight: bold;
+      letter-spacing: 0.1em;
+      margin-bottom: 10px;
+    }
   }
 }
 </style>