Skip to content

N
najiu-skynet-admin
Commit b5235769 authored by 朱松文's avatar 朱松文
Browse files
Options

同时实现多只狗追踪

parent 8214eee1
Show whitespace changes
Inline Side-by-side
Showing with 229 additions and 178 deletions
src/assets/scss/myVideo.scss
View file @ b5235769
......@@ -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
View file @ b5235769
<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
View file @ b5235769
......@@ -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
View file @ b5235769
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
View file @ b5235769
......@@ -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
View file @ b5235769
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
View file @ b5235769
......@@ -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);
}
......
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