RT_ZB/bigdata2/src/components/SearchBar/index.vue

<template>
   <div class="check-btns">
       <div class="type-check">
            <slot name="type-check">
                <el-button
                :type="displayType == '1'?'primary':'default'"
                size="mini"
                @click="checkType(1)"
                >图表</el-button>
                <el-button
                :type="displayType == '2'?'primary':'default'"
                size="mini"
                @click="checkType(2)"
                >列表</el-button>
            </slot>
       </div>
       <div class="search-box">
           <slot name="search-common">
                <el-input
                    placeholder="请输入内容"
                    size="mini"
                    clearable
                    v-model="searchVal"
                    suffix-icon="el-icon-search"
                    class="input-with-select"
                    @change="searchEquipList()"
                    >
                    <el-select
                        v-model="selectItem"
                        class="select02"
                        slot="prepend"
                        placeholder="请选择"
                        @change="selClear()">
                        <el-option label="设备ID" value="1"></el-option>
                        <el-option label="设备名" value="2"></el-option>
                    </el-select>
                </el-input>
                <el-select
                    v-model="is_online"
                    class="select01"
                    clearable
                    size="mini"
                    placeholder="请选择在线状态"
                    @change="isOnlineSelect()"
                    >
                    <el-option label="全部" value></el-option>
                    <el-option label="在线" value="1"></el-option>
                    <el-option label="离线" value="0"></el-option>
                </el-select>
            </slot>
            <slot name="search-box"></slot>
    
       </div>
   </div>
</template>

<script>
   export default {
       props: ['facilityType'],
        data(){
            return {
                displayType:1 ,
                selectItem: "1", //1设备号，2用户名
                searchVal: "",
                f_id:'',
                ename:'',
                is_online:null

            }
        },
        watch: {},
        methods:{
            checkType(i){
                this.displayType=i;
                this.$emit('fun', this.displayType)
            },
            // 搜索组合数据
            searchEquipList() {
                if (this.selectItem == 1) {
                    this.f_id = this.searchVal;
                } else if (this.selectItem == 2) {
                    this.ename = this.searchVal;
                }
                this.$emit('fun2', {f_id:this.f_id,ename:this.ename})
            },
            selClear() {
                this.searchVal = "";
                this.f_id = "";
                this.ename = "";
                this.$emit('fun2', {f_id:this.f_id,ename:this.ename})
            },
            isOnlineSelect(){
                this.$emit('fun3', this.is_online)
            }
        },
        mounted() {
            // 判断当前页面是否为杀虫灯，如果为杀虫灯就先显示列表模式
            if (this.facilityType == 'scd') {
                this.displayType = 2
                this.$emit('fun', this.displayType)
            } else {
                this.displayType = 1
                this.$emit('fun', this.displayType)
            }
        },
   }
</script>

<style lang='less' scoped>
.check-btns{
    display:flex;
    justify-content: space-between;
    margin-bottom:20px;
    align-items: center;
    .search-box{
         text-align: right;
        .el-input {
            width: 400px;
            vertical-align: middle;
        }
        .select01 {
            width: 200px;
            vertical-align: middle;
        }
       /deep/.select02 {
            width: 86px;
        }
        .input-with-select{
            width: 260px;
        }
    }
}
</style>