|
|
<template>
|
|
|
<view class="boxContent">
|
|
|
|
|
|
<view :class="mask?'list listfixed':'list'" style="padding-top: 20rpx;">
|
|
|
|
|
|
<block v-for="(item, index) in dataList">
|
|
|
<u-card :title="item.road.name" @click="toMaintain(item.road.id,item.road.name)" sub-title="去养护" padding="20"
|
|
|
margin="20rpx" :border="true">
|
|
|
<view class="" slot="body" >
|
|
|
<u-row gutter="16">
|
|
|
<u-col span="24">
|
|
|
<view class="demo-layout bg-purple-light">{{item.name}}</view>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
<u-row gutter="16">
|
|
|
|
|
|
<u-col span="4">
|
|
|
<view class="demo-layout bg-purple">所属片区：</view>
|
|
|
</u-col>
|
|
|
<u-col span="8">
|
|
|
<view class="demo-layout bg-purple-light">{{item.area_info?item.area_info.name:''}}
|
|
|
</view>
|
|
|
</u-col>
|
|
|
<u-col span="4">
|
|
|
<view class="demo-layout bg-purple">开始日期：</view>
|
|
|
</u-col>
|
|
|
<u-col span="8">
|
|
|
<view class="demo-layout bg-purple-light">{{item.start_date}}</view>
|
|
|
</u-col>
|
|
|
<u-col span="4">
|
|
|
<view class="demo-layout bg-purple">结束日期：</view>
|
|
|
</u-col>
|
|
|
<u-col span="8">
|
|
|
<view class="demo-layout bg-purple-light">{{item.end_date}}</view>
|
|
|
</u-col>
|
|
|
|
|
|
<u-col span="4">
|
|
|
<view class="demo-layout bg-purple">养护类型：</view>
|
|
|
</u-col>
|
|
|
<u-col span="8">
|
|
|
<view class="demo-layout bg-purple-light">{{toReturnType(item.item_type)}}</view>
|
|
|
</u-col>
|
|
|
|
|
|
|
|
|
|
|
|
<u-col span="5">
|
|
|
<view class="demo-layout bg-purple">窨井（座）：</view>
|
|
|
</u-col>
|
|
|
<u-col span="1">
|
|
|
<view class="demo-layout bg-purple-light">{{item.inspection_well}}</view>
|
|
|
</u-col>
|
|
|
<u-col span="5">
|
|
|
<view class="demo-layout bg-purple">边井（座）：</view>
|
|
|
</u-col>
|
|
|
<u-col span="1">
|
|
|
<view class="demo-layout bg-purple-light">{{item.side_well}}</view>
|
|
|
</u-col>
|
|
|
<u-col span="5">
|
|
|
<view class="demo-layout bg-purple">主管数：</view>
|
|
|
</u-col>
|
|
|
<u-col span="1">
|
|
|
<view class="demo-layout bg-purple-light">{{item.master_pipe}}</view>
|
|
|
</u-col>
|
|
|
<u-col span="5">
|
|
|
<view class="demo-layout bg-purple">支管数：</view>
|
|
|
</u-col>
|
|
|
<u-col span="1">
|
|
|
<view class="demo-layout bg-purple-light">{{item.branch_pipe}}</view>
|
|
|
</u-col>
|
|
|
</u-row>
|
|
|
|
|
|
</view>
|
|
|
</u-card>
|
|
|
|
|
|
</block>
|
|
|
<u-loadmore class="loadmore" :status="loadStatus" :load-text="loadText" />
|
|
|
<u-empty text="暂无数据" margin-top="200" v-if="dataList.length==0" mode="list"></u-empty>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
serachEntity: {
|
|
|
keyword: "",
|
|
|
status: "",
|
|
|
type: "",
|
|
|
date: "2022-10",
|
|
|
area_id: ""
|
|
|
},
|
|
|
background: {
|
|
|
backgroundColor: '#0385e5'
|
|
|
},
|
|
|
mask: false,
|
|
|
loadStatus: "loadmore",
|
|
|
loadText: {
|
|
|
loadmore: "加载更多",
|
|
|
nomore: "已经到底了"
|
|
|
},
|
|
|
rainTypes: [{
|
|
|
id: 1,
|
|
|
name: "雨水管道疏挖"
|
|
|
},
|
|
|
{
|
|
|
id: 2,
|
|
|
name: "雨水管道疏通"
|
|
|
},
|
|
|
{
|
|
|
id: 3,
|
|
|
name: "汛期助排"
|
|
|
},
|
|
|
{
|
|
|
id: 4,
|
|
|
name: "污泥外运"
|
|
|
},
|
|
|
{
|
|
|
id: 5,
|
|
|
name: "出水口排查"
|
|
|
},
|
|
|
{
|
|
|
id: 6,
|
|
|
name: "专项处理"
|
|
|
},
|
|
|
{
|
|
|
id: 7,
|
|
|
name: "维修"
|
|
|
}
|
|
|
],
|
|
|
dataList: [],
|
|
|
thumb: "/static/img/location.png",
|
|
|
currentPage: 0,
|
|
|
lastPage: 0,
|
|
|
|
|
|
}
|
|
|
},
|
|
|
onReachBottom: function(e) {
|
|
|
if (this.currentPage >= this.lastPage) {
|
|
|
this.loadStatus = "nomore"
|
|
|
return;
|
|
|
}
|
|
|
this.loadPage(this.currentPage + 1);
|
|
|
},
|
|
|
onPullDownRefresh: function(e) {
|
|
|
this.loadPage(1);
|
|
|
},
|
|
|
onShow: function() {
|
|
|
var that = this;
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.serachEntity.date = this.$moment().format("YYYY-MM");
|
|
|
this.loadPage(1);
|
|
|
},
|
|
|
methods: {
|
|
|
toReturnType(type) {
|
|
|
return this.rainTypes.filter(m => {
|
|
|
return m.id == type
|
|
|
})[0].name
|
|
|
},
|
|
|
toMaintain(road_id, road_name) {
|
|
|
let url = "/rainmaintain/rainmaintain/rainmaintain?roadid=" + road_id + "&roadname=" + road_name
|
|
|
uni.navigateTo({
|
|
|
url: url
|
|
|
})
|
|
|
},
|
|
|
openmask() {
|
|
|
this.mask = true
|
|
|
// this.isPullDown(false);
|
|
|
},
|
|
|
closemask() {
|
|
|
this.mask = false
|
|
|
// this.isPullDown(true);
|
|
|
},
|
|
|
tosearch() {
|
|
|
this.loadPage(1)
|
|
|
this.$refs.uDropdown.close();
|
|
|
},
|
|
|
|
|
|
loadPage: function(page) {
|
|
|
uni.hideKeyboard()
|
|
|
var that = this;
|
|
|
this.util.request({
|
|
|
bindThis: that,
|
|
|
api: '/api/mobile/maintain-plan/index',
|
|
|
customLoading: false,
|
|
|
data: {
|
|
|
page: page,
|
|
|
page_size: 4,
|
|
|
...that.serachEntity
|
|
|
},
|
|
|
utilSuccess: function(r) {
|
|
|
var res = r.data;
|
|
|
that.lastPage = r.last_page;
|
|
|
uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
|
|
|
if (r.total < 5) {
|
|
|
that.loadStatus = "nomore";
|
|
|
}
|
|
|
var hasNoMore = that.dataList.length < 4 && page > 1;
|
|
|
if (hasNoMore || res.length == 0 && page > 1) {
|
|
|
// 已加载到最后一页
|
|
|
that.loadStatus = "nomore";
|
|
|
uni.showToast({
|
|
|
title: '已加载到最后一页',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
var dataList = that.dataList;
|
|
|
|
|
|
|
|
|
if (page == 1) {
|
|
|
dataList = res;
|
|
|
} else {
|
|
|
dataList.push(...res);
|
|
|
}
|
|
|
that.currentPage = page;
|
|
|
that.dataList = dataList;
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
uni.stopPullDownRefresh();
|
|
|
|
|
|
if (page == 1) {
|
|
|
|
|
|
that.currentPage = page;
|
|
|
}
|
|
|
|
|
|
this.util.alert(res);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
.boxContent {
|
|
|
background: #f3f4f6;
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
.footer {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
}
|
|
|
|
|
|
.box-header {
|
|
|
|
|
|
position: fixed;
|
|
|
/* top: 0; */
|
|
|
width: 100%;
|
|
|
z-index: 99;
|
|
|
}
|
|
|
|
|
|
|
|
|
.u-row {
|
|
|
margin: 10rpx 0;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.u-card {
|
|
|
z-index: 1;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.search-wrap {
|
|
|
background: #0385e5;
|
|
|
padding: 20rpx;
|
|
|
}
|
|
|
|
|
|
.overflowmask {
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.loadmore {
|
|
|
padding: 24rpx !important
|
|
|
}
|
|
|
|
|
|
.listfixed {
|
|
|
position: fixed;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.u-config-wrap {
|
|
|
padding: 30rpx;
|
|
|
}
|
|
|
|
|
|
.bg-purple {
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
|
|
|
.slot-content {
|
|
|
background-color: #FFFFFF;
|
|
|
padding: 24rpx;
|
|
|
|
|
|
.item-box {
|
|
|
margin-bottom: 50rpx;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.item {
|
|
|
border: 1px solid $u-type-primary;
|
|
|
color: $u-type-primary;
|
|
|
padding: 8rpx 40rpx;
|
|
|
border-radius: 100rpx;
|
|
|
margin-top: 30rpx;
|
|
|
}
|
|
|
|
|
|
.active {
|
|
|
color: #FFFFFF;
|
|
|
background-color: $u-type-primary;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|
