ojk_dtb_manage_ui/src/components/home/DataManage.vue

<template>
  <div id="dataManage">
    <br/>
    <div class="left">
      <el-menu default-active="1-1" class="dataManage-menu" @select="handleMenuSelect">
        <el-sub-menu index="1">
          <template #title>
            <el-icon>
              <IconPark-table-file/>
            </el-icon>
            <span>数据管理</span>
          </template>
          <el-menu-item index="1-1">
            <el-icon>
              <IconPark-multi-triangular/>
            </el-icon>
            <span>二维数据</span>
          </el-menu-item>
          <el-menu-item index="1-2">
            <el-icon>
              <IconPark-sphere/>
            </el-icon>
            <span>三维数据</span>
          </el-menu-item>
          <el-menu-item index="1-3">
            <el-icon>
              <IconPark-internal-data/>
            </el-icon>
            <span>业务数据</span>
          </el-menu-item>
          <el-menu-item index="1-4">
            <el-icon>
              <IconPark-graphic-stitching/>
            </el-icon>
            <span>模型数据</span>
          </el-menu-item>
          <el-menu-item index="1-5">
            <el-icon :color="'#303133'">
              <IconPark-data/>
            </el-icon>
            <span>元数据</span>
          </el-menu-item>
          <el-menu-item index="1-6">
            <el-icon>
              <IconPark-connection-point/>
            </el-icon>
            <span>物联感知数据</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon>
            <IconPark-external-transmission/>
          </el-icon>
          <span>数据导入</span>
        </el-menu-item>
        <!--<el-menu-item index="3">-->
        <!--  <el-icon>-->
        <!--    <IconPark-refresh/>-->
        <!--  </el-icon>-->
        <!--  <span>接口同步</span>-->
        <!--</el-menu-item>-->
      </el-menu>
    </div>
    <div class="content">
      <TwoDimensionalData  v-if="pageShow['DTB-DATAMANAGE-TWOD'] && activeName==='1-1'"/>
      <ThreeDimensionalData  v-if="pageShow['DTB-DATAMANAGE-THREED'] && activeName==='1-2'"/>
      <BusinessData  v-if="pageShow['DTB-DATAMANAGE-BASEDATA'] && activeName==='1-3'"/>
      <ModelData  v-if="pageShow['DTB-DATAMANAGE-MODEL'] && activeName==='1-4'"/>
      <MetaData  v-if="pageShow['DTB-DATAMANAGE-METADATA'] && activeName==='1-5'"/>
      <IotData  v-if="pageShow['DTB-DATAMANAGE-IOTDATA'] && activeName==='1-6'"/>

      <ImportData v-if="auth && activeName==='2'" />
      <!--<SyncInterface v-if="activeName==='3'"/>-->
    </div>
  </div>
</template>

<script>
import {defineAsyncComponent} from "vue";

export default {
  data() {
    return {
      activeName: '1-1',
      pageShow: {},
      tableHeight: 200,
    }
  },
  components: {
    TwoDimensionalData: defineAsyncComponent(() => import("@/components/dataManage/dataShow/TwoDimensionalData.vue")),
    ThreeDimensionalData: defineAsyncComponent(() => import("@/components/dataManage/dataShow/ThreeDimensionalData.vue")),
    BusinessData: defineAsyncComponent(() => import("@/components/dataManage/dataShow/BusinessData.vue")),
    ModelData: defineAsyncComponent(() => import("@/components/dataManage/dataShow/ModelData.vue")),
    MetaData: defineAsyncComponent(() => import("@/components/dataManage/dataShow/MetaData.vue")),
    IotData: defineAsyncComponent(() => import("@/components/dataManage/dataShow/IotData.vue")),

    ImportData: defineAsyncComponent(() => import("@/components/dataManage/ImportData.vue")),
    // SyncInterface: defineAsyncComponent(() => import("@/components/dataManage/SyncInterface.vue")),
  },
  created() {
    let userInfo = this.$store.state.userInfo;
    if (userInfo.userLevel < 2
        || (userInfo.userLevel === 2) && userInfo.serviceId.split(',').indexOf(this.$constant.serviceId) > -1) {
      this.auth = true;
    }
  },
  mounted() {
    let app = this;
    this.pageShow = this.$store.state.pageShow;
  },
  methods: {
    handleMenuSelect(val) {
      this.activeName = '-1';
      setTimeout(() => {
        this.activeName = val;
      }, 10);

    }
  }
}
</script>

<style scoped>
#dataManage {
  width: 100%;
  height: 100%;
}

#dataManage .left {
  width: 16%;
  display: inline-block;
}

#dataManage .content {
  width: 80%;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-left: 2%;
}
</style>

<style>
#dataManage .el-menu-item,.el-sub-menu__title {
  font-size: 17px !important;
  font-weight: 600;
  color: #373737;
}
.data {
  display: inline-block;
  width: 83%;
  vertical-align: top;
}
.data .operation {
  margin-top: 10px;
  margin-left: 10px;
  display: block;
}
</style>