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

<template>
  <div class="bim-setting-page app-container2">
    <div id="bimSettingContainer"></div>
    <div class="bim-cfg-tools">
      <el-switch v-model="showGis" @change="doChangeGis"></el-switch>GIS
    </div>
    <model-floor-tree ref="modelFloorTree" :me="this" @change="doChange" @modelAdd="modelAdded" :projectMessage="models"
      v-if="showTree"></model-floor-tree>
    <div class="footer-box" v-if="showModels.length > 0">
      <el-tooltip placement="top" content="主视图">
        <div class="footer-btn" @click="doMenu(0)" :class="activeMenu == 0 ? 'is-active' : ''">
          <svg-icon icon-class="home" />
        </div>
      </el-tooltip>
      <el-tooltip placement="top" content="第一人称漫游">
        <div class="footer-btn" @click="doMenu(1)" :class="activeMenu == 1 ? 'is-active' : ''">
          <svg-icon icon-class="roam" />
        </div>
      </el-tooltip>
      <el-tooltip placement="top" content="自定义视点漫游">
        <div class="footer-btn" @click="doMenu(2)" :class="activeMenu == 2 ? 'is-active' : ''">
          <svg-icon icon-class="view" />
        </div>
      </el-tooltip>
      <el-tooltip placement="top" content="视点管理">
        <div class="footer-btn" @click="doMenu(3)" :class="activeMenu == 3 ? 'is-active' : ''">
          <svg-icon icon-class="camera" />
        </div>
      </el-tooltip>
      <el-tooltip placement="top" content="构件隐藏">
        <div class="footer-btn" @click="doMenu(4)" :class="activeMenu == 4 ? 'is-active' : ''">
          <svg-icon icon-class="hide" />
        </div>
      </el-tooltip>
      <el-tooltip placement="top" content="模型偏移">
        <div class="footer-btn" @click="doMenu(5)" :class="activeMenu == 5 ? 'is-active' : ''">
          <svg-icon icon-class="position" />
        </div>
      </el-tooltip>
    </div>
    <div class="bim-setting-tools" v-show="(activeMenu > 0 && activeMenu != 5)">
      <div class="tools-title">
        <svg-icon icon-class="roam" v-if="activeMenu == 1" />
        <svg-icon icon-class="view" v-if="activeMenu == 2" />
        <svg-icon icon-class="camera" v-if="activeMenu == 3" />
        <svg-icon icon-class="hide" v-if="activeMenu == 4" />
        {{ param.title }}
      </div>
      <el-icon @click="doToolsClose" style="color: #000; font-size: 20px; cursor: pointer" class="tools-close">
        <Close />
      </el-icon>
      <person-roaming v-if="activeMenu == 1" ref="personRoaming" :me="this"></person-roaming>
      <custom-viewpoint v-if="activeMenu == 2" ref="customViewpoint" :me="this"></custom-viewpoint>
      <viewpoint v-if="activeMenu == 3" ref="viewpoint" :me="this"></viewpoint>
      <HideFeature v-show="activeMenu == 4" ref="hideFeature" :me="this"></HideFeature>
    </div>

    <div class="bim-setting-tools" v-show="showMove">
      <div class="tools-title">
        <svg-icon icon-class="position" />
        {{ param.title }}
      </div>
      <el-icon @click="doCloseMove" style="color: #000; font-size: 20px; cursor: pointer" class="tools-close">
        <Close />
      </el-icon>
      <MoveModel ref="moveModel" :me="this"></MoveModel>
    </div>

  </div>
</template>

