bigdata_WX/pages/monitor/index.vue

<template>
	<view class="">
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 20px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="监控系统"></uni-nav-bar>
				<view class="" style="margin-top: -10rpx;">
					<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/monitor/banner.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="contenttf" v-if="contenttf">
				暂无数据
			</view>
			<view class="content" v-else>
				<template v-for="(item,index) in listArr">
					<equipItem @click.native="itemClick(item)" v-bind:item="item" :key="index">
						<view class="" style="font-size:28rpx;color:#999">
							设备ID : {{item.device_id}}
						</view>
						<view class="type-name">
							<view class="iconfont icon-jiankong"></view>
							<text>
								监控
							</text>
						</view>
					</equipItem>
				</template>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>

<script>
	import equipItem from "../../components/equip-item/equip-item"
	export default {
		data() {
			return {
				listArr: [],
				page: 1,
				accessToken: '',
				counts: '',
				isTop:false,
				contenttf:false
			}
		},
		onLoad() {
			this.getEquipList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.listArr = []
			this.getEquipList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)

		},
		onReachBottom() {
			this.page++
			if (this.counts == this.listArr.length) {
				return false
			}
			this.getEquipList()
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
		methods: {
			async getEquipList() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.list_camera',
					data: {
						page: this.page
					}
				})
				console.log(res)
				if(res.counts==0){
					this.contenttf = true
				}else{
					this.contenttf = false
				}
				let data = res.data
				let arr = data.map(item => {
					item.imei=item.device_id
					item.is_online=item.status
					return {
						...item,
						device_status: item.status
					}
				})
				console.log(res)
				console.log(this.listArr)
				this.listArr = [...this.listArr, ...arr]
				this.accessToken = res.accessToken
				this.counts = res.counts
			},
			clickLeft() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			itemClick(item) {
				// uni.navigateTo({
				// 	url:"/pages/monitor/detail?device_id="+item.device_id+"&accessToken="+this.accessToken
				// })
				// uni.setStorage({
				// 	key: 'obj',
				// 	data: JSON.stringify({
				// 		device_id: item.device_id,
				// 		accessToken: this.accessToken
				// 	})
				// })
				uni.navigateTo({
					url: "/pages/webview?device_id=" + item.device_id + "&accessToken=" + this.accessToken
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			}
		},
		components: {
			equipItem
		}

	}
</script>

<style lang="scss">
	image {
		width: 100%;
	}

	.type-name {
		color: #999;
		display: flex;
		justify-content: flex-start;
		font-size: 12px;

		text {
			margin-left: 10px;
		}
	}
	.contenttf{
		position: absolute;
		top: 170px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		font-size: 20px;
	}
	.content{
		position: absolute;
		top: 130px;
		width: 95%;
		left: 2.5%;
	}
	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>