xytSk-App/pages/forewarning/sh.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">预警时间</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.adnm}}</div>
				<div class="td t2">{{item.warnstm}}</div>
				<div class="td t3">{{warnstatus[item.warnstatusid]}}</div>
				<div class="td t4">{{warngrade[item.warngradeid]}}</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="0" label="新产生" class="checkItem"></u-checkbox>
					<u-checkbox name="30" 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="6" label="立即转移" class="checkItem"></u-checkbox>
					<u-checkbox name="5" label="准备转移" class="checkItem"></u-checkbox>
				</u-checkbox-group>
				<text class="title">按预警时间</text>
				<div :style="{display:'flex',marginTop:'10px'}">
					<view 
						class="tmPicker" 
						@click="showStmPicker = true"
						hover-class="is-hover"
						hover-stay-time=100
					>{{getStmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
					</view>
					<text :style="{width:'20%',lineHeight:'32px',textAlign:'center'}">至</text>
				</div>
				<div :style="{display:'flex',marginTop:'10px'}">
					<view 
						class="tmPicker" 
						@click="showEtmPicker = true"
						hover-class="is-hover"
						hover-stay-time=100
					>{{getEtmStr}}<u-icon name="calendar" size="18" color="#909399"></u-icon>
					</view>
					<text :style="{width:'20%'}"></text>
				</div>
				<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-datetime-picker
					:show="showStmPicker"
					v-model="stm"
					mode="datetime"
					closeOnClickOverlay
					@confirm="showStmPicker = false"
					@cancel="showStmPicker = false"
					@close="showStmPicker = false"
			>
			</u-datetime-picker>
			<u-datetime-picker
					:show="showEtmPicker"
					v-model="etm"
					mode="datetime"
					closeOnClickOverlay
					@confirm="showEtmPicker = false"
					@cancel="showEtmPicker = false"
					@close="showEtmPicker = false"
			>
			</u-datetime-picker>
		</u-popup>
	</view>
</template>

<script>
import moment from 'moment'
const warnstatus = {
	'0':'新产生',
	'10':'已内部告警',
	'20':'已外部告警',
	'30':'关闭预警',
	'70':'灾情上报',
}
const warngrade = {
	'5':'准备转移',
	'6':'立即转移'
}

	export default {
		data() {
			return {
				warnstatus:warnstatus,
				warngrade:warngrade,
				show:false,
				showStmPicker:false,
				showEtmPicker:false,
				searchVal:'',
				stm:Number(moment(new Date()).add(-7,'days')),
				etm:Number(new Date()),
				check1:['0','30'],
				check2:['6','5'],
				list:[]
			}
		},
		computed: {
			getStmStr() {
				return moment(this.stm).format('YYYY-MM-DD HH:mm:ss')
			},
			getEtmStr() {
				return moment(this.etm).format('YYYY-MM-DD HH:mm:ss')
			},
			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.stm = Number(moment(new Date()).add(-7,'days'))
				this.etm = Number(new Date())
				this.check1 = ['0','30']
				this.check2 = ['6','5']
			},
			async submit() {
				if(!moment(this.stm).isBefore(this.etm)){
					this.$refs.uToast.show({
						type: 'error',
						title: '失败主题',
						message: "开始时间需小于结束时间",
					})
					return
				}
				try{
					const params = {
						stm:moment(this.stm).format('YYYY-MM-DD HH:mm:ss'),
						etm:moment(this.etm).format('YYYY-MM-DD HH:mm:ss'),
						warnstatusids:this.check1,
						warngradeids:this.check2
					}
					const res = await uni.$http.post('/gunshiApp/xfflood/current/situation/app/flood/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(record) {
				uni.navigateTo({
				  url: '/pages/forewarning/shInformation/shInformation?obj='+JSON.stringify(record) // 跳转到对应路径的页面
				});
			},
		},
		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: 37%;
}
.t3{
	width: 18%;
}
.t4{
	width: 20%;
}
.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>