329 lines
7.3 KiB
Vue
329 lines
7.3 KiB
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(-1,'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(-1,'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>
|