<template>
|
<div class="layout">
|
<top-nav></top-nav>
|
<div class="router-view-box">
|
<left-nav v-if="!$route.meta.hideNav" ref="leftNav"></left-nav>
|
<!-- <keep-alive include="productcenter,shoppingcart"> -->
|
<router-view
|
v-loading="AuthData.loading"
|
id="routerView"
|
class="router-view"
|
:class="{ 'right-main-container': !$route.meta.hideNav }"
|
:style="{ width: $route.meta.hideNav ? '100%' : 'calc(100% - 260px)' }"
|
/>
|
<!-- </keep-alive> -->
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import LeftNav from "../components/LeftNav.vue";
|
import TopNav from "../components/TopNav.vue";
|
import bus from "../main";
|
export default {
|
mounted() {
|
this.showLeftNavFun(this.$route.path);
|
this.screenHeight = document.documentElement.clientHeight - 72;
|
this.getCenter();
|
window.onresize = () => {
|
return (() => {
|
this.screenHeight = document.documentElement.clientHeight - 72;
|
this.getCenter();
|
})();
|
};
|
},
|
beforeDestroy() {
|
window.onresize = null;
|
},
|
components: {
|
LeftNav,
|
TopNav,
|
},
|
watch: {
|
$route(to, from) {
|
this.showLeftNavFun(to.path);
|
},
|
},
|
computed: {},
|
data() {
|
return {
|
screenHeight: 0,
|
center: "",
|
type: "pic",
|
defaultHeight: 432,
|
defaultWidth: 600,
|
showLeftNav: true,
|
viewWidth: {
|
width: this.$route.meta.hideNav ? "100%" : "calc(100% - 300px)",
|
},
|
};
|
},
|
methods: {
|
resizeWidth(w) {
|
this.defaultWidth = w;
|
},
|
resizeHeight(h) {
|
this.defaultHeight = h;
|
},
|
changeType(str) {
|
this.type = str;
|
},
|
async closeWindow(index) {
|
let tempPage = JSON.stringify(this.CardList.details[index].ownerPage);
|
this.CardList.details.splice(index, 1);
|
if (this.CardList.details.length > 0) {
|
let len = this.CardList.details.length;
|
let currentObj = this.CardList.details[len - 1];
|
if (Number(tempPage) === currentObj.ownerPage) {
|
this.VideoPhotoData.activeCard = currentObj.activeObject.id;
|
} else {
|
this.VideoPhotoData.page = currentObj.ownerPage;
|
await this.VideoPhotoData.querySearchList();
|
bus.$emit("changePage", this.VideoPhotoData.page);
|
this.CardList.datalist = this.VideoPhotoData.cards;
|
this.VideoPhotoData.activeCard = currentObj.activeObject.id;
|
}
|
} else {
|
this.VideoPhotoData.activeCard = "";
|
}
|
},
|
async nextPage(dataInfo, index) {
|
let id = dataInfo[0].id;
|
let res = this.CardList.getBehindEle(id);
|
if (res) {
|
this.$set(this.CardList.details, index, res);
|
this.VideoPhotoData.activeCard = res.activeObject.id;
|
} else {
|
if (
|
this.VideoPhotoData.total <=
|
this.VideoPhotoData.page * this.VideoPhotoData.size
|
) {
|
this.$notify({
|
title: "注意",
|
message: "已无数据更新!",
|
type: "warning",
|
duration: 2500,
|
offset: 57,
|
});
|
return;
|
}
|
this.VideoPhotoData.page += 1;
|
let detailsLen;
|
let len;
|
if (this.VideoPhotoData.uploadDiaplay) {
|
await this.VideoPhotoData.findPersonByPage();
|
bus.$emit("changePage", this.VideoPhotoData.page);
|
this.CardList.datalist = this.VideoPhotoData.persons;
|
detailsLen = this.CardList.details.length;
|
len = this.VideoPhotoData.persons.length;
|
this.VideoPhotoData.activeCard =
|
this.VideoPhotoData.persons[0].activeObject.id;
|
} else {
|
await this.VideoPhotoData.querySearchList();
|
bus.$emit("changePage", this.VideoPhotoData.page);
|
this.CardList.datalist = this.VideoPhotoData.cards;
|
detailsLen = this.CardList.details.length;
|
len = this.VideoPhotoData.cards.length;
|
this.VideoPhotoData.activeCard =
|
this.VideoPhotoData.cards[0].activeObject.id;
|
}
|
this.$set(this.CardList.details, index, this.CardList.datalist[0]);
|
this.$notify({
|
title: "更新数据",
|
message: "已跳转到下一页！",
|
type: "warning",
|
duration: 2500,
|
offset: 57,
|
});
|
}
|
this.autoScrollDown();
|
},
|
async upPage(dataInfo, index) {
|
let id = dataInfo[0].id;
|
let res = this.CardList.getFrontEle(id);
|
if (res) {
|
this.$set(this.CardList.details, index, res);
|
this.VideoPhotoData.activeCard = res.activeObject.id;
|
this.autoScrollUp();
|
} else {
|
if (this.VideoPhotoData.page === 1) {
|
this.$notify({
|
title: "注意",
|
message: "已无数据更新!",
|
type: "warning",
|
duration: 2500,
|
offset: 57,
|
});
|
return;
|
}
|
this.VideoPhotoData.page -= 1;
|
let detailsLen;
|
let len;
|
if (this.VideoPhotoData.uploadDiaplay) {
|
await this.VideoPhotoData.findPersonByPage();
|
bus.$emit("changePage", this.VideoPhotoData.page);
|
this.CardList.datalist = this.VideoPhotoData.persons;
|
detailsLen = this.CardList.details.length;
|
len = this.VideoPhotoData.persons.length;
|
this.VideoPhotoData.activeCard =
|
this.VideoPhotoData.persons[len - 1].activeObject.id;
|
} else {
|
await this.VideoPhotoData.querySearchList();
|
bus.$emit("changePage", this.VideoPhotoData.page);
|
this.CardList.datalist = this.VideoPhotoData.cards;
|
detailsLen = this.CardList.details.length;
|
len = this.VideoPhotoData.cards.length;
|
this.VideoPhotoData.activeCard =
|
this.VideoPhotoData.cards[len - 1].activeObject.id;
|
}
|
this.$set(
|
this.CardList.details,
|
index,
|
this.CardList.datalist[len - 1]
|
);
|
|
this.$notify({
|
title: "更新数据",
|
message: "已跳转到上一页！",
|
type: "warning",
|
duration: 2500,
|
offset: 57,
|
});
|
this.autoScrollDown(1);
|
}
|
},
|
autoScrollDown(arg) {
|
//arg == 1 表示向前翻页直接滚到底，为0或空 表示本页内滚动
|
if (this.VideoPhotoData.scrollContainDom) {
|
this.$nextTick(() => {
|
let dom = document.getElementsByClassName("my-active-card")[0];
|
let scrollTop = this.VideoPhotoData.scrollContainDom.scrollTop;
|
let offsetHeight = this.VideoPhotoData.scrollContainDom.offsetHeight;
|
if (arg == 1) {
|
this.VideoPhotoData.scrollContainDom.scrollTop =
|
scrollTop + offsetHeight + 160;
|
return;
|
}
|
if (dom.offsetTop > scrollTop + offsetHeight) {
|
this.VideoPhotoData.scrollContainDom.scrollTop =
|
scrollTop + offsetHeight + 80;
|
return;
|
}
|
});
|
}
|
},
|
autoScrollUp() {
|
if (this.VideoPhotoData.scrollContainDom) {
|
this.$nextTick(() => {
|
let dom = document.getElementsByClassName("my-active-card")[0];
|
let scrollTop = this.VideoPhotoData.scrollContainDom.scrollTop;
|
let offsetHeight = this.VideoPhotoData.scrollContainDom.offsetHeight;
|
if (dom.offsetTop < scrollTop && scrollTop !== 0) {
|
this.VideoPhotoData.scrollContainDom.scrollTop =
|
scrollTop - offsetHeight;
|
}
|
});
|
}
|
},
|
showLeftNavFun(path) {
|
switch (path) {
|
case "/Layout/TaskManage":
|
case "/Layout/SystemManage":
|
case "/Layout/DataManage":
|
this.showLeftNav = false;
|
break;
|
default:
|
this.showLeftNav = true;
|
break;
|
}
|
},
|
getCenter() {
|
this.center = {
|
x: document.documentElement.clientWidth / 2 - 250,
|
y: document.documentElement.clientHeight / 2 - 200,
|
};
|
},
|
},
|
beforeRouteUpdate(to, from, next) {
|
// this.$refs["leftNav"].activeIndex = to.path;
|
next();
|
},
|
};
|
</script>
|
<style lang="scss">
|
.layout {
|
min-width: 1350px;
|
position: relative;
|
//min-height:100%;
|
//height: 100%;
|
}
|
.router-view-box {
|
width: 100%;
|
height: calc(100% - 50px);
|
display: flex;
|
justify-content: flex-start;
|
.router-view {
|
flex: 1;
|
min-height: calc(100vh - 50px);
|
background: #f4f4f4;
|
}
|
|
.windown-model {
|
.content {
|
position: absolute;
|
top: 5px;
|
z-index: 20000;
|
.el-tabs__nav {
|
z-index: 20000;
|
}
|
}
|
.el-carousel {
|
.el-carousel__container {
|
height: calc(100% - 10px);
|
.el-carousel__arrow:hover {
|
background-color: rgba(102, 102, 102);
|
}
|
.el-carousel__arrow--right {
|
right: 42%;
|
}
|
.el-carousel__arrow--left {
|
left: 42%;
|
}
|
}
|
}
|
.el-tabs__nav {
|
padding-left: 20px;
|
.el-tabs__active-bar {
|
width: 40px;
|
margin-left: 20px;
|
}
|
.el-tabs__item {
|
font-size: 18px;
|
}
|
}
|
.titlebar {
|
background: #fff !important;
|
height: 10px !important;
|
padding: 0px;
|
position: relative;
|
z-index: 30000;
|
.button {
|
font-size: 25px;
|
margin: 5px;
|
top: 10px;
|
}
|
}
|
.button {
|
background-color: transparent;
|
border: none;
|
font-size: medium;
|
margin: 0;
|
padding: 0 0.25em;
|
border-radius: 4pt;
|
cursor: pointer;
|
}
|
.el-carousel__indicators {
|
display: none;
|
}
|
.el-carousel {
|
height: calc(100% - 50px);
|
}
|
.el-carousel__arrow {
|
bottom: -25px !important;
|
top: inherit !important;
|
}
|
.model-bottom {
|
width: 100%;
|
height: 45px;
|
line-height: 45px;
|
font-size: 15px;
|
color: #222222;
|
.model-bottom-left,
|
.model-bottom-right {
|
cursor: pointer;
|
padding: 0px 10px;
|
}
|
.model-bottom-left {
|
float: left;
|
}
|
.model-bottom-right {
|
float: right;
|
}
|
.model-bottom-left:hover {
|
color: #3d68e1;
|
}
|
.model-bottom-right:hover {
|
color: #3d68e1;
|
}
|
}
|
}
|
}
|
.close-tree-log {
|
position: absolute;
|
width: 32px;
|
height: 41px;
|
float: left;
|
top: 48px;
|
box-sizing: border-box;
|
background: #ffffff;
|
box-shadow: 0 -3px 36px 0 rgba(0, 0, 0, 0.19);
|
border-top-right-radius: 3em;
|
border-bottom-right-radius: 3em;
|
i {
|
position: relative;
|
top: -4px;
|
left: -5px;
|
font-size: 24px;
|
color: #3d68e1;
|
cursor: pointer;
|
}
|
}
|
.cursor-pointer {
|
cursor: pointer;
|
}
|
</style>
|
