可视化卡片去除白色背景

hanbaoshan

2020-09-17 ae57e6020e6dc41b42f27d5bf2f4ae653f58cb27

 src/pages/search/index/Searching.vue

@@ -27,7 +27,6 @@
            <el-select
              v-model="tagValues"
              multiple
              @change="searchingBtn"
              :disabled="isDisabled"
              collapse-tags
              size="mini"
@@ -122,16 +121,14 @@
        </div>
        <div ref="mid" style="height:calc(100% - 50px);">
          <div class="left-selection" v-if="VideoPhotoData.uploadDiaplay">
              <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img>
            </div>
          <div id="searchMid" class="mid" :style="{width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'}">
            
            <div
              class="right-section"
              
              ref="scrollContain"
              
            >
            <upload-img ref="uploadImg" @labelDisabled="disabled"></upload-img>
          </div>
          <div
            id="searchMid"
            class="mid"
            :style="{width: VideoPhotoData.uploadDiaplay ? 'calc(100% - 315px)' : '100%'}"
          >
            <div class="right-section" ref="scrollContain">
              <Card
                v-for="(item, index) in VideoPhotoData.cards"
                :class="item.activeObject.id === VideoPhotoData.activeCard ? 'my-active-card' : ''"
@@ -144,20 +141,18 @@
                @addToBase="toAdd"
              ></Card>
              <div class="foot">
              <el-pagination
                :current-page="VideoPhotoData.page"
                @current-change="changePages"
                @size-change="sizeChange"
                :page-sizes="VideoPhotoData.pageSizeOption"
                :page-size="VideoPhotoData.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="VideoPhotoData.total"
              ></el-pagination>
                <el-pagination
                  :current-page="VideoPhotoData.page"
                  @current-change="changePages"
                  @size-change="sizeChange"
                  :page-sizes="VideoPhotoData.pageSizeOption"
                  :page-size="VideoPhotoData.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="VideoPhotoData.total"
                ></el-pagination>
              </div>
            </div>
            </div>
            
          </div>
          
        </div>
        <!-- <div class="foot">
          <el-pagination
@@ -169,7 +164,7 @@
            layout="total, sizes, prev, pager, next, jumper"
            :total="VideoPhotoData.total"
          ></el-pagination>
        </div> -->
        </div>-->
      </div>
    </div>
    <hsc-window-style-metal class="windown-model">
@@ -279,6 +274,9 @@
    this.TreeDataPool.fetchTreeData();
  },
  mounted() {
    debugger
    //this.isShowUpload();
    console.log('search mounted')
    this.$nextTick(() => {
      let scrollContain = this.$refs.scrollContain
      this.VideoPhotoData.scrollContainDom = scrollContain
@@ -303,10 +301,17 @@

    // 暂时关闭跳转 20200730
    // if (this.$route.query.showType === "findByPic") {
    if (this.VideoPhotoData.uploadDiaplay) {
      // this.$nextTick(() => {
      //   this.$refs.uploadImg.rightSectionDisplay = true;
      // });
    if (this.getUrlKey("showType")) {
      this.VideoPhotoData.uploadDiaplay = true;
      // console.log("别处跳过来的以图搜图");
      this.VideoPhotoData.picUrl = this.getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadImg = this.getUrlKey("picSmUrl");
      this.VideoPhotoData.uploadType = true
      this.VideoPhotoData.compTargetId = this.getUrlKey("targetId")
      this.VideoPhotoData.compTargetType = this.getUrlKey("compType")
      this.VideoPhotoData.size = 30
      this.VideoPhotoData.compareTabs = ["esData"];
      this.VideoPhotoData.findPerson2(); // 查找此人
    } else {
      this.searchTime = this.getDateInit();
      this.VideoPhotoData.searchTime = this.getDateInit();
@@ -403,6 +408,7 @@
      console.log("页面模式：", value)
      if (value) {
        this.typeDisable = true;
        this.disabled = true;
      } else {
        this.typeDisable = false;
        this.VideoPhotoData.querySearchList();
@@ -427,6 +433,7 @@
      }
    },
    "VideoPhotoData.uploadDiaplay": function (value) {
      debugger
      this.getHeight();
      console.log("upload的值是：", value)
      if (value) {
@@ -449,6 +456,28 @@
    }
  },
  methods: {
    isShowUpload() {
      console.log('isShowUpload', this.VideoPhotoData.uploadDiaplay)
      this.getHeight();
      console.log("upload的值是：", this.VideoPhotoData.uploadDiaplay)
      if (this.VideoPhotoData.uploadDiaplay) {
        if (!this.VideoPhotoData.uploadType) {
          console.log("uploadDisplay中的刷新");
          let scrollContain = this.$refs.scrollContain
          this.VideoPhotoData.scrollContainDom = scrollContain
          this.VideoPhotoData.showType = "search";
          // this.VideoPhotoData.querySearchList();
          //this.setLoadSearch(this.VideoPhotoData.querySearchList());
          this.isDisabled = false;
        } else {
          //this.VideoPhotoData.scrollContainDom = '';
          this.VideoPhotoData.showType = "findByPic";
        }
      } else {
        this.VideoPhotoData.uploadType = false;
        this.VideoPhotoData.showType = "search";
      }
    },
    resizeWidth(w) {
      this.defaultWidth = w;
    },
@@ -459,7 +488,11 @@
      let w = this.$refs.mid.offsetWidth;
      let integer = parseInt(w / 330);
      let integerSearchImg = parseInt((w - 300) / 325);
      this.handleSizeChange(integer, integerSearchImg);

      // 取消size修改
      // console.log(integer, integerSearchImg)
      // this.handleSizeChange(integer, integerSearchImg);

      this.cardWidth = `calc(${100 / integer}% - 20px)`;
      this.searchImgCardWidth = `calc(${100 / integerSearchImg}% - 20px)`;
    },
@@ -523,7 +556,6 @@
      })
    },
    getDetails(ev, index) {
      debugger
      //let obj = this.CardList.datalist[index];
      this.CardList.datalist = this.VideoPhotoData.cards;
      let obj = this.CardList.datalist[index];
@@ -534,7 +566,6 @@
      this.VideoPhotoData.activeCard = obj.activeObject.id;
    },
    toAdd(item) {
      debugger
      this.CardList.addBaseList.push(item)
    },
    handleClose(done) {
@@ -704,6 +735,9 @@
      fn.then(_ => {
        this.AuthData.closeLoad();
      })
    },
    getUrlKey(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
    }
  }
};
@@ -811,9 +845,20 @@
  white-space: nowrap;
  text-overflow: ellipsis;
}
.titlebar {
  height: 10px !important;
  background: #fff !important;
  .button {
    position: absolute;
    font-size: 25px !important;
    right: 10px;
    top: 10px;
    z-index: 3;
  }
}
.addToBase {
  width: 98%;
  height: 450px;
  height: 430px;
  position: relative;
  .topLabel {
    margin-top: 20px;
@@ -898,7 +943,7 @@
      }
    }
  }
  

  .right-section {
    //width: calc(100% - 315px);
    height: 100%;