164 lines
4.7 KiB
Vue
164 lines
4.7 KiB
Vue
<template>
|
|
<view class="zbyq-box">
|
|
<view class="search-bar">
|
|
<u-search
|
|
shape="square"
|
|
:clearabled="true"
|
|
:showAction="false"
|
|
placeholder="请输入站点"
|
|
height="40px"
|
|
@change="inputChange"
|
|
v-model="formData.value"
|
|
></u-search>
|
|
<image
|
|
src="../../../static/images/filter.png"
|
|
style="width: 20px; height: 20px; margin-right: 10px; margin-left: 10px;"
|
|
@click="popupOpen = true"
|
|
v-show="!popupOpen"
|
|
>
|
|
</image>
|
|
</view>
|
|
<view class="content">
|
|
<view v-for="(item,index) in list" :key="index" style="margin-bottom: 5px;">
|
|
<ResList :info="item" />
|
|
</view>
|
|
</view>
|
|
<u-popup :show="popupOpen" mode="right" @close="popupOpen=false" >
|
|
<view style="padding: 30px 20px;">
|
|
<text style="font-weight: bold;">按类型</text>
|
|
<view style="margin-bottom: 10px; margin-left: -5px;">
|
|
<u-checkbox-group
|
|
v-model="formData.sources"
|
|
@change="checkboxChange"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{margin: '7px'}"
|
|
v-for="(item, index) in checkboxList1"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.value"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
<text style="font-weight: bold; margin-bottom: 5px;">按距离</text>
|
|
<u--input
|
|
placeholder="请输入"
|
|
border="surround"
|
|
type="number"
|
|
v-model="formData.distance"
|
|
style="width: 50%; margin-top: 5px;"
|
|
></u--input>
|
|
<view style="display: flex; margin-top: 170%;">
|
|
<u-button text="重置" class="bottom-btn1"
|
|
@click="formData = {...formData,sources,distance:1}"></u-button>
|
|
<u-button text="确认" color="#d9001b" class="bottom-btn2" @click="popConfirm"></u-button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ResList from "./resList.vue"
|
|
export default {
|
|
props:{
|
|
stcd:String,
|
|
default:''
|
|
},
|
|
data() {
|
|
return {
|
|
popupOpen:false,
|
|
sources:["SH","SW","QX","SK"],
|
|
checkboxList1: [{
|
|
name: '山洪',
|
|
value: "SH"
|
|
},
|
|
{
|
|
name: '水文',
|
|
value: "SW"
|
|
},
|
|
{
|
|
name: '气象',
|
|
value: "QX"
|
|
},
|
|
{
|
|
name: '水库',
|
|
value: "SK"
|
|
}
|
|
],
|
|
|
|
formData:{
|
|
value:'',
|
|
sources:["SH","SW","QX","SK"],
|
|
distance:1,
|
|
stcd:this.stcd
|
|
},
|
|
list:[], //搜索结果
|
|
saveList:[] //保存搜索结果
|
|
}
|
|
},
|
|
components:{
|
|
ResList
|
|
},
|
|
methods: {
|
|
inputChange(e){
|
|
console.log("e",e);
|
|
if(!e) this.list = this.saveList;
|
|
this.formData={...this.formData,value:e}
|
|
let filterData = this.list.filter(item => item.stnm.indexOf(e) > -1);
|
|
this.list = filterData;
|
|
},
|
|
checkboxChange(n) {
|
|
console.log('change', n);
|
|
this.formData = {...this.formData,sources:n};
|
|
},
|
|
popConfirm(){
|
|
this.popupOpen = false
|
|
this.getList()
|
|
},
|
|
async getList(){
|
|
try{
|
|
const {data} = await uni.$http.post(
|
|
"/gunshiApp/xfflood/attResBase/rainBasinDivision/queryNearbyRainStations",{...this.formData}
|
|
)
|
|
console.log("data",data);
|
|
if(data.code == 200){
|
|
this.list = [...data.data]
|
|
this.saveList = [...data.data]
|
|
}
|
|
}catch(e){
|
|
uni.$showMsg()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.zbyq-box{
|
|
.search-bar{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.content{
|
|
margin-top: 10px;
|
|
max-height: 580px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.bottom-btn1{
|
|
width: 100px;
|
|
margin-left: 130px;
|
|
}
|
|
.bottom-btn2{
|
|
width: 100px;
|
|
margin-right: -12px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|