index.vue

<template>
  <div class="home">
    <el-container class="home-box">
      <el-header class="headers">
        <img class="logoImg" src="../../assets/img/home/logo.png" alt="" />
        <span :class="{'el-icon-s-fold':isopen,'el-icon-s-unfold':!isopen,'menu-switch':true}" @click="openmenu"></span>
        <div class="headRight">
          <span>{{ curdate }}</span>
          <img src="../../assets/img/home/user.png" alt="" />
          <span class="exit" @click="logout()">退出<i class="el-icon-arrow-down"></i></span>
        </div>
      </el-header>
      <el-container style="min-height:calc(100vh - 64px);">
        <menus @setTopBar="setTopBar" ref="leftmenu"></menus>
        <el-main>
          <div class="nav">
            <div class="nav-tag-box">
              <el-tag
                v-for="(tag, index) in topbarArr"
                :key="index"
                closable
                @close="closetag(tag, index)"
                @click="toPath(tag)"
              >
                <!-- <i :class="tag.icon"></i> -->
                {{ tag.name }}
              </el-tag>
            </div>
          </div>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import types from "../../store/types.js";
// import HelloWorld from "@/components/HelloWorld.vue";
import menus from "./menu";
export default {
  name: "x",
  data() {
    return {
      curdate: "",
      isopen:true,
      conHeight: 0,
      menuwidth: "15vw",
      full: false,
      topbarArr: []
    };
  },
  methods: {
    setTopBar(data) {
      if (this.topbarArr.length < 1) {
        this.topbarArr.push(data);
      }
      let hasBar = false;
      for (let i = 0; i < this.topbarArr.length; i++) {
        if (this.topbarArr[i].path == data.path) {
          hasBar = true;
        }
      }
      if (!hasBar) {
        this.topbarArr.push(data);
      }
    },
    openmenu() {
      this.isopen = !this.isopen;
      this.$refs.leftmenu.collapsemenu();
    },
    toPath(data) {
      this.$refs.leftmenu.handleSelect(data.path);
    },
    closetag(data, index) {
      this.topbarArr.splice(index, 1);
    },
    getDate() {
      let date = new Date();
      let Y = date.getFullYear();
      let M = date.getMonth() > 10 ? date.getMonth() : `0${date.getMonth()}`;
      let D = date.getDate() > 10 ? date.getDate() : `0${date.getDate()}`;
      let h = date.getHours() > 10 ? date.getHours() : `0${date.getHours()}`;
      let m = date.getMinutes() > 10 ? date.getMinutes() : `0${date.getMinutes()}`;
      let s = date.getSeconds();
      let w = date.getDay();
      let wtext = "";
      switch (w) {
        case 1:
          wtext = "星期一";
          break;
        case 2:
          wtext = "星期二";
          break;
        case 3:
          wtext = "星期三";
          break;
        case 4:
          wtext = "星期四";
          break;
        case 5:
          wtext = "星期五";
          break;
        case 6:
          wtext = "星期六";
          break;
        case 7:
          wtext = "星期日";
          break;
      }
      this.curdate = `${Y}/${M}/${D} ${h}:${m}:${s} ${wtext}`;
    },
    logout() {
      localStorage.removeItem("menu");
      localStorage.removeItem("curmenu");
      this.$store.commit(types.ATOKEN, "");
      localStorage.removeItem("atoken");
      this.$router.push("/login");
    }
  },
  created() {
    this.$api.device.getDev().then(m => {
      if (m.length < 1) {
        // this.infoFun('未发现运维服务，请联系相关人员')
        this.$message({
          message: "未发现运维服务，请联系相关人员",
          type: "error"
        });
        this.setDevunid("9cb6e39adc5176b81879f6c22f1d963");
        return;
      }
      this.setDevunid(m[0].dev_unid);
    });
  },
  components: {
    menus
  },
  mounted() {
    console.log(this.permission_routers);
    this.conHeight = window.innerHeight - 65;
    console.log(this.conHeight);
    document.addEventListener("keydown", event => {
      var e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 122) {
        // 按 Esc
        if (this.full) {
          this.menuwidth = "254px";
          this.full = false;
          return;
        }
        this.menuwidth = 0;
        this.full = true;
      }
    });
    setInterval(() => {
      this.getDate();
    }, 1000);
  },
  beforeMount() {
    //建立ws连接
    let uid = localStorage.getItem("user_unid");
    let clientid = localStorage.getItem("client_unid");
    this.$api.device.getGlobalWs(uid, clientid).then(data => {
      this.globalWs = new WebSocket(data.ws_url);
      let ary = data.ws_url.split("/");
      localStorage.setItem("cennect_unid", ary[ary.length - 1]);

      //监听成功
      this.globalWs.onopen = function() {
        console.log("全局推送服务连接成功");
      };

      //监听断开
      this.globalWs.onclose = function() {
        console.log("全局推送服务连接断开");
      };

      //监听推送信息
      // this.globalWs.onmessage = this.wsdeal;

      //保持连接
      var $this = this;
      setInterval(function() {
        var send_mesage =
          '{"type":"request","id":"' +
          new Date().getTime() +
          '","mts":"' +
          new Date().getTime() +
          '","command": "get /wsapi/v1/users/' +
          localStorage.getItem("cennect_unid") +
          '/keep_alive"}';
        $this.globalWs.send(send_mesage);
      }, 20000);
    });
  }
};
</script>
<style lang="stylus" scoped>
.menu-switch{
  color #fff
  font-size 25px;
  margin-left 50px;
  overflow: hidden;
  vertical-align: super;
}
</style>