模型预览新增树状图的筛选功能

src/views/basic/model-manage/index.vue

@@ -179,6 +179,8 @@
     >
       <AddOrEditForm ref="addOrEditComponentRef" @closeAddOrEditFormDialog="closeAddOrEditFormDialog" />
     </el-dialog>
+
+    <!-- 模型预览弹窗：区分模型预览（显示树形）和单独查看模型（不显示树形） -->
     <el-dialog
       title="模型预览"
       width="90%"
@@ -186,9 +188,29 @@
       @close="onCloseMapView"
       :visible.sync="modelPreviewVisible"
     >
-            <!-- <dxf-viewer :entities="dxfPreviewUrl"></dxf-viewer> -->
+      <!-- 仅当是模型预览（isBatchPreview为true）时显示左侧树形复选框 -->
+      <div class="model-preview-wrapper" v-if="isBatchPreview">
+        <!-- 左侧树形菜单（带复选框） -->
+        <div class="model-tree-container">
+          <el-tree
+            ref="projectTree"
+            :data="projectTreeData"
+            :props="treeProps"
+            :show-checkbox="true"
+            :check-strictly="true"
+            @check-change="handleNodeCheckChange"
+            node-key="id"
+            default-expand-all
+            class="model-tree"
+          ></el-tree>
+        </div>
+        <!-- 右侧地图容器 -->
+        <div id="map-container-batch" class="model-map-container"></div>
+      </div>
+      <!-- 单独查看模型时，只显示地图容器，不显示树形 -->
+      <div id="map-container-single" v-else style="min-height: 76vh;"></div>
 
-            <div id="map-container"></div>
+      <!-- <dxf-viewer :entities="dxfPreviewUrl"></dxf-viewer> -->
     </el-dialog>
   </div>
 </template>
