jsy-app/pages/fourmonitor/pest.vue

<template>
	<custom-nav-bar :left="true" title="虫情"></custom-nav-bar>

	<view class="header-section">
		<view class="card" style="margin-top: 0; ">
			<view class="cards-title">
				<view>
					<view>
						<view>运行模式</view>
					</view>
					<view style="margin-left: 10px;">
						<u-button :text="`${itemProperty.m == '1'? '自动':'手动'}`"
							:type="`${itemProperty.m == '1'? 'success':'warning'}`"
							@click="controlHeadSwitch(item,itemProperty.m,'m')"></u-button>
					</view>
				</view>
				<view class="title-r">
					<view class="iconfont icon-lishijilu icon" @click="openH(item)"></view>
				</view>
			</view>
			<view class="content">
				<view class="cards-content">
					<view class="txt-list" @click="taskdetails">
						<view class="list2">
							<view>
								<svg class="svg-icon" aria-hidden="true">
									<use xlink:href="#icon-yu"></use>
								</svg>
								<text>降雨：</text>{{itemProperty.rs ===null? "--": (itemProperty.rs === "0"?"无雨":"降雨") }}
							</view>
							<view>
								<svg class="svg-icon" aria-hidden="true">
									<use xlink:href="#icon-guangzhao"></use>
								</svg>
								<text>光照度：</text>{{itemProperty.il===null?"--":itemProperty.il}}Lux
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="content-section">
		<view class="grid">
			<view>
				<text class="text">诱虫灯</text>
				<u-button type="success" :text="`${itemProperty.aw === '1'? '打开':'关闭'}`" :class="[itemProperty.aw === '1' ? 'bg-green':'bg-red']"  
					@click="controlHeadSwitch(item,itemProperty.aw,'aw')" />
			</view>
			<view>
				<text class="text">震动装置</text>
				<u-button type="success" :text="`${itemProperty.sk === '1'? '打开':'关闭'}`" :class="[itemProperty.sk === '1' ? 'bg-green':'bg-red']" 
					@click="controlHeadSwitch(item,itemProperty.sk,'sk')" />
			</view>
			<view>
				<text class="text">虫雨挡板</text>
				<u-button type="success" :text="`${itemProperty.rf === '1'? '打开':'关闭'}`" :class="[itemProperty.rf === '1' ? 'bg-green':'bg-red']" 
					@click="controlHeadSwitch(item,itemProperty.rf,'rf')" />
			</view>
			<view>
				<text class="text">补光灯</text>
				<u-button type="success" :text="`${itemProperty.fl === '1'? '打开':'关闭'}`" :class="[itemProperty.fl === '1' ? 'bg-green':'bg-red']" 
					@click="controlHeadSwitch(item,itemProperty.fl,'fl')" />
			</view>
			<view>
				<text class="text">杀虫挡板</text>
				<u-button type="success" :text="`${itemProperty.wf === '1'? '打开':'关闭'}`" :class="[itemProperty.wf === '1' ? 'bg-green':'bg-red']" 
					@click="controlHeadSwitch(item,itemProperty.wf,'wf')" />
			</view>
			<view>
				<text class="text">杀虫控制</text>
				<u-button type="success" :text="`${itemProperty.itc === '1'? '打开':'关闭'}`" :class="[itemProperty.itc === '1' ? 'bg-green':'bg-red']"
					@click="controlHeadSwitch(item,itemProperty.itc,'itc')" />
			</view>
			<view>
				<text class="text">烘干挡板</text>
				<u-button type="success" :text="`${itemProperty.df === '1'? '打开':'关闭'}`" :class="[itemProperty.df === '1' ? 'bg-green':'bg-red']"
					@click="controlHeadSwitch(item,itemProperty.df,'df')" />
			</view>
			<view>
				<text class="text">烘干控制</text>
				<u-button type="success" :text="`${itemProperty.d === '1'? '打开':'关闭'}`" :class="[itemProperty.d === '1' ? 'bg-green':'bg-red']" 
					@click="controlHeadSwitch(item,itemProperty.d,'d')" />
			</view>
			<view>
				<text class="text">移虫装置</text>
				<u-button type="success" :text="`${itemProperty.mw === '1'? '打开':'关闭'}`" :class="[itemProperty.mw === '1'? 'bg-green':'bg-red']" 
					@click="controlHeadSwitch(item,itemProperty.mw,'mw')" />
			</view>
			<view>
				<text class="text">摄像头</text>
				<u-button type="success" text="拍照" @click="controlHeadSwitch(item,0,'car')" />
			</view>
		</view>
	</view>

	<view class="rowheadstyle" v-if="itemProperty.aal!=null">
		<u-button text="分析" size="large" type="primary" @click="analysis(item,itemProperty.aal)"></u-button>
	</view>
	<u-popup :show="showDeviceLog" mode="center">
		<view class="dialog-container">
			<view class="dialog-title">
				<text>虫情历史记录</text>
				<u-icon name="reload" size="20" class="reload-btn" @click="reload"></u-icon>
				<u-icon name="close" size="20" class="close-btn" @click="closeLog"></u-icon>
			</view>
			<view class="dialog-body">
				<view class="logs-data-box" style="width:90vw">
					<view class="logs-container">
						<view class="logs-item" v-for="itemHistory in listData" :key="item.id">
							<view class="row">
								<view class="full-line">
									<text class="label">设备编号：</text>
									<text class="text">{{ itemHistory.deviceCode }}</text>
								</view>
							</view>
							<view class="row">
								<view class="full-line">
									<text class="label">记录时间：</text>
									<text class="text">{{ itemHistory.createTime }}</text>
								</view>
							</view>
							<view class="charge">
								<view class="flex item charge-item">
									<view>{{ itemHistory.historyContent || "-" }}</view>
								</view>
							</view>
						</view>
					</view>
					<uni-pagination :pageCount="query.pageSize" :curPageNum="query.pageNum" :totalNum="total"
						@pageClick="pageTurning"></uni-pagination>
				</view>
			</view>
		</view>
	</u-popup>
	<u-popup :show="showAnalysis" mode="center">
		<view class="dialog-container">
			<view class="dialog-title">
				<text>虫情分析</text>
				<u-icon name="close" size="20" class="close-btn" @click="closeLogAnalysis"></u-icon>
			</view>
			<view class="dialog-body">
				<uni-row class="rowstyle">
					<uni-col :span="24">
						<uni-row class="col1"><uni-col :span="24">
								<view class="text2">分析图片</view>
							</uni-col></uni-row>
						<uni-row class="col2"><uni-col :span="24" style="text-align: center;"><u-image
									:src="analysisImgstr1" :lazy-load="true" style="width: 50%;height: 50%;"
									shape="square"></u-image></uni-col></uni-row>
					</uni-col>
				</uni-row>
				<uni-row class="rowstyle">
					<uni-col :span="24">
						<uni-row class="col1"><uni-col :span="24">
								<view class="text2">分析时间</view>
							</uni-col></uni-row>
						<uni-row class="col2"><uni-col :span="24" style="text-align: center;">
								<view class="text2">{{analysisTime}}</view>
							</uni-col></uni-row>
					</uni-col>
				</uni-row>
				<view v-for="itemanalyse in analyseData" :key="itemanalyse.name">
					<uni-row class="rowstyle">
						<uni-col :span="24">
							<uni-row class="col1"><uni-col :span="24">
									<view class="text2">{{itemanalyse.name}}</view>
								</uni-col></uni-row>
							<uni-row class="col2"><uni-col :span="24" style="text-align: center;">
									<view class="text2">{{itemanalyse.num}}</view>
								</uni-col></uni-row>
						</uni-col>
					</uni-row>
				</view>
			</view>
		</view>
	</u-popup>

