bigDataApp/pages/monitor/index.vue

<template>
	<view class="">
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<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://www.hnyfwlw.com:8006/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="content_title">
							<view class="" style="font-size:28rpx;color: #999;">
								设备ID：{{item.device_id}}
							</view>
							<!-- @click.stop="modification(item)" -->
							<view class="sim" v-if="item.sim" @click.stop="siminfo(item.sim)">
								SIM卡
							</view>
						</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://www.hnyfwlw.com:8006/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/webview?device_id=" + item.device_id + "&accessToken=" + this.accessToken
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			siminfo(sim){
				uni.navigateTo({
					url: "./sim?simid="+sim
				})
			}
		},
		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%;

		.content_title {
			display: flex;
			justify-content: space-between;
			.sim {
				width: 126rpx;
				color: #42b983;
				height: 40rpx;
				text-align: center;
				border: 1rpx solid #42b983;
				border-radius: 25rpx;
				font-size: 24rpx;
				line-height: 35rpx;
				position: absolute;
				top: 100rpx;
				right: 20rpx;
			}
		}
	}

	.top {
		position: fixed;
		right: 30px;
		bottom: 100px;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>