From c0393a7b4bfd83a1de9d767063cec89ba34b1af9 Mon Sep 17 00:00:00 2001
From: whychdw <49690745@qq.com>
Date: 星期五, 03 九月 2021 16:18:44 +0800
Subject: [PATCH] 内容提交
---
src/pages/home.vue | 487 ++++++++++++++++++++++++++++-------------------------
1 files changed, 255 insertions(+), 232 deletions(-)
diff --git a/src/pages/home.vue b/src/pages/home.vue
index b2c43d1..cbf5cc6 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -1,247 +1,270 @@
<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>
+ <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 ProgressBar from 'vuejs-progress-bar';
- import HdwDialog from "@/components/HdwDialog";
- import PagesThreeHome from '@/pages/dataTest/threeHome';
- import marqueeLeft from "@/components/marqueeLeft ";
- import {
- checkUserLogin,
- getAllRealAlarm
- } from '@/assets/js/api'
+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() {
- return {
- newItems: [],
- acTabs: 'index',
- tabs: [{
- label: '棣栭〉',
- name: 'index',
- src: '#/index',
- closable: false,
- }, ],
- drawer: false,
- timer: '',
- hdwDialog: false,
- areas: [],
- socket: "",
- path: 'ws://localhost:8919/fg/websocket/loginCheck'
+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;
}
- },
- 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;
- // 妫�娴媙ame鏄惁宸茬粡瀛樺湪tabs鍐�
- let notIn = true;
- tabs.forEach(item => {
- if (item.name == menu.name) {
- notIn = false;
- }
- });
- // 涓嶅湪, 娣诲姞menu鍒皌abs涓�
- 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;
- // 妫�娴媙ame鏄惁宸茬粡瀛樺湪tabs鍐�
- let notIn = true;
- let index = -1;
- tabs.forEach((item, flag) => {
- // 椤甸潰鏄惁宸茬粡鎵撳紑
- if (item.name == menu.name) {
- notIn = false;
- index = flag;
- }
- });
- // 涓嶅湪, 娣诲姞menu鍒皌abs涓�
- 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();
- // 鐩戝惉鏉ヨ嚜瀛恑frame鐨勬寚浠�
- window.addEventListener('message', (msg) => {
- // 澶勭悊鏁版嵁
- this.handleMessage(msg.data);
- });
- this.getAllRealAlarm()
- setInterval(() => {
- this.getAllRealAlarm()
- }, 4000)
- },
- destroyed() {
-
+ this.acTabs = activeName;
+ this.tabs = tabs.filter((tab) => tab.name !== targetName);
+ },
+ changeTab(menu) {
+ let tabs = this.tabs;
+ // 妫�娴媙ame鏄惁宸茬粡瀛樺湪tabs鍐�
+ let notIn = true;
+ tabs.forEach((item) => {
+ if (item.name == menu.name) {
+ notIn = false;
}
- }
+ });
+ // 涓嶅湪, 娣诲姞menu鍒皌abs涓�
+ 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;
+ // 妫�娴媙ame鏄惁宸茬粡瀛樺湪tabs鍐�
+ let notIn = true;
+ let index = -1;
+ tabs.forEach((item, flag) => {
+ // 椤甸潰鏄惁宸茬粡鎵撳紑
+ if (item.name == menu.name) {
+ notIn = false;
+ index = flag;
+ }
+ });
+ // 涓嶅湪, 娣诲姞menu鍒皌abs涓�
+ 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();
+ // 鐩戝惉鏉ヨ嚜瀛恑frame鐨勬寚浠�
+ 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;
- }
+.flex-layout {
+ display: flex;
+ height: 100%;
+ box-sizing: border-box;
+}
- .page-home-content {
- position: relative;
- height: 100%;
- }
+.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;
- }
+.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;
- }
+.no-selected {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
- .show-drawer {
- transform: translateX(360px);
- }
-</style>
\ No newline at end of file
+.show-drawer {
+ transform: translateX(360px);
+}
+</style>
--
Gitblit v1.9.1