zhgdyun/src/views/projectFront/BIMCenter/overviewTwo.vue

<template>
  <div class="fullHeight">
    <div class="bimModel-operate">
      <div class="select-operate">
        <span>模型构件操作：</span>
        <el-select v-model="formData.type" placeholder="请选择" size="small">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="data-show">
        <span>选中的数据值：</span>
        <div class="selected-box" v-if="formData.type == 1">
          <template v-show="selectedHideList.length > 0">
            <div v-for="(item, index) in selectedHideList" :key="index">
              <span>{{ item }}</span>
              <i class="el-icon-close" @click="deleteSelected(1, index)"></i>
            </div>
          </template>
        </div>
        <div class="selected-box" v-if="formData.type == 2">
          <template v-show="selectedColorList.length > 0">
            <div v-for="(item, index) in selectedColorList" :key="index">
              <span>{{ item.name }}：{{ item.color }}</span>
              <i class="el-icon-close" @click="deleteSelected(2, index)"></i>
            </div>
          </template>
        </div>
        <el-color-picker
          v-model="formData.color"
          v-if="formData.type == 2"
          style="margin-right: 15px;"
        ></el-color-picker>
        <el-button type="primary" size="small" @click="saveSelected"
          >保存</el-button
        >
      </div>
    </div>
    <iframe
      :src="url"
      frameborder="0"
      width="100%"
      id="iframe"
      style="flex: 1"
    ></iframe>
  </div>
</template>

<script>
import {
  getJlwDetailsApi,
  projectJlwBimListApi,
  saveBimfaceConfig,
} from "@/assets/js/api/project";
export default {
  data() {
    return {
      token: "",
      model: 1,
      url: "",
      iframe: null,
      formData: {
        type: 1,
        color: "",
      },
      typeOptions: [
        { label: "隐藏", value: 1 },
        { label: "着色", value: 2 },
      ],
      selectedHideList: [],
      selectedColorList: [],
      resData: {},
    };
  },
  props: {
    fileId: {
      default: "10000757034823",
    },
  },
  created() {},
  mounted() {
    (this.url = window.location.origin + "/bim.html"),
      (this.iframe = document.getElementById("iframe"));
    window.addEventListener("message", this.getIframeMessage);
    // this.getModelList()
  },
  watch: {
    fileId: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          // this.iframe.remove();
          this.$nextTick(() => {
            // this.iframe.append("<iframe id=\"iframe\" style=\"width: 100%;height: 100%\" src=\"\.bim.html\"></iframe>");
            //  console.log('页面还在吗',this.iframe)
            // this.iframe = document.getElementById('iframe')
            this.load();
            window.addEventListener("message", this.getIframeMessage);
            // this.getModelList();
            //  this.getToken()
          });
        }
      },
      deep: true,
    },
  },
  methods: {
    // 保存选中数据
    saveSelected() {
      let that = this;
      saveBimfaceConfig({
        id: this.resData.id,
        hiddenComponentId: this.selectedHideList.join(","),
        componentColorJson: JSON.stringify(this.selectedColorList),
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          that.iframe.contentWindow.postMessage({
            token: this.resData.viewToken,
            hideArr: this.selectedHideList,
            colorArr: this.selectedColorList,
          });
        }
      });
    },
    // 删除选中数据
    deleteSelected(type, index) {
      if (type == 1) {
        this.selectedHideList.splice(index, 1);
      } else if (type == 2) {
        this.selectedColorList.splice(index, 1);
      }
      this.$forceUpdate();
    },
    load() {
      // console.log(this.iframe,'iframe')
      // this.iframe.contentWindow.postMessage("我进来啦")
      this.getModelList();
    },
    getIframeMessage(e) {
      console.log("Message from iframe：", e.data.msg);
      if (e.data.msg) {
        if (this.formData.type == 1) {
          let dataIndex = null;
          dataIndex = this.selectedHideList.find((item) => {
            return item == e.data.msg;
          });
          if (!dataIndex) {
            this.selectedHideList.push(e.data.msg);
          }
        } else {
          let dataIndex = null;
          dataIndex = this.selectedColorList.find((item) => {
            return item.name == e.data.msg;
          });
          if (!dataIndex) {
            this.selectedColorList.push({
              name: e.data.msg,
              color: this.formData.color,
            });
          }
        }
      }
    },
    getModelList() {
      this.getToken(this.fileId);
      // projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(res => {
      //   this.buildList = res.result.page.records
      //   res.result.page.records.forEach(item => {
      //     if (item.isEnable) {
      //       // this.getToken()
      //     }
      //   })
      // })
    },
    getToken(fileId) {
      console.log("我切换了-------------------", fileId);
      getJlwDetailsApi({ fileId, projectSn: this.$store.state.projectSn }).then(
        (res) => {
          console.log(res);
          this.resData = res.result;
          const token = res.result.viewToken;
          this.selectedHideList = this.resData.hiddenComponentId
            ? this.resData.hiddenComponentId.split(",")
            : [];
          this.selectedColorList = this.resData.componentColorJson
            ? JSON.parse(this.resData.componentColorJson)
            : [];
          this.iframe.contentWindow.postMessage({
            token,
            hideArr: this.selectedHideList,
            colorArr: this.selectedColorList,
          });
        }
      );
    },
    // getToken() {
    //   let data = {};
    //   data.fileId = this.fileId;
    //   console.log('----看一下这个id',this.fileId)

    //   data.projectSn = this.$store.state.projectSn;
    //   getJlwTokenApi(data).then(res => {
    //     if (res.code == 200) {
    //       console.log("token", res);
    //       let token = res.result;
    //       let modelId = this.fileId
    //      this.iframe.contentWindow.postMessage({ token , modelId})
    //     }
    //   });
    // },
  },
};
</script>

<style scoped lang="scss">
@mixin flex {
  display: flex;
  align-items: center;
}
.fullHeight {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bimModel-operate {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  .select-operate {
    @include flex;
  }
  .data-show {
    width: max-content;
    max-width: 100%;
    @include flex;
    margin-top: 10px;
    .selected-box {
      flex: 1;
      min-width: 208px;
      min-height: 32px;
      max-height: 100px;
      border: 1px solid #c0c4cc;
      border-radius: 4px;
      @include flex;
      flex-wrap: wrap;
      padding-left: 6px;
      margin-right: 15px;
      overflow-y: scroll;
      > div {
        @include flex;
        background-color: #f4f4f5;
        padding: 3px 5px;
        margin: 3px 6px 3px 0;
        span {
          color: #909399;
          margin-right: 3px;
        }
        .el-icon-close {
          cursor: pointer;
        }
      }
    }
  }
}
</style>