From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 533 +++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 371 insertions(+), 162 deletions(-) diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue index b683cd5..ead0f1a 100644 --- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue +++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue @@ -2,13 +2,8 @@ <div class="search-for-video-analyze"> <div class="filter-area"> <div class="input-area"> - <el-input - class="search-input" - size="small" - v-model="keyword" - placeholder="璇疯緭鍏ュ徃鏈恒�佽溅娆°�佹満杞﹀彿绛夊叧閿瘝杩涜鎼滅储" - ></el-input> <el-date-picker + style="width: 350px" v-model="searchTime" type="datetimerange" size="small" @@ -16,12 +11,24 @@ range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" - align="right" ></el-date-picker> - <el-button size="small" type="primary" @click="init">鎼滅储</el-button> + <el-input + class="search-input" + size="small" + v-model="keyword" + placeholder="璇疯緭鍏ュ徃鏈恒�佽溅娆°�佹満杞﹀彿绛夊叧閿瘝" + style="width: 315px" + > + <el-button + slot="append" + icon="el-icon-search" + size="small" + @click="init" + ></el-button> + </el-input> </div> <div class="checked-config"> - <span style="margin-top: 3px">宸查�夋潯浠�:</span> + <span style="margin-top: 3px; color: #425277">宸茬瓫閫夋潯浠�:</span> <span v-show="!checkedConfigs.length" class="tip" @@ -36,11 +43,6 @@ <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> @@ -66,7 +68,10 @@ :key="index" > <template v-if="config.isShow"> - <div class="title">{{ config.title }}</div> + <div class="title"> + <span class="icon iconfont">{{ getIcon(config.title) }}</span> + <span>{{ config.title }}</span> + </div> <div class="options-wrap"> <div class="options" @@ -78,11 +83,12 @@ v-for="(option, index) in config.data" :key="index" > - <div v-show="config.isMultCheck"> + <div v-show="config.isMultCheck" class="check-name"> <el-checkbox v-model="option.isChecked"></el-checkbox> <span>{{ option.name }}</span> </div> <div + class="option-name" v-show="!config.isMultCheck" @click="checkOption(config, option)" > @@ -91,14 +97,18 @@ </div> </div> <div class="btns text-center" v-show="config.isMultCheck"> - <el-button size="mini" @click="cancleMultCheck(config)" - >鍙栨秷</el-button - > <el-button + class="sure" size="mini" type="primary" @click="checkOption(config)" >纭畾</el-button + > + <el-button + size="mini" + @click="cancleMultCheck(config)" + class="cancel" + >鍙栨秷</el-button > </div> </div> @@ -108,12 +118,12 @@ v-if="config.showMore" @click="showMore(config)" > - <span>鏇村</span> + <span>鏇村</span> <i :class=" config.isShowMore - ? 'el-icon-arrow-up' - : 'el-icon-arrow-down' + ? 'el-icon-caret-top' + : 'el-icon-caret-bottom' " ></i> </div> @@ -128,7 +138,10 @@ </template> </div> <div class="config" v-if="showAdvance"> - <div class="title">楂樼骇閫夐」</div> + <div class="title"> + <span class="icon iconfont">{{ "\ue793" }}</span> + <span>楂樼骇閫夐」</span> + </div> <div> <el-menu class="el-menu-demo" @@ -165,10 +178,11 @@ v-model="IsFollow" size="mini" @change="filterSearchData" + style="width: 120px" > <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> @@ -176,6 +190,7 @@ v-model="IsOperate" size="mini" @change="filterSearchData" + style="width: 120px" > <el-option value label="鍏ㄩ儴"></el-option> <el-option value="0" label="鏈鐞�"></el-option> @@ -190,14 +205,15 @@ :class="{ current: showType == 'menu' }" @click="checkType('menu')" > - <i class="el-icon-menu"></i> + <span class="iconfont icon"> </span> </div> <div - class="type" + class="type list" :class="{ current: showType == 'list' }" @click="checkType('list')" > - <i class="el-icon-s-operation"></i> + <span class="iconfont icon"></span> + <!-- <i class="el-icon-s-operation"></i> --> </div> </div> </div> @@ -245,13 +261,13 @@ v-for="(label, index) in data.LableLst" :key="index" > - {{ - label.Desc + - (index == data.LableLst.length - 1 ? "" : "锛�") - }} + {{ label.Desc }} </span> </div> - <div v-else> + <div v-else-if="hasError(data)" class="has-error"> + <span>鏈夊紓甯�</span> + </div> + <div v-else class="no-error"> <span>鏃犲紓甯�</span> </div> <div @@ -303,9 +319,16 @@ <div class="content" v-show="showType == 'list'"> <el-table :data="tableData" + stripe fit ref="elTable" @row-click="checkVideoDetail" + :header-cell-style="{ + background: '#2D52D7', + color: '#fff', + height: '50px', + padding: 0, + }" > <el-table-column label="鍚嶇О" prop="VideoName" sortable width="500"> <template slot-scope="scope" style="cursor: pointer"> @@ -315,10 +338,16 @@ <el-table-column label="澶у皬" prop="VideoSize" sortable> <template slot-scope="scope" style="cursor: pointer"> - <div>{{ Math.round((+scope.row.VideoSize) / (1024*1024)) + " MB" }}</div> + <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="StartTime" + sortable + ></el-table-column> <!-- <el-table-column label="鍒涘缓鏃ユ湡" prop="VideoCreateDate" sortable></el-table-column> --> <el-table-column label="鎿嶄綔"> @@ -368,7 +397,7 @@ > <div slot="title" class="title"> <div class="center"> - <i class="el-icon-connection"></i> + <img src="/images/shuohuang/璺緞 414.png" alt="" /> <span>鎾斁瑙嗛</span> </div> </div> @@ -385,7 +414,7 @@ @close="eventDialogVisible = false" > <div class="title" slot="title"> - <i class="el-icon-connection"></i> + <img src="/images/shuohuang/璺緞 414.png" alt="" /> <span>{{ curEvName }}瑙嗛</span> </div> <event-videos :eventVideoArr="eventVideoArr"></event-videos> @@ -425,7 +454,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, @@ -474,7 +503,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]); }, }, @@ -545,14 +573,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], @@ -562,7 +582,7 @@ PageSize: this.showType == "list" ? this.tablePageSize : this.tabPageSize, IsDetail: this.showType == "list", - IsFollow: isFollow, + IsFollow: this.IsFollow, IsOperate: this.IsOperate, }; let filterQuerys = []; @@ -588,7 +608,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); }); }); @@ -604,6 +624,10 @@ }, //涓�绾ф煡璇� init() { + if (this.checkedConfigs.length) { + this.filterSearchData(); + return; + } let _this = this; let query = { KeyWord: this.keyword, @@ -617,7 +641,7 @@ IsFollow: this.IsFollow, IsOperate: this.IsOperate, }; - let filterQuerys = []; + let filterQuerys = []; this.checkedConfigs.forEach((config) => { let checkedOpts = config.data.filter((option) => option.isChecked); if (checkedOpts.length) { @@ -641,7 +665,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); }); }); @@ -653,15 +677,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]; @@ -693,19 +710,25 @@ config.showMore = false; } }); - // console.log(this.optionalConfigs); }); }); + }, + 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"; }, toggleFollow(data) { data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0"); updateFollow({ - id : data.id, + id: data.id, IsFollow: data.IsFollow, }).then((res) => { this.$notify({ type: "success", - message: data.IsFollow == "0"? "宸叉坊鍔犲叧娉�!":"宸插彇娑堝叧娉�!", + message: data.IsFollow == "0" ? "宸叉坊鍔犲叧娉�!" : "宸插彇娑堝叧娉�!", }); }); }, @@ -714,7 +737,6 @@ _this.selectedVideo = data; _this.videoDialogVisible = true; }, - checkFollow() {}, checkType(type) { this.showType = type; this.filterSearchData(); @@ -745,15 +767,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) { @@ -761,6 +779,25 @@ config.data.forEach((opt) => { opt.isChecked = false; }); + }, + getIcon(name) { + switch (name) { + case "鏈鸿溅鍙�": + return "\ue796"; + case "杞︽": + return "\ue795"; + case "鍖烘/涓棿绔�": + return "\ue797"; + case "閲嶇偣鍦版": + return "\ue78f"; + case "鍗曚綅": + return "\ue794"; + case "楂樼骇閫夐」": + return "\ue793"; + + default: + break; + } }, handleSelect(key, keyPath) {}, showMore(config) { @@ -841,7 +878,7 @@ 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; //姣旇緝鏄惁灏忎簬鏈�灏忓楂� @@ -860,22 +897,62 @@ <style lang="scss"> .search-for-video-analyze { - //padding: 20px 30px; - //鍑烘í鍚戞粴鍔ㄦ潯 - padding: 20px 40px; + background-color: #f4f6f9; + margin: 0 5px; + margin-bottom: 10px; + + * { + box-sizing: content-box; + color: #425277; + } + .el-input__inner { + border: 1px solid #d7dce8; + // border-color: #CCD9F0; + } .flex-box { display: flex; + height: 18px; + line-height: 18px; } .filter-area { + background: #fff; + padding: 22px 33px; + box-shadow: 0px 3px 6px#D0D7F1; + + border-radius: 10px; .input-area { display: flex; align-items: center; height: 50px; + + .el-range-editor--small .el-range-input { + font-size: 13px; + color: #7084b1; + } + .el-input__inner::placeholder { + color: #c7d0e5; + } + .el-range-editor--small .el-range-separator { + line-height: 25px; + font-size: 13px; + color: #7084b1; + } .search-input { width: 408px; } .el-date-editor { - margin: 0 20px; + margin-right: 20px; + } + .el-input-group__append { + background-color: #2d52d7; + border: 1px solid #2d52d7; + padding: 0 16px; + + white-space: nowrap; + font-size: 18px; + .el-icon-search { + color: #fff; + } } } .checked-config { @@ -884,18 +961,18 @@ margin-bottom: 10px; position: relative; .config-item { - padding-left: 10px; - margin: 0 0 5px 5px; - background: #f3f3f3; - border: 1px solid #ddd; + padding-left: 8px; + margin: 0 5px; + background: #cfd5e3; .remove { cursor: pointer; padding: 5px 5px; margin-left: 5px; + background: #e1e4ed; } &:hover { background: #fff; - border-color: #3d68e1; + outline: 1px solid #2d52d7; .remove { background: #3d68e1; color: #fff; @@ -918,15 +995,19 @@ .config { display: flex; flex-wrap: no-wrap; - cursor: pointer; - border-bottom: 1px solid #ddd; + border-bottom: 1px solid #d7dce8; .title { padding: 10px 20px; - width: 100px; + width: 105px; text-align: left; - background: #f3f3f3; - color: rgb(133, 133, 133); - background: #ecf0fc; + font-weight: bold; + span { + font-size: 14px; + color: #2d52d7; + } + .icon { + margin-right: 10px; + } } .options-wrap { flex: 1; @@ -936,11 +1017,25 @@ height: 40px; overflow: hidden; .option { - padding: 10px 20px; + padding: 10px 0px; height: 20px; line-height: 20px; - &:hover { - color: #6486e7; + min-width: 100px; + .check-name { + text-align: left; + padding-left: 10px; + } + .option-name { + padding: 0 10px; + text-align: left; + width: fit-content; + } + &:hover > .option-name { + // outline: 1px solid #a8b7ee; + background: #e2e7f9; + span { + color: #2d52d7; + } } .el-checkbox { padding-right: 6px; @@ -948,7 +1043,23 @@ } } .btns { - margin: 20px 0; + margin: 12px 0; + .el-button--mini { + padding: 6px 17px; + font-size: 12px; + border-radius: 4px; + } + .sure span, + .cancel span { + color: #fff; + } + .cancel { + background: rgba(175, 185, 208, 1); + border-color: rgba(175, 185, 208, 1); + } + .el-button + .el-button { + margin-left: 20px; + } } } .right-btns { @@ -957,33 +1068,33 @@ user-select: none; justify-content: flex-end; .more { - margin-top: 6px; + margin-top: 7px; padding: 0px 6px; - border: 1px solid #ccc; + cursor: pointer; margin-right: 10px; - width: 44px; - height: 26px; - line-height: 26px; + width: 46px; + height: 25px; + line-height: 25px; border-radius: 2px; + background: #edeff2; &:hover { color: #6486e7; } } .multCheck { - margin-top: 6px; + margin-top: 7px; width: 44px; - height: 26px; - line-height: 26px; - padding: 0px 6px; - border: 1px solid #ccc; + cursor: pointer; + height: 23px; + line-height: 23px; + padding: 0px 12px; + border: 1px solid #d7dce7; border-radius: 2px; - &:hover { - color: #7695ec; - border-color: #7695ec; + .el-icon-plus { + color: #ee4e6e; } - &.checked { - color: #409eff; - border-color: #409eff; + span { + color: #ee4e6e; } } } @@ -992,9 +1103,7 @@ } .config-submenu { .el-menu--horizontal { - //max-width: 700px; - //overflow-x: auto; - left: 20px !important; + // left: 20px !important; & > ul { flex-wrap: wrap; } @@ -1005,6 +1114,9 @@ border: none; color: #2c3e50; font-size: 12px; + padding: 0 10px; + min-width: 100px; + text-align: left; } .el-menu--popup { display: flex; @@ -1029,9 +1141,14 @@ } } .data-list { - margin-top: 20px; + margin-top: 24px; + background: #ffffff; + box-shadow: 0px 3px 6px #d0d7f1; + border-radius: 10px; + padding: 24px 33px; .header-bar { - padding-bottom: 10px; + margin-bottom: 24px; + .left { float: left; display: flex; @@ -1044,58 +1161,55 @@ display: flex; .show-type { display: flex; - .type { + .list span { font-size: 20px; - padding: 2px 5px; + } + .type { + font-size: 18px; + padding: 2px 4px 0px 4px; + border-radius: 4px; cursor: pointer; - border: 1px solid #eee; - background-color: #ecf0fc; - border-radius: 3px; - color: #777; &.menu { margin-right: 10px; + span { + font-size: 15px; + } } &.current { - border-color: #409eff; - background-color: #fff; + span { + color: #fff; + } + background-color: #2d52d7; } } } } } .content { - //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-table { + border: none; + margin-bottom: 20px; } .el-col { margin-bottom: 10px; } .card { - cursor: pointer; position: relative; text-align: left; background: #fff; - border-radius: 5px; - height: 360px; + border-radius: 0 0 5px 5px; + height: 368px; margin-bottom: 10px; + border: 1px solid#CCD9F0; &:hover { - box-shadow: 3px 2px 5px 1px rgba(0, 0, 0, 0.3); + box-shadow: 3px 3px 4px #d3def2; } .video-wrap { + cursor: pointer; border-radius: 3px; width: 100%; padding-top: 56.25%; @@ -1106,34 +1220,71 @@ top: 0; width: 100%; height: 100%; - object-fit: contain; - // width: 100%; - // max-height: 200px; - // border-radius: 3px; + object-fit: unset; } } .video-info { - padding: 10px; + padding: 14px; .base-info { > div { margin-bottom: 1px; } label { - color: #999; + color: #808dab; padding-right: 8px; + line-height: 16px; + } + span { + font-weight: bold; + color: #425277; + line-height: 16px; } } .mark-info { margin: 10px 0; color: #3d68e1; .abnormal { - color: red; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + .abnormal-label { + display: inline-block; + border: 1px solid; + border: 1px solid #bf3a3a; + border-radius: 2px; + color: #bf3a3a; + padding: 0 3px; + margin-right: 3px; + } } .event-tag { - margin-top: 10px; + margin-top: 8px; + .el-tag.el-tag--info { + background-color: #96a0b7; + border-color: #96a0b7; + color: #fff; + cursor: pointer; + height: 19px; + padding: 0 5px; + } + } + .has-error { + width: fit-content; + background: #bf3a3a; + padding: 1px 5px; + border-radius: 2px; + span { + color: #fff; + } + } + .no-error { + width: fit-content; + background: #2d52d7; + padding: 1px 5px; + border-radius: 2px; + span { + color: #fff; + } } } .tag-info { @@ -1152,54 +1303,63 @@ font-size: 20px; right: 10px; bottom: 10px; - color: #ccc; - .follow { - color: #409eff; - } } } + .el-table--striped + .el-table__body + tr.el-table__row--striped + td.el-table__cell { + background: #f4f6f9; + } .el-table { - border: 1px solid #dedede; th { background: #f5f5f5; color: #333; } - .operation { - cursor: pointer; - .star { - color: #ccc; - } - .follow { - color: #409eff; - } + th.el-table__cell > .cell { + color: #fff; + } + .el-table__row > td { + border: none; + } + th.is-leaf { + border: none; } } .pagination-center { text-align: center; margin: 0 -10px; padding: 10px 0 20px; - background: #f5f5f5; + } + } + .star { + font-size: 20px; + i { + color: #c7d0e5; + } + .follow { + color: #f90741; } } .el-dialog__wrapper { top: -22px; } .dialog-video { - // z-index: 2020 !important; .el-dialog { - width: 1180px; - // height: 893px; + width: 1340px; + top: 70px; + transform: none; } .el-dialog__body { background: #eaeaea; padding: 0; - // height: 100%; height: inherit; } .el-dialog__header { - padding: 3px; + padding: 0px; .el-dialog__headerbtn { - top: 6px; + top: 10px; + font-size: 20px; } } .title-partment { @@ -1218,17 +1378,68 @@ } } .title { - font-size: 15px; + font-size: 16px; + height: 40px; + line-height: 40px; + background: #2d52d7; + + span { + line-height: 40px; + color: #fcfcfc; + } + + img { + width: 20px; + vertical-align: middle; + margin-right: 10px; + } + } + .el-dialog__close::before { + color: #fff; } } .dialog-event { z-index: 2096 !important; + .el-dialog { width: 1000px; height: 800px; background: #efefef; .el-dialog__body { padding: 0; + } + .el-dialog__header { + padding: 0px; + .el-dialog__headerbtn { + top: 6px; + } + } + .title { + font-size: 16px; + height: 40px; + line-height: 40px; + background: #2d52d7; + + span { + line-height: 40px; + color: #fcfcfc; + } + + img { + width: 20px; + vertical-align: middle; + margin-right: 10px; + } + } + .el-dialog__close::before { + color: #fff; + &:hover { + color: #fff; + } + } + + .more-videos .top .title { + background-color: #fff; } } } @@ -1237,8 +1448,6 @@ .window-view { width: 100%; height: auto; - // height: 100%; - // min-height: 684px; overflow: auto; z-index: 2000; } -- Gitblit v1.8.0