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