cultivationApp/components/index/cultivation.vue

337 lines
6.8 KiB
Vue
Raw Normal View History

2023-10-23 09:00:12 +08:00
<template>
<view class="content">
<view class="card">
<view class="tit">
<view class="">
农户名称: 1号土地
</view>
</view>
<view class="card-li">
<view class="">
种养殖类型: 土豆
</view>
<view class="">
养殖头数: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
土地面积: 20
</view>
<view class="">
公猪: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
养殖种类: 20
</view>
<view class="">
母猪: 的划分等级
</view>
</view>
<view class="card-li">
<view class="">
具体种类: 20
</view>
<view class="">
幼崽: 的划分等级
</view>
</view>
</view>
<view class="circumstance">
<view class="card-tit">
<view class="">
养殖情况
</view>
2023-10-23 17:57:19 +08:00
2023-10-23 09:00:12 +08:00
</view>
2023-10-23 17:57:19 +08:00
<view class="card" v-for="(item,index) in [1,1,1,]" :key="index"
@click="navgo('/pages/feedIng/feedDetail')">
2023-10-23 09:00:12 +08:00
<view class="tit">
<view class="">
编号: 56565
</view>
<view class="" style="color: #00A15E;">
健康
</view>
</view>
<view class="card-li">
<view class="">
养殖类型: 土豆
</view>
<view class="">
年龄: 2
</view>
<view class="">
体重: 100kg
</view>
</view>
</view>
2023-10-23 17:57:19 +08:00
<view class="check" @click="navgo('/pages/feedIng/feedList')">
查看全部养殖动物<u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;" width="31.54rpx"
height="31.54rpx"></u--image>
2023-10-23 09:00:12 +08:00
</view>
</view>
<view class="circumstance">
<view class="card-tit">
<view class="">
饲养情况
</view>
2023-10-23 17:57:19 +08:00
<view class="updata-btn" @click="navgo('/pages/growRecord/index')">
2023-10-23 09:00:12 +08:00
更新饲养情况
</view>
</view>
2023-10-23 17:57:19 +08:00
<myTable tit='查看历史清点记录' route='/pages/feedIng/allRecording'></myTable>
2023-10-23 09:00:12 +08:00
</view>
<view class="circumstance">
<view class="card-tit">
<view class="">
消毒情况
</view>
2023-10-23 17:57:19 +08:00
<view class="updata-btn" @click="navgo('/pages/growRecord/index')">
2023-10-23 09:00:12 +08:00
更新消毒情况
</view>
</view>
2023-10-23 17:57:19 +08:00
<myTable tit='查看历史消毒记录' route='/pages/feedIng/allRecording'></myTable>
2023-10-23 09:00:12 +08:00
</view>
<view class="data">
<view class="tit">
<view class="" style="display: flex;justify-content: space-between;font-size: 29.79rpx;">
<view class="">
环境监测数据
</view>
</view>
<view class="tit-b">
<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
<text>刷新时间: 2022-3-3</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">
<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>
</template>
<script setup>
import {
ref,
reactive
} from "vue"
2023-10-23 17:57:19 +08:00
import myTable from "@/components/myTable/index.vue"
2023-10-23 09:00:12 +08:00
const data = reactive([{
tit: "环境温度",
icon: 'TRWD',
dw: "℃",
cont: 'soil_temperature',
flag: false,
}, {
tit: "环境湿度",
icon: 'TRSD',
dw: "%RH",
cont: 'soil_moisture',
}, {
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',
},
])
const data2 = reactive([{
cont: "气象多要素百叶箱",
cont2: "1天/1次",
}, {
cont: "多功能控制器",
cont2: "3个小时/次",
}, ])
const baseData = reactive({
"id": 27,
"production_base_id": 1,
"soil_temperature": 20,
"soil_moisture": 50,
"room_temperature": 0,
"air_humidity": 0,
"air_quality_index": 0,
"pond_temperature": 0,
"pond_ph_value": 0,
"wind_direction": "北",
"wind_speed": 3.4,
"illumination": 2,
"rainfall": 20,
"carbon_dioxide_content": 450,
"nitrogen_content": 0,
"methane_content": 0,
"ammonia_nitrogen_content": 0,
"nitrite_content": 0,
"dissolved_oxygen": 0,
"temperature_threshold": 0,
"humidity_threshold": 0,
"flag": 1
})
const urlFn = (name) => {
return `/static/img/${name}.png`
}
const img = (w, h, m) => {
return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
}
2023-10-23 17:57:19 +08:00
const navgo = (url) => {
uni.navigateTo({
url
})
}
2023-10-23 09:00:12 +08:00
</script>
<style lang="scss" scoped>
.circumstance {
width: 693.93rpx;
margin: 0 auto;
margin-bottom: 43rpx;
.card-tit {
display: flex;
justify-content: space-between;
margin-bottom: 28rpx;
}
.updata-btn {
font-size: 26.29rpx;
width: 192.76rpx;
height: 57.83rpx;
border: 1px solid #00A15E;
color: #00A15E;
display: flex;
justify-content: center;
align-items: center;
border-radius: 31.54rpx 31.54rpx 31.54rpx 31.54rpx;
}
.check {
font-size: 29.79rpx;
text-align: center;
2023-10-23 17:57:19 +08:00
display: flex;
justify-content: center;
align-items: center;
2023-10-23 09:00:12 +08:00
}
.tab {
height: 500rpx;
background-color: red;
}
}
.card {
.tit {
display: flex;
justify-content: space-between;
padding-bottom: 20rpx;
border-bottom: 1px solid #EBF1EF;
}
.card-li {
margin-top: 20rpx;
display: flex;
justify-content: space-between;
}
}
.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>