From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001 From: zhangzengfei <zhangzengfei@smartai.com> Date: 星期三, 20 七月 2022 15:05:58 +0800 Subject: [PATCH] 修复国标配置的bug --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 327 +++++++++++++++++++++++++++++++++--------------------- 1 files changed, 198 insertions(+), 129 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index 7fbb1ab..06d8766 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue @@ -26,31 +26,40 @@ 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> - - </div> - </template>--> <span v-if="option.isChecked" class="val-show"> {{ option.name }} <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 +68,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 +125,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 +144,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 +156,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-option :value="'1'" label="鏈叧娉�"></el-option> + <el-option :value="'0'" 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 +187,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 +199,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 /> @@ -172,7 +223,7 @@ </div> <div class="flex-box"> <label>鏃堕棿:</label> - <span>{{ data.VideoDate }}</span> + <span>{{ data.StartTime }}</span> </div> <div class="flex-box"> <label>鍙告満 | 鍓徃鏈�:</label> @@ -180,22 +231,31 @@ </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-if=" hasError(data)"> + <span style="color:orangered;">鏈夊紓甯�</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 +263,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,15 +299,30 @@ ></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> </template> </el-table-column> - <el-table-column label="澶у皬" prop="VideoSize" sortable></el-table-column> - <el-table-column label="瑙嗛鏃堕棿" prop="VideoDate" sortable></el-table-column> + <el-table-column label="澶у皬" prop="VideoSize" sortable> + <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="StartTime" + sortable + ></el-table-column> <!-- <el-table-column label="鍒涘缓鏃ユ湡" prop="VideoCreateDate" sortable></el-table-column> --> <el-table-column label="鎿嶄綔"> @@ -246,11 +331,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> @@ -289,7 +376,10 @@ <span>鎾斁瑙嗛</span> </div> </div> - <video-analyze v-if="videoDialogVisible" :videoDetails="selectedVideo" /> + <video-analyze + v-if="videoDialogVisible" + :videoDetails="selectedVideo" + /> </el-dialog> <!-- </div> --> @@ -311,11 +401,9 @@ <script> import { getlstInit, - updateVideoAnalyze, + updateFollow, getlst, - getRelatedVideoInfo, getLabelMap, - delLabel, getEventVideo, } from "@/api/shuohuang"; import VideoAnalyze from "./videoAnalyze"; @@ -329,11 +417,11 @@ filters: { fixPath(str) { if (!str || str == undefined) { - return "" + return ""; } - return str.replace("/opt/vasystem", "") - } + return str.replace("/opt/vasystem", ""); + }, }, data() { return { @@ -341,7 +429,7 @@ keyword: "", IsFollow: "", searchTime: [ - new Date(2020, 0, 1, 0, 0, 0), + new Date(2021, 0, 1, 0, 0, 0), new Date(2021, 11, 31, 23, 59, 59), ], curTabPage: 1, @@ -390,7 +478,6 @@ const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); - //start.setHours(0,0,0); picker.$emit("pick", [start, end]); }, }, @@ -429,8 +516,8 @@ methods: { checkEventVideo(label) { if (label.LKGID != "") { - this.$message.warning("璇ヤ簨浠舵病鏈夌浉鍏宠仈鐨勮棰�") - return + this.$message.warning("璇ヤ簨浠舵病鏈夌浉鍏宠仈鐨勮棰�"); + return; } this.eventDialogVisible = true; @@ -444,12 +531,20 @@ ); }, closeDial() { - this.videoDialogVisible = false - this.selectedVideo = {} + this.videoDialogVisible = false; + this.selectedVideo = {}; }, handleTabSizeChange(size) { this.tabPageSize = size; this.filterSearchData(); + }, + hasError(data){ + if (!data.EventLst||data.EventLst.length==0) { + return false + } + + const t = data.EventLst.some((x) => x.state==0) + return t && data.IsOperate=="1" }, handleTableSizeChange(size) { this.tablePageSize = size; @@ -461,14 +556,6 @@ //浜岀骇鏌ヨ filterSearchData() { let _this = this; - let isFollow = ""; - if (this.IsFollow === "") { - isFollow = ""; - } else if (!!this.IsFollow) { - isFollow = "1"; - } else { - isFollow = "0"; - } let query = { KeyWord: this.keyword, StartDate: this.searchTime[0], @@ -478,7 +565,7 @@ PageSize: this.showType == "list" ? this.tablePageSize : this.tabPageSize, IsDetail: this.showType == "list", - IsFollow: isFollow, + IsFollow: this.IsFollow , IsOperate: this.IsOperate, }; let filterQuerys = []; @@ -498,14 +585,13 @@ if (_this.showType == "list") { _this.tableTotal = res.total; _this.tableData = res.data; - debugger } 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) { + label.Desc.split(",").forEach(function (d) { set.add(d); }); }); @@ -516,11 +602,16 @@ item.LableLst = lblst; return item; }); + _this.tabData } }); }, //涓�绾ф煡璇� init() { + if (this.checkedConfigs.length) { + this.filterSearchData() + return + } let _this = this; let query = { KeyWord: this.keyword, @@ -534,6 +625,18 @@ IsFollow: this.IsFollow, IsOperate: this.IsOperate, }; + 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); this.optionalConfigs = []; this.highLevelConfigs = []; getlstInit(query).then((res) => { @@ -546,7 +649,7 @@ _this.tabData = _this.tabData.map(function (item) { const set = new Set(); item.LableLst.forEach(function (label) { - label.Desc.split("锛�").forEach(function (d) { + label.Desc.split(",").forEach(function (d) { set.add(d); }); }); @@ -558,15 +661,8 @@ return item; }); } - res.filterlst.forEach((config) => { this.$set(config, "isShow", true); - // config.data = Object.keys(config.Node).map(key => { - // let obj = {}; - // obj.name = key; - // obj.id = config.Node[key] - // return obj - // }); config.data = config.Node.map((item) => { let obj = {}; obj.name = item[0]; @@ -598,33 +694,26 @@ config.showMore = false; } }); - console.log(this.optionalConfigs); }); }); }, toggleFollow(data) { - data.IsFollow = !data.IsFollow; - this.updataVideo(data); - if (data.IsFollow) { + data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0"); + updateFollow({ + id: data.id, + IsFollow: data.IsFollow, + }).then((res) => { this.$notify({ type: "success", - message: "宸叉坊鍔犲叧娉�!", + message: data.IsFollow == "0" ? "宸叉坊鍔犲叧娉�!" : "宸插彇娑堝叧娉�!", }); - } - }, - updataVideo(data) { - let _this = this; - updateVideoAnalyze(data).then((res) => { - //浜岀骇鏌ヨ }); }, - checkVideoDetail(data) { let _this = this; _this.selectedVideo = data; _this.videoDialogVisible = true; }, - checkFollow() { }, checkType(type) { this.showType = type; this.filterSearchData(); @@ -655,15 +744,11 @@ option.isChecked = true; } this.checkedConfigs.push(config); - config.isShow = false; config.isMultCheck = false; if (config.IsAdvanced) { this.showAdvance = false; } - // this.$nextTick(() => { - // this.$set(config, 'isShow', false) - // }) }, cancleMultCheck(config) { @@ -672,7 +757,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 @@ -727,43 +812,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; + }; + }; }, }, }; @@ -771,7 +855,6 @@ <style lang="scss"> .search-for-video-analyze { - //padding: 20px 30px; //鍑烘í鍚戞粴鍔ㄦ潯 padding: 20px 40px; .flex-box { @@ -903,8 +986,6 @@ } .config-submenu { .el-menu--horizontal { - //max-width: 700px; - //overflow-x: auto; left: 20px !important; & > ul { flex-wrap: wrap; @@ -981,10 +1062,6 @@ margin: 0 -30px; margin-bottom: -30px; padding: 0; - // .el-row { - // display: flex; - // flex-wrap: wrap; - // } .el-table__row { cursor: pointer; } @@ -1018,9 +1095,6 @@ width: 100%; height: 100%; object-fit: contain; - // width: 100%; - // max-height: 200px; - // border-radius: 3px; } } .video-info { @@ -1096,15 +1170,12 @@ top: -22px; } .dialog-video { - // z-index: 2020 !important; .el-dialog { width: 1180px; - // height: 893px; } .el-dialog__body { background: #eaeaea; padding: 0; - // height: 100%; height: inherit; } .el-dialog__header { @@ -1148,8 +1219,6 @@ .window-view { width: 100%; height: auto; - // height: 100%; - // min-height: 684px; overflow: auto; z-index: 2000; } -- Gitblit v1.8.0