1.修复指标排名界面的排序换页后重置的问题

riku

2023-11-24 dd5fbe2e6cacffa0ff67f0f68c262d14ddfce3cc

 src/components/layout/AppAside.vue

@@ -1,24 +1,15 @@
<script>
import { isCollapse } from './isCollapse';
import { selectedName } from './selectName';

export default {
  data() {
    return {
      menuHeight: '600px',
      isCollapseAside: isCollapse,
      selected: selectedName,
      optionClick: [
        ' 数据风险模型',
        '数据风险排名',
        '站点综合风险排名',
        '飞行巡检',
        '站点审核辅助',
        '历史数据管理',
        '数据接入管理',
        '业务报表',
        '数据接入配置',
      ]
      // 图标颜色切换
      menu:[ { avalue:true},{ avalue:true},{ avalue:true},{ avalue:true},{ avalue:true},{ avalue:true},{ avalue:true}]
       
      
    };
  },
  methods:{
@@ -26,18 +17,26 @@
      const h1 = this.$refs.headerRef.$el.offsetHeight;
      return `calc(100vh - ${h1}px - 8px`;
    },
    changeIcon(i){
      this.menu[i].avalue = !this.menu[i].avalue

      // 其他的置为默认状态
      for(let j = 0;j<this.menu.length;j++){
        if( j!=i){
          // 开始时显示的是未选中状态
          this.menu[j].avalue = true
        }
      }
    }
  },
  mounted(){
    this.menuHeight = this.calMenuHeight();
    console.log('meta:',this.$route.matched);

  }
};
</script>

<template>
  <el-aside>
    
      <el-menu
        active-text-color="#F7BA1E"
        background-color="#2876aa"
@@ -49,48 +48,73 @@
      >
      <el-row ref="headerRef" class="header">
        <el-link href="/hdata" class="logo" >
          <h1>在线监测数据质量评估与风险分析</h1>
          <div class="title-text">
          <div  class="title-text-one">数据质量评估</div>
          <div  class="title-text-one">与风险分析系统</div>
        </div>
        </el-link>
  
    </el-row>
       </el-row>

      <hr/>
      <div class="horizontal-line"></div>
        <el-scrollbar :height="menuHeight">

        <el-sub-menu index="1">
          <template #title>
            <el-icon><i-ep-Monitor /></el-icon>
            <img src="@/assets/risk.png" height="23">
            <span class="parent-title">风险评估</span>
          </template>

          <el-menu-item index="avgDay" @click="selected = optionClick[0]">
            <el-icon><i-ep-Stopwatch /></el-icon>
          <!-- 未选中 -->
          <el-menu-item index="/avgDay" v-show="menu[0].avalue" @click="changeIcon(0)" >
            <img src="@/assets/generalModel.png" height="23">
            数据风险模型
          </el-menu-item>
          <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 index="/avgDay"  v-show="!menu[0].avalue" @click="changeIcon(0)">
            <img src="@/assets/generalModel2.png" height="23">
            数据风险模型
          </el-menu-item>

          <el-menu-item index="/riskrank"  v-show="menu[2].avalue" @click="changeIcon(2)">
            <img src="@/assets/generalModel.png" height="23">
            数据风险排名
          </el-menu-item>
          <el-menu-item index="/riskrank"  v-show="!menu[2].avalue" @click="changeIcon(2)">
            <img src="@/assets/generalModel2.png" height="23">
            数据风险排名
          </el-menu-item>

          <el-menu-item index="/analysis" v-show="menu[1].avalue" @click="changeIcon(1)">
            <img src="@/assets/generalModel.png" height="23">
            数据指标排名
          </el-menu-item>
          <el-menu-item index="/analysis" v-show="!menu[1].avalue" @click="changeIcon(1)">
            <img src="@/assets/generalModel2.png" height="23">
            数据指标排名
          </el-menu-item>
        </el-sub-menu>


        <el-sub-menu index="2">
          <template #title>
            <el-icon><i-ep-Histogram /></el-icon>
            <img src="@/assets/onlineInspection.png" height="23">
            <span class="parent-title">线上巡检</span>
          </template>
          <el-menu-item index="edata" @click="selected = optionClick[3]">
            <el-icon><i-ep-Bell /></el-icon>
          <el-menu-item index="/edata" v-show="menu[3].avalue" @click="changeIcon(3)">
            <img src="@/assets/generalModel.png" height="23">
          飞行巡检
          </el-menu-item>
          <el-menu-item index="/edata" v-show="!menu[3].avalue" @click="changeIcon(32)">
            <img src="@/assets/generalModel2.png" height="23">
          飞行巡检
          </el-menu-item>

          <el-menu-item index="testData" @click="selected = optionClick[4]">
            <el-icon><i-ep-Bell /></el-icon>

          <el-menu-item index="/testData" v-show="menu[4].avalue" @click="changeIcon(4)">
            <img src="@/assets/generalModel.png" height="23">
          站点审核辅助
          </el-menu-item>
          <el-menu-item index="/testData" v-show="!menu[4].avalue" @click="changeIcon(4)">
            <img src="@/assets/generalModel2.png" height="23">
          站点审核辅助
          </el-menu-item>

