From 427c04cc5d513795a3b58ee45bfb29ebd71b230d Mon Sep 17 00:00:00 2001
From: LHD_HY <2872546851@qq.com>
Date: Wed, 31 Dec 2025 16:07:48 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=B1=95=E7=A4=BA=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/basic/model-manage/index.vue | 256 +++----------------------
 1 file changed, 25 insertions(+), 231 deletions(-)

diff --git a/src/views/basic/model-manage/index.vue b/src/views/basic/model-manage/index.vue
index 89a180d..7f612b7 100644
--- a/src/views/basic/model-manage/index.vue
+++ b/src/views/basic/model-manage/index.vue
@@ -2,13 +2,6 @@
   <div class="app-container">
     <el-form size="small" :inline="true" ref="queryForm" :model="queryParams">
       <el-form-item label="项目名称" prop="projectId">
-        <!-- <el-input
-    clearable
-    placeholder="请输入项目名称"
-    v-model="queryParams.proName"
-    @keyup.enter.native="handleQuery"
-/> -->
-
         <el-select
           placeholder="请选择项目名称"
           style="width: 240px"
@@ -18,22 +11,6 @@
           <el-option :key="item.id" :value="item.id" :label="item.name" v-for="item in projectSelectList" />
         </el-select>
       </el-form-item>
-      <!--            <el-form-item label="所属单位" prop="unit">
-                <el-input
-                    clearable
-                    placeholder="请输入所属单位"
-                    v-model="queryParams.unit"
-                    @keyup.enter.native="handleQuery"
-                />
-            </el-form-item>-->
-      <!--      <el-form-item label="负责人" prop="chargePerson">-->
-      <!--        <el-input-->
-      <!--          clearable-->
-      <!--          placeholder="请输入负责人"-->
-      <!--          v-model="queryParams.chargePerson"-->
-      <!--          @keyup.enter.native="handleQuery"-->
-      <!--        />-->
-      <!--      </el-form-item>-->
 
       <el-form-item label="设计人" prop="designer">
         <el-input
@@ -59,7 +36,6 @@
           模型预览
         </el-button>
       </el-col>
-      <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getModelList"></right-toolbar> -->
     </el-row>
 
     <el-table border row-key="id" v-loading="loading" :data="modelList" default-expand-all>
@@ -97,16 +73,6 @@
             {{ row.modelUrl ? '查看模型' : '上传模型' }}
           </el-button>
 
-          <!-- <el-button
-size="mini"
-type="text"
-icon="el-icon-edit"
-@click="handleEdit(row)"
-v-if="row.level != 1"
->
-修改
-</el-button> -->
-
           <el-button
             size="mini"
             type="text"
@@ -121,14 +87,6 @@ v-if="row.level != 1"
       </el-table-column>
     </el-table>
 
-    <!--  <pagination
-v-show="total > 0"
-:total="total"
-:page.sync="queryParams.pageNum"
-:limit.sync="queryParams.pageSize"
-@pagination="getModelList"
-/> -->
-
     <el-dialog :title="title" :visible.sync="open" width="550px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="项目名称" prop="proName">
@@ -169,7 +127,6 @@ v-show="total > 0"
         @refreshParentList="getModelList"
       />
     </el-dialog>
-    <!-- 添加或修改岗位对话框 -->
     <el-dialog
       width="40%"
       append-to-body
@@ -208,16 +165,13 @@ v-show="total > 0"
         <div id="map-container-batch" class="model-map-container"></div>
       </div>
       <!-- 单独查看模型时，只显示地图容器，不显示树形 -->
-      <div id="map-container-single" v-else style="min-height: 76vh;"></div>
-
-      <!-- <dxf-viewer :entities="dxfPreviewUrl"></dxf-viewer> -->
+      <div id="map-container-single" v-else class="single-map-container"></div>
     </el-dialog>
   </div>
 </template>
 
 <script>
 import AddOrEditForm from './addOrEditForm.vue'
