jsy-app/pages/head/index.vue

<template>
	<view class="index-container">
		<z-paging ref="paging" use-virtual-list @query="queryList" bg-color="#F3F3F3" :loading-more-enabled="false">
			<template #top>
				<custom-nav-bar :left="false" leftText="" @leftClick="" title="首部">
					<template v-slot:left>
						<view @click="$refs.landRef.open()">地块</view>
					</template>
				</custom-nav-bar>
			</template>
			<template #cell="{item}">
				<view class="item-container" @click="onClickItem(item)">
					<view class="flex" style="flex-grow: 5;">
						<view>
							<view>
								<view class="title" v-if="item.deviceTypeId==4">施肥机编号</view>
								<view class="title" v-if="item.deviceTypeId==5">首部控制器</view>
								<view class="text" v-if="item.deviceCode">{{item.deviceCode}}</view>
								<view class="text" v-else>-</view>
							</view>
						</view>
						<view>
							<view>
								<view class="title">状态</view>
								<view class="text" v-if="item.deviceData.status == 'online'">在线</view>
								<view class="text" v-else>离线</view>
							</view>
						</view>
						<view>
							<view>
								<view class="title"></view>
								<view class="text"><u-icon name="arrow-right" style="margin-left: 10px;"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</z-paging>
		<!-- 地块选择 -->
		<custom-select-land ref="landRef" :data="ijs.companys" :defaultSelect="ijs.land" @getLand="getLand"
			@select="landChange" />
	</view>
</template>
<script>
	import {
		checkPermi
	} from "@/utils/permission"
	import store from "@/store"
	import plugin from "@/plugins"
	import {
		getHeadDeviceList
	} from "@/api/controlHeadInterface";
	export default {
		data() {
			return {
				ijs: getApp().ijs, // 首页公共js
				title: "",
				isFirst: true,
				user: store.state.user.user,
				query: {
					landId: null,
					landName: null
				},
			}
		},
		onShow(){
			if(this.ijs.land){
				this.query.landId = this.ijs.land.id;
				this.queryList();
			}
		},
		methods: {
			queryList() {
				if (this.query.landId) {
					getHeadDeviceList(this.query.landId).then(res => {
						this.$refs.paging.complete(res.data)
					});
				}
			},
			// 获取地块信息
			getLand(e) {
				this.ijs.getLand(e.node).then(res => {
					this.$refs.landRef.addLand(e, res.data);
				});
			},
			// 地块选择回调
			landChange(e) {
				this.title = e.landName;
				this.query.landId = e.id;
				this.queryList();
			},
			onClickItem(item){
				if (item.deviceTypeId === 4) {
					if(item.controlMode==1){
						plugin.tab.navigateTo("/pages/head/fertilizerapplicator/detail?item=" + encodeURIComponent(JSON.stringify(
							item)))
					}
					if(item.controlMode==2){
						plugin.tab.navigateTo("/pages/head/fertilizerapplicator/detailkl?item=" + encodeURIComponent(JSON.stringify(
							item)))
					}
				}
				if (item.deviceTypeId === 5) {
					plugin.tab.navigateTo("/pages/head/headdevice/detail?item=" + encodeURIComponent(JSON.stringify(item)))
				}
			}
		}
	}
</script>

<style lang="scss">
	.index-container {
		background-color: #F6F3F3;
		height: 100%;

		.search {
			background-color: white;
			padding: 10px;
		}

		.item-container {
			margin: 10px 10px;
			padding: 20px;
			background: white;
			border-radius: 10px;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);

			.flex {
				margin-top: 5px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 0px 10px 5px;
			}

			.title {
				color: #8D8D8D;
				margin: auto;
				text-align: center;
			}

			.text {
				margin-top: 10px;
				text-align: center;
			}

			.bottom-text {
				margin-top: 20px;
			}

			.bottom {
				margin: 10px 30px 0px 30px;
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>