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">AI视频分析平台</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>
          <span class="uname-box">{{ uname }}</span>
          <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 {config} from "../../../public/js/config";
import menus from "./menu";
export default {
  name: "x",
  data() {
    return {
      curdate: "",
      isopen: true,
      conHeight: 0,
      menuwidth: "300px",
      isfull: true,
      headertitle: "",
      topbarArr: [],
      uname: "",
    };
  },
  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() + 1 : `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("fxtheme", command);
    },
    ddlogout() {
      let params = {
        access_token: localStorage.getItem("access_token"),
      };
      this.$api.login.ddlogout(params).then((res) => {
        console.log("dingding", res);
      });
    },
    logout() {
      localStorage.removeItem("menu");
      localStorage.removeItem("curmenu");
      let uid = localStorage.getItem("user_unid");
      this.$api.login.logout(uid).then((res) => {
        this.$store.commit(types.ATOKEN, "");
        this.$logs.oplogs("", "serv_login", `登出了平台`);
        localStorage.removeItem("atoken");
        this.$router.push("/login").catch((err) => {
          err;
        });
      });

      if (window.config.isdd) {
        this.ddlogout();
        localStorage.removeItem("atoken");
        this.$router.push("/login").catch((err) => {
          err;
        });
      }

      // location.reload();
    },
    resetpass() {
      this.$router.push("/resetpass").catch((err) => {
        err;
      });
    },
  },
  created() {
    this.headertitle = window.config.hadertitle;
    this.uname = localStorage.getItem("uname");
    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("fxtheme") || "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(() => {
        clearTimeout(window.mousetimer);
        window.mousetimer = null;
        this.$message({
          message: "由于您长时间未操作,将退出平台！",
          type: "warning",
        });
        this.logout();
      }, 1000 * 60 * 60 * 6);
    });
    // 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) => {
      if (window.config.https) {
        let url = data.ws_url.replace("ws://", "wss://");
        this.globalWs = new WebSocket(url.replace("20080", "20070"));
      } else {
        let url = data.ws_url;
        this.globalWs = new WebSocket(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;
}

.uname-box {
  padding-right: 10px;
}
</style>