From a827dbadd7dcc86067cb71d36a62abbf3418a91f Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 03 十一月 2021 17:38:26 +0800
Subject: [PATCH] hyj change shuohuang
---
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 226 ++++++++++++++++++++++++++++++++++----------------------
1 files changed, 137 insertions(+), 89 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index 80053ba..a091a5f 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"
@@ -18,10 +13,23 @@
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 +44,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 +69,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"
@@ -83,6 +89,7 @@
<span>{{ option.name }}</span>
</div>
<div
+ class="option-name"
v-show="!config.isMultCheck"
@click="checkOption(config, option)"
>
@@ -91,14 +98,14 @@
</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
>
</div>
</div>
@@ -108,12 +115,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 +135,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"
@@ -480,7 +490,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]);
},
},
@@ -549,7 +558,7 @@
this.filterSearchData();
},
//浜岀骇鏌ヨ
- filterSearchData(val) {
+ filterSearchData() {
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -560,7 +569,7 @@
PageSize:
this.showType == "list" ? this.tablePageSize : this.tabPageSize,
IsDetail: this.showType == "list",
- IsFollow: this.IsFollow ,
+ IsFollow: this.IsFollow,
IsOperate: this.IsOperate,
};
let filterQuerys = [];
@@ -575,7 +584,6 @@
}
});
Object.assign(query, ...filterQuerys);
- debugger;
getlst(query).then((res) => {
if (_this.showType == "list") {
@@ -603,6 +611,10 @@
},
//涓�绾ф煡璇�
init() {
+ if (this.checkedConfigs.length) {
+ this.filterSearchData();
+ return;
+ }
let _this = this;
let query = {
KeyWord: this.keyword,
@@ -616,7 +628,6 @@
IsFollow: this.IsFollow,
IsOperate: this.IsOperate,
};
- debugger;
let filterQuerys = [];
this.checkedConfigs.forEach((config) => {
let checkedOpts = config.data.filter((option) => option.isChecked);
@@ -653,15 +664,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,13 +697,11 @@
config.showMore = false;
}
});
- // console.log(this.optionalConfigs);
});
});
},
toggleFollow(data) {
data.IsFollow == "0" ? (data.IsFollow = "1") : (data.IsFollow = "0");
- debugger
updateFollow({
id: data.id,
IsFollow: data.IsFollow,
@@ -715,7 +717,6 @@
_this.selectedVideo = data;
_this.videoDialogVisible = true;
},
- checkFollow() {},
checkType(type) {
this.showType = type;
this.filterSearchData();
@@ -746,15 +747,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) {
@@ -762,6 +759,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) {
@@ -842,7 +858,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; //姣旇緝鏄惁灏忎簬鏈�灏忓楂�
@@ -861,9 +877,10 @@
<style lang="scss">
.search-for-video-analyze {
- //padding: 20px 30px;
//鍑烘í鍚戞粴鍔ㄦ潯
- padding: 20px 40px;
+ padding: 25px 33px;
+ background-color: #fff;
+ margin: 33px;
.flex-box {
display: flex;
}
@@ -872,11 +889,34 @@
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,
+ .el-input-group__prepend {
+ background-color: #2d52d7;
+ color: #fff;
+ border: 1px solid #2d52d7;
+ padding: 0 16px;
+
+ white-space: nowrap;
+ font-size: 18px;
}
}
.checked-config {
@@ -885,18 +925,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;
@@ -920,14 +960,19 @@
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: 110px;
text-align: left;
- background: #f3f3f3;
- color: rgb(133, 133, 133);
- background: #ecf0fc;
+ color: #2d52d7;
+ font-weight: bold;
+ font-size: 14px;
+ .icon {
+ font-size: 14px;
+ margin-right: 10px;
+ }
}
.options-wrap {
flex: 1;
@@ -940,8 +985,15 @@
padding: 10px 20px;
height: 20px;
line-height: 20px;
- &:hover {
- color: #6486e7;
+ .option-name {
+ padding: 0 8px;
+ color: rgba(66, 82, 119, 1);
+ }
+ &:hover > .option-name {
+ outline: 1px solid #a8b7ee;
+ padding: 0 8px;
+ background: #e2e7f9;
+ color: #2d52d7;
}
.el-checkbox {
padding-right: 6px;
@@ -949,7 +1001,15 @@
}
}
.btns {
- margin: 20px 0;
+ margin: 12px 0;
+ .el-button--mini {
+ padding: 6px
+ 17px
+;
+ font-size: 12px;
+ border-radius: 4px
+;
+}
}
}
.right-btns {
@@ -958,34 +1018,36 @@
user-select: none;
justify-content: flex-end;
.more {
- margin-top: 6px;
+ margin-top: 7px;
padding: 0px 6px;
- border: 1px solid #ccc;
+
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;
+ height: 23px;
+ line-height: 23px;
+ padding: 0px 12px;
+ border: 1px solid #d7dce7;
border-radius: 2px;
- &:hover {
- color: #7695ec;
- border-color: #7695ec;
- }
- &.checked {
- color: #409eff;
- border-color: #409eff;
- }
+ color: #ee4e6e;
+ // &:hover {
+ // color: #7695ec;
+ // border-color: #7695ec;
+ // }
+ // &.checked {
+ // color: #409eff;
+ // border-color: #409eff;
+ // }
}
}
.el-menu.el-menu--horizontal {
@@ -993,8 +1055,6 @@
}
.config-submenu {
.el-menu--horizontal {
- //max-width: 700px;
- //overflow-x: auto;
left: 20px !important;
& > ul {
flex-wrap: wrap;
@@ -1071,10 +1131,6 @@
margin: 0 -30px;
margin-bottom: -30px;
padding: 0;
- // .el-row {
- // display: flex;
- // flex-wrap: wrap;
- // }
.el-table__row {
cursor: pointer;
}
@@ -1108,9 +1164,6 @@
width: 100%;
height: 100%;
object-fit: contain;
- // width: 100%;
- // max-height: 200px;
- // border-radius: 3px;
}
}
.video-info {
@@ -1186,15 +1239,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 {
@@ -1238,8 +1288,6 @@
.window-view {
width: 100%;
height: auto;
- // height: 100%;
- // min-height: 684px;
overflow: auto;
z-index: 2000;
}
--
Gitblit v1.8.0