<template>
|
<flex-layout class="page-home">
|
<page-header
|
slot="header"
|
:class="{ 'show-drawer': drawer }"
|
@handle-message="handleMessage"
|
></page-header>
|
<div class="page-home-content" :class="{ 'show-drawer': drawer }">
|
<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"></marqueeLeft>
|
</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";
|
|
let timer;
|
export default {
|
components: {
|
PageHeader,
|
PageMenu,
|
PagesThreeHome,
|
HdwDialog,
|
marqueeLeft,
|
},
|
data() {
|
let menus = getPageMenu();
|
|
return {
|
newItems: [],
|
acTabs: "index",
|
tabs: [menus[0]],
|
drawer: false,
|
timer: "",
|
hdwDialog: false,
|
areas: [],
|
socket: "",
|
path: "ws://localhost:8919/fg/websocket/loginCheck",
|
};
|
},
|
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);
|
if (rs.code === 1) {
|
alert(rs.msg);
|
this.$router.push("/login");
|
} else {
|
clearTimeout(timer);
|
timer = setTimeout(() => {
|
this.checkUserLogin();
|
}, 3000);
|
}
|
})
|
.catch((error) => {
|
clearTimeout(timer);
|
timer = setTimeout(() => {
|
this.checkUserLogin();
|
}, 3000);
|
});
|
},
|
},
|
mounted() {
|
// 启动用户互斥登录模块
|
this.checkUserLogin();
|
// 监听来自子iframe的指令
|
window.addEventListener("message", (msg) => {
|
// 处理数据
|
this.handleMessage(msg.data);
|
});
|
this.getAllRealAlarm();
|
setInterval(() => {
|
this.getAllRealAlarm();
|
}, 4000);
|
},
|
destroyed() {},
|
};
|
</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);
|
}
|
</style>
|