-// import UseOrReturnForm from './useOrReturnForm.vue'
 import UseOrReturnForm from './useOrReturnFormNew.vue'
 import UseRecordTable from './useRecordTable.vue'
 import DxfViewer from './DxfViewer.vue'
@@ -294,11 +248,6 @@ export default {
           level: 1,
           count: 2,
           children: [
-            // {
-            //     label: '节点1',
-            //     id: 1,
-            //     level: 2,
-            // },
           ],
         },
         {
@@ -356,28 +305,12 @@ export default {
     },
     // 查看模型按钮（单独查看，不显示树形）
     handleViewModel(row) {
-      /*  const modelUrl = row.modelUrl
-if (!modelUrl || !modelUrl.endsWith('.dxf')) {
-this.$modal.msgWarning('模型地址无效或不是DXF文件')
-return
-} */
-      /* 新需求 重新做 上面建议不要删除  有需要直接可以查看 */
-      // openView({ id: row.id })
-      //     .then((response) => {
-      //         this.dxfPreviewUrl = response.data
-      //         this.viewDialogVisible = true
-      //     })
-      //     .catch((error) => {
-      //         // console.error('获取项目详情失败:', error)
-      //     })
-
       // 标记为非批量预览（不显示树形）
       this.isBatchPreview = false
       openView({ id: row.id })
         .then((res) => {
           this.modelPreviewInfoList = res.data
           this.modelPreviewVisible = true
-
           console.log('res', res.data)
           this.initMap()
         })
@@ -420,7 +353,6 @@ return
     },
 
     // 获取模型列表
-    // 生成 UUID，备用当 nodeId 缺失时
     generateUUID() {
       return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
         const r = (Math.random() * 16) | 0
@@ -429,8 +361,6 @@ return
       })
     },
 
