zhangzengfei
2022-07-20 4a800a8fc83c6bd1f86a8e847b079a51a7532c09
src/components/cardWindow.vue
@@ -1,14 +1,12 @@
<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)"
        @update:height="resizeHeight"
        @update:width="resizeWidth"
        :key="index"
        style="background:white; height:475px"
        style="background: white"
        :left="center.x + index * 10"
        :top="center.y + index * 10"
        :resizable="true"
@@ -20,12 +18,17 @@
        :maxHeight="7000"
        :height="defaultHeight"
        :width="defaultWidth"
        ref="hscw"
      >
        <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%">
          <el-carousel-item
            v-for="(subitem, subindex) in item.list"
            :key="subindex"
            height="100%"
          >
            <model-card
              :data="subitem"
              :activeName="type"
@@ -49,19 +52,20 @@
  </div>
</template>
<script>
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();
@@ -75,170 +79,186 @@
    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) {
      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) {
      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 {
@@ -370,3 +390,5 @@
  }
}
</style>