From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 04 二月 2021 18:22:54 +0800
Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域
---
src/components/subComponents/CardItem.vue | 162 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 97 insertions(+), 65 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index ea7c753..3938e06 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,28 +53,24 @@
@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'"
+ :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] | httpImage" class="cursor-pointer" />
</div>
</div>
<!-- 鍙充晶鏂囧瓧鍖哄煙 -->
@@ -88,7 +83,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 +128,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 +154,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 +200,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 +221,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>
@@ -316,7 +311,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 +353,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 +370,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 +454,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 +473,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), //瀛ｅ害
+ "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);
+ mounted () {
+ //window.addEventListener("resize", this.watchWindow);
+ window.addEventListener("resize",this.getBottom)
},
props: {
data: {
@@ -499,16 +505,38 @@
}
},
computed: {
- isId() {
+ isId () {
return this.data.id
}
},
filters: {
- percentage(score) {
+ 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) {
+ return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
}
},
- data() {
+ data () {
return {
tempShowType: true,
initialIndex: 0,
@@ -519,59 +547,56 @@
},
watch: {
data: {
- handler(val, oldVal) {
- console.log('鏁版嵁鍙戠敓鍙樺寲')
+ handler (val, oldVal) {
this.$forceUpdate()
},
deep: true
}
},
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`;
+ getBottom () {
+ this.$nextTick(() => {
+ let imgDom = this.$refs.firstImg
+ if (imgDom) {
+ let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2
+ return `${num}px`;
+ }
+ return `4px`;
+ })
},
- getUrl(bwtype) {
+ getUrl (bwtype) {
if (bwtype == 1) {
return `url(${require("@/assets/img/red.png")})`
} else {
return `url(${require("@/assets/img/green.png")})`
}
},
- changeInitialIndex(index) {
+ changeInitialIndex (index) {
this.initialIndex = index;
},
- cardMouseenter(ev) {
+ cardMouseenter (ev) {
this.overflowState = false;
},
- cardMouseleave(ev) {
+ cardMouseleave (ev) {
this.overflowState = true;
},
- changeCarousel(index) {
+ changeCarousel (index) {
this.carouselIndex = index;
},
- detailsClick(ev) {
+ detailsClick (ev) {
this.$emit("detailsClick", ev);
},
- toAdd(item) {
- console.log("瑙﹀彂鍔犲叆搴曞簱")
+ toAdd (item) {
this.$emit("addToBase", item);
},
- tosearch(item) {
- console.log('search')
- console.log(location.href)
+ tosearch (item) {
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;
window.parent.postMessage({
@@ -597,6 +622,7 @@
line-height: 1.25rem;
}
.box-card {
+
cursor: default;
.el-carousel__arrow {
height: 20px;
@@ -616,11 +642,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 {
@@ -629,8 +655,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;
@@ -668,9 +699,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