<script>
import useUserStore from "@/store/modules/user";
import { listBimModel } from "@/api/bim/bimModel";
import { getDefaultViewPoint } from '@/api/bim/bim';
import ModelFloorTree from "./ModelFloorTree.vue";
import PersonRoaming from "./PersonRoaming.vue";
import CustomViewpoint from "./CustomViewpoint.vue";
import Viewpoint from "./Viewpoint.vue";
import MoveModel from "./MoveModel.vue";
import HideFeature from "./HideFeature.vue";
import { ElMessage, ElTooltip } from 'element-plus';
import { getProjectBimConfig } from "@/api/manage/proProjectInfo.js";
import SAPITools from './sapiTools.js'
import APITools from './apiTools.js'
export default {
  components: {
    ModelFloorTree,
    PersonRoaming,
    CustomViewpoint,
    Viewpoint,
    ElTooltip,
    MoveModel,
    HideFeature,
  },
  data() {
    return {
      userStore: {},
      isAdmin: false,
      projects: [],
      currentPrjId: null,
      currentComId: null,
      subDepts: [],
      models: [],
      isMobile: false,
      showTree: false,
      initSuccess: false,
      activeMenu: 0,
      showModels: [],
      param: {},
      viewPoint: null,
      showGis: false,
      movePoint: null,
      moveModelId: null,
      isMove: false,
      showMove: false,
      hideParts: [],
      bimCfg: {}
    };
  },
  beforeUnmount() {
    document.body.classList.remove("is-sapi");
  },
  mounted() {
    document.body.classList.add("is-sapi");
    this.userStore = useUserStore();
    this.isAdmin = this.userStore.isAdmin;
    this.currentPrjId = this.userStore.currentPrjId;
    this.currentComId = this.userStore.currentComId;
    this.initLoadModel();

    getProjectBimConfig(this.currentPrjId).then(d => {
      let config = this.$tryToJson(d.msg, {});
      this.bimCfg = {
        background: config.background || "",
        showGis: config.showGis || false,
        clientApi: config.clientApi || false
      }
      if (this.bimCfg.clientApi) {
        APITools.initEngine(this);
      } else {
        SAPITools.initEngine(this);
      }
    });
  },
  methods: {
    doCloseMove() {
      this.$refs.moveModel.resetPosition();
      this.showMove = false;
      this.activeMenu = -1;
    },
    modelAdded(point) {
      if (this.viewPoint != null) {
        this.viewPoint = point;
      }
    },
    doChangeGis() {
      if (this.showGis) {
        if (this.bimCfg.clientApi) {
          api.Public.setGisState(true);
        } else {
          api.Public.setGisState(true);
          api.Public.setTerrainState(false, "http://113.201.2.107:9304/layer.json", false)
          api.Public.setGisState(true);
        }
      } else {
        let color = this.bimCfg.background || "rgba(135 ,206 ,250,1)"
        api.Public.setGisState(false, color);
        api.Public.setSkyBoxState(0)
      }
    },
    doChange() {
      this.showModels = api.m_model.keys().toArray();
      console.log("--change--");
    },
    resetScene() {
      if (this.$refs.personRoaming) {
        this.$refs.personRoaming.isRoaming = false;
      }
      api.Camera.stopImmersiveRoam();
      api.Model.location(api.m_model.keys().toArray()[0]);
      api.Plugin.deleteMiniMap();
      if (this.viewPoint) {
        api.Camera.setViewPort(this.viewPoint);
      }
    },
    doMenu(n) {
      if (this.activeMenu == 4) {
        api.Public.clearHandler();
        api.Feature.getByEvent(false);
      }
      if (n == this.activeMenu) {
        if (n == 0) {
          this.resetScene();
          if (this.isMove) {
            this.activeMenu = 5;
          }
        }
        return;
      }
      if (this.activeMenu == 5) {
        this.doCloseMove()
      }
      this.activeMenu = n;
      if (n == 0) {
        this.resetScene();
        if (this.isMove) {
          this.activeMenu = 5;
        }
      }
      if (n == 1) {
        this.param.title = "第一人称漫游";
      }
      if (n == 2) {
        this.param.title = "自定义视点漫游";
      }
      if (n == 3) {
        this.param.title = "视点管理";
      }
      if (n == 4) {
        this.param.title = "构件隐藏管理";
        setTimeout(() => {
          this.$refs.hideFeature.doHideFeatures(this.hideParts);
        }, 800);

      }
      if (n == 5) {
        this.param.title = "模型偏移管理";
        this.isMove = true;
        this.doModelMove();
      } else {
        if (this.isMove) {
          this.isMove = false;
          this.showMove = false;
          api.Public.clearHandler(),
            api.Public.pickupCoordinate(false);
        }
      }
    },
    doModelMove() {
      ElMessage.info("请在场景中选择要移动的模型！");
      if(this.bimCfg.clientApi){
        APITools.doModelMove(this);
      }else{
        SAPITools.doModelMove(this);
      }
    },

    NotificationPopup(parameter) {
      this.param = parameter;

    },
    doToolsClose() {
      this.activeMenu = 0;
      this.resetScene();
    },
    notifClose() {
      this.activeMenu = -1;
    },

    initLoadModel() {
      getDefaultViewPoint(this.currentPrjId, 1).then(d => {
        let pt = "";
        if (d.data && d.data.length > 0) {
          pt = d.data[0].viewPosition;
          pt = this.$tryToJson(pt, null);
        }
        if (pt) {
          this.viewPoint = pt;
        }
      });
      listBimModel({
        pageNum: 1,
        pageSize: 10,
        comId: this.currentComId,
        projectId: this.currentPrjId,
      }).then((d) => {
        this.models = (d.rows || []).map((it) => {
          it.modelId = it.lightweightName;
          it.bimCfg = this.$tryToJson(it.bimConfig || "{}", {});
          it.visible = false;
          it.checked = true;
          it.gis = this.$tryToJson(it.gisJson || "{}", {});
          return it;
        });
        if (this.models.length == 0) {
          ElMessage.error("暂无模型，请先关联模型");
        } else {
          this.showTree = true;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.bim-setting-page {
  position: relative;
  height: 100%;

  .bim-cfg-tools {
    position: absolute;
    left: 340px;
    top: 20px;
  }

  #bimSettingContainer {
    height: 100%;
  }

  .footer-box {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    margin-left: -75px;
    background: #274754;
    border-radius: 4px;

    .footer-btn {
      display: inline-flex;
      width: 40px;
      height: 40px;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      svg {
        width: 20px;
        height: 20px;
        fill: #fff;
      }

      &:hover {
        background: #408edb97;
      }

      &.is-active {
        svg {
          fill: rgb(0, 255, 174);
        }
      }
    }
  }

  .bim-setting-tools {
    position: absolute;
    top: 80px;
    right: 10px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    min-height: 400px;

    .tools-title {
      padding: 10px;
      color: #114c5f;
      size: 24px;
    }

    .tools-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  }
}
</style>