zjyzt_gis_master_web_ui/src/views/DataDisplay.vue

<template>
  <div class="data_display">
    <el-container>
      <Aside
        v-bind="{
          showMenuIndex: showMenuIndex,
          menuList: menuList,
          handleMenuSelect: handleMenuSelect,
        }"
      ></Aside>
      <el-main>
        <DataTable
          v-show="showIndex == '1'"
          v-bind="{
            index: 0,
          }"
        ></DataTable>
        <LayerDisplay v-if="showIndex == '2'"></LayerDisplay>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
    },
  },
  data() {
    return {
      menuList: null,
      showIndex: "1",
      showMenuIndex: "1",
    };
  },
  components: {
    Aside: () => import("@/components/Currency/Aside.vue"),
    DataTable: () => import("@/components/Currency/DataTable/DataTable.vue"),
    LayerDisplay: () => import("@/components/DataDisplay/LayerDisplay.vue"),
  },
  created() {
    let that = this;
    this.menuList =
      this.$store.getters.getMenuListTotal[this.index - 1].children;
    t("", this.menuList);
    function t(beforeindex, arr) {
      if (beforeindex == "") {
        beforeindex = arr[0].index;
      } else {
        beforeindex = beforeindex + "-" + arr[0].index;
      }
      if (arr[0].children) {
        t(beforeindex, arr[0].children);
      } else {
        that.showIndex = beforeindex;
        that.showMenuIndex = beforeindex;
      }
    }
  },
  methods: {
    handleMenuSelect(index) {
      this.showIndex = index;
    },
  },
};
</script>

<style lang="less" scoped>
.data_display {
  height: 100%;
  width: 100%;
  .el-container {
    height: 100%;
    .el-main {
      padding: 0 0;
      margin-left: 20px;
      overflow: hidden;
    }
  }
}
</style>