马宇豪
2023-04-10 df5d10124f0cdaa2710a8bc460413388dd50c199
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
  <div class="app-breadcrumb">
    <img :src="avatorPath">
    <h1>众泰煤焦化智能化安全管理技术平台</h1>
  </div>
<!--   <el-breadcrumb class="app-breadcrumb" separator="/">-->
<!--    <transition-group name="breadcrumb">-->
<!--      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">-->
<!--        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">-->
<!--          {{ item.meta.title }}-->
<!--        </span>-->
<!--        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>-->
<!--      </el-breadcrumb-item>-->
<!--    </transition-group>-->
<!--  </el-breadcrumb>-->
</template>
 
<script>
import { mapGetters } from 'vuex'
import pathToRegexp from 'path-to-regexp'
const imgUrl = require('@/assets/newzhongtai.jpg')
export default {
  data() {
    return {
      levelList: null
    }
  },
  computed: {
    ...mapGetters([
      'userType',
      'instituteId',
      'instituteName',
      'fullname'
    ]),
    avatorPath() {
      return imgUrl
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name)
 
      const first = matched[0]
      if (first && first.name.trim().toLocaleLowerCase() !== 'Dashboard'.toLocaleLowerCase()) {
        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
      }
 
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script>
 
<style rel="stylesheet/scss" lang="scss" scoped>
  .app-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 60px;
    //margin-left: 8px;
    vertical-align:middle;
    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
  }
  .app-breadcrumb img{
      height: 62px;
      width: 260px;
      border: none;
      vertical-align: middle;
      margin-right: 20px;
  }
  .app-breadcrumb h1{
    margin:0;
    padding:0;
    display: inline;
    vertical-align: middle;
    font-size: 20px;
    color: white;
  }
</style>