Commit 746c2092 authored by 朱松文's avatar 朱松文

add dog name

parent 590e7e9a
...@@ -12,8 +12,28 @@ ...@@ -12,8 +12,28 @@
border: 2px solid #0079fe; 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 { .najiu-dog-track-current {
position: absolute; position: absolute;
border: 2px solid #f95e5a; border: 2px solid #f95e5a;
z-index: 100; 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
...@@ -3,6 +3,11 @@ ...@@ -3,6 +3,11 @@
<div :class="{'table-container':true,active:isActive}"> <div :class="{'table-container':true,active:isActive}">
<table> <table>
<tbody> <tbody>
<tr>
<td colspan="3">
<div class="dog-id">狗-{{dog.id}}</div>
</td>
</tr>
<tr> <tr>
<td class="td-img" rowspan="6"> <td class="td-img" rowspan="6">
<div class="dog-img"> <div class="dog-img">
...@@ -99,6 +104,11 @@ export default class DogInfo extends BaseVue { ...@@ -99,6 +104,11 @@ export default class DogInfo extends BaseVue {
.#{$prefixCls}-dog { .#{$prefixCls}-dog {
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
.dog-id {
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
.table-container { .table-container {
margin-bottom: 10px; margin-bottom: 10px;
} }
......
...@@ -13,30 +13,22 @@ class DogTrack extends Component { ...@@ -13,30 +13,22 @@ class DogTrack extends Component {
constructor(player, options) { constructor(player, options) {
super(player, options); super(player, options);
const this_ = this
player.on("loadedmetadata", () => { player.on("loadedmetadata", () => {
console.log("视频时长单位秒", player.duration()) console.log("视频时长单位秒", player.duration())
}) })
player.on("timeupdate", () => this.update()) 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", () => { player.on("ended", () => {
this.arrayIndex = 0; 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) { // fullScreenChange(e, player) {
if (player.isFullscreen()) { // if (player.isFullscreen()) {
// this.fullWidth = e.currentTarget.offsetWidth // console.log("full", e.currentTarget.offsetWidth, e.currentTarget.offsetHeight)
// this.fullHeight = e.currentTarget.offsetHeight // }
console.log("full", e.currentTarget.offsetWidth, e.currentTarget.offsetHeight) // }
}
}
update() { update() {
if (this.processing || this.trackData.length === 0) return if (this.processing || this.trackData.length === 0) return
...@@ -80,14 +72,14 @@ class DogTrack extends Component { ...@@ -80,14 +72,14 @@ class DogTrack extends Component {
//跟踪框位置 //跟踪框位置
myel.style.top = `${value.y1 * this.player_.currentHeight()}px` myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
myel.style.left = `${value.x1 * this.player_.currentWidth()}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 { } else {
myel.style.width = `${(value.x2 - value.x1) * this.player_.currentWidth()}px` 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.height = `${(value.y2 - value.y1) * (this.player_.currentHeight() + 30)}px`
//跟踪框位置 //跟踪框位置
myel.style.top = `${value.y1 * this.player_.currentHeight()}px` myel.style.top = `${value.y1 * this.player_.currentHeight()}px`
myel.style.left = `${value.x1 * this.player_.currentWidth()}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, "") myel.className = myel.className.replace(/display-none/ig, "")
...@@ -116,7 +108,7 @@ class DogTrack extends Component { ...@@ -116,7 +108,7 @@ class DogTrack extends Component {
setTimeout(() => { setTimeout(() => {
const numberDogId = Number(currentDogId) const numberDogId = Number(currentDogId)
if (dogIds && dogIds.has(numberDogId)) { 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); }, 100);
} }
...@@ -125,18 +117,25 @@ class DogTrack extends Component { ...@@ -125,18 +117,25 @@ class DogTrack extends Component {
if (!dogIds || dogIds.size === 0) return; if (!dogIds || dogIds.size === 0) return;
//@ts-ignore //@ts-ignore
const myContainer = this.player_.el_; const myContainer = this.player_.el_;
console.log("key currentDogId", dogIds, currentDogId, myContainer) // console.log("key currentDogId", dogIds, currentDogId, myContainer)
for (const key of dogIds.keys()) { for (const [key, value] of dogIds) {
//定位框元素
const el = document.createElement("div") const el = document.createElement("div")
el.id = `dog_${key}` el.id = `dog_${key}`
el.classList.add("display-none") 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) { if (key == currentDogId) {
// console.log("currentDogId", currentDogId)
el.classList.add("najiu-dog-track-current") el.classList.add("najiu-dog-track-current")
dogNameEl.classList.add("najiu-dog-track-dog-name-current")
} else { } else {
el.classList.add("najiu-dog-track") el.classList.add("najiu-dog-track")
} }
dogNameEl.appendChild(dogName)
el.appendChild(dogNameEl)
//@ts-ignore //@ts-ignore
myContainer.appendChild(el) myContainer.appendChild(el)
this.dogDiv.set(key, el) this.dogDiv.set(key, el)
......
...@@ -75,7 +75,7 @@ export function convertLabelInfo(data: TrackData[]) { ...@@ -75,7 +75,7 @@ export function convertLabelInfo(data: TrackData[]) {
const m = f ? f : new Map(); const m = f ? f : new Map();
m.set(frame.DogId, frame) m.set(frame.DogId, frame)
trackData.set(frame.FrameIndex, m) trackData.set(frame.FrameIndex, m)
dogIds.set(frame.DogId, frame.FrameIndex) dogIds.set(frame.DogId, frame)
}); });
console.log(`标识文件大小:${data.length}行,处理耗时:${new Date().getTime() - now}毫秒`) console.log(`标识文件大小:${data.length}行,处理耗时:${new Date().getTime() - now}毫秒`)
return [dogIds, trackData] return [dogIds, trackData]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment