TraceabilityAPP/pages/landDetail/tudi.vue

531 lines
12 KiB
Vue
Raw 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="box">
<view class="content">
<view class="" style="display: flex;justify-content: space-between;">
<view class="tit">
苗情监测数据
</view>
<view class="" style="display: flex;align-items: center;">
<u-icon name="clock" style="margin-right: 10rpx;"></u-icon>
<text style="color: #ACACAC;font-size: 20rpx;">刷新时间: {{getNowTimeFn()}} </text>
</view>
</view>
<view class="video" @click="navto('/pages/live/live')">
<!-- <u--image src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231223/20231223092144475437017.png"
width="100%" height="300rpx" @click="goLive" v-if="videoUrl"></u--image> -->
<!-- <u--image src="/static/main/index/k.png" width="100%" height="510rpx"></u--image> -->
<u--image :src="u('K')" width="100%" height="510rpx"></u--image>
<!-- <view class=""
style="width: 100%;height: 100%;background-color: rgba(0, 0, 0, .5);position: absolute;top: 1px;"
@click="goLive" v-if="videoUrl">
<u-icon name="play-circle" size="40" color="white" v-if="videoUrl"
style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);"></u-icon>
</view> -->
</view>
<landInfo :info='dataobj' :isDetail='true'></landInfo>
<view class="">
<view class="tit">
操作信息
</view>
<view class="" v-if="dataList1.length>0">
<view class="thing-card" v-for="(item,index) in dataList1" :key="index"
@click="navtoForm(item,item.type)">
<!-- <view class="head">
<view class="">
{{item.type_text}}
</view>
<view class="" @click="navtoForm(item,item.type)">
农事查看
</view>
</view> -->
<view class="card_body">
<view class="left" style="position: relative;">
<u--image @click="perviewFn(item.detail.pic)" radius='10' :src="item.detail.pic[0]"
width="200rpx" height="200rpx"></u--image>
<view class="stick-img" style="background-color: red;">
<!-- dsf -->
<u--image :src="stickImgFn(item.type)" class="stick-img" width="100rpx"
height="100rpx"></u--image>
</view>
</view>
<view class="right" style="color:#7B7B7B ;">
<view class="" v-if="item.type !=5">
<text style="color: black;">{{actionTypeFn(item.type)}}: </text>
<text
v-if="item.type==3">{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}</text>
<text v-else>{{item.detail.kind}}</text>
</view>
<view class="">
<text style="color: black;">参与人员</text>{{item.detail.user}}
<view class="" v-if='item.type==5'>
<text style="color: black;">收获日期:</text> {{item.update_time.slice(0,10)}}
</view>
</view>
<view class="" v-if="item.type !=5">
<view class="">
<text style="color: black;">开始日期</text>{{item.detail.start_date}}
</view>
<view class="">
<text style="color: black;">结束日期</text>{{item.detail.end_date}}
</view>
</view>
<view class="te">
<text style="color: black;white-space: nowrap;">备注</text>{{item.detail.remark}}
</view>
<!-- <view class="" v-if="item.type==5">
<view class="">
参与人: {{item.detail.user}}
</view>
<view class="">
参与人: {{item.detail.user}}
</view>
<view class="">
备注: {{item.detail.remark}}
</view>
</view>
<view class="" v-else>
<view class="" v-if="!item.detail.type">
<view class="">
{{item.type_text.slice(0, -2)}}<text class=""
v-if="item.type==2||item.type==4">剂</text>种类: {{item.detail.kind}}
</view>
<view class="">
{{item.type_text.slice(0, -2)}}<text class=""
v-if="item.type==2||item.type==4">剂</text>品牌: {{item.detail.breed}}
</view>
<view class="" v-if='item.detail.dosage'>
{{item.type_text.slice(0, -2)}}<text class=""
v-if="item.type==2||item.type==4">剂</text>用量: {{item.detail.dosage}}
<text v-if='item.type==4'>升</text>
<text v-if='item.type!=4&&item.type!=5'>斤</text>
</view>
<view class="">
{{item.type_text.slice(0, -2)}}面积: {{item.detail.area}}亩
</view>
</view>
<view class="" v-if="item.type==3">
{{item.type_text.slice(0, -2)}}方式:
{{item.detail.type==1?"喷灌":item.detail.type==2?"滴灌":"沟灌"}}
</view>
<view class="">
参与人: {{item.detail.user}}
</view>
<view class="" v-if="item.detail.start_date">
开始日期: {{item.detail.start_date}}
</view>
<view class="" v-if="item.detail.end_date">
结束日期: {{item.detail.end_date}}
</view>
<view class="" v-if="item.detail.remark">
备注: {{item.detail.remark}}
</view>
</view> -->
</view>
</view>
</view>
</view>
<view class="coneng-detail" v-else>
<view class="">
<image src="@/static/img/zw.png" mode="aspectFit"></image>
<view class="">
暂无数据
</view>
</view>
</view>
</view>
</view>
<!-- 组件 -->
<view class="">
<u-picker keyName="label" :show="showPicker" @cancel="showPicker=false" @confirm="confirm"
:columns="columns"></u-picker>
</view>
</view>
</template>
<script setup>
import landInfo from "@/components/plant/landInfo.vue"
import {
ref,
reactive
} from "vue"
import {
plantlist,
plantdetail,
actionlist,
landdetail
} from '@/api/api.js'
import {
onLoad,
onShow
} from "@dcloudio/uni-app"
const list = reactive([{
id: 1,
url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',
},
{
id: 1,
url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',
},
{
id: 1,
url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',
},
{
id: 1,
url: 'https://ceshi-worker-task.lihaink.cn//uploads//images//20231121//202311211336582b7920656.jpg',
},
])
const dataList1 = reactive([])
const dataobj = reactive({})
const typeID = ref('')
const showPicker = ref(false)
const palnttype = ref(true)
const columns = reactive([
[{
label: '施肥',
route: "/pages/husbandryForm/fertilize"
}, {
label: '除草',
route: "/pages/husbandryForm/weeding"
}, {
label: '灌溉',
route: "/pages/husbandryForm/irrigate"
}, {
label: '除虫',
route: "/pages/husbandryForm/Pest"
}, {
label: '收获',
route: "/pages/husbandryForm/harvest"
}]
]);
onLoad((query) => {
let data = query.data
// console.log(data); // 输出:{ name: 'John', age: 25 }
// Object.assign(dataobj, data);
typeID.value = query.data;
// getlist1()
// getlist2();
});
onShow(() => {
getlist3();
getlist2();
})
const getlist1 = (id, a, b, c, e) => {
landdetail({
land_id: id
}).then((res) => {
if (res.code == 1) {
res.data.kind = a
res.data.datapic = b
res.data.kindarea = c
res.data.breed = e
Object.assign(dataobj, res.data);
}
});
};
const getlist3 = () => {
plantdetail({
plant_id: typeID.value
}).then((res) => {
if (res.code == 1) {
if (res.data.status == 2) {
palnttype.value = false
}
getlist1(res.data.land_id, res.data.kind, res.data.pic, res.data.area, res.data.breed)
}
});
};
const getlist2 = () => {
actionlist({
plant_id: typeID.value
}).then((res) => {
if (res.code == 1) {
dataList1.splice(0, dataList1.length, ...res.data);
}
});
};
const navto = (url) => {
uni.navigateTo({
url
})
}
const navtoForm = (item, type) => {
uni.navigateTo({
url: '/pages/husbandryForm/detail?land_id=' + dataobj.id + "&plant_id=" + typeID.value + "&type=" +
type
})
// console.log(item, type)
// switch (type) {
// // 施肥
// case 1:
// uni.navigateTo({
// url: '/pages/husbandryForm/fertilize?task=' + encodeURIComponent(JSON.stringify(item))
// })
// break;
// // 除草
// case 2:
// uni.navigateTo({
// url: '/pages/husbandryForm/weeding?task=' + encodeURIComponent(JSON.stringify(item))
// })
// break;
// // 灌溉
// case 3:
// uni.navigateTo({
// url: '/pages/husbandryForm/irrigate?task=' + encodeURIComponent(JSON.stringify(item))
// })
// break;
// // 除虫
// case 4:
// uni.navigateTo({
// url: '/pages/husbandryForm/Pest?task=' + encodeURIComponent(JSON.stringify(item))
// })
// break;
// // 收获
// case 5:
// uni.navigateTo({
// url: '/pages/husbandryForm/harvest?task=' + encodeURIComponent(JSON.stringify(item))
// })
// break;
// }
}
const confirm = (e) => {
showPicker.value = false
uni.navigateTo({
url: e.value[0].route + '?id=' + typeID.value
})
}
const getNowTimeFn = () => {
const now = new Date();
const hour = now.getHours();
const minute = now.getMinutes();
const formattedHour = hour < 10 ? '0' + hour : hour;
const formattedMinute = minute < 10 ? '0' + minute : minute;
const currentTime = formattedHour + ':' + formattedMinute;
return currentTime
}
const perviewFn = (url) => {
uni.previewImage({
urls: url
})
}
const actionTypeFn = (type) => {
if (type == 3) return "喷灌方式"
if (type == 4) return "除虫剂种类"
if (type == 2) return "除草剂种类"
if (type == 1) return "肥料种类"
if (type == 5) return "收获"
}
const stickImgFn = (type) => {
if (type == 3) return "/static/main/index/guan_gai.png"
if (type == 4) return "/static/main/index/chu_chong.png"
if (type == 2) return "/static/main/index/chu_cao.png"
if (type == 1) return "/static/main/index/shi_fei.png"
if (type == 5) return "/static/main/index/shou_huo.png"
}
const u = (name) => {
return `/static/main/index/${name}.png`
}
</script>
<style lang="scss" scoped>
.box {
width: 750rpx;
min-height: 100vh;
background-color: $theme-bg-color;
padding: 0;
.content {
width: 693.93rpx;
margin: auto;
padding-top: 20rpx;
}
// padding: 20rpx;
.time {
display: flex;
font-size: 26.29rpx;
color: #737373;
margin-top: 10rpx;
}
.video {
width: 690rpx;
height: 510rpx;
box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 10rpx;
overflow: hidden;
}
.add-thing {
width: 266.36rpx;
height: 66.59rpx;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
border: 1px solid $theme-main-color;
margin: 20rpx auto;
line-height: 66rpx;
text-align: center;
color: $theme-main-color;
}
}
.coneng-detail {
width: 478rpx;
height: 341rpx;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
opacity: 1;
font-size: 25rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #737373;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 70rpx auto;
image {
width: 280rpx;
height: 142rpx;
margin-bottom: 20rpx;
}
}
.thing-card {
width: 693.93rpx;
box-sizing: border-box;
background-color: #fff;
border-radius: 20rpx;
overflow: hidden;
margin-bottom: 30rpx;
box-shadow: 1rpx 1rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
.head {
height: 90rpx;
border-radius: 20rpx 20rpx 0 0;
background-color: $theme-main-color;
display: flex;
justify-content: space-between;
line-height: 90rpx;
color: white;
padding: 0 30rpx;
}
.card_body {
padding: 20rpx;
display: flex;
.right {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-left: 20rpx;
font-size: 26rpx;
}
.stick-img {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.tit {
position: relative;
padding-left: 20rpx;
font-weight: bold;
font-size: 28rpx;
margin-bottom: 20rpx;
color: #1A1A1A;
}
.tit::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 6rpx;
/* 左边框的宽度 */
height: 25rpx;
border-radius: 20rpx;
background-color: #34D08D;
}
</style>