From 7712b788faf815e8e39d5bbbd61b5e4261eee7b2 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期日, 28 二月 2021 18:54:54 +0800
Subject: [PATCH] 朔黄首页更新
---
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 338 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 240 insertions(+), 98 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 623a094..8a8f6ef 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -1,17 +1,29 @@
<template>
- <div class="content">
+ <div class="video-analyze-content">
<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,28 +36,28 @@
</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">
<!-- {{curVideo.ID}} -->
<!-- <img :src="curVideo.VideoCover" style="width:100px" /> -->
<ali-player
- :source="'http://' + curVideo.VideoPath"
+ :source="curVideo.VideoPath"
:markers="curVideo.marks"
:ref="`player_${curVideo.ID}`"
/>
@@ -56,18 +68,21 @@
<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"
style="width:100px"
/>-->
<ali-player
- :source="'http://' + videoArrs[index].VideoPath"
+ :source="videoArrs[index].VideoPath"
:markers="videoArrs[index].marks"
:ref="`player_${videoArrs[index].ID}`"
/>
@@ -90,29 +105,37 @@
<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>
- <el-radio v-model="curVideo.IsUnusual" label="0">鏃犲紓甯�</el-radio>
- <el-radio v-model="curVideo.IsUnusual" label="1">鏈夊紓甯�</el-radio>
+ <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>
+ </el-radio-group>
+
<el-button
icon="el-icon-plus"
size="mini"
- v-show="curVideo.IsUnusual==1"
+ v-show="isUnusual == 1"
type="primary"
@click="addLabel(curVideo)"
- >娣诲姞鏍囨敞</el-button>
+ >娣诲姞鏍囨敞</el-button
+ >
</div>
- <div class="flex-box">
+ <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>{{mark.Time}}</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>
@@ -123,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>
@@ -144,94 +167,152 @@
<el-dialog
class="label-dialog"
:visible="labelDialogVisible"
- @close="labelDialogVisible=false"
+ @close="labelDialogVisible = false"
:append-to-body="false"
>
+ <div class="label-radio">
+ <p class="label">閫夋嫨灏嗚鏍囨敞鐨勮棰�:</p>
+ <el-radio-group v-model="isCheckAllVideo">
+ <el-radio :label="1">鏍囨敞鍦ㄥ叏閮ㄤ綅缃殑瑙嗛娈�</el-radio>
+ <el-radio :label="0">浠呮爣娉ㄩ�変腑鐨勮棰戞</el-radio>
+ </el-radio-group>
+ </div>
<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() {
return {
guid: 1,
labelDialogVisible: false,
curVideo: {},
+ isUnusual: "",
videoArrs: [],
relativeVideos: [],
labelCheckedList: [],
videoWrapArr: [],
labelOptions: [],
- selectedLabelId: '',
+ selectedLabelId: "",
setLabelTime: 0,
- }
+ isCheckAllVideo: 1,
+ };
},
watch: {
+ "curVideo.LableLst": {
+ handler(n, o) {
+ if (n.length > 0) {
+ this.isUnusual = 1;
+ } else {
+ this.isUnusual = 0;
+ }
+ },
+ deep: true,
+ },
videoDetails: {
handler(newVal, oldVal) {
- this.getVideos(newVal)
+ this.getVideos(newVal);
},
- deep: true
+ deep: true,
},
},
mounted() {
+ console.log("analyze mount");
this.renderLabelOpts();
this.setGuid(1);
this.getVideos(this.videoDetails);
},
methods: {
+ zeroize(val) {
+ return val < 10 ? "0" + val : val;
+ },
+ checkCurVideo(index) {
+ if (this.relativeVideos[index]) {
+ this.curVideo = this.relativeVideos[index];
+ this.refreshCurVideoLabel(this.curVideo);
+ }
+ },
getVideos(video) {
let _this = this;
- getRelatedVideoInfo({ UniqeID: video.UniqeID }).then(res => {
- console.log(res)
- _this.curVideo = res.data[0];
- _this.videoArrs = res.data;
- // _this.videoWrapArr.push(res.data[0]);
- // _this.setGuid(1)
-
- 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[0];
+ _this.videoArrs = res.data;
_this.relativeVideos = res.data;
-
- })
+ this.$nextTick(() => {
+ _this.$refs[`player_${_this.curVideo.ID}`][0].init();
+ });
+ });
},
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;
+ }
+ // let someVideo = _this.videoArrs.find(video => video.ID === d.ID);
+ // someVideo.LableLst = d.LableLst
+ });
+ });
},
checkVideo(video, index) {
+ this.refreshCurVideoLabel(video);
this.curVideo = video;
- if (index > 0 && this.guid == 1) {
- //this.videoWrapArr =
- }
+ this.$nextTick(() => {
+ this.$refs[`player_${this.curVideo.ID}`][0].init();
+ });
},
setGuid(guid) {
@@ -245,52 +326,72 @@
// }
// }
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() {
this.labelDialogVisible = false;
},
submitLabelChecked() {
- let desc = this.labelCheckedList.map(lableId => {
+ let _this = this;
+ let tempArr = [];
+ if (this.isCheckAllVideo == 1) {
+ tempArr = this.videoArrs.map((video) => video.ID);
+ }
+ 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.curVideo.ID + '',
- 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.curVideo.LableLst = rsp.data;
- this.$message.success("娣诲姞鎴愬姛")
+ _this.labelDialogVisible = false;
+ this.$set(_this.curVideo, "LableLst", []);
+ //_this.curVideo.LableLst = [];
+ 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);
+ // someVideo.LableLst = d.LableLst
+ // })
+ // })
+ this.$message.success("娣诲姞鎴愬姛");
// 鏍囨敞
- this.setMarks(this.curVideo)
+ _this.setMarks(this.curVideo);
+ _this.$parent.$parent.filterSearchData();
} else {
- this.$message.warning(rsp.msg)
+ this.$message.warning(rsp.msg);
}
- })
+ });
},
addLabel(video) {
this.labelCheckedList = [];
- this.selectedLabelId = '';
+ this.selectedLabelId = "";
this.labelDialogVisible = true;
// 淇濆瓨鐐瑰嚮鏍囨敞鐨勬椂闂�
@@ -298,41 +399,50 @@
},
editCurLabel(mark) {
this.selectedLabelId = mark.ID;
- this.labelCheckedList = mark.Codes.split(",");
+ this.labelCheckedList = mark.Codes.split(" ,");
this.labelDialogVisible = true;
},
removeCurLabel(mark) {
- delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then(rsp => {
+ let _this = this;
+ delLabel({ ID: mark.ID, ParentID: this.curVideo.ID }).then((rsp) => {
if (rsp && rsp.success) {
- this.curVideo.LableLst = rsp.data;
- this.$message.success("鍒犻櫎鎴愬姛")
+ _this.curVideo.LableLst = rsp.data;
+ this.$message.success("鍒犻櫎鎴愬姛");
// 鏍囨敞
- this.setMarks(this.curVideo)
+ _this.setMarks(_this.curVideo);
+ _this.$parent.$parent.filterSearchData();
} else {
- this.$message.warning(rsp.msg)
+ this.$message.warning(rsp.msg);
}
- })
+ });
},
mergeMarks(videoInfo) {
- let marks = videoInfo.HotPoint.concat(videoInfo.LableLst).map(lable => {
+ 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) {
let marks = this.mergeMarks(video);
this.$refs[`player_${video.ID}`][0].setProgressMarkers(marks);
- }
- }
-}
+ },
+ },
+};
</script>
-<style lang="scss">
-.content {
+<style lang="scss" >
+.video-analyze-content {
+ margin: 0;
padding: 15px;
text-align: left;
.content-top {
@@ -376,8 +486,19 @@
background: black;
border: 1px solid #fff;
box-sizing: border-box;
+ & > div {
+ height: 100%;
+ & > div {
+ height: 100%;
+ }
+ }
.currentPlayer {
border: 2px solid aqua;
+ height: 100%;
+ box-sizing: border-box;
+ & > div {
+ height: 100%;
+ }
}
}
}
@@ -412,6 +533,10 @@
}
}
}
+ .fixed-height-box {
+ height: 200px;
+ overflow-y: auto;
+ }
}
.bot-right {
width: 210px;
@@ -425,8 +550,19 @@
.label-dialog {
.el-dialog {
- width: 700px;
+ width: 700px !important;
+ height: 670px !important;
+ .el-dialog__header {
+ height: 20px;
+ }
+ p.label {
+ line-height: 36px;
+ }
+ .label-radio {
+ padding: 20px;
+ }
.label-check {
+ padding: 20px;
min-height: 400px;
margin-bottom: 20px;
.el-checkbox-group {
@@ -436,9 +572,15 @@
width: 50%;
text-align: left;
margin: 0;
+ margin-bottom: 4px;
}
}
}
+ .btns {
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+ }
}
}
}
--
Gitblit v1.8.0