cbsl-app/pages/toolBar.vue

<template>
    <u-popup :show="this.popupOpen" mode="right"  @close="closeBtn" >
        <view style="padding: 30px 20px; ">
            <text style="font-weight: bold;">溢洪道是否有闸</text>
            <view class="searchBox">
                <u-button 
                    v-for="(item, index) in gateTypeOptions"
                    class="itemBtn"
                    :class="{ itemActive: formData.isGate === item.value }"
                    size="small"
                    :plain="true"
                    :key="item.value" 
                    :text="item.name"
                    @click="formData.isGate = item.value"
                ></u-button>
            </view>
            <text style="font-weight: bold;">是否病险</text>
            <view class="searchBox">
                <u-button 
                    v-for="(item, index) in isDangerOptions"
                    class="itemBtn"
                    :class="{ itemActive: formData.isDanger === item.value }"
                    size="small"
                    :plain="true"
                    :key="item.value" 
                    :text="item.name"
                    @click="formData.isDanger = item.value"
                ></u-button>
            </view>
            <text style="font-weight: bold;">设备使用状态</text>
            <view class="searchBox">
                <u-button 
                    v-for="(item, index) in equipmentStatusOptions"
                    class="itemBtn"
                    :class="{ itemActive: formData.equipmentStatus === item.value }"
                    size="small"
                    :plain="true"
                    :key="item.value" 
                    :text="item.name"
                    @click="formData.equipmentStatus = item.value"
                ></u-button>
            </view>
            <text style="font-weight: bold;">是否视频</text>
            <view class="searchBox">
                <u-button 
                    v-for="(item, index) in isVideoOptions"
                    class="itemBtn"
                    :class="{ itemActive: formData.isVideo === item.value }"
                    size="small"
                    :plain="true"
                    :key="item.value" 
                    :text="item.name"
                    @click="formData.isVideo = item.value"
                ></u-button>
            </view>
            <text style="font-weight: bold;">水位状态</text>
            <view class="searchBox">
                <u-button 
                    class="itemBtn2"
                    :class="{ itemActive: formData.waterStageCxx }"
                    size="small"
                    :plain="true"
                    text="超汛限水位"
                    @click="formData.waterStageCxx = !formData.waterStageCxx"
                ></u-button>
                <u-button 
                    class="itemBtn2"
                    :class="{ itemActive: formData.underSsw }"
                    size="small"
                    :plain="true"
                    text="低于死水位"
                    @click="formData.underSsw = !formData.underSsw"
                ></u-button>

                <u-button 
                    class="itemBtn2"
                    :class="{ itemActive: formData.waterStageCjh }"
                    size="small"
                    :plain="true"
                    text="超校核水位"
                    @click="formData.waterStageCjh = !formData.waterStageCjh"
                ></u-button>
                <u-button 
                    class="itemBtn2"
                    :class="{ itemActive: formData.waterStageCsj }"
                    size="small"
                    :plain="true"
                    text="超设计水位"
                    @click="formData.waterStageCsj = !formData.waterStageCsj"
                ></u-button>

                <u-button 
                    class="itemBtn2"
                    :class="{ itemActive: formData.underJh }"
                    size="small"
                    :plain="true"
                    text="低于校核水位"
                    @click="formData.underJh = !formData.underJh"
                ></u-button>
                <u-button 
                    class="itemBtn2"
                    :class="{ itemActive: formData.underSj }"
                    size="small"
                    :plain="true"
                    text="低于设计水位"
                    @click="formData.underSj = !formData.underSj"
                ></u-button>
            </view>
        </view>

        <view class="footerBox">
            <u-button text="重置" class="bottom-btn1" @click="reset"></u-button>
            <u-button text="确认" color="#d9001b" class="bottom-btn2"  @click="submitForm"></u-button>
        </view>
    </u-popup>
</template>

<script>
export default {
    name: 'ToolBar',
    props:{
        popupOpen:Boolean,
    },
    data() {
        return {
            gateTypeOptions:[
                { name: '全部',value: '0' },
                { name: '有闸',value: '1' },
                { name: '无闸',value: '2' },
                { name: '其他',value: '3' },
            ],
            isDangerOptions:[
                { name: '全部',value: '0' },
                { name: '是',value: '1' },
                { name: '否',value: '2' },
            ],
            equipmentStatusOptions:[
                { name: '全部',value: '0' },
                { name: '正常',value: '1' },
                { name: '维护中',value: '2' },
                { name: '弃用',value: '3' },
            ],
            isVideoOptions:[
                { name: '全部',value: '0' },
                { name: '有',value: '1' },
                { name: '无',value: '2' },
            ],

            formData:{
                isGate:'0',//溢洪道是否有闸
                isDanger:'0',//是否病险
                equipmentStatus:'0',//设备使用状态
                isVideo:'0',//是否视频
                isVideo:'0',//是否视频
                waterStageCxx:false,//超汛限
                waterStageCjh:false,//超校核
                waterStageCsj:false,//超设计
                underJh:false,//低于校核
                underSsw:false,//低于死水位
                underSj:false,//低于设计
            }
        };
    },
    computed: {
        
    },
    methods: {
        submitForm() {
            // 将子组件的 formData 传递给父组件
            this.$emit('form-submit', this.formData);
        },
        closeBtn() {
            this.$emit('form-submit', null);
            this.reset()
        },
        reset(){
            this.formData = {
                isGate:'0',//溢洪道是否有闸
                isDanger:'0',//是否病险
                equipmentStatus:'0',//设备使用状态
                isVideo:'0',//是否视频
                isVideo:'0',//是否视频
                waterStageCxx:false,//超汛限
                waterStageCjh:false,//超校核
                waterStageCsj:false,//超设计
                underJh:false,//低于校核
                underSsw:false,//低于死水位
                underSj:false,//低于设计
            }
        }
    },
    // 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
    created() {
    },
};
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.searchBox{
    margin: 10px 0 20px 0;
    width: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .itemBtn{
        margin: 0 10px 0 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50px;
        height: 26px;
        border: 1px solid #eee;
        color: #82848a;
    }
    .itemBtn2{
        margin: 0 10px 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 120px;
        height: 26px;
        border: 1px solid #eee;
        color: #82848a;
    }
    .itemActive{
        background: #3c9cff;
        border-color: #3c9cff;
        color: #ffffff;
    }
}
.footerBox{
    display: flex;
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.bottom-btn1{
    width: 80px;
    height: 32px;
    margin-right: 10px;
}
.bottom-btn2{
    width: 80px;
    height: 32px;
}
</style>