jsy-app/pages/fourmonitor/index.vue

<template>
	<z-paging ref="paging" use-virtual-list @query="queryList" bg-color="#F3F3F3" :loading-more-enabled="false">
		<template #top>
			<custom-nav-bar :left="true" title="农情"></custom-nav-bar>
		</template>
		<template #cell="{item}">
			<view class="card" @click="onClickItem(item)">
				<view class="cards-title">
					<view>
						<view class="text" v-if="item.deviceTypeId==6">气象站</view>
						<view class="text" v-if="item.deviceTypeId==7">虫情</view>
						<view class="text" v-if="item.deviceTypeId==8">孢子：</view>
						<view class="text" v-if="item.deviceTypeId==9">监控：</view>
						<view v-if="item.deviceCode">{{item.deviceCode}}</view>
						<view v-else>-</view>
					</view>
				</view>
				<view class="content">
					<view class="cards-content">
						<view class="txt-list">
							<view class="list2">
									<view><text>状态：</text><text class="font-green" v-if="item.status == 'online'">在线</text>
									<text class="font-red" v-else>离线</text></view>
							</view>
							<view class="right">
								<view class="iconfont icon-you">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<view class="card">
			<view class="cards-title">
				<view>
					<view class="text">气象站：F0000000</view>
				</view>
			</view>
			<view class="content">
				<view class="cards-content">
					<view class="txt-list">
						<view class="list2">
							<view><text>降雨：</text>1254mm</view>
							<view><text>风速：</text>2.0m/s </view>
							<view><text>状态：</text><text class="font-green">在线</text>
								<!-- <text class="font-red">离线</text> --></view>
						</view>
						<view class="right">
							<view class="iconfont icon-you">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="cards-title">
				<view>
					<view class="text">虫情:F0000000</view>
				</view>
			</view>
			<view class="content">
				<view class="cards-content">
					<view class="txt-list">
						<view class="list1">
								<view><text>虫情报告：</text>内容内容内容内容内容内容</view>
								<view><text>报告时间：</text>2024-12-11</view>
						</view>
						<view class="right">
							<view class="iconfont icon-you">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="cards-title">
				<view>
					<view class="text">孢子：F0000000</view>
				</view>
			</view>
			<view class="content">
				<view class="cards-content">
					<view class="txt-list">
						<view class="list1">
								<view><text>孢子报告：</text>内容内容内容内容内容内容</view>
								<view><text>报告时间：</text>2024-12-11</view>
						</view>
						<view class="right">
							<view class="iconfont icon-you">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="cards-title">
				<view>
					<view class="text">监控：F0000000</view>
				</view>
			</view>
			<view class="content">
				<view class="cards-content">
					<view class="txt-list">
						<view class="list2">
								<view><text>状态：</text><!-- <text class="font-green">在线</text> -->
								<text class="font-red">离线</text></view>
						</view>
						<view class="right">
							<view class="iconfont icon-you">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>
<script>
	import {
		checkPermi
	} from "@/utils/permission"
	import store from "@/store"
	import plugin from "@/plugins"
	import {
		getOtherDeviceList
	} from "@/api/system/controlOtherInterface"
	import {
		getAccessTokenAndUrl
	} from "@/api/system/outdevice";
	export default {
		data() {
			return {
				ijs: getApp().ijs, // 首页公共js
				title: "",
				isFirst: true,
				user: store.state.user.user,
				query: {
					companyGroupId: null,
				},
				accessToken: null,
				ezopenUrl: null
			}
		},
		onShow() {
			if (this.ijs.land) {
				console.log(this.ijs.land)
				this.query.companyGroupId = this.ijs.land.companyGroupId;
				this.queryList();
			}
		},
		methods: {
			queryList() {
				if (!this.query.companyGroupId) {
					return;
				}
				getOtherDeviceList(this.query.companyGroupId).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 = land.id;
				queryList();
			},
			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/pest?item=" + encodeURIComponent(JSON.stringify(item)))
				}
				if (item.deviceTypeId === 8) {
					plugin.tab.navigateTo("/pages/fourmonitor/spore?item=" + encodeURIComponent(JSON.stringify(item)))
				}
				if (item.deviceTypeId === 9) {
					if (!item.ezopenUrl1 || !item.ezopenUrl2) {
						plugin.modal.msgError("获取播放地址失败！");
						return;
					}
					plugin.tab.navigateTo("/pages/fourmonitor/camera?item=" + encodeURIComponent(JSON.stringify(item)))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.txt-list .left ::v-deep text:first-child {
		width: auto;
	}
</style>