| | |
| | | <template>
|
| | | <view class="main_app">
|
| | | <!-- <view class="head_wrap">
|
| | | <!-- <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="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> |
| | | <scroll-view scroll-y="true" class="scroll_Y" @scrolltolower="scrolltolower">
|
| | | <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>
|
| | | </scroll-view>
|
| | |
|
| | | <!-- -->
|
| | | </view>
|
| | | </template>
|
| | |
|
| | | <script> |
| | | import { ywPatrolTaskPost } from '@/api'
|
| | | <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: '已取消', |
| | | 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 |
| | | }) |
| | | onLoad() {
|
| | | this.getList()
|
| | | },
|
| | | methods: { |
| | | scrolltolower() { |
| | | const { |
| | | total, |
| | | list |
| | | } = this |
| | | if (list.length < total) { |
| | | this.page = this.page + 1 |
| | | this.getList() |
| | | } else { |
| | | this.showToast('暂无更多数据') |
| | | } |
| | | },
|
| | | tabsClick(val) {
|
| | | this.param.queryStatus = 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; |
| | | } |
| | | |
| | | } |
| | | |
| | | <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;
|
| | |
| | | background: #F7F7F7;
|
| | | border-radius: 38rpx;
|
| | | padding-left: 30rpx;
|
| | | input{ |
| | | flex: 1; |
| | |
|
| | | input {
|
| | | flex: 1;
|
| | | }
|
| | |
|
| | | .search {
|
| | | width: 28rpx;
|
| | | height: 28rpx;
|
| | |
| | |
|
| | | }
|
| | |
|
| | | .scroll_Y {
|
| | | height: calc(100vh - 230rpx);
|
| | | }
|
| | |
|
| | | .list {
|
| | | .item {
|
| | | display: flex;
|
| | | // height: 290rpx; |
| | | padding: 30rpx 0; |
| | | // height: 290rpx;
|
| | | padding: 30rpx 0;
|
| | | border-bottom: 2rpx solid #E5E5E5;
|
| | | &:nth-last-child(1){ |
| | | border: none; |
| | | }
|
| | | .icon {
|
| | | width: 80rpx;
|
| | | height: 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; |
| | | } |
| | | 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;
|
| | | }
|
| | | }
|
| | | }
|
| | | }
|