253 lines
8.3 KiB
Vue
253 lines
8.3 KiB
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>
|
||
|