<template>
|
<div class="window-view">
|
<hsc-window-style-metal class="windown-model">
|
<hsc-window
|
v-for="(item, index) in CardList.details"
|
:closeButton="true"
|
@closebuttonclick="closeWindow(index)"
|
@update:height="resizeHeight"
|
@update:width="resizeWidth"
|
:key="index"
|
style="background:white; height:475px"
|
:left="center.x + index * 10"
|
:top="center.y + index * 10"
|
:resizable="true"
|
positionHint="center"
|
:isScrollable="true"
|
:minWidth="662"
|
:minHeight="479"
|
:maxWidth="10000"
|
:maxHeight="7000"
|
:height="defaultHeight"
|
:width="defaultWidth"
|
>
|
<div v-if="item.list.length == 1" style="height: calc(100% - 50px)">
|
<model-card :data="item.list[0]"></model-card>
|
</div>
|
<el-carousel v-else height="calc(100% - 50px);" :autoplay="false">
|
<el-carousel-item
|
v-for="(subitem, subindex) in item.list"
|
:key="subindex"
|
height="100%"
|
>
|
<model-card
|
:data="subitem"
|
:activeName="type"
|
@changeType="changeType"
|
:list="item.list"
|
></model-card>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="model-bottom">
|
<p class="model-bottom-left" @click="upPage(item.list, index)">
|
<i class="el-icon-arrow-left"></i>
|
上一个
|
</p>
|
<p class="model-bottom-right" @click="nextPage(item.list, index)">
|
下一个
|
<i class="el-icon-arrow-right"></i>
|
</p>
|
</div>
|
</hsc-window>
|
</hsc-window-style-metal>
|
</div>
|
</template>
|
<script>
|
import ModelCard from '@/components/subComponents/ModelCard'
|
export default {
|
name: 'cardWindow',
|
components: {
|
ModelCard
|
},
|
data() {
|
return {
|
center: '',
|
type: 'pic',
|
defaultHeight: 432,
|
defaultWidth: 600
|
}
|
},
|
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'
|
})
|
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
|
console.log('datalist:', this.CardList.datalist)
|
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'
|
})
|
}
|
this.autoScrollDown()
|
// let target = driver.find_elements_by_class_name("my-active-card")
|
// let target = window.scroll
|
// console.log(target,'选择得元素')
|
// driver.execute_script("arguments[0].scrollIntoView();", target)
|
},
|
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'
|
})
|
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'
|
})
|
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
|
}
|
})
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.layout {
|
min-width: 1350px;
|
overflow: auto;
|
}
|
.window-view {
|
width: 100%;
|
height: auto;
|
// height: 100%;
|
// min-height: 684px;
|
overflow: auto;
|
.router-view {
|
float: left;
|
height: 100%;
|
width: calc(100% - 350px);
|
}
|
.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 {
|
//box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.07);
|
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;
|
//position: relative;
|
//z-index: 5;
|
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;
|
}
|
}
|
</style>
|
