378 lines
10 KiB
Vue
378 lines
10 KiB
Vue
<template>
|
|
<div class="search-bar">
|
|
<a-row type="flex">
|
|
<a-col flex="190px">
|
|
<a-input placeholder="search..." />
|
|
</a-col>
|
|
<a-col flex="310px" v-if="type=='alarmCenter'">
|
|
<a-form-model-item label="Type">
|
|
<a-select
|
|
:value="queryParams.types"
|
|
mode="multiple"
|
|
:maxTagCount="1"
|
|
:options="typeOptions"
|
|
show-arrow
|
|
@change="onTypeChange"
|
|
>
|
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
|
<div slot="dropdownRender" slot-scope="menu">
|
|
<v-nodes :vnodes="menu" />
|
|
<a-divider style="margin: 0;" />
|
|
<div
|
|
style="padding: 4px 12px; cursor: pointer;"
|
|
@mousedown="e => e.preventDefault()"
|
|
>
|
|
<a-checkbox v-model="allVal" @change="handleAllClickBox"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
|
|
</div>
|
|
</div>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col flex="310px" v-if="type!=='alarmCenter' && type!=='analysisMonitor'">
|
|
<a-form-model-item label="Name">
|
|
<a-select
|
|
:value="queryParams.names"
|
|
mode="multiple"
|
|
placeholder="select..."
|
|
:maxTagCount="1"
|
|
show-arrow
|
|
:options="options"
|
|
@change="onNameChange"
|
|
>
|
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
|
<div slot="dropdownRender" slot-scope="menu">
|
|
<v-nodes :vnodes="menu" />
|
|
<a-divider style="margin: 0;" />
|
|
<div
|
|
style="padding: 4px 12px; cursor: pointer;"
|
|
@mousedown="e => e.preventDefault()"
|
|
>
|
|
<a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox>
|
|
</div>
|
|
</div>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col flex="270px" v-if="type ==='analysisMonitor'">
|
|
<a-form-model-item label="Station">
|
|
<a-select style="width:180px"
|
|
:value="queryParams.stations"
|
|
mode="multiple"
|
|
placeholder="select..."
|
|
:maxTagCount="1"
|
|
:filter-option="filterOption"
|
|
show-arrow
|
|
:options="options"
|
|
@change="onStationChange"
|
|
>
|
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
|
<div slot="dropdownRender" slot-scope="menu">
|
|
<v-nodes :vnodes="menu" />
|
|
<a-divider style="margin: 0;" />
|
|
<div
|
|
style="padding: 4px 12px; cursor: pointer;"
|
|
@mousedown="e => e.preventDefault()"
|
|
>
|
|
<a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox>
|
|
</div>
|
|
</div>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col flex="310px" v-if="type ==='analysisMonitor'">
|
|
<a-form-model-item label="Data Sources">
|
|
<a-select style="width:180px"
|
|
:value="queryParams.sources"
|
|
mode="multiple"
|
|
placeholder="select..."
|
|
:maxTagCount="1"
|
|
show-arrow
|
|
:options="sourceOptions"
|
|
@change="onSourceChange"
|
|
>
|
|
<img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
|
|
<div slot="dropdownRender" slot-scope="menu">
|
|
<v-nodes :vnodes="menu" />
|
|
<a-divider style="margin: 0;" />
|
|
<div
|
|
style="padding: 4px 12px; cursor: pointer;"
|
|
@mousedown="e => e.preventDefault()"
|
|
>
|
|
<a-checkbox v-model="allVal_source" @change="handleAllClickBox_source"><span @click.prevent="handleAllClick_source">ALL</span></a-checkbox>
|
|
</div>
|
|
</div>
|
|
</a-select>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col flex="380px">
|
|
<a-form-model-item label="Alarm date">
|
|
<a-range-picker
|
|
dropdownClassName="asd"
|
|
:default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
|
|
@change="onRangeDateChange"
|
|
/>
|
|
</a-form-model-item>
|
|
</a-col>
|
|
<a-col flex="108px">
|
|
<a-button class="search-btn" type="primary" @click="onSearch">
|
|
<img src="@/assets/images/global/search.png" alt="" />
|
|
Search
|
|
</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
|
|
import moment from 'moment';
|
|
export default {
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
options: {
|
|
type: Array,
|
|
default:()=>[]
|
|
}
|
|
},
|
|
components: {
|
|
VNodes: {
|
|
functional: true,
|
|
render: (h, ctx) => ctx.props.vnodes,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
allVal: true,
|
|
allVal_name: false,
|
|
allVal_station: false,
|
|
allVal_source: false,
|
|
typeOptions: [
|
|
{
|
|
label: "Server",
|
|
value: "Server"
|
|
},
|
|
{
|
|
label: "Database",
|
|
value: "Database"
|
|
},
|
|
{
|
|
label: "E-MAIL",
|
|
value: "Email"
|
|
},
|
|
],
|
|
sourceOptions: [
|
|
{
|
|
label: "IDC",
|
|
value: "idc"
|
|
},
|
|
{
|
|
label: "ARMD",
|
|
value: "armd"
|
|
}
|
|
],
|
|
queryParams: {
|
|
types: ["Server","Database","Email"],
|
|
names: undefined,
|
|
stations: undefined,
|
|
sources: undefined,
|
|
startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
|
|
endDate: dateFormat(new Date(), 'yyyy-MM-dd')
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
moment,
|
|
handleAllClickBox(e) {
|
|
this.allVal = e.target.checked
|
|
this.setSelectVal()
|
|
},
|
|
handleAllClick(e) {
|
|
this.allVal = !this.allVal
|
|
this.setSelectVal()
|
|
},
|
|
setSelectVal() {
|
|
if (this.allVal) {
|
|
this.queryParams.types = this.typeOptions.map(item => item.value)
|
|
} else {
|
|
this.queryParams.types = []
|
|
}
|
|
},
|
|
handleAllClickBox_Name(e) {
|
|
this.allVal_name = e.target.checked
|
|
this.setSelectVal_name()
|
|
},
|
|
handleAllClick_Name(e) {
|
|
this.allVal_name = !this.allVal_name
|
|
this.setSelectVal_name()
|
|
},
|
|
setSelectVal_name() {
|
|
if (this.allVal_name) {
|
|
this.queryParams.names = this.options.map(item => item.value)
|
|
} else {
|
|
this.queryParams.names = []
|
|
}
|
|
},
|
|
handleAllClickBox_station(e) {
|
|
this.allVal_station = e.target.checked
|
|
this.setSelectVal_station()
|
|
},
|
|
handleAllClick_station(e) {
|
|
this.allVal_station = !this.allVal_station
|
|
this.setSelectVal_station()
|
|
},
|
|
setSelectVal_station() {
|
|
if (this.allVal_station) {
|
|
this.queryParams.stations = this.options.map(item => item.value)
|
|
} else {
|
|
this.queryParams.stations = []
|
|
}
|
|
},
|
|
filterOption(input, option) {
|
|
return (
|
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
);
|
|
},
|
|
handleAllClickBox_source(e) {
|
|
this.allVal_source = e.target.checked
|
|
this.setSelectVal_source()
|
|
},
|
|
handleAllClick_source(e) {
|
|
this.allVal_source = !this.allVal_source
|
|
this.setSelectVal_source()
|
|
},
|
|
setSelectVal_source() {
|
|
if (this.allVal_source) {
|
|
this.queryParams.sources = this.sourceOptions.map(item => item.value)
|
|
} else {
|
|
this.queryParams.sources = []
|
|
}
|
|
},
|
|
onTypeChange(val) {
|
|
this.queryParams.types = val
|
|
let length = this.typeOptions.length
|
|
if (val.length === length) {
|
|
this.allVal = true
|
|
} else {
|
|
this.allVal = false
|
|
}
|
|
},
|
|
onNameChange(val) {
|
|
this.queryParams.names = val
|
|
let length = this.options.length
|
|
if (val.length === length) {
|
|
this.allVal_name = true
|
|
} else {
|
|
this.allVal_name = false
|
|
}
|
|
},
|
|
onStationChange(val) {
|
|
this.queryParams.stations = val
|
|
let length = this.options.length
|
|
if (val.length === length) {
|
|
this.allVal_station = true
|
|
} else {
|
|
this.allVal_station = false
|
|
}
|
|
},
|
|
onSourceChange(val) {
|
|
this.queryParams.sources = val
|
|
let length = this.sourceOptions.length
|
|
if (val.length === length) {
|
|
this.allVal_source = true
|
|
} else {
|
|
this.allVal_source = false
|
|
}
|
|
},
|
|
onRangeDateChange(date, dateString) {
|
|
this.queryParams.startDate = dateString[0]
|
|
this.queryParams.endDate = dateString[1]
|
|
},
|
|
onSearch() {
|
|
this.$emit("search",this.queryParams)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.search-bar{
|
|
height: 50px;
|
|
border-top: 1px solid rgba(13, 235, 201, 0.3);
|
|
border-bottom: 1px solid rgba(13, 235, 201, 0.3);
|
|
margin-left: 20px;
|
|
padding: 8px 10px;
|
|
background: rgba(12, 235, 201, 0.05);
|
|
}
|
|
.ant-input{
|
|
width: 166px;
|
|
}
|
|
.ant-select{
|
|
width: 240px;
|
|
}
|
|
.ant-calendar-picker{
|
|
width: 270px;
|
|
}
|
|
.search-btn {
|
|
margin-bottom: 10px;
|
|
img {
|
|
width: 16px;
|
|
height: 17px;
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
::v-deep {
|
|
.ant-form-item {
|
|
display: flex;
|
|
margin-bottom: 0;
|
|
.ant-form-item-label,.ant-form-item-control {
|
|
line-height: 32px;
|
|
height: 32px;
|
|
}
|
|
.ant-form-item-label {
|
|
flex-shrink: 0;
|
|
margin-right: 10px;
|
|
label {
|
|
font-size: 16px;
|
|
font-family: ArialMT;
|
|
color: #ade6ee;
|
|
&::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.ant-calendar-range-picker-separator{
|
|
color: white;
|
|
}
|
|
.ant-form-item-control-wrapper {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
.ant-select {
|
|
.ant-select-arrow-icon {
|
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
&-open {
|
|
.ant-select-arrow-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
}
|
|
.ant-select-dropdown-content{
|
|
position: relative;
|
|
background: #03353f;
|
|
}
|
|
|
|
// .asd{
|
|
// .ant-calendar-range .ant-calendar-input ,
|
|
// .ant-calendar-range .ant-calendar-time-picker-input{
|
|
// color: red !important;
|
|
// background: none !important;
|
|
// }
|
|
// }
|
|
|
|
</style> |