mkm
/
yanzhiAPP
Template
2
0
Fork 0
Code Pull Requests Projects Activity
yanzhiAPP/pages/index1/ji.vue

310 lines
6.6 KiB
Vue
Raw Normal View History

ceshi
2023-10-17 09:49:06 +08:00
<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/JC.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>
江阳区威武村南485米
</view>
</view>
</view>
<view class="bad-info">
<!-- <view class="tit" @tap="test">
异常信息 （1）
</view>
<view class="bad-info-cont">
<u--image :src="urlFn('GG')" style="margin: 0 21rpx;" width="80rpx" height="80rpx"></u--image>
<view class="">
<view class="">
棚内温度过高
</view>
<view class="" style="color: #FF473E;font-size: 22.78rpx;margin-top: 5rpx;">
高于预警值得2%
</view>
</view>
</view> -->
</view>
<view class="data">
<view class="tit">
<view class="data-alanys" @tap="navto">
<!-- <img :src="urlFn('sjfx')" :style="img(191,63,0)" alt=""> -->
<u--image :src="urlFn('sjfx')" style="margin: 0 5rpx;" width="191rpx" height="63rpx"></u--image>
</view>
<view class="">
环境数据
</view>
<view class="tit-b">
<!-- <img :src="urlFn('sj')" :style="img(28.04,28.04,5)" alt=""> -->
<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?'#FF473E':''}">
<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('SG')" style="margin: 0 5rpx;" width="31.54rpx" height="31.54rpx">
</u--image>
<text style="color: #FF473E;">2</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: 'SLWD',
cont: "room_temperature",
dw: "℃",
flag: false
}, {
tit: "空气湿度",
icon: 'KQSD',
dw: "%RH",
cont: "air_humidity"
}, {
tit: "氨气含量",
icon: 'AQHL',
dw: "%",
cont: "ammonia_nitrogen_content"
}, {
tit: "甲烷含量",
icon: 'JWHL',
dw: "%",
cont: "methane_content"
}, {
tit: "空气质量指数",
icon: 'KQZLZS',
cont: "air_quality_index",
dw: "(pm)",
}, {
tit: "降雨量",
icon: 'JYL',
cont: "rainfall",
dw: "mm"
}, {
tit: "风向",
icon: 'FX',
cont: "wind_direction"
}, {
tit: "风速",
icon: 'FS',
cont: "wind_speed",
dw: "m/s"
}, {
tit: "光照",
icon: 'GZ',
cont: "illumination",
dw: "lux"
},
],
baseData: {},
data2: [{
cont: "倾斜位移监测仪",
cont2: "3小时/1次",
}, {
cont: "气象多要素百叶箱",
cont2: "1天/次",
}, ]
}
},
onLoad() {
companyMine({
id: 3,
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/ji'
})
}
}
}
</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>