bigdata_WX/pages/equipList/index.vue

<template>
	<view>
		<view class="utabs_box" >
			<view class="search_bot_input" @click="clickRight">
				<input type="text" value="" placeholder="请输入设备ID" v-model="imports" @input="searchinput" disabled/>
				<u-icon name="search" size="36" class="icon" @click="search" color="#949494"></u-icon>
			</view>
			<view class="utabs">
				<u-tabs :list="list" :is-scroll="true" :current="current" @change="change" item-width="140" font-size="24" gutter="20"
				 bar-width="60" active-color="#42b983"></u-tabs>
			</view>
		</view>
		<view class="list">
			<view class="list_item" v-for="(item,index) in eqlistdata" :key="index" @click="historys(item)">
				<view class="list_item_top">
					<p class="p1">
						<image :src="'http://static.yfpyx.com/bigdata_app'+imgpath[0].path" mode=""></image>
						{{item.device_name==''?"--":item.device_name}}
					</p>
					<p :class="[item.is_online?'p2':'p_out']">{{item.is_online?"在线":"离线"}}</p>
				</view>
				<view class="list_item_text">
					<p>设备ID：{{item.imei||item.device_id}}</p>
					<p>适配用户：{{item.real_name==''?"无":item.real_name}}</p>
					<p>添加设备时间：{{item.addtime|timeFormat()}}</p>
					<p>添加设备时间：{{item.uptime|timeFormat()}}</p>
					<p>设备已运行：{{item.days}}天</p>
				</view>
				<view class="list_item_btn" v-if="infoalter" @click.stop="modification(item)">
					信息修改
				</view>
			</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>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				currents:0,
				page: 1,
				size: 10,
				images: [{
						name: "杀虫灯",
						path: "/image/fourMoodBase/3.png", //
						id: 2
					},
					{
						name: "测报灯",
						path: "/image/fourMoodBase/1.png",
						id: 3
					}, {
						name: "性诱测报",
						path: "/image/fourMoodBase/6.png",
						id: 4
					}, {
						name: "环境监测",
						path: "/image/fourMoodBase/5.png",
						id: 5
					}, {
						name: "监控设备",
						path: "/image/fourMoodBase/2.png",
						id: 6
					}, {
						name: "孢子仪",
						path: "/image/fourMoodBase/4.png",
						id: 7
					},
					{
						name: "性诱2.0",
						path: "/image/fourMoodBase/10.png",
						id: 10
					}
				],
				eqlistdata: [],
				isTop: false,
				infoalter: false, // 权限设置,
				type_id: 0, //设备类型,
				imgpath:[]
			}
		},
		methods: {
			async eqlist(tf) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
					data: {
						device_type_id: this.type_id,
						page: this.page,
						page_size: this.size,
					}
				})
				var newtime = +new Date() / 1000
				if(tf){
					this.eqlistdata = this.eqlistdata.concat(res.data)
				}else{
					this.eqlistdata = res.data
				}
				for (var i = 0; i < this.eqlistdata.length; i++) {
					var days = (newtime - this.eqlistdata[i].uptime) / 60 / 60 / 24
					this.eqlistdata[i].days = Math.round(days)
				}
				console.log(res)
			},
			async xyeqlist(tf) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_list',
					data: {
						device_type_id: this.type_id,
						page: this.page,
						page_size: this.size,
					}
				})
				var newtime = +new Date() / 1000
				if(tf){
					this.eqlistdata = this.eqlistdata.concat(res.data)
				}else{
					this.eqlistdata = res.data
				}
				for (var i = 0; i < this.eqlistdata.length; i++) {
					var days = (newtime - this.eqlistdata[i].uptime) / 60 / 60 / 24
					this.eqlistdata[i].days = Math.round(days)
				}
				console.log(res)
			},
			//camera.camera_manage.list_camera
			async camera() { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=camera.camera_manage.list_camera',
					data: {
						page_size: 1,
					}
				})
				this.accessToken = res.accessToken
			},
			change(index) { //头部导航栏的点击
				this.current = index
				this.currents = index
				this.page = 1
				this.eqlistdata = []
				console.log(index)
				for (var i = 0; i < this.images.length; i++) {
					if (this.list[index].name == this.images[i].name) {
						this.type_id = this.images[i].id
					}
				}
				this.imgpath = this.images.filter((item)=>{
					return item.id == this.type_id
				})
				if (this.type_id == 10) {
					this.xyeqlist()
				} else {
					this.eqlist()
				}
			},
			clickRight() { //搜索
				uni.navigateTo({
					url: "./search?id=" + this.type_id
				})
			},
			modification(item) {
				uni.navigateTo({
					url: "./modification?data=" + JSON.stringify(item) + "&id=" + this.type_id,
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			historys(item) {
				switch (this.type_id) {
					case 2:
						uni.navigateTo({
							url: "../prevention/equipmentdetails?shebei=" + JSON.stringify(item)
						})
						break;
					case 5:
						console.log(item)
						var obj = {}
						obj.d_id = item.d_id
						obj.equip_id = item.imei
						obj.is_online = item.is_online
						obj.lat = item.lat
						obj.lng = item.lng
						obj.equip_name = item.device_name
						obj.uptime = item.addtime
						uni.navigateTo({
							url: "../environment/equipment?shebei=" + JSON.stringify(obj)
						})
						break;
					case 6:
						uni.navigateTo({
							url: "/pages/webview?device_id=" + item.imei + "&accessToken=" + this.accessToken
						})
						break;
					case 3:
						item.type = this.type_id
						uni.navigateTo({
							url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item)
						})
						break;
					case 4:
						item.type = this.type_id
						uni.navigateTo({
							url: "../cb/equip-detail/equip-detail?info=" + JSON.stringify(item)
						})
						break;
					default:
						item.type = this.type_id
						uni.navigateTo({
							url: "../cb/xy2.0/particulars?info=" + JSON.stringify(item)
						})
						break;
				}
			}
		},
		onShow() {
			this.list=[]
			this.camera()
			this.current=0
			this.currents=0
			// console.log(this.current)
			uni.getStorage({
				key: "jurisdiction",
				success: (res) => {
					console.log(JSON.parse(res.data))
					let items = JSON.parse(res.data).filter((item) => {
						return item.purview_name == "设备管理"
					})
					let items2 = items[0].children.filter((item) => {
						return item.purview_name == "设备列表"
					})
					console.log(items2[0].children)
					this.infoalter = items2[0].children.some((item) => {
						return item.purview_name == "修改名称" || item.purview_name == "添加位置"
					})
					console.log(this.infoalter)
					var res = JSON.parse(res.data)
					for (var i = 0; i < res.length; i++) {
						switch (res[i].purview_name) {
							case "测报系统":
								for (var j = 0; j < res[i].children.length; j++) {
									var obj = {
										name: res[i].children[j].purview_name=="虫情测报灯"?"测报灯":res[i].children[j].purview_name
									}
									this.list.push(obj)
								}
								break;
							case "监控系统":
								for (var j = 0; j < res[i].children.length; j++) {
									var obj = {
										name: res[i].children[j].purview_name
									}
									this.list.push(obj)
								}
								break;
							case "环境监测系统":
								for (var j = 0; j < res[i].children.length; j++) {
									var obj = {
										name: res[i].children[j].purview_name
									}
									this.list.push(obj)
								}
								break;
							case "防治系统":
								for (var j = 0; j < res[i].children.length; j++) {
									var obj = {
										name: res[i].children[j].purview_name
									}
									this.list.push(obj)
								}
								break;
						}
					}
					for (var i = 0; i < this.images.length; i++) {
						if (this.list[this.current].name == this.images[i].name) {
							this.type_id = this.images[i].id
						}
					}
					this.imgpath = this.images.filter((item)=>{
						return item.id == this.type_id
					})
					if (this.type_id == 10) {
						this.xyeqlist(false)
					} else {
						this.eqlist(false)
					}
				},
			})
		},
		onReachBottom() {
			this.page++
			if (this.type_id == 10) {
				this.xyeqlist(true)
			} else {
				this.eqlist(true)
			}
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		}
	}
