From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/panoramicView/components/History.vue | 175 +++++++++++++++++++++++++++++++++------------------------
1 files changed, 101 insertions(+), 74 deletions(-)
diff --git a/src/pages/panoramicView/components/History.vue b/src/pages/panoramicView/components/History.vue
index 00d4f02..418701f 100644
--- a/src/pages/panoramicView/components/History.vue
+++ b/src/pages/panoramicView/components/History.vue
@@ -18,32 +18,70 @@
<div class="persons">
<div class="board">
<b>鍘嗗彶杩借釜浜哄憳</b>
- <span>鍏� 10 鏉℃暟鎹�</span>
+ <span>鍏� {{personList.length}} 鏉℃暟鎹�</span>
</div>
<div class="target-list">
<div
class="list-item"
v-for="item in personList"
:key="item.id"
- :style="selectedID == item.id ? 'border-color:#3D68E1': ''"
+ :style="searching ? '' : item.selected ? 'border-color:#3D68E1': 'opacity: 0.3;'"
@click="checkTarget(item)"
>
<!-- <img src alt :style="{backgroundColor:item.color}"/> -->
- <img :src="'/httpImage/' + item.picSmUrl" />
+ <!-- <img :src="item.humanImg" fit="cover" /> -->
+ <el-image
+ style="width: 70px; height: 70px;border-radius: 50%;"
+ :src="item.humanImg"
+ fit="contain"
+ ></el-image>
</div>
</div>
</div>
<div class="videos">
- <div class="video-item" v-for="v in videoList" :key="v.name">
- <video :src="'/httpImage/' + v.videoUrl" controls="controls" width="480px" height="270px"></video>
+ <div class="video-item" v-for="v in videos" :key="v.id">
+ <video
+ :src="v.videoUrl"
+ controls="controls"
+ width="480px"
+ height="270px"
+ preload="none"
+ :poster="v.videoPoster"
+ ></video>
+ <span>{{v.modTime}}</span>
+
+ <div class="image-preview">
+ <el-image
+ src="/images/panoramicView/img-btn.png"
+ :preview-src-list="[v.trackImg]"
+ height="10px"
+ class="td-img"
+ >
+ <div slot="error" class="image-slot">
+ <i class="el-icon-picture-outline"></i>
+ </div>
+ </el-image>
+ </div>
</div>
</div>
</div>
</template>
<script>
+import { findTraceResult } from "@/api/panorama"
+
export default {
name: "histroy",
+ computed: {
+ videos() {
+ if (this.searching) {
+ return this.videoList
+ }
+
+ // return this.videoList.filter(v => v.id == this.selectedID);
+ return this.videoList.filter(v => v.selected);
+ }
+ },
data() {
return {
searchTime: [
@@ -78,60 +116,19 @@
}
}]
},
- selectedID: "",
- personList: [
- {
- id: "0",
- picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- id: "1",
- picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- id: "2",
- picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- id: "3",
- picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- id: "4",
- picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- id: "5",
- picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- id: "6",
- picSmUrl: "192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture"
- },
- ],
+ search: "",
+ personList: [],
videoList: [
- {
- name: "1",
- videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
- pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- name: "2",
- videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
- pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- name: "3",
- videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
- pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
- },
- {
- name: "4",
- videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
- pathImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
- },
+ // {
+ // id: "1",
+ // videoUrl: "192.168.20.10:6700/52369,cddbfed6886fc0?collection=2021-05-18-DSVAD010120190622-video",
+ // trackImg: "192.168.20.10:6700/52360,cddbfc05f6d697?collection=2021-05-18-DSVAD010120190622-picture"
+ // }
]
}
+ },
+ mounted() {
+ this.searchData();
},
methods: {
checkTime() {
@@ -142,27 +139,32 @@
});
return;
}
- clearInterval(this.timer);
- //鍒ゆ柇鏄惁鏄煡鍘嗗彶鏁版嵁
- if (Date.parse(this.searchTime[1]) < Date.now()) {
- this.filterData()
- } else {
- this.activeObjHashMap = {};
- //瀹炴椂鏌�
- this.searchData();
- }
+ this.searchData();
},
checkTarget(item) {
- this.selectedID = item.id;
+ this.searching = false;
+ this.$set(item, 'selected', item.selected != undefined ? !item.selected : true);
+ },
+ searchData() {
+ findTraceResult({ searchTime: this.searchTime }).then(rsp => {
+ this.searching = true;
+
+ this.videoList = this.personList = [];
+
+ if (rsp && rsp.success && rsp.data) {
+ this.videoList = rsp.data;
+ this.personList = [...rsp.data];
+ }
+ })
}
}
}
</script>
-<style lang="scss">
+<style lang="scss" scoped>
.p-histroy {
- height: 800px;
+ height: 1080px;
background: inherit;
background-color: rgba(240, 242, 245, 1);
@@ -174,11 +176,12 @@
}
.persons {
- width: 18%;
- height: 670px;
+ width: 342px;
+ height: 917px;
background-color: #fff;
margin: 10px 10px;
float: left;
+ overflow: auto;
.board {
height: 70px;
line-height: 50px;
@@ -195,7 +198,7 @@
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
- width: 375px;
+ width: 335px;
overflow: auto;
height: auto;
.list-item {
@@ -211,6 +214,7 @@
height: 100%;
display: block;
border-radius: 50%;
+ border: 0px;
}
&.deact {
opacity: 0.5;
@@ -221,20 +225,43 @@
}
.videos {
- width: 80%;
- margin: 10px 10px;
- height: 88%;
+ // width: 80%;
+ margin: 0px 10px;
+ height: 85%;
display: flex;
flex-wrap: wrap;
+ overflow: auto;
.video-item {
width: 500px;
height: 320px;
margin-left: 10px;
+ margin-top: 10px;
background-color: #fff;
+
+ span {
+ display: inline-block;
+ float: left;
+ margin-left: 10px;
+ }
video {
margin: 10px;
}
+
+ .image-preview {
+ width: 25px;
+ float: right;
+ margin: -5px 10px;
+ cursor: pointer;
+
+ .el-image-viewer__close {
+ color: #fff;
+ }
+
+ .td-img {
+ color: #fff;
+ }
+ }
}
}
}
--
Gitblit v1.8.0