443 lines
13 KiB
Vue
443 lines
13 KiB
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?(itemProperty.m == '1'? '自动':'手动'):'--' }`"
|
||
:type="`${itemProperty&&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" >
|
||
<view class="list2">
|
||
<view>
|
||
<image src="/static/images/head/worm_rain.png"></image>
|
||
<text>降雨：</text>{{itemProperty&&itemProperty.rs?(itemProperty.rs === "0"?"无雨":"降雨"): "--" }}
|
||
</view>
|
||
<view>
|
||
<image src="/static/images/head/worm_illu.png"></image>
|
||
<text>光照度：</text>{{itemProperty&&itemProperty.il?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&&itemProperty.aw === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.sk === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.rf === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.fl === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.wf === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.itc === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.df === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.d === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&itemProperty.mw === '1'? '打开':'关闭'}`" :class="[itemProperty&&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&&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.item.deviceData) {
|
||
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;
|
||
}
|
||
|
||
.rowheadstyle {width: 80%; margin: 0 auto;
|
||
height: 40px;
|
||
|
||
}
|
||
.txt-list .list2>view {line-height: 30px;}
|
||
|
||
// 弹窗
|
||
.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> |