| | |
| | | <template> |
| | | <div class="window-view"> |
| | | <div class="window-view" @mouseleave="log($event)"> |
| | | <hsc-window-style-metal class="windown-model"> |
| | | <hsc-window |
| | | v-for="(item, index) in CardList.details" |
| | | :closeButton="true" |
| | | @closebuttonclick="closeWindow(index)" |
| | | :key="index" |
| | | style="background:white; " |
| | | style="background: white" |
| | | :left="center.x + index * 10" |
| | | :top="center.y + index * 10" |
| | | :resizable="true" |
| | |
| | | <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%"> |
| | | <el-carousel-item |
| | | v-for="(subitem, subindex) in item.list" |
| | | :key="subindex" |
| | | height="100%" |
| | | > |
| | | <model-card |
| | | :data="subitem" |
| | | :activeName="type" |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import bus from '@/plugin/bus' |
| | | import ModelCard from '@/components/subComponents/ModelCard' |
| | | import bus from "@/plugin/bus"; |
| | | import ModelCard from "@/components/subComponents/ModelCard"; |
| | | export default { |
| | | name: 'cardWindow', |
| | | name: "cardWindow", |
| | | components: { |
| | | ModelCard |
| | | ModelCard, |
| | | }, |
| | | data() { |
| | | return { |
| | | center: '', |
| | | type: 'pic', |
| | | center: "", |
| | | type: "pic", |
| | | defaultHeight: 432, |
| | | defaultWidth: 600 |
| | | } |
| | | defaultWidth: 600, |
| | | }; |
| | | }, |
| | | mounted() { |
| | | this.getCenter(); |
| | |
| | | getCenter() { |
| | | this.center = { |
| | | x: document.documentElement.clientWidth / 2 - 250, |
| | | y: document.documentElement.clientHeight / 2 - 200 |
| | | y: document.documentElement.clientHeight / 2 - 200, |
| | | }; |
| | | }, |
| | | resizeWidth(w) { |
| | | this.defaultWidth = w |
| | | this.defaultWidth = w; |
| | | }, |
| | | resizeHeight(h) { |
| | | this.defaultHeight = h |
| | | this.defaultHeight = h; |
| | | }, |
| | | changeType(str) { |
| | | this.type = str |
| | | this.type = str; |
| | | }, |
| | | async closeWindow(index) { |
| | | let tempPage = JSON.stringify(this.CardList.details[index].ownerPage) |
| | | this.CardList.details.splice(index, 1) |
| | | 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] |
| | | let len = this.CardList.details.length; |
| | | let currentObj = this.CardList.details[len - 1]; |
| | | if (Number(tempPage) === currentObj.ownerPage) { |
| | | this.VideoPhotoData.activeCard = currentObj.activeObject.id |
| | | 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 |
| | | 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 = '' |
| | | this.VideoPhotoData.activeCard = ""; |
| | | } |
| | | }, |
| | | async nextPage(dataInfo, index) { |
| | | console.log(this) |
| | | debugger |
| | | let id = dataInfo[0].id |
| | | let res = this.CardList.getBehindEle(id) |
| | | 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 |
| | | 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 |
| | | title: "注意", |
| | | message: "已无数据更新!", |
| | | type: "warning", |
| | | }); |
| | | return; |
| | | } |
| | | this.VideoPhotoData.page += 1 |
| | | let detailsLen |
| | | let len |
| | | 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 |
| | | 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 |
| | | 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.$set(this.CardList.details, index, this.CardList.datalist[0]); |
| | | this.$notify({ |
| | | title: '更新数据', |
| | | message: '已跳转到下一页!', |
| | | type: 'warning' |
| | | }) |
| | | title: "更新数据", |
| | | message: "已跳转到下一页!", |
| | | type: "warning", |
| | | }); |
| | | } |
| | | this.autoScrollDown() |
| | | 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) { |
| | | console.log('上一页') |
| | | let id = dataInfo[0].id |
| | | let res = this.CardList.getFrontEle(id) |
| | | console.log("上一页"); |
| | | 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() |
| | | 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 |
| | | title: "注意", |
| | | message: "已无数据更新!", |
| | | type: "warning", |
| | | }); |
| | | return; |
| | | } |
| | | this.VideoPhotoData.page -= 1 |
| | | let detailsLen |
| | | let len |
| | | 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 |
| | | 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 |
| | | 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.$set( |
| | | this.CardList.details, |
| | | index, |
| | | this.CardList.datalist[len - 1] |
| | | ); |
| | | |
| | | this.$notify({ |
| | | title: '更新数据', |
| | | message: '已跳转到上一页!', |
| | | type: 'warning' |
| | | }) |
| | | this.autoScrollDown(1) |
| | | 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 |
| | | 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 |
| | | scrollTop + offsetHeight + 160; |
| | | return; |
| | | } |
| | | if (dom.offsetTop > scrollTop + offsetHeight) { |
| | | this.VideoPhotoData.scrollContainDom.scrollTop = |
| | | scrollTop + offsetHeight + 80 |
| | | return |
| | | 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 |
| | | 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 |
| | | scrollTop - offsetHeight; |
| | | } |
| | | }) |
| | | }); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | log() { |
| | | this.$refs["hscw"][0].draggableHelper.unbindMove && |
| | | this.$refs["hscw"][0].draggableHelper.unbindMove(); |
| | | |
| | | this.$refs["hscw"][0].draggableHelper.unbindUp && |
| | | this.$refs["hscw"][0].draggableHelper.unbindUp(); |
| | | |
| | | this.$refs["hscw"][0].draggableHelper.unbindUp = this.$refs[ |
| | | "hscw" |
| | | ][0].draggableHelper.unbindMove = undefined; |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | <style lang="scss"> |
| | | .layout { |
| | |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | |