From e4af9b01c664114feea892b6c0af8a504e762ca8 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 12 Apr 2021 17:16:58 +0800
Subject: [PATCH] 加入面包屑标签头
---
src/page/crumbsL/crumbsL.vue | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++
src/styles/media.scss | 2
src/page/index/top/index.vue | 18 ++++++
src/views/dataL/dataL.vue | 2
4 files changed, 170 insertions(+), 2 deletions(-)
diff --git a/src/page/crumbsL/crumbsL.vue b/src/page/crumbsL/crumbsL.vue
new file mode 100644
index 0000000..75a2e95
--- /dev/null
+++ b/src/page/crumbsL/crumbsL.vue
@@ -0,0 +1,150 @@
+<template>
+ <div class="breadEval">
+ <div class="breadTitle">
+ <el-breadcrumb-item style="position: relative;top: -3px;left: 5px">您的位置：</el-breadcrumb-item>
+ <el-breadcrumb separator="/">
+ <el-breadcrumb-item :to="{ path: '/wel/index' }">首页</el-breadcrumb-item>
+ <el-breadcrumb-item :to="item.path" v-for="item of breadListLast" :key="item.path">
+ {{item.name}}
+ </el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>
+ <!-- <router-view></router-view> -->
+ </div>
+</template>
+<script>
+ export default {
+ //面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03
+ data() {
+ return {
+ //手动配置项：breadListIm为路由与面包屑名称对应关系,breadLoadName为面包屑组件路由
+ upName: {
+ '监控台': 'welcomeData',
+ '预警管理': 'alarmManagement',
+ "预警管理": "realTimePolice",
+ "客户管理": 'suser',
+ "设备管理": 'clientManagement',
+ "研判洞察": 'home',
+ "报表管理": 'report',
+ "报表管理": 'myiframe',
+ "报表配置": 'urlPath',
+ "警情调度": 'policeInformationDistribution',
+ "系统监控": 'monitor',
+ "日志管理": "log",
+ "资源管理": 'resource',
+ "权限管理": 'authority',
+ "系统管理": 'system',
+ },
+ breadListIm: [
+ {
+ path: '01',
+ name: '一级'
+ },
+ {
+ path: '02',
+ name: '二级'
+ },
+ {
+ path: '03',
+ name: '三级'
+ },
+ ],
+ breadListLast: []
+ };
+ },
+ methods: {
+ loadChange() {
+ this.breadListLast = [
+ // {
+ // name: '首页',
+ // path: '/wel/index'
+ // },
+ // {
+ // name: this.$route.name,
+ // path: this.$route.path
+ // },
+ // {// 主要数据
+ // name: this.$route.name,
+ // path: this.$route.path
+ // }
+ ]
+ if(this.$route.path){
+ var uN = this.upName;
+ var pa = this.$route.path,
+ na = this.$route.name;
+ var uspa = pa.split('/');
+ uspa.shift();
+ console.log(uspa, pa);
+ for(var upk in uspa){
+ if(uspa[upk] =='index' || uspa[upk] =='wel' ){continue};
+ var nameD;
+ for(var key in uN){
+ if(uN[key] == uspa[upk]){
+ nameD = key;
+ break;
+ }else{
+ nameD = na;
+ }
+ }
+ this.breadListLast.push(
+ {
+ name: nameD,
+ path: pa,
+ }
+ )
+ if(uspa[upk] =='dataL'){
+ this.breadListLast = [
+ {
+ name: '卡片模式',
+ path: '/welcomeData/card',
+ },
+ {
+ name: nameD,
+ path: pa,
+ }
+ ]
+ }
+ if(uspa[upk] =='track'){
+ this.breadListLast = [
+ {
+ name: '警情纪录',
+ path: '/realTimePolice/real',
+ },
+ {
+ name: nameD,
+ path: pa,
+ }
+ ]
+ }
+ }
+ console.log(this.breadListLast);
+ }else{
+ console.log('未识别到路由')
+ }
+ }
+ },
+ watch: {
+ $route(to, from) {
+ this.loadChange()
+ // console.log(to.path);
+ }
+ },
+ //页面挂载之后,解析路由，给出面包屑，路由里面一定要含有breadCom组件的path
+ mounted: function () {
+ this.loadChange()
+ }
+ };
+</script>
+<style lang="scss" scoped>
+ .breadEval {
+ position: relative;
+ top: -10px;
+ font-size: 14px;
+ height: 100%;
+ background: #F3F7FD;
+ .breadTitle{
+ padding: 20px 30px;
+ background: #fff;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/src/page/index/top/index.vue b/src/page/index/top/index.vue
index 6b58be5..7186397 100644
--- a/src/page/index/top/index.vue
+++ b/src/page/index/top/index.vue
@@ -1,4 +1,5 @@
<template>
+<div>
<div class="avue-top">
<div class="top-bar__left">
<div
@@ -118,6 +119,11 @@
</el-dropdown>
</div>
</div>
+ <!-- //面包屑 -->
+ <div id="crumbsL">
+ <crumbsL></crumbsL>
+ </div>
+ </div>
</template>
<script>
import { resetRouter } from "@/router/router";
@@ -132,6 +138,9 @@
import topNotice from "./top-notice";
import topLang from "./top-lang";
+//面包屑
+import crumbsL from '../../crumbsL/crumbsL'
+
export default {
components: {
topLock,
@@ -142,6 +151,8 @@
topColor,
topNotice,
topLang,
+ //面包屑
+ crumbsL
},
name: "top",
data() {
@@ -208,4 +219,11 @@
</script>
<style lang="scss" scoped>
+//面包屑
+#crumbsL{
+ background-color: #fff;
+ padding-left: 20px;
+ height: 30px;
+ overflow: hidden;
+}
</style>
diff --git a/src/styles/media.scss b/src/styles/media.scss
index 39ce1c1..4d0f7bf 100644
--- a/src/styles/media.scss
+++ b/src/styles/media.scss
@@ -54,7 +54,7 @@
left: 240px;
padding: 0;
width: calc(100% - 240px);
- height: calc(100% - 64px);
+ height: calc(100% - 104px);
box-sizing: border-box;
overflow: hidden;
transition: all 0.5s;
diff --git a/src/views/dataL/dataL.vue b/src/views/dataL/dataL.vue
index 32577e2..c4d54db 100644
--- a/src/views/dataL/dataL.vue
+++ b/src/views/dataL/dataL.vue
@@ -1139,7 +1139,7 @@
this.getMap();
} else {
// this.re();
- this.getMap();
+ console.log(`没有找到到window.frames[0].init`)
}
};
},
--
Gitblit v1.9.3