xunjian_app/scan_pages/patrolrecored/patrolrecored.vue

<template>
	<view >
		<view  class="u-p-t-12 u-p-b-20  u-p-l-20 u-p-r-10" style="background: #FFFFFF;">
			<cSearch @serbtn="setbtn" :sear="'搜索巡检记录'"/>
		</view>
		<u-dropdown style="width: 100%; background: #ffffff">
			<u-dropdown-item @change="drowcitem1" :title="title" :options="options1">
			</u-dropdown-item>
			<u-dropdown-item @change="drowclick" :title="title1" :options="options2">
			</u-dropdown-item>
		</u-dropdown>
		<view class="u-flex f-d-c m-w">
			<scroll-view :scroll-y="true" @scrolltolower="lazyGetRooms()" class=" sc-view   ">
				<u-cell-group v-if="cellmenu.length > 0">
						<navigator hover-class="none" v-for="(item,index) in cellmenu" :key="index"
							:url="`../patroldetail/patroldetail?taskId=${item.id}&roomId=${item.roomId}`">
							<u-cell-item :use-label-slot="true" :border-bottom="true" :border-top="false" :key="index"
								:label-style="{'fontSize':'28rpx', 'color':'rgba(80, 80, 80, 1)' ,'marginBottom':'30rpx'}"
								:icon-style="{'color':'#000'}"
								:title-style="{'color':'#000','fontSize':'32rpx','fontWeight':' blod'}" :arrow="false"
								:label="item.roomName" :title="item.name">
								<u-icon name="arrow-right" slot="right-icon" color="#B3B3B3" size="38"></u-icon>
								<div solt="label" class="left-boto-txt">{{item.username}}：{{item.time}}</div>
							</u-cell-item>
							<view style=" height: 3.5rpx;width: 100%; background: #FFFFFF;"></view>
						</navigator>
						<view style="overflow: hidden;">
							<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
						</view>
				</u-cell-group>
				<block v-else>
					<view v-if="loashow" class="u-text-center" style="margin-top: 400rpx;">
						<u-loading  loashow color="blue" size="50"></u-loading>
					</view>
					<view v-else>
						<u-empty margin-top="400" text="数据为空"  mode="list"></u-empty>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>

</template>

