<template>
|
<view class="main_app">
|
<!-- <view class="head_wrap">
|
<view class="search_wrap">
|
<image class="mr12 search" src="@/static/home/ic_search@2x.png" mode="widthFix"></image>
|
<input v-model="param.keyword" @confirm="getList()" type="text" placeholder="搜索楼宇/房间名称" placeholder-class="placeholder9" />
|
</view>
|
</view> -->
|
<!-- -->
|
<view class="tabs">
|
<view class="tab" :class="{active: param.queryStatus == '0,1'}" @click="tabsClick('0,1')">
|
<text>待处理</text>
|
<text class="border"></text>
|
</view>
|
<view class="tab" :class="{active: param.queryStatus == 3}" @click="tabsClick(3)">
|
<text>已处理</text>
|
<text class="border"></text>
|
</view>
|
<view class="tab" @click="allClick">
|
<view class="name">
|
<image v-if="selectAll" class="icon" src="@/static/checked.png" mode=""></image>
|
<image v-else class="icon" src="@/static/check.png" mode=""></image>
|
<text>查看全部</text>
|
</view>
|
<text class="border"></text>
|
</view>
|
</view>
|
<!-- -->
|
<view class="list">
|
<view class="item" v-for="item in list" @click="itemClick(item)">
|
<image v-if="item.status == 0 || item.status == 1" src="@/static/side/xunjianed.png" class="icon"></image>
|
<image v-else src="@/static/side/xunjian.png" class="icon"></image>
|
<view class="content">
|
<view class="name_wrap line">
|
<view class="name">{{item.planTitle}}</view>
|
<view class="status" :class="{
|
green: item.status == 1,
|
red: item.status == 2,
|
gray: item.status == 3 || item.status == 4
|
}">{{statusM[item.status]}}</view>
|
</view>
|
<view class="line" v-if="item.startDate">任务日期：{{ item.startDate.slice(0, 11) }}</view>
|
<view class="line">执行时间：{{ item.startDate.slice(11, 16) }} 至 {{ item.endDate.slice(11, 16) }}</view>
|
<view class="line">
|
<view>完成情况：{{item.finishNum || 0}}/{{item.patrolNum}}</view>
|
<view class="btn">
|
<image src="@/static/side/ic_saoma@2x.png" class="saoma" mode=""></image>
|
<view>扫码巡检</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<!-- -->
|
</view>
|
</template>
|
|
<script>
|
import { ywPatrolTaskPost } from '@/api'
|
export default {
|
data() {
|
return {
|
param: {
|
queryStatus: '0,1'
|
},
|
list: [],
|
activeTab: 0,
|
selectAll: false,
|
page: 1,
|
|
statusM: {
|
0: '待开始',
|
1: '进行中',
|
2: '已超期',
|
3: '已完成',
|
4: '已取消',
|
}
|
};
|
},
|
onLoad() {
|
this.getList()
|
},
|
onReachBottom() {
|
const {total,list} = this
|
if (list.length < total) {
|
this.page = this.page + 1
|
this.getList()
|
} else {
|
this.showToast('暂无更多数据')
|
}
|
},
|
methods: {
|
tabsClick(val) {
|
this.param.status = val
|
this.page = 1
|
this.list = []
|
this.getList()
|
},
|
allClick() {
|
this.selectAll = !this.selectAll
|
this.list = []
|
this.page = 1
|
this.getList()
|
},
|
itemClick(item) {
|
uni.navigateTo({
|
url: '/pages/polling/detail?id=' + item.id
|
})
|
},
|
getList() {
|
const { page, param, selectAll } = this
|
ywPatrolTaskPost({
|
model: {...param, dealUserId: selectAll ? '' : uni.getStorageSync('userInfo').id, },
|
page,
|
capacity: 10
|
}).then(res => {
|
this.list = [...this.list, ...res.data.records]
|
this.total = res.data.total
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main_app{
|
padding: 0 30rpx;
|
}
|
.tabs{
|
display: flex;
|
width: 750rpx;
|
margin: 12rpx -30rpx 0;
|
border-bottom: 1rpx solid #E5E5E5;
|
.tab{
|
font-size: 30rpx;
|
color: #666666;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: flex-end;
|
height: 88rpx;
|
.name{
|
display: flex;
|
align-items: center;
|
}
|
.icon{
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 10rpx;
|
}
|
.border{
|
width: 54rpx;
|
height: 6rpx;
|
background-color: #fff;
|
border-radius: 3rpx;
|
margin-top: 24rpx;
|
}
|
}
|
.active{
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
.border{
|
background-color: $primaryColor;
|
}
|
|
}
|
|
}
|
.head_wrap {
|
display: flex;
|
align-items: center;
|
|
.search_wrap {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
height: 76rpx;
|
background: #F7F7F7;
|
border-radius: 38rpx;
|
padding-left: 30rpx;
|
input{
|
flex: 1;
|
}
|
.search {
|
width: 28rpx;
|
height: 28rpx;
|
}
|
}
|
|
}
|
|
.list {
|
.item {
|
display: flex;
|
// height: 290rpx;
|
padding: 30rpx 0;
|
border-bottom: 2rpx solid #E5E5E5;
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-right: 24rpx;
|
}
|
|
.content {
|
flex: 1;
|
color: #666666;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
.line{
|
margin-bottom: 20rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.btn{
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 180rpx;
|
height: 60rpx;
|
background: $primaryColor;
|
color: #fff;
|
font-size: 26rpx;
|
box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,104,255,0.3);
|
border-radius: 30rpx;
|
.saoma{
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 8rpx;
|
}
|
}
|
&:nth-last-child(1){
|
margin-bottom: 0;
|
}
|
}
|
.name_wrap{
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.name{
|
display: flex;
|
align-items: flex-end;
|
font-weight: 600;
|
font-size: 34rpx;
|
color: #222222;
|
}
|
.status{
|
color: $primaryColor;
|
}
|
.green{
|
color: #0ADE79;
|
}
|
.gray{
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
