bigDataApp/pages/fmSys/details.vue

<template>
	<view class="fm-page">
		<uni-nav-bar left-icon="back" background-color='rgba(0,0,0,0)' title="闸门" @clickLeft="clickLeft">
		<!-- 	<view class="self-title">标题栏</view>
			<template v-slot:left><view class="self-back"><uni-icons type="arrowleft" size="24"></uni-icons></view></template>
		 -->
		</uni-nav-bar>
		<view class="fm-content">
			
		
		<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.device_name}}</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>
		
		
			<u-calendar v-model="calendar_show" mode="date" :max-date="date" @change="timeChange($event)">
			</u-calendar>
			<u-toast ref="toast" />
		</view>
		<view class="title"></view>
		<view class="newState">
			<view class="top">
				<view class="left">
					<image class="img" src="https://www.hnyfwlw.com:8006/bigdata_app/image/irrigate/fm.png"></image>
					<view>
						<p> <span class="num">100</span> mm</p>
						<p>闸门下降中...</p>
					</view>
					
				</view>
				<view class="right btn">
					<u-button text="设置开度" size="mini" @click="timeshow = true">设置开度</u-button>
				</view>
			</view>
			<view class="up-down">
				<view class="bottom">
					<view class="opt">
						<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/irrigate/fm-up.png"></image>
						<p class="num">到位</p>
						<p>顶到位</p>
					</view>
					<view class="btn">
						<u-button text="上升" size="mini" @click="timeshow = true">上升</u-button>
					</view>
				</view>
				<view class="bottom">
					<view class="opt">
						<image src="https://www.hnyfwlw.com:8006/bigdata_app/image/irrigate/fm-down.png"></image>
						<p class="num">未到位</p>
						<p>底到位</p>
					</view>
					<view class="btn">
						<u-button class="active" text="下降" size="mini" @click="timeshow = true">下降</u-button>
					</view>
				</view>
			</view>
			<view class="btn">
				<button text="停止" @click="timeshow = true">停止</button>
			</view>
		</view>
		
		<!-- 操作记录 -->
		<view class="consoleList">
			<view class="title">操作记录</view>
			<!-- <view class="histimeBox">
							<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
							<view class="time" @click="consoleshow = true">
								{{consoleTime.startDate ? consoleTime.startDate : '开始'}}
							</view>
							<view class="">至</view>
							<view class="time" @click="consoleshow = true">{{consoleTime.endDate ? consoleTime.endDate : '结束'}}
							</view>
							<u-icon name="close-circle" color="#C1C1C1" size="28" @click="clearContime"
								v-if="consoleTime.startDate"></u-icon>
						</view>
						<u-calendar v-model="consoleshow" mode="range" @change="changeConsoleDate"></u-calendar> -->
			<view class="tableList tableTitle">
		
				<view>时间</view>
				<view>操作内容</view>
				<view>操作结果</view>
				<view>操作人</view>
			</view>
			<view class="tableList" v-for="(item, index) in tableData" :key="item.uptime + index">
				<view>{{item.uptime}}</view>
				<view :class="item.status ? 'success' : 'error'">{{item.operation_content}}</view>
				<view>{{item.uptime}}</view>
				<view>{{item.device_name}}</view>
			</view>
			<u-loadmore style="margin-top: 16rpx;" :status="status" />
		</view>
		<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">
		
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		QueryPermission,
		getPermissionById,
		getUserPermission
	} from "../../util/QueryPermission.js"
	export default {
		data() {
			return {
				city: "",
				type: null, //设备类型
				device_status: null,
				equipInfo: {},
				cbd: [

				],
				newState: {}, //设备最新状态
				setTimeShow: false,
				calendar_show: false,
				culErr: '',

				decoy: '',
				newtishitf: false, //暂无数据提示
				dataloadingtf: true, //加载中提示
				date: "", //日历最大可选日期
				operateType: '',
				status: '', //是否加载更多
				page: 1,
				tableData: [{
					uptime: '06-11 14:02',
					operation_content: '指定开度（700mm）',
					device_name: 'admin'
				}
				]
			}
		},
		computed: {



		},
		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 : '无'
				}
			}
		},
		onReachBottom() {
			if (this.status == 'loadmore') {
				this.page++;
				// this.getEquipcontroldata()
			}
		},
		onLoad(option) {

			this.equipInfo = JSON.parse(option.info)
			console.log(this.equipInfo)
			// 		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.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 getEquipcontroldata() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					consoleTime
				} = this;
				let begin = consoleTime.startDate ? new Date(consoleTime.startDate).getTime() / 1000 : '';
				let end = consoleTime.endDate ? new Date(consoleTime.endDate).getTime() / 1000 : '';
				//操作记录
				let res = await this.$myRequest({
					method: "POST",
					url: "/api/api_gateway?method=xphsp.views.control_log",
					data: {
						device_id: this.device_id,
						page_num: this.page,
						page_size: 15,
						start: begin,
						end: end
					},
				})
				uni.hideLoading();
				// this.tableData = [];
				const record = res.result;
				this.tableData = [...this.tableData, ...record];
				this.total = res.count;
				if (this.page * 15 > this.total) {
					this.status = 'nomore'
				} else {
					this.status = 'loadmore'
				}
				// console.log(this.tableData);
			},
			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
				});
			},


			operate(type) {
				this.calendar_show = true
				this.operateType = type
			},
			timeChange(e, filed) {
				// // 根据type_id，执行相应的操作

				// let typeId = this.equipInfo.type
				// let postData = {}
				// if(typeId===32){
				// 	// 添加诱芯
				// }else if(typeId === 33){
				// 	// 添加诱芯，更换色板
				// 	this.sbSubmit(e.result)
				// }else if(typeId === 34){
				// 	// 添加诱芯，更换卷带
				// 	this.jdSubmit(e.result)
				// }
				this.yxSubmit(e.result)
			},

			async yxSubmit(time) {
				let {
					title,
					url,
					field
				} = this.operateOptions[this.operateType]
				if (!time) {
					this.$refs.toast.show({
						title: '请填写' + title + '到期时间!',
						type: 'warning',
					})
					return false
				}
				let postData = {
					device_type_id: this.equipInfo.type,
					id: this.equipInfo.device_id
				}
				postData[field] = +new Date(time) / 1000
				const res = await this.$myRequest({
					url: url,
					data: postData
				})
				if (res) {
					this.$refs.toast.show({
						title: title + '时间设置成功!',
						type: 'success',
					})
					this.getDeviceStatus()

				}
			},
			// 色板
			async sbSubmit(time) {
				if (!time) {
					this.$refs.toast.show({
						title: '请填写色板到期时间!',
						type: 'warning',
					})
					return false
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.sban',
					data: {
						device_type_id: this.equipInfo.type,
						id: this.equipInfo.device_id,
						sban_expire_time: +new Date(time) / 1000
					}
				})
				if (res) {
					this.$refs.toast.show({
						title: '设置成功!',
						type: 'success',
					})
					this.getDeviceStatus()

				}
			},
			async jdSubmit(time) {
				if (!time) {
					this.$refs.toast.show({
						title: '请填写卷带到期时间!',
						type: 'warning',
					})
					return false
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.syone_jd',
					data: {
						device_type_id: this.equipInfo.type,
						id: this.equipInfo.device_id,
						jd_expire_time: +new Date(time) / 1000
					}
				})
				if (res) {
					this.$refs.toast.show({
						title: '设置成功!',
						type: 'success',
					})
					this.getDeviceStatus()

				}
			},
			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 {
		height: 100%;

		.fm-page {
			width: 100%;
			min-height: 100%;
			background: linear-gradient(180deg, #f5f6fa00 0%, #F5F6FA 23.64%, #F5F6FA 100%), linear-gradient(102deg, #BFEADD 6.77%, #B8F1E7 40.15%, #B9EEF5 84.02%);
		}
		.fm-content{
			padding: 0rpx 32rpx;
			box-sizing: border-box;
		}
		.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; */
			}
		}


		.newState {
			padding: 32rpx;
			border-radius: 16rpx;
			background: #FFF;

			.top {
				height: 112rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					width: 80%;
					display: flex;
					align-items: center;
				}

				.right {
					width: 160rpx;
				}

				.img {
					float: left;
					width: 110rpx;
					height: 110rpx;
					margin-right: 32rpx;
				}
				p:nth-child(2){
					color:#687A74 ;
				}
				.num {
					font-size: 40rpx;
					font-weight: 700;
					color: #042118;
				}
			}

			.up-down {
				height: 222rpx;
				margin: 32rpx 0;
				display: flex;
				gap: 18rpx;
				justify-content: space-between;
			}

			.bottom {
				box-sizing: border-box;
				height: 100%;
				display: flex;
				padding: 32rpx 0;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 30rpx;
				flex: 1 0 0;
				border-radius: 16rpx;
				background: linear-gradient(180deg, #14a4781a 0%, #14a47800 100%), #FFF;

				.opt {
					width: 160rpx;
					height: 70rpx;
					font-size: 24rpx;
					color: #687A74;

					image {
						width: 64rpx;
						height: 64rpx;
						float: left;
						margin-right: 16rpx;
					}

					.num {
						color: #042118;
						font-weight: 700;
						font-size: 28rpx;
					}
				}
			}

			.btn {
				button {
					font-size: 28rpx;
					width: 100%;
					background: #EEF0F8;
					height: 63rpx;
					line-height: 63rpx;
					border: none;
					outline: none;
					border-radius: 16rpx;

					&:after {
						border: none;
					}

					&.active {
						color: #fff;
						background: #14A478;
					}
				}
			}

		}


	}

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

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

	.red {
		color: rgb(235, 103, 101);
	}

	.consoleList {
		padding: 32rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 32rpx;
		min-height: calc(100vh - 1020rpx);
		.title {
			margin: 0;
			margin-bottom: 16rpx;
			color: #042118;
			font-weight: 600;
		}

		.histimeBox {
			margin: 32rpx 0;
		}



		.tableList {
			font-size: 28rpx;
			height: 93rpx;
			color: #042118;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid var(--neutral-color-border-base, #DCE6E3);

			view {
				text-align: center;
			}

			.success {
				color: #14A478;
			}

			.error {
				color: #FF5951;
			}

			view:nth-child(1) {
				width: 160rpx;
				text-align: left;
			}

			view:nth-child(2) {
				width: 170rpx;
			}

			view:nth-child(3) {
				width: 120rpx;
			}
		}

		.tableTitle {
			/* background: #E8F3F0; */
			color: #042118;
			font-weight: 500;
			height: 78rpx;
		}
	}
</style>