xujingtown_irflcmp_ui/src/views/HomeView.vue

<template>
  <div class="home">
    <Header />
    <Edge />
    <Layers />
    <Map ref="map" />
    <!-- 左侧图片区 -->
    <div class="home_LeftMainBox">
      <img style="width: 500px; height: 50px" src="../assets/images/LT1.png" />
      <img style="width: 500px; height: 246px" src="../assets/images/LM1.png" />
      <img style="width: 500px; height: 50px" src="../assets/images/LT2.png" />
      <img style="width: 500px; height: 246px" src="../assets/images/LM2.png" />
      <img style="width: 500px; height: 50px" src="../assets/images/LT3.png" />
      <img style="width: 500px; height: 246px" src="../assets/images/LM3.png" />
    </div>
    <!-- 中上部分3DTiles控件 -->
    <div class="home_CentralMainBox">
      <el-cascader
        placeholder="选择3DTiles模型渲染"
        v-model="cascaderValue"
        @change="handleChangeCascader"
        :options="options"
        :props="props"
        clearable
      ></el-cascader>
    </div>
    <!-- 右侧图片区 -->
    <div class="home_RightMainBox">
      <img style="width: 500px; height: 50px" src="../assets/images/RT1.png" />
      <img style="width: 500px; height: 246px" src="../assets/images/RM1.png" />
      <img style="width: 500px; height: 50px" src="../assets/images/RT2.png" />
      <img style="width: 500px; height: 246px" src="../assets/images/RM2.png" />
      <img style="width: 500px; height: 50px" src="../assets/images/RT3.png" />
      <img style="width: 500px; height: 246px" src="../assets/images/RM3.png" />
    </div>
  </div>
</template>

<script>
import Map from "@/components/Map.vue";
import Header from "@/components/Header.vue";
import Edge from "@/components/Edge.vue";
import Layers from "@/components/Layers.vue";
import CardTitle from "@/components/cards/CardTitle.vue";

export default {
  name: "HomeView",
  data() {
    return {
      props: { multiple: true },
      options: [],
      cascaderValue: [],
    };
  },
  components: {
    Map,
    Header,
    Edge,
    Layers,
    CardTitle,
  },
  mounted() {
    // 初始化3DTiles的下拉框options并默认显示
    let options_ = [];
    let cascaderValue_ = [];
    for (let tileName in systemConfig.data3DTiles) {
      let children_ = [];
      for (let key in systemConfig.data3DTiles[tileName]) {
        children_.push({ value: key, label: key });
        cascaderValue_.push([tileName, key]);
      }
      options_.push({ value: tileName, label: tileName, children: children_ });
    }
    this.options = options_;
    // 默认全选所有3DTiles模型
    // this.$nextTick(() => {
    //   setTimeout(() => {
    //     this.cascaderValue = cascaderValue_;
    //     this.$refs.map.HomeHandleChangeCascader(cascaderValue_);
    //   });
    // });
  },
  methods: {
    handleChangeCascader(cascaderValue) {
      this.$refs.map.HomeHandleChangeCascader(Object.assign([], cascaderValue));
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &_LeftMainBox {
    position: fixed;
    z-index: 9999;
    top: 65px;
    left: 0;
    width: 500px;
    height: calc(100vh - 65px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    // pointer-events: none;
    background: #00000064;
  }
  &_CentralMainBox {
    position: fixed;
    z-index: 9999;
    left: 520px;
    top: 100px;
    width: 350px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  &_RightMainBox {
    position: fixed;
    z-index: 9999;
    top: 65px;
    right: 0;
    width: 500px;
    height: calc(100vh - 65px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    // pointer-events: none;
    background: #00000064;
  }
}
</style>