<template>
|
<div class="video-analyze-content">
|
<div class="content-top">
|
<!-- 顶部栏 -->
|
|
<div class="video-area">
|
<!-- 播放器区域 -->
|
<div class="players" ref="playerWrap">
|
<div class="single"></div>
|
<template v-if="guid == 1">
|
<div
|
class="video-item single"
|
:ref="`gridVideoItem_${index}`"
|
v-for="(item, index) in videoWrapArr"
|
:key="item.id"
|
>
|
<div style="display: none"></div>
|
<div class="currentPlayer">
|
<ali-player
|
@pause="singlePause"
|
@play="singlePlay"
|
@timeupdate="timeUpdate"
|
:source="curVideo.VideoPath | fixPath"
|
:markers="marks_filter"
|
:ref="`player_${curVideo.id}`"
|
/>
|
</div>
|
</div>
|
</template>
|
<template v-else>
|
<div
|
class="video-item"
|
:ref="`gridVideoItem_${index}`"
|
v-for="(item, index) in videoWrapArr"
|
:key="item.id"
|
@click="checkCurVideo(index)"
|
style="position: relative"
|
@mouseenter.stop.prevent="videoMouseEnter($event)"
|
@mouseleave="videoMouseLeave($event)"
|
>
|
<!-- -->
|
<template v-if="index <= videoArrs.length - 1">
|
<div class="video-box-top">
|
<b>{{ videoArrs[index].CameraPosition }}</b>
|
</div>
|
<div
|
:class="{
|
currentPlayer: curVideo.ID == videoArrs[index].ID,
|
}"
|
>
|
<ali-player
|
@timeupdate="timeUpdate(e, index)"
|
:source="videoArrs[index].VideoPath | fixPath"
|
:markers="marks_filter_arr[index].marks"
|
@pause="isStop = true"
|
@play="isStop = false"
|
:ref="`player_${videoArrs[index].id}`"
|
/>
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<!-- 总体播放控制 -->
|
<div class="player-control">
|
<div class="progress-bar">
|
<el-tooltip
|
placement="top"
|
v-for="(item, index) in eventMarks_filter"
|
:key="item.offset + index"
|
>
|
<div slot="content">
|
{{ getTimeStr(item.offset) }}
|
<br />
|
{{ item.text }}
|
</div>
|
<div
|
class="self-dot"
|
:class="
|
curVideo.IsOperate == '1' &&
|
item.state == 0 &&
|
!item.text.includes('手比')
|
? 'red'
|
: getColor(item.text)
|
"
|
:style="{
|
left: (item.offset / maxSecond) * 100 + '%',
|
}"
|
@click="dotJump(item.offset)"
|
></div>
|
</el-tooltip>
|
<el-tooltip
|
placement="top"
|
v-for="(item, index) in labelMarks"
|
:key="index"
|
>
|
<div slot="content">
|
{{ getTimeStr(item.offset) }}
|
<br />
|
{{ item.text }}
|
</div>
|
<div
|
class="label-dot"
|
:style="{
|
left: (item.offset / maxSecond) * 100 + '%',
|
}"
|
@click="dotJump(item.offset)"
|
></div>
|
</el-tooltip>
|
<div ref="time-clip" class="time-clip"></div>
|
|
<el-slider
|
v-model="curTime"
|
:show-tooltip="false"
|
:max="maxSecond"
|
@mousemove.native.stop="triggerHover"
|
@mouseleave.native="leaveBar"
|
@mouseover.native="intoBar"
|
@change="progressChange"
|
></el-slider>
|
</div>
|
<div class="time">{{ curPlayTime }} / {{ maxVideoTime }}</div>
|
<div class="control-zone">
|
<el-dropdown
|
trigger="click"
|
:popper-append-to-body="false"
|
@command="handleCommand"
|
v-show="showLocChoise"
|
placement="top-end"
|
>
|
<span class="el-dropdown-link">
|
{{ curCamera }}
|
<i class="icon iconfont"></i>
|
</span>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item
|
v-for="(item, index) in videoArrs"
|
:key="index"
|
:command="item"
|
>{{ item.CameraPosition }}</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</el-dropdown>
|
<div v-if="!showLocChoise"></div>
|
<div class="play-btn">
|
<div class="group">
|
<span
|
class="back"
|
@click="moveBar(-10)"
|
style="cursor: pointer"
|
>快退10秒</span
|
>
|
<i class="icon iconfont" @click="moveBar(-10)"></i>
|
<i
|
class="icon iconfont"
|
style="font-size: 18px; cursor: pointer; margin: 0 40px"
|
@click="playAll"
|
v-if="showPlayBtn"
|
></i
|
>
|
<i
|
class="icon iconfont"
|
style="font-size: 18px; cursor: pointer; margin: 0 40px"
|
@click="pauseAll"
|
v-else
|
></i
|
>
|
<i class="icon iconfont" @click="moveBar(10)"></i>
|
<span
|
class="forward"
|
@click="moveBar(10)"
|
style="cursor: pointer"
|
>快进10秒</span
|
>
|
</div>
|
<!-- <span class="icon iconfont"></span> -->
|
</div>
|
<div class="spanList">
|
<span
|
:class="
|
guid === 1
|
? 'icon-rt iconfont icongongge1 activegongge'
|
: 'icon-rt iconfont icongongge1'
|
"
|
@click="setGuid(1)"
|
></span>
|
<span
|
:class="
|
guid === 2
|
? 'icon-rt iconfont icongongge activegongge'
|
: 'icon-rt iconfont icongongge'
|
"
|
@click="setGuid(2)"
|
></span>
|
<span
|
:class="
|
guid === 3
|
? 'icon-rt iconfont icongongge2 activegongge'
|
: 'icon-rt iconfont icongongge2'
|
"
|
@click="setGuid(3)"
|
></span>
|
<img
|
src="/images/shuohuang/组 801.png"
|
alt=""
|
v-if="showHand == false"
|
@click="openHand"
|
/>
|
<img
|
src="/images/shuohuang/组 800.png"
|
alt=""
|
v-else
|
@click="closeHand"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 右侧信息栏 -->
|
<div class="info-list">
|
<div class="info">
|
<div class="base-info">
|
<div class="info-item">
|
<span class="CarNumber">{{ videoDetails.CarNumber }}</span>
|
<label>车次:</label>
|
<span>{{ videoDetails.TrainNumber }}</span>
|
</div>
|
<div class="info-item">
|
<label>时间:</label>
|
<span>{{ videoDetails.StartTime }}</span>
|
</div>
|
<div class="info-item">
|
<label>司机 | 副司机:</label>
|
<span
|
>{{ videoDetails.Driver1 }} | {{ videoDetails.Driver2 }}</span
|
>
|
</div>
|
</div>
|
</div>
|
<div class="info-video">
|
<p class="title-partment">相关视频</p>
|
<div class="v-name-block">
|
<div
|
class="video-name"
|
:class="{ current: curVideo.GroupID == video.GroupID }"
|
@click="checkVideo(video)"
|
v-for="(video, index) in curRoomVideos"
|
:key="index"
|
>
|
<i class="icon iconfont"></i>
|
<span>{{ video.StartTime }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 下侧信息 -->
|
<div class="content-bottom">
|
<div class="bot-left">
|
<!-- <p class="title-partment">快速标注</p> -->
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="隐患事件" name="first">
|
<div class="yinhuan-wrap">
|
<div class="wrap-title">
|
{{
|
yinhuanArr.length
|
? "识别出的异常情况："
|
: "暂无识别出异常情况"
|
}}
|
</div>
|
<div class="list">
|
<div
|
class="list-item"
|
v-for="(item, index) in yinhuanArr"
|
:key="index"
|
@click="dotJump(item.offset)"
|
>
|
<span style="margin-right: 20px">{{
|
getTimeStr(item.offset)
|
}}</span>
|
<span
|
style="
|
display: block;
|
min-width: 135px;
|
margin-right: 20px;
|
min-widht: 140px;
|
"
|
>{{ item.text }}
|
</span>
|
|
<!-- <span class="list-warn">未手比 </span> -->
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane label="快速标注" name="mid">
|
<div class="mark">
|
<div class="flex-box" style="height: 28px">
|
<label>隐患问题:</label>
|
<el-radio-group v-model="isUnusual">
|
<el-radio :label="0">无异常</el-radio>
|
<el-radio :label="1">有异常</el-radio>
|
</el-radio-group>
|
|
<i
|
class="icon iconfont"
|
v-show="isUnusual == 1"
|
@click="addLabel(curVideo)"
|
></i
|
>
|
</div>
|
<div class="fixed-height-box">
|
<label v-if="!showTable">标注信息:</label>
|
<div class="mark-list" v-if="!showTable">
|
<div
|
class="mark-item"
|
v-for="mark in curVideo.LableLst"
|
:key="mark.ID"
|
>
|
<i class="icon iconfont edit" @click="editCurLabel(mark)"
|
></i
|
>
|
<i
|
class="icon iconfont remove"
|
@click="removeCurLabel(mark)"
|
></i
|
>
|
<span class="mark-time"
|
>{{ pad0(Math.floor(mark.Time / 60)) }}:{{
|
pad0(mark.Time % 60)
|
}}</span
|
>
|
<span
|
class="mark-desc"
|
v-for="(item, index) in mark.Desc.split(',')"
|
:key="index"
|
>{{ item }}</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-tab-pane>
|
<dataset-chart style="width: 100%" v-if="showTable"></dataset-chart>
|
|
<el-tab-pane label="公里标" name="second"></el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
|
<!-- 弹窗 -->
|
<el-dialog
|
class="label-dialog"
|
:visible="labelDialogVisible"
|
@close="labelDialogVisible = false"
|
:append-to-body="false"
|
:modal="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-group>
|
</div>
|
<div class="btns">
|
<el-button @click="cancelLabelChecked" size="mini ">取消</el-button>
|
<el-button @click="submitLabelChecked" size="mini " type="primary"
|
>确定</el-button
|
>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getRelatedVideoInfo,
|
getCarVideos,
|
getLabelMap,
|
delLabel,
|
editLabel,
|
} from "@/api/shuohuang";
|
import DatasetChart from "./charts/datasetForVideo";
|
import AliPlayer from "./aliPlayer/index";
|
|
function throttle(fn, delay) {
|
// 记录上一次函数触发的时间以及定义一个定时器
|
var lastTime, timer;
|
var delay = delay || 500;
|
return function (e) {
|
var nowTime = Date.now();
|
if (lastTime && nowTime - lastTime < delay) {
|
clearTimeout(timer);
|
timer = setTimeout(function () {
|
// 记录上一次函数触发的时间
|
lastTime = nowTime;
|
// 修正this指向问题
|
fn.call(this, e);
|
}, delay);
|
} else {
|
lastTime = nowTime;
|
fn.call(this, e);
|
}
|
};
|
}
|
|
export default {
|
name: "VideoAnalyze",
|
components: {
|
AliPlayer,
|
DatasetChart,
|
},
|
props: {
|
videoDetails: {
|
default: () => {
|
return {};
|
},
|
type: Object,
|
},
|
},
|
filters: {
|
fixPath(str) {
|
if (!str || str == undefined) {
|
return "";
|
}
|
|
return str.replace("/opt/vasystem", "");
|
},
|
},
|
data() {
|
return {
|
showHand: true,
|
guid: 1,
|
labelDialogVisible: false,
|
curVideo: {},
|
isUnusual: "",
|
videoArrs: [],
|
relativeVideos: [],
|
allCurVideos: [],
|
labelCheckedList: [],
|
videoWrapArr: [],
|
labelOptions: [],
|
selectedLabelId: "",
|
setLabelTime: 0,
|
isCheckAllVideo: 1,
|
curRoomVideos: [],
|
curCamera: "",
|
showTable: false,
|
showLocChoise: true,
|
activeName: "first",
|
curTime: 0,
|
showPlayBtn: true,
|
eventMarks: [],
|
marks: {},
|
labelMarks: [],
|
maxDuration: 0,
|
maxVideoTime: "",
|
curPlayTime: "00:00",
|
maxSecond: 0,
|
isStop: false,
|
};
|
},
|
watch: {
|
"curVideo.LableLst": {
|
handler(n, o) {
|
if (n.length > 0) {
|
this.isUnusual = 1;
|
} else {
|
this.isUnusual = 0;
|
}
|
},
|
deep: true,
|
},
|
videoDetails: {
|
handler(newVal) {
|
this.getCurVideos(newVal);
|
},
|
deep: true,
|
},
|
curTime(newVal) {
|
this.curPlayTime = this.getTimeStr(newVal);
|
},
|
/* showHand() {
|
let arr = this.videoArrs.map((item) => {
|
item.marks = item.marks.filter((mark) => {
|
console.log(mark.text);
|
return mark.text != "手比: 手比";
|
});
|
});
|
console.log(arr);
|
}, */
|
},
|
mounted() {
|
this.renderLabelOpts();
|
|
this.setGuid(1);
|
|
this.getCurVideos(this.videoDetails);
|
|
// this.getRelatedVideos(this.videoDetails);
|
},
|
destroyed() {
|
this.videoArrs.length = 0;
|
},
|
methods: {
|
triggerHover(e) {
|
let fn = throttle(this.hoverAction, 2000);
|
fn(e);
|
},
|
hoverAction(e) {
|
console.log(e.target.className);
|
if (
|
e.target.className == "el-slider__button-wrapper hover" ||
|
e.target.className == "el-tooltip el-slider__button hover"
|
) {
|
this.$refs["time-clip"].style["left"] =
|
(this.curTime / this.maxSecond) * 880 - 20 + "px";
|
this.$refs["time-clip"].innerHTML = this.curPlayTime;
|
return;
|
}
|
this.$refs["time-clip"].style["left"] = e.offsetX - 20 + "px";
|
this.$refs["time-clip"].innerHTML = this.getTimeStr(
|
(e.offsetX / 880) * this.maxSecond
|
);
|
},
|
intoBar(e) {
|
this.$refs["time-clip"].style["display"] = "block";
|
},
|
leaveBar(e) {
|
this.$refs["time-clip"].style["display"] = "none";
|
},
|
playAll() {
|
this.showPlayBtn = false;
|
if (this.guid == 1) {
|
this.$refs[`player_${this.curVideo.id}`][0].play();
|
this.maxDuration =
|
this.$refs[`player_${this.curVideo.id}`][0].getDuration();
|
} else {
|
this.videoArrs.forEach((v) => {
|
this.$refs[`player_${v.id}`][0].play();
|
});
|
}
|
},
|
pauseAll() {
|
this.showPlayBtn = true;
|
if (this.guid == 1) {
|
this.$refs[`player_${this.curVideo.id}`][0].pause();
|
} else {
|
this.videoArrs.forEach((v) => {
|
this.$refs[`player_${v.id}`][0].pause();
|
});
|
}
|
},
|
moveBar(val) {
|
this.curTime += val;
|
this.progressChange(this.curTime);
|
},
|
progressChange(val) {
|
this.showPlayBtn = true;
|
let that = this;
|
if (this.guid == 1) {
|
this.$refs[`player_${this.curVideo.id}`][0].pause();
|
this.$refs[`player_${this.curVideo.id}`][0].seek(val);
|
// this.$refs[`player_${this.curVideo.ID}`][0].play();
|
setTimeout(() => {
|
let curT =
|
that.$refs[`player_${that.curVideo.ID}`][0].getCurrentTime();
|
}, 600);
|
} else {
|
this.videoArrs.forEach((v, i) => {
|
this.$refs[`player_${v.id}`][0].seek(val);
|
this.$refs[`player_${v.id}`][0].pause();
|
if (i == 0) {
|
let curT = this.$refs[`player_${v.id}`][0].getCurrentTime();
|
}
|
});
|
}
|
},
|
getTimeStr(sec) {
|
return `${this.pad0(Math.floor(sec / 60))}:${this.pad0(
|
Math.floor(sec % 60)
|
)}`;
|
},
|
timeUpdate(e, index) {
|
if (this.isStop) {
|
return;
|
}
|
let curT;
|
if (this.guid == 1) {
|
curT = Math.floor(
|
this.$refs[`player_${this.curVideo.id}`][0].getCurrentTime()
|
);
|
} else {
|
curT = Math.floor(
|
this.$refs[`player_${this.videoArrs[index].id}`][0].getCurrentTime()
|
);
|
}
|
if (curT <= this.curTime) {
|
return;
|
} else {
|
this.curTime = curT;
|
}
|
},
|
videoMouseEnter(e) {
|
let target = e.target;
|
if (target.children.length > 1) {
|
target.children[0].style.display = "block";
|
}
|
},
|
videoMouseLeave(e) {
|
let target = e.target;
|
if (
|
target.children.length == 2 &&
|
target.children[0].className == "video-box-top"
|
) {
|
target.children[0].style.display = "none";
|
}
|
},
|
handleClick(instance) {
|
if (instance.name == "second") {
|
this.showTable = true;
|
} else {
|
this.showTable = false;
|
}
|
},
|
handleCommand(cmd) {
|
console.log(cmd);
|
console.log(this.$refs);
|
|
let _this = this;
|
_this.curVideo = cmd;
|
_this.curCamera = _this.curVideo.CameraPosition;
|
_this.$nextTick(() => {
|
console.log(_this.$refs);
|
_this.$refs[`player_${_this.curVideo.id}`][0].init();
|
});
|
},
|
pad0(val) {
|
return val < 10 ? "0" + val : val;
|
},
|
checkCurVideo(index) {
|
if (this.relativeVideos[index]) {
|
this.curVideo = this.relativeVideos[index];
|
this.refreshCurVideoLabel(this.curVideo);
|
}
|
},
|
getCurVideos(v) {
|
let _this = this;
|
getCarVideos({
|
TrainNumber: v.TrainNumber,
|
CarNumber: v.CarNumber,
|
Driver1: v.Driver1,
|
}).then((res) => {
|
res.data.forEach((item) => {
|
item.marks = _this.mergeMarks(item);
|
});
|
|
_this.allCurVideos = res.data;
|
|
_this.curVideo = res.data.find((item) => item.id == v.id);
|
|
_this.refreshCurVideoLabel(_this.curVideo);
|
|
// 设置下拉菜单选中项
|
_this.curCamera = _this.curVideo.CameraPosition;
|
|
_this.curVideo.marks.forEach((item) => {
|
if (item.type == 0) {
|
_this.eventMarks.push(item);
|
} else {
|
_this.labelMarks.push(item);
|
}
|
});
|
|
if (_this.guid == 1) {
|
_this.maxVideoTime = _this.curVideo.VideoTime;
|
}
|
|
_this.curRoomVideos = _this.allCurVideos.filter((item) => {
|
return item.IsCab == "0";
|
});
|
_this.$nextTick(() => {
|
_this.$refs[`player_${_this.curVideo.id}`][0].init();
|
let arr = _this.maxVideoTime.split(":");
|
let min = +arr[1],
|
sec = +arr[2];
|
_this.maxSecond = min * 60 + sec;
|
});
|
});
|
},
|
renderLabelOpts() {
|
let _this = this;
|
getLabelMap().then((res) => {
|
_this.labelOptions = res.data;
|
});
|
},
|
getColor(text) {
|
if (text.indexOf("进出站") > -1) {
|
return "yellow";
|
}
|
if (text.indexOf("信号机") > -1) {
|
return "purple";
|
}
|
if (text.indexOf("过分相") > -1) {
|
return "blue";
|
}
|
if (
|
text.indexOf("玩手机") > -1 ||
|
text.indexOf("趴伏") > -1 ||
|
text.indexOf("仰卧") > -1
|
) {
|
return "red";
|
}
|
return "";
|
},
|
refreshCurVideoLabel(video) {
|
let arr = [video];
|
this.videoArrs = arr.concat(
|
this.allCurVideos.filter((v) => {
|
return v.GroupID == video.GroupID && v.id != video.id;
|
})
|
);
|
},
|
checkVideo(video) {
|
console.log(video);
|
this.refreshCurVideoLabel(video);
|
this.curVideo = video;
|
this.eventMarks = [];
|
this.labelMarks = [];
|
video.marks.forEach((item) => {
|
if (item.type == 0) {
|
this.eventMarks.push(item);
|
} else {
|
this.labelMarks.push(item);
|
}
|
});
|
|
this.$nextTick(() => {
|
this.$refs[`player_${this.curVideo.id}`][0].init();
|
console.log(this.$refs);
|
});
|
},
|
|
// 分窗口
|
setGuid(guid) {
|
let _this = this;
|
this.guid = guid;
|
if (guid == 1) {
|
this.showLocChoise = true;
|
} else {
|
this.showLocChoise = false;
|
console.log(this.$refs[`player_${this.curVideo.id}`]);
|
this.$refs[`player_${this.curVideo.id}`][0].pause();
|
this.$refs[`player_${this.curVideo.id}`][0].seek(0);
|
}
|
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 =
|
`calc(` + 100 / guid + `%)`;
|
this.$refs[`gridVideoItem_${i}`][0].style.height =
|
`calc(` + 100 / guid + `%)`;
|
}
|
});
|
},
|
cancelLabelChecked() {
|
this.labelDialogVisible = false;
|
},
|
dotJump(offset) {
|
this.curTime = offset;
|
this.progressChange(offset);
|
},
|
submitLabelChecked() {
|
let _this = this;
|
let tempArr = [];
|
let isAdd = false;
|
tempArr = this.videoArrs.map((video) => video.id);
|
let desc = this.labelCheckedList.map((lableId) => {
|
for (let label of this.labelOptions) {
|
if (label.Name == "未手比") {
|
isAdd = true;
|
}
|
if (label.ID == lableId) {
|
return label.Name;
|
}
|
}
|
});
|
|
let query = {
|
ID: this.selectedLabelId,
|
VideoIds: tempArr.join(","),
|
Time: Math.round(this.setLabelTime) + "",
|
Codes: this.labelCheckedList.join(","),
|
Desc: desc.join(","),
|
};
|
|
editLabel(query).then((rsp) => {
|
console.log(query);
|
if (rsp && rsp.success) {
|
_this.labelDialogVisible = false;
|
_this.$set(_this.curVideo, "LableLst", []);
|
rsp.data.forEach((label) => {
|
if (label.ParentID == _this.curVideo.ID) {
|
console.log(label);
|
_this.curVideo.LableLst.push(label);
|
}
|
});
|
console.log(query.Desc.split(","));
|
_this.labelMarks.push({
|
type: 1,
|
offset: +query.Time,
|
text: query.Desc,
|
});
|
_this.$message.success("添加成功");
|
// 标注
|
_this.setMarks(_this.curVideo);
|
_this.$parent.$parent.filterSearchData();
|
|
if (isAdd) {
|
let num = sessionStorage.getItem("shoubiNum");
|
sessionStorage.setItem("shoubiNum", num ? +num + 1 : 1);
|
}
|
} else {
|
_this.$message.warning(rsp.msg);
|
}
|
});
|
},
|
addLabel(video) {
|
this.labelCheckedList = [];
|
this.selectedLabelId = "";
|
this.labelDialogVisible = true;
|
// 保存点击标注的时间
|
this.setLabelTime = this.$refs[`player_${video.id}`][0].getCurrentTime();
|
},
|
editCurLabel(mark) {
|
this.selectedLabelId = mark.ID;
|
this.labelCheckedList = mark.Codes.split(",");
|
this.labelDialogVisible = true;
|
},
|
removeCurLabel(mark) {
|
let _this = this;
|
let obj = {
|
ID: mark.ID,
|
VideoIds: mark.VideoIds,
|
};
|
delLabel(obj).then((rsp) => {
|
if (rsp && rsp.success) {
|
_this.curVideo.LableLst = rsp.data;
|
_this.$message.success("删除成功");
|
// 标注
|
_this.labelMarks.length = 0;
|
_this.curVideo.LableLst.forEach((x) => {
|
_this.labelMarks.push({
|
type: 1,
|
offset: +x.Time,
|
text: x.Desc,
|
});
|
});
|
_this.setMarks(_this.curVideo);
|
_this.$parent.$parent.filterSearchData();
|
} else {
|
_this.$message.warning(rsp.msg);
|
}
|
});
|
},
|
mergeMarks(videoInfo) {
|
if (!videoInfo.EventLst || !videoInfo.LableLst) {
|
return;
|
}
|
const eMarks = videoInfo.EventLst.map((item) => {
|
return {
|
offset: item.SecondsInVideo,
|
text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
|
type: 0,
|
state: item.state,
|
};
|
});
|
const labMarks = videoInfo.LableLst.map((lable) => {
|
return {
|
offset: +lable.Time,
|
text: lable.Desc,
|
type: 1,
|
};
|
});
|
return eMarks.concat(labMarks);
|
},
|
setMarks(video) {
|
let marks = this.mergeMarks(video);
|
this.$refs[`player_${video.id}`][0].setProgressMarkers(marks);
|
},
|
openHand() {
|
this.showHand = true;
|
},
|
closeHand() {
|
this.showHand = false;
|
},
|
singlePause() {
|
this.isStop = true;
|
this.showPlayBtn = true;
|
},
|
singlePlay() {
|
this.isStop = false;
|
this.showPlayBtn = false;
|
},
|
},
|
computed: {
|
yinhuanArr() {
|
if (this.curVideo.IsOperate == 0) {
|
return [];
|
}
|
return this.eventMarks.filter((x) => {
|
return (
|
(x.text.indexOf("进出站") > -1 ||
|
x.text.indexOf("过分相") > -1 ||
|
x.text.indexOf("信号机") > -1) &&
|
x.state == 0
|
);
|
});
|
},
|
marks_filter() {
|
if (this.showHand) {
|
return this.curVideo.marks;
|
} else
|
return this.curVideo.marks.map((item) => {
|
if (item.text != "手比: 手比") {
|
return item;
|
}
|
});
|
},
|
marks_filter_arr() {
|
if (this.showHand) {
|
return this.videoArrs;
|
} else {
|
let arr = this.videoArrs.map((item) => {
|
let obj = { ...item };
|
let temp = [];
|
obj.marks.forEach((mark) => {
|
if (mark.text != "手比: 手比") {
|
temp.push(mark);
|
}
|
});
|
obj.marks = temp;
|
return obj;
|
});
|
return arr;
|
}
|
},
|
eventMarks_filter() {
|
if (this.showHand) {
|
return this.eventMarks;
|
} else {
|
let arr = [];
|
this.eventMarks.map((item) => {
|
if (item.text != "手比: 手比") {
|
arr.push(item);
|
}
|
});
|
return arr;
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" >
|
.video-analyze-content {
|
margin: 0;
|
height: 100%;
|
|
text-align: left;
|
.content-top {
|
height: 581px;
|
// height: calc(60% + -16px);
|
.grid-check {
|
text-align: right;
|
margin-bottom: 3px;
|
position: relative;
|
.el-dropdown {
|
position: absolute;
|
top: -4px;
|
left: 200px;
|
}
|
.el-dropdown-link {
|
cursor: pointer;
|
color: #409eff;
|
}
|
.el-icon-arrow-down {
|
font-size: 12px;
|
}
|
span {
|
font-size: 17px;
|
color: #cacaca;
|
padding-left: 12px;
|
}
|
}
|
.video-area {
|
display: flex;
|
height: 100%;
|
|
.info {
|
margin-right: 18px;
|
height: 73px;
|
border-bottom: 1px solid #2d52d7;
|
}
|
|
.info-list {
|
width: 265px;
|
height: 582px;
|
min-width: 265px;
|
padding: 20px 0px 0 18px;
|
background-color: #000000;
|
|
.info-item {
|
margin-bottom: 3px;
|
}
|
|
span {
|
color: #a4a4a6;
|
font-size: 12px;
|
}
|
|
label {
|
color: #a1b1d5;
|
font-size: 12px;
|
}
|
|
.info-video {
|
margin-top: 10px;
|
|
.v-name-block {
|
height: 400px;
|
overflow-y: scroll;
|
&::-webkit-scrollbar-track {
|
background-color: #000000 !important;
|
}
|
|
&::-webkit-scrollbar {
|
background-color: #000000 !important;
|
}
|
}
|
|
p {
|
height: 30px;
|
line-height: 30px;
|
color: #fff;
|
font-size: 12px;
|
}
|
|
i {
|
font-size: 14px;
|
color: #a4a4a6;
|
}
|
|
span {
|
font-size: 12px;
|
color: #a4a4a6;
|
}
|
}
|
|
.CarNumber {
|
color: #ffffff;
|
font-size: 14px;
|
font-weight: bold;
|
margin-right: 40px;
|
}
|
|
.video-name {
|
height: 28px;
|
cursor: pointer;
|
color: #777;
|
margin-bottom: 10px;
|
&.current {
|
color: #409eff;
|
}
|
i {
|
padding-right: 4px;
|
}
|
}
|
}
|
.players {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
height: 512px;
|
.single {
|
.prism-controlbar {
|
display: none !important;
|
}
|
}
|
.video-item {
|
background: black;
|
box-sizing: border-box;
|
& > div {
|
height: 100%;
|
& > div {
|
height: 100%;
|
}
|
}
|
.video-box-top {
|
color: white;
|
display: none;
|
width: 100%;
|
height: 32px;
|
line-height: 32px;
|
padding: 0px 20px;
|
box-sizing: border-box;
|
background: #27293190;
|
position: absolute;
|
top: 0px;
|
z-index: 2;
|
b {
|
float: left;
|
}
|
}
|
.currentPlayer {
|
border: 1px dashed rgb(136, 136, 136);
|
height: 100%;
|
box-sizing: border-box;
|
& > div {
|
height: 100%;
|
}
|
}
|
}
|
.player-control {
|
background-color: #222328;
|
height: 70px;
|
width: 100%;
|
padding-bottom: 10px;
|
.time {
|
text-align: right;
|
color: #a4a4a6;
|
font-size: 12px;
|
}
|
.progress-bar {
|
margin: 0 5px 0 5px;
|
position: relative;
|
.self-dot {
|
position: absolute;
|
height: 8px;
|
width: 6px;
|
z-index: 1;
|
background-color: yellowgreen;
|
cursor: pointer;
|
-webkit-transform: translateX(-50%);
|
transform: translateX(-50%);
|
}
|
.yellow {
|
background-color: yellow;
|
}
|
.purple {
|
background-color: skyblue;
|
}
|
.red {
|
background-color: red;
|
}
|
.blue {
|
background-color: blue;
|
}
|
.label-dot {
|
position: absolute;
|
height: 8px;
|
width: 6px;
|
z-index: 1;
|
background-color: lightcoral;
|
cursor: pointer;
|
-webkit-transform: translateX(-50%);
|
transform: translateX(-50%);
|
}
|
.el-slider {
|
margin-bottom: 5px;
|
|
.el-slider__runway {
|
margin: 0;
|
height: 8px;
|
background-color: rgb(90, 90, 94);
|
.el-slider__bar {
|
height: 8px;
|
}
|
.el-slider__button-wrapper {
|
width: 16px;
|
}
|
}
|
}
|
.el-slider__button {
|
width: 12px;
|
height: 12px;
|
}
|
.el-slider__stop {
|
background-color: lightcoral;
|
}
|
.time-clip {
|
width: 40px;
|
background-color: dimgray;
|
color: white;
|
display: none;
|
font-size: 12px;
|
top: -26px;
|
border-radius: 3px;
|
left: -20px;
|
height: 19px;
|
text-align: center;
|
line-height: 19px;
|
position: absolute;
|
}
|
}
|
.control-zone {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 30px;
|
.play-btn {
|
width: 300px;
|
height: 27px;
|
border-radius: 4px;
|
.group {
|
text-align: center;
|
line-height: 27px;
|
i {
|
cursor: pointer;
|
color: white;
|
}
|
|
.back {
|
font-size: 12px;
|
color: #a4a4a6;
|
margin-right: 10px;
|
}
|
|
.forward {
|
font-size: 12px;
|
color: #a4a4a6;
|
margin-left: 10px;
|
}
|
}
|
}
|
|
.el-dropdown {
|
width: 104px;
|
height: 30px;
|
background: rgb(76, 77, 81);
|
border: 1px solid #1a377a;
|
border-radius: 5px;
|
margin-left: 20px;
|
|
.el-dropdown-link {
|
padding: 0 10px;
|
display: block;
|
height: 100%;
|
color: #a1bdff;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 12px;
|
cursor: pointer;
|
i {
|
color: #a1bdff;
|
font-size: 12px;
|
}
|
}
|
}
|
|
.spanList {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
}
|
.icon-rt {
|
margin-right: 20px;
|
color: #9299b0;
|
font-size: 20px;
|
cursor: pointer;
|
&.activegongge {
|
color: #3d68e1;
|
}
|
}
|
img {
|
width: 20px;
|
vertical-align: middle;
|
}
|
}
|
}
|
}
|
}
|
.content-bottom {
|
display: flex;
|
height: 422px;
|
|
.bot-left {
|
flex: 1;
|
padding: 0px 15px 8px 0px;
|
background: #fff;
|
border-radius: 3px;
|
min-width: 400px;
|
.el-tabs__header {
|
padding: 0;
|
position: relative;
|
margin: 0 0 10px;
|
}
|
.flex-box {
|
align-items: center;
|
label {
|
font-weight: bold;
|
color: #4f618a;
|
padding-right: 15px;
|
}
|
.el-radio-group {
|
margin-top: 5px;
|
}
|
}
|
.fixed-height-box {
|
display: flex;
|
margin-top: 30px;
|
|
label {
|
font-weight: bold;
|
color: #4f618a;
|
padding-right: 15px;
|
}
|
|
.mark-list {
|
flex: 1;
|
.time {
|
cursor: pointer;
|
font-size: 15px;
|
font-weight: bold;
|
color: #409eff;
|
span {
|
padding-right: 5px;
|
}
|
i[class^="el-icon"] {
|
padding: 3px;
|
}
|
}
|
.label-content {
|
font-size: 13px;
|
padding: 4px 0;
|
color: #888;
|
}
|
|
.mark-item {
|
margin-bottom: 15px;
|
.icon {
|
color: #c7d0e5;
|
}
|
|
.edit {
|
margin-right: 7px;
|
|
&:hover {
|
color: #2d52d7;
|
}
|
}
|
|
.remove {
|
margin-right: 14px;
|
&:hover {
|
color: #bf3a3a;
|
}
|
}
|
|
.mark-time {
|
color: #192a51;
|
margin-right: 27px;
|
}
|
|
.mark-desc {
|
display: inline-block;
|
box-sizing: content-box;
|
padding: 3px 6px;
|
text-align: center;
|
background: #bf3a3a;
|
color: #fff;
|
border-radius: 2px;
|
margin-right: 24px;
|
}
|
}
|
}
|
}
|
|
.mark {
|
padding: 25px 40px;
|
* {
|
font-size: 12px;
|
}
|
|
.icon {
|
color: #bf3a3a;
|
cursor: pointer;
|
}
|
|
.el-radio__input.is-checked {
|
.el-radio__inner {
|
border-color: #bf3a3a;
|
background: #bf3a3a;
|
}
|
}
|
.el-radio__inner:hover {
|
border-color: #bf3a3a;
|
}
|
|
label.is-checked {
|
.el-radio__label {
|
color: #bf3a3a;
|
}
|
}
|
}
|
}
|
.bot-right {
|
width: 210px;
|
margin-left: 10px;
|
min-width: 210px;
|
|
label {
|
color: #999;
|
padding-right: 8px;
|
}
|
}
|
|
.el-tabs__header {
|
height: 55px;
|
background: #f4f6f9;
|
.el-tabs__nav-wrap {
|
height: 100%;
|
.el-tabs__nav-scroll {
|
height: 100%;
|
|
.el-tabs__nav {
|
height: 100%;
|
margin-left: 50px;
|
|
.el-tabs__item {
|
line-height: 62px;
|
}
|
}
|
}
|
|
&::after {
|
display: none;
|
}
|
}
|
}
|
|
.yinhuan-wrap {
|
display: flex;
|
padding: 25px 40px;
|
.wrap-title {
|
margin-right: 10px;
|
min-width: 160px;
|
line-height: 24px;
|
font-size: 16px;
|
color: #4f618a;
|
font-weight: 700;
|
}
|
.list {
|
width: 100%;
|
height: 300px;
|
overflow: auto;
|
}
|
.list-item {
|
display: flex;
|
align-items: center;
|
height: 23px;
|
width: 280px;
|
cursor: pointer;
|
color: #192a51;
|
font-size: 12px;
|
margin-bottom: 18px;
|
|
span {
|
color: #192a51;
|
}
|
|
.list-warn {
|
display: block;
|
width: 57px;
|
height: 20px;
|
background: #bf3a3a;
|
border-radius: 2px;
|
color: #fff;
|
text-align: center;
|
line-height: 20px;
|
}
|
}
|
}
|
}
|
|
.label-dialog {
|
.el-dialog {
|
width: 736px !important;
|
height: 502px !important;
|
overflow: hidden;
|
.el-dialog__header {
|
height: 20px;
|
.el-dialog__headerbtn .el-dialog__close::before {
|
color: #8d96a4;
|
}
|
}
|
.el-dialog__body {
|
background-color: #fff !important;
|
}
|
p.label {
|
line-height: 36px;
|
font-weight: bold;
|
color: #2d52d7;
|
font-size: 14px;
|
margin-bottom: 30px;
|
}
|
.label-check {
|
padding: 10px 40px;
|
height: 350px;
|
margin-bottom: 20px;
|
.el-checkbox-group {
|
display: flex;
|
flex-wrap: wrap;
|
> label {
|
width: 25%;
|
text-align: left;
|
margin: 0;
|
margin-bottom: 14px;
|
|
.el-checkbox__label {
|
font-size: 12px;
|
}
|
|
.el-checkbox__inner {
|
border-radius: 9px;
|
}
|
}
|
}
|
}
|
.btns {
|
display: flex;
|
justify-content: center;
|
padding: 20px;
|
.el-button:first-child {
|
margin-right: 30px;
|
}
|
.el-button:last-child span {
|
color: #fff;
|
}
|
.el-button {
|
padding: 9px 32px;
|
}
|
}
|
.el-checkbox.is-checked {
|
.el-checkbox__label {
|
color: #bf3a3a;
|
}
|
|
.el-checkbox__inner {
|
background-color: #bf3a3a;
|
border-color: #bf3a3a;
|
}
|
}
|
.el-checkbox .el-checkbox__inner:hover {
|
border-color: #bf3a3a;
|
}
|
.el-checkbox__input.is-focus .el-checkbox__inner {
|
border-color: #bf3a3a;
|
}
|
}
|
}
|
}
|
.el-tooltip__popper {
|
* {
|
color: #fff;
|
}
|
}
|
|
.prism-marker-text {
|
p {
|
color: #fff;
|
}
|
}
|
|
.video-box-top b {
|
color: #fff;
|
}
|
|
.currentPlayer .prism-player .prism-big-play-btn {
|
left: 46% !important;
|
bottom: 39% !important;
|
background-size: cover;
|
width: 11%;
|
height: 23%;
|
.outter {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
</style>
|
