加入面包屑标签头

liuyg

2021-04-12 e4af9b01c664114feea892b6c0af8a504e762ca8

加入面包屑标签头

 src/page/crumbsL/crumbsL.vue

New file
@@ -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>

 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>

 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;

 src/views/dataL/dataL.vue

@@ -1139,7 +1139,7 @@
        this.getMap();
      } else {
        // this.re();
        this.getMap();
        console.log(`没有找到到window.frames[0].init`)
      }
    };
  },