bigDataApp/pages/cb/xylps/detail.vue

<template>
	<view class="bigBox">
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#14A478"></u-tabs>
		<view class="infoBox">
			<view :class="['info',equipInfo.is_online==1?'on':'off']">
				<p @click="copy(equipInfo.imei)">设备ID：{{equipInfo.imei}}
					<image src="http://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode=""
						class="tishi">
					</image>
				</p>
				<p>设备名称：{{equipInfo.device_name==""?"无":equipInfo.device_name}}</p>
				<p>最新上报时间：{{equipInfo.uptime | timeFormat}}</p>
				<p>最新地址：{{equipInfo.address}}</p>
				<p class="fillin">诱芯名称：{{equipInfo.decoy}}</p>
				<!-- <p @click="glass_show=true">诱芯更换时间：<span style="margin:0 20rpx;">{{yxchangetime}}</span><u-icon
						name="edit-pen" color="#f0ad4e" size="28"></u-icon></p> -->
				<p>诱芯到期时间：{{equipInfo.xy_expire}}</p>
				<!-- <u-calendar v-model="glass_show" mode="date" :max-date="date" @change="timeChange"></u-calendar>
				<u-calendar v-model="glass_showtwo" mode="date" :max-date="date" @change="timeChangetwo"></u-calendar> -->
			</view>
			<view class="cardInfo">
				<text class="title">设备控制</text>
				<view class="controlCard">
					<view class="preBtn" v-for="btn in btnList" :key="btn.class">
						<view :class="`btnBox ${btn.class}`">
							<text :class="btn.icon"></text>
						</view>
						<view>{{btn.text}}</view>
					</view>
				</view>
			</view>
			<view class="cardInfo">
				<text class="title">监测数据</text>
				<view class="controlCard noBg">
					<u-row gutter="30" justify="between">
						<u-col span="5.8" class="preInfo" v-for="btn in dataList" :key="btn.icon">
							<view class="btnBox">
								<text :class="btn.icon"></text>
							</view>
							<view class="textBox">
								<view>
									{{newDataObj[btn.unit]}}
								</view>
								<view class="name">{{btn.text}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class="cardInfo">
				<text class="title">设备信息</text>
				<view class="controlCard noBg">
					<u-cell-group>
						<u-cell-item v-for="btn in deviceDataList" :key="btn.icon"  :title="btn.text" :value="deviceObj[btn.key]" :arrow="false" :border-bottom="true"></u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</view>
		<view class="">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnList:[{
					text:'更换信息素',
					icon:'yficonfont icon-weimingming-34',
					class:'green'
				},
				{
					text:'设备清虫',
					icon:'yficonfont icon-chouchongbug',
					class:'danger'
				},
				{
					text:'拍照定时',
					icon:'yficonfont icon-dingshi',
					class:'blue'
				},
				{
					text:'一键拍照',
					icon:'yficonfont icon-paizhao-xianxing',
					class:'yellow'
				}],
				list: [{
					name: '基本信息'
				}, {
					name: '数据分析'
				}, {
					name: '图片列表',
				}, {
					name: '设备控制',
				}],
				current: 0,
				equipInfo: {},
				dataList: [{
						text: '空气温度', // 中文
						unit: 'air_temp', // 对应字段
						data: '',
						icon: 'yficonfont icon-kongqiwendu', // iconclass名称
					},
					{
						text: '空气湿度',
						unit: 'air_humi',
						data: '',
						icon: 'yficonfont icon-shuizhi',
					},
					{
						text: '风力',
						unit: 'wind_force',
						isSmall: true,
						data: '',
						icon: 'yficonfont icon-fengli',
					},
					{
						text: '风向',
						unit: 'wind_dir',
						isSmall: true,
						data: '',
						icon: 'yficonfont icon-fengxiang',
					},
					{
						text: '虫数',
						unit: 'bugcnt',
						data: '',
						icon: 'yficonfont icon-chouchongbug',
					},
					{
						text: '光照强度',
						unit: 'light',
						data: '',
						isSmall: true,
						icon: 'yficonfont icon-qingtian',
					},
					{
						text: '降雨',
						unit: 'rain_status',
						data: '',
						icon: 'yficonfont icon-yu',
					},
					{
						text: '电池电量',
						unit: 'bat_level',
						data: '',
						icon: 'yficonfont icon-80dianliang',
					},
					{
						text: '信号强度',
						unit: 'gprs',
						data: '',
						icon: 'yficonfont icon-wifi',
					},
					{
						text: '定位信噪比',
						unit: 'cn0',
						data: '',
						isSmall: true,
						icon: 'yficonfont icon-dingwei1',
					},
					{
						text: '太阳能电压',
						unit: 'solar_voltage',
						data: '',
						icon: 'yficonfont icon-guangfuzujianshuliang',
					},
					{
						text: '蓄电池电压',
						unit: 'bat_val',
						data: '',
						icon: 'yficonfont icon-xudianchi',
					},
				],
				dataLoading: true,
				newDataObj: {},
				deviceDataList: [{
						text: '设备名',
						key: 'devname',
					},
					{
						text: '设备版本号',
						key: 'version',
					},
					{
						text: '心跳间隔',
						key: 'heart_time',
					},
					{
						text: '太阳能电压阀值',
						key: 'solar_threshold',
					},
					{
						text: '太阳能电压最大值',
						key: 'solarmax',
					},
					{
						text: '数据上传频率',
						key: 'upload_time',
					},
					{
						text: '工作模式',
						key: 'dev_work_mode',
					},
					{
						text: '定时模式时间',
						key: 'dev_work_time',
					},
					{
						text: '高压包开关状态',
						key: 'dev_work_onoff',
					},
					{
						text: 'SIM卡号',
						key: 'sim',
					},
				],
				deviceLoading: true,
				deviceObj: {},
			};
		},
		onLoad(option) {
			this.equipInfo = JSON.parse(option.detail);
			console.log(this.equipInfo);
			this.getData();
			this.getDeviceData();
		},
		methods: {
			async getData() {
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.monitor_data',
					data: {
						device_id: this.equipInfo.imei,
					},
				})
				console.log(res);
				// console.log(res.data.data);
				this.newDataObj = res;
			},
			async getDeviceData() {
				let res = await this.$myRequest({
					method: 'post',
					url: '/api/api_gateway?method=lpsxy.views.device_config',
					data: {
						d_id: this.equipInfo.d_id,
					},
				})
				console.log(res);
				// console.log(res.data.data);
				this.deviceObj = res;
			},
			change(index) {
				this.current = index;
			},
			copy(item) {
				console.log(item)
				uni.setClipboardData({
					data: item,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.bigBox {
		position: relative;
		width: 100vw;
		height: 100vh;
		background: #f7f7f7;
		overflow: auto;
	}

	.info {
		padding: 20rpx 40rpx;
		color: #fff;
		line-height: 50rpx;
		font-size: 26rpx;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-color: #0DC6B6;
		background-position: top left;
		box-sizing: border-box;
		width: 100%;
		border-radius: 5rpx;
		margin: 0 auto;

		p:first-child {
			font-size: 32rpx;
		}

		.expiretishi {
			font-size: 24rpx;
			color: #FF0000;
		}

		.tishi {
			width: 28rpx;
			height: 28rpx;
			margin: 0rpx 0 0 20rpx;
		}

		.fillin {
			display: flex;

			input {
				width: 200rpx;
				font-size: 24rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-indent: 1em;
			}
		}
	}

	.on {
		background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/onBg.png')
	}

	.off {
		background-image: url('http://www.hnyfwlw.com:8006/bigdata_app/image/cb/offBg.png')
	}

	.infoBox {
		width: 100%;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
	}

	.cardInfo {
		margin-top: 24rpx;

		.title {
			font-size: 28rpx;
			color: #999;
		}

		.controlCard {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-top: 30rpx;
			background: #fff;
			box-sizing: border-box;
			.preBtn{
				display: flex;
				align-items: center;
				justify-content: space-around;
				flex-direction: column;
				width: 22%;
				padding: 20rpx;
				height: 80px;
				font-size: 24rpx;
			}
			.btnBox {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 96rpx;
				width: 96rpx;
				border-radius: 96rpx;
				color: #fff;
				text{
					font-size: 20px;
				}
			}
			.preInfo{
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 32rpx !important;
				background: #fff;
				margin-bottom: 32rpx;
				.btnBox{
					width: 72rpx;
					height: 72rpx;
					background: #14a478;
				}
				.textBox{
					margin-left: 40rpx;
					font-size: 32rpx;
					.name{
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			.green {
			  background: #14a478;
			}
			.yellow {
			  background: #f4a72f;
			}
			.danger {
			  background: #ff5951;
			}
			.blue{
				background: #1890FF;
			}
		}
		.noBg{
			background: none;
		}
		.u-border-bottom:after, .u-border-left:after, .u-border-right:after, .u-border-top-bottom:after, .u-border-top:after, .u-border:after{
			    content: " ";
			    position: absolute;
			    left: 0;
			    top: 0;
			    pointer-events: none;
			    box-sizing: border-box;
			    -webkit-transform-origin: 0 0;
			    transform-origin: 0 0;
			    width: 199.8%;
			    height: 199.7%;
			    -webkit-transform: scale(.5);
			    transform: scale(.5);
			    border: .5px solid #E5EBE9;
			    z-index: 2;
			
		}
	}
</style>