highwaysaas/ruoyi-ui/src/components/BoardTopNav/index.vue

<template>
  <div>
    <div class="title">智慧物联监控平台</div>
    <div>
      <div v-if="isIndex" :class="`menu ${nowMenu==='1'? 'menuClick' :''}`" style="left: 2%"
           @click="toLink('index','1')">
                <span>
                    监控主页
                </span>
      </div>
      <div :class="`menu ${nowMenu==='2'? 'menuClick' :''}`" style="left: 9%">
        <el-dropdown trigger="click" @command="dropdownLink">
                    <span class="el-dropdown-link">
                        {{ name }} <i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
          <el-dropdown-menu slot="dropdown">
            <div class="topNavScroll" style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
              <el-dropdown-item v-for="i in selectSecnesList" :key="i.sceneId"
                                :command="{router:i.router,name:i.sceneName,sceneId:i.sceneId}">
                <span style="color: #f8fefd">
                  {{
                    i.sceneName
                  }}
                </span>
              </el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div :class="`menu ${nowMenu==='3'? 'menuClick' :''}`" style="left: 16%" @click="toLink('equipment','3')">
                <span>
                    设备监测
                </span>
      </div>
      <div :class="`menu ${nowMenu==='4'? 'menuClick' :''}`" style="left: 23%"
           @click="toLink('equipmentMonitoring','4')">
                <span>
                    传感器汇总
                </span>
      </div>
    </div>

    <div class="right">
                <span>
                    管 理
                </span>
    </div>

    <div class="rightImg" @click="toIndex">
    </div>
  </div>
</template>

<script>
import {
  selectSecnes
} from '@/api/board/nav'

export default {
  name: 'BoardTopNav',
  data() {
    return {
      selectSecnesList: [],
      name: '智慧场景',
      isIndex: true,
      sceneId: this.$store.getters.sceneId,
      nowMenu: '1'
    }
  },
  // props: {
  //   nowMenu: {
  //     type: String,
  //     default: '1'
  //   },
  // },

  async mounted() {
    if (!this.$store.getters.sceneId) {
      this.$router.replace({path: "/board/index"})
    }
    if (this.$route.name === 'smartScene' || this.$route.name === 'GPS' || this.$route.name === 'index' || this.$store.getters.sceneId) {
    } else {
      if (this.$store.state.user.permissions.includes('business:monitor:index') || this.$store.state.user.permissions.includes('*:*:*')) {
        await this.$router.replace({path: "/board/index"});
      } else {
        await this.$router.replace({path: "/board/smartScene"});
        this.$router.push({path: '/board/smartScene'})
      }
    }
    await this.setSelectSecnes()
    if (this.$route.name === 'smartScene' || this.$route.name === 'GPS') {
      if (this.$route.query?.name) {
        this.name = this.$route.query?.name
      } else {
        let routerData = this.selectSecnesList.find(e => e.sceneId === this.sceneId)
        await this.$router.push({
          path: "/board/" + (routerData.router || 'smartScene'),
          query: {name: routerData.sceneName}
        });
      }
    }
    if (this.$store.state.user.permissions.includes('business:monitor:index') || this.$store.state.user.permissions.includes('*:*:*')) {
      this.isIndex = true
    } else {
      this.isIndex = false
    }

  },
  methods: {
    async setSelectSecnes() {
      const {data} = await selectSecnes()
      this.selectSecnesList = data
      if (!this.$store.getters.sceneId) {
        this.sceneId = data.find(e => e.defaultFlag === '1').sceneId
        this.name = data.find(e => e.defaultFlag === '1').sceneName
      }
      if (this.$route.query.name) {
        this.sceneId = data.find(e => e.sceneName === this.$route.query.name).sceneId
        this.name = data.find(e => e.sceneName === this.$route.query.name).sceneName
      }
      if (this.name === '智慧场景' && this.$store.getters.sceneId) {
        this.name = data.find(e => e.sceneId === this.$store.getters.sceneId).sceneName
      }
      await this.$store.dispatch('app/setSceneId', this.sceneId)
    },
    toLink(e, nowMenu) {
      if (this.$store.getters.sceneId) {
        this.nowMenu = nowMenu
        this.$router.replace({path: "/board/" + e});
      }
    },
    async dropdownLink(e,) {
      this.nowMenu = '2'
      await this.$store.dispatch('app/setSceneId', e.sceneId)
      this.name = e.name
      await this.$router.replace({path: "/board/" + (e.router || 'smartScene'), query: {name: e.name}});
    },
    toIndex() {
      this.$router.replace({path: "/index"});
    }
  }
};
</script>
<style lang="less" scoped>

.menu {
  background-image: url("~@/assets/board/common/subheadClick1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #d4d4d4;
  text-align: center;
}

.menu .el-dropdown {
  font-size: 0.8vw;
  color: #d4d4d4;
}

.menuClick {
  background-image: url("~@/assets/board/common/subheadClick.png");
  color: #f3f3f3;
}

.title {
  position: absolute;
  top: 3%;
  left: 50%;
  font-size: 2vw;
  letter-spacing: 12px;
  transform: translate(-50%, -50%);
  color: #f6f6f6;
}

.rightImg {
  transform: rotateX(180deg);
  background-image: url('~@/assets/board/common/subheadClick1.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  left: 71%;
}

.right {
  position: absolute;
  width: 8vw;
  height: 1.66vw;
  top: 3.8%;
  left: 71%;
  line-height: 1.66vw;
  font-size: 0.8vw;
  color: #d4d4d4;
  text-align: center;
}

.el-dropdown-menu {
  padding: 0 !important;
  border: none !important;
}
.topNavScroll::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
.el-dropdown-menu__item:not(.is-disabled):hover span {
  color: #053563 !important;
}
</style>