From 8d94a4a0a987f586a9f7f8826ebb76c19387f207 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 26 三月 2021 17:19:40 +0800
Subject: [PATCH] 人员任务分配
---
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 157 +++++++++++++++++++++++++++++-----------------------
1 files changed, 88 insertions(+), 69 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index de1e4f0..37885b5 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -119,17 +119,13 @@
</div>
</template>
<div class="player-control">
- <!-- <div class="progress-bar"></div> -->
- <!--
-
- -->
<div class="progress-bar">
<el-tooltip
placement="top"
v-for="(item, index) in eventMarks"
:key="index"
>
- <div slot="content">
+ <div slot="content">
{{ getTimeStr(item.offset) }}<br />{{ item.text }}
</div>
<div
@@ -140,19 +136,51 @@
@click="dotJump(item.offset)"
></div>
</el-tooltip>
- <!-- :marks="marks" -->
+ <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>
+
+ <el-tooltip placement="top" :offset="440-hoverOffset"
+ :hide-after="0" :visible-arrow="false"
+ >
+ <div slot="content" >{{hoverTime}}</div>
<el-slider
v-model="curTime"
:format-tooltip="formatTooltip"
:max="maxSecond"
+ @mousemove.native="triggerHover"
@change="progressChange"
@input="inTimeChange"
></el-slider>
+</el-tooltip>
+
</div>
<div class="control-zone">
<span class="time">{{ curPlayTime }} / {{ maxVideoTime }}</span>
- <div class="play-btn" @click="playAll" v-if="showPlayBtn"></div>
- <div class="stop-btn" @click="pauseAll" v-else></div>
+
+
+ <div class="play-btn" @click="playAll" v-if="showPlayBtn">
+
+ <span class="icon iconfont"></span>
+
+ </div>
+ <div class="stop-btn" @click="pauseAll" v-else>
+
+ <span class="icon iconfont"></span>
+ </div>
</div>
</div>
</div>
@@ -205,7 +233,7 @@
<!-- <div class="flex-box fixed-height-box2"></div> -->
<dataset-chart style="width: 100%" v-if="showTable"></dataset-chart>
- <el-tab-pane label="閲岀▼鏍�" name="second"> </el-tab-pane>
+ <el-tab-pane label="鍏噷鏍�" name="second"> </el-tab-pane>
</el-tabs>
</div>
<div class="bot-right block">
@@ -318,16 +346,15 @@
curTime: 0,
showPlayBtn: true,
eventMarks: [],
- marks: {
- 45: {},
- 373: {},
- },
+ marks: {},
labelMarks: [],
maxDuration: 0,
maxVideoTime: "",
curPlayTime: "00:00",
maxSecond: 0,
isStop: false,
+ hoverTime:"",
+ hoverOffset:0,
};
},
watch: {
@@ -355,6 +382,10 @@
this.getRelatedVideos(this.videoDetails);
},
methods: {
+ triggerHover(e){
+ this.hoverOffset=e.offsetX
+ this.hoverTime=this.getTimeStr((e.offsetX/880)*this.maxSecond)
+ },
getPlayStatus(e) {
console.log(e, 1111);
},
@@ -500,42 +531,15 @@
item.marks = _this.mergeMarks(item);
});
_this.curVideo = res.data.find((item) => item.ID == v.ID);
- console.log(_this.curVideo);
- let map = {},
- map2 = {};
- let arr1 = [],
- arr2 = [];
- _this.curVideo.marks.forEach((item) => {
+ _this.curVideo.marks.forEach(item=>{
if (item.type == 0) {
- map[item.offset] = {
- style: {
- color: "white",
- },
- label: item.text,
- };
+ _this.eventMarks.push(item)
} else {
- map[+item.offset] = {
- style: {
- color: "yellow",
- },
- label: item.text,
- };
+ _this.labelMarks.push(item)
}
- });
- // _this.eventMarks = map
- _this.labelMarks = map2;
-
- // videoInfo.EventLst.forEach((item) => {
- // map[item.SecondsInVideo] = {
- // style:{
- // color: 'black'
- // },
- // label: item.Event + (item.Desc == "" ? "" : ": " + item.Desc)
- // }
- // });
-
- if (this.guid == 1) {
- this.maxVideoTime = this.curVideo.VideoTime;
+ })
+ if (_this.guid == 1) {
+ _this.maxVideoTime = _this.curVideo.VideoTime;
}
_this.videoArrs = res.data.filter((item) => v.UniqeID == item.UniqeID);
_this.allCurVideos = res.data;
@@ -543,12 +547,12 @@
return item.Camera == "鍙告満瀹�";
});
- this.$nextTick(() => {
+ _this.$nextTick(() => {
_this.$refs[`player_${_this.curVideo.ID}`][0].init();
- let arr = this.maxVideoTime.split(":");
+ let arr = _this.maxVideoTime.split(":");
let min = +arr[0],
sec = +arr[1];
- this.maxSecond = min * 60 + sec;
+ _this.maxSecond = min * 60 + sec;
});
});
},
@@ -651,12 +655,6 @@
_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("娣诲姞鎴愬姛");
// 鏍囨敞
@@ -701,16 +699,14 @@
text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
type: 0,
};
- this.eventMarks.push(obj);
return obj;
});
const labMarks = videoInfo.LableLst.map((lable) => {
let obj = {
- offset: lable.Time,
+ offset: +lable.Time,
text: lable.Desc,
type: 1,
};
- this.labelMarks.push(obj);
return obj;
});
return eMarks.concat(labMarks);
@@ -818,6 +814,9 @@
float: left;
}
}
+ // .prism-controlbar{
+ // display: none;
+ // }
.currentPlayer {
border: 2px solid aqua;
height: 100%;
@@ -828,24 +827,41 @@
}
}
.player-control {
- background-color: black;
+ background-color: #fff;
height: 75px;
width: 100%;
.progress-bar {
margin: 0px 30px;
position: relative;
.self-dot {
- top: 16px;
+ // top: 16px;
position: absolute;
height: 6px;
- width: 3px;
+ width: 6px;
z-index: 1;
background-color: lightcoral;
- border-radius: 60%;
+ // border-radius: 30%;
// pointer-events: none;
cursor: pointer;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
+ }
+ .label-dot{
+ // top: 16px;
+ position: absolute;
+ height: 6px;
+ width: 6px;
+ z-index: 1;
+ background-color: yellowgreen;
+ cursor: pointer;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
+ .el-slider{
+ margin: 16px 0;
+ .el-slider__runway{
+ margin: 0;
+ }
}
.el-slider__button {
width: 12px;
@@ -859,24 +875,27 @@
.time {
float: left;
margin-left: 23px;
- color: #fff;
+ // color: #fff;
}
.play-btn {
width: 24px;
height: 24px;
cursor: pointer;
- background: url(/apps/shuohuangMonitorAnalyze/img/bigplay.png)
- no-repeat;
- background-size: contain;
+ // background: url(/apps/shuohuangMonitorAnalyze/img/smallplay.png)
+
margin: 0 auto;
+ .iconfont{
+ font-size: 25px;
+ }
}
.stop-btn {
width: 24px;
height: 24px;
cursor: pointer;
- background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
- no-repeat;
- background-size: contain;
+ // background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
+ .iconfont{
+ font-size: 25px;
+ }
margin: 0 auto;
}
}
--
Gitblit v1.8.0