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="logotitle">视频分析平台</span>
        <span
          :class="{
            'el-icon-s-fold': isopen,
            'el-icon-s-unfold': !isopen,
            'menu-switch': true
          }"
          @click="openmenu"
        ></span>
        <div class="headRight">
          <span class="timerbox">{{ curdate }}</span>
          <el-dropdown class="zt-box" @command="handleCommand">
            <div class="zt-btn">
              <i class="el-icon-arrow-down el-icon-menu"></i>主题切换
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item  command="light">白色主题</el-dropdown-item>
              <el-dropdown-item  command="dark">深色主题</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <img @click="resetpass" 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();
      let date = new Date().getTime();
      this.$store.commit("setmapopen", date);
    },
    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() > 9 ? date.getMonth() : `0${date.getMonth() + 1}`;
      let D = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`;
      let h = date.getHours() > 9 ? date.getHours() : `0${date.getHours()}`;
      let m =
        date.getMinutes() > 9 ? 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}`;
    },
    handleCommand(command){
      window.document.documentElement.setAttribute('data-theme',command);
      localStorage.setItem("theme",command)
    },

    logout() {
      localStorage.removeItem("menu");
      localStorage.removeItem("curmenu");
      this.$store.commit(types.ATOKEN, "");
      localStorage.removeItem("atoken");
      this.$router.push("/login").catch(err => {
        err;
      });
      location.reload();

    },
    resetpass() {
      this.$router.push("/resetpass").catch(err => {
        err;
      });
    }
  },
  created() {
    this.$api.device.getDev().then(m => {
      if (m.length < 1) {
        this.$message({
          message: "未发现运维服务，请联系相关人员",
          type: "error"
        });
        this.setDevunid("9cb6e39adc5176b81879f6c22f1d963");
        return;
      }
      this.setDevunid(m[0].dev_unid);
    });
  },
  components: {
    menus
  },
  mounted() {
    let theme =  localStorage.getItem("theme") || 'light';
    window.document.documentElement.setAttribute('data-theme',theme);
    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);
        }
      }
    };
    let app = document.getElementById("app");
    app.addEventListener("mousemove", () => {
      if(window.mousetimer) {
        clearTimeout(window.mousetimer);
      }
      window.mousetimer = setTimeout(() => {
        debugger
        clearTimeout(window.mousetimer);
        window.mousetimer = null;
        this.logout();
      }, 600000);
    });
    // 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 25px;
  margin-top:20px;
}
.headRight img {
  cursor pointer
}
.zt-box{
  margin-right 80px
}
.zt-btn{
  // vertical-align middle
  color #fff
  font-size 14px
  height 50px
  line-height 50px
  i{
    font-size 16px
    padding-right 10px
    padding-top 6px
    vertical-align: text-bottom;
  }
}

.logotitle{
  overflow: hidden;
  font-size: 20px;
  color #ffffff
  display inline-block
  line-height 65px
  font-weight 600
  letter-spacing 2px
  float left
}
.timerbox{
  padding-right 30px
}
</style>