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 - n a v b a r >
< 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 >
< view class = "testBase" v-for ="(item1,index1) in waterAndFertilizerParamsList" :key ="index1" >
< 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 >
< / view >
< view class = "testBase1" v-for ="(item1,index1) in waterAndFertilizerParamsList" :key ="index1" >
< 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 >
< / view >
< / 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 : '无线气象站信噪比（ ） , 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 : 'ppm' } ,
{ 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 : '铜（ ） , value : 50 , countType : 0 , unit : 'mg/kg' } ,
{ label : '镉（ ） , value : 51 , countType : 2 , unit : 'mg/kg' } ,
{ label : '铅（ ） , 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 : '无线传感器信噪比（ ） , value : 58 , countType : 1 , unit : 'dB' } ,
] ,
2023-09-28 10:07:02 +00:00
}
} ,
onShow ( ) {
} ,
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 : '完成'
} ) ;
i . childList = res . data ;
console . log ( this . waterAndFertilizerParamsList ) ;
}
} )
} )
}
} )
} ,
// 跳转到折线图
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 ) {
return ( equipmentNumber + 1 ) + '#'
2023-09-28 10:07:02 +00:00
}
}
}
}
< / script >
< style lang = "scss" scoped >
. timeEnvironment {
width : 100 % ;
min - height : 100 vh ;
box - sizing : border - box ;
position : relative ;
background - color : # F5F6FA ;
. navbar {
width : 100 % ;
height : 100 % ;
> image {
width : 750 rpx ;
height : 500 rpx ;
position : absolute ;
top : 0 ;
left : 0 ;
}
}
. content {
position : absolute ;
z - index : 2 ;
box - sizing : border - box ;
padding : 0 rpx 30 rpx 30 rpx ;
. title {
display : flex ;
align - items : center ;
> image {
width : 71 rpx ;
height : 65 rpx ;
}
. right {
margin - left : 14 rpx ;
> view : nth - child ( 1 ) {
font - size : 44 rpx ;
font - family : AlibabaPuHuiTiB ;
font - weight : bold ;
color : # FFFFFF ;
}
> view : nth - child ( 2 ) {
font - size : 16 rpx ;
font - family : Arial - BoldMT ;
font - weight : bold ;
color : # FFFFFF ;
line - height : 20 rpx ;
opacity : 0.5 ;
}
}
}
. subtitle {
font - size : 30 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # FFFFFF ;
margin - top : 26 rpx ;
}
. waterAndFertilizerParams {
width : 690 rpx ;
height : auto ;
box - sizing : border - box ;
padding : 20 rpx ;
background : # FFFFFF ;
box - shadow : 0 rpx 4 rpx 20 rpx 0 rpx rgba ( 153 , 153 , 153 , 0.1 ) ;
border - radius : 20 rpx ;
margin - top : 69 rpx ;
. nav {
height : 90 rpx ;
display : flex ;
align - items : center ;
border - bottom : 1 rpx solid # DDDDDD ;
> image {
width : 50 rpx ;
height : 50 rpx ;
margin - right : 16 rpx ;
}
> text {
font - size : 30 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
}
. detail {
width : 100 % ;
height : calc ( 100 % - 90 rpx ) ;
box - sizing : border - box ;
padding : 10 rpx 0 rpx ;
display : flex ;
flex - wrap : wrap ;
justify - content : space - evenly ;
. item {
width : 50 % ;
display : flex ;
align - items : center ;
box - sizing : border - box ;
padding - left : 20 rpx ;
margin - top : 30 rpx ;
> image {
width : 80 rpx ;
height : 80 rpx ;
margin - right : 19 rpx ;
}
. info {
> view : nth - child ( 1 ) {
font - size : 24 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
> view : nth - child ( 2 ) {
font - size : 30 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
}
}
}
}
. testBase {
width : 690 rpx ;
height : auto ;
background : # FFFFFF ;
box - shadow : 0 rpx 4 rpx 20 rpx 0 rpx rgba ( 153 , 153 , 153 , 0.1 ) ;
border - radius : 20 rpx ;
margin - top : 30 rpx ;
. nav {
height : 90 rpx ;
box - sizing : border - box ;
padding : 20 rpx ;
display : flex ;
align - items : center ;
> image {
width : 50 rpx ;
height : 50 rpx ;
margin - right : 16 rpx ;
}
> text {
font - size : 30 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
}
. detail {
width : 100 % ;
height : calc ( 100 % - 90 rpx ) ;
display : flex ;
flex - wrap : wrap ;
padding - bottom : 46 rpx ;
. item {
width : 33 % ;
display : flex ;
align - items : center ;
justify - content : center ;
flex - direction : column ;
margin - top : 30 rpx ;
> image {
width : 60 rpx ;
height : 60 rpx ;
}
. info {
display : flex ;
flex - direction : column ;
justify - content : center ;
align - items : center ;
margin - top : 10 rpx ;
> view : nth - child ( 1 ) {
font - size : 24 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
> view : nth - child ( 2 ) {
font - size : 30 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
}
}
}
}
. testBase1 {
width : 690 rpx ;
height : auto ;
background : # FFFFFF ;
box - shadow : 0 rpx 4 rpx 20 rpx 0 rpx rgba ( 153 , 153 , 153 , 0.1 ) ;
border - radius : 20 rpx ;
margin - top : 30 rpx ;
box - sizing : border - box ;
padding : 0 20 rpx 1 rpx ;
. nav {
height : 90 rpx ;
box - sizing : border - box ;
padding : 20 rpx ;
display : flex ;
align - items : center ;
> image {
width : 50 rpx ;
height : 50 rpx ;
margin - right : 16 rpx ;
}
> text : nth - child ( 2 ) {
font - size : 30 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
> text : nth - child ( 3 ) {
width : 90 rpx ;
height : 44 rpx ;
background : # EFFCF7 ;
border : 2 px solid rgba ( 58 , 187 , 144 , 0.25 ) ;
border - radius : 22 rpx ;
font - size : 20 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 37 BA8E ;
display : flex ;
justify - content : center ;
align - items : center ;
margin - left : 15 rpx ;
}
}
. item {
width : 650 rpx ;
height : 90 rpx ;
background : # F5F6FA ;
border : 2 px solid # E7E9F1 ;
border - radius : 10 rpx ;
display : flex ;
align - items : center ;
justify - content : space - between ;
margin - bottom : 30 rpx ;
box - sizing : border - box ;
padding : 0 30 rpx 0 20 rpx ;
> image {
width : 40 rpx ;
height : 39 rpx ;
margin - right : 20 rpx ;
}
> text : nth - child ( 2 ) {
flex : 1 ;
font - size : 28 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
> text : nth - child ( 3 ) {
font - size : 30 rpx ;
font - family : PingFang SC ;
font - weight : bold ;
color : # 333333 ;
}
}
}
}
}
< / style >