<script>
	import {
		partinfo1
	} from '@/api/index.js'
	import {
		mapState
	} from 'vuex'
	import dayjs from "dayjs";
	import cSearch from '@/components/c-search/index.vue'
	export default {
		components: {
			cSearch,
		},
		data() {
			return {
				options1: [{
						label: '今天',
						value: [dayjs(new Date(new Date(new Date().toLocaleDateString()).getTime())).format(
							"YYYY-MM-DD HH:mm:ss"), dayjs(new Date(new Date(new Date().toLocaleDateString())
							.getTime() + 24 * 60 * 60 * 1000 - 1)).format("YYYY-MM-DD HH:mm:ss")],
					},
					{
						label: '昨天',
						value: [dayjs(new Date(new Date(new Date().toLocaleDateString()).getTime() - 24 * 60 * 60 *
							1000)).format("YYYY-MM-DD HH:mm:ss"), dayjs(new Date(new Date(new Date()
							.toLocaleDateString()).getTime() - 1)).format("YYYY-MM-DD HH:mm:ss")],
					},
					{
						label: '近7日',
						value: [dayjs(new Date(new Date(new Date().toLocaleDateString()).getTime() - (24 * 60 * 60 *
							1000) * 3)).format("YYYY-MM-DD HH:mm:ss"), dayjs(new Date(new Date(new Date()
							.toLocaleDateString()).getTime() + (24 * 60 * 60 * 1000) * 3)).format(
							"YYYY-MM-DD HH:mm:ss")],
					}
				],
				options2: [{
						label: '全部状态',
						value: 1,
					},
					{
						label: '合格',
						value: 2,
					},
					{
						label: '不合格',
						value: 3,
					},
				],
				cellmenu: [], //数据列表
				queryform: {},//请求对象
				//下拉框标题
				title: "时间",
				title1: "状态",
				totalCount: -1, //总项目数
				curPage: 1, //当前页数
				loashow: false,
				//下拉加载配置
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		// 计算属性,从仓库获取timer数据
		computed: {
			...mapState({
				timer: state => state.user.timer
			})
		},
		onLoad() {
			this.getlist(-1)
		},
		methods: {
			//关键字模糊查询
			 setbtn(keyWord) {
				 if(keyWord.text == 0) {
					  this.queryform.keyword = ''
					 this.$nextTick(() => {
					 	this.getlist(-1)
					 })
				 } else {
					 this.queryform.keyword = keyWord.text
					 this.$nextTick(() => {
					 	this.getlist(-1)
					 })
				 }
			},
			// 改变时间筛选数据
			drowcitem1(row) {
				let option1 = JSON.parse(JSON.stringify(this.options1))
				let optiontext = option1.find((index) => {
					if (index.value.toString() == row.toString()) {
						return index
					}
				})
				this.title = optiontext.label
				this.queryform.beginTimeStart = row[0]
				this.queryform.beginTimeEnd = row[1]
				this.$nextTick(() => {
					this.getlist(-1)
				})
			},
			// 改变状态筛选数据
			drowclick(row) {
				if (row == 2) {
					this.queryform.qualified = true
					this.title1 = "合格"
					this.$nextTick(() => {
						this.getlist(-1)
					})
				} else if (row == 3) {
					this.queryform.qualified = false
					this.title1 = "不合格"
					this.$nextTick(() => {
						this.getlist(-1)
					})
				} else {
					this.queryform.qualified = ''
					this.title1 = "全部状态"
					this.$nextTick(() => {
						this.getlist(-1)
					})
				}
			},
			// 获取巡检记录数据
			async getlist(index) {
				if (this.totalCount == -1 || index == -1) {
					this.loashow = true
					this.cellmenu = []
					let data = await partinfo1({
						page: 1,
						size: 10,
						...this.queryform
					})
					this.loashow = false
					const {
						list,
						total,
					} = data.data
					this.totalCount = total //总个数
					this.cellmenu = list.map(Element => {
						Element.time = dayjs(Element.time).format("YYYY-MM-DD HH:mm:ss")
						return Element
					})
				} else {
					let curPage = this.curPage + 1
					if (this.cellmenu.length < this.totalCount) {
						let {
							data
						} = await partinfo1({
							page: curPage,
							size: 10,
							...this.queryform
						})
						data.list.forEach(Element => {
							Element.time = dayjs(Element.time).format("YYYY-MM-DD HH:mm:ss")
						})
						data.list.forEach(i => {
							this.cellmenu.push(i)
						})
						this.curPage = this.curPage + 1
					} else if (this.cellmenu.length == this.totalCount) {
						this.$refs.sacast.show({
							title: '没有更多了',
							type: 'info',
						})
					}
				}
			},
			//懒加载房间数据
			lazyGetRooms() {
				var timer = null;
				if (this.cellmenu.length == this.totalCount) this.status = 'nomore';
				this.status = 'loading';
				clearTimeout(timer)
				timer = setTimeout(() => {
					this.getlist(1)
					if (this.cellmenu.length == this.totalCount) this.status = 'nomore';
					else this.status = 'loading';
				}, 2000)
			}
		}
	}
</script>

<style>
	page {
		background: #ffffff;
	}

	.sc-view {
		height: calc(100vh - 200rpx);
		width: 690rpx;
		box-shadow: 0px 0px 6rpx 0px rgba(6, 0, 1, 0.26);
		border-radius: 10rpx 10rpx 0px 0px;
	}

	.left-boto-txt {
		position: absolute;
		left: 30rpx;
		top: 125rpx;
		font-size: 28rpx;
	}
	.blo {
		width: 100%;
		margin-top: 50rpx;
		height: 400rpx;
	}
</style>