From 7656962ded2a6ccbe3eae75304b3789662d82711 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 26 一月 2022 16:01:56 +0800
Subject: [PATCH] 集群改动
---
src/components/subComponents/CardItem.vue | 126 ++++++++++++++++++++++++++----------------
1 files changed, 78 insertions(+), 48 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index 9261c4e..063f9af 100644
--- a/src/components/subComponents/CardItem.vue
+++ b/src/components/subComponents/CardItem.vue
@@ -7,7 +7,7 @@
<div class="card-img-box-compear">
<div class="card-img-box-compear-left" ref="firstImg">
<img
- :src="'/httpImage/'+data.targetInfo[0].picSmUrl+'?width=160'"
+ :src="data.targetInfo[0].picSmUrl | httpImage"
:id="'/compear/'+data.targetInfo[0].picSmUrl"
class="cursor-pointer"
@click="detailsClick($event)"
@@ -22,7 +22,7 @@
>
<el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
<img
- :src="'/httpImage/'+item.targetPicUrl+'?width=160'"
+ :src="item.targetPicUrl | httpImage"
class="cursor-pointer"
@click="detailsClick($event)"
/>
@@ -31,9 +31,8 @@
</div>
<div
class="s-card-left-isCompare-div compareScore111"
- style
:style="{
- bottom: getBottom(),
+ bottom: '0',
background: getUrl(data.baseInfo[initialIndex].bwType)
}"
>
@@ -54,30 +53,28 @@
@change="changeCarousel"
>
<el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'">
- <img
- :src="'/httpImage/'+item+'?width=160'"
- class="cursor-pointer"
- @click="detailsClick($event)"
- />
+ <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 == ''"
- :src="'/httpImage/'+data.picMaxUrl[0]+'?width=160'"
+ v-else-if="data.targetInfo == null || data.targetInfo[0].targetType !== 'FaceDetect'"
+ :src="data.picMaxUrl[0] | httpImage"
class="cursor-pointer"
@click="detailsClick($event)"
/>
<img
v-else
- :src="'/httpImage/'+data.targetInfo[0].picSmUrl+'?width=160'"
+ :src="data.targetInfo[0].picSmUrl | httpImage"
class="cursor-pointer"
@click="detailsClick($event)"
/>
</div>
<div class="s-card-left-box" v-else>
- <img :src="'/httpImage/'+data.baseInfo[0].targetPicUrl+'?width=160'" 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'">
@@ -133,7 +130,7 @@
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].labels"
- >/ {{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[initialIndex].labels | idCard}}</span>
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].monitorLevel"
@@ -159,7 +156,7 @@
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].labels"
- >/ {{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[initialIndex].labels | idCard}}</span>
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].monitorLevel"
@@ -205,7 +202,7 @@
<span>{{ data.baseInfo[0].targetName }}</span>
<span
v-if="data.baseInfo[0].labels"
- >/ {{ data.baseInfo[0].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[0].labels | idCard}}</span>
</p>
</div>
<div class="card-icon-box">
@@ -298,7 +295,7 @@
<!-- 娌℃湁搴曞簱锛岄潪姣斿锛屾櫘閫氭ā寮� 涓�瀹氭湁targetInfo锛屽苟涓攖argetInfo涓暟涓�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
@@ -358,15 +355,12 @@
<div slot="content">
<p v-for="(item,index) in data.baseInfo" :key="index+'base1'">
<span class="fontStyle">{{item.tableName}}</span>
- <span class="fontStyle" v-if="item.targetName !== ''">/ {{item.targetName}}</span>
+ <span class="fontStyle" v-if="item.targetName.length">/ {{item.targetName}}</span>
<span
class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[1] !== ''"
- >/ {{item.labels.split("/")[1]}}</span>
- <span
- class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[0] !== ''"
- >/ {{item.labels.split("/")[0]}}</span>
+ v-if="item.labels.length"
+ >/ {{item.labels | idCard}}</span>
+ <span class="fontStyle" v-if="item.labels.length">/ {{item.labels | sex}}</span>
</p>
</div>
<el-button
@@ -378,15 +372,12 @@
:style="item.bwType == '1' ? 'color:red;font-size:12px;line-height:20px':'font-size:12px;line-height:20px'"
>
<span class="fontStyle">{{item.tableName}}</span>
- <span class="fontStyle" v-if="item.targetName !== ''">/ {{item.targetName}}</span>
+ <span class="fontStyle" v-if="item.targetName.length">/ {{item.targetName}}</span>
<span
class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[1] !== ''"
- >/ {{item.labels.split("/")[1]}}</span>
- <span
- class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[0] !== ''"
- >/ {{item.labels.split("/")[0]}}</span>
+ v-if="item.labels.length"
+ >/ {{item.labels | idCard}}</span>
+ <span class="fontStyle" v-if="item.labels.length">/ {{item.labels |sex }}</span>
</span>
</el-button>
</el-tooltip>
@@ -502,7 +493,8 @@
export default {
mounted() {
- window.addEventListener("resize", this.watchWindow);
+ //window.addEventListener("resize", this.watchWindow);
+ window.addEventListener("resize", this.getBottom)
},
props: {
data: {
@@ -512,7 +504,12 @@
showType: {
type: String,
default: "search"
- }
+ },
+ fromCluster: {
+ type: Boolean,
+ default: false
+ },
+ searchT: {}
},
computed: {
isId() {
@@ -525,6 +522,28 @@
},
percentage(score) {
return score.toFixed(2) + "%"
+ },
+ idCard(v) {
+ try {
+ let obj = JSON.parse(v)
+ return obj.idCard
+ } catch (error) {
+ return v.split("/")[1]
+ }
+ },
+ sex(v) {
+ try {
+ let obj = JSON.parse(v)
+ return obj.sex
+ } catch (error) {
+ return v.split("/")[0]
+ }
+ },
+ httpImage(url) {
+ if (!url.length) {
+ return ""
+ }
+ return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
}
},
data() {
@@ -546,13 +565,14 @@
},
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) {
@@ -580,15 +600,19 @@
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 // 鏁版嵁鏉ヨ嚜浜巈s
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
}, "*")
@@ -631,11 +655,11 @@
.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 {
@@ -644,8 +668,13 @@
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;
@@ -683,9 +712,10 @@
}
}
img {
+ display: block;
width: 100%;
- height: 100%;
- object-fit: contain;
+ //height: 100%;
+ //object-fit: contain;
}
.s-card-left-isCompare-div {
width: 60px;
--
Gitblit v1.8.0