nlu_App/pages/fourBase/basefacility.vue

<template>
	<view>
		<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>
			<view class="ass_list">
				<view class="equipment" v-for="(items,indexs) in assignments" :key="items.id" v-if="tishiTF"
					@click="skip(items)">
					<view class="equipment_top">
						<image :src="$imageURL+'/bigdata_app/image/fourMoodBase/'+items.equip_type+'.png'" mode=""
							class="equipment_top_img"></image>
						<span class="equipment_top_name">{{items.type_name}}</span>
					</view>
					<view class="equipment_bot">
						<p class="equipment_bot_id">设备ID：{{items.device_id}}</p>
						<p class="equipment_bot_name">设备名称：{{items.device_name}}</p>
						<view v-if="items.is_online==1" class="equipment_state">在线</view>
						<view v-else class="equipment_state2">离线</view>
					</view>
				</view>
				<view class="tishi" v-if="!tishiTF">
					暂无数据
				</view>
			</view>
		</view>
		<view class="top" v-if="isTop" @click="top">
			<image :src="$imageURL+ '/bigdata_app'+'/image/6209a98f0cb3b5086f2ca36152c9269.png'" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base_id: "",
				assignments: [],
				images: [{
					path: "/image/fourMoodBase/1.png",
					id: 3
				}, {
					path: "/image/fourMoodBase/5.png",
					id: 5
				}, {
					path: "/image/fourMoodBase/2.png",
					id: 6
				}, {
					path: "/image/fourMoodBase/4.png",
					id: 3
				}, {
					path: "/image/fourMoodBase/qxz.png",
					id: 5
				}, {
					path: "/image/fourMoodBase/jk.png",
					id: 6
				}, {
					path: "/image/fourMoodBase/bzy.png",
					id: 7
				}, {
					path: "/image/fourMoodBase/10.png",
					id: 10
				}],
				tishiTF: false,
				isTop: false
			}
		},
		methods: {
			async ybase(id) { //获取分布位置
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=base.bases.base_map_list',
					data: {
						base_id: id
					}
				})
				this.assignments = res
				console.log(this.assignments)
				if (this.assignments.length == 0) {
					this.tishiTF = false
				} else {
					this.tishiTF = true
				}
			},
			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
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			top() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				})
			},
			async skip(items) {
				console.log(items)
				var item = JSON.stringify(items)
				switch (items.equip_type) {
					case 5:
					
						const res = await this.$myRequest({
							url: '/api/api_gateway?method=weather.weather.qxz_page',
							data: {
								page: 1,
								device_status: '',
								page_size: 10,
								device_id: items.device_id,
							},
						})
						let item = {
							...items
						}
						if (res.nums == 1) {
							item = {
								...items,
								...res.ids[0]
							}
						}

						uni.navigateTo({
							url: "../environment/equipment?shebei=" + JSON.stringify(item)
						})
						break
					case 6:
						uni.navigateTo({
							url: "/pages/webview?device_id=" + items.device_id + "&accessToken=" + uni
								.getStorageSync('session_key')
						})
						break
					case 43:
						const resFm = await this.$myRequest({
							url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
							data: {
								device_type_id: 43,
								page: 1,
								page_size: "10",
								device_id: items.device_id,
							}
						})
						let item43 = {
							...items
						}
						if (resFm.counts == 1) {
							item43 = {
								...items,
								...resFm.data[0]
							}
						}
						uni.navigateTo({
							url: "../fmSys/details?info=" + JSON.stringify(item43)
						})
						break;
					case 44:
						uni.navigateTo({
							url: "/pages/webview?device_id=" + items.device_id + "&accessToken=" + uni
								.getStorageSync('session_key') + '&type=dgp'
						})
						break
					case 10:
						uni.navigateTo({
							url: '/pages/cb/xy2.0/particulars?info=' + item
						});
						break
					case 26:
					case 11:
						const res26 = await this.$myRequest({
							url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
							data: {
								device_type_id: items.equip_type,
								page: 1,
								page_size: "10",
								device_id: items.device_id,
							}
						})
						let item26 = {
							...items
						}
						if (res26.counts == 1) {
							item26 = {
								...items,
								...res26.data[0]
							}
						}

						uni.navigateTo({
							url: '../disease/cmb?shebei=' + JSON.stringify(item26),
						});
						break;
						case 45:
						const res45 = await this.$myRequest({
							url: '/api/api_gateway?method=weather.weather.shang_qing_qxz_page',
							data: {
								page: 1,
								page_size: "10",
								device_id: items.device_id,
							}
						})
						let item45 = {
							...items
						}
						if (res45.nums == 1) {
							item45 = {
								...items,
								...res45.ids[0]
							}
						}
						uni.navigateTo({
							url: "../environment/equipment?shebei=" + JSON.stringify(item45)
						})
						break;
					default:
						const resDefault = await this.$myRequest({
							url: '/api/api_gateway?method=forecast.worm_lamp.lamp_list',
							data: {
								device_type_id: items.equip_type,
								page: 1,
								page_size: "10",
								device_id: items.device_id,
							}
						})
						let itemDefault = {
							...items
						}
						if (resDefault.counts == 1) {
							itemDefault = {
								...items,
								...resDefault.data[0]
							}
						}

						uni.navigateTo({
							url: '/pages/cb/equip-detail/equip-detail?info=' + JSON.stringify(itemDefault)
						});
						break
				}
			}
		},
		onLoad(option) {
			console.log('加载了', option)
			this.base_id = option.id
			this.ybase(option.id)
			this.camera()
		},
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop > 200) { //距离大于200时显示
				this.isTop = true
			} else { //距离小于200时隐藏
				this.isTop = false
			}
		},
	}
</script>

<style lang="scss">
	.ass_list {
		position: absolute;
		top: 54px;
		width: 100%;
		margin-bottom: 40px;

		.tishi {
			width: 100%;
			text-align: center;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
		}

		.equipment {
			width: 90%;
			margin: 20rpx auto;
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.equipment_top {
				height: 60rpx;
				width: 100%;
				border-bottom: 1px solid #dfe5ec;
				position: relative;

				.equipment_top_img {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
				}

				.equipment_top_name {
					font-size: 28rpx;
					margin-left: 60rpx;
				}
			}

			.equipment_bot {
				padding: 30rpx 0;
				position: relative;

				.equipment_bot_id {
					font-weight: 700;
					font-size: 15px;
					margin-bottom: 16rpx;
				}

				.equipment_bot_name {
					font-size: 13px;
				}

				.equipment_state {
					position: absolute;
					top: 20rpx;
					right: 0;
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					color: #42b983;

				}

				.equipment_state2 {
					position: absolute;
					top: 20rpx;
					right: 0;
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
					color: #ff5951;

				}
			}
		}
	}

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

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