jsy-app/pages/fourmonitor/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>
				<view class="search">
					<uni-data-select v-model="value" :localdata="dropdownOptions" @change="change"
						:placeholder="laceholder" :clear="false" :disabled="true"></uni-data-select>
				</view>
			</template>
			<template #cell="{item,index}">
				<work-ground-HeadSqdevice-index-item class="list-item" :item="item" @click="onClickItem(item)" />
			</template>
		</z-paging>
		<!-- <u-popup :show="showSoilTilth" mode="center">
			<view class="dialog-container">
				<view class="dialog-title">
					<text>土壤墒情</text>
					<u-icon name="reload" size="20" class="reload-btn" @click="reloadSoilTilth"></u-icon>
					<u-icon name="close" size="20" class="close-btn" @click="showSoilTilth = false"></u-icon>
				</view>
				<view class="dialog-body">
					<soil-tilth :landId="landId"></soil-tilth>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue"
	import {
		onShow,
		onLoad,
		onNavigationBarButtonTap
	} from '@dcloudio/uni-app'
	import store from '@/store'
	import plugin from '@/plugins'
	const companyId = ref(0);
	const dropdownOptions = ref([]);
	const landNum = ref(0);
	const showActions = ref(false);
	const showModal = ref(false);
	const privateSeal = ref("");
	const paging = ref(null);
	const query = ref({});
	const laceholder = ref("");
	const value = ref(0);
	onLoad(value => {
		getGroundList();
	})
	onShow(value => {
		initValue();
	})
	onNavigationBarButtonTap(e => {
		viewSoilTilth();
	})
	//土壤墒情
	const showSoilTilth = ref(false)
	//显示墒情
	function viewSoilTilth() {
		showSoilTilth.value = true
	}
	//刷新墒情
	function reloadSoilTilth() {
		uni.$emit("reloadSoilTilth")
	}

	function onClickItem(item) {
		if (item.deviceTypeId === 6) {
			plugin.tab.navigateTo("/pages/fourmonitor/weatherstation?item=" + encodeURIComponent(JSON.stringify(item)))
		}
		if (item.deviceTypeId === 7) {
			plugin.tab.navigateTo("/pages/fourmonitor/diseases?item=" + encodeURIComponent(JSON.stringify(item)))
		}
		if (item.deviceTypeId === 8) {
			plugin.tab.navigateTo("/pages/fourmonitor/spore?item=" + encodeURIComponent(JSON.stringify(item)))
		}
		if (item.deviceTypeId === 10) {
			plugin.tab.navigateTo("/pages/fourmonitor/pesticideLamp?item=" + encodeURIComponent(JSON.stringify(item)))
		}
	}

	function queryList(pageNum, pageSize) {
		if (companyId.value == 0) {
			return;
		}
		store.dispatch('getHeadDeviceByCompayId', companyId.value)
			.then(res => {
				paging.value.complete(res.data)
			}).catch(error => {
				paging.value.complete(false)
				plugin.modal.msgError(error)
			}).finally(() => {})
	}
	//查询地块
	function getGroundList() {
		dropdownOptions.value = []
		store
			.dispatch("OnGetManagerCompanyList", store.state.user.user.userId)
			.then(res => {
				res.data.map(item => {
					if (item.parentId != 0) {
						let param = {
							value: item.companyId,
							text: item.companyName
						}
						dropdownOptions.value.push(param)
					}
				})
				initValue();
			})
			.catch(error => {
				plugin.modal.msgError(error)
			})
			.finally(() => {})
	}

	function initValue() {
		let cache_companyId = uni.getStorageSync("app_companyId")
		if (dropdownOptions.value.length > 0) {
			let index = dropdownOptions.value.findIndex(x => x.value == cache_companyId);
			if (index != -1) {
				companyId.value = dropdownOptions.value[index].value
				value.value = dropdownOptions.value[index].value;
				laceholder.value = dropdownOptions.value[index].text;
				queryList(1, 10);
			}
		}
	}

	function change(e) {
		companyId.value = e;
		queryList(1, 10);
	}
</script>

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

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

	// 弹窗
	.dialog-container {
		width: 90vw;
		height: 90vh;
		overflow: hidden;

		.dialog-title {
			width: 100%;
			height: 34px;
			font-size: 16px;
			line-height: 34px;
			text-align: center;
			font-weight: bold;
			border-bottom: 1px solid #999;
			position: relative;

			.reload-btn {
				position: absolute;
				top: 50%;
				right: 56px;
				transform: translateY(-50%);
			}

			.close-btn {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
			}
		}

		.dialog-body {
			height: calc(100% - 35px);
			overflow: hidden;
			position: relative;
			background-color: #f7f7f7;

			//扫码的弹窗
			.scancode-device-info {
				height: 100%;
				padding: 0 20px;
				overflow-x: hidden;
				overflow-y: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				&>view {
					width: 100%;
					line-height: 40px;
					font-size: 18px;
					color: gray;

					.label {
						display: inline-block;
						width: 30%;
						color: black;
						margin-right: 2px;
						white-space: nowrap;
					}
				}
			}
		}

		.control-panel {
			height: 100px;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			justify-content: space-evenly;

			&>view {
				padding: 6px 10px;
				color: #007acc;
				font-size: 14px;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
		}
	}
</style>