</template>
<script>
	import plugin from "@/plugins"
	import {
		controlHeadSwitch
	} from "@/api/controlHeadInterface"
	import {
		getOutDeviceHistoryList
	} from "@/api/system/device_agricultural"
	export default {
		data() {
			return {
				item: {},
				itemProperty: {},
				showDeviceLog: false,
				passParams: {},
				showAnalysis: false,
				analysisImgstr1: "",
				analysisTime: "",
				analyseData: [],
				total: 0,
				listData: [],
				query: {
					pageNum: 1,
					pageSize: 10,
					deviceCode: null
				},
				mqttConnected: false, //	mqtt链接状态
				topics: []
			}
		},
		onLoad(option) {
			if (option.item != null) {
				this.item = JSON.parse(decodeURIComponent(option.item));
				if (this.item) {
					this.itemProperty = this.item.deviceData;
					this.query.deviceCode = this.item.deviceCode;
					let topic = "jsy/iot/push/outProduct/" + this.item.deviceCode;
					this.topics.push(topic);
					this.mqttSubscribes(this.topics);
					getApp().on("mqtt", "mqtt_head", function(e) {
						if (e.type == "state") {
							this.mqttConnected = e.connected;
						} else if (e.type == "msg") {
							this.itemProperty = e.data;
						}
					});
				}
			}
		},
		onUnload() {
			this.mqttUnSubscribes(this.topics);
			getApp().off("mqtt", "mqtt_head")
		},
		methods: {
			mqttSubscribes(topics) {
				getApp().mqttSubscribes(topics);
			},
			mqttUnSubscribes(topics) {
				getApp().mqttUnsubscribes(topics);
			},
			queryList(str) {
				if (str == "into") {
					this.query.pageNum = 1;
				}
				if (str == "pre") {
					this.query.pageNum = this.query.pageNum - 1
				}
				if (str == "next") {
					this.query.pageNum = this.query.query.pageNum + 1
				}
				getOutDeviceHistoryList(this.query).then(res => {
					this.listData = res.rows;
					this.total = res.total;
				})
			},
			//打开历史界面
			openH(item) {
				this.showDeviceLog = true
				this.queryList("into");
			},
			reload() {
				uni.$emit("reloadlogs")
			},
			//关闭历史记录
			closeLog() {
				this.showDeviceLog = false;
			},
			//控制按钮
			controlHeadSwitch(item, e, k) {
				if (this.itemProperty.s === "offline") {
					plugin.modal.msgError("设备离线，不能操作！");
					return;
				}
				if (k === "car" && this.itemProperty.m === "1") {
					plugin.modal.msgError("自动模式不能拍照！");
					return;
				}
				if (k === "car" && this.itemProperty.fl === "0") {
					plugin.modal.msgError("请先打开补光灯！");
					return;
				}
				let par = {
					controlKey: k,
					deviceTypeId: 7,
					operationType: 11,
					deviceCode: item.deviceCode,
					controlValve: e == 1 ? 0 : 1
				};
				controlHeadSwitch(par).then(res => {})
			},
			//打开分析弹出页
			analysis(item, e) {
				if (!e) {
					plugin.modal.msgError("没有可以分析的数据！");
					return;
				}
				let data = JSON.parse(e);
				this.showAnalysis = true;
				this.analysisImgstr1 = data.analyseCoordUrl;
				this.analysisTime = this.formatDate(data.verifyTime, "-");
				this.analyseData = JSON.parse(data.analyseData);
			},
			//关闭分析弹出页
			closeLogAnalysis() {
				this.showAnalysis = false;
			},
			//时间戳转换时间
			formatDate(value, spe) {
				let data = new Date(value);
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month > 9 ? month : "0" + month;
				day = day > 9 ? day : "0" + day;
				h = h > 9 ? h : "0" + h;
				mm = mm > 9 ? mm : "0" + mm;
				s = s > 9 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`;
			},
			pageTurning(flag) {
				if (flag === 0) {
					if (this.query.pageNum - 1 === 0) return
					this.queryList("pre")
				}
				if (flag === 1) {
					if (this.query.pageNum + 1 > Math.ceil(this.total / this.query.pageSize)) return
					this.queryList("next")
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-section {
		width: 100%;
		padding: 10px 0px 30px 0px;
		background-color: #39ac4f;
		border-radius: 0 0 30px 30px;
	}

	.content-section {
		position: relative;
		top: -35px;
	}

	.cards-title {
		border: none;
	}

	.txt-list .left uni-text:first-child {
		width: 60px;
	}

	.txt-list .left>view {
		color: #000;
		line-height: 2;
	}
.rowheadstyle {width: 80%; margin: 0 auto;
		height: 40px;

	}
	

	// 弹窗
	.dialog-container {
		width: 90vw;
		height: 90vh;
		overflow: hidden;

		.dialog-title {
			width: 100%;
			height: 34px;
			font-size: 16px;
			line-height: 34px;
			text-align: center;
			font-weight: bold;
			border-bottom: 1px solid #999;
			position: relative;

			.reload-btn {
				position: absolute;
				top: 50%;
				right: 56px;
				transform: translateY(-50%);
			}

			.close-btn {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
			}
		}


		.logs-item {
			margin: 4px 10px;
			padding: 6px;
			background: white;
			border-radius: 10px;
			border: 1px solid #eee;

			.row {
				line-height: 22px;
				font-size: 14px;
				display: flex;

				.left {
					width: 50%;
					white-space: nowrap;
				}

				.right {
					width: 50%;
					white-space: nowrap;
				}

				.full-line {
					width: 100%;
				}

				.label {
					color: gray;
				}

				.text {
					color: black;
				}
			}
		}

		.charge {
			background: white;
			margin: 10px 10px;
			padding: 20px 10px;
			border-radius: 10px;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.05);
			position: relative;

			.charge-item {
				margin-left: 20px;
			}

			.call {
				position: absolute;
				top: 20px;
				right: 20px;
			}
		}
	}
</style>