mkm
/
yanzhiAPP
Template
2
0
Fork 0
yanzhiAPP/pages/detail/plant.vue

545 lines
12 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<imgCard :imgUrl='landDeatil.pic' text='地址'></imgCard>
<view class="bad-info">
<view class="" style="display: flex;align-items: center;">
<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
<text>刷新时间:{{dateFn()}}</text>
</view>
<view style="display: flex;"
@click="navgo(`/pages/allPlant/index?crop_id=${landDeatil.crop_id}&land_id=${landDeatil.land_id}`)">
查看历史记录 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;" width="31.54rpx"
height="31.54rpx"></u--image>
</view>
</view>
<view class="up-plant-btn" @click="updateImgFn">
上传新的种植情况
<!-- {{crop_id}} -->
</view>
<landInfo :land_id='landDeatil.land_id' @getcropid='getcropidFn'></landInfo>
<view class="circumstance" v-for="(item,index) in tableDate" :key="index">
<!-- {{index}} -->
<!-- {{tableDate}}
dsfdsf -->
<view class="card-tit">
<view class="">
{{index}}
</view>
<view class="updata-btn"
@click="navgo(`/pages/growRecord/index?type=1&crop_id=${crop_id}&land_id=${landDeatil.land_id}&title=${index}`)">
更新{{index.slice(0,-2)}}
</view>
</view>
<!-- {{item.action_record}} -->
<myTable :tit='`查看${index.slice(0,-2)}`' :dataList="item.action_record"
:route='`/pages/records/index?land_id=${landDeatil.land_id}&crop_id=${crop_id}&index=${index}`'>
</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 style="display: flex;align-items: center;" @click="navgo('/pages/profile/index')">
查看全部检测记录 <u--image src="/static/img/CKGD.png" style="margin-left: 5rpx;" width="31.54rpx"
height="31.54rpx"></u--image>
</view>
</view>
<view class="tit-b">
<u--image :src="urlFn('sj')" style="margin: 0 5rpx;" width="28.04rpx" height="28.04rpx"></u--image>
<text>刷新时间:{{dateFn()}}</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>
<!-- {{landDeatil.ripe_time}} -->
<view class="ripe-btn" v-if="landDeatil.ripe_time" @click="allripeFn">
标记为全部收获
</view>
<view class="ripe-btn" v-else @click="showPop=true">
标记为成熟
</view>
<!-- 组件 -->
<!-- navgo('/pages/index/index' -->
<u-popup :show="showPop" :round="20" mode="bottom" @close="showPop=false" @open="showPop=true">
<view class="mark">
<view class="head">
<view class="">
农作物成熟标记
</view>
<view class="" @tap="showPop=false">
<u--image :src="urlFn('GBAN')" style="margin: 0 5rpx;" width="49.07rpx" height="49.07rpx">
</u--image>
</view>
</view>
<view class="mark-li">
<view class="">
种植类型:
</view>
<view class="">
{{landDeatil.crop_name}}
</view>
</view>
<view class="mark-li">
<view class="">
种植品牌:
</view>
<view class="">
{{landDeatil.crop_brand}}
</view>
</view>
<view class="mark-li">
<view class="">
本期溯源码:
</view>
<view class="">
{{landDeatil.source_code}}
</view>
</view>
<view class="mark-li">
<view class="">
成熟日期:
</view>
<view class="">
{{dateFn()}}
</view>
</view>
<view class="mark-li" style="display: block;border: 0;">
<view class="">
预计产量:
</view>
<view class="" style="margin-top: 20rpx;">
<up-input placeholder="请输入内容" border="surround" v-model="crop_yield"></up-input>
</view>
</view>
<view class="ripe-btn" @tap="markFn">
确认
</view>
</view>
</u-popup>
</view>
</template>
<script setup>
import {
landInfoAPI,
addLandCropPicAPI,
landCropRecordListAPI,
landEnvDataCurrAPI,
setLandCropRipeAPI,
ediLandCropRecordAPI,
landCropAllRipeAPI
} from "@/api/plant.js"
import myTable from "@/components/myTable/index.vue"
import imgCard from "@/components/imgCard.vue"
import uplodeImg from "@/utils/uplodeImg.js"
import landInfo from "@/components/plant/landInfo.vue"
import {
actionsAPI
} from "@/api/animal.js"
import {
ref,
reactive
} from "vue"
import {
onLoad,
onShow
} from "@dcloudio/uni-app"
const crop_yield = ref("")
const showPop = ref(false)
const tableDate = reactive({})
const landDeatil = reactive({})
const data = reactive([{
tit: "土壤温度",
icon: 'TRWD',
dw: "℃",
cont: 'soil_temp',
flag: false,
}, {
tit: "土壤湿度",
icon: 'TRSD',
dw: "%RH",
cont: 'soil_mois',
}, {
tit: "磷含量",
icon: 'FX',
cont: 'k_content',
dw: "%",
}, {
tit: "氮含量",
icon: 'FS',
dw: "mg/l",
cont: 'n_content',
}, {
tit: "钾含量",
icon: 'JYL',
dw: "%",
cont: 'p_content',
},
], )
const baseData = reactive({})
const crop_id = ref(0)
const getcropidFn = (e) => {
crop_id.value = e.cropid
}
onShow(async () => {
let res = await landInfoAPI({
user_id: 307,
land_id: land_id.value
})
objFn(res.data, landDeatil)
})
const land_id = ref(0)
onLoad(async (options) => {
land_id.value = options.land_id
let res = await landInfoAPI({
user_id: 307,
land_id: options.land_id
})
objFn(res.data, landDeatil)
// let res2 = await landCropRecordListAPI({
// crop_id: landDeatil.crop_id
// })
let res2 = await actionsAPI({
type: 1,
crop_id: landDeatil.crop_id
})
objFn(res2.data, tableDate)
let res3 = await landEnvDataCurrAPI({
user_id: 307,
})
objFn(res3.data, baseData)
}, )
const updateImgFn = () => {
let image = ""
uplodeImg().then(res => {
image = res.data.image
landDeatil.pic = image
addLandCropPicAPI({
crop_id: landDeatil.crop_id,
pic: image
}).then(res2 => {
console.log(res2)
})
})
}
const navgo = (url) => {
uni.navigateTo({
url
})
}
const dateFn = () => {
var today = new Date();
// 获取年、月、日
var year = today.getFullYear();
var month = today.getMonth() + 1; // 月份从0开始需要加1
var day = today.getDate();
// 构建日期字符串
var dateStr = year + '-' + month + '-' + day;
return dateStr
// 输出日期字符串
}
const backFn = () => {
uni.navigateBack()
}
const urlFn = (name) => {
return `/static/img/${name}.png`
}
const img = (w, h, m) => {
return `width:${w}rpx;height:${h};margin:0 ${m}rpx `
}
const markFn = () => {
setLandCropRipeAPI({
crop_id: landDeatil.crop_id,
crop_yield: Number(crop_yield.value)
}).then(res => {
showPop.value = false
})
}
const objFn = (res, data) => {
for (let key in res) {
data[key] = res[key]
}
}
const allripeFn = () => {
landCropAllRipeAPI({
crop_id: crop_id.value
})
uni.navigateTo({
url: '/pages/index/index'
})
}
// actionsAPI({
// type: 1
// }).then(res => {
// for (let key in res.data) {
// actionList[key] = (res.data)[key]
// }
// })
</script>
<style lang="scss" scoped>
.content {
padding: 30rpx;
// background-color: grey;
background-color: #EBF1EF;
}
.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 {
display: flex;
// background-color: red;
justify-content: space-between;
align-items: center;
margin: 20rpx 0;
color: #737373;
width: 693.93rpx;
font-size: 26.29rpx;
.tit-b {
color: red;
}
}
.up-plant-btn {
width: 371.5rpx;
height: 66.59rpx;
color: #00A15E;
margin: 40rpx auto;
border: 1px solid #00A15E;
font-weight: bold;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
display: flex;
align-items: center;
justify-content: 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;
}
.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;
}
}
.grow-record-tit {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
align-items: center;
font-size: 26.29rpx;
.updata-btn {
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;
}
}
.ripe-btn {
width: 588.79rpx;
height: 84.11rpx;
background-color: #00A15E;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
background: linear-gradient(to right, #00A15E, #4CC593);
}
.mark {
// padding: 30rpx;
padding: 30rpx;
.head {
display: flex;
justify-content: space-between;
align-items: center;
}
.mark-li {
display: flex;
justify-content: space-between;
margin: 40rpx;
border-bottom: 1px solid #EBF1EF;
padding-bottom: 20rpx;
}
}
.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;
display: flex;
justify-content: center;
align-items: center;
}
.tab {
height: 500rpx;
background-color: red;
}
}
</style>