add dog name

src/assets/scss/myVideo.scss

@@ -12,8 +12,28 @@
   border: 2px solid #0079fe;
 }
 
+.najiu-dog-track-dog-name {
+  position: absolute;
+  font-size: 10px;
+  border-top: 2px solid #0079fe;
+  border-left: 2px solid #0079fe;
+  border-right: 2px solid #0079fe;
+  border-bottom: 3px solid #0079fe;
+  top: -22px;
+  left: -10px;
+  min-width: 50px;
+  padding: 2px 5px;
+}
+
 .najiu-dog-track-current {
   position: absolute;
   border: 2px solid #f95e5a;
   z-index: 100;
+}
+
+.najiu-dog-track-dog-name-current {
+  border-top: 2px solid #f95e5a;
+  border-left: 2px solid #f95e5a;
+  border-right: 2px solid #f95e5a;
+  border-bottom: 3px solid #f95e5a;
 }
\ No newline at end of file

src/components/DogInfo/index.vue

@@ -3,6 +3,11 @@
     <div :class="{'table-container':true,active:isActive}">
       <table>
         <tbody>
+          <tr>
+            <td colspan="3">
+              <div class="dog-id">狗-{{dog.id}}</div>
+            </td>
+          </tr>
           <tr>
             <td class="td-img" rowspan="6">
               <div class="dog-img">
@@ -99,6 +104,11 @@ export default class DogInfo extends BaseVue {
 .#{$prefixCls}-dog {
   font-size: 12px;
   font-weight: 700;
+  .dog-id {
+    text-align: left;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
   .table-container {
     margin-bottom: 10px;
   }

src/components/MyVideo/track/index.ts

@@ -13,30 +13,22 @@ class DogTrack extends Component {
 
   constructor(player, options) {
     super(player, options);
-    const this_ = this
 
     player.on("loadedmetadata", () => {
       console.log("视频时长单位秒", player.duration())
     })
     player.on("timeupdate", () => this.update())
-    player.on("fullscreenchange", (e) => this.fullScreenChange.call(this_, e, player))
+    // player.on("fullscreenchange", (e) => this.fullScreenChange.call(this_, e, player))
     player.on("ended", () => {
       this.arrayIndex = 0;
     })
-    player.on("playerresize", (e) => {
-      // this.defaultHeight = player.currentHeight()
-      // this.defaultWidth = player.currentWidth()
-      // console.log("aaa", player.currentHeight(), player.currentWidth())
-    })
   }
 
-  fullScreenChange(e, player) {
-    if (player.isFullscreen()) {
-      // this.fullWidth = e.currentTarget.offsetWidth
-      // this.fullHeight = e.currentTarget.offsetHeight
-      console.log("full", e.currentTarget.offsetWidth, e.currentTarget.offsetHeight)
-    }
-  }
+  // fullScreenChange(e, player) {
+  //   if (player.isFullscreen()) {
+  //     console.log("full", e.currentTarget.offsetWidth, e.currentTarget.offsetHeight)
+  //   }
+  // }
 
   update() {
     if (this.processing || this.trackData.length === 0) return
@@ -80,14 +72,14 @@ class DogTrack extends Component {
         //跟踪框位置
         myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
         myel.style.left = `${value.x1 * this.player_.currentWidth()}px`
-        console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
+        // console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
       } else {
         myel.style.width = `${(value.x2 - value.x1) * this.player_.currentWidth()}px`
         myel.style.height = `${(value.y2 - value.y1) * (this.player_.currentHeight() + 30)}px`
         //跟踪框位置
         myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
         myel.style.left = `${value.x1 * this.player_.currentWidth()}px`
-        console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
+        // console.log(`top:${myel.style.top},left:${myel.style.left},screen-width:${this.player_.currentWidth()},screen-height:${this.player_.currentHeight()},dogs:${JSON.stringify(value)}`)
       }
 
       myel.className = myel.className.replace(/display-none/ig, "")
@@ -116,7 +108,7 @@ class DogTrack extends Component {
     setTimeout(() => {
       const numberDogId = Number(currentDogId)
       if (dogIds && dogIds.has(numberDogId)) {
-        this.player_.currentTime((dogIds.get(numberDogId) * 40 - 30) / 1000)
+        this.player_.currentTime((dogIds.get(numberDogId).FrameIndex * 40 - 30) / 1000)
       }
     }, 100);
   }
@@ -125,18 +117,25 @@ class DogTrack extends Component {
     if (!dogIds || dogIds.size === 0) return;
     //@ts-ignore
     const myContainer = this.player_.el_;
-    console.log("key currentDogId", dogIds, currentDogId, myContainer)
-    for (const key of dogIds.keys()) {
+    // console.log("key currentDogId", dogIds, currentDogId, myContainer)
+    for (const [key, value] of dogIds) {
+      //定位框元素
       const el = document.createElement("div")
       el.id = `dog_${key}`
       el.classList.add("display-none")
-      // console.log("dogId", `当前狗id：${currentDogId},遍历狗id:${key}`)
+      //dog name
+      const dogNameEl = document.createElement("div")
+      dogNameEl.classList.add("najiu-dog-track-dog-name")
+      //@ts-ignore
+      const dogName = document.createTextNode(`狗${value.obj_id}`)
       if (key == currentDogId) {
-        // console.log("currentDogId", currentDogId)
         el.classList.add("najiu-dog-track-current")
+        dogNameEl.classList.add("najiu-dog-track-dog-name-current")
       } else {
         el.classList.add("najiu-dog-track")
       }
+      dogNameEl.appendChild(dogName)
+      el.appendChild(dogNameEl)
       //@ts-ignore
       myContainer.appendChild(el)
       this.dogDiv.set(key, el)

src/service/CameraService.ts

@@ -75,7 +75,7 @@ export function convertLabelInfo(data: TrackData[]) {
     const m = f ? f : new Map();
     m.set(frame.DogId, frame)
     trackData.set(frame.FrameIndex, m)
-    dogIds.set(frame.DogId, frame.FrameIndex)
+    dogIds.set(frame.DogId, frame)
   });
   console.log(`标识文件大小：${data.length}行，处理耗时：${new Date().getTime() - now}毫秒`)
   return [dogIds, trackData]