From e8d850f8559ccd386689576961676fc924bc5421 Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期五, 25 六月 2021 14:13:10 +0800 Subject: [PATCH] 添加关注bug --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 227 +++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 151 insertions(+), 76 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index 8c72b90..d610c2f 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,7 +192,11 @@ > <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> @@ -155,7 +204,14 @@ </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 | fixPath" alt /> @@ -180,22 +236,28 @@ </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 ? "" : "锛�") + 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" @@ -203,15 +265,25 @@ :key="index" 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 == '0' ? 'follow' : '', 'iconguanzhu']" + ></i> </div> </div> </el-col> @@ -229,7 +301,12 @@ ></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"> <div>{{ scope.row.VideoName }}</div> @@ -250,11 +327,13 @@ <div class="star"> <i class="iconfont" - :class="[scope.row.IsFollow ? 'follow' : '', 'iconguanzhu']" + :class="[ + scope.row.IsFollow == '0' ? '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> @@ -293,7 +372,10 @@ <span>鎾斁瑙嗛</span> </div> </div> - <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" /> + <video-analyze + v-if="videoDialogVisible" + :videoDetails="selectedVideo" + /> </el-dialog> <!-- </div> --> @@ -315,7 +397,7 @@ <script> import { getlstInit, - updateVideoAnalyze, + updateFollow, getlst, getLabelMap, getEventVideo, @@ -331,11 +413,11 @@ filters: { fixPath(str) { if (!str || str == undefined) { - return "" + return ""; } - return str.replace("/opt/vasystem", "") - } + return str.replace("/opt/vasystem", ""); + }, }, data() { return { @@ -431,8 +513,8 @@ methods: { checkEventVideo(label) { if (label.LKGID != "") { - this.$message.warning("璇ヤ簨浠舵病鏈夌浉鍏宠仈鐨勮棰�") - return + this.$message.warning("璇ヤ簨浠舵病鏈夌浉鍏宠仈鐨勮棰�"); + return; } this.eventDialogVisible = true; @@ -446,8 +528,8 @@ ); }, closeDial() { - this.videoDialogVisible = false - this.selectedVideo = {} + this.videoDialogVisible = false; + this.selectedVideo = {}; }, handleTabSizeChange(size) { this.tabPageSize = size; @@ -500,7 +582,7 @@ if (_this.showType == "list") { _this.tableTotal = res.total; _this.tableData = res.data; - debugger + debugger; } else { _this.tabTotal = res.total; _this.tabData = res.data; @@ -605,28 +687,22 @@ }); }, toggleFollow(data) { - data.IsFollow = !data.IsFollow; - this.updataVideo(data); - if (data.IsFollow) { + data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0"); + updateFollow({ + IsFollow: data.IsFollow, + }).then((res) => { this.$notify({ type: "success", message: "宸叉坊鍔犲叧娉�!", }); - } - }, - updataVideo(data) { - let _this = this; - updateVideoAnalyze(data).then((res) => { - //浜岀骇鏌ヨ }); }, - checkVideoDetail(data) { let _this = this; _this.selectedVideo = data; _this.videoDialogVisible = true; }, - checkFollow() { }, + checkFollow() {}, checkType(type) { this.showType = type; this.filterSearchData(); @@ -674,7 +750,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 @@ -729,43 +805,42 @@ }; }, resize(el, binding, vnode) { - const dragDom = el.querySelector('.el-dialog') - dragDom.style.overflow = 'hidden' - let minWidth = 400 - let minHeight = 300 // + 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' + 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.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 + const clientX = e.clientX; // 榧犳爣鎸変笅锛岃绠楀綋鍓嶅厓绱犺窛绂诲彲瑙嗗尯鐨勮窛绂� + const disX = e.clientX - resizeEl.offsetLeft; + const disY = e.clientY - resizeEl.offsetTop; document.onmousemove = function (e) { - e.preventDefault() // 绉诲姩鏃剁鐢ㄩ粯璁や簨浠� // 閫氳繃浜嬩欢濮旀墭锛岃绠楃Щ鍔ㄧ殑璺濈 + 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' - } //鎷変几缁撴潫 + 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 - } - } + document.onmousemove = null; + document.onmouseup = null; + }; + }; }, }, }; -- Gitblit v1.8.0