From c2e2ce9e6e64d6d88de294afbaa09c3d6c2a2df5 Mon Sep 17 00:00:00 2001
From: 阿伏兔 <1738124622@qq.com>
Date: 星期三, 28 八月 2024 23:02:26 +0800
Subject: [PATCH] 添加尖峰平谷功能
---
energy_management_ui/src/layout/index.vue | 176 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 172 insertions(+), 4 deletions(-)
diff --git a/energy_management_ui/src/layout/index.vue b/energy_management_ui/src/layout/index.vue
index b9ad55e..9c16707 100644
--- a/energy_management_ui/src/layout/index.vue
+++ b/energy_management_ui/src/layout/index.vue
@@ -9,9 +9,25 @@
<div :class="{ hasTagsView: needTagsView }" class="main-container">
<div :class="{ 'fixed-header': fixedHeader }">
<navbar />
- <!-- <div style="height: 70px;background: #fff;">
- caidan-鑿滃崟
- </div> -->
+ <div class="tabs-container">
+ <el-tabs
+ v-model="activePage"
+ type="card"
+ closable
+ @edit="handleTabsEdit"
+ >
+ <el-tab-pane
+ :id="page.fullPath"
+ :key="page.fullPath"
+ v-for="(page, index) in pageList"
+ :label="page.meta.title"
+ :name="page.fullPath"
+ :closable="!(page.meta.title == '棣栭〉')"
+ >
+ <!-- {{ page.content }} -->
+ </el-tab-pane>
+ </el-tabs>
+ </div>
</div>
<app-main />
</div>
@@ -24,6 +40,7 @@
import ResizeMixin from "./mixin/ResizeHandler";
import { mapState } from "vuex";
+const indexKey = "/index";
export default {
name: "Layout",
components: {
@@ -32,6 +49,14 @@
RightPanel,
Sidebar
},
+ data() {
+ return {
+ pageList: [],
+ linkList: [],
+ activePage: "",
+ multipage: true
+ };
+ },
mixins: [ResizeMixin],
computed: {
...mapState({
@@ -39,7 +64,8 @@
device: state => state.app.device,
showSettings: state => state.settings.showSettings,
needTagsView: state => state.settings.tagsView,
- fixedHeader: state => state.settings.fixedHeader
+ fixedHeader: state => state.settings.fixedHeader,
+ tagsView: state => state.tagsView
}),
classObj() {
return {
@@ -50,7 +76,117 @@
};
}
},
+ created() {
+ if (this.$route.path !== indexKey) {
+ this.addIndexToFirst();
+ }
+ // 澶嶅埗涓�涓猺oute瀵硅薄鍑烘潵锛屼笉鑳藉奖鍝嶅師route
+ let currentRoute = Object.assign({}, this.$route);
+ currentRoute.meta = Object.assign({}, currentRoute.meta);
+ this.pageList.push(currentRoute);
+ this.linkList.push(currentRoute.fullPath);
+ this.activePage = currentRoute.fullPath;
+ console.log("pageList", this.pageList);
+ },
+ watch: {
+ $route: function(newRoute) {
+ this.activePage = newRoute.fullPath;
+ if (!this.multipage) {
+ this.linkList = [newRoute.fullPath];
+ this.pageList = [Object.assign({}, newRoute)];
+ // update-begin-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
+ } else if (indexKey == newRoute.fullPath) {
+ //棣栭〉鏃� 鍒ゆ柇鏄惁缂撳瓨 娌℃湁缂撳瓨 鍒锋柊涔�
+ if (newRoute.meta.keepAlive === false) {
+ this.routeReload();
+ }
+ // update-end-author:taoyan date:20200211 for: TASK #3368 銆愯矾鐢辩紦瀛樸�戦椤电殑缂撳瓨璁剧疆鏈夐棶棰橈紝闇�瑕佹牴鎹悗鍙扮殑璺敱閰嶇疆鏉ュ疄鐜版槸鍚︾紦瀛�
+ } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
+ this.linkList.push(newRoute.fullPath);
+ this.pageList.push(Object.assign({}, newRoute));
+ //// update-begin-author:sunjianlei date:20200103 for: 濡傛灉鏂板鐨勯〉闈㈤厤缃簡缂撳瓨璺敱锛岄偅涔堝氨寮哄埗鍒锋柊涓�閬� #842
+ // if (newRoute.meta.keepAlive) {
+ // this.routeReload()
+ // }
+ //// update-end-author:sunjianlei date:20200103 for: 濡傛灉鏂板鐨勯〉闈㈤厤缃簡缂撳瓨璺敱锛岄偅涔堝氨寮哄埗鍒锋柊涓�閬� #842
+ } else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
+ let oldIndex = this.linkList.indexOf(newRoute.fullPath);
+ let oldPositionRoute = this.pageList[oldIndex];
+ this.pageList.splice(
+ oldIndex,
+ 1,
+ Object.assign({}, newRoute, { meta: oldPositionRoute.meta })
+ );
+ }
+ },
+ activePage: function(key) {
+ let index = this.linkList.lastIndexOf(key);
+ let waitRouter = this.pageList[index];
+ // 銆怲ESTA-523銆戜慨澶嶏細涓嶅厑璁搁噸澶嶈烦杞矾鐢卞紓甯�
+ if (waitRouter.fullPath !== this.$route.fullPath) {
+ this.$router.push(Object.assign({}, waitRouter));
+ }
+ // this.changeTitle(waitRouter.meta.title);
+ }
+ },
methods: {
+ addIndexToFirst() {
+ this.pageList.splice(0, 0, {
+ name: "home",
+ path: indexKey,
+ fullPath: indexKey,
+ meta: {
+ icon: "dashboard",
+ title: "棣栭〉"
+ }
+ });
+ this.linkList.splice(0, 0, indexKey);
+ },
+ changePage(key) {
+ this.activePage = key;
+ },
+ handleTabsEdit(key, action) {
+ console.log("handleTabsEdit", key, action);
+ this[action](key);
+ },
+ remove(key) {
+ if (key == indexKey) {
+ this.$message({
+ message: "棣栭〉涓嶈兘鍏抽棴!",
+ type: "warning"
+ });
+ return;
+ }
+ if (this.pageList.length === 1) {
+ this.$message({
+ message: "杩欐槸鏈�鍚庝竴椤碉紝涓嶈兘鍐嶅叧闂簡鍟�",
+ type: "warning"
+ });
+ return;
+ }
+ let removeRoute = this.pageList.filter(item => item.fullPath == key);
+ this.pageList = this.pageList.filter(item => item.fullPath !== key);
+ let index = this.linkList.indexOf(key);
+ this.linkList = this.linkList.filter(item => item !== key);
+ index = index >= this.linkList.length ? this.linkList.length - 1 : index;
+ this.activePage = this.linkList[index];
+
+ //update-begin--Author:scott Date:20201015 for锛氳矾鐢辩紦瀛橀棶棰橈紝鍏抽棴浜唗ab椤垫椂鍐嶆墦寮�灏变笉鍒锋柊 #842
+ //鍏抽棴椤甸潰鍒欎粠缂撳瓨cache_included_routes涓垹闄よ矾鐢憋紝涓嬫鐐瑰嚮鑿滃崟浼氶噸鏂板姞杞介〉闈�
+ // let cacheRouterArray = Vue.ls.get(CACHE_INCLUDED_ROUTES) || [];
+ // if (removeRoute && removeRoute[0]) {
+ // let componentName = removeRoute[0].meta.componentName;
+ // if (cacheRouterArray.includes(componentName)) {
+ // cacheRouterArray.splice(
+ // cacheRouterArray.findIndex(item => item === componentName),
+ // 1
+ // );
+ // Vue.ls.set(CACHE_INCLUDED_ROUTES, cacheRouterArray);
+ // }
+ // this.emitPageClosed(removeRoute[0]);
+ // }
+ //update-end--Author:scott Date:20201015 for锛氳矾鐢辩紦瀛橀棶棰橈紝鍏抽棴浜唗ab椤垫椂鍐嶆墦寮�灏变笉鍒锋柊 #842
+ },
handleClickOutside() {
this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
}
@@ -67,6 +203,7 @@
position: relative;
height: 100%;
width: 100%;
+ background: #001233;
&.mobile.openSidebar {
position: fixed;
@@ -74,6 +211,37 @@
}
}
+.tabs-container {
+ // background: #fff;
+ background: #001233;
+ height: #{$tabBarHeight};
+ ::v-deep {
+ .el-tabs__item {
+ height: #{$tabBarHeight};
+ line-height: #{$tabBarHeight};
+ background: url("../assets/image/breadcrumbBg.png") no-repeat;
+ background-size: 100% 100%;
+ border: none;
+ margin-right: 10px;
+ color: #95c1fd;
+ }
+ .is-active {
+ color: #fff;
+ background: url("../assets/image/isbreadcrumbBg.png") no-repeat;
+ background-size: 100% 100%;
+ }
+ .el-tabs__nav {
+ border: none !important;
+ }
+ .el-tabs__header {
+ margin: 0 !important;
+ }
+ .el-tabs--card > .el-tabs__header {
+ border-bottom: none;
+ }
+ }
+}
+
.drawer-bg {
background: #000;
opacity: 0.3;
--
Gitblit v1.9.3