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 | 670 +++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 477 insertions(+), 193 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index 3938e06..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="data.targetInfo[0].picSmUrl | httpImage"
- :id="'/compear/'+data.targetInfo[0].picSmUrl"
+ :id="'/compear/' + data.targetInfo[0].picSmUrl"
class="cursor-pointer"
@click="detailsClick($event)"
/>
@@ -20,7 +20,10 @@
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="item.targetPicUrl | httpImage"
class="cursor-pointer"
@@ -33,7 +36,7 @@
class="s-card-left-isCompare-div compareScore111"
:style="{
bottom: '0',
- background: getUrl(data.baseInfo[initialIndex].bwType)
+ background: getUrl(data.baseInfo[initialIndex].bwType),
}"
>
<b>{{ data.baseInfo[initialIndex].compareScore | percentage }}</b>
@@ -52,12 +55,23 @@
:autoplay="false"
@change="changeCarousel"
>
- <el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'">
- <img :src="item | httpImage" class="cursor-pointer" @click="detailsClick($event)" />
+ <el-carousel-item
+ v-for="(item, index) in data.picMaxUrl"
+ :key="index + 'img'"
+ >
+ <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)"
@@ -70,9 +84,13 @@
/>
</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'">
@@ -83,34 +101,52 @@
@mouseleave="cardMouseleave($event)"
>
<p>
- <span class="fontStyle color222">{{ data.picDate | formatTime}}</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>
@@ -120,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 | idCard}}</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 | idCard}}</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>
@@ -174,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>
@@ -189,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 | percentage}}</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 | idCard}}</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>
@@ -221,34 +301,54 @@
@mouseleave="cardMouseleave($event)"
>
<p :title="data.picDate">
- <span class="fontStyle color222">{{ data.picDate | formatTime }}</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>
@@ -256,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>
@@ -268,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'
@@ -278,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>
@@ -293,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
@@ -305,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 | percentage}}</span>
- <span v-else>{{ data.baseInfo[0].compareScore | percentage}}</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 | formatTime }}</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>
@@ -351,31 +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.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 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.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 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>
@@ -384,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>
@@ -400,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>
@@ -410,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'
@@ -438,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>
@@ -454,16 +664,24 @@
>
<div>
<p :title="data.picDate">
- <span class="fontStyle color222">{{ data.picDate | formatTime }}</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>
@@ -473,137 +691,199 @@
</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() //姣
+ "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));
+ 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)));
+ 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 () {
+ mounted() {
//window.addEventListener("resize", this.watchWindow);
- window.addEventListener("resize",this.getBottom)
+ window.addEventListener("resize", this.getBottom);
},
props: {
data: {
type: Object,
- default: null
+ default: null,
},
showType: {
type: String,
- default: "search"
- }
+ default: "search",
+ },
+ fromCluster: {
+ type: Boolean,
+ default: false,
+ },
+ searchT: {},
},
computed: {
- isId () {
- return this.data.id
- }
+ isId() {
+ return this.data.id;
+ },
},
filters: {
- formatTime (t) {
- return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
+ formatTime(t) {
+ return new Date(t).Format("yyyy-MM-dd HH:mm:ss");
},
- percentage (score) {
- return score.toFixed(2) + "%"
+ percentage(score) {
+ return score.toFixed(2) + "%";
},
- idCard (v) {
+ idCard(v) {
try {
- let obj = JSON.parse(v)
- return obj.idCard
+ let obj = JSON.parse(v);
+ return obj.idCard;
} catch (error) {
- return v.split("/")[1]
+ return v.split("/")[1];
}
},
- sex (v) {
+ sex(v) {
try {
- let obj = JSON.parse(v)
- return obj.sex
+ let obj = JSON.parse(v);
+ return obj.sex;
} catch (error) {
- return v.split("/")[0]
+ return v.split("/")[0];
}
},
- httpImage (url) {
- return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
- }
+ httpImage(url) {
+ if (!url.length) {
+ return "";
+ }
+ return (
+ "/httpImage/" + url + (url.indexOf("?") >= 0 ? "&" : "?") + "width=160"
+ );
+ },
},
- data () {
+ data() {
return {
tempShowType: true,
initialIndex: 0,
carouselIndex: 0,
dialogVisible: false,
- overflowState: true
+ overflowState: true,
};
},
watch: {
data: {
- handler (val, oldVal) {
- this.$forceUpdate()
+ handler(val, oldVal) {
+ this.$forceUpdate();
},
- deep: true
- }
+ deep: true,
+ },
},
methods: {
- getBottom () {
+ getBottom() {
this.$nextTick(() => {
- let imgDom = this.$refs.firstImg
+ let imgDom = this.$refs.firstImg;
if (imgDom) {
- let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2
+ 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")})`
+ return `url(${require("@/assets/img/red.png")})`;
} else {
- return `url(${require("@/assets/img/green.png")})`
+ 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) {
+ toAdd(item) {
this.$emit("addToBase", item);
},
- 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
+ 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 // 鏁版嵁鏉ヨ嚜浜庡簳搴�
+ 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({
- msg: message
- }, "*")
- }
- }
+ 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">
@@ -622,7 +902,6 @@
line-height: 1.25rem;
}
.box-card {
-
cursor: default;
.el-carousel__arrow {
height: 20px;
@@ -644,8 +923,8 @@
width: 100%;
position: relative;
overflow: hidden;
- top: 50%;
- transform: translateY(-50%);
+ top: 50%;
+ transform: translateY(-50%);
.card-img-box-compear {
width: 100%;
display: flex;
@@ -658,10 +937,10 @@
flex: 1;
height: 100%;
}
- .el-carousel{
+ .el-carousel {
flex: 1;
width: auto;
- height: auto!important;
+ height: auto !important;
}
.el-carousel__item {
display: flex;
@@ -895,4 +1174,9 @@
}
}
}
+
+.icon_collect {
+ color: #3d68e1;
+ vertical-align: 2px;
+}
</style>
--
Gitblit v1.8.0