522 lines
14 KiB
Vue
522 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="container" v-if="isdetail">
|
|||
|
|
<view class="nav_bar">
|
|||
|
|
<!-- <u-icon name="arrow_left" color="#000" size="28"></u-icon> -->
|
|||
|
|
<view class="nav_bar_tit"> 工情信息 </view>
|
|||
|
|
</view>
|
|||
|
|
<!-- tabs -->
|
|||
|
|
<view class="table_h">
|
|||
|
|
<div
|
|||
|
|
class="leftTab"
|
|||
|
|
:class="{ activetextTypeTab: showTextTypeTab == 1 }"
|
|||
|
|
@click="tabChange(1)"
|
|||
|
|
>
|
|||
|
|
运行情况
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="rightTab"
|
|||
|
|
:class="{ activetextTypeTab: showTextTypeTab == 2 }"
|
|||
|
|
@click="tabChange(2)"
|
|||
|
|
>
|
|||
|
|
工程险情
|
|||
|
|
</div>
|
|||
|
|
</view>
|
|||
|
|
<!-- 搜索区域 -->
|
|||
|
|
<view class="search">
|
|||
|
|
<view class="search_sear">
|
|||
|
|
<input
|
|||
|
|
class="searchInput"
|
|||
|
|
confirm-type="search"
|
|||
|
|
placeholder-style="color:#bbb"
|
|||
|
|
v-model="saerchValue"
|
|||
|
|
placeholder="请输入工程名称/上报人"
|
|||
|
|
@input="myinput"
|
|||
|
|
@confirm="myconfirm"
|
|||
|
|
/>
|
|||
|
|
<icon class="icon-small" type="search" size="14"></icon>
|
|||
|
|
|
|||
|
|
<icon
|
|||
|
|
v-if="saerchValue.length > 0"
|
|||
|
|
class="clear-icon"
|
|||
|
|
type="clear"
|
|||
|
|
size="16"
|
|||
|
|
@click="clearnClick"
|
|||
|
|
></icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="more">
|
|||
|
|
<image
|
|||
|
|
style="width: 20px; height: 20px; margin-right: 10px"
|
|||
|
|
src="../../static/images/filter.png"
|
|||
|
|
@click="openpop"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 列表区域 -->
|
|||
|
|
<view class="table_info" v-if="list.length > 0">
|
|||
|
|
<p class="p" v-if="total > 0">共{{ total }}条信息</p>
|
|||
|
|
<view v-for="(item, index) in list" :key="index">
|
|||
|
|
<view class="table_Page" @tap="toDetail(item)">
|
|||
|
|
<view class="info">
|
|||
|
|
<h4>{{ item.projectName }}</h4>
|
|||
|
|
<p class="info_P">
|
|||
|
|
<span class="info_n">{{ item.reporter }}</span>
|
|||
|
|
<span>{{ item.reportTime }}</span>
|
|||
|
|
</p>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="item.isRead == 0" class="badge"
|
|||
|
|
><u-badge :isDot="true"></u-badge
|
|||
|
|
></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 无数据 -->
|
|||
|
|
<view class="table_info" v-if="list.length == 0">
|
|||
|
|
<view class="table_Page" @tap="toDetail('item')">
|
|||
|
|
<view class="info">
|
|||
|
|
<h4>朝阳寺水库</h4>
|
|||
|
|
<p class="info_P">
|
|||
|
|
<span class="info_n">刘明</span>
|
|||
|
|
<span>2024-03-06 13:50:47</span>
|
|||
|
|
</p>
|
|||
|
|
</view>
|
|||
|
|
<view class="badge"><u-badge :isDot="true"></u-badge></view> </view
|
|||
|
|
></view>
|
|||
|
|
|
|||
|
|
<!-- 筛选抽屉 -->
|
|||
|
|
<view class="popup" v-if="popupOpen">
|
|||
|
|
<u-popup
|
|||
|
|
:show="popupOpen"
|
|||
|
|
mode="bottom"
|
|||
|
|
@close="() => (this.popupOpen = false)"
|
|||
|
|
>
|
|||
|
|
<view style="padding: 30px 20px">
|
|||
|
|
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
|||
|
|
<u-form
|
|||
|
|
labelPosition="left"
|
|||
|
|
:model="model1"
|
|||
|
|
ref="uForm"
|
|||
|
|
labelWidth="100"
|
|||
|
|
>
|
|||
|
|
<u-form-item
|
|||
|
|
label="工程类型"
|
|||
|
|
prop="checkboxValue1"
|
|||
|
|
borderBottom
|
|||
|
|
labelWidth="80"
|
|||
|
|
ref="item3"
|
|||
|
|
>
|
|||
|
|
<u-checkbox-group
|
|||
|
|
v-model="model1.userInfo.checkboxValue1"
|
|||
|
|
shape="square"
|
|||
|
|
>
|
|||
|
|
<u-checkbox
|
|||
|
|
:customStyle="{ marginRight: '16px' }"
|
|||
|
|
v-for="(item, index) in checkboxList1"
|
|||
|
|
:key="index"
|
|||
|
|
:label="item.name"
|
|||
|
|
:name="item.name"
|
|||
|
|
>
|
|||
|
|
</u-checkbox>
|
|||
|
|
</u-checkbox-group>
|
|||
|
|
</u-form-item>
|
|||
|
|
<!-- 时间 -->
|
|||
|
|
<u-form-item
|
|||
|
|
label="上报开始时间"
|
|||
|
|
prop="userInfo.start"
|
|||
|
|
borderBottom
|
|||
|
|
@click="
|
|||
|
|
isTime = true
|
|||
|
|
hideKeyboard()
|
|||
|
|
"
|
|||
|
|
ref="item1"
|
|||
|
|
>
|
|||
|
|
<u-input
|
|||
|
|
v-model="model1.userInfo.start"
|
|||
|
|
border="none"
|
|||
|
|
disabled
|
|||
|
|
disabledColor="#ffffff"
|
|||
|
|
placeholder="请选择上报开始时间"
|
|||
|
|
></u-input>
|
|||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|||
|
|
</u-form-item>
|
|||
|
|
|
|||
|
|
<u-form-item
|
|||
|
|
label="上报结束时间"
|
|||
|
|
prop="userInfo.end"
|
|||
|
|
borderBottom
|
|||
|
|
@click="isTime2 = true"
|
|||
|
|
ref="item1"
|
|||
|
|
>
|
|||
|
|
<u--input
|
|||
|
|
v-model="model1.userInfo.end"
|
|||
|
|
border="none"
|
|||
|
|
disabled
|
|||
|
|
disabledColor="#ffffff"
|
|||
|
|
placeholder="请选择上报结束时间"
|
|||
|
|
></u--input>
|
|||
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|||
|
|
</u-form-item>
|
|||
|
|
</u-form>
|
|||
|
|
<view class="bottom">
|
|||
|
|
<u-button
|
|||
|
|
text="重置"
|
|||
|
|
customStyle="margin: 10px"
|
|||
|
|
@click="reset"
|
|||
|
|
></u-button>
|
|||
|
|
<u-button
|
|||
|
|
type="primary"
|
|||
|
|
text="确认"
|
|||
|
|
customStyle="margin: 10px"
|
|||
|
|
@click="submit"
|
|||
|
|
></u-button>
|
|||
|
|
</view>
|
|||
|
|
<u-datetime-picker
|
|||
|
|
:show="isTime"
|
|||
|
|
v-model="valueTime"
|
|||
|
|
mode="datetime"
|
|||
|
|
@confirm="confirm"
|
|||
|
|
@cancel="cancel"
|
|||
|
|
></u-datetime-picker>
|
|||
|
|
|
|||
|
|
<u-datetime-picker
|
|||
|
|
:show="isTime2"
|
|||
|
|
v-model="valueTime2"
|
|||
|
|
mode="datetime"
|
|||
|
|
@confirm="confirm2"
|
|||
|
|
@cancel="cancel2"
|
|||
|
|
></u-datetime-picker>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="container" v-else>
|
|||
|
|
<detail :info="detailInfo" @rightClick="rightClick"></detail>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import moment from 'moment'
|
|||
|
|
import detail from './detail/index.vue'
|
|||
|
|
export default {
|
|||
|
|
components: { detail },
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
isdetail: true,
|
|||
|
|
detailInfo: {},
|
|||
|
|
showTextTypeTab: 1,
|
|||
|
|
saerchValue: '',
|
|||
|
|
popupOpen: false, //抽屉打开,
|
|||
|
|
// 基本案列数据
|
|||
|
|
checkboxList1: [
|
|||
|
|
{
|
|||
|
|
name: '水库',
|
|||
|
|
disabled: false,
|
|||
|
|
key: 'sk'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '水电站',
|
|||
|
|
disabled: false,
|
|||
|
|
key: 'sdz'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
isTime: false,
|
|||
|
|
valueTime: Number(moment()),
|
|||
|
|
valueTime2: Number(moment()),
|
|||
|
|
isTime2: false,
|
|||
|
|
model1: {
|
|||
|
|
userInfo: {
|
|||
|
|
start: '',
|
|||
|
|
end: '',
|
|||
|
|
checkboxValue1: ['水库', '水电站']
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
list: {},
|
|||
|
|
total: '',
|
|||
|
|
isfixed: false,
|
|||
|
|
params: {
|
|||
|
|
pageSo: { pageSize: 10, pageNumber: 0 },
|
|||
|
|
isRead: 0,
|
|||
|
|
projectName: this.saerchValue
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad () {
|
|||
|
|
this.getData()
|
|||
|
|
},
|
|||
|
|
// 页面滚动时，固定头部
|
|||
|
|
onPageScroll () {
|
|||
|
|
this.isfixed = true
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
onPullDownRefresh () {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '努力加载中...'
|
|||
|
|
})
|
|||
|
|
this.params.pageSo.pageNumber = 0
|
|||
|
|
this.list = []
|
|||
|
|
this.getData()
|
|||
|
|
},
|
|||
|
|
// 上拉加载
|
|||
|
|
onReachBottom () {
|
|||
|
|
if (this.list.length >= this.total) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '没有更多的数据了1'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.getData()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
rightClick (val) {
|
|||
|
|
this.isdetail = true
|
|||
|
|
},
|
|||
|
|
toDetail (item) {
|
|||
|
|
console.log('item', item)
|
|||
|
|
this.detailInfo = item
|
|||
|
|
this.isdetail = false
|
|||
|
|
// uni.navigateTo({
|
|||
|
|
// url: './detail/index'
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
async getData () {
|
|||
|
|
let obj = this.params
|
|||
|
|
this.params.pageSo.pageNumber++
|
|||
|
|
if (this.model1.userInfo.start != '' && this.model1.userInfo.end != '') {
|
|||
|
|
obj.timeSo = {
|
|||
|
|
start: this.model1.userInfo.start,
|
|||
|
|
end: this.model1.userInfo.end
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.list = []
|
|||
|
|
try {
|
|||
|
|
if (this.showTextTypeTab === 1) {
|
|||
|
|
let res = await uni.$http.post(
|
|||
|
|
'/gunshiApp/xfflood/xfProjectRun/queryPage',
|
|||
|
|
obj
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
let res2 = await uni.$http.post(
|
|||
|
|
'/gunshiApp/xfflood/xfProjectRun/queryPage',
|
|||
|
|
{ ...obj, isRead: 1 }
|
|||
|
|
)
|
|||
|
|
this.total = res.data.data.total + res2.data.data.total
|
|||
|
|
|
|||
|
|
this.list = res.data.data.records.concat(res2.data.data.records)
|
|||
|
|
console.log('--1-', res.data.data, res.data.data.records)
|
|||
|
|
console.log('--2-', res2.data.data, this.total, this.list)
|
|||
|
|
} else {
|
|||
|
|
let res = await uni.$http.post(
|
|||
|
|
'/gunshiApp/xfflood/xfProjectIncident/queryPage',
|
|||
|
|
obj
|
|||
|
|
)
|
|||
|
|
let res2 = await uni.$http.post(
|
|||
|
|
'/gunshiApp/xfflood/xfProjectIncident/queryPage',
|
|||
|
|
{ ...obj, isRead: 1 }
|
|||
|
|
)
|
|||
|
|
this.total = res.data.data.total + res2.data.data.total
|
|||
|
|
this.list = res.data.data.records.concat(res2.data.data.records)
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
uni.$showMsg()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
tabChange (val) {
|
|||
|
|
console.log('tabChange0', val)
|
|||
|
|
this.showTextTypeTab = val
|
|||
|
|
this.params.pageSo.pageNumber = 0
|
|||
|
|
this.getData()
|
|||
|
|
},
|
|||
|
|
submit () {
|
|||
|
|
this.popupOpen = false
|
|||
|
|
console.log('res', this.$refs.uForm)
|
|||
|
|
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
|||
|
|
// this.$refs.uForm
|
|||
|
|
// .validate()
|
|||
|
|
// .then(res => {
|
|||
|
|
// uni.$u.toast('校验通过')
|
|||
|
|
// this.popupOpen = false
|
|||
|
|
// })
|
|||
|
|
// .catch(errors => {
|
|||
|
|
// uni.$u.toast('校验失败')
|
|||
|
|
// })
|
|||
|
|
},
|
|||
|
|
reset () {
|
|||
|
|
const validateList = [
|
|||
|
|
'userInfo.start',
|
|||
|
|
'userInfo.end',
|
|||
|
|
'userInfo.checkboxValue1'
|
|||
|
|
]
|
|||
|
|
this.$refs.uForm.resetFields()
|
|||
|
|
this.$refs.uForm.clearValidate()
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.$refs.uForm.clearValidate(validateList)
|
|||
|
|
// 或者使用 this.$refs.uForm.clearValidate()
|
|||
|
|
}, 10)
|
|||
|
|
this.model1 = {
|
|||
|
|
userInfo: {
|
|||
|
|
start: '',
|
|||
|
|
end: '',
|
|||
|
|
checkboxValue1: ['水库', '水电站']
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
confirm (val) {
|
|||
|
|
console.log(
|
|||
|
|
'点击确定按钮时触发',
|
|||
|
|
val.value,
|
|||
|
|
moment(val.value).format('YYYY-MM-DD HH:mm')
|
|||
|
|
)
|
|||
|
|
this.valueTime = Number(val)
|
|||
|
|
this.model1.userInfo.start = moment(val.value).format('YYYY-MM-DD HH:mm')
|
|||
|
|
this.isTime = false
|
|||
|
|
},
|
|||
|
|
cancel () {
|
|||
|
|
console.log('取消')
|
|||
|
|
this.isTime = false
|
|||
|
|
},
|
|||
|
|
confirm2 (val) {
|
|||
|
|
console.log(
|
|||
|
|
'点击确定按钮时触发',
|
|||
|
|
val.value,
|
|||
|
|
moment(val.value).format('YYYY-MM-DD HH:mm')
|
|||
|
|
)
|
|||
|
|
this.valueTime2 = Number(val)
|
|||
|
|
this.model1.userInfo.end = moment(val.value).format('YYYY-MM-DD HH:mm')
|
|||
|
|
this.isTime2 = false
|
|||
|
|
this.params.timeSo.end = this.model1.userInfo.end
|
|||
|
|
},
|
|||
|
|
cancel2 () {
|
|||
|
|
console.log('取消')
|
|||
|
|
this.isTime2 = false
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
openpop () {
|
|||
|
|
this.popupOpen = true
|
|||
|
|
},
|
|||
|
|
myinput () {},
|
|||
|
|
myconfirm () {},
|
|||
|
|
clearnClick () {
|
|||
|
|
console.log('打印了clearnClick', this.saerchValue)
|
|||
|
|
this.saerchValue = ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.container {
|
|||
|
|
font-size: 14px;
|
|||
|
|
background-color: #f3f5f8;
|
|||
|
|
}
|
|||
|
|
.table_info {
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
padding: 20px;
|
|||
|
|
.p {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.table_Page {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
padding-bottom: 12rpx;
|
|||
|
|
|
|||
|
|
.info_P {
|
|||
|
|
color: #a2a2a2;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
.info_n {
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.table_h {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 56rpx;
|
|||
|
|
line-height: 88rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.leftTab {
|
|||
|
|
width: 80px;
|
|||
|
|
}
|
|||
|
|
.rightTab {
|
|||
|
|
width: 80px;
|
|||
|
|
}
|
|||
|
|
.activetextTypeTab,
|
|||
|
|
.activetextTypeTab:hover {
|
|||
|
|
// border-bottom: 3rpx solid #2286f6;
|
|||
|
|
color: #026be0;
|
|||
|
|
}
|
|||
|
|
.nav_bar {
|
|||
|
|
// display: flex;
|
|||
|
|
// justify-content: space-between;
|
|||
|
|
// align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
border-bottom: 1px solid #dfdfdf;
|
|||
|
|
box-shadow: 0 5px 10px -8px #dfdfdf inset;
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
}
|
|||
|
|
.nav_bar_tit {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
background-color: #fff;
|
|||
|
|
margin-bottom: 12rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-right: 20px;
|
|||
|
|
}
|
|||
|
|
.fl {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: left;
|
|||
|
|
}
|
|||
|
|
.bottom {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.search_sear {
|
|||
|
|
// background-color: #eee;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 30rpx 16rpx;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
z-index: 999;
|
|||
|
|
|
|||
|
|
.searchInput {
|
|||
|
|
background-color: #eee;
|
|||
|
|
height: 60rpx;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
color: #bbb;
|
|||
|
|
padding-left: 60rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-small {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 36rpx;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
}
|
|||
|
|
.clear-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
right: 36rpx;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
icon {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|