298 lines
6.2 KiB
Vue
298 lines
6.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="content">
|
|||
|
|
<view style="height: var(--status-bar-height)"></view>
|
|||
|
|
|
|||
|
|
<view class="" style="display: flex;align-items: center;font-size: 33.29rpx;margin-bottom: 20rpx;">
|
|||
|
|
<u--image @tap="backFn" src="/static/img/FH.png" width="50.82rpx" height="50.82rpx" alt=""></u--image>
|
|||
|
|
<text>生态概况</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="head-img">
|
|||
|
|
<view class="">
|
|||
|
|
<u--image src="/static/img/SC.jpg" width="693.93rpx" height=" 394.28rpx" alt=""></u--image>
|
|||
|
|
</view>
|
|||
|
|
<!-- <u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image> -->
|
|||
|
|
<view class="poisition">
|
|||
|
|
<view style="display: flex;">
|
|||
|
|
<u--image src="/static/img/dw.png" style="margin: 0 5rpx;" width="35.05rpx"
|
|||
|
|
height="35.05rpx"></u--image>
|
|||
|
|
江阳区水中坝北352米
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bad-info">
|
|||
|
|
<!-- <view class="tit" @tap="test">
|
|||
|
|
异常信息 （1）
|
|||
|
|
</view>
|
|||
|
|
<view class="bad-info-cont">
|
|||
|
|
<u--image :src="urlFn('badinfo')" style="margin: 0 21rpx;" width="80rpx" height="80rpx"></u--image>
|
|||
|
|
<view class="">
|
|||
|
|
<view class="">
|
|||
|
|
土壤湿度过低
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="color: #0095FF;font-size: 22.78rpx;margin-top: 5rpx;">
|
|||
|
|
低于预警值得5%
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view> -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<view class="data">
|
|||
|
|
<view class="tit">
|
|||
|
|
<view class="data-alanys" @tap="navto">
|
|||
|
|
<u--image :src="urlFn('sjfx')" style="margin: 0 5rpx;" width="191rpx" height="63rpx"></u--image>
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
环境数据
|
|||
|
|
</view>
|
|||
|
|
<view class="tit-b">
|
|||
|
|
<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
|
|||
|
|
<text>刷新时间:2023-10-15</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="data-cont">
|
|||
|
|
<view class="data-cont-li center" v-for="(item,index) in data " :key="index">
|
|||
|
|
<view style="margin:0 20rpx">
|
|||
|
|
<view class="center">
|
|||
|
|
<!-- <img :src="urlFn('B')" :style="img(38.55,38.55,5)" alt=""> -->
|
|||
|
|
<u--image :src="urlFn(item.icon)" style="margin: 0 5rpx;" width="38.55rpx"
|
|||
|
|
height="38.54rpx"></u--image>
|
|||
|
|
{{item.tit}}
|
|||
|
|
</view>
|
|||
|
|
<view class="b-cls">
|
|||
|
|
<view class="" :style="{color:item.flag?'#0095FF':''}">
|
|||
|
|
<text style=" font-size: 70.09rpx;"> {{baseData[item.cont]}}</text>{{item.dw}}
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="display: flex; align-items: center;" v-if="item.flag">
|
|||
|
|
<u--image :src="urlFn('D')" style="margin: 0 5rpx;" width="31.54rpx" height="31.54rpx">
|
|||
|
|
</u--image>
|
|||
|
|
<text style="color: #0095FF;">5</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="data">
|
|||
|
|
<view class="tit">
|
|||
|
|
<view class="">
|
|||
|
|
设备状态
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="data-cont">
|
|||
|
|
<view class="data-cont-li center" v-for="item in data2">
|
|||
|
|
<view style="margin:0 20rpx">
|
|||
|
|
<view class="center">
|
|||
|
|
{{item.cont}}
|
|||
|
|
</view>
|
|||
|
|
<view class="">
|
|||
|
|
<text style="font-size: 70.09rpx;color: #4CC593;">开</text>
|
|||
|
|
<text style="margin-left: 20rpx;font-size: 26.29rpx;">({{item.cont2}})</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
companyMine
|
|||
|
|
} from "@/api/test.js"
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
data: [{
|
|||
|
|
tit: "土壤温度",
|
|||
|
|
icon: 'TRWD',
|
|||
|
|
dw: "℃",
|
|||
|
|
cont: 'soil_temperature',
|
|||
|
|
|
|||
|
|
}, {
|
|||
|
|
tit: "土壤湿度",
|
|||
|
|
icon: 'TRSD',
|
|||
|
|
dw: "%RH",
|
|||
|
|
cont: 'soil_moisture',
|
|||
|
|
flag: false
|
|||
|
|
}, {
|
|||
|
|
tit: "风向",
|
|||
|
|
icon: 'FX',
|
|||
|
|
cont: 'wind_direction',
|
|||
|
|
}, {
|
|||
|
|
tit: "风速",
|
|||
|
|
icon: 'FS',
|
|||
|
|
dw: "m/s",
|
|||
|
|
cont: 'wind_speed',
|
|||
|
|
}, {
|
|||
|
|
tit: "降雨量",
|
|||
|
|
icon: 'JYL',
|
|||
|
|
dw: "mm",
|
|||
|
|
cont: 'rainfall',
|
|||
|
|
}, {
|
|||
|
|
tit: "光照",
|
|||
|
|
icon: 'GZ',
|
|||
|
|
dw: "Wlux",
|
|||
|
|
cont: 'illumination',
|
|||
|
|
}, {
|
|||
|
|
tit: "二氧化碳",
|
|||
|
|
icon: 'EYHT',
|
|||
|
|
dw: "ppm",
|
|||
|
|
cont: 'carbon_dioxide_content',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
baseData: {},
|
|||
|
|
data2: [{
|
|||
|
|
cont: "气象多要素百叶箱",
|
|||
|
|
cont2: "1天/1次",
|
|||
|
|
}, {
|
|||
|
|
cont: "多功能控制器",
|
|||
|
|
cont2: "3个小时/次",
|
|||
|
|
}, ]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
companyMine({
|
|||
|
|
id: 2,
|
|||
|
|
flag: 1
|
|||
|
|
}).then(res => {
|
|||
|
|
this.baseData = res.data
|
|||
|
|
// console.log(res)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
backFn() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
test() {
|
|||
|
|
companyMine()
|
|||
|
|
},
|
|||
|
|
urlFn(name) {
|
|||
|
|
return `/static/img/${name}.png`
|
|||
|
|
},
|
|||
|
|
img(w, h, m) {
|
|||
|
|
return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
|
|||
|
|
},
|
|||
|
|
navto() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/index2/shucai'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.content {
|
|||
|
|
padding: 30rpx;
|
|||
|
|
// background-color: grey;
|
|||
|
|
background-image: url("/static/img/bgc.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.head-img {
|
|||
|
|
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.poisition {
|
|||
|
|
opacity: 0.7;
|
|||
|
|
position: absolute;
|
|||
|
|
width: 380.26rpx;
|
|||
|
|
height: 71rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
left: 43rpx;
|
|||
|
|
bottom: 36rpx;
|
|||
|
|
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 29.79rpx;
|
|||
|
|
|
|||
|
|
.dw-cls {
|
|||
|
|
|
|||
|
|
margin: 0 5rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bad-info {
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
width: 693.93rpx;
|
|||
|
|
|
|||
|
|
.tit {
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
.bad-info-cont {
|
|||
|
|
background-color: white;
|
|||
|
|
display: flex;
|
|||
|
|
// padding: 20rpx;
|
|||
|
|
height: 140.19rpx;
|
|||
|
|
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data {
|
|||
|
|
.tit {
|
|||
|
|
.tit-b {
|
|||
|
|
color: #B3B3B3;
|
|||
|
|
font-size: 26.29rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-alanys {
|
|||
|
|
// background-color: blue;
|
|||
|
|
float: right;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.data-cont {
|
|||
|
|
// margin: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
// padding: 70rpx;
|
|||
|
|
|
|||
|
|
.data-cont-li {
|
|||
|
|
border-radius: 21.03rpx 21.03rpx 21.03rpx 21.03rpx;
|
|||
|
|
width: 310.94rpx;
|
|||
|
|
height: 212.03rpx;
|
|||
|
|
background-color: white;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-cls {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
width: 250rpx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
color: #4CC593;
|
|||
|
|
}
|
|||
|
|
</style>
|