bigdata_WX/pages/cb/xy2.0/particulars.vue

<template>
	<view>
		<view class="">
			<view :class="['info',equipInfo.is_online==1?'on':'off']">
				<p @click="copy(newState.device_id)">设备ID：{{newState.device_id}}<image src="http://static.yfpyx.com/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi"></image></p>
				<p>设备名称：{{newState.device_name}}</p>
				<p>最新上报时间：{{newState.uptime | timeFormat}}</p>
				<p>最新地址：{{newState.addr}}</p>
				<p class="fillin" @click="addxy">测报害虫：<input type="text" v-model="newState.decoy" disabled v-if="newState.decoy"/><u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon></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 @click="glass_showtwo=true">诱芯到期时间：<span style="margin:0 20rpx;">{{yxendtime}}</span><u-icon name="edit-pen" color="#f0ad4e" size="28"></u-icon></p>
				<u-calendar v-model="glass_show" mode="date" @change="timeChange"></u-calendar>
				<u-calendar v-model="glass_showtwo" mode="date" :max-date="date" @change="timeChangetwo"></u-calendar>
			</view>
			<view class="control">
				<view class="control_item" @click="repairs">
					<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/environment/7.png'" mode=""></image>
					<p>一键报修</p>
				</view>
				<view class="control_item" @click="toggle">
					<image :src="'http://static.yfpyx.com/bigdata_app'+'/image/cb/2.png'" mode=""></image>
					<p>历史数据</p>
				</view>
			</view>
			<view class="realtime">
				<view class="realtime_title">
					<p>实时数据</p>
				</view>
				<view class="realtime_text">
					<view class="realtime_item">
						<image src="http://static.yfpyx.com/bigdata_app/image/cb/xy2.0/wendu.png" mode=""></image>
						<view class="text">
							<p>环境温度</p>
							<p>{{newState.at}}℃</p>
						</view>
					</view>
					<view class="realtime_item">
						<image src="http://static.yfpyx.com/bigdata_app/image/cb/xy2.0/shidu.png" mode=""></image>
						<view class="text">
							<p>环境湿度</p>
							<p>{{newState.ah}}%</p>
						</view>
					</view>
					<view class="realtime_item">
						<image src="http://static.yfpyx.com/bigdata_app/image/cb/xy2.0/tianqi.png" mode=""></image>
						<view class="text">
							<p>天气</p>
							<p>{{newState.type}}</p>
						</view>
					</view>
					<view class="realtime_item">
						<image src="http://static.yfpyx.com/bigdata_app/image/cb/xy2.0/xiayu.png" mode=""></image>
						<view class="text">
							<p>是否下雨</p>
							<p>{{newState.rain}}</p>
						</view>
					</view>
					<view class="realtime_item">
						<image src="http://static.yfpyx.com/bigdata_app/image/cb/xy2.0/fengxiang.png" mode=""></image>
						<view class="text">
							<p>风力风向</p>
							<p>{{newState.wind}}</p>
						</view>
					</view>
					<view class="realtime_item">
						<image src="http://static.yfpyx.com/bigdata_app/image/cb/xy2.0/yujing.png" mode=""></image>
						<view class="text">
							<p>虫害情报</p>
							<p>{{newState.warn==""?"暂无":newState.warn}}</p>
						</view>
					</view>
				</view>
			</view>
			<view class="sim" v-if="simTF">
				<p class="sim_title">sim卡详情</p>
				<view class="sim_text">
					<p class="p">ICCID：{{simdata.iccid}}</p>
					<p class="p">状态：{{simstate[simdata.account_status]}}</p>
					<view class="sim_plan">
						套餐流量：
						<view class="sim_plan_text">
							<p style="width: 100%;"></p>
						</view>
						{{simdata.data_plan}}MB
					</view>
					<view class="sim_plan">
						已用流量：
						<view class="sim_plan_text">
							<p :style="{width:usedBeliel+'%'}"></p>
						</view>
						{{simdata.data_plan - simdata.data_balance.toFixed(2)}}MB
					</view>
					<view class="sim_plan">
						剩余流量：
						<view class="sim_plan_text">
							<p :style="{width:residueBeliel+'%'}"></p>
						</view>
						{{simdata.data_balance.toFixed(2)}}MB
					</view>
					<p class="p">到期时间：{{simdata.expiry_date | timeFormat}}</p>
				</view>
			</view>
			<u-popup v-model="yxShow" mode="center" width="600rpx">
				<u-field label="害虫名称" label-width='240' required :error-message="xyErr" v-model="decoy" class="field">
				</u-field>
				<view class="btn-box">
					<u-button @click="yxSubmit" size="mini" type="success" class="box-item">确定</u-button>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				equipInfo:[],
				newState:{},
				simdata:{},
				simstate:['未知','测试期','沉默期','使用中','停机','停机保号','预销号','销号'],
				usedBeliel:'',
				residueBeliel:"",
				simTF:false,
				expiretext:"",
				yxShow:false,
				xyErr:"",
				decoy:"",
				yxchangetime:0,//更换诱芯时间
				yxendtime:0,//诱芯到期时间
				glass_show:false,//更换诱芯时间选择
				glass_showtwo:false,//诱芯到期时间选择
				date:""
			}
		},
		methods: {
			async getState(d_id) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_details',
					data: {
						d_id: d_id,
					}
				})
				this.newState = res[0]
				if(res[0].xy_expire_time==0){
					this.yxendtime = "暂无"
				}else{
					var times = new Date(res[0].xy_expire_time*1000)
					var month = times.getMonth()+1
					month = month<10?"0"+month:month
					var date = times.getDate()<10?"0"+times.getDate():times.getDate()
					this.yxendtime = times.getFullYear() + "-" + month + "-" + date
				}
				if(res[0].xy_uptime==0){
					this.yxendtime = "暂无"
				}else{
					var times = new Date(res[0].xy_uptime*1000)
					var month = times.getMonth()+1
					month = month<10?"0"+month:month
					var date = times.getDate()<10?"0"+times.getDate():times.getDate()
					this.yxchangetime = times.getFullYear() + "-" + month + "-" + date
				}
			},
			async getSim(d_id) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_sim',
					data: {
						d_id: d_id,
					}
				})
				console.log(res)
				if(res.data != null){
					this.simdata = res.data.card_list[0]
					this.usedBeliel = (this.simdata.data_plan-this.simdata.data_balance)/ this.simdata.data_plan *100
					this.residueBeliel = this.simdata.data_balance/this.simdata.data_plan * 100
					this.simTF = true
				}else{
					this.simTF = false
				}
			},
			async getworm(data,info) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=sex_lure_nl.sex_lure.nl_device_set_lure',
					data: data
				})
				console.log(res)
				if(res.code == 200){
					uni.showToast({
						title: "设置成功",
						icon: "none"
					})
					if(data.expire_time){
						this.yxendtime = info
					}else if(data.pest_name){
						this.newState.decoy = info
					}else if(data.addtime){
						this.yxchangetime = info
					}
				}
			},
			toggle(){
				uni.navigateTo({
					url:"./historydatas?device_id="+this.equipInfo.device_id + "&d_id=" + this.equipInfo.d_id
				})
			},
			addxy(){
				this.yxShow =true
				this.decoy = this.newState.decoy
			},
			yxSubmit(){
				if(this.decoy == ""){
					this.xyErr = "请填写害虫名称"
				}else{
					this.xyErr = ""
					var obj = {
						d_id: this.equipInfo.d_id,
						pest_name:this.decoy
					}
					this.getworm(obj,this.decoy)
					console.log(this.decoy)
					this.yxShow =false
				}
			},
			timeChange(e){
				console.log(e)
				var obj = {
					d_id: this.equipInfo.d_id,
					addtime:+new Date(e.result)/1000
				}
				this.getworm(obj,e.result)
			},
			timeChangetwo(e){
				console.log(e)
				var obj = {
					d_id: this.equipInfo.d_id,
					expire_time:+new Date(e.result)/1000
				}
				this.getworm(obj,e.result)
			},
			copy(item){
				console.log(item)
				uni.setClipboardData({
				    data: item,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			repairs(){
				uni.navigateTo({
					url: "../../afterSale/addafter?device_id="+ this.newState.device_id +"&device_type="+ 10
				})
			}
		},
		onLoad(option) {
			this.equipInfo = JSON.parse(option.info)
			console.log(this.equipInfo)
			this.getState(this.equipInfo.d_id)
			this.getSim(this.equipInfo.d_id)
			var times = new Date()
			this.date = times.getFullYear()+1 + "-" + Number(times.getMonth()+1) + "-" + times.getDate()
			console.log(this.date)
			// uni.getStorage({ 待开发
			// 	key:"jurisdiction",
			// 	success:(res)=>{
			// 		console.log(JSON.parse(res.data))
			// 		let items = JSON.parse(res.data).filter((item)=>{
			// 			return item.purview_name == "测报系统"
			// 		})
			// 		let items2 = items[0].children.filter((item)=>{
			// 			return item.purview_name == "性诱2.0"
			// 		})
			// 		console.log(items2)
			// 	},
			// })	
		}
	}
</script>

<style lang="scss">
	.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: 95%;
		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://static.yfpyx.com/bigdata_app/image/cb/onBg.png')
	}

	.off {
		background-image: url('http://static.yfpyx.com/bigdata_app/image/cb/offBg.png')
	}
	.control {
		width: 90%;
		display: flex;
		text-align: center;
		box-sizing: border-box;
		margin: 30rpx auto;
		.control_item {
			width: 120rpx;
			height: 120rpx;
			margin-right: 40rpx;
			image {
				width: 70rpx;
				height: 70rpx;
			}
	
			p {
				font-size: 24rpx;
			}
		}
	}
	
	.realtime{
		width: 95%;
		margin: 0rpx auto;
		.realtime_title{
			font-size: 36rpx;
			display: flex;
			justify-content: space-between;
			.span{
				color: #6e6c76;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				margin-top: 12rpx;
			}
		}
		.realtime_text{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.realtime_item{
				width: 48%;
				height: 100rpx;
				display: flex;
				box-shadow: 0 0 10rpx #bcb9ca;
				margin-top: 20rpx;
				padding: 20rpx 0;
				image{
					width: 60rpx;
					height: 60rpx;
					margin: 20rpx 20rpx 20rpx 40rpx;
				}
				.text{
					padding: 10rpx 0 10rpx 30rpx;
				}
			}
		}
	}
	.sim{
		width: 95%;
		margin: 40rpx auto;
		.sim_title{
			font-size: 36rpx;
		}
		.sim_text{
			box-shadow: 0 0 10rpx #bcb9ca;
			padding: 30rpx;
			margin-top: 40rpx;
			.p{
				margin-top: 20rpx;
			}
			.sim_plan{
				display: flex;
				margin-top: 20rpx;
				.sim_plan_text{
					width: 60%;
					height: 16rpx;
					background-color: #cccccc;
					border-radius:8rpx ;
					margin: 10rpx 20rpx 0 0;
					p{
						height: 16rpx;
						background-color: #0dc6b6;
						border-radius:8rpx ;
					}
				}
			}
		}
	}
	.field {
		/deep/.fild-body{
			margin-left: -30px;
		}
		/deep/.uni-input-input {
			border: 2rpx solid #FF0000;
			border-radius: 24rpx;
			width: 140px;
			padding-left: 20rpx;
			box-sizing: border-box;
		}
	}
	.btn-box {
		text-align: center;
		padding: 20rpx 30rpx;
	}
</style>