366 lines
9.5 KiB
Vue
366 lines
9.5 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="mybody">
|
||
<div class="countNum"><text>共{{getSearchVal.length}}条信息</text></div>
|
||
<div v-for="(item,index) in getSearchVal" class="listItem" @click="toForm(index)">
|
||
<div>
|
||
<div class="row1"><text>{{item.address+'('+{'1':'一般险情','2':'较大险情','3':'重大险情','4':'特别重大险情'}[item.severity]+')'}}</text></div>
|
||
<div class="row2">
|
||
<div>
|
||
<text :style="{marginRight:'5px'}">{{item.reporter}}</text>
|
||
<text>{{item.reportTime}}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="icon" v-show="item.isRead===0"></div>
|
||
</div>
|
||
<div :style="{height:'100px'}"></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="col"
|
||
v-model="check1"
|
||
: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 name="3" label="重大险情" class="checkItem"></u-checkbox>
|
||
<u-checkbox name="4" 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'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
show:false,
|
||
showStmPicker:false,
|
||
showEtmPicker:false,
|
||
searchVal:'',
|
||
stm:Number(moment(new Date()).add(-7,'days')),
|
||
etm:Number(new Date()),
|
||
check1:['1','2','3','4'],
|
||
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.projectName?.indexOf(this.searchVal)>-1 || o.address?.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 = ['1','2','3','4']
|
||
},
|
||
async submit() {
|
||
if(!moment(this.stm).isBefore(this.etm)){
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
title: '失败主题',
|
||
message: "开始时间需小于结束时间",
|
||
})
|
||
return
|
||
}
|
||
try{
|
||
const params = {
|
||
timeSo:{
|
||
start:moment(this.stm).format('YYYY-MM-DD HH:mm:ss'),
|
||
end:moment(this.etm).format('YYYY-MM-DD HH:mm:ss'),
|
||
},
|
||
severitys:this.check1,
|
||
}
|
||
console.log('params',params)
|
||
const res = await uni.$http.post('/gunshiApp/xfflood/iaCHsfwater/queryList',params)
|
||
console.log('res',res)
|
||
this.list = [
|
||
...res.data.data
|
||
// ,{
|
||
// // id:'1',
|
||
// mtcd:'12121',//山洪灾害编码
|
||
// wscd:'22222',//小流域代码
|
||
// otime:'2022-12-12 10:22:22',//灾害发生时间
|
||
// severity:'22222',//小流域代码
|
||
// wscd:'3',//严重程度（1一般灾情 2较大灾情 3重大灾情 4特别重大灾情）
|
||
// address:'灾害发生地点',//灾害发生地点
|
||
// lgtd:'111.21',//经度
|
||
// lttd:'32.12',//纬度
|
||
// ddscrib:'灾害描述',//灾害描述
|
||
// dpcount:'2',//死亡人数（人）
|
||
// mpcount:'12',//失踪人数（人）
|
||
// spcount:'2211',//转移人数（人）
|
||
// chcount:'41',//损毁房屋（人）
|
||
// elose:'6623',//直接经济损失（万元）
|
||
// pfrain:'41',//过程降雨量（mm）
|
||
// reporter:'张三',//上报人
|
||
// reportTime:'2022-11-21 10:21:11',//上报时间
|
||
// reportUnit:'上报单位',
|
||
// moditime:'时间戳',
|
||
// remark:'情况说明',
|
||
// isRead:0,//是否已读（0 否 1 是）
|
||
// severity:'1',//严重程度（1一般险情 2较大险情 3重大险情 4特别重大险情）
|
||
// },
|
||
// {
|
||
// // id:'1',
|
||
// mtcd:'12121',//山洪灾害编码
|
||
// wscd:'22222',//小流域代码
|
||
// otime:'2022-12-12 10:22:22',//灾害发生时间
|
||
// severity:'22222',//小流域代码
|
||
// wscd:'3',//严重程度（1一般灾情 2较大灾情 3重大灾情 4特别重大灾情）
|
||
// address:'灾害发生地点2',//灾害发生地点
|
||
// lgtd:'111.21',//经度
|
||
// lttd:'32.12',//纬度
|
||
// ddscrib:'灾害描述',//灾害描述
|
||
// dpcount:'2',//死亡人数（人）
|
||
// mpcount:'12',//失踪人数（人）
|
||
// spcount:'2211',//转移人数（人）
|
||
// chcount:'41',//损毁房屋（人）
|
||
// elose:'6623',//直接经济损失（万元）
|
||
// pfrain:'41',//过程降雨量（mm）
|
||
// reporter:'张三',//上报人
|
||
// reportTime:'2022-11-21 10:21:11',//上报时间
|
||
// reportUnit:'上报单位',
|
||
// moditime:'时间戳',
|
||
// remark:'情况说明',
|
||
// isRead:1,//是否已读（0 否 1 是）
|
||
// severity:'1',//严重程度（1一般险情 2较大险情 3重大险情 4特别重大险情）
|
||
// },
|
||
]
|
||
this.close()
|
||
}catch(e){
|
||
//TODO handle the exception
|
||
this.$refs.uToast.show({
|
||
type: 'error',
|
||
title: '失败主题',
|
||
message: "请求失败",
|
||
})
|
||
setTimeout(()=>{
|
||
this.close()
|
||
},1000)
|
||
}
|
||
},
|
||
toForm(myIndex) {
|
||
uni.navigateTo({
|
||
url: '/pages/gqzq/zqxx/form?obj='+JSON.stringify({list:this.getSearchVal,myIndex:myIndex}) // 跳转到对应路径的页面
|
||
});
|
||
},
|
||
},
|
||
created() {
|
||
this.submit()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabBody{
|
||
margin-top: 44px;
|
||
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;
|
||
}
|
||
|
||
.mybody{
|
||
background-color: #ffffff;
|
||
margin: 5px 5px;
|
||
padding: 5px 20px;
|
||
height: calc( 100vh - 100px );
|
||
overflow: scroll;
|
||
}
|
||
.countNum{
|
||
width: 100%;
|
||
text-align: right;
|
||
font-size: 13px;
|
||
}
|
||
.listItem{
|
||
width: 100%;
|
||
border-bottom: 1px solid #eee;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.row1{
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
width: 100%;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
}
|
||
.row2{
|
||
font-size: 12px;
|
||
color: #999999;
|
||
width: 100%;
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.icon{
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 5px;
|
||
background-color: red;
|
||
}
|
||
.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;
|
||
margin-bottom: 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>
|