Sis_Search/src/App.vue

<template>
  <div id="app" v-loading="$store.state.loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
    <el-container>
      <el-aside width="230px">
        <el-menu router :unique-opened="true" :default-active="defaultActive" class="el-menu-vertical-demo"
          background-color="#545c64" text-color="#fff" active-text-color="#1890ff">
          <el-submenu :index="'menu-' + pIndex" v-for="(pItem, pIndex) in menus" :key="pIndex">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{pItem.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :route="{ path: '/search', query: { tableid: cItem.tableid } }" :index="'/search?tableid=' + cItem.tableid"
                v-for="cItem in pItem.children" :key="cItem.tableid">{{cItem.tablename}}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-submenu index="menu-fjcsdb">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>参数对比</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :route="{ path: '/lineChart' }" index="/lineChart">风机参数对比</el-menu-item>
            </el-menu-item-group>
          </el-submenu> -->
        </el-menu>
      </el-aside>
      <el-container>
        <!-- <el-header>Header</el-header> -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      defaultActive: "/search",
      menus: []
    }
  },
  mounted () {
    let that = this;
    that.$nextTick(() => {
      // 获取左侧菜单数据
      that.API.get("datacenter/tables").then((res) => {
        let JSFW = {
          name: '计算服务',
          children: []
        };
        let MHS_FDC = {
          name: "麻黄山",
          children: []
        };
        let NSS_FDC = {
          name: "牛首山",
          children: []
        };
        let QS_FDC = {
          name: "青山",
          children: []
        };
        let SBQ_FDC = {
          name: "石板泉",
          children: []
        };
        let XS_FDC = {
          name: "香山",
          children: []
        };
        let DWK_GDC = {
          name: "大武口",
          children: []
        };
        let PL_GDC = {
          name: "平罗",
          children: []
        };
        let XH_GDC = {
          name: "宣和",
          children: []
        };
        let MCH_GDC = {
          name: "马场湖",
          children: []
        };
        res.data.forEach(ele => {
          if (ele.windpowerstationid === 'MHS_FDC') {
            MHS_FDC.children.push(ele);
          } else if (ele.windpowerstationid === 'NSS_FDC') {
            NSS_FDC.children.push(ele);
          } else if (ele.windpowerstationid === 'QS_FDC') {
            QS_FDC.children.push(ele);
          } else if (ele.windpowerstationid === 'SBQ_FDC') {
            SBQ_FDC.children.push(ele);
          } else if (ele.windpowerstationid === 'XS_FDC') {
            XS_FDC.children.push(ele);
          } else if (ele.windpowerstationid === 'DWK_GDC') {
            DWK_GDC.children.push(ele);
          } else if (ele.windpowerstationid === 'PL_GDC') {
            PL_GDC.children.push(ele);
          } else if (ele.windpowerstationid === 'XH_GDC') {
            XH_GDC.children.push(ele);
          } else if (ele.windpowerstationid === 'MCH_GDC') {
            MCH_GDC.children.push(ele);
          } else {
            JSFW.children.push(ele);
          }
        });
        that.menus.push(JSFW, MHS_FDC, NSS_FDC, QS_FDC, SBQ_FDC, XS_FDC, DWK_GDC, PL_GDC, XH_GDC, MCH_GDC);
        if (res.data && res.data.length) {
          that.defaultActive = '/search?tableid=JSFW'
        }
      });
    });
  },

}
</script>

<style lang="scss">
@import '@assets/css/base.scss';
</style>
<style lang="scss" scoped>
#app {
  .el-container {
    height: 100%;
  }

  .el-aside {
    background: rgb(84, 92, 100);
  }
}
</style>