343 lines
7.2 KiB
Vue
343 lines
7.2 KiB
Vue
<template>
|
|
<view class="content">
|
|
<!-- <view class="card">
|
|
<view class="tit">
|
|
<view class="">
|
|
农户名称: {{userInfo.name}}
|
|
</view>
|
|
</view>
|
|
<view class="card-li">
|
|
<view class="">
|
|
种养殖类型: 养殖户
|
|
</view>
|
|
<view class="">
|
|
养殖头数: {{userInfo.animal_detail.total_count}}头
|
|
</view>
|
|
</view>
|
|
<view class="card-li">
|
|
<view class="">
|
|
土地面积:{{userInfo.total_land_area}}亩
|
|
</view>
|
|
<view class="">
|
|
公: {{userInfo.animal_detail.male_count}}头
|
|
</view>
|
|
</view>
|
|
<view class="card-li">
|
|
<view class="">
|
|
养殖种类: {{userInfo.animal_detail.kind[0]}},{{userInfo.animal_detail.kind[1]}}
|
|
</view>
|
|
<view class="">
|
|
母: {{userInfo.animal_detail.maternal_count}}头
|
|
</view>
|
|
</view>
|
|
<view class="card-li">
|
|
<view class="">
|
|
具体种类: {{userInfo.animal_detail.breed[0]}}
|
|
</view>
|
|
|
|
</view>
|
|
</view> -->
|
|
<farmersCard></farmersCard>
|
|
<view class="circumstance">
|
|
<view class="card-tit">
|
|
<view class="">
|
|
养殖情况
|
|
</view>
|
|
</view>
|
|
<view class="card" v-for="(item,index) in animalList" :key="index"
|
|
@click="navgo(`/pages/feedIng/feedDetail?id=${item.id}`)">
|
|
<view class="tit">
|
|
<view class="">
|
|
编号: {{item.animal_code}}
|
|
</view>
|
|
<view class="" style="color: #00A15E;" v-if='item.animal_status==1'>
|
|
健康
|
|
</view>
|
|
<view class="" style="color: #FFD736;" v-if='item.animal_status==2'>
|
|
怀孕中
|
|
</view>
|
|
<view class="" style="color: #3274F9;" v-if='item.animal_status==4'>
|
|
可出栏
|
|
</view>
|
|
<view class="" style="color: #F84221;" v-if='item.animal_status==3'>
|
|
生病隔离中
|
|
</view>
|
|
</view>
|
|
<view class="card-li">
|
|
<view class="">
|
|
养殖类型: {{item.animal_kind}}
|
|
</view>
|
|
<view class="">
|
|
年龄: {{item.animal_age}}年
|
|
</view>
|
|
<view class="">
|
|
体重: {{item.animal_weight}}kg
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<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>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="circumstance" v-for="(item,index) in actionList" :key="index">
|
|
<view class="card-tit">
|
|
<view class="">
|
|
{{index}}
|
|
</view>
|
|
<view class="updata-btn" @click="navgo('/pages/growRecord/index?type=3')">
|
|
更新{{index.slice(0,-2)}}
|
|
</view>
|
|
</view>
|
|
<myTable :tit='`查看${index.slice(0,-2)}`' :dataList="item.action_record"
|
|
route='/pages/feedIng/allRecordTable'>>
|
|
</myTable>
|
|
</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"
|
|
import myTable from "@/components/myTable/index.vue"
|
|
import {
|
|
onLoad
|
|
} from "@dcloudio/uni-app"
|
|
import {
|
|
animalListAPI,
|
|
animalEnvDataAPI,
|
|
actionsAPI
|
|
} from "@/api/animal.js"
|
|
import farmersCard from "@/components/animal/farmersCard.vue"
|
|
const props = defineProps({
|
|
userInfo: Object
|
|
})
|
|
const userInfo = reactive(props.userInfo)
|
|
const data = reactive([{
|
|
tit: "环境温度",
|
|
icon: 'WD',
|
|
dw: "℃",
|
|
cont: 'hj_temp',
|
|
flag: false,
|
|
|
|
}, {
|
|
tit: "环境湿度",
|
|
icon: 'JYL',
|
|
dw: "%RH",
|
|
cont: 'hj_humi',
|
|
}, {
|
|
tit: "氧气浓度",
|
|
icon: 'FX',
|
|
cont: 'o_content',
|
|
dw: "%",
|
|
}, {
|
|
tit: "二氧化碳含量",
|
|
icon: 'FS',
|
|
dw: "mg/L",
|
|
cont: 'c_content',
|
|
}, {
|
|
tit: "光照强度",
|
|
icon: 'JYL',
|
|
dw: "lux",
|
|
cont: 'light',
|
|
}, {
|
|
tit: "大气压强",
|
|
icon: 'GZ',
|
|
dw: "hpa",
|
|
cont: 'dqy',
|
|
}, {
|
|
tit: "有害气体",
|
|
icon: 'EYHT',
|
|
cont: 'yhqt',
|
|
},
|
|
|
|
])
|
|
const baseData = reactive({
|
|
|
|
})
|
|
const urlFn = (name) => {
|
|
return `/static/img/${name}.png`
|
|
}
|
|
const img = (w, h, m) => {
|
|
return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
|
|
}
|
|
const navgo = (url) => {
|
|
uni.navigateTo({
|
|
url
|
|
})
|
|
}
|
|
const animalList = reactive([])
|
|
animalListAPI({
|
|
user_id: 307,
|
|
page_no: 1,
|
|
page_size: 3,
|
|
}).then(res => {
|
|
res.data.forEach(item => {
|
|
animalList.push(item)
|
|
})
|
|
})
|
|
animalEnvDataAPI({
|
|
user_id: 307
|
|
}).then(res => {
|
|
for (let key in res.data) {
|
|
baseData[key] = (res.data)[key]
|
|
}
|
|
})
|
|
const actionList = reactive({})
|
|
actionsAPI({
|
|
type: 3
|
|
}).then(res => {
|
|
for (let key in res.data) {
|
|
actionList[key] = (res.data)[key]
|
|
}
|
|
})
|
|
</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;
|
|
padding: 0 30rpx;
|
|
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;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.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> |