@@ -297,6 +319,16 @@ export default {
       map: null,
       modelPreviewVisible: false,
       modelPreviewInfoList: [],
+      // 新增：标记是否为批量模型预览（控制树形显示）
+      isBatchPreview: false,
+      // 新增：树形菜单相关（仅模型预览使用）
+      projectTreeData: [], // 项目树形节点数据
+      treeProps: {
+        children: 'children',
+        label: 'nodeName',
+        isLeaf: 'isLeaf'
+      },
+      checkedNodeIds: [], // 已勾选的节点ID（不再限制末级）
     }
   },
   created() {
@@ -322,7 +354,7 @@ export default {
       this.open = true // 显示对话框
       this.title = '新增项目' // 设置对话框标题
     },
-        // 查看模型按钮
+    // 查看模型按钮（单独查看，不显示树形）
     handleViewModel(row) {
       /*  const modelUrl = row.modelUrl
 if (!modelUrl || !modelUrl.endsWith('.dxf')) {
@@ -339,6 +371,8 @@ if (!modelUrl || !modelUrl.endsWith('.dxf')) {
       //         // console.error('获取项目详情失败:', error)
       //     })
 
+      // 标记为非批量预览（不显示树形）
+      this.isBatchPreview = false
       openView({ id: row.id })
         .then((res) => {
           this.modelPreviewInfoList = res.data
@@ -628,7 +662,6 @@ if (!modelUrl || !modelUrl.endsWith('.dxf')) {
     },
 
     // 新增二级节点
-
     handleAddLevelTwo() {
       this.addOrEditFormTitle = '新增'
       this.editForm = null
@@ -678,28 +711,150 @@ if (!modelUrl || !modelUrl.endsWith('.dxf')) {
       return []
     },
 
-        // 模型预览
+    // 加载项目树形数据（供模型预览弹窗使用）
+    loadProjectTree(customData = []) {
+      if (customData.length > 0) {
+        this.projectTreeData = customData.map(node => ({
+          ...node,
+          // 强制确保 isLeaf 赋值：仅 nodelevel === nodeCount 时为末级节点
+          isLeaf: Number(node.nodelevel) === Number(node.nodeCount)
+        }))
+      } else {
+        // 模型预览按钮点击时，加载当前项目下所有树形节点
+        this.projectTreeData = this.modelList.map(node => ({
+          ...node,
+          // 修复：统一转为数字比较，避免字符串/数字类型不匹配导致 isLeaf 赋值错误
+          isLeaf: Number(node.nodelevel) === Number(node.nodeCount)
+        }))
+      }
+    },
+
+    // 过滤节点：仅末级节点显示复选框
+    filterLeafNode(node) {
+      return node.isLeaf
+    },
+
+    // 【新增】递归获取节点下所有子节点ID（含所有层级）
+    getAllChildNodeIds(node) {
+      let nodeIds = []
+      // 先添加当前节点ID（如果需要包含当前节点自身模型）
+      // 若只需子节点，可注释此行
+      nodeIds.push(node.id)
+      // 递归遍历子节点
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          nodeIds = nodeIds.concat(this.getAllChildNodeIds(child))
+        })
+      }
+      return nodeIds
+    },
+
+    // 节点勾选状态变化事件（修改：支持父节点勾选，加载所有子节点）
+    handleNodeCheckChange(node, checked) {
+      // 移除原有的末级节点校验，允许所有节点触发
+      // if (!node || !node.isLeaf || Number(node.nodelevel) !== Number(node.nodeCount)) {
+      //   return
+      // }
+
+      // 1. 递归获取当前节点下所有子节点ID
+      const allChildIds = this.getAllChildNodeIds(node);
+
+      // 2. 更新业务数组
+      if (checked) {
+        allChildIds.forEach(id => {
+          if (!this.checkedNodeIds.includes(id)) {
+            this.checkedNodeIds.push(id);
+          }
+        });
+      } else {
+        this.checkedNodeIds = this.checkedNodeIds.filter(id => !allChildIds.includes(id));
+      }
+
+      const treeRef = this.$refs.projectTree;
+      if (treeRef) {
+        // 先清空所有勾选（避免残留）
+        if (!checked) {
+          treeRef.setCheckedKeys([]);
+        }
+        // 批量设置「父节点+所有子节点」为选中状态（视觉上显示勾选标识）
+        treeRef.setCheckedKeys(this.checkedNodeIds);
+      }
+
+      // 4. 加载模型（原有逻辑不变）
+      this.loadBatchCadData();
+    },
+
+    // 批量加载勾选节点的CAD数据
+    async loadBatchCadData() {
+      // 1. 清空旧模型数据和地图覆盖物（关键：确保操作生效）
+      this.modelPreviewInfoList = []
+      this.clearMapOverlays()
+
+      if (this.checkedNodeIds.length === 0) {
+        return
+      }
+
+      try {
+        // 批量查询勾选节点的模型数据
+        const promises = this.checkedNodeIds.map(nodeId => openView({ id: nodeId }))
+        const results = await Promise.all(promises)
+
+        // 合并所有模型数据
+        this.modelPreviewInfoList = results.reduce((total, res) => {
+          return [...total, ...res.data]
+        }, [])
+
+        // 重新渲染地图
+        this.drawModel(this.modelPreviewInfoList)
+      } catch (error) {
+        console.error('加载勾选节点模型失败:', error)
+        this.$message.error('加载模型图层失败')
+      }
+    },
+
+    // 清空地图覆盖物
+    clearMapOverlays() {
+      if (this.map) {
+        this.map.clearOverlays()
+      }
+    },
+
+    // 模型预览（批量，显示树形）
     handleModelPreview() {
+      // 标记为批量预览（显示树形）
+      this.isBatchPreview = true
       // 获取当前选中的项目 ID
       const selectedProjectId = this.queryParams.projectId
       // 判断是否选中（非空）
-            if (selectedProjectId != null && selectedProjectId !== '') {
+      if (selectedProjectId == null || selectedProjectId === '') {
-                console.log('已选中项目 ID:', selectedProjectId)
-                // 执行你的逻辑
-            } else {
         this.$modal.msgError('请选择项目')
+        return
       }
-            openViewAll({ projectId: selectedProjectId })
+
-                .then((res) => {
+      // 加载当前项目下所有树形节点
-                    this.modelPreviewInfoList = res.data
+      this.loadProjectTree()
+      // 清空已勾选节点
+      this.checkedNodeIds = []
+      if (this.$refs.projectTree) {
+        this.$refs.projectTree.setCheckedKeys([])
+      }
+
+      this.modelPreviewInfoList = []
+      // 5. 显示弹窗并初始化地图（地图初始化后无覆盖物）
       this.modelPreviewVisible = true
 
-                    console.log('res', res.data)
       this.initMap()
-                })
+
-                .catch((err) => {
+      // 加载所有模型数据
-                    console.error('获取模型详情失败:', err)
+      // openViewAll({ projectId: selectedProjectId })
-                })
+      //   .then((res) => {
+      //     this.modelPreviewInfoList = res.data
+      //     this.modelPreviewVisible = true
+      //     this.initMap()
+      //   })
+      //   .catch((err) => {
+      //     console.error('获取模型详情失败:', err)
+      //   })
       // this.modelPreviewVisible = true
       //
       // // 百度地图初始化
@@ -710,17 +865,35 @@ if (!modelUrl || !modelUrl.endsWith('.dxf')) {
     onCloseMapView() {
       // 销毁地图实例
       if (this.map) {
+        this.map.clearOverlays()
         this.map = null
       }
+      // 清空勾选状态
+      this.checkedNodeIds = []
+      if (this.$refs.projectTree) {
+        this.$refs.projectTree.setCheckedKeys([])
+      }
+      // 重置批量预览标记
+      this.isBatchPreview = false
     },
 
     // 百度地图初始化
     initMap() {
-            // 初始化开启地球模式
-            const lon = this.projectSelectList.find((item) => item.id == this.queryParams.projectId).lon * 1
-            const lat = this.projectSelectList.find((item) => item.id == this.queryParams.projectId).lat * 1
       this.$nextTick(() => {
-                this.map = new BMapGL.Map('map-container') // 创建地图实例
+        // 清空原有地图
+        if (this.map) {
+          this.map.clearOverlays()
+          this.map = null
+        }
+
+        // 初始化开启地球模式
+        const projectItem = this.projectSelectList.find((item) => item.id == this.queryParams.projectId)
+        const lon = projectItem?.lon * 1 || 116.404
+        const lat = projectItem?.lat * 1 || 39.915
+
+        // 根据是否批量预览，选择不同的地图容器
+        const mapContainerId = this.isBatchPreview ? 'map-container-batch' : 'map-container-single'
+        this.map = new BMapGL.Map(mapContainerId) // 创建地图实例
         this.map.setMapType(BMAP_EARTH_MAP) // 地球模式
         this.map.setDisplayOptions({
           poiText: false, // 隐藏POI文字
@@ -1150,7 +1323,43 @@ if (!modelUrl || !modelUrl.endsWith('.dxf')) {
   background-color: #f0f7ff;
 }
 
-#map-container {
+#map-container-single {
   min-height: 76vh;
 }
+
+/* 模型预览弹窗样式（仅批量预览时生效） */
+.model-preview-wrapper {
+  display: flex;
+  height: 76vh;
+  gap: 10px;
+}
+
+.model-tree-container {
+  width: 280px;
+  height: 100%;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.model-map-container {
+  flex: 1;
+  height: 100%;
+  border-radius: 4px;
+}
+
+/* 树形组件样式优化 */
+::v-deep .model-tree {
+  --el-tree-node-content-hover-bg-color: #f5f7fa;
+}
+
+::v-deep .model-tree .el-tree-node__checkbox {
+  margin-right: 8px;
+}
+
+/* 隐藏非末级节点的复选框 */
+::v-deep .model-tree .el-tree-node:not(.is-leaf) .el-tree-node__checkbox {
+  display: none !important;
+}
 </style>