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
|
|
allowClear
|
|
@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' && type !== 'alarmAnalysis'">
|
|
<a-form-model-item label="Name">
|
|
<a-select
|
|
:value="queryParams.names"
|
|
mode="multiple"
|
|
placeholder="select..."
|
|
:maxTagCount="1"
|
|
show-arrow
|
|
allowClear
|
|
: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
|
|
allowClear
|
|
: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="375px" v-if="type === 'analysisMonitor'">
|
|
<a-form-model-item label="Data Sources">
|
|
<j-dict-select-tag
|
|
placeholder="select..."
|
|
:value="queryParams.sources"
|
|
dict-code="alarm_analyse_rule_source"
|
|
modeType="multiple"
|
|
@change="onSourceChange"
|
|
/>
|
|
<!-- <a-select style="width:180px"
|
|
:value="queryParams.sources"
|
|
mode="multiple"
|
|
placeholder="select..."
|
|
:maxTagCount="1"
|
|
show-arrow
|
|
allowClear
|
|
: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) {
|
|
console.log(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;
|
|
}
|
|
</style> |