disturb-frontend/src/layout/Aside/index.vue

<template>
  <el-aside class="MainAside">
    <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="transparent"
      text-color="#fff" active-text-color="#19c3eb" :default-active="$route.path" :collapse="isCollapse" router>
      <!-- <h3 style="
          color: #7ec699;
          text-shadow: 0 0 3px #7acaec;
          margin-left: 30%;
          height: 50px;
        ">
        任务菜单
      </h3> -->

      <!-- <dv-decoration-4 :reverse="true" style="width: 200px; height: 5px" /> -->
      <!-- <el-menu-item index="/home/taskManagement">
        <div style="padding-left: 25%; background-color: slategrey;">
          <span slot="title">协同任务管理</span>
        </div>
      </el-menu-item>
      <el-menu-item index="/home/situation">
        <div style="padding-left: 33%; background-color: slategrey;">
          <span slot="title">态势显示</span>
        </div>
      </el-menu-item> -->
      <!-- <el-menu-item index="/home/dataManagement">
        <div style="padding-left: 25%; background-color: slategrey;">
          <span slot="title">侦察数据管理</span>
        </div>

      </el-menu-item> -->
      <!-- <el-menu-item index="/home/dataFusion">
        <div style="padding-left: 25%; background-color: slategrey;">
          <span slot="title">数据融合管理</span>
        </div>
     
      </el-menu-item> -->
      <el-menu-item index="/home/networkManagement">
        <div style="padding-left: 25%; background-color: slategrey;">
          <span slot="title">链路状态管理</span>
        </div>
        <!-- <dv-decoration-11 style="width: 200px; height: 60px">链路状态查询</dv-decoration-11> -->
      </el-menu-item>
      <el-submenu index="5">
        <template slot="title">
          <div style="padding-left:24%; background-color: slategrey;">
            <span style="width: 200px; height: 80px;">传感器管理</span>
          </div>
          <!-- <dv-decoration-11 style="width: 200px; height: 60px"><i
              class="el-icon-location"></i>侦察传感器管理</dv-decoration-11> -->
        </template>
        <el-menu-item index="/home/scoutRadar">
          <dv-decoration-7 style="width:200px;height:30px;">雷达管理</dv-decoration-7>
        </el-menu-item>
        <el-menu-item index="/home/scoutESM">
          <dv-decoration-7 style="width:200px;height:30px;">电子攻击管理</dv-decoration-7>
        </el-menu-item>
        <!-- <el-menu-item index="/home/scoutImage">
          <dv-decoration-7 style="width:200px;height:30px;">成像传感器管理</dv-decoration-7>
        </el-menu-item> -->
      </el-submenu>
      <!-- <el-menu-item index="/home/intelESMProcess">
        <dv-decoration-11 style="width: 200px; height: 60px"
          >情报处理分发</dv-decoration-11
        >
      </el-menu-item> -->
    </el-menu>
  </el-aside>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "Aside",
  data() {
    return {
      timer: null,
      value: 0,
    };
  },
  computed: {
    ...mapGetters(["isCollapse", "platformID", "coopMsg"]),
  },
  mounted() {
    this.setTimer();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    setTimer() {
      if (this.timer == null) {
        this.timer = setInterval(() => {
          setTimeout(this.timerRefresh, 0);
        }, 2000);
      }
    },
    timerDestory() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    timerRefresh() {
      axios.get(`http://localhost:5100/api/platform/${this.platformID}/getIsReal`)
        .then(response => {
          console.log('response.data :>> ', response.data);
          this.$store.commit("app/setIsReal", response.data.s);
        })
    },
    getMessgaeNum() {
      let number = 0;
      for (let i = 0; i < this.coopMsg.length; i++) {
        if (this.coopMsg[i].answer == "暂无应答") number++;
      }
      if (this.value < number && this.platformID != 8015) {
        //this.$message("有新的协同任务消息！！！");
        this.$notify({
          title: "提示",
          message: "有新的协同任务消息，请尽快前往侦侦协同页面应答",
          duration: 0,
        });
      }
      this.value = number;
    },
  },
};
</script>
<style scoped>
.MainAside {
  width: unset !important;
  max-width: 300px;
  position: relative;
  background: transparent;
}

.MainAside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu-item:hover {
  color: #f46827 !important;
  background: none !important;
  text-decoration: underline;
}

.el-menu-item:hover i {
  color: #f46827 !important;
}

.el-menu-item {
  padding-left: 0px !important;
  height: 70px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/deep/ .el-submenu__title {
  padding-left: 0px !important;
  height: 70px;
}

/deep/ .el-submenu__title:hover {
  color: #f46827 !important;
  background: none !important;
  text-decoration: underline;
}

/deep/ .el-submenu__title:hover i {
  color: #f46827 !important;
  background: none !important;
  text-decoration: underline;
}

/deep/ .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

/deep/ .el-submenu>.el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-menu {
  border: none;
}

.el-menu--collapse {
  width: 0px;
}

.collapse {
  position: absolute;
  bottom: 40px;
  width: 100%;
}

/deep/.item .el-badge__content {
  top: 17px !important;
  right: 1px !important;
}
</style>