bigdata_WX/pages/cb/equip-detail/equip-detail-new.vue

<template>
	<view>
		<view class="title">基本信息</view>
		<view class="info">
			<view class="device-id" @click="copy(equipInfo)">
				<image class="logo" :src="`http://www.hnyfwlw.com:8006/bigdata_pc/equipdistribute/${equipInfo.type}.png`" mode=""></image>
				{{equipInfo.imei||equipInfo.device_id}}
				<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/environment/fuzhi.png" mode="" class="tishi">
				</image>
				<view :class="['float-right','yficonfont',equipInfo.is_online==1?'on icon-zaixian':'off icon-lixian']">
					{{equipInfo.is_online==1?'在线':'离线'}}
				</view>
			</view>
			<view class="info-list">
				<span class="float-left">诱虫量：</span> <span class="float-right">{{equipInfo.bug_count?equipInfo.bug_count.join('/'):'0/0/0'}}</span>
			</view>
			<view class="info-list">
				<span class="float-left">最新上报时间：</span> <span class="float-right">{{equipInfo.addtime||equipInfo.uptime | timeFormat}}</span>
			</view>
			<view class="info-list">
				<span class="float-left">设备地址：</span> <span class="float-right">{{equipInfo.address?equipInfo.address:"--"}}</span>
			</view>
			<view class="info-list" @click="calendar_show=true">
				<span class="float-left">诱芯到期时间</span>
				<span>  </span>
				<span class="float-right"> 
				<span v-if="equipInfo.xy_expire_time>0">
					{{ equipInfo.xy_expire_time | timeFormat}}
				</span>
				 <span v-else> 暂未设置诱芯	</span>
					<u-icon class="arrow" name="arrow-right" color="#666666" size="26"></u-icon>
				</span>
			</view>
			<u-popup v-model="yxShow" mode="center" width="600rpx">
				<u-field label="诱芯到期时间" @click="calendar_show=true" label-width='240' required :error-message="xyErr" v-model="decoy" class="field"
					:field-style="fieldstyle" >
				</u-field>
				<view class="btn-box">
					<u-button @click="yxSubmit" size="mini" type="success">确定</u-button>
				</view>
			</u-popup>
			<u-calendar v-model="calendar_show" mode="date" :max-date="date" @change="timeChange($event,'decoy','xyErr')">
			</u-calendar>
			<u-toast ref="toast" />
		</view>
		<view class="title">基本操作</view>
		<view class="newState" >
			<view class="item" v-for="item in curEquip" @click="partClick(item.path)">
				<view class="item_info_img">
					<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
				</view>
				<view class="info-text">
					{{item.tex}}
				</view>
			</view>
		</view>
		<view class="title">实时状态</view>
		<view class="newtishi" v-if="dataloadingtf">
			<p class="dataloading">加载中</p>
		</view>
		<view class="newtishi" v-else-if="newtishitf">
			暂无数据
		</view>
		<view class="newState" v-else>
			<view class="item" v-for="item in curState">
				<view class="item_info_img">
					<image :src="'https://www.hnyfwlw.com:8006/bigdata_app'+item.icon" mode="widthFix"></image>
				</view>
				<view class="info-con">
					<view class="active">
						{{item.value | formatValue(item.txt,type)}}
					</view>
					<view class="val">
						{{item.txt}} 
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import equipState from "../../../static/js/equipState_dict.json"
	import {
		QueryPermission,getPermissionById,getUserPermission
	} from "../../../util/QueryPermission.js"
	export default {
		data() {
			return {
				fieldstyle: {
					border: "2rpx solid #f6f6f6",
					"border-radius": "24px",
					"padding-left": "20rpx",
					"background-color": "#f6f6f6"
				},
				city: "",
				type: null, //设备类型
				device_status: null,
				equipInfo: {},
				cbd: [
					
				],
				newState: {}, //设备最新状态
				setTimeShow: false,
				calendar_show: false,
				culErr: '',
				yxShow: false, //诱芯弹框
				xyErr: '',
				decoy: '',
				newtishitf: false, //暂无数据提示
				dataloadingtf: true, //加载中提示
				date: "", //日历最大可选日期
			}
		},
		computed: {
			curEquip(){
				this.cbd = [{
						icon: '/image/cb/4.png',
						tex: '设备控制',
						path: '/pages/cb/cbd/equip-set/equip-set-new',
						tf: true
					}, {
						icon: '/image/cb/6.png',
						tex: 'sim卡详情',
						path: '/pages/prevention/sim',
						tf: true
					}, {
						icon: '/image/environment/7.png',
						tex: '一键报修',
						path: '/pages/afterSale/addafter',
						tf: true
					}]
				let permission = getPermissionById(getUserPermission(),this.equipInfo.pur_id)
				console.log(permission,'权限')
				permission.forEach(item=>{
					
					if(item.purview_name =='查看图片'){
						this.cbd.unshift({
							icon: '/image/cb/1.png',
							tex: item.purview_name,
							path: '/pages/cb/cbd/equip-set/photo',
							tf: true
						})
					}else if(item.purview_name =='数据详情'){
						this.cbd.unshift({
							icon: '/image/cb/2.png',
							tex: item.purview_name,
							path: '/pages/cb/cbd/equip-set/newhistoryfile',
							tf: true
						})
					}else if(item.purview_name =='分析'){
						this.cbd.unshift({
							icon: '/image/cb/3.png',
							tex: item.purview_name,
							path: '/pages/cb/cbd/equip-set/analyse',
							tf: true
						})
					}
				})
				return this.cbd
			},
			curState() {
				return [{
						icon: '/image/cb/icon02.png',
						txt: '在线状态',
						value: this.newState.status,
					},
					{
						icon: '/image/cb/icon05.png',
						txt: '开关状态',
						value: Number(this.newState.ds) == 1 ? '开机' : '关机'
					},
					 {
						icon: '/image/cb/icon08.png',
						txt: '环境温度(℃)',
						value: this.newState.tem
					}, {
						icon: '/image/cb/icon07.png',
						txt: '环境湿度(%)',
						value: this.newState.hum
					}, {
						icon: '/image/prevention/icon16.png',
						txt: '信号强度',
						value: this.newState.signal
					}, {
						icon: '/image/cb/icon12.png',
						txt: '设备版本',
						value: this.newState.dver_num
					},
					{
						icon: '/image/cb/icon17.png',
						txt: '雨控状态',
						value: this.newState.rps
					}, {
						icon: '/image/cb/icon14.png',
						txt: '温控状态',
						value: this.newState.tps
					}, {
						icon: '/image/cb/icon06.png',
						txt: '光控状态',
						value: this.newState.lps
					}
				]
			}
				
		},
		filters: {
			equipType(type) {
				switch (type) {
					case 3:
						return "虫情测报灯";
					case 7:
						return "孢子仪";
					case 4:
						return "性诱测报"

				}
			},
			formatValue(val, a1, a2) {
				if (a2 == 4 && a1 == "电池状态") {
					switch (Number(val)) {
						case 0:
							return '正常';
							break;
						case 1:
							return '欠压';
							break;
						case 2:
							return '过压';
							break;
					}
				} else {

					return val ? val : '无'
				}
			}
		},
		onLoad(option) {
			this.equipInfo = JSON.parse(option.info)
			this.getDeviceStatus()
			this.type = Number(this.equipInfo.type) || Number(this.equipInfo.equip_type) || Number(this.equipInfo
				.device_type_id)
			this.equipInfo.type = this.type
			this.device_status = this.equipInfo.is_online
			
			this.getState()
		
			// this.selectaddress(Number(this.equipInfo.lat), Number(this.equipInfo.lng))
			var times = new Date()
			this.date = times.getFullYear() + 1 + "-" + Number(times.getMonth() + 1) + "-" + times.getDate()
		},
		methods: {
			async getDeviceStatus() {
				
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.devices_list',
					data: {
						device_type_id: this.equipInfo.type,
						id: this.equipInfo.imei|| this.equipInfo.device_id,
						page:1,
						size:999
					}
				})
				let newRes = res.device[0]
				this.equipInfo ={...this.equipInfo,...newRes} 
				console.log('响应',this.equipInfo)
			},
			async getState() {
				this.dataloadingtf = true
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.device_status',
					data: {
						device_type_id: this.equipInfo.type,
						id: this.equipInfo.d_id
					}
				})
				this.newState = res
				this.dataloadingtf = false
				console.log('res',res)
			},
	
			partClick(path) {
				console.log(path)
				var device_id = this.equipInfo.device_id || this.equipInfo.imei
				uni.navigateTo({
					url: path + '?d_id=' + this.equipInfo.d_id + "&device_id=" + device_id + "&device_type=" + this
						.type
				});
			},
	

			timeChange(e, filed,errType) {
				this[filed] = e.result
				this[errType] = ""
				this.yxSubmit()
			},
		
			async addYx(d_id) {
				this.decoy = this.formatTime(this.equipInfo.xy_expire_time*1000,'yyyy-MM-dd');
				this.yxShow = true
			},
			async yxSubmit() {
				if (!this.decoy) {
					this.xyErr = "请填写诱芯到期时间";
					return false
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.youxin',
					data: {
						device_type_id: this.equipInfo.type,
						id: this.equipInfo.device_id,
						xy_expire_time:  +new Date(this.decoy) / 1000 
					}
				})
				if (res) {
					this.xyErr = ""
					this.yxShow = false
					this.$refs.toast.show({
						title: '设置成功!',
						type: 'success',
					})
					this.getDeviceStatus()
					// this.equipInfo.xy_expire_time = +new Date(this.decoy) / 1000
				}
			},
			selectaddress(lat, lng) { //获取分布位置
				uni.request({
					type: "GET",
					url: "https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=" + lng + "," + lat +
						"&key=27273b81090f78759e4057f94474516f&radius=1000&extensions=all",
					dataType: "json",
					complete: res => {
						console.log(res)
						this.city = res.data.regeocode.formatted_address
					}
				});
			},
			copy(item) {
				console.log(item)
				uni.setClipboardData({
					data: item.imei || item.device_id,
					success: function() {
						console.log('success');
					}
				});
			}
		},
	}
