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" v-show="isfull"></menus>
        <el-main>
          <div class="nav" id="topnav" v-show="isfull">
            <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: "300px",
      isfull: true,
      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() + 1}`;
      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);
    //监听退出全屏事件
    var that = this;
     document.onkeydown = function(event) {
      var e = event || window.event || arguments.callee.caller.arguments[0];

      if (e && e.keyCode == 122) {
        if (that.isfull) {
          that.isfull = false;
           console.log(1)
      } else {
          that.isfull = true;
           console.log(2)

      }
      }
    };
    // window.onresize = function() {
    //   console.log("full",that.isfull)
    //   if (that.isfull) {
    //       that.isfull = false;
    //        console.log(1)
    //   } else {
    //       that.isfull = true;
    //        console.log(2)

    //   }
    // };
    // function checkFull() {
    //   var isFull =
    //     document.fullscreenEnabled ||
    //     window.fullScreen ||
    //     document.webkitIsFullScreen ||
    //     document.msFullscreenEnabled;
    //   //to fix : false || undefined == undefined
    //   if (isFull === undefined) {
    //     isFull = false;
    //   }
    //   return isFull;
    // }
 
    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>