| | |
| | | </div> |
| | | <div |
| | | class="s-card-left-isCompare-div compareScore111" |
| | | style |
| | | :style="{ |
| | | bottom: getBottom(), |
| | | bottom: '0', |
| | | background: getUrl(data.baseInfo[initialIndex].bwType) |
| | | }" |
| | | > |
| | |
| | | <img :src="item | httpImage" class="cursor-pointer" @click="detailsClick($event)" /> |
| | | </el-carousel-item> |
| | | </el-carousel> |
| | | <!-- 暂时认为只有人脸抓拍的报警, 首页显示小图, 其他时间均显示大图 --> |
| | | <img |
| | | v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" |
| | | v-else-if="data.targetInfo == null || data.targetInfo[0].targetType !== 'FaceDetect'" |
| | | :src="data.picMaxUrl[0] | httpImage" |
| | | class="cursor-pointer" |
| | | @click="detailsClick($event)" |
| | |
| | | /> |
| | | </div> |
| | | <div class="s-card-left-box" v-else> |
| | | <img :src="data.baseInfo[0] | httpImage" class="cursor-pointer" /> |
| | | <img :src="data.baseInfo[0].targetPicUrl | httpImage" class="cursor-pointer" /> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 右侧文字区域 --> |
| | | <!-- 多张底图切换 --> |
| | | <div class="s-card-right-isCompare" v-if="showType == 'compare'"> |
| | |
| | | |
| | | <!-- 没有底库,非比对,普通模式 一定有targetInfo,并且targetInfo个数为1--> |
| | | <div |
| | | v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== '' && data.targetInfo.length == 1" |
| | | v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''" |
| | | class="s-card-right-signal" |
| | | > |
| | | <div |
| | |
| | | |
| | | export default { |
| | | mounted() { |
| | | window.addEventListener("resize", this.watchWindow); |
| | | //window.addEventListener("resize", this.watchWindow); |
| | | window.addEventListener("resize", this.getBottom) |
| | | }, |
| | | props: { |
| | | data: { |
| | |
| | | showType: { |
| | | type: String, |
| | | default: "search" |
| | | } |
| | | }, |
| | | fromCluster: { |
| | | type: Boolean, |
| | | default: false |
| | | }, |
| | | searchT: {} |
| | | }, |
| | | computed: { |
| | | isId() { |
| | |
| | | } |
| | | }, |
| | | httpImage(url) { |
| | | if (!url.length) { |
| | | return "" |
| | | } |
| | | return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160' |
| | | } |
| | | }, |
| | |
| | | }, |
| | | methods: { |
| | | getBottom() { |
| | | // let imgDom = document.getElementById(str) |
| | | let imgDom = this.$refs.firstImg |
| | | if (imgDom) { |
| | | let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2 |
| | | return `${num}px`; |
| | | } |
| | | return `4px`; |
| | | this.$nextTick(() => { |
| | | let imgDom = this.$refs.firstImg |
| | | if (imgDom) { |
| | | let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2 |
| | | return `${num}px`; |
| | | } |
| | | return `4px`; |
| | | }) |
| | | }, |
| | | getUrl(bwtype) { |
| | | if (bwtype == 1) { |
| | |
| | | this.$emit("addToBase", item); |
| | | }, |
| | | tosearch(item) { |
| | | this.searchT |
| | | let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id |
| | | let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl |
| | | let compType = 1 // 数据来自于es |
| | | if (!item.id || item.id == "") { |
| | | compType = 0 // 数据来自于底库 |
| | | } |
| | | |
| | | let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime(); |
| | | //let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType; |
| | | let message |
| | | if (this.fromCluster) { |
| | | message = 'toCluster?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1]; |
| | | } else { |
| | | message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1]; |
| | | } |
| | | window.parent.postMessage({ |
| | | msg: message |
| | | }, "*") |
| | |
| | | font-family: PingFangSC-Medium; |
| | | } |
| | | .color222 { |
| | | font-size: 0.75rem; |
| | | font-size: 12px; |
| | | font-weight: 600; |
| | | line-height: 1rem; |
| | | line-height: 14px; |
| | | color: #222222; |
| | | } |
| | | .color666 { |
| | | color: #666666; |
| | | font-size: 0.75rem; |
| | | line-height: 1.25rem; |
| | | font-size: 12px; |
| | | line-height: 16px; |
| | | } |
| | | .box-card { |
| | | cursor: default; |
| | |
| | | .card-img-box { |
| | | box-sizing: border-box; |
| | | width: 100%; |
| | | height: 100%; |
| | | position: relative; |
| | | overflow: hidden; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | .card-img-box-compear { |
| | | height: 100%; |
| | | width: 100%; |
| | | display: flex; |
| | | .card-img-box-compear-left { |
| | |
| | | justify-content: center; |
| | | align-items: Center; |
| | | overflow: hidden; |
| | | width: 100%; |
| | | flex: 1; |
| | | height: 100%; |
| | | } |
| | | .el-carousel { |
| | | flex: 1; |
| | | width: auto; |
| | | height: auto !important; |
| | | } |
| | | .el-carousel__item { |
| | | display: flex; |
| | |
| | | } |
| | | } |
| | | img { |
| | | display: block; |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: contain; |
| | | //height: 100%; |
| | | //object-fit: contain; |
| | | } |
| | | .s-card-left-isCompare-div { |
| | | width: 60px; |