xytSk-App/pages/gqzq/gqxx/xq.vue

344 lines
8.2 KiB
Vue
Raw Normal View History

2024-06-12 16:53:07 +08:00
<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.projectName}}</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>
<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>
<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'],
check2:['1','2'],
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.reporter?.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']
this.check2 = ['1','2']
},
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,
projectTypes:this.check2,
}
console.log('params',params)
const res = await uni.$http.post('/gunshiApp/xfflood/xfProjectIncident/list',params)
console.log('res',res)
this.list = [
...res.data.data
2024-06-12 17:44:42 +08:00
// ,
// {
// id:'1',
// projectName:'工程名称',
// projectType:'1',//工程类型(1水库 2水电站)
// severity:'1',//严重程度1一般险情 2较大险情 3重大险情 4特别重大险情
// incidentDescription:'险情描述',
// isControlled:'1',//是否已管控0 否 1 是)
// controlResponsiblePerson:'管控责任人',
// responsiblePersonPhone:'12328281728',//责任人电话
// reporter:'张三',//上报人
// reportTime:'2022-11-21 10:21:11',//上报时间
// reportUnit:'上报单位',
// moditime:'时间戳',
// remark:'情况说明',
// isRead:0,//是否已读0 否 1 是)
// },
2024-06-12 16:53:07 +08:00
]
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/gqxx/xqForm?obj='+JSON.stringify({list:this.getSearchVal,myIndex:myIndex}) // 跳转到对应路径的页面
});
},
},
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;
}
.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>