From 196f223575c64aaf0b1b5c5f7dfdee391a6e122a Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期四, 24 六月 2021 17:31:18 +0800 Subject: [PATCH] 修复关联视频切换的bug --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 5 src/pages/shuohuangMonitorAnalyze/components/memberManage.vue | 75 +++++++++--------- src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue | 102 ++++++++----------------- 3 files changed, 74 insertions(+), 108 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue index f254def..72e613a 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/memberManage.vue @@ -232,9 +232,9 @@ <script> -import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory, uploadFile,downloadFile } from '@/api/shuohuang' +import { getShuohuangDepartTree, getOrganizeTree, getMemberList, updateMemberInfo, addMember, updateUnit, uploadMemberPic, uploadDirectory, uploadFile, downloadFile } from '@/api/shuohuang' export default { - data () { + data() { return { publicPath: process.env.BASE_URL, CLIP: 'http://192.168.20.113/', @@ -247,7 +247,7 @@ menuLeft: 0, keyword: '', gender: '', - genders: [{id:'g3',name:'鍏ㄩ儴'},{ name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }], + genders: [{ id: 'g3', name: '鍏ㄩ儴' }, { name: '鐢�', id: 'g0' }, { name: '濂�', id: 'g1' }], tableData: [], multipleTableSelection: [], PageIndex: 1, @@ -256,7 +256,7 @@ PageSize: 8, organizeData: [], checkedOrgID: '', - checkedOrgName:"", + checkedOrgName: "", organizeKeyword: '', memberEditDialogVisible: false, toggleOrganizeDialogVisible: false, @@ -274,23 +274,23 @@ batchImportTableData: [], } }, - mounted () { + mounted() { this.searchLeftTreeData(); this.getOrganizeTreeData(); //this.renderMemberTable(); }, methods: { - resetFilter(){ + resetFilter() { this.keyword = ''; this.gender = ''; this.renderMemberTable(); }, - isPhone (rule, value, callback) { + isPhone(rule, value, callback) { if (!value) { return callback() } else if (value.trim()) { - var pattern = /^1[345789]\d{9}$/ + var pattern = /^1[345789]\d{9}$/ if (pattern.test(value)) { return callback() } @@ -304,28 +304,28 @@ // return callback(new Error('杈撳叆鐨勬墜鏈哄彿閿欒')) // } }, - nodeContextMenu (e, data, node, comp) { + nodeContextMenu(e, data, node, comp) { this.showMenu = true; this.menuTop = e.pageY; this.menuLeft = e.pageX; }, - checkOrgNode (a, b, c) { + checkOrgNode(a, b, c) { this.checkedOrgID = a.id this.checkedOrgName = a.label }, - downloadExcel(){ + downloadExcel() { downloadFile().then(function (res) { // debugger - console.log(res); + console.log(res); }) }, - updateOrg () { + updateOrg() { let ids = this.multipleTableSelection.map(row => { return row.ID }); let params = { DeptID: this.checkedOrgID, - DeptName:this.checkedOrgName, + DeptName: this.checkedOrgName, Users: ids.join(',') } updateUnit(params).then(res => { @@ -341,10 +341,10 @@ }) }, - tableSelection (val) { + tableSelection(val) { this.multipleTableSelection = val; }, - memberSave () { + memberSave() { this.$refs['memberForm'].validate((valid) => { if (valid) { let params = Object.assign({ DeptID: this.curLeftTreeNode.id }, this.memberEditForm); @@ -378,15 +378,15 @@ } }) }, - delMember (member) { + delMember(member) { member.IsDel = '1'; this.memberUpdate(member); }, - editMember (member) { + editMember(member) { this.memberEditDialogVisible = true; this.memberEditForm = member; }, - memberUpdate (member) { + memberUpdate(member) { updateMemberInfo(member).then(res => { if (res.success) { this.$notify({ @@ -398,18 +398,18 @@ } }) }, - checkNode (a, b, c) { + checkNode(a, b, c) { if (a.hasOwnProperty('children')) { this.curLeftTreeNode = a; this.deptId = a.id; this.renderMemberTable(); } }, - handleTableSizeChange (size) { + handleTableSizeChange(size) { this.PageSize = size; this.renderMemberTable(); }, - renderMemberTable () { + renderMemberTable() { let _this = this; let params = { DeptID: this.deptId, @@ -423,13 +423,13 @@ _this.tableTotal = res.total; }) }, - uploadPic () { + uploadPic() { }, - uploadDirectoryTrigger () { + uploadDirectoryTrigger() { this.$refs['directoryInput'].click(); }, - importDirectory () { + importDirectory() { let _this = this; //this.$refs['directoryInput'].files //鏂囦欢澶筸ap let formData = new FormData; @@ -444,19 +444,19 @@ }) }, - handleRemove () { + handleRemove() { }, - handleExceed () { + handleExceed() { }, - batchImport () { + batchImport() { this.batchImportDialogVisible = true; }, - toggleOrganize () { + toggleOrganize() { this.toggleOrganizeDialogVisible = true; }, - uploadMemberPicture (params) { + uploadMemberPicture(params) { let param = new FormData(); param.append('file', params.file) uploadMemberPic(param).then(res => { @@ -464,7 +464,7 @@ }) }, - deepNodeChildren (node) { + deepNodeChildren(node) { var arr1 = []; var arr2 = []; if (node.ChildDept && node.ChildDept.length > 0) { @@ -493,7 +493,7 @@ } return arr1.concat(arr2) }, - getOrganizeTreeData () { + getOrganizeTreeData() { let _this = this; getOrganizeTree().then(res => { _this.organizeData = res.data.map(item => { @@ -506,7 +506,7 @@ }) }) }, - searchLeftTreeData () { + searchLeftTreeData() { let _this = this; getShuohuangDepartTree().then(res => { _this.treeData = res.data.map(item => { @@ -518,9 +518,12 @@ return obj }); this.$nextTick(() => { + if (!Object.keys(_this.curLeftTreeNode).length) { - _this.curLeftTreeNode = _this.treeData[0]; - _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]); + if (_this.treeData.length) { + _this.curLeftTreeNode = _this.treeData[0]; + _this.$refs['leftTreeNodes'].setCurrentNode(_this.treeData[0]); + } } else { _this.$refs['leftTreeNodes'].setCurrentNode(_this.curLeftTreeNode); } @@ -529,7 +532,7 @@ }) }, - addMember () { + addMember() { this.memberEditDialogVisible = true; this.memberEditForm = {}; }, diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index 991dfb2..91996a4 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue @@ -237,10 +237,9 @@ </el-table-column> <el-table-column label="澶у皬" prop="VideoSize" sortable> - <template slot-scope="scope" style="cursor: pointer"> + <template slot-scope="scope" style="cursor: pointer"> <div>{{ Math.round((+scope.row.VideoSize) / (1024*1024)) + " MB" }}</div> </template> - </el-table-column> <el-table-column label="瑙嗛鏃堕棿" prop="VideoDate" sortable></el-table-column> <!-- <el-table-column label="鍒涘缓鏃ユ湡" prop="VideoCreateDate" sortable></el-table-column> --> @@ -601,7 +600,7 @@ config.showMore = false; } }); - console.log(this.optionalConfigs); + // console.log(this.optionalConfigs); }); }); }, diff --git a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue index c72279d..841869c 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/videoAnalyze.vue @@ -14,11 +14,10 @@ </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item - v-for="(item, index) in popDownArr" + v-for="(item, index) in videoArrs" :key="index" :command="item" - >{{ item.CameraPosition }}</el-dropdown-item - > + >{{ item.CameraPosition }}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> @@ -54,9 +53,9 @@ <div class="video-name" :class="{ current: curVideo.GroupID == video.GroupID }" - @click="checkVideo(video, index)" + @click="checkVideo(video)" v-for="(video, index) in curRoomVideos" - :key="video.id" + :key="index" > <i class="el-icon-film"></i> <span>{{ video.VideoDate }}</span> @@ -69,7 +68,7 @@ class="video-item" :ref="`gridVideoItem_${index}`" v-for="(item, index) in videoWrapArr" - :key="index" + :key="item.id" > <div style="display: none"></div> <div class="currentPlayer"> @@ -89,7 +88,7 @@ class="video-item" :ref="`gridVideoItem_${index}`" v-for="(item, index) in videoWrapArr" - :key="index" + :key="item.id" @click="checkCurVideo(index)" style="position: relative" @mouseenter.stop.prevent="videoMouseEnter($event)" @@ -122,7 +121,7 @@ <el-tooltip placement="top" v-for="(item, index) in eventMarks" - :key="index" + :key="item.offset + index" > <div slot="content"> {{ getTimeStr(item.offset) }} @@ -137,11 +136,7 @@ @click="dotJump(item.offset)" ></div> </el-tooltip> - <el-tooltip - placement="top" - v-for="(item, index) in labelMarks" - :key="index" - > + <el-tooltip placement="top" v-for="(item, index) in labelMarks" :key="index"> <div slot="content"> {{ getTimeStr(item.offset) }} <br /> @@ -210,23 +205,14 @@ v-show="isUnusual == 1" type="primary" @click="addLabel(curVideo)" - >娣诲姞鏍囨敞</el-button - > + >娣诲姞鏍囨敞</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="mark" v-for="mark in curVideo.LableLst" :key="mark.ID"> <div class="time"> - <span> - {{ pad0(Math.floor(mark.Time / 60)) }}:{{ - pad0(mark.Time % 60) - }} - </span> + <span>{{ pad0(Math.floor(mark.Time / 60)) }}:{{ pad0(mark.Time % 60) }}</span> <i class="el-icon-edit" @click="editCurLabel(mark)"></i> <i class="el-icon-delete" @click="removeCurLabel(mark)"></i> </div> @@ -283,19 +269,12 @@ <div class="label-check"> <p class="label">闅愭偅闂:</p> <el-checkbox-group v-model="labelCheckedList"> - <el-checkbox - v-for="item in labelOptions" - :key="item.ID" - :label="item.ID" - >{{ item.Name }}</el-checkbox - > + <el-checkbox 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 - > + <el-button @click="submitLabelChecked" size="small" type="primary">纭畾</el-button> </div> </el-dialog> </div> @@ -375,7 +354,6 @@ setLabelTime: 0, isCheckAllVideo: 1, curRoomVideos: [], - popDownArr: [], curCamera: "", showTable: false, showLocChoise: true, @@ -414,9 +392,13 @@ }, }, mounted() { + this.renderLabelOpts(); + this.setGuid(1); + this.getCurVideos(this.videoDetails); + this.getRelatedVideos(this.videoDetails); }, destroyed() { @@ -545,12 +527,14 @@ } }, handleCommand(cmd) { + console.log(cmd) + console.log(this.$refs) + let _this = this; _this.curVideo = cmd; _this.curCamera = _this.curVideo.CameraPosition; _this.$nextTick(() => { - const a = _this.$refs[`player_${_this.curVideo.id}`] - const b = _this.$refs[`player_${_this.curVideo.id}`][0] + console.log(_this.$refs) _this.$refs[`player_${_this.curVideo.id}`][0].init(); }); }, @@ -574,7 +558,11 @@ item.marks = _this.mergeMarks(item); }); + _this.allCurVideos = res.data; + _this.curVideo = res.data.find((item) => item.id == v.id); + + _this.refreshCurVideoLabel(_this.curVideo) // 璁剧疆涓嬫媺鑿滃崟閫変腑椤� _this.curCamera = _this.curVideo.CameraPosition; @@ -591,9 +579,6 @@ _this.maxVideoTime = _this.curVideo.VideoTime; } - _this.videoArrs = res.data.filter((item) => v.GroupID == item.GroupID); - _this.allCurVideos = res.data; - console.log(_this.allCurVideos); _this.curRoomVideos = _this.allCurVideos.filter((item) => { return item.IsCab == "0"; }); @@ -606,18 +591,6 @@ }); }); }, - getRelatedVideos(video) { - let _this = this; - getRelatedVideoInfo({ GroupID: video.GroupID }).then((res) => { - res.data.forEach((item) => { - _this.popDownArr.push(item); - }); - // _this.popDownArr = res.data - if (_this.popDownArr.length) { - _this.curCamera = _this.popDownArr[0].CameraPosition; - } - }); - }, renderLabelOpts() { let _this = this; getLabelMap().then((res) => { @@ -625,36 +598,28 @@ }); }, refreshCurVideoLabel(video) { - let _this = this; - _this.popDownArr = []; - getRelatedVideoInfo({ GroupID: video.GroupID }).then((res) => { - res.data.forEach((item) => { - _this.popDownArr.push(item); - if (item.ID === video.ID) { - video.LableLst = item.LableLst; - } - }); - }); + let arr = [video] + this.videoArrs = arr.concat(this.allCurVideos.filter(v => { + return v.GroupID == video.GroupID && v.id != video.id + })) }, - checkVideo(video, index) { + checkVideo(video) { + console.log(video) this.refreshCurVideoLabel(video); this.curVideo = video; this.eventMarks = [] this.labelMarks = [] video.marks.forEach((item) => { - if (item.type == 0) { + if (item.type == 0) { this.eventMarks.push(item); } else { this.labelMarks.push(item); } }) - this.videoArrs = this.allCurVideos.filter( - (item) => video.GroupID == item.GroupID - ); this.$nextTick(() => { - const a = this.$refs[`player_${this.curVideo.id}`] this.$refs[`player_${this.curVideo.id}`][0].init(); + console.log(this.$refs) }); }, setGuid(guid) { @@ -670,7 +635,6 @@ 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 = `calc(` + 100 / guid + `%)`; this.$refs[`gridVideoItem_${i}`][0].style.height = -- Gitblit v1.8.0