From a88314bd5d59f1dde2d430899555a3a5730f2ef9 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期五, 25 九月 2020 09:37:00 +0800
Subject: [PATCH] 优化card时间显示和摄像机音频试听功能
---
src/components/subComponents/CardItem.vue | 33 ++++++++---
src/pages/cameraAccess/components/CameraInfo.vue | 24 ++++++-
src/components/subComponents/ModelCard.vue | 66 +++++++++++++++++-----
3 files changed, 94 insertions(+), 29 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index ea7c753..9261c4e 100644
--- a/src/components/subComponents/CardItem.vue
+++ b/src/components/subComponents/CardItem.vue
@@ -88,7 +88,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>
@@ -226,7 +226,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 +316,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>
@@ -465,7 +465,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,6 +484,22 @@
</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);
@@ -504,6 +520,9 @@
}
},
filters: {
+ formatTime(t) {
+ return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
+ },
percentage(score) {
return score.toFixed(2) + "%"
}
@@ -520,7 +539,6 @@
watch: {
data: {
handler(val, oldVal) {
- console.log('鏁版嵁鍙戠敓鍙樺寲')
this.$forceUpdate()
},
deep: true
@@ -559,19 +577,16 @@
this.$emit("detailsClick", ev);
},
toAdd(item) {
- console.log("瑙﹀彂鍔犲叆搴曞簱")
this.$emit("addToBase", item);
},
tosearch(item) {
- console.log('search')
- console.log(location.href)
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({
diff --git a/src/components/subComponents/ModelCard.vue b/src/components/subComponents/ModelCard.vue
index 1b68375..7c07467 100644
--- a/src/components/subComponents/ModelCard.vue
+++ b/src/components/subComponents/ModelCard.vue
@@ -38,7 +38,7 @@
v-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''"
>
<p>
- <span class="fontStyleForModel">{{ data.picDate }}</span>
+ <span class="fontStyleForModel">{{ data.picDate | formatTime }}</span>
</p>
<p>
<span class="fontStyleForModel">{{ data.cameraAddr }}</span>
@@ -58,7 +58,7 @@
<!-- 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>
@@ -134,15 +134,21 @@
<div class="baseInfo_list">
<p>
<span class="labelInfo">搴曞簱</span>
- <span class="val" :title="data.baseInfo[initialIndex].tableName">{{data.baseInfo[initialIndex].tableName}}</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>
+ <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.split("/")[0]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
</p>
<p>
<span class="labelInfo">韬唤璇佸彿</span>
@@ -154,7 +160,10 @@
</p>
<p>
<span class="labelInfo">浜哄憳绛夌骇</span>
- <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{data.baseInfo[initialIndex].monitorLevel}}</span>
+ <span
+ class="val"
+ :title="data.baseInfo[initialIndex].monitorLevel"
+ >{{data.baseInfo[initialIndex].monitorLevel}}</span>
</p>
</div>
</div>
@@ -232,15 +241,21 @@
<div class="baseInfo_list">
<p>
<span class="labelInfo">搴曞簱</span>
- <span class="val" :title="data.baseInfo[initialIndex].tableName">{{data.baseInfo[initialIndex].tableName}}</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>
+ <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.split("/")[0]}}</span>
+ <span class="val">{{data.baseInfo[initialIndex].labels.split("/")[0]}}</span>
</p>
<p>
<span class="labelInfo">韬唤璇佸彿</span>
@@ -252,7 +267,10 @@
</p>
<p>
<span class="labelInfo">浜哄憳绛夌骇</span>
- <span class="val" :title="data.baseInfo[initialIndex].monitorLevel">{{data.baseInfo[initialIndex].monitorLevel}}</span>
+ <span
+ class="val"
+ :title="data.baseInfo[initialIndex].monitorLevel"
+ >{{data.baseInfo[initialIndex].monitorLevel}}</span>
</p>
</div>
</div>
@@ -262,6 +280,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"
@@ -282,6 +316,9 @@
data: ""
},
filters: {
+ formatTime(t) {
+ return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
+ },
percentage(score) {
return score.toFixed(2) + "%"
}
@@ -343,21 +380,20 @@
.baseInfo {
margin-top: 5px;
text-align: left;
- .baseInfo_list{
- p{
+ .baseInfo_list {
+ p {
display: flex;
- .labelInfo{
+ .labelInfo {
width: 80px;
color: #999;
}
- .val{
+ .val {
font-size: 12px;
color: #101010;
letter-spacing: 0.28px;
line-height: 20px;
}
}
-
}
.baseInfo_left {
float: left;
diff --git a/src/pages/cameraAccess/components/CameraInfo.vue b/src/pages/cameraAccess/components/CameraInfo.vue
index d77d8c0..ed1adcc 100644
--- a/src/pages/cameraAccess/components/CameraInfo.vue
+++ b/src/pages/cameraAccess/components/CameraInfo.vue
@@ -62,7 +62,7 @@
<el-col :span="9" :offset="1">
<el-form-item label="浜嬩欢澹伴煶">
<div class="flex-wrap" style="margin-left:-10px">
- <el-switch v-model="form.voiceEnable" active-color="#409eff" :width="50"></el-switch>
+ <el-switch v-model="form.voiceEnable" :width="50"></el-switch>
<el-select
v-model="form.voiceId"
placeholder="閫夋嫨澹伴煶"
@@ -79,7 +79,13 @@
</el-select>
<span class="player-btn" @click="togglePlayer" style="cursor:pointer;">
<i
+ v-if="togglePlay"
class="el-icon-video-play"
+ style="font-size:26px; vertical-align:middle; color:#409eff"
+ ></i>
+ <i
+ v-else
+ class="el-icon-video-pause"
style="font-size:26px; vertical-align:middle; color:#409eff"
></i>
</span>
@@ -146,7 +152,6 @@
<li style="width:100%">
<info-card
style="width:100%;min-width: 440px"
-
:realtime="PollData.RealTimeValidCount"
:polling="PollData.PollValidCount"
:dataStack="PollData.stackChannelCount"
@@ -252,6 +257,11 @@
this.visibilitychange();
});
this.getSounds();
+
+ this.eventAudio.addEventListener("ended", () => {
+ console.log("audio end")
+ this.togglePlay = true
+ })
},
methods: {
getSounds() {
@@ -265,7 +275,10 @@
},
selSound(sound) {
this.soundPath = sound.path;
- this.form.voiceId = sound.id
+ this.form.voiceId = sound.id;
+ this.togglePlay = true;
+ this.eventAudio.pause()
+ // this.eventAudio.
},
togglePlayer() {
if (!this.soundPath) {
@@ -276,13 +289,14 @@
return false;
}
this.eventAudio.src = this.soundPath;
-
if (this.togglePlay) {
this.eventAudio.play();
+ this.togglePlay = false
} else {
this.eventAudio.pause()
+ this.togglePlay = true
}
- this.togglePlay = !this.togglePlay
+ // this.togglePlay = !this.togglePlay
},
visibilitychange() {
switch (document.visibilityState) {
--
Gitblit v1.8.0