wszhyWx/pages/timeEnvironment/timeEnvironment.vue

697 lines
18 KiB
Vue
Raw Normal View History

2023-09-28 10:07:02 +00:00
<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">
2023-10-05 04:08:22 +00:00
<image src="../../static/timeEnvironment_bg.png" mode=""></image>
2023-09-28 10:07:02 +00:00
</view>
<view class="content">
<view class="title">
2023-10-05 04:08:22 +00:00
<image src="../../static/logo_1.png" mode=""></image>
2023-09-28 10:07:02 +00:00
<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">
2023-10-05 04:08:22 +00:00
<image src="../../static/PH.png" mode=""></image>
2023-09-28 10:07:02 +00:00
<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)">
2023-10-05 04:08:22 +00:00
<image :src='`../../static/icon/icon${ (index2 + 1) < 9 ? (index2 + 1) : 1 }.png`' mode=""></image>
2023-09-28 10:07:02 +00:00
<view class="info">
2023-10-05 04:08:22 +00:00
<view class="">{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}</view>
<view class="">{{ item2.environmentData + getTypeList(item2.formula) }}</view>
2023-09-28 10:07:02 +00:00
</view>
</view>
</view>
<view class="updateTime">
<span></span>
<span>*更新数据时间&nbsp;: &nbsp;{{ updateTime }}</span>
</view>
2023-09-28 10:07:02 +00:00
</view>
2023-10-09 10:07:25 +00:00
<!-- <view class="testBase" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
2023-09-28 10:07:02 +00:00
<view class="nav">
2023-10-05 04:08:22 +00:00
<image src="../../static/base.png" mode=""></image>
2023-09-28 10:07:02 +00:00
<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)">
2023-10-05 04:08:22 +00:00
<image :src='`../../static/icon/icon@${ item2.formula ? item2.formula : 1 }.png`' mode=""></image>
2023-09-28 10:07:02 +00:00
<view class="info">
2023-10-05 04:08:22 +00:00
<view class="">{{ getStatus(item2.equipmentNumber,item2.targetValue) + item2.environmentDataId }}</view>
<view class="">{{ item2.environmentData + getTypeList(item2.formula) }}</view>
2023-09-28 10:07:02 +00:00
</view>
</view>
</view>
2023-10-09 10:07:25 +00:00
</view> -->
2023-09-28 10:07:02 +00:00
2023-10-09 10:07:25 +00:00
<!-- <view class="testBase1" v-for="(item1,index1) in waterAndFertilizerParamsList" :key="index1">
2023-09-28 10:07:02 +00:00
<view class="nav">
2023-10-05 04:08:22 +00:00
<image src="../../static/testBase1.png" mode=""></image>
2023-09-28 10:07:02 +00:00
<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)">
2023-10-05 04:08:22 +00:00
<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>
2023-09-28 10:07:02 +00:00
</view>
2023-10-09 10:07:25 +00:00
</view> -->
2023-09-28 10:07:02 +00:00
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 头部导航背景
background: {
backgroundColor: 'transparent',
},
// 水肥参数
waterAndFertilizerParamsList: [
],
// 测试基地
testBaseList: [{
2023-10-05 04:08:22 +00:00
img: "../../static/base1.png",
2023-09-28 10:07:02 +00:00
name: '空气温度',
value: "38.8klux"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base2.png",
2023-09-28 10:07:02 +00:00
name: '光亮度',
value: "38.8klux"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base3.png",
2023-09-28 10:07:02 +00:00
name: '二氧化碳',
value: "二氧化碳"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base3.png",
2023-09-28 10:07:02 +00:00
name: '二氧化碳',
value: "678PPM"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base4.png",
2023-09-28 10:07:02 +00:00
name: '土壤温度',
value: "20℃"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base4.png",
2023-09-28 10:07:02 +00:00
name: '土壤温度',
value: "30.1℃"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base5.png",
2023-09-28 10:07:02 +00:00
name: '土壤湿度',
value: "18.5%"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base5.png",
2023-09-28 10:07:02 +00:00
name: '土壤湿度',
value: "18.5%"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base6.png",
2023-09-28 10:07:02 +00:00
name: '水肥PH',
value: "0"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base6.png",
2023-09-28 10:07:02 +00:00
name: '水肥EC',
value: "0.2mS/cm"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base7.png",
2023-09-28 10:07:02 +00:00
name: '3#空气温度',
value: "29.8C"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base8.png",
2023-09-28 10:07:02 +00:00
name: '3#空气湿度',
value: "80.6%"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base2.png",
2023-09-28 10:07:02 +00:00
name: '3#光亮度',
value: "34.6 klux"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base3.png",
2023-09-28 10:07:02 +00:00
name: '3#二氧化碳',
value: "29.8C"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/base5.png",
2023-09-28 10:07:02 +00:00
name: '3#土壤温度',
value: "31℃"
},
],
// 测试基地
testBaseList1: [{
2023-10-05 04:08:22 +00:00
img: "../../static/1.png",
2023-09-28 10:07:02 +00:00
name: '4#光亮度',
value: "43 klux"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/2.png",
2023-09-28 10:07:02 +00:00
name: '4#二氧化碳',
value: "742 PPM"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/3.png",
2023-09-28 10:07:02 +00:00
name: '4#土壤温度',
value: "29.3C"
},
{
2023-10-05 04:08:22 +00:00
img: "../../static/4.png",
2023-09-28 10:07:02 +00:00
name: '4#土壤湿度',
value: "4%"
},
],
2023-10-05 04:08:22 +00:00
//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' },
2023-10-07 09:16:15 +00:00
{ label: '管道压力', value: 44, countType: 0,unit: 'Kpa' },
2023-10-05 04:08:22 +00:00
{ 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' },
],
2023-10-07 06:44:30 +00:00
timer:null,
updateTime:''
2023-09-28 10:07:02 +00:00
}
},
2023-10-07 06:44:30 +00:00
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'
// })
// }
})
2023-09-28 10:07:02 +00:00
},
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 => {
2023-10-07 06:44:30 +00:00
// console.log(res, '根据用户id查询对应的设备数据');
2023-09-28 10:07:02 +00:00
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 => {
2023-10-08 07:37:17 +00:00
// console.log(res, '主页查看施肥机实时数据');
2023-09-28 10:07:02 +00:00
if(res.code == 200){
uni.hideLoading({
title: '完成'
});
2023-10-07 06:44:30 +00:00
uni.stopPullDownRefresh();
2023-09-28 10:07:02 +00:00
i.childList= res.data;
this.updateTime = res.data[0].updateTime
2023-10-07 06:44:30 +00:00
// console.log(this.waterAndFertilizerParamsList);
2023-10-07 08:53:26 +00:00
}else{
2023-09-28 10:07:02 +00:00
}
2023-10-07 08:53:26 +00:00
}).catch(err=>{
console.log('接口失败');
2023-09-28 10:07:02 +00:00
})
})
}
})
},
// 跳转到折线图
toTarget_water_fertilizer_PH(id,data){
uni.navigateTo({
url:'/pages/target_water_fertilizer_PH/target_water_fertilizer_PH?id=' + id + '&data=' + data
})
},
2023-10-05 04:08:22 +00:00
// 数据单位
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){
2023-10-07 01:49:48 +00:00
return equipmentNumber + '#'
2023-09-28 10:07:02 +00:00
}
}
}
}
</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;
2023-09-28 10:07:02 +00:00
.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;
}
2023-09-28 10:07:02 +00:00
}
.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>