From 6e3d8234a4b1bae86b3c896468e20ea9f13c7fb7 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 24 三月 2021 11:46:44 +0800
Subject: [PATCH] 朔黄视频播放进度条
---
src/pages/ai/index/App.vue | 115 ++--
src/pages/searchForCluster/index/Searching.vue | 20
src/pages/shuohuangMonitorAnalyze/components/taskManage.vue | 29
src/pages/desktop/index/components/ToolsEntry.vue | 4
src/pages/search/index/Searching.vue | 19
src/components/subComponents/CardItem.vue | 17
src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue | 5
src/components/subComponents/Card.vue | 9
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 451 +++++++++++++------
src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 642 ++++++++++++++++++++-------
src/Pool/VideoPhotoData.ts | 46 +
11 files changed, 932 insertions(+), 425 deletions(-)
diff --git a/src/Pool/VideoPhotoData.ts b/src/Pool/VideoPhotoData.ts
index 31383b0..cadcdbc 100644
--- a/src/Pool/VideoPhotoData.ts
+++ b/src/Pool/VideoPhotoData.ts
@@ -137,21 +137,41 @@
}
}
async findPerson2() {
+ // 111
this.cards = []
var compType = this.compTargetType == "1" ? 1 : 0
- var param = {
- page: this.page,
- size: this.size,
- searchTime: this.searchTime,
- picUrl: this.picUrl,
- alarmlevel: this.queryAlarmlevel,
- inputValue: this.inputValue,
- tasks: this.queryTasks,
- treeNodes: this.treeNodes,
- compTargetId: this.compTargetId,
- compTargetType: compType,
- databases: this.compareTabs,
- threshold: this.threshold
+ let param
+ if ( this.searchFrom== "cluster") {
+ param = {
+ page: this.page,
+ size: this.size,
+ searchTime: this.searchTime,
+ picUrl: this.picUrl,
+ alarmlevel: this.queryAlarmlevel,
+ inputValue: this.inputValue,
+ tasks: this.queryTasks,
+ treeNodes: this.treeNodes,
+ compTargetId: this.compTargetId,
+ compTargetType: compType,
+ databases: this.compareTabs,
+ threshold: this.threshold,
+ isAll: true
+ }
+ } else {
+ param = {
+ page: this.page,
+ size: this.size,
+ searchTime: this.searchTime,
+ picUrl: this.picUrl,
+ alarmlevel: this.queryAlarmlevel,
+ inputValue: this.inputValue,
+ tasks: this.queryTasks,
+ treeNodes: this.treeNodes,
+ compTargetId: this.compTargetId,
+ compTargetType: compType,
+ databases: this.compareTabs,
+ threshold: this.threshold,
+ }
}
const rsp: any = await findPersonByPic(param);
if (rsp && rsp.success) {
diff --git a/src/components/subComponents/Card.vue b/src/components/subComponents/Card.vue
index 7749870..de6d446 100644
--- a/src/components/subComponents/Card.vue
+++ b/src/components/subComponents/Card.vue
@@ -16,6 +16,8 @@
<card-item
:data="item"
:showType="showType"
+ :fromCluster="isFromCluster"
+ :searchT="searchTime"
@detailsClick="detailsClick"
@addToBase="toAdd"
></card-item>
@@ -54,6 +56,13 @@
outWidth: {
type: String,
default: "100%"
+ },
+ isFromCluster:{
+ type: Boolean,
+ default: false
+ },
+ searchTime:{
+
}
},
watch: {
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index b58f8d1..4432950 100644
--- a/src/components/subComponents/CardItem.vue
+++ b/src/components/subComponents/CardItem.vue
@@ -504,7 +504,12 @@
showType: {
type: String,
default: "search"
- }
+ },
+ fromCluster:{
+ type:Boolean,
+ default:false
+ },
+ searchT:{}
},
computed: {
isId() {
@@ -592,15 +597,19 @@
this.$emit("addToBase", item);
},
tosearch(item) {
+ this.searchT
let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
let compType = 1 // 鏁版嵁鏉ヨ嚜浜巈s
if (!item.id || item.id == "") {
compType = 0 // 鏁版嵁鏉ヨ嚜浜庡簳搴�
}
-
- let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime();
- //let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType;
+ let message
+ if (this.fromCluster) {
+ message = 'toCluster?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1];
+ } else {
+ message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1];
+ }
window.parent.postMessage({
msg: message
}, "*")
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 4dcf33d..679fc32 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -70,7 +70,7 @@
>
<el-button
v-if="item.isUpgrade"
- @click="donwload(item)"
+ @click="donwload(item,0)"
type="warning"
size="small"
class="bot-btn"
@@ -133,7 +133,7 @@
</div>
<div class="mask-btn">
<el-button
- @click="donwload(item)"
+ @click="donwload(item,1)"
type="primary"
class="bot-btn"
>瀹夎</el-button
@@ -512,7 +512,7 @@
</el-tab-pane>
<el-tab-pane name="update">
<span slot="label">
- <el-badge class="update-badge" :value="updateNum"
+ <el-badge class="update-badge" :value="updateNum" :hidden="updateNum==0"
>鏇存柊</el-badge
>
</span>
@@ -574,7 +574,7 @@
>
<el-button
v-if="item.isUpgrade"
- @click="donwload(item)"
+ @click="donwload(item,0)"
type="warning"
size="small"
class="bot-btn"
@@ -1149,7 +1149,7 @@
batchUpdate(type) {
if (type == "sdk") {
this.hasNewVersionSdk.forEach((sdk) => {
- this.donwload(sdk);
+ this.donwload(sdk,0);
});
} else {
this.hasNewVersionApp.forEach((app) => {
@@ -1426,6 +1426,7 @@
cancelActivate(){
this.showInputCode= false
+ this.activeCode = ""
},
newActInfo() {
return {
@@ -1453,51 +1454,56 @@
},
actived() {
let _this = this;
+ if (this.activeCode.trim()=="") {
+ this.$notify({
+ type: "error",
+ message: "婵�娲荤爜涓嶈兘涓虹┖",
+ });
+ return
+ }
+ if (this.actType == "sdk") {
+ //婵�娲荤畻娉�
+ actPageAlg(this.actId, this.activeCode)
+ .then((res) => {
+ if (res.data.isSuccess) {
+ this.productDetailVisible = false
+ _this.activedSdkOrApp = res.data.successMsg;
this.showActivateSuccess=true
-
- // if (this.actType == "sdk") {
- // //婵�娲荤畻娉�
- // actPageAlg(this.actId, this.activeCode)
- // .then((res) => {
- // if (res.data.isSuccess) {
- // this.productDetailVisible = false
- // _this.activedSdkOrApp = res.data.successMsg;
- // this.showActivateSuccess=true
- // _this.actStep++;
- // _this.getUnActivedList();
- // _this.getAllSdk();
- // } else {
- // _this.$notify({
- // type: "error",
- // message: res.data.failMsg.failMsg,
- // });
- // }
- // })
- // .catch((e) => {
- // console.log(e);
- // });
- // } else if (this.actType == "app") {
- // //婵�娲诲簲鐢�
- // actApp(this.actId, this.activeCode)
- // .then((res) => {
- // if (res.data.isSuccess) {
- // this.productDetailVisible = false
- // _this.activedSdkOrApp = res.data.successMsg;
- // this.showActivateSuccess=true
- // _this.actStep++;
- // _this.getUnActivedAppList();
- // _this.getAllApps();
- // } else {
- // _this.$notify({
- // type: "error",
- // message: res.data.failMsg.failMsg,
- // });
- // }
- // })
- // .catch((e) => {
- // console.log(e);
- // });
- // }
+ _this.actStep++;
+ _this.getUnActivedList();
+ _this.getAllSdk();
+ } else {
+ _this.$notify({
+ type: "error",
+ message: res.data.failMsg.failMsg,
+ });
+ }
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ } else if (this.actType == "app") {
+ //婵�娲诲簲鐢�
+ actApp(this.actId, this.activeCode)
+ .then((res) => {
+ if (res.data.isSuccess) {
+ this.productDetailVisible = false
+ _this.activedSdkOrApp = res.data.successMsg;
+ this.showActivateSuccess=true
+ _this.actStep++;
+ _this.getUnActivedAppList();
+ _this.getAllApps();
+ } else {
+ _this.$notify({
+ type: "error",
+ message: res.data.failMsg.failMsg,
+ });
+ }
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+ }
},
getCodeDetail() {},
checkMyAlgorith() {
@@ -1709,7 +1715,7 @@
// 寮�鍚嚜鍔ㄥ埛鏂�
this.sdkUpgreading = true;
},
- donwload(item) {
+ donwload(item,typ) {
item.upgradeLoading = true;
this.downloadItem = item.id;
@@ -1720,7 +1726,7 @@
this.downloadItem = "";
this.$notify({
type: "success",
- message: "绠楁硶瀹夎鎴愬姛"
+ message: typ==1? "绠楁硶瀹夎鎴愬姛":"绠楁硶鍗囩骇鎴愬姛"
});
})
.catch((err) => {
@@ -1920,8 +1926,9 @@
margin-bottom: 10px;
.el-input{
float: left;
- width: 64%;
- margin-bottom: 8px;
+ width: 63%;
+ margin-bottom: 8px;
+ margin-right: 10px;
}
el-button{
float: left;
@@ -1991,6 +1998,8 @@
background-color: rgba(242, 242, 242, 1.3);
margin: 5px 12px 0 12px;
font-size: 12px;
+ line-height: 18px;
+
}
margin-bottom: 12px;
}
diff --git a/src/pages/desktop/index/components/ToolsEntry.vue b/src/pages/desktop/index/components/ToolsEntry.vue
index eefc72f..76819c2 100644
--- a/src/pages/desktop/index/components/ToolsEntry.vue
+++ b/src/pages/desktop/index/components/ToolsEntry.vue
@@ -138,6 +138,10 @@
let params = msg.substring(7);
this.addFrameByName("search", params)
}
+ if (msg.indexOf("toCluster") >= 0) {
+ let params = msg.substring(8);
+ this.addFrameByName("searchForCluster", params)
+ }
if (msg.indexOf("toOpenApp") >= 0) {
let id = msg.substring(10);
diff --git a/src/pages/search/index/Searching.vue b/src/pages/search/index/Searching.vue
index 6dd0557..f78deed 100644
--- a/src/pages/search/index/Searching.vue
+++ b/src/pages/search/index/Searching.vue
@@ -137,6 +137,7 @@
:outHeight="'162px'"
:outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
:data="item"
+ :searchTime="searchTimeFormated"
:showType="showType"
@detailsClick="getDetails($event, index)"
@addToBase="toAdd"
@@ -266,7 +267,11 @@
};
},
-
+ computed: {
+ searchTimeFormated(){
+ return this.format(this.searchTime)
+ }
+ },
created () {
this.TreeDataPool.readonly = true;
this.TreeDataPool.gbReadonly = true;
@@ -293,9 +298,15 @@
// this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
// ];
// }
-
- this.searchTime = this.getDateInit();
- this.VideoPhotoData.searchTime = this.getDateInit();
+ let start = this.getUrlKey("start")
+ let end = this.getUrlKey("end")
+ if (start&&end) {
+ this.searchTime = [start,end]
+ this.VideoPhotoData.searchTime = [start,end]
+ }else{
+ this.searchTime = this.getDateInit();
+ this.VideoPhotoData.searchTime = this.getDateInit();
+ }
// 鏆傛椂鍏抽棴璺宠浆 20200730
// if (this.$route.query.showType === "findByPic") {
diff --git a/src/pages/searchForCluster/index/Searching.vue b/src/pages/searchForCluster/index/Searching.vue
index d498a81..8ca04f6 100644
--- a/src/pages/searchForCluster/index/Searching.vue
+++ b/src/pages/searchForCluster/index/Searching.vue
@@ -137,7 +137,9 @@
:outHeight="'162px'"
:outWidth="VideoPhotoData.uploadDiaplay?searchImgCardWidth:cardWidth"
:data="item"
+ :isFromCluster="true"
:showType="showType"
+ :searchTime="searchTimeFormated"
@detailsClick="getDetails($event, index)"
@addToBase="toAdd"
></Card>
@@ -295,9 +297,15 @@
// this.VideoTaskData.tasks[this.VideoTaskData.activeIndex].taskId
// ];
// }
-
- this.searchTime = this.getDateInit();
- this.VideoPhotoData.searchTime = this.getDateInit();
+ let start = this.getUrlKey("start")
+ let end = this.getUrlKey("end")
+ if (start&&end) {
+ this.searchTime = [start,end]
+ this.VideoPhotoData.searchTime = [start,end]
+ }else{
+ this.searchTime = this.getDateInit();
+ this.VideoPhotoData.searchTime = this.getDateInit();
+ }
//璁剧疆鎼滅储鏉ユ簮(搴旂敤鍚嶇О)
this.VideoPhotoData.searchFrom = 'cluster';
//this.TreeDataPool.searchFrom = 'cluster';
@@ -442,6 +450,11 @@
this.VideoPhotoData.uploadType = false;
this.VideoPhotoData.showType = "search";
}
+ }
+ },
+ computed: {
+ searchTimeFormated(){
+ return this.format(this.searchTime)
}
},
methods: {
@@ -614,7 +627,6 @@
tasks = tasks.concat(arr)
});
this.VideoPhotoData.queryTasks = tasks;
-
this.VideoPhotoData.queryAlarmlevel = this.stringToNum();
this.VideoPhotoData.searchTime = this.format(this.searchTime);
//this.VideoPhotoData.inputValue = this.searchText;
diff --git a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
index 961297a..ac57407 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/aliPlayer/index.vue
@@ -207,7 +207,7 @@
},
mounted() {
this.$nextTick(() => {
- console.log('player marks',this.markers);
+ // console.log('player marks',this.markers);
this.init();
});
},
@@ -255,6 +255,7 @@
scriptTag.addEventListener("load", () => {
this.initPlayer();
});
+ // return this.getDuration()
},
/**
@@ -272,7 +273,7 @@
if (this.source) this.config.source = this.source; //鎾斁婧�
this.config.id = this.playerId; //璧嬪�兼挱鏀惧櫒瀹瑰櫒id
this.config.progressMarkers = this.markers; // 鏍囨敞
- console.log("alipayer config", this.config);
+ // console.log("alipayer config", this.config);
this.player && this.player.dispose(); //闃叉瀹炰緥鐨勯噸澶�
this.player = Aliplayer(this.config);
for (const ev in this.events) {
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 4892811..b2763e7 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -26,9 +26,15 @@
v-show="!checkedConfigs.length"
class="tip"
style="padding-left: 5px; margin-top: 3px"
- >杩樻湭閫夋嫨绛涢�夋潯浠�</span>
- <div class="config-item" v-for="(config, index) in checkedConfigs" :key="index">
- <span class="title">{{ config.title }}</span> :
+ >杩樻湭閫夋嫨绛涢�夋潯浠�</span
+ >
+ <div
+ class="config-item"
+ v-for="(config, index) in checkedConfigs"
+ :key="index"
+ >
+ <span class="title">{{ config.title }}</span
+ > :
<span class="val" v-for="option in config.data" :key="option.id">
<!-- <template>
<div>
@@ -40,17 +46,25 @@
<i>銆�</i>
</span>
</span>
- <i class="el-icon-close remove" @click="removeCheckedConfig(config)"></i>
+ <i
+ class="el-icon-close remove"
+ @click="removeCheckedConfig(config)"
+ ></i>
</div>
<el-button
class="clear-config-btn"
v-if="checkedConfigs.length"
size="mini"
@click="clearCheckedConfigs"
- >鍙栨秷閫夋嫨</el-button>
+ >鍙栨秷閫夋嫨</el-button
+ >
</div>
<div class="optional-config">
- <div class="config" v-for="(config, index) in optionalConfigs" :key="index">
+ <div
+ class="config"
+ v-for="(config, index) in optionalConfigs"
+ :key="index"
+ >
<template v-if="config.isShow">
<div class="title">{{ config.title }}</div>
<div class="options-wrap">
@@ -59,23 +73,41 @@
:ref="'options' + config.id"
:style="{ height: fixedOneLineHeight + 'px' }"
>
- <div class="option" v-for="(option, index) in config.data" :key="index">
+ <div
+ class="option"
+ v-for="(option, index) in config.data"
+ :key="index"
+ >
<div v-show="config.isMultCheck">
<el-checkbox v-model="option.isChecked"></el-checkbox>
<span>{{ option.name }}</span>
</div>
- <div v-show="!config.isMultCheck" @click="checkOption(config, option)">
+ <div
+ v-show="!config.isMultCheck"
+ @click="checkOption(config, option)"
+ >
<span>{{ option.name }}</span>
</div>
</div>
</div>
<div class="btns text-center" v-show="config.isMultCheck">
- <el-button size="mini" @click="cancleMultCheck(config)">鍙栨秷</el-button>
- <el-button size="mini" type="primary" @click="checkOption(config)">纭畾</el-button>
+ <el-button size="mini" @click="cancleMultCheck(config)"
+ >鍙栨秷</el-button
+ >
+ <el-button
+ size="mini"
+ type="primary"
+ @click="checkOption(config)"
+ >纭畾</el-button
+ >
</div>
</div>
<div class="right-btns">
- <div class="more" v-if="config.showMore" @click="showMore(config)">
+ <div
+ class="more"
+ v-if="config.showMore"
+ @click="showMore(config)"
+ >
<span>鏇村</span>
<i
:class="
@@ -98,7 +130,11 @@
<div class="config" v-if="showAdvance">
<div class="title">楂樼骇閫夐」</div>
<div>
- <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
+ <el-menu
+ class="el-menu-demo"
+ mode="horizontal"
+ @select="handleSelect"
+ >
<el-submenu
class="config-submenu"
:popper-append-to-body="false"
@@ -113,7 +149,8 @@
:index="index + '-' + ind"
@click="checkOption(config, option)"
class="highlevel-option"
- >{{ option.name }}</el-menu-item>
+ >{{ option.name }}</el-menu-item
+ >
</el-submenu>
</el-menu>
</div>
@@ -124,14 +161,22 @@
<div class="header-bar clearfix">
<div class="left">
<div>
- <el-select v-model="IsFollow" size="mini" @change="filterSearchData">
+ <el-select
+ v-model="IsFollow"
+ size="mini"
+ @change="filterSearchData"
+ >
<el-option value label="鍏ㄩ儴"></el-option>
<el-option :value="false" label="鏈叧娉�"></el-option>
<el-option :value="true" label="宸插叧娉�"></el-option>
</el-select>
</div>
<div>
- <el-select v-model="IsOperate" size="mini" @change="filterSearchData">
+ <el-select
+ v-model="IsOperate"
+ size="mini"
+ @change="filterSearchData"
+ >
<el-option value label="鍏ㄩ儴"></el-option>
<el-option value="0" label="鏈鐞�"></el-option>
<el-option value="1" label="宸插鐞�"></el-option>
@@ -147,15 +192,26 @@
>
<i class="el-icon-menu"></i>
</div>
- <div class="type" :class="{ current: showType == 'list' }" @click="checkType('list')">
+ <div
+ class="type"
+ :class="{ current: showType == 'list' }"
+ @click="checkType('list')"
+ >
<i class="el-icon-s-operation"></i>
</div>
</div>
</div>
</div>
<div class="content" v-show="showType == 'menu'">
- <el-row :gutter="20" >
- <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id">
+ <el-row :gutter="20">
+ <el-col
+ :xs="8"
+ :sm="6"
+ :md="6"
+ :lg="6"
+ v-for="data in tabData"
+ :key="data.id"
+ >
<div class="card">
<div class="video-wrap" @click="checkVideoDetail(data)">
<img :src="data.VideoCover" alt />
@@ -180,33 +236,53 @@
</div>
</div>
<div class="mark-info">
- <div class="abnormal" v-if="data.LableLst && data.LableLst.length">
+ <div
+ class="abnormal"
+ v-if="data.LableLst && data.LableLst.length"
+ >
<span
class="abnormal-label"
v-for="(label, index) in data.LableLst"
:key="index"
- >{{ label.Desc +(index==data.LableLst.length-1?"":"锛�")}}</span>
+ >{{
+ label.Desc +
+ (index == data.LableLst.length - 1 ? "" : "锛�")
+ }}</span
+ >
</div>
<div v-else>
<span>鏃犲紓甯�</span>
</div>
- <div class="event-tag" v-if="data.EventLst && data.EventLst.length">
+ <div
+ class="event-tag"
+ v-if="data.EventLst && data.EventLst.length"
+ >
<el-tag
size="mini"
type="info"
v-for="(label, index) in data.EventLst"
:key="index"
- style="margin-right:5px;margin-bottom:5px"
+ style="margin-right: 5px; margin-bottom: 5px"
@click="checkEventVideo(label)"
- >{{ label.Event }}</el-tag>
+ >{{ label.Event }}</el-tag
+ >
</div>
</div>
<div class="tag-info">
- <div class="tag" v-for="(tag, index) in data.tags" :key="index">{{ tag }}</div>
+ <div
+ class="tag"
+ v-for="(tag, index) in data.tags"
+ :key="index"
+ >
+ {{ tag }}
+ </div>
</div>
</div>
<div class="star" @click="toggleFollow(data)">
- <i class="iconfont" :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"></i>
+ <i
+ class="iconfont"
+ :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"
+ ></i>
</div>
</div>
</el-col>
@@ -224,22 +300,43 @@
></el-pagination>
</div>
<div class="content" v-show="showType == 'list'">
- <el-table :data="tableData" fit ref="elTable" @row-click="checkVideoDetail" >
+ <el-table
+ :data="tableData"
+ fit
+ ref="elTable"
+ @row-click="checkVideoDetail"
+ >
<el-table-column label="鍚嶇О" prop="VideoName" sortable width="500">
- <template slot-scope="scope" style="cursor: pointer">
+ <template slot-scope="scope" style="cursor: pointer">
<div>{{ scope.row.VideoName }}</div>
</template>
</el-table-column>
- <el-table-column label="澶у皬" prop="VideoSize" sortable></el-table-column>
- <el-table-column label="淇敼鏃ユ湡" prop="VideoUpdateDate" sortable></el-table-column>
- <el-table-column label="鍒涘缓鏃ユ湡" prop="VideoCreateDate" sortable></el-table-column>
+ <el-table-column
+ label="澶у皬"
+ prop="VideoSize"
+ sortable
+ ></el-table-column>
+ <el-table-column
+ label="淇敼鏃ユ湡"
+ prop="VideoUpdateDate"
+ sortable
+ ></el-table-column>
+ <el-table-column
+ label="鍒涘缓鏃ユ湡"
+ prop="VideoCreateDate"
+ sortable
+ ></el-table-column>
<el-table-column label="鎿嶄綔">
<template slot-scope="scope">
<div class="operation">
- <div class="star" >
- <i class="iconfont" :class="[scope.row.IsFollow ? 'follow' : '', 'iconguanzhu']" @click.stop="toggleFollow(scope.row)"></i>
+ <div class="star">
+ <i
+ class="iconfont"
+ :class="[scope.row.IsFollow ? 'follow' : '', 'iconguanzhu']"
+ @click.stop="toggleFollow(scope.row)"
+ ></i>
</div>
<!-- <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i> -->
</div>
@@ -257,24 +354,31 @@
:total="tableTotal"
></el-pagination>
</div>
-
-
-
- <el-dialog
- class="dialog-video"
- :visible="videoDialogVisible"
- @close="videoDialogVisible = false"
- :modal="false"
- destroy-on-close="true"
- >
- <div slot="title" class="title">
- <div class="center">
- <i class="el-icon-connection"></i>
- <span>鎾斁瑙嗛</span>
+ <!--
+
+ v-drag v-resize
+
+ -->
+ <!-- <div > -->
+ <el-dialog v-drag v-resize
+ class="dialog-video"
+ :visible="videoDialogVisible"
+ @close="videoDialogVisible = false"
+ :modal="false"
+ :close-on-click-modal="false"
+ :destroy-on-close="true"
+ :modal-append-to-body="false"
+ >
+ <div slot="title" class="title">
+ <div class="center">
+ <i class="el-icon-connection"></i>
+ <span>鎾斁瑙嗛</span>
+ </div>
</div>
- </div>
- <video-analyze :videoDetails="selectedVideo" />
- </el-dialog>
+ <video-analyze :videoDetails="selectedVideo" />
+ </el-dialog>
+ <!-- </div> -->
+
<el-dialog
class="dialog-event"
:visible="eventDialogVisible"
@@ -282,13 +386,12 @@
>
<div class="title" slot="title">
<i class="el-icon-connection"></i>
- <span>{{curEvName}}瑙嗛</span>
+ <span>{{ curEvName }}瑙嗛</span>
</div>
<event-videos :eventVideoArr="eventVideoArr"></event-videos>
</el-dialog>
</div>
</div>
-
</template>
<script>
@@ -300,7 +403,7 @@
getLabelMap,
delLabel,
editLabel,
- getEventVideo
+ getEventVideo,
} from "@/api/shuohuang";
import VideoAnalyze from "./videoAnalyze";
import EventVideos from "./eventVideos";
@@ -310,12 +413,11 @@
VideoAnalyze,
EventVideos,
},
- data () {
+ data() {
return {
CLIP: "http://",
keyword: "",
IsFollow: "",
- //searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
searchTime: [
new Date(2020, 0, 1, 0, 0, 0),
new Date(2020, 11, 31, 23, 59, 59),
@@ -323,7 +425,7 @@
curTabPage: 1,
curTablePage: 1,
tabPageSize: 8,
- pageSizes: [ 8, 12, 24],
+ pageSizes: [8, 12, 24],
tabTotal: 0,
tablePageSize: 8,
tableTotal: 0,
@@ -332,7 +434,7 @@
shortcuts: [
{
text: "浠婂ぉ",
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(0, 0, 0);
@@ -341,7 +443,7 @@
},
{
text: "鏄ㄥぉ",
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
@@ -353,7 +455,7 @@
},
{
text: "杩戜笁澶�",
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
@@ -362,7 +464,7 @@
},
{
text: "杩戜竴鍛�",
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -380,87 +482,53 @@
settle: "",
IsOperate: "",
showType: "menu",
- tableData: [
- // {
- // name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4",
- // size: "17.66M",
- // updateTime: "2020-11-04 15:41",
- // createTime: "2020-11-04 15:41",
- // },
- // {
- // name: "SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091700.mp4",
- // size: "17.76M",
- // updateTime: "2020-11-04 15:41",
- // createTime: "2020-11-07 17:41",
- // },
- ],
- tabData: [
- {
- id: "ss1",
- no: "SS4B115",
- frequency: "8084",
- time: "2020-09-21 20:45:08",
- driver: "寮犱笁",
- marks: ["鏈懠鍞ゃ�佸懠鍞や笉鏍囧噯", "瀛︿範鍙告満鏈簲绛�"],
- markType: 1,
- tags: ["杩涘嚭绔�", "鍙告満绂诲矖"],
- follow: true,
- },
- {
- id: "ss2",
- no: "SS4B115",
- frequency: "8084",
- time: "2020-09-21 20:45:08",
- driver: "寮犱笁",
- marks: [],
- markType: 0,
- tags: ["杩涘嚭绔�", "鍙告満绂诲矖"],
- follow: false,
- },
- ],
+ tableData: [],
+ tabData: [],
videoDialogVisible: false,
hiddenDanger: 1,
labelDialogVisible: false,
selectedVideo: {},
eventDialogVisible: false,
- curEvName: '',
- eventVideoArr: []
+ curEvName: "",
+ eventVideoArr: [],
};
},
watch: {
checkedConfigs: {
- handler (n, o) {
+ handler(n, o) {
this.filterSearchData();
},
deep: true,
},
},
- mounted () {
+ mounted() {
this.init();
},
methods: {
- checkEventVideo (label) {
+ checkEventVideo(label) {
this.eventDialogVisible = true;
this.curEventDetail = label;
let _this = this;
- getEventVideo({ Event: label.Event, LkgID: label.ParentID }).then(res => {
- _this.eventVideoArr = res.data;
- _this.curEvName = label.Event;
- })
+ getEventVideo({ Event: label.Event, LkgID: label.ParentID }).then(
+ (res) => {
+ _this.eventVideoArr = res.data;
+ _this.curEvName = label.Event;
+ }
+ );
},
- handleTabSizeChange (size) {
+ handleTabSizeChange(size) {
this.tabPageSize = size;
this.filterSearchData();
},
- handleTableSizeChange (size) {
+ handleTableSizeChange(size) {
this.tablePageSize = size;
this.filterSearchData();
},
- handleCurrentChange () {
+ handleCurrentChange() {
this.filterSearchData();
},
//浜岀骇鏌ヨ
- filterSearchData () {
+ filterSearchData() {
let _this = this;
let isFollow = "";
if (this.IsFollow === "") {
@@ -503,24 +571,24 @@
_this.tabTotal = res.total;
_this.tabData = res.data;
_this.tabData = _this.tabData.map(function (item) {
- const set = new Set()
+ const set = new Set();
item.LableLst.forEach(function (label) {
label.Desc.split("锛�").forEach(function (d) {
- set.add(d)
- })
- })
- const lblst = []
+ set.add(d);
+ });
+ });
+ const lblst = [];
set.forEach(function (d) {
- lblst.push({ Desc: d })
- })
- item.LableLst = lblst
- return item
- })
+ lblst.push({ Desc: d });
+ });
+ item.LableLst = lblst;
+ return item;
+ });
}
});
},
//涓�绾ф煡璇�
- init () {
+ init() {
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -544,19 +612,19 @@
_this.tabTotal = res.total;
_this.tabData = res.data;
_this.tabData = _this.tabData.map(function (item) {
- const set = new Set()
+ const set = new Set();
item.LableLst.forEach(function (label) {
label.Desc.split("锛�").forEach(function (d) {
- set.add(d)
- })
- })
- const lblst = []
+ set.add(d);
+ });
+ });
+ const lblst = [];
set.forEach(function (d) {
- lblst.push({ Desc: d })
- })
- item.LableLst = lblst
- return item
- })
+ lblst.push({ Desc: d });
+ });
+ item.LableLst = lblst;
+ return item;
+ });
}
res.filterlst.forEach((config) => {
@@ -602,7 +670,7 @@
});
});
},
- toggleFollow (data) {
+ toggleFollow(data) {
data.IsFollow = !data.IsFollow;
this.updataVideo(data);
if (data.IsFollow) {
@@ -612,24 +680,24 @@
});
}
},
- updataVideo (data) {
+ updataVideo(data) {
let _this = this;
updateVideoAnalyze(data).then((res) => {
//浜岀骇鏌ヨ
});
},
- checkVideoDetail (data) {
+ checkVideoDetail(data) {
let _this = this;
_this.selectedVideo = data;
_this.videoDialogVisible = true;
},
- checkFollow () { },
- checkType (type) {
+ checkFollow() {},
+ checkType(type) {
this.showType = type;
this.filterSearchData();
},
- clearCheckedConfigs () {
+ clearCheckedConfigs() {
this.checkedConfigs.forEach((config) => {
config.isShow = true;
config.data.forEach((d) => {
@@ -639,7 +707,7 @@
this.checkedConfigs = [];
this.showAdvance = true;
},
- removeCheckedConfig (config) {
+ removeCheckedConfig(config) {
config.isShow = true;
if (config.IsAdvanced) {
this.showAdvance = true;
@@ -650,7 +718,7 @@
let index = this.checkedConfigs.findIndex((one) => one.id == config.id);
this.checkedConfigs.splice(index, 1);
},
- checkOption (config, option) {
+ checkOption(config, option) {
if (option) {
option.isChecked = true;
}
@@ -666,20 +734,20 @@
// })
},
- cancleMultCheck (config) {
+ cancleMultCheck(config) {
config.isMultCheck = false;
config.data.forEach((opt) => {
opt.isChecked = false;
});
},
- handleSelect (key, keyPath) { },
- showMore (config) {
+ handleSelect(key, keyPath) {},
+ showMore(config) {
config.isShowMore = !config.isShowMore;
this.$refs[`options${config.id}`][0].style.height = config.isShowMore
? this.$refs[`options${config.id}`][0].scrollHeight + "px"
: this.fixedOneLineHeight + "px";
},
- toggleMultCheck (config) {
+ toggleMultCheck(config) {
config.isMultCheck = !config.isMultCheck;
this.optionalConfigs.forEach((conf) => {
if (conf.id == config.id) {
@@ -688,9 +756,82 @@
conf.isMultCheck = false;
});
},
- dataSearch () {
+ dataSearch() {
console.log(this.checkedConfigs);
this.$forceUpdate();
+ },
+ },
+ directives: {
+ drag(el, binding) {
+ const dialogHeaderEl = el.querySelector(".el-dialog__header");
+ const dragDom = el.querySelector(".el-dialog");
+ dialogHeaderEl.style.cursor = "move";
+ const sty =
+ dragDom.currentStyle || window.getComputedStyle(dragDom, null);
+ dialogHeaderEl.onmousedown = (e) => {
+ const disX = e.clientX - dialogHeaderEl.offsetLeft;
+ const disY = e.clientY - dialogHeaderEl.offsetTop;
+ let styL, styT;
+
+ if (sty.left.includes("%")) {
+ styL =
+ +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
+ styT =
+ +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
+ } else {
+ styL = +sty.left.replace(/\px/g, "");
+ styT = +sty.top.replace(/\px/g, "");
+ }
+ document.onmousemove = function (e) {
+ const l = e.clientX - disX;
+ const t = e.clientY - disY;
+ dragDom.style.left = `${l + styL}px`;
+ dragDom.style.top = `${t + styT}px`;
+ };
+ document.onmouseup = function (e) {
+ document.onmousemove = null;
+ document.onmouseup = null;
+ };
+ };
+ },
+ resize(el, binding, vnode) {
+ const dragDom = el.querySelector('.el-dialog')
+ dragDom.style.overflow = 'hidden'
+ let minWidth = 400
+ let minHeight = 300 //
+
+ // 鎷変几
+ let resizeEl = document.createElement('div')
+ dragDom.appendChild(resizeEl) // 鍦ㄥ脊绐楀彸涓嬭鍔犱笂涓�涓�10-10px鐨勬帶鍒跺潡
+ resizeEl.style.cursor = 'nwse-resize'
+ // resizeEl.style.cursor = 'se-resize'
+ resizeEl.style.position = 'absolute'
+ resizeEl.style.height = '12px'
+ resizeEl.style.width = '12px'
+ resizeEl.style.right = '0px'
+ resizeEl.style.bottom = '0px' //榧犳爣鎷変几寮圭獥
+ resizeEl.style.background = 'url("/images/desktop/resize.png") no-repeat' //榧犳爣鎷変几寮圭獥
+
+ resizeEl.onmousedown = (e) => {
+ // 璁板綍鍒濆x浣嶇疆
+ const clientX = e.clientX // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂�
+ const disX = e.clientX - resizeEl.offsetLeft
+ const disY = e.clientY - resizeEl.offsetTop
+
+ document.onmousemove = function(e) {
+ e.preventDefault() // 绉诲姩鏃剁鐢ㄩ粯璁や簨浠� // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈
+
+ const x = e.clientX - disX + (e.clientX - clientX) //杩欓噷 鐢变簬elementUI鐨刣ialog鎺у埗灞呬腑鐨勶紝鎵�浠ユ按骞虫媺浼告晥鏋滄槸鍙屽��
+ const y = e.clientY - disY //姣旇緝鏄惁灏忎簬鏈�灏忓楂�
+ dragDom.style.width = x > minWidth ? `${x}px` : minWidth + 'px'
+ dragDom.style.height =
+ y > minHeight ? `${y}px` : minHeight + 'px'
+ } //鎷変几缁撴潫
+ document.onmouseup = function(e) {
+ document.onmousemove = null
+ document.onmouseup = null
+ }
+ }
},
},
};
@@ -912,7 +1053,7 @@
// display: flex;
// flex-wrap: wrap;
// }
- .el-table__row{
+ .el-table__row {
cursor: pointer;
}
.el-row {
@@ -1004,10 +1145,10 @@
}
.operation {
cursor: pointer;
- .star{
+ .star {
color: #ccc;
}
- .follow{
+ .follow {
color: #409eff;
}
}
@@ -1019,22 +1160,28 @@
background: #f5f5f5;
}
}
+ .el-dialog__wrapper{
+ top: -22px;
+ }
.dialog-video {
// z-index: 2020 !important;
.el-dialog {
width: 1180px;
- height: 901px;
+ // height: 893px;
}
.el-dialog__body {
- background: #f5f5f5;
+ background: #eaeaea;
padding: 0;
+ // height: 100%;
+ height: inherit;
+
}
.el-dialog__header {
padding: 3px;
.el-dialog__headerbtn {
top: 6px;
}
- }
+ }
.title-partment {
font-size: 14px;
font-weight: 500;
@@ -1067,12 +1214,12 @@
}
}
}
- .window-view {
+.window-view {
width: 100%;
height: auto;
// height: 100%;
// min-height: 684px;
overflow: auto;
z-index: 2000;
- }
+}
</style>
\ No newline at end of file
diff --git a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
index cb0a759..df42df8 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/taskManage.vue
@@ -60,27 +60,27 @@
</div>
<div class="video-list">
<el-checkbox-group v-model="trainNochecked">
- <!-- <el-collapse v-model="actCollapseName">
+ <el-collapse v-model="actCollapseName">
<el-collapse-item
- :name="trainNo.no"
- v-for="trainNo in trainNoList"
- :key="trainNo.id"
+ :name="vkey"
+ v-for="(v,vkey,i) in videoPackageList"
+ :key="i"
>
<template slot="title">
<div>
<el-checkbox
- :label="trainNo.videos[0]['UniqeID']"
+ :label="i"
style="padding-right:10px;"
></el-checkbox>
- <span>{{trainNo.no}}({{trainNo.videos.length}})</span>
+ <span>{{vkey}}({{v.length}})</span>
</div>
</template>
- <div class="video-detail" v-for="video in trainNo.videos" :key="video.ID">
+ <div class="video-detail" v-for="video in v" :key="video.ID">
<i class="el-icon-film" style="margin-left: 20px;"></i>
<span style="padding-left: 10px;">{{video.VideoName}}</span>
</div>
</el-collapse-item>
- </el-collapse> -->
+ </el-collapse>
</el-checkbox-group>
<!-- <el-pagination
@size-change="handleTrainNoSizeChange"
@@ -250,7 +250,7 @@
}]
},
isShowUndistributedOnly: false,
- trainNoList: [],
+ videoPackageList: {},
trainNochecked: [],
// trainNoCurPage: 1,
// trainNoPageSize: 8,
@@ -357,16 +357,7 @@
notAssignedOnly: this.notAssignedOnly,
};
getVideoListBySearch(params).then(res => {
- // let arr = [];
- // for (var key in res.data) {
- // let obj = {};
- // obj['no'] = key;
- // obj['videos'] = res.data[key];
- // obj.checked = false;
- // arr.push(obj);
- // }
- // debugger
- _this.trainNoList = res;
+ _this.videoPackageList = res.data
_this.trainNoTotal = res.total;
});
},
diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
index 191953e..de1e4f0 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue
@@ -2,16 +2,25 @@
<div class="video-analyze-content">
<div class="content-top">
<div class="grid-check">
-
- <el-dropdown trigger="click" :popper-append-to-body="false" @command="handleCommand" v-show="showLocChoise">
- <span class="el-dropdown-link">
- {{curCamera}}<i class="el-icon-arrow-down el-icon--right"></i>
- </span>
- <el-dropdown-menu slot="dropdown">
- <el-dropdown-item v-for="(item,index) in popDownArr" :key="index" :command="item">{{item.Camera}}</el-dropdown-item>
- </el-dropdown-menu>
- </el-dropdown>
-
+ <el-dropdown
+ trigger="click"
+ :popper-append-to-body="false"
+ @command="handleCommand"
+ v-show="showLocChoise"
+ >
+ <span class="el-dropdown-link">
+ {{ curCamera }}<i class="el-icon-arrow-down el-icon--right"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item
+ v-for="(item, index) in popDownArr"
+ :key="index"
+ :command="item"
+ >{{ item.Camera }}</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </el-dropdown>
+
<span
:class="
guid === 1
@@ -42,15 +51,15 @@
<p class="title-partment">鐩稿叧瑙嗛</p>
<div class="v-name-block">
<div
- class="video-name"
- :class="{ current: curVideo.ID == video.ID }"
- @click="checkVideo(video, index)"
- v-for="(video, index) in curRoomVideos"
- :key="video.ID"
- >
- <i class="el-icon-film"></i>
- <span>{{ video.VideoDate }}</span>
- </div>
+ class="video-name"
+ :class="{ current: curVideo.ID == video.ID }"
+ @click="checkVideo(video, index)"
+ v-for="(video, index) in curRoomVideos"
+ :key="video.ID"
+ >
+ <i class="el-icon-film"></i>
+ <span>{{ video.VideoDate }}</span>
+ </div>
</div>
</div>
<div class="players" ref="playerWrap">
@@ -61,10 +70,13 @@
v-for="(item, index) in videoWrapArr"
:key="index"
>
+ <div style="display: none"></div>
<div class="currentPlayer">
- <!-- {{curVideo.ID}} -->
- <!-- <img :src="curVideo.VideoCover" style="width:100px" /> -->
<ali-player
+ @playing="getPlayStatus"
+ @pause="isStop = true"
+ @play="isStop = false"
+ @timeupdate="timeUpdate"
:source="curVideo.VideoPath"
:markers="curVideo.marks"
:ref="`player_${curVideo.ID}`"
@@ -79,80 +91,122 @@
v-for="(item, index) in videoWrapArr"
:key="index"
@click="checkCurVideo(index)"
- style="position: relative;"
+ 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].Camera }}</b>
+ </div>
<div
- :class="{ currentPlayer: curVideo.ID == videoArrs[index].ID,videoZone:true }"
- @mouseover="overShowLoc(index)"
+ :class="{
+ currentPlayer: curVideo.ID == videoArrs[index].ID,
+ }"
>
- <!-- @mouseover="" -->
- <!-- {{videoArrs[index].ID}} -->
- <!-- <img
- :src="videoArrs[index].VideoCover"
- style="width:100px"
- />-->
- <div class="pos-desc" style="position: absolute;top: 5px;left: 10px;color: #fff;z-index: 1;height: fit-content;background-color: black;">{{videoArrs[index].Camera}}</div>
<ali-player
+ @timeupdate="timeUpdate(e, index)"
:source="videoArrs[index].VideoPath"
:markers="videoArrs[index].marks"
+ @pause="isStop = true"
+ @play="isStop = false"
:ref="`player_${videoArrs[index].ID}`"
+ @ready="videoReady"
/>
</div>
</template>
</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">
+ {{ getTimeStr(item.offset) }}<br />{{ item.text }}
+ </div>
+ <div
+ class="self-dot"
+ :style="{
+ left: (item.offset / maxSecond) * 100 + '%',
+ }"
+ @click="dotJump(item.offset)"
+ ></div>
+ </el-tooltip>
+ <!-- :marks="marks" -->
+ <el-slider
+ v-model="curTime"
+ :format-tooltip="formatTooltip"
+ :max="maxSecond"
+ @change="progressChange"
+ @input="inTimeChange"
+ ></el-slider>
+ </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>
+ </div>
</div>
</div>
</div>
<div class="content-bottom">
- <div class="bot-left ">
+ <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="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="isUnusual == 1"
- type="primary"
- @click="addLabel(curVideo)"
- >娣诲姞鏍囨敞</el-button
- >
- </div>
- <div class="flex-box fixed-height-box">
- <label v-if="!showTable">鏍囨敞淇℃伅:</label>
- <div class="mark-list" v-if="!showTable">
- <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
- >
- <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>
- </div>
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane label="蹇�熸爣娉�" name="first">
+ <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="isUnusual == 1"
+ type="primary"
+ @click="addLabel(curVideo)"
+ >娣诲姞鏍囨敞</el-button
+ >
</div>
- </div>
- </div></el-tab-pane>
- <!-- <div class="flex-box fixed-height-box2"></div> -->
- <dataset-chart style="width:100%" v-if="showTable"></dataset-chart>
+ <div class="flex-box fixed-height-box">
+ <label v-if="!showTable">鏍囨敞淇℃伅:</label>
+ <div class="mark-list" v-if="!showTable">
+ <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
+ >
+ <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>
+ </div>
+ </div>
+ </div>
+ </div></el-tab-pane
+ >
+ <!-- <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">
<p class="title-partment">瑙嗛璇︽儏</p>
@@ -182,8 +236,7 @@
:visible="labelDialogVisible"
@close="labelDialogVisible = false"
:append-to-body="false"
- :modal="false"
-
+ :modal="false"
>
<!-- <div class="label-radio">
<p class="label">閫夋嫨灏嗚鏍囨敞鐨勮棰�:</p>
@@ -224,7 +277,7 @@
delLabel,
editLabel,
} from "@/api/shuohuang";
-import DatasetChart from './charts/datasetForVideo';
+import DatasetChart from "./charts/datasetForVideo";
import AliPlayer from "./aliPlayer/index";
export default {
@@ -249,19 +302,32 @@
isUnusual: "",
videoArrs: [],
relativeVideos: [],
- allCurVideos:[],
+ allCurVideos: [],
labelCheckedList: [],
videoWrapArr: [],
labelOptions: [],
selectedLabelId: "",
setLabelTime: 0,
isCheckAllVideo: 1,
- curRoomVideos:[],
- popDownArr:[],
- curCamera:"",
- showTable:false,
- showLocChoise:true,
- activeName:"first",
+ curRoomVideos: [],
+ popDownArr: [],
+ curCamera: "",
+ showTable: false,
+ showLocChoise: true,
+ activeName: "first",
+ curTime: 0,
+ showPlayBtn: true,
+ eventMarks: [],
+ marks: {
+ 45: {},
+ 373: {},
+ },
+ labelMarks: [],
+ maxDuration: 0,
+ maxVideoTime: "",
+ curPlayTime: "00:00",
+ maxSecond: 0,
+ isStop: false,
};
},
watch: {
@@ -286,27 +352,133 @@
this.renderLabelOpts();
this.setGuid(1);
this.getCurVideos(this.videoDetails);
- this.getRelatedVideos(this.videoDetails)
+ this.getRelatedVideos(this.videoDetails);
},
methods: {
- handleClick(instance){
- if (instance.name=="second") {
- this.showTable=true
- }else{
- this.showTable=false
+ getPlayStatus(e) {
+ console.log(e, 1111);
+ },
+ videoReady(a, b) {},
+ 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();
+ });
}
},
- handleCommand(cmd){
- this.curCamera = cmd.Camera
- this.curRoomVideos = this.allCurVideos.filter(item=>{
- return item.Camera == cmd.Camera
- })
- this.curVideo= this.curRoomVideos.find(item=>{
- return item.UniqeID == this.curVideo.UniqeID
- })
- this.$nextTick(() => {
- _this.$refs[`player_${_this.curVideo.ID}`][0].init();
+ 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();
});
+ }
+ },
+ inTimeChange(val) {},
+ progressChange(val) {
+ console.log(val);
+ this.showPlayBtn = false;
+ this.curPlayTime = this.getTimeStr(val);
+ 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();
+ that.barRolling(curT);
+ }, 600);
+ } else {
+ this.videoArrs.forEach((v, i) => {
+ this.$refs[`player_${v.ID}`][0].seek(val);
+ this.$refs[`player_${v.ID}`][0].play();
+ if (i == 0) {
+ let curT = this.$refs[`player_${v.ID}`][0].getCurrentTime();
+ this.barRolling(curT);
+ }
+ });
+ }
+ },
+ getTimeStr(sec) {
+ return `${
+ Math.floor(sec / 60) < 10
+ ? "0" + Math.floor(sec / 60)
+ : Math.floor(sec / 60)
+ }:${
+ Math.floor(sec % 60) < 10
+ ? "0" + Math.floor(sec % 60)
+ : Math.floor(sec % 60)
+ }`;
+ },
+ barRolling(curT) {},
+ 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;
+ }
+ this.curPlayTime = this.getTimeStr(this.curTime);
+ },
+ formatTooltip(val) {
+ return this.curPlayTime;
+ },
+ 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) {
+ let _this = this;
+ this.curCamera = cmd.Camera;
+ this.curRoomVideos = this.allCurVideos.filter((item) => {
+ return item.Camera == cmd.Camera;
+ });
+ this.curVideo = this.curRoomVideos.find((item) => {
+ return item.UniqeID == this.curVideo.UniqeID;
+ });
+ this.$nextTick(() => {
+ _this.$refs[`player_${_this.curVideo.ID}`][0].init();
+ });
},
zeroize(val) {
return val < 10 ? "0" + val : val;
@@ -317,38 +489,79 @@
this.refreshCurVideoLabel(this.curVideo);
}
},
- getCurVideos(v){
+ 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.curVideo=res.data.find((item) => item.ID == v.ID)
- // debugger
- _this.videoArrs = res.data.filter(item=> v.UniqeID== item.UniqeID);
- _this.allCurVideos = res.data;
- _this.curRoomVideos = _this.allCurVideos.filter(item=>{
- return item.Camera == "鍙告満瀹�"
- })
- this.$nextTick(() => {
- _this.$refs[`player_${_this.curVideo.ID}`][0].init();
+ TrainNumber: v.TrainNumber,
+ CarNumber: v.CarNumber,
+ Driver1: v.Driver1,
+ }).then((res) => {
+ res.data.forEach((item) => {
+ 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) => {
+ if (item.type == 0) {
+ map[item.offset] = {
+ style: {
+ color: "white",
+ },
+ label: item.text,
+ };
+ } else {
+ map[+item.offset] = {
+ style: {
+ color: "yellow",
+ },
+ label: item.text,
+ };
+ }
+ });
+ // _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;
+ }
+ _this.videoArrs = res.data.filter((item) => v.UniqeID == item.UniqeID);
+ _this.allCurVideos = res.data;
+ _this.curRoomVideos = _this.allCurVideos.filter((item) => {
+ return item.Camera == "鍙告満瀹�";
+ });
+
+ this.$nextTick(() => {
+ _this.$refs[`player_${_this.curVideo.ID}`][0].init();
+ let arr = this.maxVideoTime.split(":");
+ let min = +arr[0],
+ sec = +arr[1];
+ this.maxSecond = min * 60 + sec;
+ });
+ });
},
getRelatedVideos(video) {
let _this = this;
getRelatedVideoInfo({ UniqeID: video.UniqeID }).then((res) => {
- let arr = []
- let map = {}
- res.data.forEach(item=>{
- this.popDownArr.push(item)
- })
+ let arr = [];
+ let map = {};
+ res.data.forEach((item) => {
+ this.popDownArr.push(item);
+ });
if (this.popDownArr.length) {
- this.curCamera=this.popDownArr[0].Camera
+ this.curCamera = this.popDownArr[0].Camera;
}
});
},
@@ -364,57 +577,54 @@
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) {
- // debugger
this.refreshCurVideoLabel(video);
this.curVideo = video;
- this.videoArrs = this.allCurVideos.filter(item=> video.UniqeID== item.UniqeID);
-
+ this.videoArrs = this.allCurVideos.filter(
+ (item) => video.UniqeID == item.UniqeID
+ );
this.$nextTick(() => {
this.$refs[`player_${this.curVideo.ID}`][0].init();
});
},
-
setGuid(guid) {
let _this = this;
this.guid = guid;
- if (guid==1) {
- this.showLocChoise=true
- }else{
- this.showLocChoise=false
+ if (guid == 1) {
+ this.showLocChoise = true;
+ } else {
+ this.showLocChoise = false;
+ this.$refs[`player_${this.curVideo.ID}`][0].pause();
+ this.$refs[`player_${this.curVideo.ID}`][0].seek(0);
}
- // for(var i = 0; i < Math.pow(guid,2); i++){
- // if(i>this.videoArrs.length-1){
- // this.videoWrapArr[i] = this.videoArrs[i]
- // }else{
- // this.videoWrapArr[i] = {}
- // }
- // }
this.videoWrapArr = Math.pow(guid, 2);
this.$nextTick(() => {
for (var i = 0; i < Math.pow(guid, 2); i++) {
+ console.log(`calc(` + 100 / guid + `% -10px)`);
this.$refs[`gridVideoItem_${i}`][0].style.width =
- this.$refs["playerWrap"].offsetWidth / guid + "px";
+ `calc(` + 100 / guid + `%)`;
+ // this.$refs["playerWrap"].offsetWidth / guid + "px";
this.$refs[`gridVideoItem_${i}`][0].style.height =
- this.$refs["playerWrap"].offsetHeight / guid + "px";
+ `calc(` + 100 / guid + `%)`;
+ // this.$refs["playerWrap"].offsetHeight / guid + "px";
}
+ console.log(this.$refs[`player_${this.videoArrs[index].ID}`]);
});
},
-
cancelLabelChecked() {
this.labelDialogVisible = false;
+ },
+ dotJump(offset){
+ this.curTime = offset
+ this.progressChange(offset)
},
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) => {
for (let label of this.labelOptions) {
if (label.ID == lableId) {
@@ -425,7 +635,7 @@
let query = {
ID: this.selectedLabelId,
- ParentID: tempArr.join(","),
+ ParentID: tempArr.join(","),
ParentUniqID: this.curVideo.UniqeID + "",
Time: Math.round(this.setLabelTime) + "",
Codes: this.labelCheckedList.join(","),
@@ -485,19 +695,24 @@
});
},
mergeMarks(videoInfo) {
- const eMarks = videoInfo.EventLst.map(function (item) {
- return {
- offset: item.SecondsInVideo + "",
+ const eMarks = videoInfo.EventLst.map((item) => {
+ let obj = {
+ offset: item.SecondsInVideo,
text: item.Event + (item.Desc == "" ? "" : ": " + item.Desc),
+ type: 0,
};
+ this.eventMarks.push(obj);
+ return obj;
});
const labMarks = videoInfo.LableLst.map((lable) => {
- return {
+ let obj = {
offset: lable.Time,
text: lable.Desc,
+ type: 1,
};
+ this.labelMarks.push(obj);
+ return obj;
});
-
return eMarks.concat(labMarks);
},
setMarks(video) {
@@ -511,29 +726,33 @@
<style lang="scss" >
.video-analyze-content {
margin: 0;
- padding: 6px 15px 15px 15px;
+ padding: 6px 15px 15px 15px;
+ height: 100%;
text-align: left;
.content-top {
- margin-bottom: 10px;
+ margin-bottom: 15px;
+
+ // height: calc(60% + -16px);
+
.grid-check {
text-align: right;
- margin-bottom: 3px;
+ margin-bottom: 3px;
position: relative;
- .el-dropdown{
+ .el-dropdown {
position: absolute;
top: -4px;
left: 200px;
}
.el-dropdown-link {
cursor: pointer;
- color: #409EFF;
+ color: #409eff;
}
.el-icon-arrow-down {
font-size: 12px;
}
span {
- font-size: 17px;
+ font-size: 17px;
color: #cacaca;
padding-left: 12px;
@@ -545,14 +764,16 @@
}
.video-area {
display: flex;
- .info-list {
- width: 180px;
+ height: 100%;
+ .info-list {
+ width: 180px;
+ min-width: 180px;
margin-right: 10px;
- .v-name-block{
+ .v-name-block {
height: 484px;
- overflow: auto;
+ overflow: auto;
}
.video-name {
cursor: pointer;
@@ -567,20 +788,34 @@
}
}
.players {
- width: 940px;
-
- height: 530px;
+ width: 100%;
display: flex;
flex-wrap: wrap;
+ height: 455px;
.video-item {
background: black;
border: 1px solid #fff;
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 {
@@ -592,21 +827,78 @@
}
}
}
+ .player-control {
+ background-color: black;
+ height: 75px;
+ width: 100%;
+ .progress-bar {
+ margin: 0px 30px;
+ position: relative;
+ .self-dot {
+ top: 16px;
+ position: absolute;
+ height: 6px;
+ width: 3px;
+ z-index: 1;
+ background-color: lightcoral;
+ border-radius: 60%;
+ // pointer-events: none;
+ cursor: pointer;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ }
+ .el-slider__button {
+ width: 12px;
+ height: 12px;
+ }
+ .el-slider__stop {
+ background-color: lightcoral;
+ }
+ }
+ .control-zone {
+ .time {
+ float: left;
+ margin-left: 23px;
+ color: #fff;
+ }
+ .play-btn {
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ background: url(/apps/shuohuangMonitorAnalyze/img/bigplay.png)
+ no-repeat;
+ background-size: contain;
+ margin: 0 auto;
+ }
+ .stop-btn {
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ background: url(/apps/shuohuangMonitorAnalyze/img/smallpause.png)
+ no-repeat;
+ background-size: contain;
+ margin: 0 auto;
+ }
+ }
+ }
}
}
}
.content-bottom {
display: flex;
+
.bot-left {
flex: 1;
padding: 0px 15px 8px 15px;
background: #fff;
- border-radius: 3px;
- .el-tabs__header {
- padding: 0;
- position: relative;
- margin: 0 0 10px;
-}
+ border-radius: 3px;
+ min-width: 400px;
+ height: 343px;
+ .el-tabs__header {
+ padding: 0;
+ position: relative;
+ margin: 0 0 10px;
+ }
.flex-box {
align-items: baseline;
label {
@@ -644,6 +936,8 @@
.bot-right {
width: 210px;
margin-left: 10px;
+ min-width: 210px;
+
label {
color: #999;
padding-right: 8px;
@@ -654,7 +948,7 @@
.label-dialog {
.el-dialog {
width: 700px !important;
- height: 558px !important;
+ height: 558px !important;
.el-dialog__header {
height: 20px;
}
--
Gitblit v1.8.0