:预警研判

“dzb”

2022-11-02 12fd8f6b04b26ef02bccdf5fd0bcefb59541c7f6

 src/views/layout/components/Menu/index.vue

@@ -1,19 +1,63 @@
<template>
  <div class="Menu">
    <!-- 菜单栏 -->
    <el-aside width="200px" class="menu">
  <div>
    <!-- 侧边导航栏 -->
    <el-aside width="200px">
      <h2 class="siderbar-title">遂昌执法平台</h2>
      <el-scrollbar class="MenuScroll">
      <el-scrollbar>
        <!-- 路由 -->
        <el-menu class="el-menu-vertical">
          <el-menu-item v-for="item in menu" :key="item.name" class="firstMenu" @click="Jump(item.index)">
            <template slot="title" class="firstSpan">
        <el-menu router class="el-menu-vertical" :default-active="$route.path">
          <el-submenu
            :index="menu.url ? menu.url : menu.id.toString()"
            v-for="menu in menuList"
            :key="menu.id"
            class="firstMenu"
          >
            <template slot="title">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon :icon-class="item.icon"></svg-icon>
                <svg-icon :icon-class="menu.icon"></svg-icon>
              </span>
              <span class="fisrtSpan">{{item.name}}</span>
              <span class="fisrtSpan">{{ menu.title }}</span>
            </template>
          </el-menu-item>
            <template v-if="menu.children.length > 0">
              <template v-for="secondMenu in menu.children">
                <el-submenu
                  :key="secondMenu.id"
                  v-if="secondMenu.children.length > 0"
                  :index="
                    secondMenu.url ? secondMenu.url : secondMenu.id.toString()
                  "
                  class="secondMenu"
                >
                  <template slot="title">
                    <span class="secondSpan">{{ secondMenu.title }}</span>
                  </template>
                  <el-menu-item
                    v-for="thirdMenu in secondMenu.children"
                    :key="thirdMenu.id"
                    :index="`${thirdMenu.id}`"
                    :route="{ name: thirdMenu.url }"
                    >{{ thirdMenu.title }}</el-menu-item
                  >
                </el-submenu>

                <el-menu-item
                  v-else
                  :key="secondMenu.id"
                  :index="`${secondMenu.id}`"
                  :route="{ name: secondMenu.url }"
                  >{{ secondMenu.title }}</el-menu-item
                >
              </template>
            </template>

            <el-menu-item
              v-else
              :key="menu.id"
              :index="`${menu.id}`"
              :route="{ name: menu.url }"
              >{{ menu.title }}</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
@@ -24,36 +68,37 @@
export default {
  data() {
    return {
      menu: [
        {
          name: "系统设置", icon: "system", index: "/home/system", 
        },
        {
          name: "运营管理", icon: "operate", index: "/home/operate",
        },
        {
          name: "视频巡查", icon: "video", index: "/home/video",
        },
        {
          name: "油烟信息查询", icon: "intelligence", index: "/home/lampblack",
        },
        {
          name: "执法管理", icon: "intelligence", index: "/home/law",
        },
        {
          name: "智能巡查", icon: "intelligence", index: "/home/intellect",
        },
        {
          name: "平台基本信息", icon: "intelligence", index: "/home/info",
        }
      ],
    }
      menuList: [],
    };
  },
  methods:{
    Jump(url){
      this.$router.push(url);
    }
  }
  created() {
    // this.getMenuList();
    this.loadMenu();
  },
  methods: {
    loadMenu() {
      const info = JSON.parse(sessionStorage.getItem("user"));
      var timer;
      if (info && info.menus) {
        clearTimeout(timer);
        this.menuList = info.menus;
      } else {
        timer = setInterval(() => {
          this.loadMenu();
        }, 1000);
      }
    },
    // 获取菜单列表
    getMenuList() {
      let arr;
      this.$axios({
        method: "get",
        url: "sccg/system/portal/menu/search_myself",
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

@@ -61,12 +106,14 @@
.icon-padding {
  padding-right: 10px;
}
.menu {

.el-aside {
  background: #07162e;
  color: #e9eef3;
  text-align: center;
  box-sizing: border-box;
  position: relative;

  //    固定标题
  .siderbar-title {
    position: fixed;
@@ -78,35 +125,42 @@
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #08162f;
  }

  .MenuScroll {
  .el-scrollbar {
    height: calc(100vh - 66px);
    box-sizing: border-box;
    margin-top: 66px;
    box-sizing: border-box;

    .el-menu {
      background: linear-gradient(#07162e, #0f2b56);
      border: 0;

      .firstMenu {
        background:  #07162e;
        background: #07162e;
        text-align: left;
        &:hover .fisrtSpan {
          color: #fff;

        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }

        &:hover .fisrtSpan {
          color: #22d3eb;
        }

        span,
        span {
          color: #e9eef3;
        }

        .el-menu-item {
          color: #c3c3c4;
          color: #e9eef3;
          background-color: #07162e;
          &:hover {
            color: #fff;
            background-color: #0c2c4c;
          }
        }

        .el-menu-item:hover {
          background-color: #092c4a;
          color: #22d3eb;
        }

        .is-active {
@@ -115,8 +169,28 @@
        }
      }

      .secondMenu {
        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }

        &:hover .secondSpan {
          color: #22d3eb;
        }
      }

      .thirdMenu {
        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }

        &:hover .thirdSpan {
          color: #22d3eb;
        }
      }

      .is-active {
        background-color: #07162e;
        background-color: #092c4a;
      }
    }