nlu_App/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="监控系统" right-icon="search"
					@clickRight="clickRight" size="16"></uni-nav-bar>
				<view class="inputs" :style="{'width':width+'rpx'}">
					<input type="text" value="" placeholder="请输入设备ID或设备名称" v-model="imports" @input="searchinp"
						class="inputbox" :clearable="false" />
					<u-icon name="search" size="40" class="icon" @click="search"></u-icon>
				</view>
				<view class="" style="margin-top: -10rpx;">
					<image :src="$imageURL+'/bigdata_app/image/monitor/banner.png'" mode="widthFix">
					</image>
				</view>
			</view>
			<view class="loading" v-if="loadingtf">
				<image src="../../static/images/ajax-loader.gif" mode="" class="img"></image>
			</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">
							<u-icon name="jiankong" custom-prefix="custom-icon"
								:class="item.is_online==1?'icon':'noicon'"></u-icon>
							<text>
								监控
							</text>
						</view>
					</equipItem>
				</template>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="$imageURL+'/bigdata_app/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode="">
			</image>
		</view>
	</view>
</template>

<script>
	import {
		Debounce
	} from "../../util/anitthro.js"
	import equipItem from "../../components/equip-item/equip-item"
	export default {
		data() {
			return {
				listArr: [],
				page: 1,
				accessToken: '',
				counts: '',
				isTop: false,
				contenttf: false,
				width: 0, //顶部搜索栏宽度
				imports: "", //搜索id
				loadingtf:false,//loading
			}
		},
		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() {
				this.loadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.list_camera',
					data: {
						page: this.page,
						page_size: 10,
						device_id: this.imports,
					}
				})
				this.loadingtf = false
				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=" + uni.getStorageSync('session_key')
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			siminfo(sim) {
				uni.navigateTo({
					url: "./sim?simid=" + sim
				})
			},
			clickRight() {
				// uni.navigateTo({
				// 	url: "./search"
				// })
				this.width = 600
			},
			search() { //搜索按钮搜索
				this.listArr = []
				this.getEquipList()
			},
			searchinp() { //自动搜索
				Debounce(() => {
					this.listArr = []
					this.getEquipList()
				}, 1000)()
			},
		},
		components: {
			equipItem
		}

	}
</script>

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

	.inputs {
		height: 54rpx;
		background-color: #E4E4E4;
		border-radius: 27rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		transition: width 0.5s;
		overflow: hidden;
		padding-top: 8rpx;
		box-sizing: border-box;

		.inputbox {
			width: 85%;
			text-indent: 1rem;
			font-size: 26rpx;
		}

		.icon {
			position: absolute;
			top: 8rpx;
			right: 26rpx;
		}
	}

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

		.icon {
			font-size: 32rpx;
			color: #19BE6B;
		}

		.noicon {
			font-size: 32rpx;
			color: #f00;
		}

		text {
			margin-left: 10px;
		}
	}

	.contenttf {
		position: absolute;
		top: 170px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		font-size: 20px;
	}
	.loading{
		position: fixed;
		top: 440px;
		width: 95%;
		left: 2.5%;
		text-align: center;
		.img{
			width: 300rpx;
			height: 40rpx;
		}
	}
	.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>