From 1cc7750ae8f3fb5abb8d36636f0e9ebc05c61f7b Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 21 一月 2021 19:45:50 +0800
Subject: [PATCH] page: use aliplayer set progress markers. shuohuang
---
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 469 ++++------------------------------------------------------
1 files changed, 37 insertions(+), 432 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 2006669..033f1e5 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -210,7 +210,7 @@
<el-table-column label="鎿嶄綔">
<template slot-scope="scope">
<div class="operation">
- <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i>
+ <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i>
</div>
</template>
</el-table-column>
@@ -237,161 +237,8 @@
<span>鎾斁瑙嗛</span>
</div>
</div>
- <div class="content">
- <div class="content-top">
- <div class="grid-check">
- <span
- :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
- @click="setGuid(1)"
- ></span>
- <span
- :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
- @click="setGuid(2)"
- ></span>
- <span
- :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
- @click="setGuid(3)"
- ></span>
- </div>
- <div class="video-area">
- <div class="info-list block">
- <p class="title-partment">鐩稿叧瑙嗛</p>
- <!-- <div class="video-name" v-for="video in videoDetails.videoList" :key="video.id">
- <i class="el-icon-film"></i>
- <span>{{video.name}}</span>
- </div>-->
- <div
- class="video-name"
- :class="{'current':curVideo.ID==video.ID}"
- @click="checkVideo(video,index)"
- v-for="(video,index) in videoDetails.relativeVideos"
- :key="video.ID"
- >
- <i class="el-icon-film"></i>
- <span>{{video.Event}}</span>
- </div>
- </div>
- <div class="players" ref="playerWrap">
- <template v-if="guid==1">
- <div
- class="video-item"
- :ref="`gridVideoItem_${index}`"
- v-for="(item,index) in videoWrapArr"
- :key="index"
- >
- <div class="currentPlayer">
- {{curVideo.ID}}
- <img :src="CLIP+curVideo.VideoCover" style="width:100px" />
- </div>
- </div>
- </template>
- <template v-else>
- <div
- class="video-item"
- :ref="`gridVideoItem_${index}`"
- v-for="(item,index) in videoWrapArr"
- :key="index"
- >
- <template v-if="index<=videoArrs.length-1">
- <div :class="{'currentPlayer':curVideo.ID==videoArrs[index].ID}">
- {{videoArrs[index].ID}}
- <img
- :src="CLIP+videoArrs[index].VideoCover"
- style="width:100px"
- />
- </div>
- </template>
- </div>
- </template>
- <!-- <div
- class="video-item"
- :class="{'active':item.ID==curVideo.ID}"
- :ref="`gridVideoItem_${index}`"
- v-for="(item,index) in videoWrapArr"
- :key="index"
- >
-
- </div>-->
- </div>
- </div>
- </div>
- <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>
- <el-button
- icon="el-icon-plus"
- size="mini"
- v-show="curVideo.IsUnusual==1"
- type="primary"
- @click="addLabel(curVideo)"
- >娣诲姞鏍囨敞</el-button>
- </div>
- <div class="flex-box">
- <label>鏍囨敞淇℃伅:</label>
- <div class="mark-list">
- <div class="mark" v-for="mark in curVideo.LableLst" :key="mark.ID">
- <div class="time" v-if="mark.length">
- <span>{{mark[0].Time}}</span>
- <i class="el-icon-edit" @click="editCurLabel(mark)"></i>
- <i
- class="el-icon-delete"
- @click="removeCurLabel(mark[0].ParentID,mark[0].Time)"
- ></i>
- </div>
- <div class="label-content">
- <span
- v-for="content in mark"
- :key="content.ID"
- >{{findLabelNameById(content.CodeID)}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="bot-right block">
- <p class="title-partment">瑙嗛璇︽儏</p>
- <div class="base-info">
- <div>
- <label>杞﹀彿:</label>
- <span>{{videoDetails.CarNumber}}</span>
- </div>
- <div>
- <label>杞︽:</label>
- <span>{{videoDetails.TrainNumber}}</span>
- </div>
- <div>
- <label>鏃堕棿:</label>
- <span>{{videoDetails.VideoDate}}</span>
- </div>
- <div>
- <label>鍙告満|鍓徃鏈�:</label>
- <span>{{videoDetails.Driver1}}|{{videoDetails.Driver2}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </el-dialog>
- <el-dialog
- class="label-dialog"
- :visible="labelDialogVisible"
- @close="labelDialogVisible=false"
- :append-to-body="false"
- >
- <div class="label-check">
- <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="small">鍙栨秷</el-button>
- <el-button @click="submitLabelChecked()" size="small" type="primary">纭畾</el-button>
- </div>
+ <video-analyze :videoDetails="selectedVideo" />
</el-dialog>
</div>
</div>
@@ -399,13 +246,18 @@
<script>
import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';
+import VideoAnalyze from "./videoAnalyze"
export default {
- data () {
+ name: "SearchMain",
+ components: {
+ VideoAnalyze
+ },
+ data() {
return {
CLIP: 'http://192.168.20.113/',
keyword: '',
- searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 3).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
+ 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")],
curTabPage: 1,
curTablePage: 1,
tabPageSize: 8,
@@ -417,7 +269,7 @@
pickerOptions: {
shortcuts: [{
text: '浠婂ぉ',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(0, 0, 0);
@@ -425,7 +277,7 @@
}
}, {
text: '鏄ㄥぉ',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24);
@@ -436,7 +288,7 @@
}
}, {
text: '杩戜笁澶�',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
@@ -444,7 +296,7 @@
}
}, {
text: '杩戜竴鍛�',
- onClick (picker) {
+ onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
@@ -471,119 +323,37 @@
],
videoDialogVisible: false,
- videoDetails: {},
- guid: 1,
- curVideo: {},
- videoArrs: [],
- videoWrapArr: [],
hiddenDanger: 1,
labelDialogVisible: false,
- labelOptions: [{ id: 'whh', name: '鏈懠鍞ゃ�佸懠鍞や笉鏍囧噯' }, { id: 'jsbz', name: '绮剧涓嶆尟銆佽繍琛屼腑鐫¤' }, { id: 'xxsj', name: '瀛︿範鍙告満鏈簲绛�' }, { id: 'myhb', name: '娌℃湁鍚庨儴鐬湜銆佷笉鎸夎瀹氬仛闃叉簻鎺柦' }],
- labelCheckedList: [],
+ selectedVideo: {}
}
},
watch: {
checkedConfigs: {
- handler (n, o) {
- // let filterQuerys = [];
- // n.forEach(config => {
- // let checkedOpts = config.data.filter(option => option.isChecked);
- // if (checkedOpts.length) {
- // var linkOpts = checkedOpts.map(opt => opt.name);
- // linkOpts = linkOpts.join(',');
- // let obj = {};
- // obj[config.NameEn] = linkOpts;
- // filterQuerys.push(obj);
- // }
- // })
- // console.log(filterQuerys)
-
+ handler(n, o) {
this.filterSearchData()
},
deep: true
}
},
- mounted () {
- // let mockConfigs = [
- // { id: 'jch', isHighLevel: false, title: '鏈鸿溅鍙�', data: [{ name: '鍏ㄩ儴', id: '' }, { name: 'K24', id: 'k24' }, { name: 'G172', id: 'g172' }, { name: 'K254', id: 'k254' }, { name: 'K264', id: 'k264' }, { name: 'G132', id: 'g132' }, { name: 'K257', id: 'k257' }, { name: 'K269', id: 'k269' }, { name: 'G176', id: 'g176' }, { name: 'G137', id: 'g137' }, { name: 'K297', id: 'k297' }, { name: 'K209', id: 'k209' }, { name: 'G777', id: 'g777' }, { name: 'G337', id: 'g337' }, { name: 'K277', id: 'k277' }, { name: 'K299', id: 'k299' }, { name: 'G866', id: 'g866' }, { name: 'K877', id: 'k877' }, { name: 'K699', id: 'k699' }, { name: 'G906', id: 'g906' }, { name: 'L677', id: 'l677' }, { name: 'M987', id: 'm987' }] },
- // { id: 'cc', isHighLevel: false, title: '杞︽', data: [{ name: '鍏ㄩ儴', id: '' }, { name: 'SS344', id: 'SS344' }, { name: 'SS345', id: 'SS345' }, { name: 'SS765', id: 'SS765' }, { name: 'SS776', id: 'SS776' }, { name: 'SS676', id: 'SS676' }, { name: 'SS876', id: 'SS876' }, { name: 'SS779', id: 'k779' }, { name: 'SS976', id: 'SS976' },] },
- // { id: 'sj', isHighLevel: true, title: '鍙告満', data: [{ name: '寮犱笁', id: 'zs' }, { name: '鏉庢柉', id: "ls" }, { name: '鏉庢柉鐗�', id: "lst" }] },
- // { id: 'lk', isHighLevel: true, title: '璺喌', data: [{ name: '鏍囩ず鐗�', id: 'bsp' }, { name: '淇″彿鏈�', id: "xhj" }, { name: '寮亾', id: "wd" }] }
- // ];
-
- // mockConfigs.forEach(config => {
- // this.$set(config, 'isShow', true);
- // config.data.forEach(item => {
- // this.$set(item, 'isChecked', false);
- // })
- // if (config.isHighLevel) {
- // this.highLevelConfigs.push(config);
- // } else {
- // this.$set(config, 'isMultCheck', false);
- // this.$set(config, 'showMore', false);
- // this.optionalConfigs.push(config);
- // }
- // })
- // this.$nextTick(() => {
- // this.optionalConfigs.forEach(config => {
- // if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) {
- // config.showMore = true;
- // this.$set(config, 'isShowMore', false);
- // } else {
- // config.showMore = false;
- // }
- // });
- // console.log(this.optionalConfigs);
- // });
+ mounted() {
this.init();
- this.renderLabelOpts();
},
methods: {
- editCurLabel (mark) {
- let arr = [];
- mark.forEach(label => {
- arr.push(label.CodeID)
- });
- this.labelCheckedList = arr;
- this.labelDialogVisible = true;
- },
- removeCurLabel (ParentID, Time) {
- delLabel({ ParentID, Time }).then(res => {
-
- })
- },
- renderLabelOpts () {
- let _this = this;
- getLabelMap().then(res => {
- _this.labelOptions = res.data
- })
- },
- findLabelNameById (id) {
- debugger
- let label = this.labelOptions.find(label => label.ID == id);
- return label.Name;
- },
- checkVideo (video, index) {
- this.curVideo = video;
- debugger
- if (index > 0 && this.guid == 1) {
- //this.videoWrapArr =
- }
- },
- handleTabSizeChange (size) {
+ handleTabSizeChange(size) {
debugger
this.tabPageSize = size;
this.filterSearchData()
},
- handleTableSizeChange (size) {
+ handleTableSizeChange(size) {
this.tablePageSize = size;
this.filterSearchData()
},
- handleCurrentChange () {
+ handleCurrentChange() {
this.filterSearchData()
},
//浜岀骇鏌ヨ
- filterSearchData () {
+ filterSearchData() {
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -617,7 +387,7 @@
})
},
//涓�绾ф煡璇�
- init () {
+ init() {
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -673,7 +443,7 @@
})
},
- toggleFollow (data) {
+ toggleFollow(data) {
data.IsFollow = !data.IsFollow;
this.updataVideo(data);
if (data.IsFollow) {
@@ -683,82 +453,26 @@
});
}
},
- updataVideo (data) {
+ updataVideo(data) {
let _this = this;
updateVideoAnalyze(data).then(res => {
//浜岀骇鏌ヨ
});
},
- cancelLabelChecked () {
- this.labelDialogVisible = false;
- },
- submitLabelChecked () {
- console.log(this.labelCheckedList)
- debugger
- //this.curVideo
- //this.curVideo.HotPoint[0].Time
- editLabel({ ParentID: this.curVideo.ID + '', Time: this.curVideo.HotPoint[0].Time, CodeID: this.labelCheckedList.join(',') }).then(res => {
- debugger
-
- })
-
- },
- addLabel (video) {
- this.labelDialogVisible = true;
- },
- setGuid (guid) {
+ checkVideoDetail(data) {
let _this = this;
- this.guid = guid;
- // 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++) {
- 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.selectedVideo = data;
+ _this.videoDialogVisible = true;
+ },
+ checkFollow() {
},
- checkVideoDetail (data) {
- this.videoDetails = data;
- let _this = this;
- getRelatedVideoInfo({ UniqeID: data.UniqeID }).then(res => {
- _this.videoDetails.relativeVideos = res.data;
- _this.curVideo = res.data[0];
- _this.videoArrs = res.data;
- // _this.videoWrapArr.push(res.data[0]);
- _this.setGuid(1)
- _this.videoDialogVisible = true;
- })
- },
- checkFollow () {
-
- },
- checkType (type) {
+ checkType(type) {
this.showType = type;
- // let filterQuerys = [];
- // this.checkedConfigs.forEach(config => {
- // let checkedOpts = config.data.filter(option => option.isChecked);
- // if (checkedOpts.length) {
- // var linkOpts = checkedOpts.map(opt => opt.name);
- // linkOpts = linkOpts.join(',');
- // let obj = {};
- // obj[config.NameEn] = linkOpts;
- // filterQuerys.push(obj);
- // }
- // })
this.filterSearchData()
},
- clearCheckedConfigs () {
+ clearCheckedConfigs() {
this.checkedConfigs.forEach(config => {
config.isShow = true;
config.data.forEach(d => {
@@ -768,7 +482,7 @@
this.checkedConfigs = [];
this.showAdvance = true;
},
- removeCheckedConfig (config) {
+ removeCheckedConfig(config) {
config.isShow = true;
if (config.IsAdvanced) {
this.showAdvance = true;
@@ -779,7 +493,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;
}
@@ -796,20 +510,20 @@
},
- cancleMultCheck (config) {
+ cancleMultCheck(config) {
config.isMultCheck = false;
config.data.forEach(opt => {
opt.isChecked = false;
});
},
- handleSelect (key, keyPath) {
+ handleSelect(key, keyPath) {
},
- showMore (config) {
+ 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) {
@@ -818,7 +532,7 @@
conf.isMultCheck = false;
})
},
- dataSearch () {
+ dataSearch() {
console.log(this.checkedConfigs);
this.$forceUpdate();
},
@@ -1102,115 +816,6 @@
}
.title {
font-size: 18px;
- }
- .content {
- padding: 15px;
- text-align: left;
- .content-top {
- margin-bottom: 10px;
- .grid-check {
- text-align: right;
- margin-bottom: 6px;
- span {
- font-size: 20px;
- color: #cacaca;
- padding-left: 12px;
- cursor: pointer;
- &.activegongge {
- color: #3d68e1;
- }
- }
- }
- .video-area {
- display: flex;
- .info-list {
- width: 160px;
- margin-right: 10px;
- .video-name {
- cursor: pointer;
- color: #777;
- margin-bottom: 10px;
- &.current {
- color: #409eff;
- }
- i {
- padding-right: 4px;
- }
- }
- }
- .players {
- width: 960px;
- height: 540px;
- display: flex;
- flex-wrap: wrap;
- .video-item {
- background: black;
- border: 1px solid #fff;
- box-sizing: border-box;
- .currentPlayer {
- border: 2px solid aqua;
- }
- }
- }
- }
- }
- .content-bottom {
- display: flex;
- .bot-left {
- flex: 1;
- .flex-box {
- align-items: baseline;
- label {
- padding-right: 10px;
- }
- .mark-list {
- .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;
- }
- }
- }
- }
- .bot-right {
- width: 210px;
- margin-left: 10px;
- label {
- color: #999;
- padding-right: 8px;
- }
- }
- }
- }
- }
- .label-dialog {
- .el-dialog {
- width: 700px;
- .label-check {
- min-height: 400px;
- margin-bottom: 20px;
- .el-checkbox-group {
- display: flex;
- flex-wrap: wrap;
- > label {
- width: 50%;
- text-align: left;
- margin: 0;
- }
- }
- }
}
}
}
--
Gitblit v1.8.0