baozhida-building-app/src/pages/monitoring/index.vue

<template>
	<!-- 监控管理 -->
	<view>
		<uv-navbar title="" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick">
			<template v-slot:center>
				<view class="uv-nav-slot" style="width: 72%;">
					<uv-search v-model="monitoringAids" :actionStyle="{color:'#fff'}" placeholder="请输入设备名称"
						@search="searchWork" @custom="searchWork"></uv-search>
				</view>
			</template>
		</uv-navbar>
		<scroll-view :style="{height: `calc(100vh - ${(headTop + 44) + 'px'})`,}" :scroll-top="scrollTop"
			scroll-with-animation="true" scroll-y="true" @scrolltolower="loadMore" @scroll="handleScroll"
			:lower-threshold="50">
			<view class="camera_type_box">
				<view class="item_type_camera">
					<view class="camera_bxo_sum">
						<text class="iconfont">&#xe6c8;</text>
						<view class="sum_title_camera">总量</view>
					</view>
					<span class="sum_camera" style="color: #39ecf5;">{{totalContent }}</span>
				</view>
				<!-- <view class="item_type_camera">
					<span class="sum_title_camera">在线</span>
					<view class="center_in">
						<text class="iconfont" style="color: rgb(34, 190, 68);">&#xe62e;</text>
						<span class="sum_camera">999</span>
					</view>
				</view>
				<view class="item_type_camera">
					<span class="sum_title_camera">离线</span>
					<view class="center_in">
						<text class="iconfont" style="color: rgb(211, 205, 85);">&#xe6d6;</text>
						<span class="sum_camera">999</span>
					</view>
				</view> -->
			</view>
			<view class="card_camera" v-if="workData.length > 0">
				<view class="camera_item" v-for="(item,index) in workData" :key="index" @click="goparticulars(item)">
					<view class="facility_cameraName">{{item.name}}</view>
					<view class="facility_code">编号：{{item.indexCode}}</view>
					<view class="facility_secondary">区域位置：{{getLocation(item.regionPathName)}}</view>
					<view class="camera_img">
						<uv-image width="100%" mode="widthFix" height="354rpx" :src="item.url">
							<template v-slot:loading>
								<uv-loading-icon color="#1599db"></uv-loading-icon>
							</template>
							<template v-slot:error>
								<view style="display: flex;flex-direction: column;align-items: center;">
									<uv-icon name="photo" size="30"></uv-icon>
									<view style="font-size: 24rpx;">加载失败</view>
								</view>
							</template>
						</uv-image>
					</view>
				</view>
				<view style="padding-bottom:20rpx" v-if="pageNo > 1">
					<uv-load-more :status="status" color="#ffffff" />
				</view>
			</view>
			<view style="margin-top: 30%;" v-else>
				<x-empty></x-empty>
			</view>
		</scroll-view>
		<view class="top-back" @click="topBack" v-if="backShow">
			<text class="iconfont icon_back_top">&#xe806;</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { GetCameraSearch } from "@/api/monitoring";
	import { ref, nextTick } from 'vue'
	const cameraData : any = ref(10)
	import { onShow, onReady } from "@dcloudio/uni-app";
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	onShow(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
		nextTick(() => {
			pageNo.value = 1
			workData.value = []
			getCamera()
		})
	});
	const headTop = ref(0)
	const scrollTop : any = ref(-1)
	const backShow : any = ref(false)
	const currentScrollTop = ref(0)

	const totalContent = ref(0)
	const monitoringAids = ref('')
	const status = ref('loadmore')
	const workData : any = ref([])
	const current = ref(0)
	const pageNo = ref(1)
	const pageSize = ref(10)
	const loadingMore = ref(true)
	// 防抖函数
	function debounce(func : any, wait : any) {
		let timeout : any = null
		return function executedFunction(...args : any) {
			const later = () => {
				clearTimeout(timeout)
				func(...args)
			}
			clearTimeout(timeout)
			timeout = setTimeout(later, wait)
		}
	}
	// 处理滚动事件
	const handleScroll = debounce((e : any) => {
		scrollTop.value = -1
		currentScrollTop.value = e.detail.scrollTop
		// 滚动超过200px显示返回顶部按钮
		backShow.value = e.detail.scrollTop > 200
	}, 100)
	// 返回顶部
	function topBack() {
		scrollTop.value = 0
		setTimeout(() => {
			backShow.value = false
		}, 300)
	}
	// 获取监控点列表
	const getCamera = () => {
		GetCameraSearch({
			pageNo: pageNo.value,
			pageSize: pageSize.value,
			name: monitoringAids.value,
		}).then((res : any) => {
			if (res.code == 200) {
				const data = res.data.list
				totalContent.value = res.data.total
				if (data.length > 0) {
					workData.value = workData.value.concat(data)
				}
				if (data.length < pageSize.value) {
					status.value = 'nomore'
					loadingMore.value = true
				} else {
					status.value = 'loading'
					loadingMore.value = false
					pageNo.value++
				}
			}
		})
	}
	// 加载更多数据
	const loadMore = () => {
		console.log('到底了吗');
		if (!loadingMore.value) {
			getCamera()
		}
	};
	// 获取位置/截取
	function getLocation(params) {
		if (!params) {
			return ''
		}
		const parts = params.split('/').filter(p => p)
		if (parts.length > 2) {
			return `${parts[parts.length - 2]}/${parts[parts.length - 1]}`
		}
		return parts.join(' / ')
	}
	// 搜索监控设备
	const searchWork = () => {
		pageNo.value = 1
		workData.value = []
		getCamera()
	}
	// 监控详情
	const goparticulars = (val : any) => {
		uni.navigateTo({
			url: '/pages/monitoring/particulars?indexCode=' + val.indexCode,
		})
	}
	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.scroll-container {
		height: calc(100vh - 88rpx) // 减去搜索框的高度
	}

	.center_in {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.camera_type_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 30rpx 0rpx 30rpx;
	}

	.item_type_camera {
		width: calc(100% - 40rpx);
		// width: calc(32% - 40rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		// height: 200rpx;
		background-color: rgba(85, 110, 143, .3);
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.sum_title_camera {
		font-size: 30rpx;
		color: #fff;
		margin-left: 20rpx;
	}

	.camera_bxo_sum {
		display: flex;
		align-items: center;
	}

	.iconfont {
		color: rgb(57, 236, 245);
		font-size: 60rpx;
		margin-bottom: 5rpx;
	}

	.sum_camera {
		color: #fff;
		font-weight: bold;
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.card_camera {
		display: flex;
		flex-direction: column;

	}

	.camera_item {
		padding: 30rpx;
		margin: 30rpx 30rpx 0rpx 30rpx;
		background-color: rgba(85, 110, 143, .3);
		border-radius: 10rpx;
	}

	.camera_img {
		margin-top: 20rpx;
		width: 100%;
		height: 350rpx;
	}

	.camera_img_video {
		width: 100%;
		height: 100%;
	}

	.facility_cameraName {
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}

	.facility_secondary {
		font-size: 26rpx;
		color: #DCDFE6;
	}

	.facility_code {
		margin-top: 4rpx;
		font-size: 26rpx;
		color: #DCDFE6;
	}

	.search_card {
		display: flex;
		align-items: center;
		margin: 20rpx 30rpx 0rpx 30rpx;
	}

	.top-back {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;
		font-size: 28rpx;
		z-index: 999;
		animation: heart 0.3s;

		@keyframes heart {
			0% {
				right: -30rpx;
			}

			100% {
				right: 30rpx;
			}
		}
	}

	.icon_back_top {
		color: #fff;
		font-size: 46rpx;
	}
</style>