real3d-portalsite/src/components/sceneAtttribute/splitScreen/splitScreen.vue

<template>
  <div id="screenDiv">
    <div
      v-for="(k, i) in layers"
      :key="i"
      class="splitScreen"
      :class="{
        w50:
          type == 'HORIZONTAL' ||
          type == 'QUAD' ||
          (type == 'TRIPLE' && k != 3),
        h50: type == 'VERTICAL' || type == 'QUAD' || type == 'TRIPLE',
      }"
    >
      <li
        class="sm-btn sm-tool-btn"
        title="资源目录"
        @click="$set(layers, i, !layers[i])"
      >
        <span class="iconfont icontuceng"></span>
      </li>
      <layer-manage-split
        ref="splitManage"
        type="split"
        :splitId="i"
        :isshow="layers[i]"
        :checkedKeys="checkedKeys[i]"
        @close="$set(layers, i, false)"
        @handleCheckChange="handleCheckChange"
      ></layer-manage-split>
      <input v-model="toolTitle[i]" type="text" class="sm-toolTitle" />
    </div>
  </div>
</template>

<script>
export default {
  name: "splitScreen",
  data() {
    return {
      layers: [],
      checkedKeys: [],
      toolTitle: [],
    };
  },
  computed: {
    type() {
      return store.state.splitType;
    },
    value() {
      switch (store.state.splitType) {
        case "HORIZONTAL":
        case "VERTICAL":
          return 2;
        case "TRIPLE":
          return 3;
        case "QUAD":
          return 4;
        default:
          break;
      }
    },
  },
  watch: {
    value(val) {
      this.layers = Array(val);
      this.checkedKeys = Array(val);
      this.toolTitle = Array(val);
      this.setCheckeds();
    },
  },
  // inject: ["checkedChange"],
  mounted() {
    this.bus.$on("setImagerySplit", this.handleCheckChange);
  },
  methods: {
    setCheckeds() {
      if (!store.state.checkedData) return;
      for (let i = 0; i < this.checkedKeys.length; i++) {
        this.checkedKeys[i] = [store.state.checkedData.id];
        this.toolTitle[i] = [store.state.checkedData.title];
      }
      this.$set(this.checkedKeys, this.checkedKeys);
      this.$set(this.toolTitle, this.toolTitle);
    },
    handleCheckChange(obj, checked, splitId) {
      if (obj.children && obj.children.length > 0) {
        for (let i = 0; i < obj.children.length; i++) {
          this.handleCheckChange(obj.children[i], checked);
        }
      } else {
        if (checked) {
          store.setCheckedData(obj);
          this.$set(this.toolTitle, splitId, obj.title);
          // this.toolTitle[splitId] = obj.title;
        }
        console.log(obj.title, obj.type, splitId, "q");
        // if (obj.checked) {
        let sceneLayer;
        switch (obj.type) {
          case "S3M": //场景
            if (store.state.sceneLayerlist[obj.title])
              sceneLayer = store.state.sceneLayerlist[obj.title][0][0];
            // viewer.scene.layers.find(obj.title)
            break;
          case "S3MDATA": //scp
          case "3DTiles": //tileset
            sceneLayer = store.state.sceneLayerlist[obj.title];
            //viewer.scene.layers.find(obj.title)
            break;
          case "IMG": //影像
          case "Vector": //矢量
            // sceneLayer = this.layerparams[obj.id];
            let slist = viewer.imageryLayers._layers.filter(
              (element) => element._imageryProvider._name == obj.title
            );
            console.log(slist, "slist");
            sceneLayer = slist.length > 0 ? slist[0] : null;
            break;
          case "Terrain": //地形
            // sceneLayer = viewer.terrainProvider;
            console.log(viewer.terrainProvider, viewer.scene.terrainProvider);
            break;
          default:
            null;
        }
        if (sceneLayer) {
          sceneLayer.setVisibleInViewport(splitId, obj.checked);
          // sceneLayer.setVisibleInViewport(1, obj.checked);
        } else {
          this.bus.$emit("checkedChange", obj, "split", splitId);
          // if (obj.checked) {
          //   for (let i = 0; i < this.checkedKeys.length; i++) {
          //     if (!this.checkedKeys[i]) {
          //       this.checkedKeys[i] = [];
          //     }
          //     if (i != splitId) {
          //       this.checkedKeys[i].push(obj.id);
          //     }
          //   }
          //   this.$set(this.checkedKeys, this.checkedKeys);
          // }
        }
      }
    },
  },
};
</script>
<style lang="scss" >
#screenDiv {
  position: absolute;
  top: 60px;
  height: calc(100% - 60px);
  width: 100%;
}
.splitScreen {
  float: left;
  height: 100%;
  width: 100%;
  position: relative;

  .sm-btn {
    position: absolute;
    top: 60px;
    left: 10px;
    background-color: transparent;
    // font-size: 30px;
    z-index: 110 !important;
    cursor: pointer;
  }
  .sm-panel {
    max-width: 300px;
    height: 400px; //75%;
    max-height: 80%;
    top: 60px;
    left: 50px;
  }
}

.w50 {
  width: 50%;
}
.h50 {
  height: 50%;
}
.sm-toolTitle {
  width: 400px;
  // height: 80px;

  position: absolute;
  top: 100px;
  left: calc(50% - 300px);
  z-index: 100;
  text-align: center;
  font-size: 24px;
  color: aqua;
  background: transparent;
  border-color: transparent;
}
@import "../../Combinations/toolBar/toolBar.scss";
</style>