333 lines
8.3 KiB
Vue
333 lines
8.3 KiB
Vue
<template>
|
||
<custom-nav-bar :left="true" title="气象站"></custom-nav-bar>
|
||
<view class="header-section">
|
||
|
||
</view>
|
||
<view class="content-section">
|
||
<view class="card">
|
||
<view class="cards-title">
|
||
<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>
|
||
<text class="iconfont icon-fengli icon"></text>
|
||
<text>风力：</text>{{itemProperty && itemProperty.wc?itemProperty.wc:"--"}}级
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-fengsu icon"></text>
|
||
<text>风速：</text>{{itemProperty &&itemProperty.ws?itemProperty.ws:"--"}}m/s
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-fengxiang icon"></text>
|
||
<text>风向：</text>{{itemProperty&&itemProperty.wd?itemProperty.wd:"--"}}
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-daqiyali icon"></text>
|
||
<text>大气压力：</text>{{itemProperty&&itemProperty.p?itemProperty.p:"--"}}hpa
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-wd icon"></text>
|
||
<text>温度：</text>{{itemProperty&&itemProperty.t?itemProperty.t:"--"}}℃
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-shidu icon"></text>
|
||
<text>湿度：</text>{{itemProperty&&itemProperty.h?itemProperty.h:"--"}}%
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-dqyl icon"></text>
|
||
<text>当前雨量：</text>{{itemProperty&&itemProperty.rt?itemProperty.rt:"--"}}mm
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-jyl icon"></text>
|
||
<text>瞬时雨量：</text>{{itemProperty&&itemProperty.ri?itemProperty.ri:"--"}}mm
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-ljyl icon"></text>
|
||
<text>累计雨量：</text>{{itemProperty&&itemProperty.r?itemProperty.r:"--"}}mm
|
||
</view>
|
||
<view>
|
||
<text class="iconfont icon-sb icon"></text>
|
||
<text>设备状态：</text>{{item&&item.status =="online"?"在线":"离线" }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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="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>
|
||
|
||
</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.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() {
|
||
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;
|
||
},
|
||
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">
|
||
.header-section {
|
||
width: 100%;
|
||
padding: 10px 0px 30px 0px;
|
||
background-color: #39ac4f;
|
||
border-radius: 0 0 30px 30px;
|
||
}
|
||
|
||
.content-section {
|
||
position: relative;
|
||
top: -50px;
|
||
}
|
||
|
||
.list2 {
|
||
view {
|
||
margin: 10px 0;
|
||
color: #39ac4f;
|
||
font-weight: bold;
|
||
|
||
text:nth-child(2) {
|
||
min-width: 80px;
|
||
display: inline-block;
|
||
color: #333;
|
||
font-weight: normal;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
|
||
// 弹窗
|
||
.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> |