-    // 获取模型列表
-    // 获取模型列表 - 最终优化版
     // 获取模型列表 - 最终优化版
     async getModelList() {
       this.loading = true
@@ -439,70 +369,12 @@ return
       console.log(res, '模型列表')
       this.loading = false
       this.modelList = this.onBuildTree(res)
-      // getModelListApi(this.queryParams)
-      //     .then((response) => {
-      //         const rawList = response.rows || []
-
-      //         // 增强型递归处理
-      //         const formatNodes = (nodes, level = 2) => {
-      //             // 从第二级开始
-      //             if (!Array.isArray(nodes)) return []
-
-      //             return nodes
-      //                 .filter((item) => item && item.nodeId) // 过滤无效节点
-      //                 .map((item) => ({
-      //                     ...item,
-      //                     id: item.nodeId,
-      //                     name: item.nodeName || '未命名节点',
-      //                     level: level, // 添加层级标记
-      //                     // 递归处理子节点，层级+1
-      //                     nodes: formatNodes(item.nodes || item.children || [], level + 1),
-      //                 }))
-      //         }
-
-      //         // 处理项目层数据
-      //         const formatted = rawList.map((project) => {
-      //             const children = project.children || []
-
-      //             // 获取层级名称（项目级才需要）
-      //             let levelName = ''
-      //             let nodeCount = ''
-      //             if (this.levelList && this.levelList.length > 0) {
-      //                 const levelConfig = this.levelList.find(
-      //                     (item) => item.configId == project.level, // 注意类型匹配
-      //                 )
-      //                 levelName = levelConfig ? levelConfig.configName : ''
-      //             }
-
-      //             return {
-      //                 ...project,
-      //                 id: project.projectId,
-      //                 name: project.proName || '未命名项目',
-      //                 level: 1, // 项目级标记为1
-      //                 levelName: project.levelName, // 添加层级名称
-      //                 nodes: formatNodes(children),
-      //                 rawData: project,
-      //                 nodeCount: project.nodeCount,
-      //             }
-      //         })
-
-      //         this.modelList = formatted
-      //         this.total = response.total
-      //         this.loading = false
-      //     })
-      //     .catch((error) => {
-      //         console.error('获取模型列表失败:', error)
-      //         this.loading = false
-      //         this.$message.error('模型数据加载失败，请重试')
-      //     })
     },
     // 上传按钮
     handleUploadModel(row) {
       this.$nextTick(() => {
         this.currentProjectId = row.id || null
         this.useOrReturnFormVisible = true
-        // 找到子组件并调用它的 resetForm 方法 (如果存在)
-        // 确保 useOrReturnFormComponentRef 存在且 resetForm 是一个函数
         if (
           this.$refs.useOrReturnFormComponentRef &&
           typeof this.$refs.useOrReturnFormComponentRef.resetForm === 'function'
@@ -527,7 +399,6 @@ return
 
       const editForm = { deviceName: proName, id, level, nodeCount }
       this.$nextTick(() => {
-        // 确保 addOrEditComponentRef 存在
         if (this.$refs.addOrEditComponentRef) {
           this.$refs.addOrEditComponentRef.setFormData(editForm)
         }
@@ -543,9 +414,6 @@ return
           this.form = response.data
           this.open = true
           this.title = '修改项目'
-          // 注意：这里 form.level 的赋值可能需要根据您的实际数据结构调整
-          // 比如，如果 response.data.level 是 configId，则可以直接赋值
-          // this.form.level = response.data.level;
         })
         .catch((error) => {
           console.error('获取项目详情失败:', error)
@@ -557,15 +425,6 @@ return
       this.$modal
         .confirm('是否确认删除当前节点数据吗？')
         .then(async () => {
-          // 根据 row.level 判断是删除项目还是删除模型节点
-          // let res
-          // if (row.level === 1) {
-          //     // 假设 level 1 是项目
-          //     res = await delProject(row.id) // 使用 delProject API 删除项目
-          // } else {
-          //     res = await delModelApi({ id: row.id }) // 使用 delModelApi 删除模型节点
-          // }
-
           const res = await delModelApi({ id })
           if (res.code === 200) {
             this.$modal.msgSuccess('删除成功')
@@ -592,11 +451,6 @@ return
 
     // 关闭领用或归还对话框 (UseOrReturnForm)
     closeUseOrReturnFormDialog() {
-      // 这个方法现在由 @closeUseOrReturnFormDialog="useOrReturnFormVisible = false" 直接处理，
-      // 如果还需要 resetForm，可以取消注释下面两行并确保子组件有此方法
-      // if (this.$refs.useOrReturnFormComponentRef) {
-      //   this.$refs.useOrReturnFormComponentRef.resetForm();
-      // }
       this.useOrReturnFormVisible = false
     },
 
@@ -738,7 +592,6 @@ return
     getAllChildNodeIds(node) {
       let nodeIds = []
       // 先添加当前节点ID（如果需要包含当前节点自身模型）
-      // 若只需子节点，可注释此行
       nodeIds.push(node.id)
       // 递归遍历子节点
       if (node.children && node.children.length > 0) {
@@ -751,11 +604,6 @@ return
 
     // 节点勾选状态变化事件（修改：支持父节点勾选，加载所有子节点）
     handleNodeCheckChange(node, checked) {
-      // 移除原有的末级节点校验，允许所有节点触发
-      // if (!node || !node.isLeaf || Number(node.nodelevel) !== Number(node.nodeCount)) {
-      //   return
-      // }
-
       // 1. 递归获取当前节点下所有子节点ID
       const allChildIds = this.getAllChildNodeIds(node);
 
@@ -844,30 +692,20 @@ return
       this.modelPreviewVisible = true
 
       this.initMap()
-
-      // 加载所有模型数据
-      // openViewAll({ projectId: selectedProjectId })
-      //   .then((res) => {
-      //     this.modelPreviewInfoList = res.data
-      //     this.modelPreviewVisible = true
-      //     this.initMap()
-      //   })
-      //   .catch((err) => {
-      //     console.error('获取模型详情失败:', err)
-      //   })
-      // this.modelPreviewVisible = true
-      //
-      // // 百度地图初始化
-      // this.initMap()
     },
 
     // 预览弹框关闭
     onCloseMapView() {
-      // 销毁地图实例
+      // 销毁地图实例并清除DOM残留
       if (this.map) {
         this.map.clearOverlays()
         this.map = null
       }
+      // 清空两个地图容器的内容，消除样式残留
+      const batchMapContainer = document.getElementById('map-container-batch')
+      const singleMapContainer = document.getElementById('map-container-single')
+      if (batchMapContainer) batchMapContainer.innerHTML = ''
+      if (singleMapContainer) singleMapContainer.innerHTML = ''
       // 清空勾选状态
       this.checkedNodeIds = []
       if (this.$refs.projectTree) {
@@ -893,6 +731,10 @@ return
 
         // 根据是否批量预览，选择不同的地图容器
         const mapContainerId = this.isBatchPreview ? 'map-container-batch' : 'map-container-single'
+        // 先清空目标容器，避免残留
+        const targetContainer = document.getElementById(mapContainerId)
+        if (targetContainer) targetContainer.innerHTML = ''
+        // 重新创建地图实例
         this.map = new BMapGL.Map(mapContainerId) // 创建地图实例
         this.map.setMapType(BMAP_EARTH_MAP) // 地球模式
         this.map.setDisplayOptions({
@@ -955,18 +797,6 @@ return
                     },
                   )
                   this.map.addOverlay(line)
-                  // const arcPoints = this.generateArcPoints(
-                  //     item.center,
-                  //     item.radius,
-                  //     item.start_point,
-                  //     item.end_point,
-                  // )
-                  // const arcPolyline = new BMapGL.Polyline(arcPoints, {
-                  //     strokeColor: 'red',
-                  //     strokeWeight: 2,
-                  //     strokeOpacity: 0.8,
-                  // })
-                  // this.map.addOverlay(arcPolyline)
                 } else {
                   // 如果没有起点和终点，则绘制完整圆（备用方案）
                   const circle = new BMapGL.Circle(
@@ -982,48 +812,12 @@ return
                 }
               }
             })
-
-            // if (pointList.points && pointList.points.length > 0) {
-            //     // 提取坐标点和角度信息
-            //     const pointsWithAngles = pointList.points.map((point) => {
-            //         const [lng, lat, , , angle] = point // 提取经度、纬度和角度
-            //         return {
-            //             point: new BMapGL.Point(lng, lat),
-            //             angle: angle || 40, // 角度信息
-            //         }
-            //     })
-
-            //     console.log(pointsWithAngles, 'pointsWithAngles')
-
-            //     // 根据颜色设置线条样式
-            //     const getColorByIndex = (colorIndex) => {
-            //         const colors = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'white', 'gray']
-            //         return colors[colorIndex] || 'red'
-            //     }
-
-            //     // 生成一个0-7的随机整数作为颜色索引
-            //     const colorIndex = Math.floor(Math.random() * 7)
-
-            //     // 创建带弧度的多段线
-            //     const curvedLinePoints = this.createCurvedLine(pointsWithAngles)
-
-            //     // 创建多段线（带弧度）
-            //     const polyline = new BMapGL.Polyline(curvedLinePoints, {
-            //         strokeColor: getColorByIndex(colorIndex),
-            //         strokeWeight: 2,
-            //         strokeOpacity: 0.8,
-            //         strokeStyle: 'solid',
-            //     })
-
-            //     this.map.addOverlay(polyline)
-            // }
           } else if (item.entityType === 'LINE') {
             const geometry = JSON.parse(item.geometry)
             const start = geometry.start
             const end = geometry.end
 
             // 转换坐标
-
             const polyline = new BMapGL.Polyline(
               [new BMapGL.Point(start[0], start[1]), new BMapGL.Point(end[0], end[1])],
               { strokeColor: 'red', strokeWeight: 2, strokeOpacity: 0.8 },
@@ -1035,7 +829,6 @@ return
             const radius = geometry.radius
 
             // 转换中心点坐标
-
             if (center.length > 0) {
               const circle = new BMapGL.Circle(new BMapGL.Point(center[0], center[1]), radius, {
                 strokeColor: 'blue',
@@ -1135,13 +928,6 @@ return
         // 计算当前视图的最佳缩放级别
         const viewport = this.map.getViewport(points)
 
-        // 调整缩放级别：在最佳级别基础上增加n级（值越大视角越近）
-        const zoomOffset = 2 // 视角拉近的幅度（建议1-3）
-        // const adjustedZoom = Math.min(
-        //     viewport.zoom + zoomOffset,
-        //     this.map.getMaxZoom(), // 不超过地图最大缩放级别
-        // )
-
         const adjustedZoom = Math.min(
           16, // 直接设置一个较大的固定值（如18）
           this.map.getMaxZoom(),
@@ -1248,19 +1034,15 @@ return
       }
 
       // 确定绘制方向：默认按较小角度差的方向绘制
-      // 如果角度差大于 π（180度），则反向绘制
       if (Math.abs(angleDiff) > Math.PI) {
         angleDiff = angleDiff > 0 ? angleDiff - 2 * Math.PI : angleDiff + 2 * Math.PI
       }
 
       // 计算实际半径（度单位）
-      // 如果半径单位是米，需要转换为度
-      // 1度纬度约等于111公里，1度经度在当前位置约等于111*cos(lat)公里
       const latRad = (centerPoint.lat * Math.PI) / 180
       const metersPerDegreeLat = 111000 // 每度纬度约111公里
 
       // 判断半径单位：如果半径值很大（>1），可能是米；如果很小（<0.1），可能是度
-      // 这里假设如果半径大于1，则是米单位，需要转换
       let radiusInDegrees = radius
       if (radius > 1) {
         // 假设是米单位，转换为度
@@ -1281,7 +1063,6 @@ return
         const angle = startAngle + angleDiff * t
 
         // 计算圆弧上的点坐标
-        // 考虑经纬度的差异，使用正确的转换
         const deltaLng = (radiusInDegrees * Math.cos(angle)) / Math.cos(latRad)
         const deltaLat = radiusInDegrees * Math.sin(angle)
         const x = centerPoint.lng + deltaLng
@@ -1323,8 +1104,11 @@ return
   background-color: #f0f7ff;
 }
 
-#map-container-single {
+/* 单独地图容器样式 */
+.single-map-container {
   min-height: 76vh;
+  position: relative;
+  z-index: 1;
 }
 
 /* 模型预览弹窗样式（仅批量预览时生效） */
@@ -1332,6 +1116,8 @@ return
   display: flex;
   height: 76vh;
   gap: 10px;
+  position: relative; /* 建立层级上下文 */
+  z-index: 1;
 }
 
 .model-tree-container {
@@ -1341,17 +1127,25 @@ return
   border-radius: 4px;
   overflow-y: auto;
   padding: 10px;
+  background-color: #ffffff; /* 强制设置白色背景 */
+  position: relative; /* 建立层级上下文 */
+  z-index: 10; /* 高于地图容器，防止被覆盖 */
+  flex-shrink: 0; /* 防止树形容器被挤压变形 */
 }
 
 .model-map-container {
   flex: 1;
   height: 100%;
   border-radius: 4px;
+  position: relative; /* 建立层级上下文 */
+  z-index: 1; /* 低于树形容器 */
 }
 
 /* 树形组件样式优化 */
 ::v-deep .model-tree {
   --el-tree-node-content-hover-bg-color: #f5f7fa;
+  position: relative;
+  z-index: 11; /* 确保树形内容高于容器 */
 }
 
 ::v-deep .model-tree .el-tree-node__checkbox {