wszhyWx/pages/timeEnvironment/timeEnvironment.vue

697 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="timeEnvironment">
<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="实时环境"
title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>
<view class="navbar">
<image src="../../static/timeEnvironment_bg.png" mode=""></image>
</view>
<view class="content">
<view class="title">
<image src="../../static/logo_1.png" mode=""></image>
<view class="right">
<view class="">
温室智慧云
</view>
<view class="">
Greenhouse wisdom Cloud
</view>
</view>
</view>
<view class="subtitle">
欢迎使用温室智慧云数据统计
</view>
<view class="waterAndFertilizerParams" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
<view class="nav">
<image src="../../static/PH.png" mode=""></image>
<text>{{ item1.deviceTypeName }}</text>
</view>
<view class="detail">
<view class="item" v-for="(item2,index2) in item1.childList" :key="index2" @click="toTarget_water_fertilizer_PH(item2.equipmentId,item2.environmentData)">
<image :src='`../../static/icon/icon${ (index2 + 1) < 9 ? (index2 + 1) : 1 }.png`' mode=""></image>
<view class="info">
<view class="">{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}</view>
<view class="">{{ item2.environmentData + getTypeList(item2.formula) }}</view>
</view>
</view>
</view>
<view class="updateTime">
<span></span>
<span>*更新数据时间&nbsp;: &nbsp;{{ updateTime }}</span>
</view>
</view>
<!-- <view class="testBase" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
<view class="nav">
<image src="../../static/base.png" mode=""></image>
<text>{{ item1.deviceTypeName }}</text>
</view>
<view class="detail">
<view class="item" v-for="(item2,index2) in item1.childList" :key="index2" @click="toTarget_water_fertilizer_PH(item2.equipmentId,item2.environmentData)">
<image :src='`../../static/icon/icon@${ item2.formula ? item2.formula : 1 }.png`' mode=""></image>
<view class="info">
<view class="">{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}</view>
<view class="">{{ item2.environmentData + getTypeList(item2.formula) }}</view>
</view>
</view>
</view>
</view> -->
<!-- <view class="testBase1" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
<view class="nav">
<image src="../../static/testBase1.png" mode=""></image>
<text>{{ item1.deviceTypeName }}</text>
<text>温室#1</text>
</view>
<view class="item" v-for="(item2,index2) in item1.childList" :key="index2" @click="toTarget_water_fertilizer_PH(item2.equipmentId,item2.environmentData)">
<image :src="`../../static/icon/${ (index2 + 1) < 5 ? (index2 + 1) : 1 }.png`" mode=""></image>
<text>{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}</text>
<text>{{ item2.environmentData + getTypeList(item2.formula) }}</text>
</view>
</view> -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 头部导航背景
background: {
backgroundColor: 'transparent',
},
// 水肥参数
waterAndFertilizerParamsList: [
],
// 测试基地
testBaseList: [{
img: "../../static/base1.png",
name: '空气温度',
value: "38.8klux"
},
{
img: "../../static/base2.png",
name: '光亮度',
value: "38.8klux"
},
{
img: "../../static/base3.png",
name: '二氧化碳',
value: "二氧化碳"
},
{
img: "../../static/base3.png",
name: '二氧化碳',
value: "678PPM"
},
{
img: "../../static/base4.png",
name: '土壤温度',
value: "20℃"
},
{
img: "../../static/base4.png",
name: '土壤温度',
value: "30.1℃"
},
{
img: "../../static/base5.png",
name: '土壤湿度',
value: "18.5%"
},
{
img: "../../static/base5.png",
name: '土壤湿度',
value: "18.5%"
},
{
img: "../../static/base6.png",
name: '水肥PH',
value: "0"
},
{
img: "../../static/base6.png",
name: '水肥EC',
value: "0.2mS/cm"
},
{
img: "../../static/base7.png",
name: '3#空气温度',
value: "29.8C"
},
{
img: "../../static/base8.png",
name: '3#空气湿度',
value: "80.6%"
},
{
img: "../../static/base2.png",
name: '3#光亮度',
value: "34.6 klux"
},
{
img: "../../static/base3.png",
name: '3#二氧化碳',
value: "29.8C"
},
{
img: "../../static/base5.png",
name: '3#土壤温度',
value: "31℃"
},
],
// 测试基地
testBaseList1: [{
img: "../../static/1.png",
name: '4#光亮度',
value: "43 klux"
},
{
img: "../../static/2.png",
name: '4#二氧化碳',
value: "742 PPM"
},
{
img: "../../static/3.png",
name: '4#土壤温度',
value: "29.3C"
},
{
img: "../../static/4.png",
name: '4#土壤湿度',
value: "4%"
},
],
//label是名称 value是code码
//countType计算类型 0是原数据 1是原数据-400 2是原数据/10 3是(原数据-400) / 10
typeList: [
{ label: '无意义的传感器', value: 0, countType: 0 },
{ label: '空气温度', value: 1, countType: 3,unit: '℃' },
{ label: '空气湿度', value: 2, countType: 2,unit: '%' },
{ label: '光亮度', value: 3, countType: 2,unit: 'Klux' },
{ label: '二氧化碳', value: 4, countType: 0,unit: 'ppm' },
{ label: '土壤温度', value: 5, countType: 3,unit: '℃' },
{ label: '土壤湿度', value: 6, countType: 2,unit: '%' },
{ label: '水温', value: 7, countType: 3,unit: '℃' },
{ label: '水肥PH', value: 8, countType: 2,unit: '' },
{ label: '水肥EC', value: 9, countType: 2,unit: 'mS/cm' },
{ label: '压差', value: 10, countType: 0,unit: 'Pa' },
{ label: '风速', value: 11, countType: 2,unit: 'm/s' },
{ label: '风向', value: 12, countType: 0,unit: '°' },
{ label: '雨雪信号', value: 13, countType: 0,unit: '' },
{ label: '降雨量', value: 14, countType: 2,unit: 'mm' },
{ label: '光合有效辐射', value: 15, countType: 2,unit: 'umol/m2.s' },
{ label: '太阳总辐射', value: 16, countType: 0,unit: 'W/m2' },
{ label: '流量', value: 17, countType: 0,unit: 'L/H' },
{ label: '大气压强', value: 18, countType: 2,unit: 'KPa' },
{ label: '土壤PH', value: 19, countType: 2,unit: '' },
{ label: '土壤EC', value: 20, countType: 0,unit: 'uS/cm' },
{ label: '叶面温度', value: 21, countType: 3,unit: '℃'},
{ label: '叶面湿度', value: 22, countType: 2,unit: '%' },
{ label: '果实直径', value: 23, countType: 0,unit: 'mm' },
{ label: '茎秆直径', value: 24, countType: 0,unit: 'mm' },
{ label: '流速', value: 25, countType: 2,unit: 'm/s' },
{ label: '瞬时流量', value: 26, countType: 2,unit: 'm3' },
{ label: '当日流量', value: 27, countType: 2,unit: 'T' },
{ label: '累计流量', value: 28, countType: 0,unit: 'T' },
{ label: '无线气象站电池电压', value: 29, countType: 2,unit: 'V' },
{ label: '无线气象站无线信号强度', value: 30, countType: 1,unit: 'dBm' },
{ label: '无线气象站信噪比SNR', value: 31, countType: 1,unit: 'dB' },
{ label: 'PM1.0', value: 32, countType: 0,unit: 'μg/m2' },
{ label: 'PM2.5', value: 33, countType: 0,unit: 'μg/m2' },
{ label: 'PM10', value: 34, countType: 0,unit: 'μg/m2' },
{ label: '紫外辐射', value: 35, countType: 0,unit: 'W/m2' },
{ label: '蒸发量', value: 36, countType: 2,unit: 'mm' },
{ label: '负氧离子', value: 37, countType: 0,unit: '个/cm3' },
{ label: '露点温度', value: 38, countType: 3,unit: '℃'},
{ label: '设备电压', value: 39, countType: 2,unit: 'V' },
{ label: '设备电流', value: 40, countType: 2,unit: 'A' },
{ label: '土壤氮含量', value: 41, countType: 0,unit: 'mg/kg' },
{ label: '土壤磷含量', value: 42, countType: 0,unit: 'mg/kg' },
{ label: '土壤钾含量', value: 43, countType: 0,unit: 'mg/kg' },
{ label: '管道压力', value: 44, countType: 0,unit: 'Kpa' },
{ label: '一氧化碳', value: 45, countType: 0,unit: 'ppm' },
{ label: '氨气', value: 46, countType: 0,unit: 'ppm' },
{ label: '硫化氢', value: 47, countType: 0,unit: 'ppm' },
{ label: '氧气', value: 48, countType: 2,unit: '%vol' },
{ label: '甲烷', value: 49, countType: 2,unit: '%vol' },
{ label: '铜CU', value: 50, countType: 0,unit: 'mg/kg' },
{ label: '镉CD', value: 51, countType: 2,unit: 'mg/kg' },
{ label: '铅PB', value: 52, countType: 0,unit: 'mg/kg' },
{ label: '噪声', value: 53, countType: 0,unit: 'dB' },
{ label: '叶面面积', value: 54, countType: 0,unit: 'mm' },
{ label: '虫数量', value: 55, countType: 0,unit: '个' },
{ label: '无线传感器电池电压', value: 56, countType: 2,unit: 'V' },
{ label: '无线传感器无线信号强度', value: 57, countType: 1,unit: 'dBm' },
{ label: '无线传感器信噪比SNR', value: 58, countType: 1,unit: 'dB' },
],
timer:null,
updateTime:''
}
},
onLoad() {
let that = this
this.timer = setInterval(function() {
uni.getStorage({
key: 'token',
success: function(res) {
that.getEquipmentInfo(uni.getStorageSync('userid'))
},
// fail:function(err){
// uni.reLaunch({
// url:'/pages/login/login'
// })
// }
})
}, 60000);
},
onUnload() {
clearTimeout(this.timer)
},
onPullDownRefresh() {
let that = this
uni.getStorage({
key: 'token',
success: function(res) {
that.getEquipmentInfo(uni.getStorageSync('userid'))
},
// fail:function(err){
// uni.reLaunch({
// url:'/pages/login/login'
// })
// }
})
},
mounted() {
let that = this
uni.getStorage({
key: 'token',
success: function(res) {
that.getEquipmentInfo(uni.getStorageSync('userid'))
},
fail:function(err){
uni.reLaunch({
url:'/pages/login/login'
})
}
})
},
methods: {
// 根据用户id查询对应的设备数据
getEquipmentInfo(userid) {
let that = this
uni.showLoading({
title: '加载中...'
});
this.$http({
url: this.api.sel_eqbyid + userid,
method: 'GET'
}).then(res => {
// console.log(res, '根据用户id查询对应的设备数据');
if (res.code == 200) {
this.waterAndFertilizerParamsList = res.data.map((item,index)=>{
return {
...item,
childList:[]
}
})
this.waterAndFertilizerParamsList.forEach((i,index)=>{
this.$http({
url: this.api.getFs_rtdata + "?equipmentId=" + i.deviceId,
method: 'post',
}).then(res => {
// console.log(res, '主页查看施肥机实时数据');
if(res.code == 200){
uni.hideLoading({
title: '完成'
});
uni.stopPullDownRefresh();
i.childList= res.data;
this.updateTime = res.data[0].updateTime
// console.log(this.waterAndFertilizerParamsList);
}else{
}
}).catch(err=>{
console.log('接口失败');
})
})
}
})
},
// 跳转到折线图
toTarget_water_fertilizer_PH(id,data){
uni.navigateTo({
url:'/pages/target_water_fertilizer_PH/target_water_fertilizer_PH?id=' + id + '&data=' + data
})
},
// 数据单位
getTypeList(val){
let typeList1 = []
typeList1 = this.typeList.filter(item=> {
return item.value == val
})
return typeList1[0].unit
},
// 判断是否是平均或者目标,或者是1#
getStatus(equipmentNumber,targetValue){
if(targetValue == 1){
return '目标'
}else if(targetValue == 0 && equipmentNumber == 0){
return '1#平均'
}else if(targetValue == 0 && equipmentNumber == 15){
return '2#平均'
}else if(targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15){
return equipmentNumber + '#'
}
}
}
}
</script>
<style lang="scss" scoped>
.timeEnvironment {
width: 100%;
min-height: 100vh;
box-sizing: border-box;
position: relative;
background-color: #F5F6FA;
.navbar {
width: 100%;
height: 100%;
>image {
width: 750rpx;
height: 500rpx;
position: absolute;
top: 0;
left: 0;
}
}
.content {
position: absolute;
z-index: 2;
box-sizing: border-box;
padding: 0rpx 30rpx 30rpx;
.title {
display: flex;
align-items: center;
>image {
width: 71rpx;
height: 65rpx;
}
.right {
margin-left: 14rpx;
>view:nth-child(1) {
font-size: 44rpx;
font-family: AlibabaPuHuiTiB;
font-weight: bold;
color: #FFFFFF;
}
>view:nth-child(2) {
font-size: 16rpx;
font-family: Arial-BoldMT;
font-weight: bold;
color: #FFFFFF;
line-height: 20rpx;
opacity: 0.5;
}
}
}
.subtitle {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #FFFFFF;
margin-top: 26rpx;
}
.waterAndFertilizerParams {
width: 690rpx;
height: auto;
box-sizing: border-box;
padding: 20rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
margin-top: 69rpx;
.nav {
height: 90rpx;
display: flex;
align-items: center;
border-bottom: 1rpx solid #DDDDDD;
>image {
width: 50rpx;
height: 50rpx;
margin-right: 16rpx;
}
>text {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
}
.detail {
width: 100%;
height: calc(100% - 90rpx);
box-sizing: border-box;
padding: 10rpx 0rpx;
display: flex;
flex-wrap: wrap;
// justify-content: space-evenly;
.item {
width: 50%;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 20rpx;
margin-top: 30rpx;
>image {
width: 80rpx;
height: 80rpx;
margin-right: 19rpx;
}
.info {
>view:nth-child(1) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
>view:nth-child(2) {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
}
}
}
.updateTime{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
font-size: 22rpx;
}
}
.testBase {
width: 690rpx;
height: auto;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
margin-top: 30rpx;
.nav {
height: 90rpx;
box-sizing: border-box;
padding: 20rpx;
display: flex;
align-items: center;
>image {
width: 50rpx;
height: 50rpx;
margin-right: 16rpx;
}
>text {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
}
.detail {
width: 100%;
height: calc(100% - 90rpx);
display: flex;
flex-wrap: wrap;
padding-bottom: 46rpx;
.item {
width: 33%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 30rpx;
>image {
width: 60rpx;
height: 60rpx;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10rpx;
>view:nth-child(1) {
font-size: 24rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
>view:nth-child(2) {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
}
}
}
}
.testBase1 {
width: 690rpx;
height: auto;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(153, 153, 153, 0.1);
border-radius: 20rpx;
margin-top: 30rpx;
box-sizing: border-box;
padding: 0 20rpx 1rpx;
.nav {
height: 90rpx;
box-sizing: border-box;
padding: 20rpx;
display: flex;
align-items: center;
>image {
width: 50rpx;
height: 50rpx;
margin-right: 16rpx;
}
>text:nth-child(2) {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
>text:nth-child(3) {
width: 90rpx;
height: 44rpx;
background: #EFFCF7;
border: 2px solid rgba(58, 187, 144, 0.25);
border-radius: 22rpx;
font-size: 20rpx;
font-family: PingFang SC;
font-weight: bold;
color: #37BA8E;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15rpx;
}
}
.item {
width: 650rpx;
height: 90rpx;
background: #F5F6FA;
border: 2px solid #E7E9F1;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30rpx;
box-sizing: border-box;
padding: 0 30rpx 0 20rpx;
>image {
width: 40rpx;
height: 39rpx;
margin-right: 20rpx;
}
>text:nth-child(2) {
flex: 1;
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
>text:nth-child(3) {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: bold;
color: #333333;
}
}
}
}
}
</style>