同时实现多只狗追踪

src/assets/scss/myVideo.scss

@@ -7,5 +7,11 @@
 
 .najiu-dog-track {
   position: absolute;
-  border: 2px solid red;
+  border: 2px solid #d7d7d7;
+}
+
+.najiu-dog-track-current {
+  position: absolute;
+  border: 2px solid blue;
+  z-index: 100;
 }
\ No newline at end of file

src/components/DogInfo/index.vue

 <template>
-  <div :class="`${prefixCls}-dog active`">
-    <table :class="{active:isActive}">
+  <div :class="`${prefixCls}-dog`">
+    <div :class="{'table-container':true,active:isActive}">
+      <table>
         <tbody>
           <tr>
             <td class="td-img" rowspan="6">
@@ -70,6 +71,7 @@
         </tbody>
       </table>
     </div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -93,8 +95,12 @@ export default class DogInfo extends BaseVue {
 .#{$prefixCls}-dog {
   font-size: 12px;
   font-weight: 700;
+  .table-container {
+    margin-bottom: 10px;
+  }
   .active {
     background-color: #333333;
+    border: 1px solid blue;
   }
   a {
     cursor: pointer;
@@ -113,7 +119,6 @@ export default class DogInfo extends BaseVue {
   }
   table {
     width: 100%;
-    margin-bottom: 10px;
     border-collapse: collapse;
   }
 

src/components/MyVideo/index.vue

@@ -23,7 +23,6 @@ require("../../../node_modules/video.js/dist/lang/zh-CN");
 export default class MyVideo extends Vue {
   @Prop() private src!: string;
   @Prop() private width!: number;
-  @Prop() private trackData!: TrackData[];
 
   player = null;
   videoUrl = "";
@@ -65,7 +64,6 @@ export default class MyVideo extends Vue {
           const myContainer = this.addChild("MyContainer");
           myContainer.addChild("DogTrack");
           _this.dogTrack = myContainer.getChild("DogTrack");
-          _this.dogTrack.initData(_this.trackData);
           this.play();
         }
       );
@@ -79,10 +77,9 @@ export default class MyVideo extends Vue {
     this.player.play();
   }
 
-  onTrackDataChange(trackData: TrackData[]) {
+  onTrackDataChange(dogIds: any, trackData: any, currentDogId: string) {
     //切换视频隐藏跟踪框
-    this.dogTrack.hideTrackDiv();
-    this.dogTrack.initData(trackData);
+    this.dogTrack.initData(dogIds, trackData, currentDogId);
   }
 
   beforeDestroy() {

src/components/MyVideo/track/index.ts

 import videojs from 'video.js'
-import { TrackData } from "../data"
 
 const Component = videojs.getComponent('Component');
 
 class DogTrack extends Component {
   trackData = [] //传入初始数组
+  dogDiv = new Map()
   processing = false//是否在处理中
-  myel = undefined
   defaultWidth = 0
   defaultHeight = 0
   fullWidth = 0
@@ -30,14 +29,6 @@ class DogTrack extends Component {
     })
   }
 
-  createEl(): HTMLDivElement {
-    const el = document.createElement("div")
-    el.id = "trackDiv"
-    el.classList.add("display-none")
-    el.classList.add("najiu-dog-track")
-    return el;
-  }
-
   fullScreenChange(e, player) {
     if (player.isFullscreen()) {
       this.fullWidth = e.currentTarget.offsetWidth
@@ -46,72 +37,110 @@ class DogTrack extends Component {
   }
 
   update() {
-    if (this.processing || this.trackData.length === 0 || !this.myel) return
+    if (this.processing || this.trackData.length === 0) return
+    const now = new Date().getTime()
+    console.log("call", this.arrayIndex)
     this.processing = true
     const currentTime = this.player_.currentTime() * 1000
-    const maxPlayTime = this.trackData[this.trackData.length - 1].FrameIndex * 40
-    if (currentTime > maxPlayTime) {
-      this.player_.pause()
-    }
     //假如调整的播放时间则初始数组索引
     if (currentTime - this.preCurrentTime <= 0) {
       this.dispose()
     }
     //上次播放时间
     this.preCurrentTime = currentTime
-    const firstFrameIndex = this.trackData[0].FrameIndex * 40
-
+    const firstFrameIndex = this.trackData[0][0] * 40
+    //当前时间小于第一帧时间则直接跳过循环
+    if (currentTime < firstFrameIndex) {
+      this.processing = false
+      return
+    }
     for (let i = this.arrayIndex; i < this.trackData.length; i++) {
       const d = this.trackData[i]
-      if (firstFrameIndex <= currentTime && currentTime <= d.FrameIndex * 40) {
-        //
+      console.log(i, currentTime, d[0] * 40)
+      if (firstFrameIndex <= currentTime && currentTime <= d[0] * 40) {
         this.arrayIndex = i
-        // console.log("arrayIndex", this.arrayIndex, d.FrameIndex)
+        this.trackDogs(d[1])
+        break;
+      }
+    }
+    this.processing = false
+    console.log("currentTime 循环耗时", new Date().getTime() - now)
+  }
+
+  trackDogs(dogs) {
+    if (!dogs) return
+    for (const [key, value] of dogs.entries()) {
+      const myel = this.dogDiv.get(key)
       if (!this.player_.isFullscreen()) {
         //跟踪框大小
-          this.myel.style.width = `${(d.x2 - d.x1) * this.defaultWidth}px`
-          this.myel.style.height = `${(d.y2 - d.y1) * (this.defaultHeight + 30)}px`
+        myel.style.width = `${(value.x2 - value.x1) * this.defaultWidth}px`
+        myel.style.height = `${(value.y2 - value.y1) * (this.defaultHeight + 30)}px`
       } else {
-          this.myel.style.width = `${(d.x2 - d.x1) * this.fullWidth}px`
-          this.myel.style.height = `${(d.y2 - d.y1) * (this.fullHeight + 30)}px`
+        myel.style.width = `${(value.x2 - value.x1) * this.fullWidth}px`
+        myel.style.height = `${(value.y2 - value.y1) * (this.fullHeight + 30)}px`
       }
       //跟踪框位置
-        this.myel.style.top = `${d.y1 * 100}%`
-        this.myel.style.left = `${d.x1 * 100}%`
-        if (!this.isReplaceDisplayNone) {
-          this.isReplaceDisplayNone = true
-          this.myel.className = this.myel.className.replace(/display-none/ig, "")
+      myel.style.top = `${value.y1 * 100}%`
+      myel.style.left = `${value.x1 * 100}%`
+      myel.className = myel.className.replace(/display-none/ig, "")
     }
-        break;
+    //清理掉当前frame没有的dog追踪
+    for (const id of this.dogDiv.keys()) {
+      if (!dogs.has(id)) {
+        this.dogDiv.get(id).classList.add("display-none")
       }
     }
-    this.processing = false
   }
 
-  initData(data: TrackData[]) {
-    this.trackData.length = 0
+  initData(dogIds: any, data: any, currentDogId: string) {
     if (!data || data.length === 0) return;
-    this.trackData = data;
-    this.myel = document.getElementById("trackDiv")
+    //先清理之前狗跟踪的div
+    this.clearOldDogDiv()
     this.dispose()
-    const this_ = this
+    //再清理数据
+    this.dogDiv.clear()
+    this.trackData.length = 0
+    //创建狗的跟踪框
+    this.createDogDiv(dogIds, currentDogId)
+    //frame map 转数组
+    this.trackData = Array.from(data);
+    //播放时间跳转到第一帧时间
     setTimeout(() => {
-      this.player_.currentTime((this_.trackData[0].FrameIndex * 40 - 30) / 1000)
+      if (dogIds && dogIds.has(currentDogId)) {
+        this.player_.currentTime((dogIds.get(currentDogId) * 40 - 30) / 1000)
+      }
     }, 100);
   }
 
-  dispose() {
-    this.arrayIndex = 0
-    this.myel.classList.add("display-none")
-    this.isReplaceDisplayNone = false
+  createDogDiv(dogIds: any, currentDogId: string) {
+    if (!dogIds || dogIds.size === 0) return;
+    //@ts-ignore
+    const myContainer = this.player_.getChild("MyContainer").el_;
+    // console.log("key currentDogId", dogIds, currentDogId)
+    for (const key of dogIds.keys()) {
+      const el = document.createElement("div")
+      el.id = `dog_${key}`
+      el.classList.add("display-none")
+      if (key === currentDogId) {
+        el.classList.add("najiu-dog-track-current")
+      } else {
+        el.classList.add("najiu-dog-track")
+      }
+      //@ts-ignore
+      myContainer.appendChild(el)
+      this.dogDiv.set(key, el)
+    }
   }
 
-  hideTrackDiv() {
-    if (this.myel) {
-      this.myel.classList.add("display-none")
+  clearOldDogDiv() {
+    for (const value of this.dogDiv.values()) {
+      value.remove()
     }
   }
 
+  dispose() {
+    this.arrayIndex = 0;
+  }
 
 }
 

src/mock/trackData.ts

@@ -3,14 +3,14 @@ export default [{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId"
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753217", "FrameIndex": 3, "HasRope": false, "x1": 0.327515212610783, "y1": 0.4492989050869297, "x2": 0.3434428118981294, "y2": 0.476343924335872 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753217", "FrameIndex": 4, "HasRope": false, "x1": 0.32782741330514054, "y1": 0.4486590995864673, "x2": 0.3436616617601316, "y2": 0.47554173527298005 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753217", "FrameIndex": 5, "HasRope": false, "x1": 0.3284615052560701, "y1": 0.44805171947526706, "x2": 0.3438730046959717, "y2": 0.474835478296426 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 6, "HasRope": false, "x1": 0.3319901749810239, "y1": 0.4420041613458214, "x2": 0.34346318384349006, "y2": 0.4695708664579877 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 7, "HasRope": false, "x1": 0.33268659902377784, "y1": 0.44141973163332066, "x2": 0.34329063174843555, "y2": 0.4683216400723231 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 8, "HasRope": false, "x1": 0.33366695080188585, "y1": 0.44079960850488986, "x2": 0.34343277131536415, "y2": 0.46690321717679606 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 9, "HasRope": false, "x1": 0.334313696984285, "y1": 0.4401189588524724, "x2": 0.34350095594666435, "y2": 0.4658044443657919 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 2, "HasRope": false, "x1": 0.3319901749810239, "y1": 0.4420041613458214, "x2": 0.34346318384349006, "y2": 0.4695708664579877 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 2, "HasRope": false, "x1": 0.33268659902377784, "y1": 0.44141973163332066, "x2": 0.34329063174843555, "y2": 0.4683216400723231 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 3, "HasRope": false, "x1": 0.33366695080188585, "y1": 0.44079960850488986, "x2": 0.34343277131536415, "y2": 0.46690321717679606 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 5, "HasRope": false, "x1": 0.334313696984285, "y1": 0.4401189588524724, "x2": 0.34350095594666435, "y2": 0.4658044443657919 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 10, "HasRope": false, "x1": 0.3344811856756295, "y1": 0.4392976793167057, "x2": 0.34344711358378616, "y2": 0.4649825692302949 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 11, "HasRope": false, "x1": 0.33528222691804377, "y1": 0.43640746912424677, "x2": 0.34508432316804216, "y2": 0.46317499321935385 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753218", "FrameIndex": 12, "HasRope": false, "x1": 0.3353009033203895, "y1": 0.4364398135302108, "x2": 0.3452511504029098, "y2": 0.46314857966268597 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753219", "FrameIndex": 13, "HasRope": false, "x1": 0.33677142613679134, "y1": 0.4320746741483406, "x2": 0.3491908458543641, "y2": 0.46117398295770023 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753219", "FrameIndex": 2, "HasRope": false, "x1": 0.33677142613679134, "y1": 0.4320746741483406, "x2": 0.3491908458543641, "y2": 0.46117398295770023 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753220", "FrameIndex": 14, "HasRope": false, "x1": 0.34118981288218425, "y1": 0.42793777518569964, "x2": 0.35334596571578564, "y2": 0.45888145442565387 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753220", "FrameIndex": 15, "HasRope": false, "x1": 0.3433334432506888, "y1": 0.4251673923396845, "x2": 0.3592488154389285, "y2": 0.4560151433337365 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753220", "FrameIndex": 16, "HasRope": false, "x1": 0.34363641161655656, "y1": 0.4257431643742025, "x2": 0.35962577999724765, "y2": 0.45586526657454146 },
@@ -198,42 +198,42 @@ export default [{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId"
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753223", "FrameIndex": 198, "HasRope": false, "x1": 0.5015705453415508, "y1": 0.31516057781651535, "x2": 0.5093906140792662, "y2": 0.33931045689185874 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753223", "FrameIndex": 199, "HasRope": false, "x1": 0.503597541650851, "y1": 0.31196557045101186, "x2": 0.5117373009555387, "y2": 0.3378303516886571 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753223", "FrameIndex": 200, "HasRope": false, "x1": 0.5036959881153061, "y1": 0.31076145164830626, "x2": 0.5117773014212171, "y2": 0.3368956610515019 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 201, "HasRope": false, "x1": 0.5054373163612895, "y1": 0.3019268205696731, "x2": 0.5150725915340169, "y2": 0.3308136208915089 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 202, "HasRope": false, "x1": 0.5056534079405918, "y1": 0.30152189133342255, "x2": 0.5152343083311713, "y2": 0.3296193736584778 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 203, "HasRope": false, "x1": 0.5052382409417239, "y1": 0.30150870225295534, "x2": 0.5150521707403869, "y2": 0.3286167469230147 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 204, "HasRope": false, "x1": 0.505604403476522, "y1": 0.30294838517334083, "x2": 0.5152960974674002, "y2": 0.32845338849266953 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 205, "HasRope": false, "x1": 0.5066319507156591, "y1": 0.29402128735382443, "x2": 0.5155015886655299, "y2": 0.31908065169345684 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 206, "HasRope": false, "x1": 0.5066291701532559, "y1": 0.29347702455213964, "x2": 0.5156574840172561, "y2": 0.3190784791480329 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 207, "HasRope": false, "x1": 0.5068885988770856, "y1": 0.29355393476066577, "x2": 0.5159161790835339, "y2": 0.3187862474540704 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 208, "HasRope": false, "x1": 0.5066313513026364, "y1": 0.29367255698301287, "x2": 0.5156670803148484, "y2": 0.3178354296521646 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 185, "HasRope": false, "x1": 0.5054373163612895, "y1": 0.3019268205696731, "x2": 0.5150725915340169, "y2": 0.3308136208915089 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 185, "HasRope": false, "x1": 0.5056534079405918, "y1": 0.30152189133342255, "x2": 0.5152343083311713, "y2": 0.3296193736584778 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 185, "HasRope": false, "x1": 0.5052382409417239, "y1": 0.30150870225295534, "x2": 0.5150521707403869, "y2": 0.3286167469230147 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753224", "FrameIndex": 185, "HasRope": false, "x1": 0.505604403476522, "y1": 0.30294838517334083, "x2": 0.5152960974674002, "y2": 0.32845338849266953 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5066319507156591, "y1": 0.29402128735382443, "x2": 0.5155015886655299, "y2": 0.31908065169345684 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5066291701532559, "y1": 0.29347702455213964, "x2": 0.5156574840172561, "y2": 0.3190784791480329 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5068885988770856, "y1": 0.29355393476066577, "x2": 0.5159161790835339, "y2": 0.3187862474540704 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5066313513026364, "y1": 0.29367255698301287, "x2": 0.5156670803148484, "y2": 0.3178354296521646 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 209, "HasRope": false, "x1": 0.5073338271787057, "y1": 0.29291592305036174, "x2": 0.5161799281294478, "y2": 0.3176142300282446 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 210, "HasRope": false, "x1": 0.5076599285081705, "y1": 0.2929218006227806, "x2": 0.5165973659321615, "y2": 0.31821756533569734 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 211, "HasRope": false, "x1": 0.5078650149951427, "y1": 0.29253290352677824, "x2": 0.516853730535785, "y2": 0.3180798810879674 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 212, "HasRope": false, "x1": 0.5081710125425642, "y1": 0.2919928640524451, "x2": 0.5171949741273416, "y2": 0.317679832777133 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 213, "HasRope": false, "x1": 0.5081945011831215, "y1": 0.292230316808715, "x2": 0.5174238917611076, "y2": 0.31797906254165836 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 214, "HasRope": false, "x1": 0.5083373114361369, "y1": 0.2913201071346955, "x2": 0.5174732654085339, "y2": 0.3162579869628545 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 215, "HasRope": false, "x1": 0.5086437995602622, "y1": 0.2908964171488669, "x2": 0.5176855072989075, "y2": 0.31560866034285046 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753226", "FrameIndex": 216, "HasRope": false, "x1": 0.5089975378585173, "y1": 0.28226703654679985, "x2": 0.5185908828887072, "y2": 0.30722602271490873 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753226", "FrameIndex": 217, "HasRope": false, "x1": 0.5081669255245201, "y1": 0.28302872052566097, "x2": 0.5179226626635679, "y2": 0.30854024433568294 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753226", "FrameIndex": 218, "HasRope": false, "x1": 0.5081126227226382, "y1": 0.282356833778062, "x2": 0.5177828811263285, "y2": 0.30739335537679335 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 219, "HasRope": false, "x1": 0.49263505097501364, "y1": 0.2692312937168593, "x2": 0.5023271088631647, "y2": 0.2923067487848584 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 220, "HasRope": false, "x1": 0.4914849527246557, "y1": 0.26924579494482437, "x2": 0.5012451389937435, "y2": 0.2925856772288805 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 221, "HasRope": false, "x1": 0.49128646046388, "y1": 0.26794227907888973, "x2": 0.5011512315417285, "y2": 0.2916128468109352 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 222, "HasRope": false, "x1": 0.4903889038395767, "y1": 0.2668690065380917, "x2": 0.49998608904004915, "y2": 0.29044454393629976 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 223, "HasRope": false, "x1": 0.4897835897056552, "y1": 0.2660296017898748, "x2": 0.49908148255960777, "y2": 0.2886559371766364 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 224, "HasRope": false, "x1": 0.48855013412934145, "y1": 0.2653788326403469, "x2": 0.497729060060232, "y2": 0.28683168081101784 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753228", "FrameIndex": 225, "HasRope": false, "x1": 0.5006039075244524, "y1": 0.23181393457821373, "x2": 0.5227840831643087, "y2": 0.2608087251914134 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753228", "FrameIndex": 226, "HasRope": false, "x1": 0.4995244707365154, "y1": 0.23336710082253348, "x2": 0.5214701097958667, "y2": 0.26129666911123717 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 227, "HasRope": false, "x1": 0.2731000984268483, "y1": 0.5293854026419069, "x2": 0.299716810541715, "y2": 0.5582360839546099 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 228, "HasRope": false, "x1": 0.2750883753632164, "y1": 0.5288999416292584, "x2": 0.3016465390925942, "y2": 0.5565607610163668 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 229, "HasRope": false, "x1": 0.28185713956355574, "y1": 0.5292012962315374, "x2": 0.30865593654133117, "y2": 0.5574525828273537 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 230, "HasRope": false, "x1": 0.28296887916197916, "y1": 0.5289290842927875, "x2": 0.30968965848570335, "y2": 0.5573678866338455 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 231, "HasRope": false, "x1": 0.28385334153807135, "y1": 0.527885514650928, "x2": 0.3103729014806494, "y2": 0.5565717375372472 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 323, "HasRope": false, "x1": 0.2843351242253385, "y1": 0.5271748060851996, "x2": 0.31108918184955064, "y2": 0.5567298340356205 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 233, "HasRope": false, "x1": 0.28470844329990724, "y1": 0.5265875250877408, "x2": 0.31206772751466777, "y2": 0.5572162028404719 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 234, "HasRope": false, "x1": 0.28586373462975023, "y1": 0.5270388897471561, "x2": 0.3134693714426924, "y2": 0.5580361870544512 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 235, "HasRope": false, "x1": 0.28591927563640934, "y1": 0.5269118861248145, "x2": 0.31391730721843375, "y2": 0.5587828652503135 },
-{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 236, "HasRope": false, "x1": 0.2866155473493401, "y1": 0.5265830788090539, "x2": 0.31431866946455406, "y2": 0.5588545469694234 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5076599285081705, "y1": 0.2929218006227806, "x2": 0.5165973659321615, "y2": 0.31821756533569734 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5078650149951427, "y1": 0.29253290352677824, "x2": 0.516853730535785, "y2": 0.3180798810879674 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5081710125425642, "y1": 0.2919928640524451, "x2": 0.5171949741273416, "y2": 0.317679832777133 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5081945011831215, "y1": 0.292230316808715, "x2": 0.5174238917611076, "y2": 0.31797906254165836 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5083373114361369, "y1": 0.2913201071346955, "x2": 0.5174732654085339, "y2": 0.3162579869628545 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753225", "FrameIndex": 185, "HasRope": false, "x1": 0.5086437995602622, "y1": 0.2908964171488669, "x2": 0.5176855072989075, "y2": 0.31560866034285046 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753226", "FrameIndex": 185, "HasRope": false, "x1": 0.5089975378585173, "y1": 0.28226703654679985, "x2": 0.5185908828887072, "y2": 0.30722602271490873 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753226", "FrameIndex": 185, "HasRope": false, "x1": 0.5081669255245201, "y1": 0.28302872052566097, "x2": 0.5179226626635679, "y2": 0.30854024433568294 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753226", "FrameIndex": 185, "HasRope": false, "x1": 0.5081126227226382, "y1": 0.282356833778062, "x2": 0.5177828811263285, "y2": 0.30739335537679335 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 185, "HasRope": false, "x1": 0.49263505097501364, "y1": 0.2692312937168593, "x2": 0.5023271088631647, "y2": 0.2923067487848584 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 185, "HasRope": false, "x1": 0.4914849527246557, "y1": 0.26924579494482437, "x2": 0.5012451389937435, "y2": 0.2925856772288805 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 185, "HasRope": false, "x1": 0.49128646046388, "y1": 0.26794227907888973, "x2": 0.5011512315417285, "y2": 0.2916128468109352 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 185, "HasRope": false, "x1": 0.4903889038395767, "y1": 0.2668690065380917, "x2": 0.49998608904004915, "y2": 0.29044454393629976 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 185, "HasRope": false, "x1": 0.4897835897056552, "y1": 0.2660296017898748, "x2": 0.49908148255960777, "y2": 0.2886559371766364 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753227", "FrameIndex": 185, "HasRope": false, "x1": 0.48855013412934145, "y1": 0.2653788326403469, "x2": 0.497729060060232, "y2": 0.28683168081101784 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753228", "FrameIndex": 185, "HasRope": false, "x1": 0.5006039075244524, "y1": 0.23181393457821373, "x2": 0.5227840831643087, "y2": 0.2608087251914134 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753228", "FrameIndex": 185, "HasRope": false, "x1": 0.4995244707365154, "y1": 0.23336710082253348, "x2": 0.5214701097958667, "y2": 0.26129666911123717 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.2731000984268483, "y1": 0.5293854026419069, "x2": 0.299716810541715, "y2": 0.5582360839546099 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.2750883753632164, "y1": 0.5288999416292584, "x2": 0.3016465390925942, "y2": 0.5565607610163668 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.28185713956355574, "y1": 0.5292012962315374, "x2": 0.30865593654133117, "y2": 0.5574525828273537 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.28296887916197916, "y1": 0.5289290842927875, "x2": 0.30968965848570335, "y2": 0.5573678866338455 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.28385334153807135, "y1": 0.527885514650928, "x2": 0.3103729014806494, "y2": 0.5565717375372472 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.2843351242253385, "y1": 0.5271748060851996, "x2": 0.31108918184955064, "y2": 0.5567298340356205 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.28470844329990724, "y1": 0.5265875250877408, "x2": 0.31206772751466777, "y2": 0.5572162028404719 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.28586373462975023, "y1": 0.5270388897471561, "x2": 0.3134693714426924, "y2": 0.5580361870544512 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.28591927563640934, "y1": 0.5269118861248145, "x2": 0.31391730721843375, "y2": 0.5587828652503135 },
+{ "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 185, "HasRope": false, "x1": 0.2866155473493401, "y1": 0.5265830788090539, "x2": 0.31431866946455406, "y2": 0.5588545469694234 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 237, "HasRope": false, "x1": 0.2874668500613663, "y1": 0.5265233152732264, "x2": 0.31475362242852234, "y2": 0.558840222071079 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 238, "HasRope": false, "x1": 0.28805680731748573, "y1": 0.5266147647971017, "x2": 0.3148111605671201, "y2": 0.5591129156660702 },
 { "videopath": "./cbad093a4aaabc34f2b9691e3e805e38.mp4", "DogId": "1440845582095753229", "FrameIndex": 239, "HasRope": false, "x1": 0.28910477187640826, "y1": 0.5267138511781594, "x2": 0.31531444472293635, "y2": 0.5590304596459778 },

src/service/CameraService.ts

 import { responseData } from "@/types/response"
 import NetUtil from '@/utils/http'
 import api from '@/configs/apiConfig'
+import { TrackData } from "@/components/MyVideo/data";
 
 export function getCamera(pageData: any): Promise<responseData> {
   return NetUtil.fetch_request('camera/paging', 'POST', pageData)
@@ -55,3 +56,22 @@ export function getLabelInfo(fileName: string) {
       return data
     });
 }
+
+/**
+ * 
+ * @param data 根据FrameIndex分组画出多只狗
+ * @returns 
+ */
+export function convertLabelInfo(data: TrackData[]) {
+  if (!data || data.length === 0) return []
+  const trackData = new Map();
+  const dogIds = new Map()
+  data.forEach((frame: TrackData) => {
+    const f = trackData.get(frame.FrameIndex)
+    const m = f ? f : new Map();
+    m.set(frame.DogId, frame)
+    trackData.set(frame.FrameIndex, m)
+    dogIds.set(frame.DogId, frame.FrameIndex)
+  });
+  return [dogIds, trackData]
+}
\ No newline at end of file

src/views/dashboard/index.vue

@@ -23,13 +23,7 @@
       </div>
     </div>
     <div class="player" ref="player-container">
-      <MyVideo
-        ref="my-video"
-        v-if="width > 0 && videoUrl"
-        :src="videoUrl"
-        :trackData="trackData"
-        :width="width"
-      />
+      <MyVideo ref="my-video" v-if="width > 0 && videoUrl" :src="videoUrl" :width="width" />
     </div>
     <div class="video-list">
       <div class="title">犬只记录</div>
@@ -70,12 +64,13 @@ import BaseVue from "@/types/baseVue";
 import MyVideo from "@/components/MyVideo/index.vue";
 import { DogData } from "@/components/DogInfo/data";
 import { TrackData } from "@/components/MyVideo/data";
-
 import {
   getCameraDogFormate,
   pageDogInfo,
   getLabelInfo,
+  convertLabelInfo,
 } from "@/service/CameraService";
+import dogTrackData from "@/mock/trackData";
 
 @Component({ components: { Camera, DogInfo, Search, MyVideo } })
 export default class Dashboard extends BaseVue {
@@ -84,7 +79,6 @@ export default class Dashboard extends BaseVue {
   width = 0;
   height = 0;
   videoUrl = "";
-  trackData: TrackData[] = [];
   queryCameryParam = {
     beginTime: "",
     cameraName: "",
@@ -135,7 +129,10 @@ export default class Dashboard extends BaseVue {
       myVideo.onSrcChange(this_.videoUrl);
       try {
         const track = await getLabelInfo(dog.labelFileName);
-        this.trackData = track.filter((d) => d.DogId == dog.id);
+        const [dogIds, trackData] = convertLabelInfo(track);
+        // const [dogIds, trackData] = convertLabelInfo(dogTrackData);
+        //@ts-ignore
+        myVideo.onTrackDataChange(dogIds, trackData, dog.id);
       } catch (err) {
         this.$message.error("下载标识文件失败");
         console.log(
@@ -143,9 +140,6 @@ export default class Dashboard extends BaseVue {
           "color: red; background: yellow;"
         );
       }
-      // console.log("trackData", this.trackData);
-      //@ts-ignore
-      myVideo.onTrackDataChange(this_.trackData);
     }, 100);
   }