<template>
|
<flex-layout class="page-home" no-bg ref="homeRoot">
|
<page-header
|
slot="header"
|
:class="{ 'show-drawer': drawer }"
|
@handle-message="handleMessage"
|
></page-header>
|
<div ref="homeContent" class="page-home-content" :class="{ 'show-drawer': drawer }">
|
<div class="home-content-mask" v-if="showMash"></div>
|
<div class="tab-menu-left" @click="drawer = true">
|
<i class="el-icon-s-operation"></i>
|
</div>
|
<el-tabs
|
v-model="acTabs"
|
type="border-card"
|
@tab-remove="removeTab"
|
class="no-selected full-height add-m-menu flex-layout el-home-tabs"
|
>
|
<el-tab-pane
|
v-for="item in tabs"
|
:key="item.name"
|
:label="item.label"
|
:name="item.name"
|
:closable="item.closable"
|
>
|
<iframe
|
:name="item.name"
|
:src="item.src"
|
width="100%"
|
height="100%"
|
frameborder="0"
|
scrolling="no"
|
></iframe>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
<div slot="footer">
|
<marqueeLeft :sendVal="newItems" v-if="showMarqueeLeft"></marqueeLeft>
|
<div class="no-warning-msg" v-else>最近24小时内无告警</div>
|
</div>
|
<el-drawer
|
title="我是标题"
|
:withHeader="false"
|
:visible.sync="drawer"
|
size="360px"
|
direction="ltr"
|
>
|
<page-menu :ac-tabs="acTabs" @select="changeTab"></page-menu>
|
</el-drawer>
|
<hdw-dialog :visible.sync="hdwDialog">
|
<pages-three-home v-if="hdwDialog" :areas="areas"></pages-three-home>
|
</hdw-dialog>
|
</flex-layout>
|
</template>
|
|
<script>
|
import PageHeader from "../components/PageHeader.vue";
|
import PageMenu from "../components/PageMenu.vue";
|
import HdwDialog from "@/components/HdwDialog";
|
import PagesThreeHome from "@/pages/dataTest/threeHome";
|
import marqueeLeft from "@/components/marqueeLeft";
|
import getPageMenu from "@/assets/js/tools/getPageMenu";
|
import { checkUserLogin, getAllRealAlarm } from "@/assets/js/api";
|
import {Timeout} from "@/assets/js/tools";
|
import config from "@/assets/js/config";
|
|
let timer;
|
export default {
|
components: {
|
PageHeader,
|
PageMenu,
|
PagesThreeHome,
|
HdwDialog,
|
marqueeLeft,
|
},
|
data() {
|
let menus = getPageMenu();
|
let tabs = [menus[0]];
|
let acTabs = "index";
|
let pageInfo = this.$store.getters["user/pageName"];
|
if (this.$store.state.user.autoLogin) {
|
let addMenu = "";
|
|
// 校验菜单
|
if (menus[pageInfo.m] && menus[pageInfo.m].childrens[pageInfo.c]) {
|
addMenu = menus[pageInfo.m].childrens[pageInfo.c];
|
}
|
|
// 添加的菜单
|
if (addMenu) {
|
acTabs = addMenu.name;
|
tabs.push(addMenu);
|
}
|
}
|
return {
|
config: config,
|
newItems: [],
|
acTabs: acTabs,
|
tabs: tabs,
|
drawer: false,
|
timer: "",
|
timer2: new Timeout(),
|
realAlarmTime: new Timeout(),
|
hdwDialog: false,
|
areas: [],
|
socket: "",
|
path: "ws://localhost:8919/fg/websocket/loginCheck",
|
lastTime: new Date().getTime(),
|
showMash: false,
|
errorFlag: 0, // 错误计数
|
};
|
},
|
watch: {
|
acTabs: {
|
handler(name) {
|
// 监测tab激活的位置
|
// 存储激活的sessionStorage
|
sessionStorage.setItem("acTabs", name);
|
},
|
immediate: true,
|
},
|
"$store.state.ukey.isIn"(isIn) {
|
if (!isIn) {
|
this.$router.push("/login");
|
}
|
},
|
},
|
methods: {
|
getAllRealAlarm() {
|
getAllRealAlarm()
|
.then((res) => {
|
let resData = JSON.parse(res.data.result);
|
this.newItems = resData.data;
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
},
|
removeTab(targetName) {
|
let tabs = this.tabs;
|
let activeName = this.acTabs;
|
|
if (activeName === targetName) {
|
tabs.forEach((tab, index) => {
|
if (tab.name === targetName) {
|
let nextTab = tabs[index + 1] || tabs[index - 1];
|
if (nextTab) {
|
activeName = nextTab.name;
|
}
|
}
|
});
|
}
|
|
this.acTabs = activeName;
|
this.tabs = tabs.filter((tab) => tab.name !== targetName);
|
},
|
changeTab(menu) {
|
let tabs = this.tabs;
|
// 检测name是否已经存在tabs内
|
let notIn = true;
|
tabs.forEach((item) => {
|
if (item.name == menu.name) {
|
notIn = false;
|
}
|
});
|
// 不在, 添加menu到tabs中
|
if (notIn) {
|
tabs.push(menu);
|
}
|
|
// 设置激活的导航
|
this.acTabs = menu.name;
|
},
|
// 处理从子iframe中获取到的指令
|
handleMessage(msg) {
|
switch (msg.cmd) {
|
// 同步页面的指令
|
case "syncPage":
|
this.syncPage(msg.params);
|
break;
|
case "showDialog":
|
this.hdwDialog = false;
|
this.$nextTick(() => {
|
this.showDialog(msg.params);
|
});
|
break;
|
}
|
},
|
// 同步页面
|
syncPage(params) {
|
let tabs = this.tabs;
|
let menu = params.pageInfo;
|
// 检测name是否已经存在tabs内
|
let notIn = true;
|
let index = -1;
|
tabs.forEach((item, flag) => {
|
// 页面是否已经打开
|
if (item.name == menu.name) {
|
notIn = false;
|
index = flag;
|
}
|
});
|
// 不在, 添加menu到tabs中
|
if (notIn) {
|
tabs.push(menu);
|
} else {
|
// 页面已存在，并刷新页面
|
tabs.splice(index, 1);
|
this.$nextTick(() => {
|
tabs.splice(index, 0, menu);
|
});
|
}
|
|
// 设置激活的导航
|
this.acTabs = menu.name;
|
},
|
showDialog(params) {
|
switch (params.dialog) {
|
case "hdwDialog":
|
this.areas = params.pageInfo;
|
this.hdwDialog = true;
|
break;
|
}
|
},
|
checkUserLogin() {
|
checkUserLogin()
|
.then((res) => {
|
let rs = JSON.parse(res.data.result);
|
this.errorFlag = 0;
|
if (rs.code === 1) {
|
alert(rs.msg);
|
this.$router.push("/login");
|
} else {
|
clearTimeout(this.timer);
|
this.timer = setTimeout(() => {
|
this.checkUserLogin();
|
}, 5000);
|
}
|
})
|
.catch((error) => {
|
if (this.errorFlag == 3) {
|
alert("服务器请求异常,请重新登录!");
|
this.$router.push("/login");
|
}
|
this.errorFlag++;
|
clearTimeout(this.timer);
|
this.timer = setTimeout(() => {
|
this.checkUserLogin();
|
}, 5000);
|
});
|
},
|
changeLastTime() {
|
this.lastTime = new Date().getTime()
|
},
|
listenLastTime() {
|
this.timer2.start(()=>{
|
let lastTime = this.lastTime;
|
let currentTime = new Date().getTime(); //更新当前时间
|
let timeOut = 30 * 60 * 1000; //设置超时时间： 30分
|
if(currentTime - lastTime > timeOut){ //判断是否超时
|
alert("长时间未操作，自动退出！");
|
this.$router.push("/login");
|
}else if(currentTime - lastTime > timeOut/2) {
|
this.showMash = true;
|
this.timer2.open();
|
}else{
|
this.showMash = false;
|
this.timer2.open();
|
}
|
}, 1000);
|
|
},
|
startSearchRealTime() {
|
this.realAlarmTime.start(()=>{
|
this.$axios.all([
|
this.getAllRealAlarm(),
|
]).then(res=>{
|
this.realAlarmTime.open();
|
}).catch(error=>{
|
this.realAlarmTime.open();
|
});
|
}, 1000);
|
}
|
},
|
computed: {
|
showMarqueeLeft() {
|
return typeof this.newItems == "undefined" || this.newItems.length == 0
|
? false
|
: true;
|
},
|
},
|
mounted() {
|
// 启动用户互斥登录模块
|
this.checkUserLogin();
|
// 监听来自子iframe的指令
|
window.addEventListener("message", (msg) => {
|
// 处理数据
|
this.handleMessage(msg.data);
|
});
|
this.startSearchRealTime();
|
|
// 开启长时间不操作自动退出
|
if(this.config.autoExit.value) {
|
// 开启监控鼠标移动
|
window.addEventListener("mousemove", this.changeLastTime);
|
// 启动监控
|
this.listenLastTime();
|
}
|
|
},
|
destroyed() {
|
clearTimeout(this.timer);
|
this.realAlarmTime.stop();
|
// 开启长时间不操作自动退出
|
if(this.config.autoExit.value) {
|
// 移除监控鼠标移动
|
window.removeEventListener("mousemove", this.changeLastTime);
|
this.timer2.stop();
|
}
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.flex-layout {
|
display: flex;
|
height: 100%;
|
box-sizing: border-box;
|
}
|
|
.page-home-content {
|
position: relative;
|
height: 100%;
|
}
|
|
.tab-menu-left {
|
position: absolute;
|
box-sizing: border-box;
|
width: 48px;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
z-index: 1;
|
}
|
|
.no-selected {
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
}
|
|
.show-drawer {
|
transform: translateX(360px);
|
}
|
.no-warning-msg {
|
overflow: hidden;
|
color: #ffffff;
|
font-size: 0.3rem;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
}
|
.home-content-mask {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
z-index: 9999;
|
}
|
</style>
|
