YZProjectCloud/yanzhu-ui-vue3/src/views/bim/bimSetting/ModelFloorTree.vue

<template>
  <div class="model-floor-tree scroll-box" :class="{ 'hide-tree': !showTree }">
    <div class="nav-header">
      <span class="title">结构树</span>
      <span class="toolbar">
        <el-icon color="#fff" @click="showTree = !showTree">
          <ArrowUpBold v-if="showTree" />
          <ArrowDownBold v-else />
        </el-icon>
      </span>
    </div>
    <!-- <a-tree
            checkable
            class="model-tree"
            :tree-data="modelTrees"
            :load-data="onLoadData"
            :replace-fields="replaceFields"
            @check="onCheckTree"
            v-model="checkedKeys"
            :selectedKeys="selectedKeys"
            @select="onSelect"
            default-expand-all
        >
            <template #title="{text}">
                <span>
                    {{text.name}}
                    <a-icon type="loading" v-show="text.disableCheckbox" />
                </span>
            </template>
        </a-tree>-->
    <div class="scroll-box">
      <a-tree ref="tree" v-model:expandedKeys="expandedKeys" @check="onCheckTree" v-model:selectedKeys="selectedKeys" :tree-data="modelTrees" checkable default-expand-all :load-data="loadTree"></a-tree>
    </div>
  </div>
</template>

