166 lines
3.9 KiB
Vue
166 lines
3.9 KiB
Vue
<template>
|
||
<view class="card-group">
|
||
<view class="card-group" v-if="total === 0">
|
||
<leruge-empty text="暂无数据" type="minus"></leruge-empty>
|
||
</view>
|
||
<view class="cu-card dynamic" v-if="total != 0" v-for="(item,index) in patrolList" :key="index">
|
||
<view class="cu-item shadow" @click="goItem(item.id)">
|
||
<view class="cu-list menu-avatar">
|
||
<view class="cu-item">
|
||
<view class="content flex-sub card-title">
|
||
<view>{{item.equip}}</view>
|
||
<button class="label-btn" size="mini"
|
||
:style="{'background': item.bgColor,'color':item.color}">{{item.nameStatus}}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content-container">
|
||
<view class="text-content">
|
||
<text class="iconfont "></text>
|
||
<text class="text-description">任务编号： {{item.taskNum}}</text>
|
||
</view>
|
||
<view class="text-content">
|
||
<text class="iconfont "></text>
|
||
<text class="text-description">巡检设备： {{item.equip}}</text>
|
||
</view>
|
||
<view class="text-content">
|
||
<text class="iconfont "></text>
|
||
<text class="text-description">任务创建时间： {{item.createTime}}</text>
|
||
</view>
|
||
<view class="text-content">
|
||
<text class="iconfont "></text>
|
||
<text class="text-description">计划完成时间： {{item.planTime}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="finished == true" class="loading-tip">{{ tipText }}</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {
|
||
listPatrol
|
||
} from "@/api/patrol/patrol.js"
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
finished: false,
|
||
tipText: "正在加载...",
|
||
total: 0,
|
||
patrolList: [],
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
status: null
|
||
},
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
const allTotal = this.queryParams.pageNum * this.queryParams.pageSize;
|
||
if (allTotal < this.total) {
|
||
this.queryParams.pageNum += 1;
|
||
this.getListPatrol();
|
||
} else {
|
||
this.finished = true;
|
||
this.tipText = "已加载完成";
|
||
}
|
||
},
|
||
onShow() {
|
||
this.patrolList = [];
|
||
this.getListPatrol();
|
||
},
|
||
methods: {
|
||
getListPatrol(){
|
||
this.finished = true;
|
||
this.queryParams.status = 1;
|
||
listPatrol(this.queryParams).then((res) =>{
|
||
this.finished = false;
|
||
this.patrolList = this.patrolList.concat(res.rows);
|
||
this.total = res.total;
|
||
this.patrolList.forEach((item) => {
|
||
item.color = "#FFF";
|
||
if (item.type === 1) {
|
||
item.bgColor = "#f1b01a";
|
||
item.nameStatus = "专业巡检"
|
||
} else if (item.type === 0) {
|
||
item.bgColor = "#1771f7";
|
||
item.nameStatus = "定期巡检"
|
||
}
|
||
})
|
||
})
|
||
},
|
||
//前往详情页
|
||
goItem(id) {
|
||
this.$tab.navigateTo("/pages/work/patrol/detailsPatrol?id=" + id);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 卡片的样式 start */
|
||
.card-group .cu-card .cu-item {
|
||
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
|
||
}
|
||
|
||
.card-group .card-title {
|
||
left: 20px !important;
|
||
color: #333;
|
||
font-weight: 600;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: calc(100% - 20px) !important;
|
||
}
|
||
|
||
.card-group .card-title .label-btn {
|
||
margin: 0;
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
border-top-left-radius: 16px;
|
||
border-bottom-left-radius: 16px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.card-group .cu-list.menu-avatar>.cu-item {
|
||
height: 50px;
|
||
}
|
||
|
||
.card-group .cu-list.menu-avatar>.cu-item:after {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.card-group .content-container {
|
||
padding-left: 20px;
|
||
color: #909399;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.card-group .content-container .text-content .iconfont {
|
||
font-size: 16px;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.card-group .content-container .text-content .text-description {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.card-group .text-bottom {
|
||
margin: 0 20px;
|
||
border-top: 1px dotted #aaa;
|
||
padding: 6px 0;
|
||
}
|
||
|
||
/* 卡片的样式 end */
|
||
|
||
/* 下拉加载提示字的样式 end */
|
||
.loading-tip {
|
||
font-size: 12px;
|
||
color: #666;
|
||
padding-bottom: 12px;
|
||
text-align: center;
|
||
}
|
||
</style>
|