pingpu_H5/pages/worm/details.vue

<template>
	<!-- 虫情监测详情 -->
	<view>
		<!-- 设备卡片 -->
		<view class="ui-card forecast-card">
			<view class="flex-1">
				<view class="font-16 title">设备名称：{{lampDetails.device_name}}</view>
				<view class="text">设备ID：{{deviceId}}</view>
				<view class="text text-ellipsis">地址：{{lampDetails.address}}</view>
				<view class="text">最新上报时间：{{lampDetails.device_name}}</view>
			</view>
			<view class="font-12 state">预警</view>
		</view>
		<!-- 设备卡片end -->
		<!-- 导航选项 -->
		<view class="ui-card  worm-nav">
			<navigator :url="`image?id=${deviceId}`" class="worm-nav-item" hover-class="none">
				<image src="@/static/img/worm-nav-2.png" class="icon" mode="aspectFill"></image>
				<view class="text">查看图片</view>
			</navigator>
			<navigator :url="`analyse?id=${deviceId}`" class="worm-nav-item" hover-class="none">
				<image src="@/static/img/worm-nav-1.png" class="icon" mode="aspectFill"></image>
				<view class=" text">害虫分析</view>
			</navigator>
			<navigator :url="`history?id=${deviceId}`" class="worm-nav-item" hover-class="none">
				<image src="@/static/img/worm-nav-3.png" class="icon" mode="aspectFill"></image>
				<view class="text">历史数据</view>
			</navigator>

		</view>
		<!-- 导航选项end -->
		<view class="row-between m-12">
			<view class="font-16 mr">实时数据</view>
		</view>
		<!-- 数据列表 -->
		<view class="latest-list">
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/is_online.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">在线状态</view>
					<view class="text">{{lampDetails.is_online==1?'在线':'离线'}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/ds.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">开机状态</view>
					<view class="text">{{lampDetails.ds==1?'开机':'关机'}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon"></view>
				<view class="column-between text-info font-12">
					<view class="text">通道状态</view>
					<view class="text"></view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/hs.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">加热状态</view>
					<view class="text">{{lampDetails.hs==1?'加热':'正常'}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon"></view>
				<view class="column-between text-info font-12">
					<view class="text">环境温度</view>
					<view class="text"></view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon"></view>
				<view class="column-between text-info font-12">
					<view class="text">环境湿度</view>
					<view class="text"></view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon"><image src="@/static/worm/csq.png"></image></view>
				<view class="column-between text-info font-12">
					<view class="text">信号强度</view>
					<view class="text">{{lampDetails.csq}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/dver.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">设备版本</view>
					<view class="text">{{lampDetails.dver}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/rps.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">雨控制状态</view>
					<view class="text">{{lampDetails.rps==1?'保护':'正常'}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/tps.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">温控状态</view>
					<view class="text">{{lampDetails.tps==1?'温控':'正常'}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/lps.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">光控状态</view>
					<view class="text">{{lampDetails.lps==1?'光控':'正常'}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon"></view>
				<view class="column-between text-info font-12">
					<view class="text">灯管状态</view>
					<view class="text"></view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/upds.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">上仓门</view>
					<view class="text">{{lampDetails.upds==1?'打开':'关闭'}}</view>
				</view>
			</view>
			<view class="ui-card latest-item">
				<view class="icon">
					<image src="@/static/worm/dnds.png"></image>
				</view>
				<view class="column-between text-info font-12">
					<view class="text">下仓门</view>
					<view class="text">{{lampDetails.dnds==1?'打开':'关闭'}}</view>
				</view>
			</view>
		</view>
		<!-- 数据列表end -->
	</view>
</template>

<script>
	import {
		getWormLampDetails
	} from '@/api/worm.js'
	// 设备详情
	export default {
		data() {
			return {
				deviceId: '', // 设备id
				lampDetails:{},//设备详情
				latestList:[],//实时列表
			};
		},
		onLoad(options) {
			this.deviceId = options.id;
		},
		methods: {
			// 获取测报灯详情
			async getLampDetails() {
				let res = await getWormLampDetails({
					device_id: this.deviceId
				});
				this.lampDetails=res;
				// "is_online": 1, //在线状态   1在线 0离线
				// "ts": "1", //定时模式 0光控,1时控
				// "hs": "0", //加热状态 1加热,0正常
				// "upds": "0", //上仓门状态 1打开,0关闭
				// "dnds": "0", //下仓门状态 1打开,0关闭
				// "csq": "0", //信号强度
				// "dver": "1.40.4(2000W)-V1.0.20", //版本号
				// "tph": "70", //高温保护阈值温度
				// "tpl": "5", //低温保护阈值温度
				// "tps": "0", //温控状态 1 温控,0 正常
				// "lps": "0", //光控状态 1 光控,0 正常
				// "hrt": "33", //加热仓实时温度
				// "iccid": "-1", //SIM卡号
				// "rps": "0", //雨控：0: 正常，1: 保护
				// "ds": "1", //设备开关状态 0: 关机 1: 开机
			}
		}
	}
</script>

<style lang="scss">
	// 虫情导航按钮
	.worm-nav {
		display: flex;
		justify-content: space-between;

		&-item {
			display: block;
			flex: 1;
			padding: 36rpx 0 48rpx;
			text-align: center;

			.icon {
				width: 136rpx;
				height: 136rpx;
				margin: 0 auto 18rpx;
				border-radius: 100%;
			}

			.text {
				font: normal 32rpx/44rpx PingFang SC-中等, PingFang SC;
				color: $color-subtitle;
			}
		}
	}
</style>