From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/components/subComponents/CardItem.vue | 696 +++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 502 insertions(+), 194 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index 430de0e..7600f20 100644
--- a/src/components/subComponents/CardItem.vue
+++ b/src/components/subComponents/CardItem.vue
@@ -2,13 +2,13 @@
<div class="box-card" ref="cardItem">
<!-- 宸︿晶鍥剧墖鍖哄煙 -->
<!-- 姣斿妯″紡 -->
- <div class="s-card-left-isCompare" v-if="showType === 'compare' ">
+ <div class="s-card-left-isCompare" v-if="showType === 'compare'">
<div class="card-img-box">
<div class="card-img-box-compear">
<div class="card-img-box-compear-left" ref="firstImg">
<img
- :src="'/httpImage/'+data.targetInfo[0].picSmUrl+'?width=160'"
- :id="'/compear/'+data.targetInfo[0].picSmUrl"
+ :src="data.targetInfo[0].picSmUrl | httpImage"
+ :id="'/compear/' + data.targetInfo[0].picSmUrl"
class="cursor-pointer"
@click="detailsClick($event)"
/>
@@ -20,9 +20,12 @@
indicator-position="none"
:arrow="data.baseInfo.length > 1 ? 'always' : 'never'"
>
- <el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
+ <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,13 +34,12 @@
</div>
<div
class="s-card-left-isCompare-div compareScore111"
- style
:style="{
- bottom: getBottom(),
- background: getUrl(data.baseInfo[initialIndex].bwType)
+ bottom: '0',
+ background: getUrl(data.baseInfo[initialIndex].bwType),
}"
>
- <b>{{ `${data.baseInfo[initialIndex].compareScore}%` }}</b>
+ <b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
</div>
</div>
</div>
@@ -53,31 +55,42 @@
:autoplay="false"
@change="changeCarousel"
>
- <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'">
+ <el-carousel-item
+ v-for="(item, index) in data.picMaxUrl"
+ :key="index + 'img'"
+ >
<img
- :src="'/httpImage/'+item+'?width=160'"
+ :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'">
@@ -87,39 +100,53 @@
@mouseenter="cardMouseenter($event)"
@mouseleave="cardMouseleave($event)"
>
- <!-- <p :title="data.baseInfo[0].compareScore" class="score">
- <span v-if="data.id">{{ data.compareScore }}%</span>
- <span v-else>{{ data.baseInfo[0].compareScore }}%</span>
- </p>-->
<p>
- <span class="fontStyle color222">{{ data.picDate }}</span>
+ <span class="fontStyle color222">{{
+ data.picDate | formatTime
+ }}</span>
</p>
- <p style="margin-bottom: 8px;">
+ <p style="margin-bottom: 8px">
<span class="fontStyle color222">{{ data.cameraAddr }}</span>
</p>
<el-tooltip placement="right" popper-class="atooltip">
<div slot="content">
- <p v-for="(item,index) in data.alarmRules" :key="index+'rule'">
- <span>{{data.taskName}}</span>
- <span v-if="item.alarmLevel !== '鎾ら槻'"> {{item.alarmLevel}}</span>
+ <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'">
+ <span>{{ data.taskName }}</span
+ >
+ <span v-if="item.alarmLevel !== '鎾ら槻'"
+ > {{ item.alarmLevel }}</span
+ >
<span v-if="item.linkInfo == '鑱斿姩浠诲姟'"> 鑱斿姩浠诲姟</span>
</p>
</div>
<el-button
- style="line-height:17px;border:none;padding:0;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left"
+ style="
+ line-height: 17px;
+ border: none;
+ padding: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: default;
+ width: 100%;
+ text-align: left;
+ "
>
<span
- v-for="(item,index) in data.alarmRules"
- :key="index+'rule1'"
- style="text-overflow:ellipsis;max-width:100px"
+ v-for="(item, index) in data.alarmRules"
+ :key="index + 'rule1'"
+ style="text-overflow: ellipsis; max-width: 100px"
>
- <span class="fontStyle color666">{{data.taskName}}</span>
+ <span class="fontStyle color666">{{ data.taskName }}</span
+ >
+ <span class="fontStyle color666" v-if="item.alarmLevel !== '鎾ら槻'"
+ > {{ item.alarmLevel }}</span
+ >
<span
class="fontStyle color666"
- v-if="item.alarmLevel !== '鎾ら槻'"
- > {{item.alarmLevel}}</span>
- <span class="fontStyle color666" v-if="item.linkInfo == '鑱斿姩浠诲姟'"> 鑱斿姩浠诲姟</span>
- <span v-if="index < data.alarmRules.length-1">/ </span>
+ v-if="item.linkInfo == '鑱斿姩浠诲姟'"
+ > 鑱斿姩浠诲姟</span
+ >
+ <span v-if="index < data.alarmRules.length - 1">/ </span>
</span>
</el-button>
</el-tooltip>
@@ -129,45 +156,61 @@
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].tableName"
- >{{ data.baseInfo[initialIndex].tableName }}</span>
+ >{{ data.baseInfo[initialIndex].tableName }}</span
+ >
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].targetName"
- >/ {{ data.baseInfo[initialIndex].targetName }}</span>
- <span
- class="fontStyle"
- v-if="data.baseInfo[initialIndex].labels"
- >/ {{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[initialIndex].targetName }}</span
+ >
+ <span class="fontStyle" v-if="data.baseInfo[initialIndex].labels"
+ >/ {{ data.baseInfo[initialIndex].labels | idCard }}</span
+ >
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].monitorLevel"
- >/ {{ data.baseInfo[initialIndex].monitorLevel }}</span>
+ >/ {{ data.baseInfo[initialIndex].monitorLevel }}</span
+ >
</p>
</div>
<el-button
- style="line-height:17px;border:none;padding:0;margin:0;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left"
+ style="
+ line-height: 17px;
+ border: none;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: default;
+ width: 100%;
+ text-align: left;
+ "
>
<span
- :style="data.baseInfo[initialIndex].bwType === '1'
- ? 'color: red;font-size:12px;line-height:20px'
- : 'font-size:12px;line-height:20px'"
+ :style="
+ data.baseInfo[initialIndex].bwType === '1'
+ ? 'color: red;font-size:12px;line-height:20px'
+ : 'font-size:12px;line-height:20px'
+ "
>
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].tableName"
- >{{ data.baseInfo[initialIndex].tableName }}</span>
+ >{{ data.baseInfo[initialIndex].tableName }}</span
+ >
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].targetName"
- >/ {{ data.baseInfo[initialIndex].targetName }}</span>
- <span
- class="fontStyle"
- v-if="data.baseInfo[initialIndex].labels"
- >/ {{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[initialIndex].targetName }}</span
+ >
+ <span class="fontStyle" v-if="data.baseInfo[initialIndex].labels"
+ >/ {{ data.baseInfo[initialIndex].labels | idCard }}</span
+ >
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].monitorLevel"
- >/ {{ data.baseInfo[initialIndex].monitorLevel }}</span>
+ >/ {{ data.baseInfo[initialIndex].monitorLevel }}</span
+ >
</span>
</el-button>
</el-tooltip>
@@ -183,7 +226,14 @@
<i class="iconfont icontianjiaren" @click="toAdd(data)"></i>
</el-tooltip>
<el-tooltip content="鏀惰棌" placement="top" popper-class="atooltip">
- <i class="iconfont iconshoucang2"></i>
+ <i
+ v-if="!data.isCollect"
+ class="iconfont iconshoucang2"
+ @click="collect(true)"
+ ></i>
+ <span v-else @click="collect(false)" class="iconfont icon_collect"
+ ></span
+ >
</el-tooltip>
</div>
</div>
@@ -198,23 +248,44 @@
<p
:title="data.baseInfo[0].compareScore"
class="score"
- style="font-family: PingFangSC-Medium;font-size: 20px;color: #3D68E1;letter-spacing: 0.4px;"
+ style="
+ font-family: PingFangSC-Medium;
+ font-size: 20px;
+ color: #3d68e1;
+ letter-spacing: 0.4px;
+ "
>
- <span>{{ data.baseInfo[0].compareScore }}%</span>
+ <span>{{ data.baseInfo[0].compareScore | percentage }}</span>
</p>
<p
- :style="data.baseInfo[0].bwType == '0' ? 'font-size:12px;line-height:20px' : 'color:red;font-size:12px;line-height:20px'"
- >{{ data.baseInfo[0].tableName }}</p>
+ :style="
+ data.baseInfo[0].bwType == '0'
+ ? 'font-size:12px;line-height:20px'
+ : 'color:red;font-size:12px;line-height:20px'
+ "
+ >
+ {{ data.baseInfo[0].tableName }}
+ </p>
<p :style="data.baseInfo[0].bwType == '0' ? '' : 'color:red'">
- <span>{{ data.baseInfo[0].targetName }}</span>
- <span
- v-if="data.baseInfo[0].labels"
- >/ {{ data.baseInfo[0].labels.split("/")[1] }}</span>
+ <span>{{ data.baseInfo[0].targetName }}</span
+ >
+ <span v-if="data.baseInfo[0].labels"
+ >/ {{ data.baseInfo[0].labels | idCard }}</span
+ >
</p>
</div>
<div class="card-icon-box">
- <el-tooltip content="鏌ユ壘姝や汉" placement="top" popper-class="atooltip" style="margin-left:10px">
- <i class="iconfont iconsousuoren" @click="tosearch(data)" title="鏌ユ壘姝や汉"></i>
+ <el-tooltip
+ content="鏌ユ壘姝や汉"
+ placement="top"
+ popper-class="atooltip"
+ style="margin-left: 10px"
+ >
+ <i
+ class="iconfont iconsousuoren"
+ @click="tosearch(data)"
+ title="鏌ユ壘姝や汉"
+ ></i>
</el-tooltip>
</div>
</div>
@@ -230,34 +301,54 @@
@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;">
+ <p :title="data.cameraAddr" style="margin-bottom: 8px">
<span class="fontStyle color222">{{ data.cameraAddr }}</span>
</p>
<el-tooltip placement="right" popper-class="atooltip">
<div slot="content">
- <p v-for="(item,index) in data.alarmRules" :key="index+'rule'">
- <span>{{data.taskName}}</span>
- <span v-if="item.alarmLevel !== '鎾ら槻'">{{item.alarmLevel}}</span>
+ <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'">
+ <span>{{ data.taskName }}</span
+ >
+ <span v-if="item.alarmLevel !== '鎾ら槻'">{{
+ item.alarmLevel
+ }}</span
+ >
<span v-if="item.linkInfo == '鑱斿姩浠诲姟'"> 鑱斿姩浠诲姟</span>
</p>
</div>
<el-button
- style="border:none;padding:0;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left"
+ style="
+ border: none;
+ padding: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: default;
+ width: 100%;
+ text-align: left;
+ "
>
<span
- v-for="(item,index) in data.alarmRules"
- :key="index+'rule1'"
- style="text-overflow:ellipsis;max-width:100px"
+ v-for="(item, index) in data.alarmRules"
+ :key="index + 'rule1'"
+ style="text-overflow: ellipsis; max-width: 100px"
>
- <span class="fontStyle color666">{{data.taskName}}</span>
+ <span class="fontStyle color666">{{ data.taskName }}</span
+ >
<span
class="fontStyle color666"
v-if="item.alarmLevel !== '鎾ら槻'"
- >{{item.alarmLevel}}</span>
- <span class="fontStyle color666" v-if="item.linkInfo == '鑱斿姩浠诲姟'"> 鑱斿姩浠诲姟</span>
- <span v-if="index < data.alarmRules.length-1">/ </span>
+ >{{ item.alarmLevel }}</span
+ >
+ <span
+ class="fontStyle color666"
+ v-if="item.linkInfo == '鑱斿姩浠诲姟'"
+ > 鑱斿姩浠诲姟</span
+ >
+ <span v-if="index < data.alarmRules.length - 1">/ </span>
</span>
</el-button>
</el-tooltip>
@@ -265,7 +356,11 @@
<div class="right-bottom">
<div v-if="!data.id" class="card-icon-box">
<!-- <i class="iconfont systemxing ml50" title="鏀惰棌" ></i> -->
- <el-tooltip content="鏌ユ壘姝や汉" placement="top" popper-class="atooltip">
+ <el-tooltip
+ content="鏌ユ壘姝や汉"
+ placement="top"
+ popper-class="atooltip"
+ >
<i class="iconfont iconsousuoren ml50" @click="tosearch(data)"></i>
</el-tooltip>
</div>
@@ -277,7 +372,14 @@
<i class="iconfont iconcaidan" @click="detailsClick($event)"></i>
</el-tooltip>
<el-tooltip content="鏀惰棌" placement="top" popper-class="atooltip">
- <i class="iconfont iconshoucang2" @click="dialogVisible = true"></i>
+ <i
+ v-if="!data.isCollect"
+ class="iconfont iconshoucang2"
+ @click="collect(true)"
+ ></i>
+ <span v-else @click="collect(false)" class="iconfont icon_collect"
+ ></span
+ >
</el-tooltip>
<!-- :class="
data.isAlarm ? 'iconfont systemmm' : 'iconfont systemxing'
@@ -287,14 +389,29 @@
<el-tooltip content="璇︽儏" placement="top" popper-class="atooltip">
<i class="iconfont iconcaidan" @click="detailsClick($event)"></i>
</el-tooltip>
- <el-tooltip content="鏌ユ壘姝や汉" placement="top" popper-class="atooltip">
+ <el-tooltip
+ content="鏌ユ壘姝や汉"
+ placement="top"
+ popper-class="atooltip"
+ >
<i class="iconfont iconsousuoren" @click="tosearch(data)"></i>
</el-tooltip>
- <el-tooltip content="鍔犲叆搴曞簱" placement="top" popper-class="atooltip">
+ <el-tooltip
+ content="鍔犲叆搴曞簱"
+ placement="top"
+ popper-class="atooltip"
+ >
<i class="iconfont icontianjiaren" @click="toAdd(data)"></i>
</el-tooltip>
<el-tooltip content="鏀惰棌" placement="top" popper-class="atooltip">
- <i class="iconfont iconshoucang2" @click="dialogVisible = true"></i>
+ <i
+ v-if="!data.isCollect"
+ class="iconfont iconshoucang2"
+ @click="collect(true)"
+ ></i>
+ <span v-else @click="collect(false)" class="iconfont icon_collect"
+ ></span
+ >
</el-tooltip>
</div>
</div>
@@ -302,7 +419,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
@@ -314,40 +431,72 @@
<p
class="score"
v-if="VideoPhotoData.uploadType"
- style="font-family: PingFangSC-Medium;font-size: 20px;color: #3D68E1;letter-spacing: 0.4px;"
+ style="
+ font-family: PingFangSC-Medium;
+ font-size: 20px;
+ color: #3d68e1;
+ letter-spacing: 0.4px;
+ "
>
- <span v-if="data.id">{{ data.compareScore }}%</span>
- <span v-else>{{ data.baseInfo[0].compareScore }}%</span>
+ <span v-if="data.id">{{ data.compareScore | percentage }}</span>
+ <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;">
+ <p :title="data.cameraAddr" style="margin-bottom: 8px">
<span class="fontStyle color222">{{ data.cameraAddr }}</span>
</p>
- <el-tooltip placement="right" popper-class="atooltip" v-if="!VideoPhotoData.uploadType">
+ <el-tooltip
+ placement="right"
+ popper-class="atooltip"
+ v-if="!VideoPhotoData.uploadType"
+ >
<div slot="content">
- <p v-for="(item,index) in data.alarmRules" :key="index+'rule2'">
- <span class="fontStyle">{{data.taskName}}</span>
- <span
- class="fontStyle"
- v-if="item.alarmLevel !== '鎾ら槻'"
- >{{item.alarmLevel}}</span>
- <span v-if="item.linkInfo == '鑱斿姩浠诲姟'" class="fontStyle"> 鑱斿姩浠诲姟</span>
- <span v-if="index < data.alarmRules.length-1">/ </span>
+ <p v-for="(item, index) in data.alarmRules" :key="index + 'rule2'">
+ <span class="fontStyle">{{ data.taskName }}</span
+ >
+ <span class="fontStyle" v-if="item.alarmLevel !== '鎾ら槻'">{{
+ item.alarmLevel
+ }}</span
+ >
+ <span v-if="item.linkInfo == '鑱斿姩浠诲姟'" class="fontStyle"
+ > 鑱斿姩浠诲姟</span
+ >
+ <span v-if="index < data.alarmRules.length - 1">/ </span>
</p>
</div>
<el-button
- style="border:none;padding:0;margin:0px;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left"
+ style="
+ border: none;
+ padding: 0;
+ margin: 0px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: default;
+ width: 100%;
+ text-align: left;
+ "
>
- <span v-for="(item,index) in data.alarmRules" :key="index+'rule3'">
- <span class="fontStyle color666">{{data.taskName}}</span>
+ <span
+ v-for="(item, index) in data.alarmRules"
+ :key="index + 'rule3'"
+ >
+ <span class="fontStyle color666">{{ data.taskName }}</span
+ >
<span
class="fontStyle color666"
v-if="item.alarmLevel !== '鎾ら槻'"
- >{{item.alarmLevel}}</span>
- <span v-if="item.linkInfo == '鑱斿姩浠诲姟'" class="fontStyle color666"> 鑱斿姩浠诲姟</span>
- <span v-if="index < data.alarmRules.length-1">/ </span>
+ >{{ item.alarmLevel }}</span
+ >
+ <span
+ v-if="item.linkInfo == '鑱斿姩浠诲姟'"
+ class="fontStyle color666"
+ > 鑱斿姩浠诲姟</span
+ >
+ <span v-if="index < data.alarmRules.length - 1">/ </span>
</span>
</el-button>
</el-tooltip>
@@ -360,37 +509,52 @@
v-if="data.baseInfo && data.baseInfo[0].targetName != ''"
>
<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.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>
+ <p v-for="(item, index) in data.baseInfo" :key="index + 'base1'">
+ <span class="fontStyle">{{ item.tableName }}</span
+ >
+ <span class="fontStyle" v-if="item.targetName.length"
+ >/ {{ item.targetName }}</span
+ >
+ <span class="fontStyle" 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
- style="border:none;padding:0;margin:0px;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left"
+ style="
+ border: none;
+ padding: 0;
+ margin: 0px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: default;
+ width: 100%;
+ text-align: left;
+ "
>
<span
- v-for="(item,index) in data.baseInfo"
- :key="index+'base'"
- :style="item.bwType == '1' ? 'color:red;font-size:12px;line-height:20px':'font-size:12px;line-height:20px'"
+ v-for="(item, index) in data.baseInfo"
+ :key="index + 'base'"
+ :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.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>
+ <span class="fontStyle">{{ item.tableName }}</span
+ >
+ <span class="fontStyle" v-if="item.targetName.length"
+ >/ {{ item.targetName }}</span
+ >
+ <span class="fontStyle" 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>
@@ -399,15 +563,28 @@
placement="right"
popper-class="atooltip"
v-if="data.baseInfo == null"
- style="margin-top:5px"
+ style="margin-top: 5px"
>
<div slot="content">
- <span :style="'color:red;font-size:14px;line-height:20px'">{{data.showLabels}}</span>
+ <span :style="'color:red;font-size:14px;line-height:20px'">{{
+ data.showLabels
+ }}</span>
</div>
<el-button
- style="border:none;padding:0;margin:0px;overflow:hidden;text-overflow:ellipsis;cursor:default;width:100%;text-align:left"
+ style="
+ border: none;
+ padding: 0;
+ margin: 0px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: default;
+ width: 100%;
+ text-align: left;
+ "
>
- <span :style=" 'color:red;font-size:14px;line-height:20px'">{{data.showLabels}}</span>
+ <span :style="'color:red;font-size:14px;line-height:20px'">{{
+ data.showLabels
+ }}</span>
</el-button>
</el-tooltip>
</div>
@@ -415,7 +592,11 @@
<div v-if="!data.id" class="card-icon-box">
<!-- 搴曞簱浜哄憳 -->
<!-- <i class="iconfont systemxing ml50" title="鏀惰棌" ></i> -->
- <el-tooltip content="鏌ユ壘姝や汉" placement="top" popper-class="atooltip">
+ <el-tooltip
+ content="鏌ユ壘姝や汉"
+ placement="top"
+ popper-class="atooltip"
+ >
<i class="iconfont iconsousuoren ml50" @click="tosearch(data)"></i>
</el-tooltip>
</div>
@@ -425,7 +606,14 @@
<i class="iconfont iconcaidan" @click="detailsClick($event)"></i>
</el-tooltip>
<el-tooltip content="鏀惰棌" placement="top" popper-class="atooltip">
- <i class="iconfont iconshoucang2"></i>
+ <i
+ v-if="!data.isCollect"
+ class="iconfont iconshoucang2"
+ @click="collect(true)"
+ ></i>
+ <span @click="collect(false)" v-else class="iconfont icon_collect"
+ ></span
+ >
</el-tooltip>
<!-- :class="
data.isAlarm ? 'iconfont systemmm' : 'iconfont systemxing'
@@ -453,7 +641,14 @@
<i class="iconfont icontianjiaren" @click="toAdd(data)"></i>
</el-tooltip>
<el-tooltip content="鏀惰棌" placement="top" popper-class="atooltip">
- <i class="iconfont iconshoucang2"></i>
+ <i
+ v-if="!data.isCollect"
+ class="iconfont iconshoucang2"
+ @click="collect(true)"
+ ></i>
+ <span v-else class="iconfont icon_collect" @click="collect(false)"
+ ></span
+ >
</el-tooltip>
</div>
</div>
@@ -469,16 +664,24 @@
>
<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;">
+ <p :title="data.cameraAddr" style="margin-bottom: 8px">
<span class="fontStyle color222">{{ data.cameraAddr }}</span>
</p>
- <p v-for="(item,index) in data.alarmRules" :key="index+'rule'">
- <span class="fontStyle color666">{{data.taskName}}</span> /
- <span class="fontStyle color666">{{item.alarmLevel}}</span> /
- <span v-if="item.linkInfo == '鑱斿姩浠诲姟'" class="fontStyle color666">鑱斿姩浠诲姟</span>
- <span v-if="index < data.alarmRules.length-1">/ </span>
+ <p v-for="(item, index) in data.alarmRules" :key="index + 'rule'">
+ <span class="fontStyle color666">{{ data.taskName }}</span
+ > /
+ <span class="fontStyle color666">{{ item.alarmLevel }}</span
+ > /
+ <span
+ v-if="item.linkInfo == '鑱斿姩浠诲姟'"
+ class="fontStyle color666"
+ >鑱斿姩浠诲姟</span
+ >
+ <span v-if="index < data.alarmRules.length - 1">/ </span>
</p>
</div>
</div>
@@ -488,33 +691,88 @@
</template>
<script>
+import { collect } from "@/api/search";
+
+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);
+ //window.addEventListener("resize", this.watchWindow);
+ window.addEventListener("resize", this.getBottom);
},
props: {
data: {
type: Object,
- default: null
+ default: null,
},
showType: {
type: String,
- default: "search"
- }
- },
- watch: {
- data: {
- handler(val, oldVal) {
- console.log('鏁版嵁鍙戠敓鍙樺寲')
- this.$forceUpdate()
- },
- deep: true
- }
+ default: "search",
+ },
+ fromCluster: {
+ type: Boolean,
+ default: false,
+ },
+ searchT: {},
},
computed: {
isId() {
- return this.data.id
- }
+ return this.data.id;
+ },
+ },
+ 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() {
return {
@@ -522,34 +780,33 @@
initialIndex: 0,
carouselIndex: 0,
dialogVisible: false,
- overflowState: true
+ overflowState: true,
};
},
- methods: {
- watchWindow() {
- // console.log('height')
- // this.$nextTick(() => {
- // document.querySelectorAll('.compareScore111').forEach(ele => {
- // ele.style.bottom = this.getBottom()
- // console.log("鍏冪礌鐨勬牱寮忓�硷細",ele.style.bottom)
- // });
- // this.$forceUpdate()
- // })
+ watch: {
+ data: {
+ 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`;
+ 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) {
- return `url(${require("@/assets/img/red.png")})`
+ return `url(${require("@/assets/img/red.png")})`;
} else {
- return `url(${require("@/assets/img/green.png")})`
+ return `url(${require("@/assets/img/green.png")})`;
}
},
changeInitialIndex(index) {
@@ -568,25 +825,65 @@
this.$emit("detailsClick", ev);
},
toAdd(item) {
- console.log("瑙﹀彂鍔犲叆搴曞簱")
this.$emit("addToBase", item);
},
tosearch(item) {
- var curWwwPath = window.document.location.href;
- var pathname = window.document.location.pathname;
- var pos = curWwwPath.indexOf(pathname);
- var localhostPath = curWwwPath.substring(0, pos); //ip+port
- var href = localhostPath + "/Layout/Searching"
- let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
- var url = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
- console.log("璺宠浆鍦板潃", href, "url", url)
- var compType = 1 // 鏁版嵁鏉ヨ嚜浜巈s
+ 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 // 鏁版嵁鏉ヨ嚜浜庡簳搴�
+ compType = 0; // 鏁版嵁鏉ヨ嚜浜庡簳搴�
}
- window.open(href + '?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + url + '&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,
+ },
+ "*"
+ );
+ },
+ async collect(val) {
+ const res = await collect({
+ id: this.data.id,
+ isCollect: val,
+ });
+ if (res && res.success) {
+ this.data.isCollect = !this.data.isCollect;
+ }
+ },
+ },
};
</script>
<style lang="scss">
@@ -624,11 +921,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 {
@@ -637,8 +934,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;
@@ -676,9 +978,10 @@
}
}
img {
+ display: block;
width: 100%;
- height: 100%;
- object-fit: contain;
+ //height: 100%;
+ //object-fit: contain;
}
.s-card-left-isCompare-div {
width: 60px;
@@ -871,4 +1174,9 @@
}
}
}
+
+.icon_collect {
+ color: #3d68e1;
+ vertical-align: 2px;
+}
</style>
--
Gitblit v1.8.0