tsg-app/pages/forewarning/hd.vue

<template>
	<view class="tabBody">
		<div class="searchBox">
			<div class="searchBox_left">
				<u-search 
					shape="square"
					:clearabled="true"
					:showAction=false
					v-model="searchVal"
					placeholder='请输入站名'
					height=40
				>
				</u-search>
			</div>
			<div class="searchBox_right">
				<view 
					hover-class="is-hover" 
					class="searchBox_right_btn"
					hover-stay-time=100
					@click="myShow"
					>
					<u--image :src="'../../static/images/filter.png'" width="22px" height="22px"></u--image>
				</view>
			</div>
		</div>	
		<div class="tableHead">
			<div class="td t1">站名</div>
			<div class="td t2">水位(m)</div>
			<div class="td t3">类型</div>
			<div class="td t4">预警类型</div>
		</div>
		<div class="tableBody">
			<div v-for="(item,index) in getSearchVal" class="tableRow">
				<div class="td t1" @click="toSh(item)">{{item.stnm}}</div>
				<div class="td t2">{{Number(item.z).toFixed(2)}}({{Number(item.gstate===1?(item.z-item.grz):(item.z-item.wrz)).toFixed(2)}})</div>
				<div class="td t3">{{sttp[item.sttp]}}</div>
				<div class="td t4">{{item.gstate===1?'超危险水位':item.wstate===1?'超警戒水位':'-'}}</div>
			</div>
			<div :style="{height:'80px'}">
			</div>
		</div>			
		<u-popup 
			:show="show" 
			mode="right"  
			:safeAreaInsetTop='true'
			:closeOnClickOverlay='false'
			@close="close" 
			@open="myShow">
			<view :style="{padding:'10px',width:'250px'}">
				<u-toast ref="uToast"></u-toast>
				<text class="title">按类型</text>
				<u-checkbox-group 
					placement="row"
					v-model="check1"
					:style="{padding:'10px 0px 20px 0px'}"
				>
					<u-checkbox name="SH" label="山洪" class="checkItem"></u-checkbox>
					<u-checkbox name="SW" label="水文" class="checkItem"></u-checkbox>
				</u-checkbox-group>
				<text class="title">按预警类型</text>
				<u-checkbox-group
					placement="row"
					v-model="check2"
					:style="{padding:'10px 0px 20px 0px'}"
				>
					<u-checkbox name="1" label="超危险水位" class="checkItem"></u-checkbox>
					<u-checkbox name="2" label="超警戒水位" class="checkItem"></u-checkbox>
				</u-checkbox-group>
				<div :style="{position:'absolute',bottom:'20px',right:'20px',display:'flex'}">
					<u-button 
						:style="{width:'80px',marginRight:'10px'}" 
						text="重置"
						@click="reSet"
					></u-button>
					<u-button 
						:style="{width:'80px'}" 
						color="rgba(217, 0, 27, 1)" 
						type="primary" 
						text="确定"
						@click="submit"
					></u-button>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
import moment from 'moment'
const sttp = {
	RR:'水库水文站', 
	ZQ:'河道水文站',
	ZP:'河道水文站',
}

	export default {
		data() {
			return {
				sttp:sttp,
				show:false,
				searchVal:'',
				check1:['SH','SW'],
				check2:['1','2'],
				list:[]
			}
		},
		computed: {
			getSearchVal() {
				if(this.searchVal){
					return this.list.filter(o => o.adnm && o.adnm?.indexOf(this.searchVal)>-1)
				}else{
					return this.list
				}
			},
		},
		methods: {
			myShow() {
				this.show = true
			},
			close() {
				this.show = false
			},
			reSet() {
				this.check1 = ['SH','SW']
				this.check2 = ['1','2']
			},
			async submit() {
				try{
					const params = {
						sources:this.check1,
						types:this.check2
					}
					const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/rv/warn',params)
					this.list = res.data.data
					this.close()
				}catch(e){
					//TODO handle the exception
					this.$refs.uToast.show({
						type: 'error',
						title: '失败主题',
						message: "请求失败",
					})
					setTimeout(()=>{
						this.close()
					},1000)
				}
			},
			toSh(params) {
				console.log(`/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`)
				uni.navigateTo({
				  url:`/pages/hdDetail/hdDetail?stcd=${params.stcd}&stnm=${params.stnm}&source=${params.source}&wrz=${params.wrz}&grz=${params.grz}`
				})
			},
		},
		created() {
			this.submit()
		}
	}
</script>

<style lang="scss" scoped>
.tabBody{
	background-color: rgba(247, 247, 247, 1);
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.searchBox{
	height: 62px;
	width: 100%;
	background-color: #ffffff;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
}
.tableHead{
	width: 97%;
	margin-top: 5px;
	height: 50px;
	background-color: #e4f2fe;
	display: flex;
	color: #208FEE;
}
.tableBody{
	width: 97%;
	height: calc( 100vh - 214px );
	background-color: #f7f7f7;//#ffffff;
	overflow-y: scroll;
}
.tableRow{
	width: 100%;
	height: 46px;
	display: flex;
	border-bottom: 1px solid #eee;
	background-color: #ffffff;
}

.td{
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}
.t1{
	width: 25%;
	color: #208FEE;
}
.t2{
	width: 25%;
}
.t3{
	width: 25%;
}
.t4{
	width: 25%;
}
.searchBox_left{
	width: 82%;
	padding-left: 15px;
}
.searchBox_right{
	width: 18%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.searchBox_right_btn{
	width: 40px;
	height: 40px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.is-hover{
	background-color: #eee;
}
.title{
	display: inline-block;
	font-size: 16px;
}
.checkItem{
	margin-right: 10px;
}
.tmPicker{
	width: 100%;
	height: 30px;
	border: 1px solid rgba(240, 240, 240, 1);
	border-radius: 4px;
	margin-right: 10px;
	font-size: 14px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	// padding-left: 10px;
}
</style>