analysis.vue 3.84 KB
<template>
  <div class="analysis-wrapper">
    <el-aside width="200px" height="100%">
      <el-menu class="aside-menu-wrapper" :default-active="activeIndex" background-color="#fff" text-color="#515a6e"
        @select="menuSelect" unique-opened>
        <el-submenu :index="item.path" v-for="(item,index) in analysisMenu" :key="index" style="text-align:left"
          v-if="permissControl(item.path) && hasChildPermission(item.children)">
          <template slot="title">
            <i
              :class="['custom-icon', 'font_family', `icon-${item.icon}_icon`, `${item.icon}-icon`, `icon-${item.icon}`]"></i>
            <!-- <span>{{i18n(item.name)}}</span> -->
            <span>{{langFormat(item.label,item.nodeTw,item.nodeEn)}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item :index="child.path" v-for="(child,index) in item.children" :key="index"
              v-if="permissControl(child.path)">
              <!-- <span slot="title">{{i18n(child.name)}}</span> -->
              <span slot="title">{{langFormat(child.label,child.nodeTw,child.nodeEn)}}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <div class="analysis-page">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeIndex: '',
        moreOptVisible: false,
        analysisMenu: [],
        asisChidren: [],
        menuArr: [],
      }
    },
    components: {},
    methods: {
      i18n(name) {
        let languageLable = 'asis.' + name
        return this.$t(languageLable)
      },
      permissControl(path) {
        if (window._vionConfig.allMenu) {
          return true
        }
        if (this.menuArr.includes(path)) {
          return true
        } else {
          return false
        }
      },
      hasChildPermission(children) {
        if (window._vionConfig.allMenu) {
          return true
        }
        if (!children||!children.length) {
          return false
        }
        let hasPermission = children.map(item => {
          return this.menuArr.includes(item.path)
        }).filter(Boolean)
        return hasPermission.length > 0
      },
      menuSelect(key, path) {
         this.navigateTo(this,'analysis',key);
        // if ((window.location.href.split('/')).indexOf(key) === -1) {
        //   this.$router.push('/analysis/' + key);
        // }
      },
      refreshSelect(path) {
        this.$router.push('/analysis/' + path);
      },
      refresh() {
        let name = this.$router.history.current.name;
        let path = this.$router.history.current.path;
        let newPath = path.split('/')[2];
        this.activeIndex = newPath
        this.refreshSelect(newPath)
      },
    },
    created() {
      if (!window._vionConfig.allMenu) {
        this.menuArr = JSON.parse(window.localStorage.getItem('menuName'))
      }
    },
    mounted() {
      let firstPath;
      let name;
      if (window._vionConfig.allMenu) {
        firstPath = 'baseasis'
      } else {
        firstPath = this.menuArr[this.menuArr.indexOf('analysis') + 2]
      }
      this.analysisMenu = []
      let menu  = JSON.parse(window.localStorage.getItem('menu'))
      menu.children.forEach((item,index)=>{
        if(item.path=="analysis"){
          this.analysisMenu = item.children
        }
      })
      name = this.$router.history.current.name;
      if (!name) {
        this.activeIndex = firstPath;
        this.menuSelect(firstPath, [firstPath]);
      } else {
        this.refresh()
      }
    }
  }
</script>

<style>
  .analysis-page {
    width: 100%;
    height: 100%;
    overflow: auto;
    min-width: 1000px;
    background-color: #fff;
  }

  .test-opt-time .time-opt .el-input__inner {
    height: 100% !important;
  }

  .weatherasis-icon {
    font-size: 12px !important;
  }
</style>