bigdata_WX/pages/fmSys/details.vue

<template>
	<view class="fm-page">
		<!-- <view class="status_bar"></view> -->
		<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="`${$imageURL}/bigdata_pc/equipdistribute/${equipInfo.type}.png`" mode="">
					</image>
					{{equipInfo.imei||equipInfo.device_id || equipInfo.id}}
					<image :src="$imageURL+'/bigdata_app/image/environment/fuzhi.png'" mode=""
						class="tishi">
					</image>
					<view
						:class="['float-right','yficonfont',equipInfo.status==1?'on icon-zaixian':'off icon-lixian']">
						{{equipInfo.status==1?'在线':'离线'}}
					</view>
				</view>
				<view class="info-list">
					<span class="float-left">设备名称：</span> <span class="float-right">{{equipInfo.device_name || equipInfo.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)" range-color="#999"
					btn-type="success"
					active-bg-color="#0BBC58"
					range-bg-color="rgba(11,188,88,0.13)">
				</u-calendar>
				<u-toast ref="toast" />
			</view>
			<view class="title"></view>
			<view class="newState">
				<view class="top">
					<view class="left">
						<image class="img" 
						:src="$imageURL+'/bigdata_app/image/irrigate/fm.png'"
						></image>
						<view>
							<p> <span class="num">{{deviceData.nowHeight}}</span> mm</p>
							<p>{{deviceData.deviceStatus}}</p>
						</view>

					</view>
					<view class="btn" style="width:170rpx">
						<u-button text="设置开度" size="mini" @click="kdShow = true">设置开度</u-button>
					</view>
					<view class="right btn">
						<u-button text="刷新" size="mini" @click="zfControl('refresh')">刷新</u-button>
					</view>
				</view>
				<view class="up-down">
					<view class="bottom">
						<view class="opt">
							<image 
							:src="$imageURL+'/bigdata_app/image/irrigate/fm-up.png'"
							></image>
							<!-- <p class="num">到位</p>
						<p>顶到位</p> -->
						</view>
						<view class="btn">
							<u-button text="上升" size="mini" @click="zfControl('up')">上升</u-button>
						</view>
					</view>
					<view class="bottom">
						<view class="opt">
							<image :src="$imageURL+'/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="zfControl('down')">下降</u-button>
						</view>
					</view>
				</view>
				<view class="btn">
					<button text="停止" @click="zfControl('stop')">停止</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  @maxDate="maxDate" v-model="consoleshow" mode="range" @change="changeConsoleDate" range-color="#999"
					btn-type="success"
					active-bg-color="#0BBC58"
					range-bg-color="rgba(11,188,88,0.13)"></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.addtime + index">
					<view>{{item.addtime}}</view>
					<view :class="item.status=='成功' ? 'success' : 'error'">{{item.order}}</view>
					<view>{{item.status}}</view>
					<view>{{item.user}}</view>
				</view>
				<u-loadmore style="margin-top: 16rpx;" :status="status" />
			</view>
			<u-popup v-model="kdShow" mode="center" width="600rpx">
				<view style="padding: 40rpx;">
					<slider style="margin-top: 20rpx;" :value="kdValue" show-value="true" :min="0" :max="1000"
						block-color="#57C878" activeColor="#57C878" step="1" />
					<view class="btn-box">
						<u-button @click="kdSubmit" size="mini" type="success">确定</u-button>
					</view>
				</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		QueryPermission,
		getPermissionById,
		getUserPermission
	} from "@/util/QueryPermission.js"
	export default {
		data() {
			return {
				maxDate: '2050-12-31',
				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: [],
				deviceData: {},
				consoleshow: false,
				consoleTime: {},
				kdValue: 0,
				kdShow: false
			}
		},
		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,'equipInfoequipInfo')
			this.getEquipcontroldata()
			this.getDeviceList()
			// 		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: {
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			kdSubmit() {
				this.kdShow = false
				this.zfControl('value')
			},
			// 指令下发
			zfControl(cmd) {

				this.$myRequest({
					method: 'POST',
					url: '/api/api_gateway?method=hran.view.hran_order',
					data: {
						d_id: this.equipInfo.d_id,
						order: cmd,
						controlValue: this.kdValue
					}
				}).then((res) => {
					console.log('指令', res)
					if (res == true) {
						uni.showToast({
							title: '指令下发成功！',
							duration: 2000,
						});
						setTimeout(() => {
							this.tableData = [];
							this.page = 1;
							this.getEquipcontroldata()
						}, 2000)
					} else {
						uni.showToast({
							title: '指令下发失败！',
							duration: 2000,
						});
					}
				})
			},
			changeConsoleDate(e) {
				console.log(e)
				this.consoleTime = e;
				this.tableData = [];
				this.page = 1;
				this.getEquipcontroldata();
			},
			clearContime() {
				this.consoleTime = {};
				this.tableData = [];
				this.page = 1;
				this.getEquipcontroldata();
			},
			//操作记录
			async getEquipcontroldata() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					consoleTime
				} = this;
				let begin = consoleTime.startDate ? new Date(consoleTime.startDate+ ' 00:00:00').getTime() / 1000 : '';
				let end = consoleTime.endDate ? new Date(consoleTime.endDate+ ' 23:59:59').getTime() / 1000 : '';
				//操作记录
				let res = await this.$myRequest({
					method: "POST",
					url: "/api/api_gateway?method=hran.view.hran_order_list",
					data: {
						d_id: this.equipInfo.d_id,
						page: this.page,
						page_size: 15,
						start: begin,
						end: end
					},
				})
				console.log(res)
				uni.hideLoading();
				// this.tableData = [];
				const record = res.data;
				this.tableData = [...this.tableData, ...record];
				this.total = res.total;
				if (this.page * 15 > this.total) {
					this.status = 'nomore'
				} else {
					this.status = 'loadmore'
				}
				// console.log(this.tableData);
			},
			// 获取设备数据
			getDeviceList() {
				this.devicetf = true
				const {
					consoleTime
				} = this;
				let begin = consoleTime.startDate ? new Date(consoleTime.startDate+ ' 00:00:00').getTime() / 1000 : '';
				let end = consoleTime.endDate ? new Date(consoleTime.endDate+ ' 23:59:59').getTime() / 1000 : '';
				try {
					this.$myRequest({
						method: 'POST',
						url: '/api/api_gateway?method=hran.view.hran_data',
						data: {
							d_id: this.equipInfo.d_id,
							start: begin,
							end: end,
							page: 1,
							page_size: 1
						}
					}).then((res) => {
						this.devicetf = false
						console.log('设备数据', res)

						if (res.data.length > 0) {
							const {
								data,
								title
							} = res
							// console.log(data, title, total)
							this.deviceData = data[0]
							// this.deviceTitle = title
						} else {
							this.deviceData = {}
						}

					})
				} catch (error) {
					console.log('+++++', error)
				}
			},
			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 || this.equipInfo.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 || this.equipInfo.id;
				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 || item.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%);
			padding-top: 44rpx;
		}

		.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: 40%;
					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: 70rpx;
					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;
		}
	}

	.histimeBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 56rpx;
		padding: 6rpx 24rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		margin-top: 54rpx;
		border: 2rpx solid var(--neutral-color-border-light, #e4edea);

		.u-icon {
			z-index: 10;
		}

		.time {
			width: 280rpx;
			color: #c1c1c1;
		}

		view {
			color: #333333;
			text-align: center;
		}

	}

	.btn-box {
		text-align: center;
	}
</style>