@@ -98,39 +122,51 @@

        <el-sub-menu index="3">
          <template #title>
            <el-icon><i-ep-DataLine /></el-icon>
            <img src="@/assets/dataManagement.png" height="23">
            <span class="parent-title">数据管理</span>
          </template>
 
         
            <el-menu-item index="hdata" @click="selected = optionClick[4]">
            <el-icon><i-ep-Histogram /></el-icon>
            <el-menu-item index="/hdata" v-show="menu[5].avalue" @click="changeIcon(5)">
            <img src="@/assets/generalModel.png" height="23">
          历史数据管理
          </el-menu-item>
          <el-menu-item index="management" @click="selected = optionClick[5]">
          <el-menu-item index="/hdata" v-show="!menu[5].avalue" @click="changeIcon(5)" >
            <img src="@/assets/generalModel2.png" height="23">
          历史数据管理
          </el-menu-item>

         <!-- <el-menu-item index="/management" >
            <el-icon><i-ep-Histogram /></el-icon>
          数据接入管理
          </el-menu-item>
          <el-menu-item index="report" @click="selected = optionClick[6]">
          </el-menu-item> -->

          
          <!-- <el-menu-item index="report" >
            <el-icon><i-ep-Histogram /></el-icon>
          业务报表
          </el-menu-item>
          </el-menu-item> -->

          </el-sub-menu>

          <el-sub-menu index="4">
          <!-- <el-sub-menu index="4">
              <template #title>
                <el-icon><i-ep-DataLine /></el-icon>
                <img src="@/assets/configurationManagement.png" height="23">
                  <span class="parent-title">配置管理</span>
              </template>

              <el-menu-item index="setting" @click="selected = optionClick[7]">
                <el-icon><i-ep-Histogram /></el-icon>
              <el-menu-item index="setting" v-show="menu[6].avalue" @click="changeIcon(6)">
                <img src="@/assets/generalModel.png" height="23">
                   数据接入配置
              </el-menu-item>
          </el-sub-menu>
              <el-menu-item index="setting" v-show="!menu[6].avalue" @click="changeIcon(6)">
                <img src="@/assets/generalModel2.png" height="23">
                   数据接入配置
              </el-menu-item>
              
          </el-sub-menu> -->
          
    </el-scrollbar>

      </el-menu>
  </el-aside>
</template>
@@ -148,10 +184,10 @@
  width: 220px;
  border-right: none;
  &.el-menu--collapse {
    //侧边栏折叠时的样式
    /* //侧边栏折叠时的样式 */
    width: 65px;
    & h1 {
      //折叠时隐藏h1文字
    & .title-text {
      /* //折叠时隐藏h1文字 */
      display: none;
    }
    & span {
@@ -170,12 +206,9 @@
  height: 60px;
  text-decoration: none;
  color: black;
  margin-left: 20px;
  margin-left: 40px;
  margin-right: 20px;
  // img {
  //   width: 32px;
  //   height: 32px;
  // }
  font-size:16px
}


@@ -187,7 +220,36 @@
}
.parent-title {
  font-weight: bold;
  font-size: 18px;
  font-size: 16px;
}

img {
  margin-right: 6px;
}
.el-menu-item {
  font-size: 16px;
}
.hr {
  color: rgb(0,0,0);
}
.title-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.horizontal-line {
  position: relative;
  height: 1px;
}
.horizontal-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: rgb(221, 217, 217,0.2);
  /* // width: 180px; */
}
</style>