From 8c7d1ed32b7653e9e0bf72544a28f99144e92d04 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 25 二月 2021 10:02:04 +0800
Subject: [PATCH] 增加事件标签和label去重
---
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 277 ++++++++++++++++++++++++++++++++-----------------------
1 files changed, 161 insertions(+), 116 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 4153b48..a6c5375 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -3,15 +3,27 @@
<div class="content-top">
<div class="grid-check">
<span
- :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
+ :class="
+ guid === 1
+ ? 'iconfont icongongge1 activegongge'
+ : 'iconfont icongongge1'
+ "
@click="setGuid(1)"
></span>
<span
- :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
+ :class="
+ guid === 2
+ ? 'iconfont icongongge activegongge'
+ : 'iconfont icongongge'
+ "
@click="setGuid(2)"
></span>
<span
- :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
+ :class="
+ guid === 3
+ ? 'iconfont icongongge2 activegongge'
+ : 'iconfont icongongge2'
+ "
@click="setGuid(3)"
></span>
</div>
@@ -24,21 +36,21 @@
</div>-->
<div
class="video-name"
- :class="{'current':curVideo.ID==video.ID}"
- @click="checkVideo(video,index)"
- v-for="(video,index) in relativeVideos"
+ :class="{ current: curVideo.ID == video.ID }"
+ @click="checkVideo(video, index)"
+ v-for="(video, index) in relativeVideos"
:key="video.ID"
>
<i class="el-icon-film"></i>
- <span>{{video.Camera}}</span>
+ <span>{{ video.Camera }}</span>
</div>
</div>
<div class="players" ref="playerWrap">
- <template v-if="guid==1">
+ <template v-if="guid == 1">
<div
class="video-item"
:ref="`gridVideoItem_${index}`"
- v-for="(item,index) in videoWrapArr"
+ v-for="(item, index) in videoWrapArr"
:key="index"
>
<div class="currentPlayer">
@@ -56,12 +68,14 @@
<div
class="video-item"
:ref="`gridVideoItem_${index}`"
- v-for="(item,index) in videoWrapArr"
+ v-for="(item, index) in videoWrapArr"
:key="index"
@click="checkCurVideo(index)"
>
- <template v-if="index<=videoArrs.length-1">
- <div :class="{'currentPlayer':curVideo.ID==videoArrs[index].ID}">
+ <template v-if="index <= videoArrs.length - 1">
+ <div
+ :class="{ currentPlayer: curVideo.ID == videoArrs[index].ID }"
+ >
<!-- {{videoArrs[index].ID}} -->
<!-- <img
:src="videoArrs[index].VideoCover"
@@ -91,8 +105,8 @@
<div class="content-bottom">
<div class="bot-left block">
<p class="title-partment">蹇�熸爣娉�</p>
- <div class="flex-box" style="height:28px;">
- <label style="padding-right:10px;">闅愭偅闂:</label>
+ <div class="flex-box" style="height: 28px">
+ <label style="padding-right: 10px">闅愭偅闂:</label>
<el-radio-group v-model="isUnusual">
<el-radio :label="0">鏃犲紓甯�</el-radio>
<el-radio :label="1">鏈夊紓甯�</el-radio>
@@ -101,22 +115,27 @@
<el-button
icon="el-icon-plus"
size="mini"
- v-show="isUnusual==1"
+ v-show="isUnusual == 1"
type="primary"
@click="addLabel(curVideo)"
- >娣诲姞鏍囨敞</el-button>
+ >娣诲姞鏍囨敞</el-button
+ >
</div>
<div class="flex-box fixed-height-box">
<label>鏍囨敞淇℃伅:</label>
<div class="mark-list">
<div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
<div class="time">
- <span>{{ zeroize(Math.floor(mark.Time/60)) }}:{{ zeroize(mark.Time%60) }}</span>
+ <span
+ >{{ zeroize(Math.floor(mark.Time / 60)) }}:{{
+ zeroize(mark.Time % 60)
+ }}</span
+ >
<i class="el-icon-edit" @click="editCurLabel(mark)"></i>
<i class="el-icon-delete" @click="removeCurLabel(mark)"></i>
</div>
<div class="label-content">
- <span>{{mark.Desc}}</span>
+ <span>{{ mark.Desc }}</span>
</div>
</div>
</div>
@@ -127,19 +146,19 @@
<div class="base-info">
<div>
<label>杞﹀彿:</label>
- <span>{{videoDetails.CarNumber}}</span>
+ <span>{{ videoDetails.CarNumber }}</span>
</div>
<div>
<label>杞︽:</label>
- <span>{{videoDetails.TrainNumber}}</span>
+ <span>{{ videoDetails.TrainNumber }}</span>
</div>
<div>
<label>鏃堕棿:</label>
- <span>{{videoDetails.VideoDate}}</span>
+ <span>{{ videoDetails.VideoDate }}</span>
</div>
<div>
<label>鍙告満|鍓徃鏈�:</label>
- <span>{{videoDetails.Driver1}}|{{videoDetails.Driver2}}</span>
+ <span>{{ videoDetails.Driver1 }}|{{ videoDetails.Driver2 }}</span>
</div>
</div>
</div>
@@ -148,7 +167,7 @@
<el-dialog
class="label-dialog"
:visible="labelDialogVisible"
- @close="labelDialogVisible=false"
+ @close="labelDialogVisible = false"
:append-to-body="false"
>
<div class="label-radio">
@@ -161,127 +180,142 @@
<div class="label-check">
<p class="label">闅愭偅闂:</p>
<el-checkbox-group v-model="labelCheckedList">
- <el-checkbox v-for="item in labelOptions" :key="item.ID" :label="item.ID">{{item.Name}}</el-checkbox>
+ <el-checkbox
+ v-for="item in labelOptions"
+ :key="item.ID"
+ :label="item.ID"
+ >{{ item.Name }}</el-checkbox
+ >
</el-checkbox-group>
</div>
<div class="btns">
<el-button @click="cancelLabelChecked" size="small">鍙栨秷</el-button>
- <el-button @click="submitLabelChecked()" size="small" type="primary">纭畾</el-button>
+ <el-button @click="submitLabelChecked()" size="small" type="primary"
+ >纭畾</el-button
+ >
</div>
</el-dialog>
</div>
</template>
<script>
-import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';
-import AliPlayer from './aliPlayer/index';
+import {
+ getlstInit,
+ updateVideoAnalyze,
+ getlst,
+ getRelatedVideoInfo,
+ getLabelMap,
+ delLabel,
+ editLabel,
+} from "@/api/shuohuang";
+import AliPlayer from "./aliPlayer/index";
export default {
name: "VideoAnalyze",
components: {
- AliPlayer
+ AliPlayer,
},
props: {
videoDetails: {
- default: () => { return {} },
- type: Object
- }
+ default: () => {
+ return {};
+ },
+ type: Object,
+ },
},
- data () {
+ data() {
return {
guid: 1,
labelDialogVisible: false,
curVideo: {},
- isUnusual:'',
+ isUnusual: "",
videoArrs: [],
relativeVideos: [],
labelCheckedList: [],
videoWrapArr: [],
labelOptions: [],
- selectedLabelId: '',
+ selectedLabelId: "",
setLabelTime: 0,
isCheckAllVideo: 1,
- }
+ };
},
watch: {
- 'curVideo.LableLst': {
- handler (n, o) {
+ "curVideo.LableLst": {
+ handler(n, o) {
if (n.length > 0) {
- this.isUnusual = 1
+ this.isUnusual = 1;
} else {
- this.isUnusual = 0
+ this.isUnusual = 0;
}
},
- deep: true
+ deep: true,
},
videoDetails: {
- handler (newVal, oldVal) {
- this.getVideos(newVal)
+ handler(newVal, oldVal) {
+ this.getVideos(newVal);
},
- deep: true
+ deep: true,
},
},
- mounted () {
- console.log('analyze mount')
+ mounted() {
+ console.log("analyze mount");
this.renderLabelOpts();
this.setGuid(1);
this.getVideos(this.videoDetails);
},
methods: {
- zeroize(val){
- return val<10?'0'+val:val
+ zeroize(val) {
+ return val < 10 ? "0" + val : val;
},
- checkCurVideo (index) {
+ checkCurVideo(index) {
if (this.relativeVideos[index]) {
this.curVideo = this.relativeVideos[index];
this.refreshCurVideoLabel(this.curVideo);
}
},
- getVideos (video) {
+ getVideos(video) {
let _this = this;
- getRelatedVideoInfo({ UniqeID: video.UniqeID }).then(res => {
- console.log(res)
- res.data.forEach(element => {
- element.marks = _this.mergeMarks(element)
- console.log(element.marks)
+ getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
+ console.log(res);
+ res.data.forEach((element) => {
+ element.marks = _this.mergeMarks(element);
+ console.log(element.marks);
});
- _this.curVideo = res.data.find(item=>item.ID == video.ID);
+ _this.curVideo = res.data.find((item) => item.ID == video.ID);
//_this.curVideo = res.data[0];
_this.videoArrs = res.data;
_this.relativeVideos = res.data;
this.$nextTick(() => {
_this.$refs[`player_${_this.curVideo.ID}`][0].init();
- })
-
- })
+ });
+ });
},
- renderLabelOpts () {
+ renderLabelOpts() {
let _this = this;
- getLabelMap().then(res => {
- _this.labelOptions = res.data
- })
+ getLabelMap().then((res) => {
+ _this.labelOptions = res.data;
+ });
},
- refreshCurVideoLabel (video) {
- getRelatedVideoInfo({ UniqeID: video.UniqeID }).then(res => {
- res.data.forEach(d => {
- if(d.ID === video.ID){
- video.LableLst = d.LableLst
+ refreshCurVideoLabel(video) {
+ getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
+ res.data.forEach((d) => {
+ if (d.ID === video.ID) {
+ video.LableLst = d.LableLst;
}
// let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
// someVideo.LableLst = d.LableLst
- })
- })
+ });
+ });
},
- checkVideo (video, index) {
+ checkVideo(video, index) {
this.refreshCurVideoLabel(video);
this.curVideo = video;
this.$nextTick(() => {
this.$refs[`player_${this.curVideo.ID}`][0].init();
- })
-
+ });
},
- setGuid (guid) {
+ setGuid(guid) {
let _this = this;
this.guid = guid;
// for(var i = 0; i < Math.pow(guid,2); i++){
@@ -294,47 +328,51 @@
this.videoWrapArr = Math.pow(guid, 2);
this.$nextTick(() => {
for (var i = 0; i < Math.pow(guid, 2); i++) {
- this.$refs[`gridVideoItem_${i}`][0].style.width = this.$refs['playerWrap'].offsetWidth / guid + 'px';
- this.$refs[`gridVideoItem_${i}`][0].style.height = this.$refs['playerWrap'].offsetHeight / guid + 'px';
+ this.$refs[`gridVideoItem_${i}`][0].style.width =
+ this.$refs["playerWrap"].offsetWidth / guid + "px";
+ this.$refs[`gridVideoItem_${i}`][0].style.height =
+ this.$refs["playerWrap"].offsetHeight / guid + "px";
}
- })
+ });
},
- cancelLabelChecked () {
+ cancelLabelChecked() {
this.labelDialogVisible = false;
},
- submitLabelChecked () {
+ submitLabelChecked() {
let _this = this;
let tempArr = [];
if (this.isCheckAllVideo == 1) {
- tempArr = this.videoArrs.map(video => video.ID)
+ tempArr = this.videoArrs.map((video) => video.ID);
}
- let desc = this.labelCheckedList.map(lableId => {
+ let desc = this.labelCheckedList.map((lableId) => {
for (let label of this.labelOptions) {
if (label.ID == lableId) {
return label.Name;
}
}
- })
+ });
let query = {
ID: this.selectedLabelId,
- ParentID: this.isCheckAllVideo ? tempArr.join(',') : this.curVideo.ID + '',
- ParentUniqID:this.curVideo.UniqeID+ '',
- Time: Math.round(this.setLabelTime) + '',
- Codes: this.labelCheckedList.join(','),
- Desc: desc.join('锛�')
+ ParentID: this.isCheckAllVideo
+ ? tempArr.join(",")
+ : this.curVideo.ID + "",
+ ParentUniqID: this.curVideo.UniqeID + "",
+ Time: Math.round(this.setLabelTime) + "",
+ Codes: this.labelCheckedList.join(","),
+ Desc: desc.join("锛�"),
};
- editLabel(query).then(rsp => {
+ editLabel(query).then((rsp) => {
if (rsp && rsp.success) {
_this.labelDialogVisible = false;
- this.$set(_this.curVideo,'LableLst',[]);
+ this.$set(_this.curVideo, "LableLst", []);
//_this.curVideo.LableLst = [];
- rsp.data.forEach(label=>{
- if(label.ParentID == _this.curVideo.ID){
- _this.curVideo.LableLst.push(label)
+ rsp.data.forEach((label) => {
+ if (label.ParentID == _this.curVideo.ID) {
+ _this.curVideo.LableLst.push(label);
}
- })
+ });
// getRelatedVideoInfo({ UniqeID: _this.videoDetails.UniqeID }).then(res => {
// res.data.forEach(d => {
// let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
@@ -342,56 +380,63 @@
// })
// })
- this.$message.success("娣诲姞鎴愬姛")
+ this.$message.success("娣诲姞鎴愬姛");
// 鏍囨敞
- _this.setMarks(this.curVideo)
+ _this.setMarks(this.curVideo);
} else {
- this.$message.warning(rsp.msg)
+ this.$message.warning(rsp.msg);
}
- })
+ });
},
- addLabel (video) {
+ addLabel(video) {
this.labelCheckedList = [];
- this.selectedLabelId = '';
+ this.selectedLabelId = "";
this.labelDialogVisible = true;
// 淇濆瓨鐐瑰嚮鏍囨敞鐨勬椂闂�
this.setLabelTime = this.$refs[`player_${video.ID}`][0].getCurrentTime();
},
- editCurLabel (mark) {
+ editCurLabel(mark) {
this.selectedLabelId = mark.ID;
this.labelCheckedList = mark.Codes.split(" ,");
this.labelDialogVisible = true;
},
- removeCurLabel (mark) {
+ removeCurLabel(mark) {
let _this = this;
- delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then(rsp => {
+ delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then((rsp) => {
if (rsp && rsp.success) {
_this.curVideo.LableLst = rsp.data;
- this.$message.success("鍒犻櫎鎴愬姛")
+ this.$message.success("鍒犻櫎鎴愬姛");
// 鏍囨敞
- _this.setMarks(_this.curVideo)
+ _this.setMarks(_this.curVideo);
} else {
- this.$message.warning(rsp.msg)
+ this.$message.warning(rsp.msg);
}
- })
+ });
},
- mergeMarks (videoInfo) {
- let marks = videoInfo.HotPoint.concat(videoInfo.LableLst).map(lable => {
+ mergeMarks(videoInfo) {
+ // debugger
+ const eMarks = videoInfo.EventLst.map(function (item) {
+ return {
+ offset: item.SecondsInVideo + "",
+ text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
+ };
+ });
+ const labMarks = videoInfo.LableLst.map((lable) => {
return {
offset: lable.Time,
- text: lable.Desc
- }
- })
+ text: lable.Desc,
+ };
+ });
- return marks;
+ return eMarks.concat(labMarks);
},
- setMarks (video) {
+ setMarks(video) {
let marks = this.mergeMarks(video);
this.$refs[`player_${video.ID}`][0].setProgressMarkers(marks);
- }
- }
-}
+ },
+ },
+};
</script>
<style lang="scss">
@@ -475,7 +520,7 @@
span {
padding-right: 5px;
}
- i[class^='el-icon'] {
+ i[class^="el-icon"] {
padding: 3px;
}
}
--
Gitblit v1.8.0