hbj_app/pages/indexpage/sheShiXunJian/sheShiXunJian.vue

<template>
	<view class="sheShiXunJian-container">
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="设施巡检" :autoBack="true">
		
		</u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs @change="changeTabs" :current="currentTabs" :list="tabsList" lineWidth="187" lineColor="#1890FF"
				:activeStyle="{ color: '#1890FF' }" :inactiveStyle="{ color: '#333333' }"
				:itemStyle="{ width: '50%', height: '44px', fontSize: '14px' }"></u-tabs>
		</u-sticky>
		<scroll-view v-if="pollingLists.length > 0" scroll-y="true" class="scroll-Y" refresher-enabled="true"
			:refresher-triggered="triggered" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
			@scrolltolower="scrolltolower" refresher-background="#f6f7fb">
			<view v-for="(item, index) in pollingLists" class="scroll-item"
				@click="goToPage(item.facilitiesId, item.id)">
				<view class="item-top">
					<view class="item-top-left">
						<view class="item-top-bianhao">编号</view>
						<text class="item-top-number">{{ item.facilitiesCode }}</text>
					</view>
					<view class="item-top-bianhao" style="color: red;">{{ item.isError === 'Y' ? '巡检异常' : '' }}</view>
				</view>
				<view class="item-bottom">
					<image class="item-bottom-left" src="../../../static/images/polling/xiaofanshuan.png"
						mode="scaleToFill" />
					<view class="item-bottom-right">
						<view class="right-title">{{ item.facilitiesName }}</view>
						<view class="right-area">
							<image src="../../../static/images/implement/area.png" mode="scaleToFill" />
							<view>{{ item.address }}</view>
						</view>
						<view class="right-area">
							<image src="../../../static/images/implement/time.png" mode="scaleToFill" />
							<view>上次巡检时间：{{ item.year }}-{{ item.month }}-{{ item.day }}</view>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view class="item-bottom-btn">
					<u-button class="btn-info" text="查看详情" :style="{
							backgroundColor: item.isOver == '0' ? '#FF9E49' : '#4996FF'
						}"></u-button>
				</view>
			</view>
			<view style="height: 50rpx; width: 100%"><u-loadmore :status="loadmoreStatus" lineColor="#1CD29B"
					@loadmore="getLoadmore" /></view>
		</scroll-view>
		<u-empty v-else class="scroll-Y" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
	</view>
</template>

<script>
	import {
		inspectionPlanList
	} from '@/api/indexpage/polling/index.js';
	export default {
		data() {
			return {
				triggered: false,
				currentTabs: 0,
				pollingLists: [],
				loadmoreStatus: 'loadmore',
				tabsList: [{
						name: '未巡检',
						badge: {
							value: null
						}
					},
					{
						name: '已巡检',
						badge: {
							value: null
						}
					}
				]
			};
		},
		onShow() {
			this.currentTabs = 0;
			this.getInspectionPlanList();
		},
		methods: {
			changeTabs(value) {
				if (value.name == '未巡检') {
					this.currentTabs = 0;
				} else {
					this.currentTabs = 1;
				}
				this.getInspectionPlanList();
			},
			goToPage(ssId, id) {
				//携带设备id
				this.$tab.navigateTo(
					`/pages/indexpage/sheShiXunJian/XunJianDetail/XunJianDetail?ssId=${ssId}&isType=${this.currentTabs}&xxId=${id}`
				);
			},
			onRefresh() {
				//   console.log("自定义下拉刷新被触发");
				if (this.triggered) return;
				this.triggered = true;
				this.pollingLists = [];
				this.getInspectionPlanList();
			},
			onRestore() {
				this.triggered = false; // 需要重置
				//   console.log("重置");
			},
			scrolltolower() {
				if (this.triggered) return;
				//   console.log("滚动到底部");
				this.triggered = true;
				this.getInspectionPlanList();
			},
			goSearch() {
				this.pollingLists = [];
				this.getInspectionPlanList();
			},
			getLoadmore() {
				this.getInspectionPlanList();
			},
			async getInspectionPlanList() {
				this.loadmoreStatus = 'loading';
				let result = await inspectionPlanList()
				this.triggered = false;
				if (result.code == 200) {
					let isDone = [],
						isNoDone = [];

					result.rows.forEach((item, index) => {
						if (item.isOver == '0' && item.status == '1') {
							isNoDone.push(item);
						} else if (item.isOver == '1') {
							isDone.push(item);
						}
					});
					this.pollingLists = [];
					if (this.currentTabs == 0) {
						this.pollingLists = isNoDone;
						this.$set(this.tabsList[0].badge, 'value', this.pollingLists.length);
					} else {
						this.pollingLists = isDone;
					}
					if (this.pollingLists.length < result.total) {
						this.loadmoreStatus = 'loadmore';
					} else {
						this.loadmoreStatus = 'nomore';
					}
				}
			}
		}
	};
</script>

<style lang="scss">
	.sheShiXunJian-container {
		font-family: Noto Sans S Chinese;

		/deep/ .u-badge {
			margin-left: -7px !important;
			margin-top: -11px;
			border: 2px solid #ffffff;
			background-color: #f54547;
			font-family: Noto Sans S Chinese;
			font-weight: 500;
			font-size: 11px;
			color: #ffffff;
		}

		.scroll-Y {
			overflow: hidden;
			width: 100%;
			box-sizing: border-box;
			padding: 36rpx 30rpx 0 30rpx;
			// #ifndef APP-PLUS
			height: calc(100vh - 44px - 44px);
			// #endif
			// #ifdef APP-PLUS
			height: calc(100vh - 44px);
			// #endif

			.scroll-item {
				box-sizing: border-box;
				padding: 26rpx 20rpx 34rpx 22rpx;
				background-color: #fff;
				width: 100%;
				height: 338rpx;
				margin-bottom: 30rpx;
				border-radius: 10rpx;
				box-shadow: 0px 3px 4px 0px rgba(190, 207, 228, 0.4);

				.item-top {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40rpx;

					.item-top-left {
						display: flex;
						align-items: center;

						.item-top-bianhao {
							text-align: center;
							line-height: 34rpx;
							font-weight: 500;
							font-size: 12px;
							color: #ffffff;
							width: 82rpx;
							height: 34rpx;
							background: #16c4af;
							border-radius: 9px;
							margin-right: 14rpx;
						}

						.item-top-number {
							font-weight: bold;
							font-size: 15px;
							color: #333333;
						}
					}

					.item-top-right {
						width: 154rpx;
						height: 38rpx;
					}
				}

				.item-bottom {
					margin-top: 22rpx;
					height: 124rpx;
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 28rpx;

					.item-bottom-left {
						height: 100%;
						width: 130rpx;
						margin-right: 16rpx;
					}

					.item-bottom-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 100%;
						width: calc(100% - 130rpx);

						.right-title {
							width: 100%;
							font-weight: 500;
							font-size: 15px;
							color: #333333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.right-area {
							display: flex;
							align-items: center;

							image {
								width: 26rpx;
								height: 24rpx;
								margin-right: 16rpx;
							}

							view {
								width: calc(100% - 20rpx);
								font-weight: normal;
								font-size: 13px;
								color: #7d858e;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}
				}

				.item-bottom-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100rpx;

					.btn-info {
						width: 432rpx;
						height: 50rpx;
						font-weight: normal;
						font-size: 14px;
						color: #ffffff;
						box-shadow: 0px 3px 4px 0px rgba(190, 207, 228, 0.4);
						border-radius: 5px;
					}
				}
			}
		}
	}
</style>