From c7eebdfc2fb2de3f81aab9d14c1190e20e70ea9f Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@iotlink.com> Date: 星期五, 18 六月 2021 17:16:06 +0800 Subject: [PATCH] 修复朔黄视频底图路径 --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 500 +++++++++++++++++++++++++++++++++---------------------- 1 files changed, 302 insertions(+), 198 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index 23901ef..012a5df 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue @@ -26,15 +26,9 @@ 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> @@ -46,25 +40,17 @@ <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"> @@ -73,41 +59,23 @@ :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=" @@ -130,11 +98,7 @@ <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" @@ -148,8 +112,8 @@ :key="ind" :index="index + '-' + ind" @click="checkOption(config, option)" - >{{ option.name }}</el-menu-item - > + class="highlevel-option" + >{{ option.name }}</el-menu-item> </el-submenu> </el-menu> </div> @@ -160,22 +124,14 @@ <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> @@ -191,11 +147,7 @@ > <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> @@ -203,17 +155,10 @@ </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-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 /> + <img :src="data.VideoCover | fixPath" alt /> </div> <div class="video-info"> <div class="base-info"> @@ -235,47 +180,38 @@ </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 > + <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" - >{{ label.Event }}</el-tag - > + style="margin-right: 5px; margin-bottom: 5px" + @click="checkEventVideo(label)" + >{{ 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="[data.IsFollow ? 'follow' : '', 'el-icon-star-off']" - ></i> + <i class="iconfont" :class="[data.IsFollow ? 'follow' : '', 'iconguanzhu']"></i> </div> </div> </el-col> @@ -293,36 +229,28 @@ ></el-pagination> </div> <div class="content" v-show="showType == 'list'"> - <el-table :data="tableData" fit ref="elTable"> + <el-table :data="tableData" fit ref="elTable" @row-click="checkVideoDetail"> <el-table-column label="鍚嶇О" prop="VideoName" sortable width="500"> - <template slot-scope="scope"> - <div style="cursor: pointer" @click="checkVideoDetail(scope.row)"> - {{ scope.row.VideoName }} - </div> + <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="UpdatedAt" - sortable - ></el-table-column> - <el-table-column - label="鍒涘缓鏃ユ湡" - prop="CreatedAt" - 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"> - <i - class="el-icon-star-off" - @click="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> </template> </el-table-column> @@ -338,10 +266,22 @@ :total="tableTotal" ></el-pagination> </div> + <!-- + + v-drag v-resize + + --> + <!-- <div > --> + <!-- :modal="false" --> <el-dialog + v-drag + v-resize class="dialog-video" :visible="videoDialogVisible" - @close="videoDialogVisible = false" + @close="closeDial" + :close-on-click-modal="false" + :destroy-on-close="true" + :modal-append-to-body="false" > <div slot="title" class="title"> <div class="center"> @@ -349,7 +289,20 @@ <span>鎾斁瑙嗛</span> </div> </div> - <video-analyze :videoDetails="selectedVideo" /> + <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" /> + </el-dialog> + <!-- </div> --> + + <el-dialog + class="dialog-event" + :visible="eventDialogVisible" + @close="eventDialogVisible = false" + > + <div class="title" slot="title"> + <i class="el-icon-connection"></i> + <span>{{ curEvName }}瑙嗛</span> + </div> + <event-videos :eventVideoArr="eventVideoArr"></event-videos> </el-dialog> </div> </div> @@ -363,29 +316,38 @@ getRelatedVideoInfo, getLabelMap, delLabel, - editLabel, + getEventVideo, } from "@/api/shuohuang"; import VideoAnalyze from "./videoAnalyze"; - +import EventVideos from "./eventVideos"; export default { name: "SearchMain", components: { VideoAnalyze, + EventVideos, + }, + filters: { + fixPath(str) { + if (!str || str == undefined) { + return "" + } + + return str.replace("/opt/vasystem", "") + } }, 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), + new Date(2021, 11, 31, 23, 59, 59), ], curTabPage: 1, curTablePage: 1, tabPageSize: 8, - pageSizes: [2, 8, 12, 24], + pageSizes: [8, 12, 24], tabTotal: 0, tablePageSize: 8, tableTotal: 0, @@ -442,48 +404,15 @@ 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: [], }; }, watch: { @@ -498,6 +427,21 @@ this.init(); }, methods: { + 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; + } + ); + }, + closeDial() { + this.videoDialogVisible = false + this.selectedVideo = {} + }, handleTabSizeChange(size) { this.tabPageSize = size; this.filterSearchData(); @@ -552,7 +496,20 @@ } else { _this.tabTotal = res.total; _this.tabData = res.data; - + _this.tabData = _this.tabData.map(function (item) { + const set = new Set(); + item.LableLst.forEach(function (label) { + label.Desc.split("锛�").forEach(function (d) { + set.add(d); + }); + }); + const lblst = []; + set.forEach(function (d) { + lblst.push({ Desc: d }); + }); + item.LableLst = lblst; + return item; + }); } }); }, @@ -580,21 +537,20 @@ } else { _this.tabTotal = res.total; _this.tabData = res.data; - // debugger - _this.tabData = _this.tabData.map(function (item) { - const set =new Set() + _this.tabData = _this.tabData.map(function (item) { + 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) => { @@ -662,7 +618,7 @@ _this.selectedVideo = data; _this.videoDialogVisible = true; }, - checkFollow() {}, + checkFollow() { }, checkType(type) { this.showType = type; this.filterSearchData(); @@ -710,7 +666,7 @@ opt.isChecked = false; }); }, - handleSelect(key, keyPath) {}, + handleSelect(key, keyPath) { }, showMore(config) { config.isShowMore = !config.isShowMore; this.$refs[`options${config.id}`][0].style.height = config.isShowMore @@ -731,12 +687,87 @@ 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 + } + } + }, + }, }; </script> <style lang="scss"> .search-for-video-analyze { - padding: 20px 30px; + //padding: 20px 30px; + //鍑烘í鍚戞粴鍔ㄦ潯 + padding: 20px 40px; .flex-box { display: flex; } @@ -799,6 +830,8 @@ width: 100px; text-align: left; background: #f3f3f3; + color: rgb(133, 133, 133); + background: #ecf0fc; } .options-wrap { flex: 1; @@ -830,23 +863,25 @@ justify-content: flex-end; .more { margin-top: 6px; - padding: 0px 12px; + padding: 0px 6px; border: 1px solid #ccc; margin-right: 10px; - width: 48px; + width: 44px; height: 26px; line-height: 26px; + border-radius: 2px; &:hover { color: #6486e7; } } .multCheck { margin-top: 6px; - width: 48px; + width: 44px; height: 26px; line-height: 26px; - padding: 0px 12px; + padding: 0px 6px; border: 1px solid #ccc; + border-radius: 2px; &:hover { color: #7695ec; border-color: #7695ec; @@ -873,6 +908,8 @@ height: 40px; line-height: 40px; border: none; + color: #2c3e50; + font-size: 12px; } .el-menu--popup { display: flex; @@ -880,6 +917,13 @@ li.el-menu-item { display: inline-block; min-width: auto; + } + } + .highlevel-option { + font-size: 12px; + color: #2c3e50; + &:hover { + color: #6486e7; } } } @@ -892,8 +936,7 @@ .data-list { margin-top: 20px; .header-bar { - padding-bottom: 5px; - border-bottom: 1px solid #ddd; + padding-bottom: 10px; .left { float: left; display: flex; @@ -926,7 +969,23 @@ } } .content { - padding-top: 14px; + //padding-top: 14px; + background: #f5f5f5; + background: #fff; + margin: 0 -30px; + margin-bottom: -30px; + padding: 0; + // .el-row { + // display: flex; + // flex-wrap: wrap; + // } + .el-table__row { + cursor: pointer; + } + .el-row { + padding-top: 20px; + background: #f5f5f5; + } .el-col { margin-bottom: 10px; } @@ -934,9 +993,13 @@ cursor: pointer; position: relative; text-align: left; - border: 1px solid #dedede; + background: #fff; border-radius: 5px; - height: 350px; + height: 360px; + margin-bottom: 10px; + &:hover { + box-shadow: 3px 2px 5px 1px rgba(0, 0, 0, 0.3); + } .video-wrap { border-radius: 3px; width: 100%; @@ -958,7 +1021,7 @@ padding: 10px; .base-info { > div { - margin-bottom: 5px; + margin-bottom: 1px; } label { color: #999; @@ -970,8 +1033,11 @@ color: #3d68e1; .abnormal { color: red; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } - .event-tag{ + .event-tag { margin-top: 10px; } } @@ -1005,22 +1071,41 @@ } .operation { cursor: pointer; + .star { + color: #ccc; + } + .follow { + color: #409eff; + } } } .pagination-center { text-align: center; - margin: 10px auto; + margin: 0 -10px; + padding: 10px 0 20px; + background: #f5f5f5; } } + .el-dialog__wrapper { + top: -22px; + } .dialog-video { - z-index: 2096 !important; + // z-index: 2020 !important; .el-dialog { width: 1180px; - height: 918px; + // 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; @@ -1038,9 +1123,28 @@ } } .title { - font-size: 18px; + font-size: 15px; + } + } + .dialog-event { + z-index: 2096 !important; + .el-dialog { + width: 1000px; + height: 800px; + background: #efefef; + .el-dialog__body { + padding: 0; + } } } } } +.window-view { + width: 100%; + height: auto; + // height: 100%; + // min-height: 684px; + overflow: auto; + z-index: 2000; +} </style> \ No newline at end of file -- Gitblit v1.8.0