393 lines
10 KiB
Vue
393 lines
10 KiB
Vue
<template>
|
|
<view class="page">
|
|
<uni-row style="height: 30px;">
|
|
<uni-col :span="24" >
|
|
<u-button text="历史" type="info"
|
|
style="height: 30px;width: 60px;margin-bottom: 2px;margin-top: 2px;float: right;margin-right: 5px;" @click="openH(item)"></u-button>
|
|
</uni-col>
|
|
</uni-row>
|
|
<uni-row class="rowstyle">
|
|
<view class="rowview">
|
|
<uni-col :span="6">
|
|
<u-icon label="风力:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/qxzfj.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.wc===null?"--":itemProperty.wc}}级
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<u-icon label="风速:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/header-fengsu.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.ws===null?"--":itemProperty.ws}}m/s
|
|
</view>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
<uni-row class="rowstyle">
|
|
<view class="rowview">
|
|
<uni-col :span="6" >
|
|
<u-icon label="风向:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/header-fengxiang.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.wd===null?"--":itemProperty.wd}}
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<u-icon label="大气压力:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/header-daqiyali.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.p===null?"--":itemProperty.p}}hpa
|
|
</view>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
<uni-row class="rowstyle">
|
|
<view class="rowview">
|
|
<uni-col :span="6" >
|
|
<u-icon label="温度:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/header-wendu.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.t===null?"--":itemProperty.t}}℃
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<u-icon label="湿度:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/header-shidu.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.h===null?"--":itemProperty.h}}%
|
|
</view>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
<uni-row class="rowstyle">
|
|
<view class="rowview" >
|
|
<uni-col :span="6">
|
|
<u-icon label="当前雨量:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/qxzylc.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.rt===null?"--":itemProperty.rt}}mm
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<u-icon label="瞬时雨量:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/qxzdqyl.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.ri===null?"--":itemProperty.ri}}mm
|
|
</view>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
<uni-row class="rowstyle">
|
|
<view class="rowview" >
|
|
<uni-col :span="6">
|
|
<u-icon label="累计雨量:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/qxzljjyl.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<view class="valuecol">
|
|
{{itemProperty.r===null?"--":itemProperty.r}}mm
|
|
</view>
|
|
</uni-col>
|
|
<uni-col :span="6">
|
|
<u-icon label="设备状态:" labelPos="right" label-color="white" size="30" labelSize="10"
|
|
name="../../static/images/head/sbzt.png"></u-icon>
|
|
</uni-col>
|
|
<uni-col :span="6" >
|
|
<view class="valuecol">
|
|
{{itemProperty.s =="online"?"在线":"离线" }}
|
|
</view>
|
|
</uni-col>
|
|
</view>
|
|
</uni-row>
|
|
<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="left">
|
|
<text class="label">设备编号：</text>
|
|
<text class="text">{{ itemHistory.deviceCode }}</text>
|
|
</view>
|
|
<view class="right">
|
|
<text class="label">温度：</text>
|
|
<text class="text">{{ itemHistory.temperature }}℃</text>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="left">
|
|
<text class="label">湿度：</text>
|
|
<text class="text">{{ itemHistory.humidity}}%</text>
|
|
</view>
|
|
<view class="right">
|
|
<text class="label">大气压力：</text>
|
|
<text class="text">{{ itemHistory.pressure }}kPa</text>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="left">
|
|
<text class="label">风级：</text>
|
|
<text class="text">{{ itemHistory.windClass}}级</text>
|
|
</view>
|
|
<view class="right">
|
|
<text class="label">风向：</text>
|
|
<text class="text">{{ itemHistory.windDirection }}kPa</text>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="left">
|
|
<text class="label">当前雨量：</text>
|
|
<text class="text">{{ itemHistory.rainCurrent}}级</text>
|
|
</view>
|
|
<view class="right">
|
|
<text class="label">累计雨量：</text>
|
|
<text class="text">{{ itemHistory.rainFall }}kPa</text>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="full-line">
|
|
<text class="label">记录时间：</text>
|
|
<text class="text">{{ itemHistory.createTime }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-pagination :pageCount="query.pageSize" :curPageNum="query.pageNum" :totalNum="total" @pageClick="pageTurning"></uni-pagination>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
<script >
|
|
import {
|
|
getOutDeviceHistoryList
|
|
} from "@/api/system/device_agricultural"
|
|
export default {
|
|
data() {
|
|
return {
|
|
item: {},
|
|
itemProperty: {},
|
|
showDeviceLog: false,
|
|
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().addMsgEvent("mqtt", "mqtt_head", function(e) {
|
|
if (e.type == "state") {
|
|
that.mqttConnected = e.connected;
|
|
} else if (e.type == "msg") {
|
|
this.itemProperty = e.data;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
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;
|
|
},
|
|
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">
|
|
.page{
|
|
background-color:cadetblue;
|
|
height: 1200px;
|
|
width: 100%;
|
|
}
|
|
.uni-page-head {
|
|
display: none
|
|
}
|
|
|
|
.demo-uni-col {
|
|
height: 32px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.dark {
|
|
background-color: cadetblue;
|
|
}
|
|
|
|
.light {
|
|
background-color: cadetblue;
|
|
}
|
|
.rowstyle{
|
|
height: 60px;
|
|
left: 10px;
|
|
|
|
}
|
|
|
|
.rowview {
|
|
margin-top: 5px;
|
|
height: 100%;
|
|
width: 100%;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.valuecol {
|
|
height: 80%;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
text-align: left;
|
|
line-height: 28px;
|
|
font-size: 10px;
|
|
// border: 1px solid black;
|
|
width: 95%;
|
|
// background-color: white;
|
|
color: white;
|
|
}
|
|
|
|
// 弹窗
|
|
.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%);
|
|
}
|
|
}
|
|
.dialog-body {
|
|
height: calc(100% - 35px);
|
|
overflow: hidden;
|
|
position: relative;
|
|
background-color: #f7f7f7;
|
|
//扫码的弹窗
|
|
.scancode-device-info {
|
|
height: 100%;
|
|
padding: 0 20px;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
& > view {
|
|
width: 100%;
|
|
line-height: 40px;
|
|
font-size: 18px;
|
|
color: gray;
|
|
.label {
|
|
display: inline-block;
|
|
width: 30%;
|
|
color: black;
|
|
margin-right: 2px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.control-panel {
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-evenly;
|
|
& > view {
|
|
padding: 6px 10px;
|
|
color: #007acc;
|
|
font-size: 14px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
</style> |