From 0f70bb5e95342e1c88e16b4c12609cd45dd1b103 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期五, 21 五月 2021 14:27:47 +0800
Subject: [PATCH] add bhomebus api
---
src/components/subComponents/ModelCard.vue | 108 ++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 80 insertions(+), 28 deletions(-)
diff --git a/src/components/subComponents/ModelCard.vue b/src/components/subComponents/ModelCard.vue
index 52b5ae6..57c13f0 100644
--- a/src/components/subComponents/ModelCard.vue
+++ b/src/components/subComponents/ModelCard.vue
@@ -1,6 +1,6 @@
<template>
<div class="model-card-box" :style="`height:${height};width:${width};`">
- <el-tabs style="height: 100%;" @before-leave="changeTabs" v-model="VideoPhotoData.activeName">
+ <el-tabs style="height: 100%;" @before-leave="changeTabs" v-model="activeName">
<el-tab-pane label="澶у浘" name="pic">
<div
class="model-card-box-left"
@@ -12,16 +12,19 @@
<p class="img-box-title">
<b>鍏ㄦ櫙鍥�</b>
</p>
+ <!-- 浜鸿劯绫诲瀷 -->
<img-down
v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
:url="data.picMaxUrl[0]"
></img-down>
- <!-- 浜鸿劯绫诲瀷 -->
+
+ <!-- 鏅�歽olo绫� -->
<img-down
v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length == 1"
:url="data.picMaxUrl[0]"
></img-down>
- <!-- 鏅�歽olo绫� -->
+
+ <!-- 鎸佺画鏃堕棿yolo绫� -->
<el-carousel
v-else-if="(data.targetInfo == null || data.targetInfo[0].picSmUrl == '') && data.picMaxUrl.length > 1"
trigger="click"
@@ -32,20 +35,26 @@
<img-down :url="item"></img-down>
</el-carousel-item>
</el-carousel>
- <!-- 鎸佺画鏃堕棿yolo绫� -->
+
+ <!-- yolo绫诲ぇ鍥� -->
<div
class="describe"
v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
>
<p>
- <span class="fontStyleForModel">{{ data.picDate | formatTime }}</span>
+ <span
+ class="fontStyleForModel"
+ style="font-weight:normal"
+ >{{ data.picDate | formatTime }}</span>
</p>
<p>
<span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+ <span
+ class="fontStyleForModel analyServer"
+ style="margin-left:20px;"
+ >{{ data.analyServerName }}</span>
</p>
- <p>
- <span class="fontStyleForModel">{{ data.analyServerName }}</span>
- </p>
+ <p></p>
<p style="width:100%">
<span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
<span class="fontStyleForModel">{{data.taskName}}</span>
@@ -58,13 +67,22 @@
</span>
</p>
</div>
- <!-- yolo绫诲ぇ鍥� -->
+
+ <!-- 浜鸿劯绫诲ぇ鍥� -->
<div class="describeBigImage" v-else>
<p>
<span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
</p>
- <p>
- <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+ <p class="align-right">
+ <span
+ class="fontStyleForModel text-overflow"
+ :title="data.cameraAddr"
+ >{{ data.cameraAddr }}</span>
+ <span
+ class="fontStyleForModel text-overflow"
+ :title="data.cameraAddr"
+ style="margin-left:20px;"
+ >{{ data.analyServerName }}</span>
</p>
<p style="width:100%">
<span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -78,12 +96,15 @@
</span>
</p>
<p style="width:100%">
- <span class="fontStyleForModel">{{data.showLabels}}</span>
+ <span
+ style="white-space: nowrap;font-weight: 600;font-size: 13px;"
+ >{{data.showLabels}}</span>
</p>
</div>
- <!-- 浜鸿劯绫诲ぇ鍥� -->
</div>
</div>
+
+ <!-- 寮规鍙充晶 -->
<div
v-if="data.targetInfo && data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
class="model-card-box-right"
@@ -151,15 +172,15 @@
</p>
<p>
<span class="labelInfo">鎬у埆</span>
- <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
</p>
<p>
<span class="labelInfo">韬唤璇佸彿</span>
- <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[1]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
</p>
<p>
<span class="labelInfo">鎵嬫満鍙�</span>
- <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[2]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
</p>
<p>
<span class="labelInfo">浜哄憳绛夌骇</span>
@@ -172,6 +193,7 @@
</div>
</div>
</el-tab-pane>
+
<el-tab-pane label="瑙嗛" name="video" class="video-tabs">
<div
class="model-card-box-left"
@@ -186,11 +208,6 @@
style="margin-top: 12px;"
>鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
</div>
- <!-- <div class="merge">
- <el-button type="primary" @click="mergeVideo">鍚堝苟瑙嗛</el-button>
- <a name="download" @click="downloadfile">涓嬭浇</a>
- <a href="/httpImage/192.168.20.112:6081/31,02c86c199cd9b1" download="panlei.mp4">涓嬭浇2</a>
- </div>-->
</div>
<div
v-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''"
@@ -258,15 +275,15 @@
</p>
<p>
<span class="labelInfo">鎬у埆</span>
- <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
</p>
<p>
<span class="labelInfo">韬唤璇佸彿</span>
- <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[1]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
</p>
<p>
<span class="labelInfo">鎵嬫満鍙�</span>
- <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[2]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
</p>
<p>
<span class="labelInfo">浜哄憳绛夌骇</span>
@@ -324,15 +341,41 @@
},
percentage(score) {
return score.toFixed(2) + "%"
+ },
+ sex(v) {
+ try {
+ let obj = JSON.parse(v)
+ return obj.sex
+ } catch (error) {
+ return v.split("/")[0]
+ }
+ },
+ idCard(v) {
+ try {
+ let obj = JSON.parse(v)
+ return obj.idCard
+ } catch (error) {
+ return v.split("/")[1]
+ }
+ },
+ phoneNum(v) {
+ try {
+ let obj = JSON.parse(v)
+ return obj.phone
+ } catch (error) {
+ return v.split("/")[2]
+ }
}
},
mounted() {
+ console.log('ModelCard data', this.data);
console.log(this.data.baseInfo)
console.log(this.initialIndex)
- this.VideoPhotoData.activeName = "pic"
+ //this.VideoPhotoData.activeName = "pic"
},
data() {
return {
+ activeName: 'pic',
initialIndex: 0,
};
},
@@ -466,10 +509,8 @@
b {
//color: #e43933;
}
- width: 40%;
text-align: left;
- float: left;
- margin: 4px 0px;
+ margin: 4px 0;
}
}
.describeBigImage {
@@ -478,6 +519,17 @@
float: left;
margin-top: 5px;
p {
+ &.align-right {
+ text-align: right;
+ .text-overflow {
+ display: inline-block;
+ vertical-align: top;
+ width: 90px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
b {
//color: #e43933;
}
--
Gitblit v1.8.0