From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/components/subComponents/CardItem.vue | 164 +++++++++++++++++++++++++++++++++++------------------- 1 files changed, 105 insertions(+), 59 deletions(-) diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue index d57617e..077aea4 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'"> @@ -88,7 +85,7 @@ @mouseleave="cardMouseleave($event)" > <p> - <span class="fontStyle color222">{{ data.picDate }}</span> + <span class="fontStyle color222">{{ data.picDate | formatTime}}</span> </p> <p style="margin-bottom: 8px;"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> @@ -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"> @@ -226,7 +223,7 @@ @mouseleave="cardMouseleave($event)" > <p :title="data.picDate"> - <span class="fontStyle color222">{{ data.picDate }}</span> + <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> </p> <p :title="data.cameraAddr" style="margin-bottom: 8px;"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> @@ -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 @@ -316,7 +313,7 @@ <span v-else>{{ data.baseInfo[0].compareScore | percentage}}</span> </p> <p :title="data.picDate"> - <span class="fontStyle color222">{{ data.picDate }}</span> + <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> </p> <p :title="data.cameraAddr" style="margin-bottom: 8px;"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> @@ -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> @@ -465,7 +456,7 @@ > <div> <p :title="data.picDate"> - <span class="fontStyle color222">{{ data.picDate }}</span> + <span class="fontStyle color222">{{ data.picDate | formatTime }}</span> </p> <p :title="data.cameraAddr" style="margin-bottom: 8px;"> <span class="fontStyle color222">{{ data.cameraAddr }}</span> @@ -484,9 +475,26 @@ </template> <script> +Date.prototype.Format = function (fmt) { + var o = { + "M+": this.getMonth() + 1, //鏈堜唤 + "d+": this.getDate(), //鏃� + "H+": this.getHours(), //灏忔椂 + "m+": this.getMinutes(), //鍒� + "s+": this.getSeconds(), //绉� + "q+": Math.floor((this.getMonth() + 3) / 3), //瀛e害 + "S": this.getMilliseconds() //姣 + }; + if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); + for (var k in o) + if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); + return fmt; +} + export default { mounted() { - window.addEventListener("resize", this.watchWindow); + //window.addEventListener("resize", this.watchWindow); + window.addEventListener("resize", this.getBottom) }, props: { data: { @@ -496,7 +504,12 @@ showType: { type: String, default: "search" - } + }, + fromCluster: { + type: Boolean, + default: false + }, + searchT: {} }, computed: { isId() { @@ -504,8 +517,33 @@ } }, filters: { + formatTime(t) { + return new Date(t).Format("yyyy-MM-dd HH:mm:ss") + }, 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() { @@ -520,7 +558,6 @@ watch: { data: { handler(val, oldVal) { - console.log('鏁版嵁鍙戠敓鍙樺寲') this.$forceUpdate() }, deep: true @@ -528,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) { @@ -559,20 +597,22 @@ this.$emit("detailsClick", ev); }, toAdd(item) { - console.log("瑙﹀彂鍔犲叆搴曞簱") this.$emit("addToBase", item); }, tosearch(item) { - console.log('search') + 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 // 鏁版嵁鏉ヨ嚜浜庡簳搴� } - // window.open(href + '?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + url + '&compType=' + compType) - - 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 }, "*") @@ -585,15 +625,15 @@ 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; @@ -615,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 { @@ -628,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; @@ -667,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