<script>
import { getModelTree, getTreeAllLeafChild } from "@/api/bim/bimModel";
export default {
  props: {
    projectMessage: {
      type: Object,
      default: undefined,
    },
  },
  data() {
    return {
      modelTrees: [],
      replaceFields: {
        title: "name",
        key: "glid",
        value: "glid",
      },
      expandedKeys: [],
      visibleList: [], //结构树显示构件列表
      checkedKeys: [], //用于清除选中状态
      selectedKeys: [],
      selectedFeature: undefined,
      requestedData: [], //已经请求过得不在请求
      firstClick: true,
      isMobile: false,
      showTree: true,
      visibleList: [],
    };
  },
  mounted() {
    window.mtree = this;
    this.modelTrees = [
      {
        title: "项目模型",
        level: 0,
        type: "root",
        key: "root",
        children: [],
        hadLoad: true,
      },
    ];
    this.projectMessage
      .map((d) => {
        d.gis = JSON.parse(d.gisJson);
        return d;
      })
      .forEach((d) => {
        this.modelTrees[0].children.push({
          title: d.modelName,
          level: 1,
          type: "model",
          hasLoad: false,
          modelId: d.lightweightName,
          key: d.lightweightName,
          externalId: "0",
          glid: "",
          children: [],
          data: d,
        });
      });
    this.expandedKeys = ["root"];
    this.$nextTick(() => {});
  },
  methods: {
    loadTree(a, b, c) {
      return new Promise((resolve, reject) => {
        if (a.hasLoad) {
          resolve();
          return;
        }
        getModelTree(a.modelId, a.glid).then((d) => {
          (d.data || []).forEach((e) => {
            let title = e.externalId == 0 ? e.name : e.externalId;
            title = title.replace(/[\/\\"]/g, "");
            a.children.push({
              title: title,
              key: e.glid,
              glid: e.glid,
              externalId: e.externalId,
              modelId: a.modelId,
              type: "data",
              featureId: a.modelId + "^" + e.externalId,
              children: [],
              hasLoad: false,
              isLeaf: e.externalId != 0,
              data: e,
            });
          });
          resolve();
        });
      });
    },
    addModel(modelId, cb) {
      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
      api.Model.add(
        url,
        modelId,
        () => {},
        () => {
          console.log("加载模型成功");
          cb && cb();
          this.$emit("change");
          setTimeout(() => {
            api.Camera.getViewPort((p) => {
              this.$emit("modelAdd", p);
            });
          }, 1000);
        }
      );
    },
    onCheckTree(heckedKeys, e) {
      const checkNode = e.node.dataRef;
      const checked = e.checked;
      const halfChecked = e.node.halfChecked;
      if (checkNode.type == "root") {
        if (checked) {
          checkNode.children.forEach((m) => {
            if (halfChecked) {
              if (api.m_model.has(m.modelId)) {
                api.Model.remove(m.modelId);
              }
              this.addModel(m.modelId);
              this.$emit("change");
            } else {
              if (api.m_model.has(m.modelId)) {
                api.Model.setVisible(m.modelId, true);
                this.$emit("change");
              } else {
                this.addModel(m.modelId);
              }
            }
          });
        } else {
          if (api.m_model.size == 0) {
            return;
          }
          checkNode.children.forEach((m) => {
            if (api.m_model.has(m.modelId)) {
              api.Model.remove(m.modelId);
              this.$emit("change");
            }
          });
        }
        return;
      }
      if (checkNode.type == "model") {
        if (checked) {
          if (halfChecked) {
            if (api.m_model.has(checkNode.modelId)) {
              api.Model.remove(checkNode.modelId);
            }
            this.addModel(checkNode.modelId);
            this.$emit("change");
          } else {
            if (api.m_model.has(checkNode.modelId)) {
              api.Model.setVisible(checkNode.modelId, true);
              this.$emit("change");
            } else {
              this.addModel(checkNode.modelId);
            }
          }
        } else {
          if (api.m_model.has(checkNode.modelId)) {
            api.Model.remove(checkNode.modelId);
            this.$emit("change");
          }
        }
        return;
      }
      if (api.m_model.size == 0) {
        let modelId = checkNode.modelId;
        this.addModel(modelId, () => {
          this.showItem(e, heckedKeys);
        });
      } else {
        this.showItem(e, heckedKeys);
      }
    },
    async showItem(e, checkedKeys) {
      const node = e.node.dataRef;
      const checked = e.checked;
      let isPartLoad = false;
      if (checkedKeys.length == 1 && checked) {
        isPartLoad = true;
      }
      let selFeatureIds = [];
      if (node.isLeaf) {
        selFeatureIds.push(node.featureId);
      } else {
        if (!node.leafs) {
          let leafs = await this.getNodeLeafs(node);
          node.leafs = leafs;
        }
        selFeatureIds = node.leafs.map((f) => f.featureId);
      }
      let tmps = selFeatureIds;
      if (!checked) {
        this.setFeatueVisible(tmps, false);
      } else {
        if (isPartLoad) {
          api.Model.setVisible(node.modelId, true);
          api.Model.original(node.modelId);
          let tmpsIds2 = tmps.splice(0, 1000);
          api.Feature.showFeatures(tmpsIds2.join("#"));
          this.setFeatueVisible(tmps, true);
        } else {
          this.setFeatueVisible(tmps, true);
        }
      }
    },
    setFeatueVisible(featureIds, show) {
      let len = 1000;
      let cnt = featureIds.length;
      for (let i = 0; i < cnt; i += len) {
        api.Feature.setVisible(featureIds.slice(i, i + len).join("#"), show);
      }
    },
    async getNodeLeafs(node) {
      const res = await getTreeAllLeafChild(node.modelId, node.glid);
      return (res.data || []).map((o) => {
        o.modelId = node.modelId;
        o.featureId = o.modelId + "^" + o.externalId;
        o.name = o.name || "";
        o.name = o.name.replaceAll('"', "").replaceAll("'", "").replaceAll("\\", "");
        o.info = `[${o.externalId}]${o.groupname}-${o.name}`;
        return o;
      });
    },
    async showItem2(e) {
      const checkNode = e.node.dataRef;
      const checked = e.checked;
      api.Model.setVisible(checkNode.modelId, true);
      this.$emit("change");
      let externalId = checkNode.externalId;
      if (externalId != 0) {
        if (checked) {
          this.visibleList.push(externalId);
          api.Feature.setVisible(this.visibleList.join("#"), true, checkNode.modelId, false);
        } else {
          this.visibleList = this.visibleList.filter((item) => item !== externalId);
          api.Feature.setVisible(externalId, false, checkNode.modelId);
        }
      } else {
        e.node.disableCheckbox = true;
        const res = await getTreeAllLeafChild(checkNode.modelId, checkNode.glid);
        let nodes = (res.data || []).map((d) => d.glid);
        if (nodes.length > 0) {
          if (checked) {
            this.visibleList = this.MergeArray(nodes, this.visibleList);
            api.Model.setVisible(checkNode.modelId, true);
            this.$emit("change");
            api.Feature.setVisible(this.visibleList.join("#"), true, checkNode.modelId, false);
          } else {
            this.visibleList = this.DelArray(this.visibleList, nodes);
            api.Feature.setVisible(nodes.join("#"), false, checkNode.modelId);
          }
        }
      }
    },
    MergeArray(arr1, arr2) {
      var _arr = new Array();
      for (var i = 0; i < arr1.length; i++) {
        _arr.push(arr1[i]);
      }
      for (var i = 0; i < arr2.length; i++) {
        var flag = true;
        for (var j = 0; j < arr1.length; j++) {
          if (arr2[i] == arr1[j]) {
            flag = false;
            break;
          }
        }
        if (flag) {
          _arr.push(arr2[i]);
        }
      }
      return _arr;
    },
    DelArray(array1, array2) {
      var result = [];
      for (var i = 0; i < array1.length; i++) {
        var k = 0;
        for (var j = 0; j < array2.length; j++) {
          if (array1[i] != array2[j]) {
            k++;
            if (k == array2.length) {
              result.push(array1[i]);
            }
          }
        }
      }
      return result;
    },
  },
};
</script>

<style lang="scss">
.model-floor-tree {
  position: absolute;
  width: 300px;
  top: 20px;
  left: 20px;
  color: #fff;
  background: #274754;
  &.hide-tree {
    height: 50px;
    .ant-tree {
      display: none;
    }
  }
  .nav-header {
    border-bottom: solid 1px #fff;
    line-height: 40px;
    padding: 0px 10px;
    position: relative;
    .title {
      color: rgb(0, 255, 212);
      font-weight: bold;
    }
    .toolbar {
      position: absolute;
      right: 10px;
      .el-icon {
        cursor: pointer;
      }
    }
  }
  .ant-tree {
    background: transparent;
    color: #fff;
  }
  .scroll-box {
    margin-top: 15px;
    height: 64vh;
    overflow-y: auto;

    &::-webkit-scrollbar {
      //整体样式
      height: 8px;
      width: 8px;
    }

    &::-webkit-scrollbar-thumb {
      //滑动滑块条样式
      border-radius: 1px;
      box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.2);
      background: #ffffff;
    }

    &::-webkit-scrollbar-track {
      //轨道的样式
      box-shadow: 0;
      border-radius: 0;
      background: rgba(255, 255, 255, 0.3);
    }

    .ant-tree-node-content-wrapper {
      color: #ffffff;
      white-space: nowrap;
      &.ant-tree-node-selected {
        background: #409eff54 !important;
      }
    }

    .ant-list-empty-text {
      padding: 5px;
      text-align: left;
    }
  }
}
</style>