From ecb6cadc3f016cf9968f48e0cc77479a1e56365b Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期日, 20 十二月 2020 17:32:06 +0800
Subject: [PATCH] 标定添加关联摄像机tab,绘制区域组件参数更新
---
src/components/subComponents/ModelCard.vue | 172 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 101 insertions(+), 71 deletions(-)
diff --git a/src/components/subComponents/ModelCard.vue b/src/components/subComponents/ModelCard.vue
index febadaf..0450892 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"
@@ -38,10 +38,13 @@
v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
>
<p>
- <span class="fontStyleForModel">{{ data.picDate }}</span>
+ <span class="fontStyleForModel" style="font-weight:normal">{{ data.picDate | formatTime }}</span>
</p>
<p>
- <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+ <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
+ </p>
+ <p>
+
</p>
<p style="width:100%">
<span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -58,10 +61,10 @@
<!-- yolo绫诲ぇ鍥� -->
<div class="describeBigImage" v-else>
<p>
- <span class="fontStyleForModel">{{ data.picDate }}</span>
+ <span class="fontStyleForModel">{{ data.picDate | formatTime}}</span>
</p>
<p>
- <span class="fontStyleForModel">{{ data.cameraAddr }}</span>
+ <span class="fontStyleForModel">{{ data.cameraAddr }}</span> <span class="fontStyleForModel analyServer" style="margin-left:20px;">{{ data.analyServerName }}</span>
</p>
<p style="width:100%">
<span v-for="(item,index) in data.alarmRules" :key="index+'rule'">
@@ -131,56 +134,39 @@
</div>
</div>
<div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
- <div class="baseInfo_left">
+ <div class="baseInfo_list">
<p>
<span class="labelInfo">搴曞簱</span>
+ <span
+ class="val"
+ :title="data.baseInfo[initialIndex].tableName"
+ >{{data.baseInfo[initialIndex].tableName}}</span>
</p>
<p>
<span class="labelInfo">濮撳悕</span>
+ <span
+ class="val"
+ :title="data.baseInfo[initialIndex].targetName"
+ >{{data.baseInfo[initialIndex].targetName}}</span>
</p>
<p>
<span class="labelInfo">鎬у埆</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
</p>
<p>
<span class="labelInfo">韬唤璇佸彿</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
</p>
<p>
<span class="labelInfo">鎵嬫満鍙�</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
</p>
<p>
<span class="labelInfo">浜哄憳绛夌骇</span>
- </p>
- </div>
- <div class="baseInfo_right">
- <p class="valueInfo">
<span
- :title="data.baseInfo[initialIndex].tableName"
- >{{ data.baseInfo[initialIndex].tableName }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].targetName"
- >{{ data.baseInfo[initialIndex].targetName }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].labels.split('/')[1]"
- >{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].labels.split('/')[2]"
- >{{ data.baseInfo[initialIndex].labels.split("/")[2] }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].labels.split('/')[0]"
- >{{ data.baseInfo[initialIndex].labels.split("/")[0] }}</span>
- </p>
- <p class="valueInfo">
- <span
+ class="val"
:title="data.baseInfo[initialIndex].monitorLevel"
- >{{ data.baseInfo[initialIndex].monitorLevel }}</span>
+ >{{data.baseInfo[initialIndex].monitorLevel}}</span>
</p>
</div>
</div>
@@ -255,56 +241,39 @@
</div>
</div>
<div class="baseInfo" v-if="data.baseInfo && data.baseInfo[0].targetPicUrl != ''">
- <div class="baseInfo_left">
+ <div class="baseInfo_list">
<p>
<span class="labelInfo">搴曞簱</span>
+ <span
+ class="val"
+ :title="data.baseInfo[initialIndex].tableName"
+ >{{data.baseInfo[initialIndex].tableName}}</span>
</p>
<p>
<span class="labelInfo">濮撳悕</span>
+ <span
+ class="val"
+ :title="data.baseInfo[initialIndex].targetName"
+ >{{data.baseInfo[initialIndex].targetName}}</span>
</p>
<p>
<span class="labelInfo">鎬у埆</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | sex}}</span>
</p>
<p>
<span class="labelInfo">韬唤璇佸彿</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | idCard}}</span>
</p>
<p>
<span class="labelInfo">鎵嬫満鍙�</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels | phoneNum}}</span>
</p>
<p>
<span class="labelInfo">浜哄憳绛夌骇</span>
- </p>
- </div>
- <div class="baseInfo_right">
- <p class="valueInfo">
<span
- :title="data.baseInfo[initialIndex].tableName"
- >{{ data.baseInfo[initialIndex].tableName }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].targetName"
- >{{ data.baseInfo[initialIndex].targetName }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].labels.split('/')[1]"
- >{{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].labels.split('/')[2]"
- >{{ data.baseInfo[initialIndex].labels.split("/")[2] }}</span>
- </p>
- <p class="valueInfo">
- <span
- :title="data.baseInfo[initialIndex].labels.split('/')[0]"
- >{{ data.baseInfo[initialIndex].labels.split("/")[0] }}</span>
- </p>
- <p class="valueInfo">
- <span
+ class="val"
:title="data.baseInfo[initialIndex].monitorLevel"
- >{{ data.baseInfo[initialIndex].monitorLevel }}</span>
+ >{{data.baseInfo[initialIndex].monitorLevel}}</span>
</p>
</div>
</div>
@@ -314,6 +283,22 @@
</div>
</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;
+}
+
/* eslint-disable */
import CameraPlayer from "@/components/player";
import imgDown from "@/components/subComponents/imgDown"
@@ -334,15 +319,46 @@
data: ""
},
filters: {
+ formatTime(t) {
+ return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
+ },
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() {
- this.VideoPhotoData.activeName = "pic"
+ console.log('ModelCard data',this.data);
+ console.log(this.data.baseInfo)
+ console.log(this.initialIndex)
+ //this.VideoPhotoData.activeName = "pic"
},
data() {
return {
+ activeName:'pic',
initialIndex: 0,
};
},
@@ -393,6 +409,21 @@
.baseInfo {
margin-top: 5px;
text-align: left;
+ .baseInfo_list {
+ p {
+ display: flex;
+ .labelInfo {
+ width: 80px;
+ color: #999;
+ }
+ .val {
+ font-size: 12px;
+ color: #101010;
+ letter-spacing: 0.28px;
+ line-height: 20px;
+ }
+ }
+ }
.baseInfo_left {
float: left;
width: 30%;
@@ -461,10 +492,9 @@
b {
//color: #e43933;
}
- width: 40%;
text-align: left;
- float: left;
- margin: 4px 0px;
+ margin: 4px 0;
+
}
}
.describeBigImage {
--
Gitblit v1.8.0