</script>

<style lang='scss'>
	page {
		padding: 0rpx 48rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		.title{
			color: #999999;
			margin: 32rpx 0;
		}
		.logo{
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
			position: relative;
			top: 8rpx;
		}
		.device-id{
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 18rpx;
			color: #5C5C5C;
			.float-right{
				float: right;
				width: 88px;
				height: 30px;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
				border-top-right-radius: 24rpx;
			}
		}
		
		.on {
			background-image: url('/static/images/cb/online.png');
			color: #fff;
		}
		
		.off {
			background-image: url('/static/images/cb/outline.png');
			color: #999999;
		}
		.info {
			position: relative;
			padding: 8rpx 32rpx 32rpx 32rpx;
			
			line-height: 50rpx;
			font-size: 26rpx;
			border-radius: 24rpx;
			
			background-color: #fff;
			
			box-sizing: border-box;
			width: 100%;
			.info-list{
				overflow: hidden;
				font-size: 12px;
				.float-right{
					float: right;
					color: #666;
					.arrow{
						margin-left: 10rpx;
					}
				}
				.float-left{
					float: left;
					color: #999;
				}
				
			}
			.tishi {
				width: 28rpx;
				height: 28rpx;
				margin: 0rpx 0 0 12rpx;
				position: relative;
				top: 6rpx;
			}
		}

		

		

		.tit {
			font-weight: 800;
			height: 50rpx;
			font-size: 30rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.span {
				color: #6e6c76;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				/* margin-top: 12rpx; */
			}
		}

		.newtishi {
			width: 90%;
			margin: 0 auto;
			text-align: center;
			padding-top: 40rpx;
			font-size: 32rpx;

			.dataloading:after {
				overflow: hidden;
				display: inline-block;
				vertical-align: bottom;
				animation: ellipsis 2s infinite;
				content: "\2026";
			}

			@keyframes ellipsis {
				from {
					width: 2px;
				}

				to {
					width: 15px;
				}
			}
		}

		.newState {
			display: flex;
			flex-wrap: wrap;
			text-align: center;
			margin: 0 -10rpx;

			.item {
				display: flex;
				flex-wrap: nowrap;
				margin: 10rpx;
				width: 316rpx;
				justify-content: flex-start;
				padding: 20rpx 10rpx;
				box-sizing: border-box;
				border-radius: 4px;
			
				background-color: #fff;
				font-size: 24rpx;
				.info-text{
					line-height: 76rpx;
					padding-left: 30rpx;
					font-size: 14px;
					color: #666666;
				}
				.info-con {
					padding-left: 30rpx;
					text-align: left;
					line-height: 40rpx;
					color: #666666;
					.active{
						font-size: 36rpx;
					}
					.val{
						font-size: 24rpx;
					}
				}

				.item_info_img {
					width: 30%;
					text-align: center;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-top: 10rpx;
					}
				}
				
			}
		}

		.btn-box {
			text-align: center;
			padding: 30rpx;
		}

		.field {
			/deep/.uni-input-input {
				border: 2rpx solid #FF0000;
				border-radius: 24rpx;
				width: 140px;
				padding-left: 10rpx;
				box-sizing: border-box;
			}
		}
	}

	/deep/.u-calendar__action {
		display: flex;
		justify-content: space-around;

		.u-calendar__action__text {
			line-height: 25px;
		}
	}

	.red {
		color: rgb(235, 103, 101);
	}
</style>