1532 lines
63 KiB
Vue
1532 lines
63 KiB
Vue
<template>
|
||
<div class="new-search" >
|
||
<div class="search-input-all input-position" @click="stop_click">
|
||
<!-- 历史记录-->
|
||
<div class="search-history">
|
||
<i class="el-icon-time" @click="look_history" id="search-view-history"></i>
|
||
<div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
|
||
<div class="list_box_title">
|
||
<span>{{$t('search.recentSearch')}}</span>
|
||
<i class="el-icon-close" @click="localStorage_display=!localStorage_display" id="search-close-history"></i>
|
||
</div>
|
||
<div class="list_box_content" v-if="history_once.length>0">
|
||
<ul>
|
||
<li v-for="(val,ind) in history_once" @click="select_history(ind,$event)" :key="ind" :id="'search-history-pick-'+ind">
|
||
<span v-for="(item,key) in val" :key="key">
|
||
<span class="name">{{item.name}}: </span>
|
||
<span class="value">{{item.val+' '}}</span>
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="list_box_clear">
|
||
<span v-if="history_once.length>0" @click="clear_history" id="search-clear-history">{{other.clearReSearch}}</span>
|
||
<span v-else class="no_historyList">{{$t('search.noRecentSearch')}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 搜索框-->
|
||
<div class="input-center-box" id="input-center-box">
|
||
<ul class="sreach_fixe_left" id="search-ul">
|
||
<li class="selectinfo_box" v-if="select_list.length>0" v-for="(val,ind) in select_list" :key="ind" @click="update_sreach(ind,$event)">
|
||
<div class="select_condition">
|
||
{{val.name}}
|
||
</div>
|
||
<div class="select_content" v-if="val.val && ind!=sreach_num">
|
||
<span :style="val.id==7?'min-width:260px':''">{{val.valString ? val.valString : val.val}}</span>
|
||
<i class="el-icon-close" @click="close_selcet_list(ind,$event)"></i>
|
||
</div>
|
||
<div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
|
||
<input type="text" autocomplete="off" id="sreach_input" v-model="input_sreach" @keyup="enter(val.name, $event)" @click="stop_click">
|
||
<div class="select_info_list" v-if="val.type == 'select'">
|
||
<ul>
|
||
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="select_info_list" v-if="val.type == 'selectString'">
|
||
<ul>
|
||
<li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="select_info_list" v-if="val.type == 'dc'">
|
||
<ul>
|
||
<li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
|
||
</ul>
|
||
</div>
|
||
<div class="select_info_list" v-if="val.type == 'asset'">
|
||
<ul>
|
||
<li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 新增日志模块action下拉选择 -->
|
||
<div class="select_info_list" v-if="val.type == 'selectAction'">
|
||
<ul>
|
||
<li v-for="(item,key) in actionSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.value,$event)">{{item.value}}</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 新增protocol下拉选择 -->
|
||
<div class="select_info_list" v-if="val.type == 'selectType'">
|
||
<ul>
|
||
<li v-for="(item,key) in schemaTypeSelect" :key="key" @click="tr_selectTypeInfo(item)">{{item.value}}</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 新增protocol二层下拉 -->
|
||
<div class="select_info_list" v-if="TypeSelect.length!=0&&val.type == 'selectType'&&secondShow">
|
||
<ul>
|
||
<li v-for="(item,key) in TypeSelect" :key="key" @click="tr_selectProtocolInfo(item)">{{item.name}}</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 时间计划-->
|
||
<div class="select_info_list" v-if="val.type == 'select'&&val.id==5">
|
||
<ul>
|
||
<li v-for="item in schlist" @click="selectSul(item.name)">{{item.name}}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<el-date-picker
|
||
v-model="timeFrame"
|
||
type="datetimerange"
|
||
range-separator="To"
|
||
start-placeholder="Start Time"
|
||
end-placeholder="End Time"
|
||
@change="changeDate"
|
||
:class="dataBackG?'':'dataBackG'"
|
||
v-if="ind==sreach_num&&val.id==7"
|
||
>
|
||
</el-date-picker>
|
||
</li>
|
||
<!-- 最开始的input框-->
|
||
<li class="select_input" v-if="change_sreach_show">
|
||
<input type="text" @click="read_input" v-model="no_condition" @keyup="enter_one" id="one-input" @keydown="clear_search_list" >
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
<div v-show="clearSearchShow" class="clear-search" @click="clear_input">
|
||
<i class="el-icon-circle-close"></i>
|
||
</div>
|
||
<div :class="input_list?'input_list none':'input_list'" @click="stop_click" id="input_list">
|
||
<ul>
|
||
<li v-for="(val,ind) in searchLabelList" v-if="val.name!='Protocol'" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
|
||
<span>{{val.name}}</span>
|
||
</li>
|
||
<!--<li v-for="(val,ind) in searchLabelList" v-if="val.name=='Protocol'" @click="select_type(val.name,ind,val.id,val.type,val.label,val.disabled)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
|
||
<span>{{val.name}}</span>
|
||
</li>-->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<button @click="select" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light float-right" id="search-input-search"><i class="el-icon-search"></i></button>
|
||
<!--<div class="new-search-btn" @click="select">
|
||
<i class="el-icon-search"></i>
|
||
</div>-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import searchSelectInfo from "./searchSelectInfo"; //搜索框组件--下拉框内容
|
||
export default {
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
clearSearchShow: false,
|
||
select_conditionsName:'',
|
||
selectInfoList: searchSelectInfo,
|
||
select_title: '',
|
||
other: '',
|
||
localStorage_display: true,
|
||
input_list: true,
|
||
change_sreach_show: true,
|
||
select_list: [], //当前的搜索条件和值
|
||
historyList: [],
|
||
actionSelect:[],
|
||
dcSelect: [], //数据中心
|
||
assetSelect: [], //资产
|
||
schemaTypeSelect:[], //日志检索Protocol下拉菜单
|
||
TypeSelect:[],//Protocol二层下拉菜单
|
||
secondShow:'',//二层显示控制
|
||
input_sreach: '',
|
||
sreach_num: 0,
|
||
searchLabelList: [ //下拉列表里的选项
|
||
{id: 0, name: this.$t('search.searchTip'), icon: 'el-icon-search'},
|
||
],
|
||
bool: false,
|
||
no_condition: '',
|
||
//历史记录列表
|
||
history_once: [],
|
||
name:"",
|
||
id:"",
|
||
schedata:{
|
||
name:'',
|
||
isValid:1,
|
||
pageSize:30,
|
||
pageNo:1
|
||
},
|
||
schlist:[],
|
||
timeFrame: [new Date(new Date() - 1 * 60 * 60 * 1000), new Date()],
|
||
dataBackG:true,
|
||
delBool : false,
|
||
searchStyleNum:-1,
|
||
isSearchNum :-1,
|
||
search_select_style_num:-1,
|
||
keyBool : false,
|
||
delnum :0,
|
||
delcriteriaBool:false,
|
||
selectInfo:false,
|
||
disabaled:true,
|
||
downBool:false
|
||
}
|
||
},
|
||
computed: {
|
||
alertListAssetId() {
|
||
return this.$store.state.assetForAlertList;
|
||
}
|
||
},
|
||
watch: {
|
||
select_list: {
|
||
//监听下拉列表
|
||
handler(newData, oldData) {
|
||
if (newData.length == 0) {
|
||
this.change_sreach_show = true;
|
||
this.clearSearchShow = false;
|
||
} else {
|
||
this.clearSearchShow = true;
|
||
}
|
||
if (this.$route.path == "/alertList") {
|
||
// 处理alertType--asset联动问题：
|
||
// 当已选alertType为asset时，将可选列表中的asset的disabled恢复为false；
|
||
// 当已选alertType不为asset时，将可选列表中的asset的disabled设为true，若有已选的asset，则删除；
|
||
let hasType = false;
|
||
for (let i = 0; i < newData.length; i++) {
|
||
if (newData[i].label == "alertType" && newData[i].valnum) { //若存在alertType，判断可选列表中是否有asset，有的话disabled置为false
|
||
hasType = true;
|
||
if (newData[i].valnum == 3) {
|
||
for (let j = 0; j < this.searchLabelList.length; j++) {
|
||
if (this.searchLabelList[j].label == 'asset') {
|
||
this.searchLabelList[j].disabled = false;
|
||
break;
|
||
}
|
||
}
|
||
break;
|
||
} else {
|
||
for (let j = 0; j < newData.length; j++) {
|
||
if (newData[j].label == "asset") {
|
||
this.close_selcet_list(j);
|
||
break;
|
||
}
|
||
}
|
||
for (let j = 0; j < this.searchLabelList.length; j++) {
|
||
if (this.searchLabelList[j].label == 'asset') {
|
||
this.searchLabelList[j].disabled = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
if (!hasType) {
|
||
for (let j = 0; j < this.searchLabelList.length; j++) {
|
||
if (this.searchLabelList[j].label == 'asset') {
|
||
this.searchLabelList[j].disabled = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
no_condition: {
|
||
handler(newData, oldData) {
|
||
if (newData != '') {
|
||
this.input_list = true
|
||
}
|
||
}
|
||
},
|
||
alertListAssetId: {
|
||
immediate: true,
|
||
handler(newData, oldData) {
|
||
if (newData && this.$route.path == '/alertList') {
|
||
setTimeout(()=>{
|
||
//
|
||
//1.条件名alertType
|
||
//
|
||
this.searchLabelList.splice(2, 1);
|
||
this.select_list.push({
|
||
name: this.$t('alert.list.type'),
|
||
id: 3,
|
||
type: 'select',
|
||
label: 'alertType',
|
||
disabled: false
|
||
});
|
||
//
|
||
//2.条件值asset
|
||
//
|
||
this.select_list.forEach(val => {
|
||
if (val.label == 'alertType') {
|
||
val.val = this.$t('alert.config.typeOption.asset');
|
||
val.valnum = 3;
|
||
//alertList页type选择asset时，可以搜索asset
|
||
if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum == 3) {
|
||
for (let i = 0; i < this.searchLabelList.length; i++) {
|
||
if (this.searchLabelList[i].label == 'asset') {
|
||
this.searchLabelList[i].disabled = false;
|
||
break;
|
||
}
|
||
}
|
||
} else if (this.$route.path == '/alertList' && val.label == 'alertType' && val.valnum != 3) {
|
||
let ind = -1;
|
||
for (let i = 0; i < this.searchLabelList.length; i++) {
|
||
if (this.searchLabelList[i].label == 'asset') {
|
||
this.searchLabelList[i].disabled = true;
|
||
break;
|
||
}
|
||
}
|
||
for (let i = 0; i < this.select_list.length; i++) {
|
||
if (this.select_list[i].label == 'asset') {
|
||
ind = i;
|
||
break;
|
||
}
|
||
}
|
||
if (ind >= 0) {
|
||
this.close_selcet_list(ind);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
//
|
||
//3.条件名asset
|
||
//
|
||
//this.input_list = false;
|
||
this.searchLabelList.splice(3, 1);
|
||
this.select_list.push({
|
||
name: this.$t('asset.asset'),
|
||
id: 11,
|
||
type: 'asset',
|
||
label: 'asset',
|
||
disabled: false
|
||
});
|
||
|
||
//
|
||
//4.条件值：指定的asset
|
||
setTimeout(()=>{
|
||
let assetHost = '';
|
||
for (let i = 0; i < this.assetSelect.length; i++) {
|
||
if (this.assetSelect[i].id == newData) {
|
||
assetHost = this.assetSelect[i].host;
|
||
}
|
||
}
|
||
this.select_list.forEach(val => {
|
||
if (val.label == 'asset') {
|
||
val.val = assetHost;
|
||
val.valnum = newData;
|
||
}
|
||
});
|
||
this.input_sreach = '';
|
||
this.sreach_num = this.select_list.length;
|
||
this.change_sreach_show = false;
|
||
this.input_list = true;
|
||
//
|
||
//5.点击搜索
|
||
//
|
||
this.select();
|
||
}, 50);
|
||
|
||
}, 100);
|
||
this.$store.commit('assetForAlertListChange', '');
|
||
}
|
||
}
|
||
}
|
||
},
|
||
props:['searchMsg','defaultItem','defaultValue'],
|
||
methods: {
|
||
// isValidIP(ip) {
|
||
// var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
|
||
// if(reg.test(ip)){
|
||
|
||
// }else{
|
||
// alert('ip格式不正确')
|
||
// }
|
||
// } ,
|
||
//点击选择protocol类型 (日志新增)
|
||
/*select_type(val, ind, id, type,label,disabled){
|
||
this.downBool = false;
|
||
this.secondShow=false;
|
||
this.searchLabelList.splice(ind, 1)
|
||
this.select_list.push({
|
||
name: val,
|
||
id:id,
|
||
type:type,
|
||
label:label,
|
||
disabled:disabled
|
||
})
|
||
this.change_sreach_show = false
|
||
this.sreach_num = this.select_list.length-1
|
||
this.input_list = !this.input_list
|
||
},*/
|
||
//dc
|
||
clearSearch() {
|
||
this.select_list = [];
|
||
},
|
||
selectObject(column, selectItem, e) {
|
||
this.stop_click(e);
|
||
this.select_list.forEach(val=>{
|
||
if (val.type == 'dc'){
|
||
val.val = selectItem.name;
|
||
val.valnum = selectItem.id;
|
||
val.valString = '';
|
||
} else if (val.type == 'asset') {
|
||
val.val = selectItem.host;
|
||
val.valnum = selectItem.id;
|
||
val.valString = '';
|
||
}
|
||
});
|
||
//this.select_list.push({type: 'dc', val: selectItem.name, valnum: selectItem.id});
|
||
this.input_sreach = '';
|
||
this.sreach_num = this.select_list.length;
|
||
this.change_sreach_show = true;
|
||
this.input_list = false;
|
||
var _this = this;
|
||
setTimeout("document.getElementById(\"one-input\").focus()", 500);
|
||
setTimeout(function () {
|
||
_this.getHeight();
|
||
});
|
||
},
|
||
//一层下拉点击
|
||
tr_selectTypeInfo(val){
|
||
this.TypeSelect=[];
|
||
val.data.length!=0?this.TypeSelect.push(val.data[0]):'';
|
||
val.data.length!=0?this.secondShow=true:''
|
||
},
|
||
//二层下拉点击
|
||
tr_selectProtocolInfo(val){
|
||
this.select_list=[];
|
||
this.select_list.push({
|
||
name: val.name,
|
||
// id:id,
|
||
type:val.type,
|
||
label:val.label,
|
||
// disabled:disabled
|
||
})
|
||
this.change_sreach_show = false
|
||
this.sreach_num = this.select_list.length-1
|
||
this.input_list = !this.input_list
|
||
// setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
|
||
var _this = this
|
||
setTimeout(function () {
|
||
_this.getHeight()
|
||
},)
|
||
},
|
||
Iskeywords(ind){
|
||
if(this.select_list[ind].id==29){
|
||
this.searchLabelList.forEach(val=>{
|
||
if(val.id==30||val.id==31||val.id==32||val.id==33){
|
||
val.disabled = false
|
||
}
|
||
})
|
||
}else if(this.select_list[ind].id==30||this.select_list[ind].id==31||this.select_list[ind].id==32||this.select_list[ind].id==33){
|
||
this.searchLabelList.forEach(val=>{
|
||
if(val.id==29){
|
||
val.disabled = false
|
||
}
|
||
})
|
||
}
|
||
},
|
||
getDcData() {
|
||
this.$get('idc', {pageNo: 1, pageSize: 999}).then(response => {
|
||
if (response.code === 200) {
|
||
this.dcSelect = response.data.list;
|
||
}
|
||
});
|
||
},
|
||
getAssetData() {
|
||
this.$get('asset', {pageNo: 1, pageSize: 999}).then(response => {
|
||
if (response.code === 200) {
|
||
this.assetSelect = response.data.list;
|
||
}
|
||
});
|
||
},
|
||
getModelData() {
|
||
this.$get('asset', {pageNo: 1, pageSize: 999}).then(response => {
|
||
if (response.code === 200) {
|
||
this.assetSelect = response.data.list;
|
||
}
|
||
});
|
||
},
|
||
//点击确认选择下拉内容
|
||
tr_selectInfo(selectLabel,value,label,e){
|
||
this.stop_click(e);
|
||
this.select_list.forEach(val=>{
|
||
if(val.label == selectLabel){
|
||
val.val = label;
|
||
val.valnum = value;
|
||
}
|
||
});
|
||
for (let i = 0; i < this.select_list.length; i++) {
|
||
if (this.select_list[i].label == selectLabel) {
|
||
this.select_list.splice(i, 1, Object.assign({}, this.select_list[i], {val: label, valnum: value}));
|
||
/*this.select_list[i].val = label;
|
||
this.select_list[i].valnum = value;*/
|
||
}
|
||
}
|
||
this.input_sreach = '';
|
||
this.sreach_num = this.select_list.length;
|
||
this.change_sreach_show = true;
|
||
this.input_list = false;
|
||
var _this = this;
|
||
setTimeout("document.getElementById(\"one-input\").focus()", 500);
|
||
setTimeout(function () {
|
||
_this.getHeight();
|
||
});
|
||
},
|
||
//点击确认value是string类型的下拉内容, param: 字段对象，选中的选项
|
||
stringSelectInfo(column, selectItem, e){
|
||
this.stop_click(e);
|
||
this.select_list.forEach(val=>{
|
||
if(val.label == column.label){
|
||
val.val = selectItem.value;
|
||
val.valString = selectItem.label;
|
||
}
|
||
});
|
||
this.input_sreach = '';
|
||
this.sreach_num = this.select_list.length;
|
||
this.change_sreach_show = true;
|
||
this.input_list = false;
|
||
var _this = this;
|
||
setTimeout("document.getElementById(\"one-input\").focus()", 500);
|
||
setTimeout(function () {
|
||
_this.getHeight();
|
||
});
|
||
},
|
||
// 点击历史记录图标
|
||
look_history(e){
|
||
this.stop_click(e);
|
||
this.localStorage_display=!this.localStorage_display;
|
||
},
|
||
backtime(t){
|
||
let myDate=new Date(t);
|
||
let nt=myDate.getFullYear()+'-'+(myDate.getMonth()>8?'':0)
|
||
+(myDate.getMonth()+1)+'-'+(myDate.getDate()>9?'':0)
|
||
+ myDate.getDate()+' '
|
||
+(myDate.getHours()>9?'':'0')+myDate.getHours()+':'
|
||
+(myDate.getMinutes()>9?'':0)+myDate.getMinutes()+':'
|
||
+(myDate.getSeconds()>9?'':0)+myDate.getSeconds();
|
||
return nt;
|
||
},
|
||
changeDate(){
|
||
this.dataBackG = false
|
||
this.change_sreach_show = true
|
||
if(this.timeFrame!=[]){
|
||
this.select_list[this.sreach_num].val = this.backtime(this.timeFrame[0])+' - '+this.backtime(this.timeFrame[1])
|
||
this.input_sreach = ''
|
||
this.sreach_num++
|
||
}
|
||
},
|
||
//选择时间计划
|
||
selectSul(name){
|
||
this.change_sreach_show = true;
|
||
this.select_list[this.sreach_num].val = name;
|
||
this.input_sreach = '';
|
||
this.sreach_num++;
|
||
this.getHeight();
|
||
},
|
||
//点击搜索
|
||
select() {
|
||
let objectInfo = {};
|
||
this.change_sreach_show = true;
|
||
this.name = '', this.id = '';
|
||
if (this.input_sreach != '') {
|
||
this.select_list[this.sreach_num].val = this.input_sreach;
|
||
this.input_sreach = '';
|
||
this.sreach_num=this.select_list.length;
|
||
}
|
||
//input有值 默认添加到name中
|
||
if (this.no_condition != '') {
|
||
let no_condition_bool = false,no_condition_str = '',route = this.$route.path
|
||
if(this.select_list.length==0){
|
||
//日志模块新增路由判断
|
||
if(route == '/Log_SecurityEventLogs'||route == '/Log_ProxyEventLogs'||route=='/Log_SesssionRecords'||route=='/Log_RadiusLogs'){
|
||
no_condition_str = 'logId';
|
||
}else if(route == '/Device_DeviceList'){
|
||
no_condition_str = 'sn';
|
||
}else if(route=='/system_PolicyConfigurationLog' || route=='/system_LoginLog'){
|
||
no_condition_str='modifyBy';
|
||
}else {
|
||
no_condition_str='name';
|
||
}
|
||
if(no_condition_str=='name'){
|
||
this.select_list.push({name: this.select_title.name, id:2, type:'input',val:this.no_condition,label:'name'});
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.id == 2){
|
||
this.searchLabelList.splice(ind,1);
|
||
}
|
||
})
|
||
}else if(no_condition_str=='modifyBy'){
|
||
this.select_list.push({name: this.select_title.Operator, id:6, type:'input',val:this.no_condition,label:'modifyBy'});
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.id == 6){
|
||
this.searchLabelList.splice(ind,1);
|
||
}
|
||
})
|
||
}else if(no_condition_str=='sn'){
|
||
this.select_list.push({name: this.select_title.SN, id:8, type:'input',val:this.no_condition,label:'sn'});
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.id == 8){
|
||
this.searchLabelList.splice(ind,1);
|
||
}
|
||
})
|
||
}else if(no_condition_str=='id'){
|
||
this.select_list.push({name: this.select_title.Policy_ID, id:1, type:'input',val:this.no_condition,label:'id'});
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.id == 1){
|
||
this.searchLabelList.splice(ind,1);
|
||
}
|
||
})
|
||
}else if(no_condition_str=='logId'){ //日志模块新增判断
|
||
this.select_list.push({ name: 'Log ID', type: 'input', label: 'Log Id', val:this.no_condition,});
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.id == 1){
|
||
this.searchLabelList.splice(ind,1);
|
||
}
|
||
})
|
||
}
|
||
this.sreach_num++;
|
||
}else {
|
||
let no_condition_bool = false,no_condition_str = '',route = this.$route.path,bool = true;
|
||
if(route == '/Log_SesssionRecords'||route == '/Log_EventLogs'){
|
||
no_condition_str = 'id';
|
||
}else if(route == '/Device_DeviceList'){
|
||
no_condition_str = 'sn';
|
||
}else if(route=='/system_PolicyConfigurationLog' || route=='/system_UserManagement' || route=='/system_LoginLog'){
|
||
no_condition_str='modifyBy';
|
||
}else {
|
||
no_condition_str='name';
|
||
}
|
||
this.select_list.forEach(val => {
|
||
if(val.label==no_condition_str){
|
||
bool = false;
|
||
val.val += ','+this.no_condition;
|
||
}
|
||
});
|
||
if(bool){
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.label == no_condition_str){
|
||
val.val = this.no_condition;
|
||
this.select_list.push(val);
|
||
this.searchLabelList.splice(ind,1);
|
||
}
|
||
});
|
||
this.sreach_num++;
|
||
}
|
||
}
|
||
this.no_condition = '';
|
||
}
|
||
let labelBool = true;
|
||
this.select_list.forEach(val=>{
|
||
if (typeof (val.val) !== 'undefined' && val.val) {
|
||
if(val.type == 'select'){
|
||
if (val.label == 'alertType' || val.label == 'promType') {
|
||
objectInfo.type = val.valnum;
|
||
} else if (val.label == 'assetState') {
|
||
objectInfo.state = val.valnum;
|
||
} else if(typeof(val.valnum) == "undefined"||val.valnum == ''){
|
||
this.selectInfoList[val.label].forEach(item=>{
|
||
if(item.label == val.val){
|
||
labelBool = false;
|
||
objectInfo[val.label] = item.value;
|
||
}
|
||
})
|
||
if(labelBool){
|
||
objectInfo[val.label] = val.val;
|
||
}
|
||
}else {
|
||
objectInfo[val.label] = val.valnum;
|
||
}
|
||
} else if(val.type == 'selectSelf'){
|
||
objectInfo[val.label] = val.valnum;
|
||
} else if(val.type == 'selectAction'){ //新增日志判断
|
||
objectInfo[val.label] = val.valnum;
|
||
} else if (val.type == 'dc') {
|
||
objectInfo.idcId = val.valnum;
|
||
} else if (val.type == 'asset' && this.$route.path == "/project") {
|
||
objectInfo.assetId = val.valnum;
|
||
} else if (val.type == 'asset' && this.$route.path == "/alertList") {
|
||
objectInfo.linkId = val.valnum;
|
||
} else {
|
||
objectInfo[val.label] = val.val;
|
||
}
|
||
}
|
||
});
|
||
this.getHeight()
|
||
//搜索完成后存储在本地历史记录中
|
||
if(this.select_list.length!=0){
|
||
if (JSON.parse(localStorage.getItem('nz-history-'+this.$route.path)) == undefined || JSON.parse(localStorage.getItem('nz-history-'+this.$route.path)) == []) {
|
||
this.historyList.unshift(this.select_list);
|
||
localStorage.setItem('nz-history-'+this.$route.path, JSON.stringify(this.historyList));
|
||
} else {
|
||
this.historyList = JSON.parse(localStorage.getItem('nz-history-'+this.$route.path));
|
||
this.historyList.unshift(this.select_list);
|
||
if (this.historyList.length > 10) {
|
||
this.historyList.length = 10;
|
||
}
|
||
localStorage.setItem('nz-history-'+this.$route.path, JSON.stringify(this.historyList));
|
||
}
|
||
}
|
||
this.input_list = true;
|
||
this.restructure_historyDate();
|
||
this.$emit("search", objectInfo);
|
||
},
|
||
//清空历史记录
|
||
clear_history() {
|
||
this.historyList = [];
|
||
this.history_once = [];
|
||
localStorage.setItem('nz-history-'+this.$route.path, JSON.stringify(this.historyList));
|
||
},
|
||
//再次点击之前的历史记录
|
||
select_history(ind,e) {
|
||
this.stop_click(e);
|
||
this.input_list = true;
|
||
this.change_sreach_show = true;
|
||
this.localStorage_display = !this.localStorage_display;
|
||
this.select_list = [];
|
||
JSON.parse(localStorage.getItem('nz-history-'+this.$route.path)).splice(ind,1);
|
||
this.select_list = JSON.parse(JSON.stringify(this.history_once[ind]));
|
||
this.sreach_num = this.select_list.length;
|
||
this.select_list.forEach(val => {
|
||
this.searchLabelList.forEach((item, index) => {
|
||
if (val.id == item.id) {
|
||
this.searchLabelList.splice(index, 1);
|
||
}
|
||
})
|
||
});
|
||
this.select()
|
||
},
|
||
// 获取历史记录 数据进行处理以便循环展示
|
||
restructure_historyDate() {
|
||
if (localStorage.getItem('nz-history-'+this.$route.path) !== undefined && localStorage.getItem('nz-history-'+this.$route.path) !== null) {
|
||
this.history_once = JSON.parse(localStorage.getItem('nz-history-'+this.$route.path));
|
||
}
|
||
},
|
||
clear_search_list(e){
|
||
var keyCode = window.event ? e.keyCode : e.which;
|
||
},
|
||
//监听输入框鼠标抬起事件
|
||
enter_one(e){
|
||
var keyCode = window.event ? e.keyCode : e.which;
|
||
if(keyCode == 40){
|
||
if(this.searchStyleNum<this.searchLabelList.length-1){
|
||
var disabledNum = 0;
|
||
this.searchLabelList.forEach(val=>{
|
||
if(val.disabled){
|
||
disabledNum++;
|
||
}
|
||
});
|
||
this.isSearchNum=this.searchStyleNum;
|
||
this.isSearchNum++;
|
||
if(!(this.searchLabelList[this.isSearchNum].disabled)){
|
||
this.searchStyleNum++;
|
||
}else {
|
||
this.searchStyleNum+=disabledNum+1;
|
||
}
|
||
}
|
||
if(this.searchStyleNum>=7){
|
||
document.getElementById('input_list').scrollTop+=28;
|
||
}
|
||
}
|
||
if(keyCode == 38){
|
||
if(this.searchStyleNum>=0){
|
||
var disabledNum = 0;
|
||
this.searchLabelList.forEach(val=>{
|
||
if(val.disabled){
|
||
disabledNum++;
|
||
}
|
||
})
|
||
this.isSearchNum=this.searchStyleNum;
|
||
if(this.isSearchNum>0){
|
||
this.isSearchNum--
|
||
}
|
||
if(!(this.searchLabelList[this.isSearchNum].disabled)){
|
||
this.searchStyleNum--
|
||
}else {
|
||
this.searchStyleNum-=disabledNum+1
|
||
}
|
||
}
|
||
if(this.searchStyleNum<=this.searchLabelList.length-8){
|
||
document.getElementById('input_list').scrollTop -= 28
|
||
}
|
||
}
|
||
if(this.no_condition==''){
|
||
if(!this.keyBool){
|
||
if(keyCode==8){
|
||
let arr = this.select_list
|
||
if(!this.delBool){
|
||
if(this.input_sreach==''){
|
||
for(var i = arr.length-1 ; i>=0 ; i--){
|
||
this.input_list = true
|
||
this.change_sreach_show = false
|
||
this.sreach_num = i
|
||
this.input_sreach = arr[i].val
|
||
setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
|
||
this.delBool = true
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (keyCode == 13) {
|
||
if(this.searchStyleNum<=0){
|
||
this.select()
|
||
}else {
|
||
let val = this.searchLabelList[this.searchStyleNum].name,
|
||
ind = this.searchStyleNum,
|
||
id= this.searchLabelList[this.searchStyleNum].id,
|
||
type= this.searchLabelList[this.searchStyleNum].type,
|
||
label= this.searchLabelList[this.searchStyleNum].label,
|
||
disabled= this.searchLabelList[this.searchStyleNum].disabled
|
||
this.searchStyleNum = -1
|
||
this.select_name(val, ind, id, type,label,disabled)
|
||
}
|
||
|
||
}
|
||
},
|
||
// input框监听是按删除还是回车
|
||
enter(val, e) {
|
||
var keyCode = window.event ? e.keyCode : e.which;
|
||
if(val == 'ID'&&keyCode == 13){
|
||
let id = /^[0-9]*$/
|
||
if (!id.test(this.input_sreach) || this.input_sreach > 2147483647) {
|
||
//如果有不正确的值 进行删除
|
||
this.input_sreach = ''
|
||
this.$message.error(this.other.delErrorId)
|
||
return false;
|
||
}
|
||
}
|
||
if(keyCode!==8){
|
||
this.delBool = false
|
||
this.delcriteriaBool = false
|
||
}
|
||
if(this.delBool){
|
||
if(keyCode==8){
|
||
if(this.input_sreach==''){
|
||
this.searchMsg.searchLabelList.forEach((val, k) => {
|
||
if (this.select_list[this.sreach_num].id == val.id) {
|
||
this.searchLabelList.splice(k + 1, 0, val)
|
||
this.Iskeywords(this.sreach_num)
|
||
}
|
||
})
|
||
this.select_list.splice(this.sreach_num, 1)
|
||
this.change_sreach_show=true
|
||
setTimeout("document.getElementById(\"one-input\").focus()", 500);
|
||
this.input_list = false
|
||
this.delBool = false
|
||
}
|
||
}
|
||
}else {
|
||
if(keyCode==8){
|
||
if(this.delcriteriaBool){
|
||
this.searchMsg.searchLabelList.forEach((val, k) => {
|
||
if (this.select_list[this.sreach_num].id == val.id) {
|
||
this.searchLabelList.splice(k + 1, 0, val)
|
||
this.Iskeywords(this.sreach_num)
|
||
}
|
||
})
|
||
this.select_list.splice(this.sreach_num, 1)
|
||
this.change_sreach_show=true
|
||
setTimeout("document.getElementById(\"one-input\").focus()", 500);
|
||
this.input_list = false
|
||
this.delcriteriaBool = false
|
||
}else {
|
||
if(this.input_sreach==''){
|
||
this.delcriteriaBool = true
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
if(keyCode == 38||keyCode == 40){
|
||
if(this.select_list[this.sreach_num].type !== 'select'){
|
||
if(this.input_sreach!==''){
|
||
this.zhezhao_click()
|
||
setTimeout("document.getElementById(\"one-input\").focus()", 500);
|
||
this.input_list = false
|
||
}
|
||
}else {
|
||
if(keyCode == 40){
|
||
this.selectInfo = true
|
||
if(this.search_select_style_num<this.selectInfoList[this.select_list[this.sreach_num].label].length-1){
|
||
this.search_select_style_num++
|
||
}
|
||
}
|
||
if(keyCode == 38){
|
||
this.selectInfo = true
|
||
if(this.search_select_style_num>=0){
|
||
this.search_select_style_num--
|
||
}
|
||
}
|
||
}
|
||
}else if(keyCode == 13) {
|
||
this.searchMsg.zheze_none = true
|
||
//回车键
|
||
if (!this.selectInfo) {
|
||
this.select()
|
||
}else {
|
||
this.selectInfo = false
|
||
this.tr_selectInfo(this.select_list[this.sreach_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].value, e)
|
||
}
|
||
}
|
||
},
|
||
// 清空已输入的搜索条件
|
||
clear_input(e) {
|
||
this.stop_click(e)
|
||
this.no_condition = ''
|
||
this.input_sreach = ''
|
||
this.select_list = []
|
||
this.searchLabelList = [{id: 0, name: 'Press Enter or click to search', icon: 'el-icon-search'},]
|
||
JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
|
||
this.searchLabelList.push(val)
|
||
})
|
||
},
|
||
//修改已有参数
|
||
update_sreach(ind,e) {
|
||
//if(this.select_list[ind].id==6||this.select_list[ind].id==28){
|
||
if(false){
|
||
this.sreach_num = ind
|
||
this.downBool = false
|
||
this.change_sreach_show = false
|
||
this.input_list = true
|
||
}else {
|
||
this.input_list = true
|
||
this.change_sreach_show = false
|
||
this.sreach_num = ind
|
||
this.input_sreach = this.select_list[ind].val
|
||
if(this.select_list[ind].type=='input'){
|
||
this.downBool = true
|
||
}else {
|
||
this.downBool = false
|
||
}
|
||
setTimeout("document.getElementById(\"sreach_input\").focus()", 50);
|
||
this.getHeight()
|
||
this.searchMsg.zheze_none = false
|
||
}
|
||
},
|
||
//删除要搜索的条件
|
||
close_selcet_list(ind, e){
|
||
if (e) {
|
||
this.stop_click(e)
|
||
}
|
||
// 处理alertType--asset联动问题：删除alertType时，将asset也删除
|
||
if (this.select_list[ind].label == 'alertType') {
|
||
for (let i = 0; i < this.select_list.length; i++) {
|
||
if (this.select_list[i].label == 'asset') {
|
||
this.close_selcet_list(i);
|
||
for (let j = 0; j < this.searchLabelList.length; j++) {
|
||
if (this.searchLabelList[j].label == 'asset') {
|
||
this.searchLabelList[j].disabled = true;
|
||
break;
|
||
}
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
this.searchMsg.searchLabelList.forEach((val, key) => {
|
||
if (this.select_list[ind].id == val.id) {
|
||
this.searchLabelList.splice(key + 1, 0, val);
|
||
|
||
this.Iskeywords(ind)
|
||
}
|
||
});
|
||
this.select_list.splice(ind, 1);
|
||
this.sreach_num--;
|
||
},
|
||
//阻止冒泡事件
|
||
stop_click(e) {
|
||
if (e) {
|
||
e.cancelBubble = true;
|
||
e.stopPropagation();
|
||
}
|
||
},
|
||
//点击遮罩层
|
||
zhezhao_click() {
|
||
if(this.input_sreach!=''){
|
||
if(!this.searchMsg.zheze_none){
|
||
if (this.input_sreach!='') {
|
||
this.change_sreach_show = true
|
||
let IDsplit,
|
||
id = /^[0-9]*$/,
|
||
bool = true
|
||
if (this.select_list[this.sreach_num].id == 1) {
|
||
//id==1 判断是不是搜索ID 如果是ID 会出现搜索多个ID 分割ID
|
||
IDsplit = this.input_sreach.split(',')
|
||
//循环分割出来的ID 判断输入的每个ID是否正确
|
||
for (let i = IDsplit.length - 1; i >= 0; i--) {
|
||
if (!id.test(IDsplit[i]) || IDsplit[i] > 2147483647) {
|
||
//如果有不正确的值 进行删除
|
||
IDsplit.splice(i, 1)
|
||
this.$message.error(this.other.delErrorId)
|
||
}
|
||
if (IDsplit[i] == '') {
|
||
IDsplit.splice(i, 1)
|
||
}
|
||
}
|
||
this.input_sreach = ''
|
||
//从新拼接ID内容
|
||
IDsplit.forEach(val => {
|
||
this.input_sreach += val + ','
|
||
})
|
||
this.input_sreach = this.input_sreach.substr(0, this.input_sreach.length - 1)
|
||
if(this.input_sreach!=''){
|
||
this.select_list[this.sreach_num].val = this.input_sreach
|
||
this.input_sreach = ''
|
||
this.sreach_num++
|
||
this.sreach_num = this.select_list.length
|
||
}else {
|
||
this.sreach_num = 0
|
||
this.change_sreach_show = false
|
||
}
|
||
}else {
|
||
this.select_list[this.sreach_num].val = this.input_sreach
|
||
this.input_sreach = ''
|
||
this.sreach_num = this.select_list.length
|
||
}
|
||
}else {
|
||
let Bool = false
|
||
this.select_list.forEach(val=>{
|
||
if(val.val==''||val.val==undefined){
|
||
Bool = true
|
||
}
|
||
})
|
||
if(Bool){
|
||
this.sreach_num = this.select_list.length-1
|
||
}else {
|
||
this.sreach_num = this.select_list.length
|
||
}
|
||
|
||
}
|
||
if (this.no_condition != '') {
|
||
this.change_sreach_show = true
|
||
if(this.select_list.length==0){
|
||
this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'name'})
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.id == 2){
|
||
this.searchLabelList.splice(ind,1)
|
||
}
|
||
})
|
||
this.sreach_num++
|
||
}else {
|
||
let bool = true
|
||
this.select_list.forEach(val => {
|
||
if(val.id==2){
|
||
bool = false
|
||
val.val += ','+this.no_condition
|
||
}
|
||
})
|
||
if(bool){
|
||
this.select_list.push({name: 'Name', id:2, type:'input',val:this.no_condition,label:'name'})
|
||
this.searchLabelList.forEach((val,ind)=>{
|
||
if(val.id == 2){
|
||
this.searchLabelList.splice(ind,1)
|
||
}
|
||
})
|
||
this.sreach_num++
|
||
}
|
||
}
|
||
this.no_condition = ''
|
||
this.sreach_num = this.select_list.length
|
||
}
|
||
setTimeout("document.getElementById(\"one-input\").focus()", 500);
|
||
this.input_list = !this.input_list
|
||
var _this = this
|
||
setTimeout(function () {
|
||
_this.getHeight()
|
||
},)
|
||
this.searchMsg.zheze_none = true
|
||
}
|
||
}
|
||
|
||
},
|
||
//点击搜索框 显示搜索类型
|
||
read_input(e) {
|
||
e.cancelBubble = true;
|
||
e.stopPropagation();
|
||
this.getHeight()
|
||
this.input_list = !this.input_list
|
||
},
|
||
//点击选择 搜索类型
|
||
select_name(val, ind, id, type,label,disabled) {
|
||
// if(id==43||id==45||id==48){ //根据id判断是否开启ip验证
|
||
// this.select_conditionsName=true
|
||
// }
|
||
if(type=='input'){
|
||
this.downBool = true;
|
||
}else {
|
||
this.downBool = false;
|
||
}
|
||
this.no_condition = '';
|
||
this.searchMsg.zheze_none = false;
|
||
if(!disabled){
|
||
if (ind == 0) {
|
||
this.select()
|
||
}else if(id == 7){
|
||
this.searchLabelList.splice(ind, 1)
|
||
this.select_list.push({
|
||
name: val,
|
||
id:id,
|
||
type:type,
|
||
label:label,
|
||
disabled:disabled
|
||
})
|
||
this.change_sreach_show = false
|
||
this.input_list = !this.input_list
|
||
}else if(id==29){
|
||
this.searchLabelList.splice(ind, 1)
|
||
this.select_list.push({
|
||
name: val,
|
||
id:id,
|
||
type:type,
|
||
label:label,
|
||
disabled:disabled
|
||
})
|
||
this.change_sreach_show = false
|
||
this.sreach_num = this.select_list.length-1
|
||
this.input_list = !this.input_list
|
||
setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
|
||
this.searchLabelList.forEach(val=>{
|
||
if(val.id==30||val.id==31||val.id==32||val.id==33){
|
||
val.disabled = true
|
||
}
|
||
})
|
||
|
||
}else if(id==30||id==31||id==32||id==33){
|
||
this.searchLabelList.splice(ind, 1)
|
||
this.select_list.push({
|
||
name: val,
|
||
id:id,
|
||
type:type,
|
||
label:label,
|
||
disabled:disabled
|
||
})
|
||
this.change_sreach_show = false
|
||
this.sreach_num = this.select_list.length-1
|
||
this.input_list = !this.input_list
|
||
setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
|
||
this.searchLabelList.forEach(val=>{
|
||
if(val.id==29){
|
||
val.disabled = true
|
||
}
|
||
})
|
||
}else {
|
||
this.searchLabelList.splice(ind, 1)
|
||
this.select_list.push({
|
||
name: val,
|
||
id:id,
|
||
type:type,
|
||
label:label,
|
||
disabled:disabled
|
||
});
|
||
this.change_sreach_show = false
|
||
this.sreach_num = this.select_list.length-1
|
||
this.input_list = !this.input_list
|
||
if(id!==6&&id!==28){
|
||
setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
|
||
}
|
||
}
|
||
var _this = this
|
||
setTimeout(function () {
|
||
_this.getHeight()
|
||
},)
|
||
|
||
}
|
||
},
|
||
// 判断输入框的高度
|
||
getHeight(){
|
||
if(document.getElementById('search-ul').clientHeight<24||document.getElementById('input-center-box').clientHeight<24){
|
||
document.getElementById('input-center-box').style.height = 27+'px'
|
||
document.getElementById('search-ul').style.height = 21+"px"
|
||
}
|
||
},
|
||
chlick_sreach(e) {
|
||
this.stop_click(e)
|
||
this.searchMsg.zheze_none = false
|
||
},
|
||
// 时间计划
|
||
schelistget(){
|
||
this.schlist = []
|
||
this.$get("/schedule", this.schedata).then(data => {
|
||
if (data.code == 200) {
|
||
this.schlist = data.data.list
|
||
}
|
||
})
|
||
|
||
},
|
||
},
|
||
mounted() {
|
||
this.defaultItem ? this.select_list.push({name:this.defaultItem,label:this.defaultItem}) : '';
|
||
this.defaultValue != '' ? this.no_condition=this.defaultValue:'';
|
||
this.restructure_historyDate()
|
||
if(this.$route.path=='/Objects_Objects'){
|
||
this.schelistget()
|
||
}
|
||
if (this.$route.path == '/promServer') {
|
||
this.getDcData();
|
||
}
|
||
if (this.$route.path == '/project' || this.$route.path == '/alertList') {
|
||
this.getAssetData();
|
||
}
|
||
if (this.$route.path == '/asset') {
|
||
this.getModelData();
|
||
}
|
||
JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
|
||
if(val.name=='Protocol'){
|
||
this.schemaTypeSelect=val.doc.data
|
||
}
|
||
if(val.prop=='common_action'){
|
||
this.actionSelect=val.doc.data
|
||
}
|
||
this.actionSelect.forEach((item)=>{
|
||
item.id=item.code;
|
||
item.label=val.label;
|
||
item.name=val.label;
|
||
});
|
||
this.searchLabelList.push(val);
|
||
});
|
||
var _this = this;
|
||
document.onkeydown=function(event) {
|
||
var e = event || window.event || arguments.callee.caller.arguments[0];
|
||
if(e.keyCode==27){
|
||
_this.close_search(e)
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
.new-search{
|
||
display: flex;
|
||
position: relative;
|
||
line-height: 25px;
|
||
border-radius: 4px;
|
||
border: 1px solid #D8D8D8;
|
||
/*box-shadow: inset 0 0 5px 0 rgba(184,184,184,0.80);*/
|
||
}
|
||
.new-search .nz-btn {
|
||
box-shadow: 0 0 1px 1px #d8d8d8;
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
.new-search .search-input-all{
|
||
width: 240px;
|
||
background-color: $content-right-background-color;
|
||
color: rgba(0,0,0,.55);
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border-bottom-left-radius: 5px;
|
||
border-top-left-radius: 5px;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
}
|
||
input {
|
||
background-color: $content-right-background-color;
|
||
}
|
||
.search-input-all .btn-retract{
|
||
padding: 0px 4px;
|
||
text-align: center;
|
||
}
|
||
.search-input-all .search-history{
|
||
padding: 0px 7px;
|
||
height: 16px;
|
||
line-height: 16px;
|
||
text-align: center;
|
||
border-right: 1px solid #e5e5e5;
|
||
margin-top: 4px;
|
||
position: relative;
|
||
}
|
||
.search-input-all .input-center-box{
|
||
flex: 1;
|
||
height: 100%;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
}
|
||
.input-center-box::-webkit-scrollbar {/*滚动条整体样式*/
|
||
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
||
height: 6px;
|
||
}
|
||
.input-center-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
|
||
border-radius: 3px;
|
||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
background: rgba(0,0,0,0.2);
|
||
}
|
||
.input-center-box::-webkit-scrollbar-track {/*滚动条里面轨道*/
|
||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
border-radius: 0;
|
||
background: rgba(0,0,0,0.1);
|
||
}
|
||
.search-input-all .clear-search{
|
||
padding: 0 5px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
}
|
||
.dataBackG{
|
||
background: #f0f0f0;
|
||
}
|
||
.none{
|
||
display: none !important;
|
||
}
|
||
.new-search-btn {
|
||
padding: 0 4px;
|
||
cursor: pointer;
|
||
}
|
||
.search-text{
|
||
display: inline-block;
|
||
margin-right: 20px;
|
||
}
|
||
.sreach_box{
|
||
position: relative;
|
||
width: 80%;
|
||
height: 25px;
|
||
padding: 20px;
|
||
background: #fff;
|
||
margin: 200px auto;
|
||
}
|
||
.keyring_sreach_right_btn{
|
||
width: 18%;
|
||
height: 25px;
|
||
float: right;
|
||
line-height: 25px;
|
||
text-align: center;
|
||
border: 1px solid #dfdfdf;
|
||
}
|
||
.keyring_sreach_right_btn .right-btn-group{
|
||
float: left;
|
||
width: 80%;
|
||
border-right: 1px solid #dfdfdf;
|
||
box-sizing: border-box;
|
||
}
|
||
.keyring_sreach_right_btn .right-btn-icon{
|
||
float: left;
|
||
width: 19%;
|
||
}
|
||
.sreach_box .close_zhezhao{
|
||
position: absolute;
|
||
right: 0;
|
||
top: -50px;
|
||
width: 24px;
|
||
height: 25px;
|
||
border-radius: 50%;
|
||
background: #fff;
|
||
text-align: center;
|
||
line-height: 28px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.localStorage_list_box{
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 36px;
|
||
width: auto;
|
||
min-width:250px;
|
||
max-width: 350px;
|
||
height: auto;
|
||
border: 1px solid #dfdfdf;
|
||
background: #fff;
|
||
color: #2e2e2e;
|
||
text-align: left;
|
||
border-radius: 3px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
z-index: 9999;
|
||
font-size: 12px;
|
||
}
|
||
.localStorage_list_box .list_box_title{
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
position: relative;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
color: #2e2e2e;
|
||
}
|
||
.localStorage_list_box .list_box_title i{
|
||
position: absolute;
|
||
right: 10px;
|
||
}
|
||
.localStorage_list_box .list_box_content{
|
||
text-align: left;
|
||
padding: 5px 0;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #dfdfdf;
|
||
}
|
||
.localStorage_list_box ul li{
|
||
padding: 5px 10px;
|
||
line-height: 20px;
|
||
}
|
||
.localStorage_list_box ul li:hover{
|
||
background: #f0f0f0;
|
||
cursor:pointer;
|
||
}
|
||
|
||
.localStorage_list_box ul li span{
|
||
color: #2e2e2e;
|
||
}
|
||
.localStorage_list_box ul li .value{
|
||
font-weight: 600;
|
||
}
|
||
.localStorage_list_box .list_box_clear{
|
||
padding-left: 10px;
|
||
line-height: 40px;
|
||
}
|
||
.localStorage_list_box .list_box_clear:hover{
|
||
background: #f0f0f0;
|
||
cursor:pointer;
|
||
}
|
||
.input-center-box .sreach_fixe_left{
|
||
width: auto;
|
||
display: flex;
|
||
height: 100%;
|
||
min-width: 100%;
|
||
}
|
||
.sreach_list{
|
||
display: flex;
|
||
justify-content:flex-start;
|
||
height: 100%;
|
||
padding-left: 10px;
|
||
}
|
||
.sreach_fixe_left .selectinfo_box{
|
||
display: flex;
|
||
flex-shrink: 0;
|
||
width: auto;
|
||
height: auto;
|
||
margin: 3px 2px;
|
||
font-size: 12px;
|
||
}
|
||
.selectinfo_box .select_condition{
|
||
float:left;
|
||
height: 13px;
|
||
padding: 3px;
|
||
background:#f8f8f8;
|
||
line-height: 13px;
|
||
color: rgba(0,0,0,.55);
|
||
}
|
||
.selectinfo_box .select_content{
|
||
float: left;
|
||
line-height: 13px;
|
||
height: 13px;
|
||
padding: 3px;
|
||
background: #f0f0f0;
|
||
color: rgba(0,0,0,0.85);
|
||
display: flex;
|
||
}
|
||
.select_input{
|
||
height: 100%;
|
||
flex: 1;
|
||
float: left;
|
||
min-width: 100px;
|
||
}
|
||
.select_input input{
|
||
width: calc(100% - 1px);
|
||
height: 100%;
|
||
border: none;
|
||
float: left;
|
||
padding-left: 5px !important;
|
||
box-sizing: border-box;
|
||
}
|
||
.select_input input:focus {
|
||
border:none;
|
||
box-shadow:none;
|
||
}
|
||
.select_input .select_info_list{
|
||
position: absolute;
|
||
left: 100px;
|
||
top: 36px;
|
||
height: auto;
|
||
width: auto;
|
||
max-height: 240px;
|
||
padding: 5px 0;
|
||
background: #fff;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 3px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
overflow-y: auto;
|
||
z-index: 9999;
|
||
}
|
||
.select_info_list ul li{
|
||
padding: 5px 10px;
|
||
line-height: 20px;
|
||
}
|
||
.select_info_list ul li:hover{
|
||
background: #f0f0f0;
|
||
cursor: pointer;
|
||
}
|
||
.sreach_input .input{
|
||
flex: 1;
|
||
height: 100%;
|
||
padding-left: 10px !important;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
}
|
||
.sreach_input .input input{
|
||
width: 100%;
|
||
height: 100%;
|
||
border: none;
|
||
padding: 0 !important;
|
||
float: left;
|
||
}
|
||
.sreach_box input:focus {
|
||
outline: none;
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
.sreach_input input::placeholder{
|
||
color: rgba(0,0,0,0.55)
|
||
}
|
||
.input_list{
|
||
position: absolute;
|
||
left: 47px;
|
||
top: 36px;
|
||
width: auto;
|
||
max-width: 400px;
|
||
max-height: 240px;
|
||
min-width: 300px;
|
||
background: #fff;
|
||
border-radius: 3px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||
z-index: 9;
|
||
overflow-y: auto;
|
||
font-size: 12px;
|
||
}
|
||
.input_list ul{
|
||
padding: 4px 0;
|
||
}
|
||
.input_list ul li{
|
||
padding: 4px 10px;
|
||
line-height: 16px;
|
||
height: 20px;
|
||
}
|
||
.input_list ul li:hover{
|
||
background: #f0f0f0;
|
||
cursor:pointer;
|
||
}
|
||
.search-style-ind{
|
||
background: #f0f0f0;
|
||
cursor:pointer;
|
||
}
|
||
.sreach_fixe>i{
|
||
margin-right: 15px;
|
||
}
|
||
.is-disabled{
|
||
color: #C0C4CC;
|
||
cursor: not-allowed !important;
|
||
background: #fff !important;
|
||
}
|
||
li {
|
||
list-style: none;
|
||
}
|
||
</style>
|