From e70f4f14cc409b6b75e1f9191cc9255fa66032e8 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期二, 22 六月 2021 14:13:47 +0800 Subject: [PATCH] 修复全景跟踪的查询接口 --- src/pages/panoramicView/components/History.vue | 135 +++++++++++++++++++++------------------------ 1 files changed, 63 insertions(+), 72 deletions(-) diff --git a/src/pages/panoramicView/components/History.vue b/src/pages/panoramicView/components/History.vue index 51f13ad..c225649 100644 --- a/src/pages/panoramicView/components/History.vue +++ b/src/pages/panoramicView/components/History.vue @@ -18,7 +18,7 @@ <div class="persons"> <div class="board"> <b>鍘嗗彶杩借釜浜哄憳</b> - <span>鍏� 10 鏉℃暟鎹�</span> + <span>鍏� {{personList.length}} 鏉℃暟鎹�</span> </div> <div class="target-list"> <div @@ -29,26 +29,28 @@ @click="checkTarget(item)" > <!-- <img src alt :style="{backgroundColor:item.color}"/> --> - <img :src="'/httpImage/' + item.picSmUrl" /> + <img + src="//192.168.20.10:6700/52361,cdd84d471eaa7d?collection=2021-05-18-DSVAD010120190622-picture" + /> </div> </div> </div> <div class="videos"> - <div class="video-item" v-for="v in videoList" :key="v.reid"> - <video - :src="'/traceFiles/' + v.reid + '.avi'" - controls="controls" - width="480px" - height="270px" - ></video> - <span>{{v.date}}</span> + <div class="video-item" v-for="v in videos" :key="v.id"> + <video :src="v.videoUrl" controls="controls" width="480px" height="270px" preload="meta"></video> + <span>{{v.modTime}}</span> <div class="image-preview"> <el-image - :src="'/traceFiles/' + v.reid + '.jpg'" - :preview-src-list="['/traceFiles/' + v.reid + '.jpg']" + src="/images/panoramicView/img-btn.png" + :preview-src-list="[v.trackImg]" height="10px" - ></el-image> + class="td-img" + > + <div slot="error" class="image-slot"> + <i class="el-icon-picture-outline"></i> + </div> + </el-image> </div> </div> </div> @@ -60,6 +62,15 @@ export default { name: "histroy", + computed: { + videos() { + if (this.selectedID == "") { + return this.videoList + } + + return this.videoList.filter(v => v.id == this.selectedID); + } + }, data() { return { searchTime: [ @@ -95,57 +106,13 @@ }] }, 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" - }, - ], + 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" + // } ] } }, @@ -166,9 +133,14 @@ this.selectedID = item.id; }, searchData() { + this.selectedID = ""; + findTraceResult({ searchTime: this.searchTime }).then(rsp => { + this.videoList = this.personList = []; + if (rsp && rsp.success && rsp.data) { this.videoList = rsp.data; + this.personList = [...rsp.data]; } }) } @@ -176,9 +148,9 @@ } </script> -<style lang="scss"> +<style lang="scss" scoped> .p-histroy { - height: 800px; + height: 1080px; background: inherit; background-color: rgba(240, 242, 245, 1); @@ -190,11 +162,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; @@ -211,7 +184,7 @@ display: flex; flex-wrap: wrap; // justify-content: space-between; - width: 375px; + width: 335px; overflow: auto; height: auto; .list-item { @@ -237,9 +210,9 @@ } .videos { - width: 80%; - margin: 10px 10px; - height: 88%; + // width: 80%; + margin: 0px 10px; + height: 85%; display: flex; flex-wrap: wrap; overflow: auto; @@ -250,6 +223,12 @@ margin-top: 10px; background-color: #fff; + span { + display: inline-block; + float: left; + margin-left: 10px; + } + video { margin: 10px; } @@ -257,10 +236,22 @@ .image-preview { width: 25px; float: right; - margin: 0px 10px; + margin: -5px 10px; cursor: pointer; + + .el-image-viewer__close { + color: #fff; + } + + .td-img { + color: #fff; + } } } } + + .el-image .el-image-viewer__mask { + opacity: 0.7; + } } </style> \ No newline at end of file -- Gitblit v1.8.0