<template>
|
<div class="breadEval">
|
<div class="breadTitle">
|
<div class="titles">您的位置：</div>
|
<div
|
class="ourCrumbsl"
|
v-for="(item, index) of breadListLast"
|
:key="item.path"
|
>
|
<div class="aaa" v-show="breadListLast.length != index + 1">
|
<a href="javascript:;" @click="$router.push({ path: item.path })">{{
|
item.name
|
}}</a
|
> /
|
</div>
|
<div class="bbb" v-show="breadListLast.length == index + 1">
|
<div>{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="weather">
|
<div class="gaizi"></div>
|
<iframe
|
class="weatherif"
|
width="480"
|
height="30"
|
:src="urlData"
|
scrolling="no"
|
></iframe>
|
</div>
|
|
<!-- <router-view></router-view> -->
|
</div>
|
</template>
|
<script>
|
import axios from "axios";
|
|
export default {
|
//面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03
|
data() {
|
return {
|
urlData: "",
|
//手动配置项：breadListIm为路由与面包屑名称对应关系,breadLoadName为面包屑组件路由
|
upName: {
|
监控台: "welcomeData",
|
预警管理1: "alarmManagement",
|
预警管理: "realTimePolice",
|
业主管理: "suser",
|
设备管理: "clientManagement",
|
研判洞察: "home",
|
报表管理1: "report",
|
报表管理: "myiframe",
|
报表配置: "urlPath",
|
警情调度: "policeInformationDistribution",
|
系统监控: "monitor",
|
日志管理: "log",
|
资源管理: "resource",
|
权限管理: "authority",
|
系统管理: "system",
|
},
|
onceRouter: false,
|
breadListIm: [
|
{
|
path: "01",
|
name: "一级",
|
},
|
{
|
path: "02",
|
name: "二级",
|
},
|
{
|
path: "03",
|
name: "三级",
|
},
|
],
|
breadListLast: [],
|
sOld: -1,
|
isrf: false,
|
showDataL: 10,
|
};
|
},
|
created() {
|
this.urlData = "/weather/index.html";
|
},
|
methods: {
|
loadChange() {
|
//导航栏进就是一级路由，其他页面push
|
if (this.isrf) {
|
//刷新读取localStorage
|
this.breadListLast = JSON.parse(localStorage.getItem("crumbsl"));
|
var b = localStorage.getItem("crumbslname") == "false" ? false : true;
|
this.$store.commit("SET_SHOWDATAL", b);
|
} else {
|
//关闭重写
|
var path = this.$route.path,
|
p = path.split("/").pop(),
|
n = this.$route.name,
|
s = this.$store.state.common.liuState;
|
// var showDataL =
|
// n == "首页"
|
// ? false
|
// : n == "健康码管理"
|
// ? false
|
// : n == "包裹管理"
|
// ? false
|
// : n == "体温管理"
|
// ? false
|
// : n == "研判洞察"
|
// ? false
|
// : true;
|
this.showDataL =
|
n == "数据模式"
|
? true
|
: n == "地图模式"
|
? true
|
: n == "卡片模式"
|
? true
|
: false;
|
localStorage.setItem("crumbslname", this.showDataL);
|
this.$store.commit("SET_SHOWDATAL", this.showDataL);
|
|
// console.log("path:" + p);
|
// console.log("name:" + n);
|
// console.log("showDataL:" + showDataL);
|
// console.log("state: ", s);
|
// console.log(this.sOld,s);
|
if (this.sOld != s) {
|
//一级菜单
|
this.breadListLast = [];
|
this.breadListLast.push({
|
// name: n == "首页" ? "数据模式" : n,
|
name: n,
|
path: path,
|
});
|
// console.log(p, n, "写入一级面包屑");
|
} else if (this.sOld == s) {
|
//push
|
|
this.breadListLast.push({
|
name: n,
|
path: path,
|
});
|
//判断是否有重复项，有则删除其后路由↓
|
var ourP = this.breadListLast;
|
for (var os in ourP) {
|
// if (n == "首页") {
|
// n = "数据模式";
|
// }
|
if (ourP[os].name == n && os != ourP.length - 1) {
|
this.breadListLast.splice(
|
+os + 1,
|
this.breadListLast.length - os - 1
|
);
|
// console.log(+os + 1, ourP[os].name, "删除重复面包屑");
|
}
|
}
|
// console.log(p, n, "写入多级面包屑");
|
}
|
this.sOld = s;
|
// window.localStorage.crumbsl = this.breadListLast;
|
localStorage.setItem("crumbsl", JSON.stringify(this.breadListLast));
|
}
|
},
|
},
|
watch: {
|
$route(to, from) {
|
this.isrf = false;
|
this.loadChange();
|
// console.log(to.path);
|
},
|
},
|
//页面挂载之后,解析路由，给出面包屑，路由里面一定要含有breadCom组件的path
|
mounted: function () {
|
if (window.name == "") {
|
this.isrf = false;
|
console.log("首次被加载");
|
localStorage.setItem("crumbslname", false);
|
this.$store.commit("SET_SHOWDATAL", false);
|
window.name = "isReload"; // 在首次进入页面时我们可以给window.name设置一个固定值
|
} else if (window.name == "isReload") {
|
var abb = localStorage.getItem("crumbsl");
|
if (abb) {
|
this.isrf = true;
|
if (this.$store.state.common.liuState == 0) {
|
this.sOld = 0;
|
}
|
console.log("页面被刷新");
|
} else {
|
this.isrf = false;
|
console.log("页面被刷新,但后台没有数据");
|
}
|
}
|
this.loadChange();
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
.breadEval {
|
color: #fff;
|
height: 100%;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.breadTitle {
|
// padding: 20px 30px;
|
padding-left: 20px;
|
background: #19305C;
|
display: flex;
|
justify-content: space-between;
|
.titles {
|
// position: absolute;
|
// top: 17.15px;
|
// left: 5px;
|
font-weight: 400;
|
}
|
.ourCrumbsl {
|
// border: hotpink 1px solid;
|
float: left;
|
font-weight: 400;
|
// position: relative;
|
// top: 11.15px;
|
a {
|
font-weight: 400;
|
color: #fff;
|
}
|
}
|
}
|
.weather {
|
right: 10px;
|
.weatherif {
|
border: transparent;
|
}
|
}
|
}
|
.gaizi {
|
width: 500px;
|
height: 30px;
|
background: transparent;
|
position: absolute;
|
right: 0;
|
color: #fff;
|
}
|
</style>
|
