扬尘vue

zmc

2023-09-04 34257f504330191b1a698eb48b52217095db47fe

 src/components/layout/AppAside.vue

@@ -11,7 +11,9 @@
      optionClick: [
        ' 数据风险模型',
        '数据风险排名',
        '站点综合风险排名',
        '飞行巡检',
        '站点审核辅助',
        '历史数据管理',
        '数据接入管理',
        '业务报表',
@@ -22,11 +24,13 @@
  methods:{
    calMenuHeight() {
      const h1 = this.$refs.headerRef.$el.offsetHeight;
      return `calc(100vh - ${h1}px `;
      return `calc(100vh - ${h1}px - 8px`;
    },
  },
  mounted(){
    this.menuHeight = this.calMenuHeight();
    console.log('meta:',this.$route.matched);

  }
};
</script>
@@ -40,21 +44,17 @@
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
        :collapse="isCollapseAside"
      >
      <el-row ref="headerRef" class="header">
      <el-space>
        <el-link href="/hdata" class="logo" >
          <!-- <img src="@/assets/companylogo.png" alt="" /> -->
          <h1>在线监测数据质量评估与风险分析</h1>

        </el-link>
      </el-space>
  
    </el-row>

      <hr/>
        <el-scrollbar :height="menuHeight">

        <el-sub-menu index="1">
@@ -70,7 +70,12 @@
          <el-menu-item index="analysis" @click="selected = optionClick[1]">
            <el-icon><i-ep-Stopwatch /></el-icon>
            数据风险排名
          </el-menu-item><el-menu-item index="riskrank" @click="selected = optionClick[2]">
            <el-icon><i-ep-Stopwatch /></el-icon>
            站点综合风险排名
          </el-menu-item>


        </el-sub-menu>


@@ -79,14 +84,14 @@
            <el-icon><i-ep-Histogram /></el-icon>
            <span class="parent-title">线上巡检</span>
          </template>
          <el-menu-item index="edata" @click="selected = optionClick[2]">
          <el-menu-item index="edata" @click="selected = optionClick[3]">
            <el-icon><i-ep-Bell /></el-icon>
          飞行巡检
          </el-menu-item>

          <el-menu-item index="testdata" @click="selected = optionClick[2]">
          <el-menu-item index="testData" @click="selected = optionClick[4]">
            <el-icon><i-ep-Bell /></el-icon>
          异常测试
          站点审核辅助
          </el-menu-item>

        </el-sub-menu>
@@ -98,15 +103,15 @@
          </template>
 
         
            <el-menu-item index="hdata" @click="selected = optionClick[3]">
            <el-menu-item index="hdata" @click="selected = optionClick[4]">
            <el-icon><i-ep-Histogram /></el-icon>
          历史数据管理
          </el-menu-item>
          <el-menu-item index="management" @click="selected = optionClick[4]">
          <el-menu-item index="management" @click="selected = optionClick[5]">
            <el-icon><i-ep-Histogram /></el-icon>
          数据接入管理
          </el-menu-item>
          <el-menu-item index="report" @click="selected = optionClick[5]">
          <el-menu-item index="report" @click="selected = optionClick[6]">
            <el-icon><i-ep-Histogram /></el-icon>
          业务报表
          </el-menu-item>
@@ -119,7 +124,7 @@
                  <span class="parent-title">配置管理</span>
              </template>

              <el-menu-item index="setting" @click="selected = optionClick[6]">
              <el-menu-item index="setting" @click="selected = optionClick[7]">
                <el-icon><i-ep-Histogram /></el-icon>
                   数据接入配置
              </el-menu-item>
@@ -133,8 +138,6 @@
<style lang="scss" scoped>
.el-aside {
  background-color: #2876aa;
  

  height: 100vh;
  width: auto;
}
@@ -144,16 +147,17 @@

  width: 220px;
  border-right: none;

  &.el-menu--collapse {
    //侧边栏折叠时的样式
    width: 65px;

    & h1 {
      //折叠时隐藏h1文字
      display: none;
    }
    & span {
      display: none;
    }
    & hr {
      display: none;
    }
  }
@@ -167,10 +171,11 @@
  text-decoration: none;
  color: black;
  margin-left: 20px;
  img {
    width: 32px;
    height: 32px;
  }
  margin-right: 20px;
  // img {
  //   width: 32px;
  //   height: 32px;
  // }
}


@@ -184,4 +189,5 @@
  font-weight: bold;
  font-size: 18px;
}

</style>