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

<template>
  <div id="screenDiv" style="position: absolute; height: 100%; width: 100%">
    <div
      v-for="(k, i) in layers"
      :key="i"
      class="splitScreen"
      :class="{
        w50: type == 1 || type == 2,
        h50: type == -1 || type == -2,
      }"
    >
      <li
        class="sm-tool-btn"
        :class="i == 1 && (type == 1 || type == 2) ? 'sm-btn1' : 'sm-btn'"
        title="资源目录"
        @click="$set(layers, i, !layers[i])"
      >
        <span class="iconfont icontuceng"></span>
      </li>
      <layer-manage-split
        ref="splitManage"
        type="roller"
        :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: "rollerScreen",
  data() {
    return {
      layers: [],
      checkedKeys: [],
      toolTitle: [],
    };
  },
  computed: {
    type() {
      return store.state.rollerType;
    },
  },
  watch: {
    type() {
      this.layers = Array(2);
      this.checkedKeys = Array(2);
      this.toolTitle = Array(2);
      this.setCheckeds();
    },
  },
  // inject: ["checkedChange"],
  mounted() {},
  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.$set(this.checkedKeys, splitId, obj.id);
        }
        let sceneLayer = store.state.layerparamslist[obj.id];
        if (sceneLayer) {
          this.bus.$emit("setImageryRoller", sceneLayer);
        } else {
          this.bus.$emit("checkedChange", obj, true);
        }
      }
    },
    setImageryRollerMode(imageryLayers) {
      // let imageryLayers = viewer.imageryLayers;
      if (this.imageryRoller) {
        for (let i = 0; i < imageryLayers.length; i++) {
          // let imageryLayer =imageryLayers[i] //imageryLayers.get(i);
          switch (rollerShutterConfig.splitDirection) {
            case Cesium.SplitDirection.LEFT:
              imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.RIGHT,
                Cesium.ImagerySplitDirection.NONE
              );
              break;
            case Cesium.SplitDirection.RIGHT:
              imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.LEFT,
                Cesium.ImagerySplitDirection.NONE
              );
              break;
            case Cesium.SplitDirection.TOP:
              imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.NONE,
                Cesium.ImagerySplitDirection.BOTTOM
              );
              break;
            case Cesium.SplitDirection.BOTTOM:
              imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.NONE,
                Cesium.ImagerySplitDirection.TOP
              );
              break;
            default:
              imageryLayer.splitDirection = new Cesium.Cartesian2(
                Cesium.ImagerySplitDirection.NONE,
                Cesium.ImagerySplitDirection.NONE
              );
              break;
          }
        }
      } else {
        for (let i = 0; i < imageryLayers.length; i++) {
          let imageryLayer = imageryLayers.get(i);
          imageryLayer.splitDirection = new Cesium.Cartesian2(
            Cesium.ImagerySplitDirection.NONE,
            Cesium.ImagerySplitDirection.NONE
          );
        }
      }
    },
  },
};
</script>
<style lang="scss" >
.splitScreen {
  float: left;
  height: 100%;
  width: 100%;
  position: relative;

  .sm-btn {
    position: absolute;
    top: 60px;
    left: 20px;
    background-color: transparent;
    // font-size: 30px;
    z-index: 100;
    // width: 80px;
    // height: 80px;
    // background: red;
  }
  .sm-btn1 {
    position: absolute;
    top: 100px;
    right: 20px;
    background-color: transparent;
    font-size: 30px;
    z-index: 100;
  }

  .sm-panel {
    max-width: 300px;
    height: 400px; //75%;
    max-height: 80%;
    top: 80px;
    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>