From e6758ef29bd686e894b4679edf1bd88436b84148 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期三, 13 一月 2021 19:07:03 +0800
Subject: [PATCH] 分析检索/人员管理接口联调
---
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 405 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 325 insertions(+), 80 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index f1478cb..e18d1f2 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -18,7 +18,7 @@
end-placeholder="缁撴潫鏃ユ湡"
align="right"
></el-date-picker>
- <el-button size="small" type="primary" @click="dataSearch">鎼滅储</el-button>
+ <el-button size="small" type="primary" @click="init">鎼滅储</el-button>
</div>
<div class="checked-config">
<span style="margin-top:3px;">宸查�夋潯浠�:</span>
@@ -51,7 +51,7 @@
</div>
<div class="optional-config">
<div class="config" v-for="(config,index) in optionalConfigs" :key="index">
- <template v-show="config.isShow">
+ <template v-if="config.isShow">
<div class="title">{{config.title}}</div>
<div class="options-wrap">
<div
@@ -89,7 +89,7 @@
</div>
</template>
</div>
- <div class="config">
+ <div class="config" v-if="showAdvance">
<div class="title">楂樼骇閫夐」</div>
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -144,32 +144,32 @@
</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 menuList" :key="data.id">
+ <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="checkVideo(data)">
- <video src></video>
+ <div class="video-wrap" @click="checkVideoDetail(data)">
+ <img :src="CLIP+data.VideoCover" alt />
</div>
<div class="video-info">
<div class="base-info">
<div>
<label>杞﹀彿:</label>
- <span>{{data.no}}</span>
+ <span>{{data.CarNumber}}</span>
</div>
<div>
<label>杞︽:</label>
- <span>{{data.frequency}}</span>
+ <span>{{data.TrainNumber}}</span>
</div>
<div>
<label>鏃堕棿:</label>
- <span>{{data.time}}</span>
+ <span>{{data.VideoDate}}</span>
</div>
<div>
<label>鍙告満|鍓徃鏈�:</label>
- <span>{{data.driver}}</span>
+ <span>{{data.Driver1}}|{{data.Driver2}}</span>
</div>
</div>
<div class="mark-info">
- <div class="abnormal" v-if="data.markType==1">
+ <div class="abnormal" v-if="data.IsUnusual==='1'">
<span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
</div>
<div v-else>
@@ -180,32 +180,33 @@
<div class="tag" v-for="(tag,index) in data.tags" :key="index">{{tag}}</div>
</div>
</div>
- <div class="star">
- <i :class="[data.follow?'follow':'','el-icon-star-off']"></i>
+ <div class="star" @click="toggleFollow(data)">
+ <i :class="[data.IsFollow?'follow':'','el-icon-star-off']"></i>
</div>
</div>
</el-col>
</el-row>
<el-pagination
background
- @size-change="handleSizeChange"
+ @size-change="handleTabSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="curTabPage"
+ :page-sizes="pageSizes"
:page-size="tabPageSize"
- layout="total, prev, pager, next"
- :total="tabTotal">
- </el-pagination>
+ layout="total,sizes, prev, pager, next"
+ :total="tabTotal"
+ ></el-pagination>
</div>
<div class="content" v-show="showType=='list'">
<el-table :data="tableData" fit ref="elTable">
- <el-table-column label="鍚嶇О" prop="name" sortable width="500">
+ <el-table-column label="鍚嶇О" prop="VideoName" sortable width="500">
<template slot-scope="scope">
- <div style="cursor:pointer;">{{scope.row.name}}</div>
+ <div style="cursor:pointer;">{{scope.row.VideoName}}</div>
</template>
</el-table-column>
- <el-table-column label="澶у皬" prop="size" sortable></el-table-column>
- <el-table-column label="淇敼鏃ユ湡" prop="updateTime" sortable></el-table-column>
- <el-table-column label="鍒涘缓鏃ユ湡" prop="createTime" sortable></el-table-column>
+ <el-table-column label="澶у皬" prop="VideoSize" sortable></el-table-column>
+ <el-table-column label="淇敼鏃ユ湡" prop="UpdatedAt" sortable></el-table-column>
+ <el-table-column label="鍒涘缓鏃ユ湡" prop="CreatedAt" sortable></el-table-column>
<el-table-column label="鎿嶄綔">
<template>
<div class="operation">
@@ -214,15 +215,15 @@
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="tableListTotal"></el-pagination> -->
<el-pagination
- @size-change="handleSizeChange"
+ @size-change="handleTableSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="curTablePage"
:page-size="tablePageSize"
- layout="total, prev, pager, next"
- :total="tableTotal">
- </el-pagination>
+ :page-sizes="pageSizes"
+ layout="total,sizes, prev, pager, next"
+ :total="tableTotal"
+ ></el-pagination>
</div>
<el-dialog
class="dialog-video"
@@ -259,34 +260,82 @@
<i class="el-icon-film"></i>
<span>{{video.name}}</span>
</div>-->
- <div class="video-name">
+ <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>椹鹃┒瀹�</span>
- </div>
- <div class="video-name">
- <i class="el-icon-film"></i>
- <span>鏈烘埧</span>
+ <span>{{video.Event}}</span>
</div>
</div>
- <div class="players">
- <div class="video-item" v-for="(item,index) in videoWrapArr" :key="index"></div>
+ <div class="players" ref="playerWrap">
+ <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>
+ <!-- <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 style="height:28px;">
+ <div class="flex-box" style="height:28px;">
<label style="padding-right:10px;">闅愭偅闂:</label>
- <el-radio v-model="hiddenDanger" :label="1">鏃犲紓甯�</el-radio>
- <el-radio v-model="hiddenDanger" :label="2">鏈夊紓甯�</el-radio>
+ <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="hiddenDanger==2"
+ v-show="curVideo.IsUnusual==1"
type="primary"
- @click="addLabel(videoDetails)"
+ @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">
@@ -294,19 +343,19 @@
<div class="base-info">
<div>
<label>杞﹀彿:</label>
- <span>{{videoDetails.no}}</span>
+ <span>{{videoDetails.CarNumber}}</span>
</div>
<div>
<label>杞︽:</label>
- <span>{{videoDetails.frequency}}</span>
+ <span>{{videoDetails.TrainNumber}}</span>
</div>
<div>
<label>鏃堕棿:</label>
- <span>{{videoDetails.time}}</span>
+ <span>{{videoDetails.VideoDate}}</span>
</div>
<div>
<label>鍙告満|鍓徃鏈�:</label>
- <span>{{videoDetails.driver}}</span>
+ <span>{{videoDetails.Driver1}}|{{videoDetails.Driver2}}</span>
</div>
</div>
</div>
@@ -321,13 +370,12 @@
>
<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 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="delLabelChecked" size="small">鍒犻櫎</el-button>
<el-button @click="cancelLabelChecked" size="small">鍙栨秷</el-button>
- <el-button @click="submitLabelChecked(videoDetails)" size="small" type="primary">纭畾</el-button>
+ <el-button @click="submitLabelChecked()" size="small" type="primary">纭畾</el-button>
</div>
</el-dialog>
</div>
@@ -335,16 +383,18 @@
</template>
<script>
-import { getlstInit } from '@/api/shuohuang';
+import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';
export default {
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")],
curTabPage: 1,
curTablePage: 1,
tabPageSize: 8,
+ pageSizes: [2, 8, 12, 24],
tabTotal: 0,
tablePageSize: 8,
tableTotal: 0,
@@ -391,6 +441,7 @@
checkedConfigs: [],
optionalConfigs: [],
highLevelConfigs: [],
+ showAdvance: true,
fixedOneLineHeight: 40,
watch: '',
settle: '',
@@ -399,7 +450,7 @@
{ 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' }
],
- menuList: [
+ 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 }
],
@@ -407,11 +458,34 @@
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: [],
+ }
+ },
+ 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)
+
+ this.filterSearchData()
+ },
+ deep: true
}
},
mounted () {
@@ -447,32 +521,106 @@
// console.log(this.optionalConfigs);
// });
this.init();
+ this.renderLabelOpts();
},
methods: {
- handleSizeChange(){
-
+ editCurLabel (mark) {
+ let arr = [];
+ mark.forEach(label => {
+ arr.push(label.CodeID)
+ });
+ this.labelCheckedList = arr;
+ this.labelDialogVisible = true;
},
- handleCurrentChange(){
-
+ 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) {
+ debugger
+ this.tabPageSize = size;
+ this.filterSearchData()
+ },
+ handleTableSizeChange (size) {
+ this.tablePageSize = size;
+ this.filterSearchData()
+ },
+ handleCurrentChange () {
+ this.filterSearchData()
+ },
+ //浜岀骇鏌ヨ
+ filterSearchData () {
+ let _this = this;
+ let query = {
+ KeyWord: this.keyword,
+ StartDate: this.searchTime[0],
+ EndDate: this.searchTime[1],
+ PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
+ PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
+ IsDetail: this.showType == 'list'
+ };
+ 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);
+ }
+ })
+ Object.assign(query, ...filterQuerys);
+
+ getlst(query).then(res => {
+ if (_this.showType == 'list') {
+ _this.tableTotal = res.total;
+ _this.tableData = res.data;
+ } else {
+ _this.tabTotal = res.total;
+ _this.tabData = res.data;
+ }
+ })
+ },
+ //涓�绾ф煡璇�
init () {
let _this = this;
let query = {
KeyWord: this.keyword,
StartDate: this.searchTime[0],
EndDate: this.searchTime[1],
- PageIndex: this.showType=='list'?this.curTablePage:this.showType=='list',
- PageSize: this.showType=='list'?this.tablePageSize:this.tabPageSize,
- IsDetail: this.showType=='list'
+ PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
+ PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
+ IsDetail: this.showType == 'list'
};
this.optionalConfigs = [];
this.highLevelConfigs = [];
getlstInit(query).then(res => {
- debugger
- if(_this.showType=='list'){
+ if (_this.showType == 'list') {
_this.tableTotal = res.total;
- }else{
+ _this.tableData = res.data;
+ } else {
_this.tabTotal = res.total;
+ _this.tabData = res.data;
}
res.filterlst.forEach(config => {
@@ -481,8 +629,6 @@
let obj = {};
obj.name = key;
obj.id = config.Node[key]
- // item.id = item;
- // item.name = k;
return obj
});
config.id = config.ID;
@@ -509,42 +655,111 @@
});
console.log(this.optionalConfigs);
});
+
})
},
- delLabelChecked () {
-
+ toggleFollow (data) {
+ data.IsFollow = !data.IsFollow;
+ this.updataVideo(data);
+ if (data.IsFollow) {
+ this.$notify({
+ type: 'success',
+ message: '宸叉坊鍔犲叧娉�!'
+ });
+ }
},
- cancelLabelChecked () {
+ 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 (videoDetails) {
- debugger
+ addLabel (video) {
this.labelDialogVisible = true;
-
},
setGuid (guid) {
+ let _this = this;
+ // 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);
- },
- checkVideo (data) {
- this.videoDialogVisible = true;
- this.videoDetails = data;
+ 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';
+ }
+ })
+
+ },
+ 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) {
this.showType = type;
- this.init();
+ // 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 () {
+ this.checkedConfigs.forEach(config => {
+ config.isShow = true;
+ config.data.forEach(d => {
+ d.isChecked = false
+ });
+ });
this.checkedConfigs = [];
+ this.showAdvance = true;
},
removeCheckedConfig (config) {
+ config.isShow = true;
+ if (config.IsAdvanced) {
+ this.showAdvance = true;
+ }
+ config.data.forEach(d => {
+ d.isChecked = false;
+ });
let index = this.checkedConfigs.findIndex(one => one.id == config.id);
this.checkedConfigs.splice(index, 1);
},
@@ -554,12 +769,14 @@
}
this.checkedConfigs.push(config);
- //config.isShow = false;
-
- // this.dataSearch();
- this.$nextTick(() => {
- config.isShow = false;
- })
+ config.isShow = false;
+ config.isMultCheck = false;
+ if (config.IsAdvanced) {
+ this.showAdvance = false;
+ }
+ // this.$nextTick(() => {
+ // this.$set(config, 'isShow', false)
+ // })
},
@@ -785,7 +1002,8 @@
.video-wrap {
background: aliceblue;
border-radius: 3px;
- video {
+ img {
+ width: 100%;
border-radius: 3px;
}
}
@@ -882,6 +1100,7 @@
width: 160px;
margin-right: 10px;
.video-name {
+ cursor: pointer;
color: #666;
margin-bottom: 10px;
&.current {
@@ -896,10 +1115,14 @@
width: 960px;
height: 540px;
display: flex;
+ flex-wrap: wrap;
.video-item {
- flex: 1;
background: black;
border: 1px solid #fff;
+ box-sizing: border-box;
+ .currentPlayer {
+ border: 2px solid aqua;
+ }
}
}
}
@@ -908,6 +1131,28 @@
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;
+ i[class^='el-icon'] {
+ padding: 3px;
+ }
+ }
+ .label-content {
+ font-size: 13px;
+ padding: 4px 0;
+ color: #888;
+ }
+ }
+ }
}
.bot-right {
width: 210px;
--
Gitblit v1.8.0