1293 lines
52 KiB
Vue
1293 lines
52 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"></i>
|
||
|
|
<div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
|
||
|
|
<div class="list_box_title">
|
||
|
|
<span>{{other.recentSearch}}</span>
|
||
|
|
<i class="iconfont icon-close" @click="localStorage_display=!localStorage_display"></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">
|
||
|
|
<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">{{other.clearReSearch}}</span>
|
||
|
|
<span v-else class="no_history_list">{{other.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.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" id="sreach_input" v-model="input_sreach" @keyup="enter" @click="stop_click" v-if="val.id!==6&&val.id!==28">
|
||
|
|
<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 == 'selectSelf'">
|
||
|
|
<ul>
|
||
|
|
<li v-for="(item,key) in OperatorInfo" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)">{{item.name}}</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 class="clear-search" @click="clear_input">
|
||
|
|
<i class="iconfont icon-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 selectList" 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':search_style_num==ind,'is-disabled':val.disabled}">
|
||
|
|
<span>{{val.name}}</span>
|
||
|
|
</li>
|
||
|
|
<li v-for="(val,ind) in selectList" 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':search_style_num==ind,'is-disabled':val.disabled}">
|
||
|
|
<span>{{val.name}}</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="new-search-btn" @click="select">
|
||
|
|
<i class="el-icon-search"></i>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "index",
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
select_conditionsName:'',
|
||
|
|
selectInfoList:this.$t('i18n.overall.searchList.selectInfo'),
|
||
|
|
select_title:this.$t('i18n.overall.searchList.select_title'),
|
||
|
|
other:this.$t('i18n.overall.other'),
|
||
|
|
localStorage_display: true,
|
||
|
|
input_list: true,
|
||
|
|
change_sreach_show: true,
|
||
|
|
select_list: [],
|
||
|
|
history_list: [],
|
||
|
|
actionSelect:[],
|
||
|
|
schemaTypeSelect:[], //日志检索Protocol下拉菜单
|
||
|
|
TypeSelect:[],//Protocol二层下拉菜单
|
||
|
|
secondShow:'',//二层显示控制
|
||
|
|
OperatorInfo:[],
|
||
|
|
input_sreach: '',
|
||
|
|
sreach_num: 0,
|
||
|
|
selectList: [
|
||
|
|
{id: 0, name: this.$t('overall.searchTip'), icon: 'el-icon-search'},
|
||
|
|
],
|
||
|
|
bool: false,
|
||
|
|
no_condition: '',
|
||
|
|
//历史记录列表
|
||
|
|
history_once: [],
|
||
|
|
profileName:"",
|
||
|
|
profileId:"",
|
||
|
|
schedata:{
|
||
|
|
name:'',
|
||
|
|
isValid:1,
|
||
|
|
pageSize:30,
|
||
|
|
pageNo:1
|
||
|
|
},
|
||
|
|
schlist:[],
|
||
|
|
timeFrame: [new Date(new Date() - 1 * 60 * 60 * 1000), new Date()],
|
||
|
|
dataBackG:true,
|
||
|
|
delBool : false,
|
||
|
|
search_style_num:-1,
|
||
|
|
Issearch_num :-1,
|
||
|
|
search_select_style_num:-1,
|
||
|
|
keyBool : false,
|
||
|
|
delnum :0,
|
||
|
|
delcriteriaBool:false,
|
||
|
|
selectInfo:false,
|
||
|
|
disabaled:true,
|
||
|
|
downBool:false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
select_list: {
|
||
|
|
//监听下拉列表
|
||
|
|
handler(newDate, oldDate) {
|
||
|
|
if (newDate.length == 0) {
|
||
|
|
this.change_sreach_show = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
no_condition: {
|
||
|
|
handler(newDate, oldDate) {
|
||
|
|
if (newDate != '') {
|
||
|
|
this.input_list = true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
props:['Search_msg','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.selectList.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
|
||
|
|
},
|
||
|
|
//一层下拉点击
|
||
|
|
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.selectList.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.selectList.forEach(val=>{
|
||
|
|
if(val.id==29){
|
||
|
|
val.disabled = false
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//点击确认选择下拉内容
|
||
|
|
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
|
||
|
|
}
|
||
|
|
})
|
||
|
|
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 = {
|
||
|
|
name:'',//name
|
||
|
|
profileId:'',//ID
|
||
|
|
schdule:'',//时间计划
|
||
|
|
modifyBy:'',//操作人
|
||
|
|
modifyTime:'',//操作时间
|
||
|
|
sn:'',//SN
|
||
|
|
transProto:'',//协议类型
|
||
|
|
addrType:'',//地址类型
|
||
|
|
serverIp:'',//服务器IP
|
||
|
|
clientIp:'',//客户端IP
|
||
|
|
serverPort:'',//服务器Port(后补充)
|
||
|
|
isp:'',//运营商
|
||
|
|
direction:'',//传输方向
|
||
|
|
capIp:'',//处理机IP
|
||
|
|
clientLocation:'',//客户端地址定位信息
|
||
|
|
serverLocation:'',//服务端地址定位信息
|
||
|
|
host:'',//主机地址
|
||
|
|
domain:'',//域名
|
||
|
|
sni:'',//sni
|
||
|
|
san:'',//san
|
||
|
|
cn:'',//cn
|
||
|
|
appId:'',//app
|
||
|
|
protocolId:'',//protocol
|
||
|
|
pinningst:'',//pinningstatus
|
||
|
|
interceptState:'',//intercepted
|
||
|
|
uid:'',//Log ID
|
||
|
|
action:'',//动作
|
||
|
|
type:'',//类型
|
||
|
|
keywords:'',//对象中 keywords
|
||
|
|
subobject:'',//对象中 subobject
|
||
|
|
description:'',//对象中 description
|
||
|
|
clientIp1:'',//对象中 clientIp1
|
||
|
|
serverIp1:'',//对象中 serverIp1
|
||
|
|
clientPort1:'',//对象中 clientPort1
|
||
|
|
serverPort1:'',//对象中 serverPort1
|
||
|
|
}
|
||
|
|
this.change_sreach_show = true
|
||
|
|
this.profileName = '', this.profileId = ''
|
||
|
|
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='profileName'
|
||
|
|
}
|
||
|
|
if(no_condition_str=='profileName'){
|
||
|
|
this.select_list.push({name: this.select_title.name, id:2, type:'input',val:this.no_condition,label:'profileName'})
|
||
|
|
this.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.id == 2){
|
||
|
|
this.selectList.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.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.id == 6){
|
||
|
|
this.selectList.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.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.id == 8){
|
||
|
|
this.selectList.splice(ind,1)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else if(no_condition_str=='profileId'){
|
||
|
|
this.select_list.push({name: this.select_title.Policy_ID, id:1, type:'input',val:this.no_condition,label:'profileId'})
|
||
|
|
this.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.id == 1){
|
||
|
|
this.selectList.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.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.id == 1){
|
||
|
|
this.selectList.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 = 'profileId'
|
||
|
|
}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='profileName'
|
||
|
|
}
|
||
|
|
this.select_list.forEach(val => {
|
||
|
|
if(val.label==no_condition_str){
|
||
|
|
bool = false
|
||
|
|
val.val += ','+this.no_condition
|
||
|
|
}
|
||
|
|
})
|
||
|
|
if(bool){
|
||
|
|
this.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.label == no_condition_str){
|
||
|
|
val.val = this.no_condition
|
||
|
|
this.select_list.push(val)
|
||
|
|
this.selectList.splice(ind,1)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.sreach_num++
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.no_condition = ''
|
||
|
|
}
|
||
|
|
let labelBool = true
|
||
|
|
this.select_list.forEach(val=>{
|
||
|
|
if(val.val!==undefined&&val.val!==''){
|
||
|
|
if(val.type == 'select'){
|
||
|
|
if(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 {
|
||
|
|
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.history_list.unshift(this.select_list)
|
||
|
|
localStorage.setItem('NZ_history_'+this.$route.path, JSON.stringify(this.history_list))
|
||
|
|
} else {
|
||
|
|
this.history_list = JSON.parse(localStorage.getItem('NZ_history_'+this.$route.path))
|
||
|
|
this.history_list.unshift(this.select_list)
|
||
|
|
if (this.history_list.length > 10) {
|
||
|
|
this.history_list.length = 10
|
||
|
|
}
|
||
|
|
localStorage.setItem('NZ_history_'+this.$route.path, JSON.stringify(this.history_list))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.input_list = true
|
||
|
|
this.restructure_historyDate()
|
||
|
|
this.$emit("SearchElsea",objectInfo)
|
||
|
|
},
|
||
|
|
//清空历史记录
|
||
|
|
clear_history() {
|
||
|
|
this.history_list = []
|
||
|
|
this.history_once = []
|
||
|
|
localStorage.setItem('NZ_history_'+this.$route.path, JSON.stringify(this.history_list))
|
||
|
|
},
|
||
|
|
//再次点击之前的历史记录
|
||
|
|
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.selectList.forEach((item, index) => {
|
||
|
|
if (val.id == item.id) {
|
||
|
|
this.selectList.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.search_style_num<this.selectList.length-1){
|
||
|
|
var disabledNum = 0
|
||
|
|
this.selectList.forEach(val=>{
|
||
|
|
if(val.disabled){
|
||
|
|
disabledNum++
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.Issearch_num=this.search_style_num
|
||
|
|
this.Issearch_num++
|
||
|
|
if(!(this.selectList[this.Issearch_num].disabled)){
|
||
|
|
this.search_style_num++
|
||
|
|
}else {
|
||
|
|
this.search_style_num+=disabledNum+1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(this.search_style_num>=7){
|
||
|
|
document.getElementById('input_list').scrollTop+=28
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(keyCode == 38){
|
||
|
|
if(this.search_style_num>=0){
|
||
|
|
var disabledNum = 0
|
||
|
|
this.selectList.forEach(val=>{
|
||
|
|
if(val.disabled){
|
||
|
|
disabledNum++
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.Issearch_num=this.search_style_num
|
||
|
|
if(this.Issearch_num>0){
|
||
|
|
this.Issearch_num--
|
||
|
|
}
|
||
|
|
if(!(this.selectList[this.Issearch_num].disabled)){
|
||
|
|
this.search_style_num--
|
||
|
|
}else {
|
||
|
|
this.search_style_num-=disabledNum+1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(this.search_style_num<=this.selectList.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.search_style_num<=0){
|
||
|
|
this.select()
|
||
|
|
}else {
|
||
|
|
let val = this.selectList[this.search_style_num].name,
|
||
|
|
ind = this.search_style_num,
|
||
|
|
id= this.selectList[this.search_style_num].id,
|
||
|
|
type= this.selectList[this.search_style_num].type,
|
||
|
|
label= this.selectList[this.search_style_num].label,
|
||
|
|
disabled= this.selectList[this.search_style_num].disabled
|
||
|
|
this.search_style_num = -1
|
||
|
|
this.select_name(val, ind, id, type,label,disabled)
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// input框监听是按删除还是回车
|
||
|
|
enter(e) {
|
||
|
|
var keyCode = window.event ? e.keyCode : e.which;
|
||
|
|
if(keyCode!==8){
|
||
|
|
this.delBool = false
|
||
|
|
this.delcriteriaBool = false
|
||
|
|
}
|
||
|
|
if(this.delBool){
|
||
|
|
if(keyCode==8){
|
||
|
|
if(this.input_sreach==''){
|
||
|
|
this.Search_msg.selectListEN.forEach((val, k) => {
|
||
|
|
if (this.select_list[this.sreach_num].id == val.id) {
|
||
|
|
this.selectList.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.Search_msg.selectListEN.forEach((val, k) => {
|
||
|
|
if (this.select_list[this.sreach_num].id == val.id) {
|
||
|
|
this.selectList.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.Search_msg.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.selectList = [{id: 0, name: 'Press Enter or click to search', icon: 'el-icon-search'},]
|
||
|
|
JSON.parse(JSON.stringify(this.Search_msg.selectListEN)).forEach(val => {
|
||
|
|
this.selectList.push(val)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//修改已有参数
|
||
|
|
update_sreach(ind,e) {
|
||
|
|
if(this.select_list[ind].id==6||this.select_list[ind].id==28){
|
||
|
|
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.Search_msg.zheze_none = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
//删除要搜索的条件
|
||
|
|
close_selcet_list(ind, e){
|
||
|
|
this.stop_click(e)
|
||
|
|
this.Search_msg.selectListEN.forEach((val, key) => {
|
||
|
|
if (this.select_list[ind].id == val.id) {
|
||
|
|
this.selectList.splice(key + 1, 0, val)
|
||
|
|
this.Iskeywords(ind)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.select_list.splice(ind, 1)
|
||
|
|
this.sreach_num--
|
||
|
|
},
|
||
|
|
//阻止冒泡事件
|
||
|
|
stop_click(e) {
|
||
|
|
e.cancelBubble = true;
|
||
|
|
e.stopPropagation();
|
||
|
|
},
|
||
|
|
//点击遮罩层
|
||
|
|
zhezhao_click() {
|
||
|
|
if(this.input_sreach!=''){
|
||
|
|
if(!this.Search_msg.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:'profileName'})
|
||
|
|
this.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.id == 2){
|
||
|
|
this.selectList.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:'profileName'})
|
||
|
|
this.selectList.forEach((val,ind)=>{
|
||
|
|
if(val.id == 2){
|
||
|
|
this.selectList.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.Search_msg.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 {
|
||
|
|
if(id == 6){
|
||
|
|
this.OperatorList()
|
||
|
|
}
|
||
|
|
this.downBool = false
|
||
|
|
}
|
||
|
|
this.no_condition = ''
|
||
|
|
this.Search_msg.zheze_none = false
|
||
|
|
if(!disabled){
|
||
|
|
if (ind == 0) {
|
||
|
|
this.select()
|
||
|
|
}else if(id == 7){
|
||
|
|
this.selectList.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.selectList.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.selectList.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.selectList.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.selectList.forEach(val=>{
|
||
|
|
if(val.id==29){
|
||
|
|
val.disabled = true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else {
|
||
|
|
this.selectList.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 = 30+'px'
|
||
|
|
document.getElementById('search-ul').style.height = 24+"px"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
chlick_sreach(e) {
|
||
|
|
this.stop_click(e)
|
||
|
|
this.Search_msg.zheze_none = false
|
||
|
|
},
|
||
|
|
// 时间计划
|
||
|
|
schelistget(){
|
||
|
|
this.schlist = []
|
||
|
|
this.$get("/schedule", this.schedata).then(data => {
|
||
|
|
if (data.code == 200) {
|
||
|
|
this.schlist = data.data.list
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
//获取所有管理员信息
|
||
|
|
OperatorList(){
|
||
|
|
this.OperatorInfo = []
|
||
|
|
this.$get("/user",'').then(data => {
|
||
|
|
if (data.code == 200) {
|
||
|
|
for(let i = 0 ; i<data.data.list.length ; i++){
|
||
|
|
this.OperatorInfo.push({name:data.data.list[i].name,id:data.data.list[i].id})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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()
|
||
|
|
}
|
||
|
|
|
||
|
|
JSON.parse(JSON.stringify(this.Search_msg.selectListEN)).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.selectList.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>
|
||
|
|
|
||
|
|
.new-search{
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
box-shadow: 0px 0px 20px 0px rgba(0,0,0,.08);
|
||
|
|
line-height: 28px;
|
||
|
|
}
|
||
|
|
.new-search .search-input-all{
|
||
|
|
width: 300px;
|
||
|
|
background: #fff;
|
||
|
|
color: rgba(0,0,0,.55);
|
||
|
|
height: 28px;
|
||
|
|
line-height: 28px;
|
||
|
|
border-bottom-left-radius: 5px;
|
||
|
|
border-top-left-radius: 5px;
|
||
|
|
display: flex;
|
||
|
|
position: relative;
|
||
|
|
box-shadow: 0px 0px 20px 0px rgba(0,0,0,.08);
|
||
|
|
}
|
||
|
|
.search-input-all .btn-retract{
|
||
|
|
padding: 0px 4px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.search-input-all .search-history{
|
||
|
|
padding: 0px 10px;
|
||
|
|
height: 20px;
|
||
|
|
line-height: 20px;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.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: 28px;
|
||
|
|
padding: 20px;
|
||
|
|
background: #fff;
|
||
|
|
margin: 200px auto;
|
||
|
|
}
|
||
|
|
.keyring_sreach_right_btn{
|
||
|
|
width: 18%;
|
||
|
|
height: 28px;
|
||
|
|
float: right;
|
||
|
|
line-height: 28px;
|
||
|
|
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: 28px;
|
||
|
|
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: 16px;
|
||
|
|
padding: 3px;
|
||
|
|
background:#f8f8f8;
|
||
|
|
line-height: 16px;
|
||
|
|
color: rgba(0,0,0,.55);
|
||
|
|
}
|
||
|
|
.selectinfo_box .select_content{
|
||
|
|
float: left;
|
||
|
|
line-height: 12px;
|
||
|
|
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: 100%;
|
||
|
|
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>
|