</script>
<style lang="scss">
	/deep/.uni-icons {
		font-size: 40rpx !important;
	}
	.utabs_box {
		width: 100%;
		position: fixed;
		top: 0px;
		background-color: #FFFFFF;
		z-index: 100;
		.utabs {
			width: 95%;
			// margin: 64rpx auto;
		}
		.search_bot_input {
			width: 90%;
			height: 54rpx;
			background-color: #ebebeb;
			border-radius: 27rpx;
			box-sizing: border-box;
			padding-top: 8rpx;
			margin: 0 auto;
			position: relative;
			input {
				width: 100%;
				// text-indent: 1rem;
				font-size: 26rpx;
				padding-left: 40px;
			}
			.icon {
				position: absolute;
				top: 8rpx;
				left: 36rpx;
			}
		}
	}

	.list {
		width: 100%;
		background-color: #FDFDFD;
		margin-top: 160rpx;
		margin-bottom: 100rpx;
		.list_item {
			width: 90%;
			margin: 20rpx auto;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #FFFFFF;
			box-shadow: 0 0 10rpx #bcb9ca;

			.list_item_top {
				display: flex;
				justify-content: space-between;

				.p1 {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;

					image {
						width: 40rpx;
						height: 40rpx;
						vertical-align: text-top;
						margin-right: 20rpx;
					}
				}

				.p2 {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: #42b983;
				}

				.p_out {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 28rpx;
					color: red;
				}
			}

			.list_item_text {
				margin-top: 20rpx;

				p {
					font-size: 24rpx;
					color: #636363;
					margin-top: 10rpx;
				}

				p:first-child {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.list_item_btn {
				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: 136rpx;
				right: 20rpx;
			}
		}
	}

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

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