问题修复

ZZJ

2021-11-09 ccee429d379e0108b7445f72ade8d97c110a6fb3

 src/pages/shuohuangMonitorAnalyze/components/leftNav.vue

@@ -1,18 +1,19 @@
<template>
  <div class="left-nav">
  <div class="left-nav" :class="{ short: isCollapse }">
    <img class="icon" src="/images/shuohuang/railroad.png" />
    <h1>
      <img class="icon" :src="`${publicPath}images/shuohuang/railroad.png`" style="height: 40px;" />
      <span v-show="!isCollapse" style="padding-left: 6px;">朔黄铁路机辆分公司</span>
      <span v-show="!isCollapse" style="padding-left: 6px"
        >乘务员安全行为识别系统</span
      >
    </h1>
    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <el-menu-item index="guideIndex">
      <el-menu-item index="guideIndex" v-show="isAdmin">
        <i class="iconfont iconshouye"></i>
        <span slot="title">首页</span>
      </el-menu-item>
@@ -20,15 +21,15 @@
        <i class="iconfont iconshipin2"></i>
        <span slot="title">视频分析检索</span>
      </el-menu-item>
      <el-menu-item index="taskManage">
      <el-menu-item index="taskManage" v-if="isAdmin">
        <i class="iconfont iconrenwu1"></i>
        <span slot="title">任务管理</span>
      </el-menu-item>
      <el-menu-item index="memberManage">
      <el-menu-item index="memberManage" v-if="isAdmin">
        <i class="iconfont iconrenyuanguanli"></i>
        <span slot="title">人员管理</span>
      </el-menu-item>
      <el-menu-item index="configManage">
      <el-menu-item index="configManage" v-if="isAdmin">
        <i class="iconfont iconicon-test4"></i>
        <span slot="title">配置管理</span>
      </el-menu-item>
@@ -40,91 +41,142 @@
        </template>
        <el-menu-item index="transferMemo">视频转储记录</el-menu-item>
        <el-menu-item index="transferDeviceManage">转储设备管理</el-menu-item>
        <el-menu-item index="lkgManage">LKJ数据管理</el-menu-item>
      </el-submenu>
      <el-submenu index="7">
      <el-submenu index="7" v-if="isAdmin">
        <template slot="title">
          <i class="iconfont iconkeshihua"></i>
          <span slot="title">可视化大屏</span>
        </template>
        <el-menu-item index="7-1">任务大屏</el-menu-item>
        <el-menu-item index="7-2">隐患大屏</el-menu-item>
        <el-menu-item index="taskscreen">任务大屏</el-menu-item>
        <el-menu-item index="hiddendangerscreen">隐患大屏</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>

//import railroadImg from '/images/shuohuang/railroad.png';
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: true
      default: true,
    },
    menuChange: {
      type: Function
    }
      type: Function,
    },
  },
  data () {
  computed: {
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "admin" || loginName === "basic";
      }
      return false;
    },
  },
  data() {
    return {
      publicPath: process.env.BASE_URL,
      activeIndex: 'guideIndex'
    }
      activeIndex: "guideIndex",
    };
  },
  mounted(){
    console.log('mounted')
    window.onbeforeunload = () => {
      debugger
      console.log('beforeunload')
      sessionStorage.setItem('leftNavAct', this.activeIndex);
    }
    if(!!sessionStorage.getItem('leftNavAct')){
      this.activeIndex = sessionStorage.getItem('leftNavAct');
      this.$emit('menuChange',this.activeIndex);
    }
  mounted() {
    // if (this.isAdmin) {
    //   if (!!sessionStorage.getItem('leftNavAct')) {
    //     console.log("leftNavAct")
    //     this.activeIndex = sessionStorage.getItem('leftNavAct');
    //   }
    // }
    this.activeIndex = this.isAdmin ? "guideIndex" : "searchForVideoAnalyze";

    this.$emit("menuChange", this.activeIndex);
  },
  methods: {
    handleSelect(index,indePath){
    handleSelect(index, indePath) {
      this.activeIndex = index;
      this.$emit('menuChange',index);
      sessionStorage.setItem("leftNavAct", this.activeIndex);
      this.$emit("menuChange", index);
    },
    handleOpen () {

    },
    handleClose () {

    }
  }
}
    handleOpen() {},
    handleClose() {},
  },
};
</script>

<style lang="scss">
.left-nav {
  background: #fff;
  background-image: url(/images/shuohuang/背景.png);
  height: 100vh;
  width: 250px;
  img {
    margin-top: 80px;
    margin-bottom: 10px;
    height: 96px;
    width: 96px;
  }
  h1 {
    display: flex;
    align-items: center;
    height: 65px;
    padding: 0 20px;
    border-bottom: 1px solid #eee;
    color: rgb(0, 150, 250);
    border: none;
    span {
      color: #fff;
    }
  }
  .iconfont{
  .iconfont {
    padding-right: 10px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse){
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    border: none;
    padding-right: 0;
    padding-left: 50px;
    width: 250px;
    background: none;
  }
  .el-menu.el-menu--inline {
    background: none;
  }
  .el-menu-item,
  .el-submenu__title {
    text-align: left;
    font-weight: 700;
    color: #fff;

    span {
      color: #fff;
    }
    i {
      color: #fff;
    }
    &:hover {
      color: #0b41a7;

      span {
        color: #0b41a7;
      }
      i {
        color: #0b41a7;
      }
    }
    border-radius: 10px 0 0 10px;
  }
  .el-menu-item.is-active{
    color:#409EFF;
  .el-menu-item.is-active {
    background-color: #ecf0fc;
    color: #0b41a7;

    span {
      color: #0b41a7;
    }
  }
  
}

.short {
  width: 0;
  overflow: hidden;
}
</style>