zmj
/
TraceabilityAPP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
TraceabilityAPP/pages/landDetail/index.vue

462 lines
9.7 KiB
Vue
Raw Blame History

<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" style="position: relative;">
<u--image src="https://ceshi-worker-task.lihaink.cn/uploads/images/20231223/20231223092144475437017.png"
width="100%" height="500rpx" @click="goLive" v-if="videoUrl"></u--image>
<u--image :src="u('K')" v-else 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'></landInfo>
<view class="add-thing" @click="addshowPicke">
新增种植
</view>
<view class="">
<view class="tit">
种植信息
</view>
<view class="" v-if="dataList.length>0">
<view class="thing-card" v-for="(item,index) in dataList" :key="index">
<!-- <view class="head">
<view class="">
种植
</view>
<view class="" @click="navtoForm(item,i)">
农事查看
</view>
</view> -->
<view class="card_body">
<view class="left" v-if='item.pic.length>0 && !item.showCode'>
<u--image @click="perviewFn(item.pic)" radius='10' :src="item.pic[0]" width="200rpx"
height="200rpx"></u--image>
</view>
<view class="left" v-else>
<u--image @click="perviewFn1(item.qr_code)" radius='10' :src="item.qr_code"
width="200rpx" height="200rpx"></u--image>
</view>
<u--image @click="navtoForm(item,i)" src="/static/main/index/xyj.png" class="next"
width="38rpx" height="38rpx"></u--image>
<view class="right" style="color: #7B7B7B;" @click="navtoForm(item,i)">
<view class="">
<text style="color: black;">种植种类:</text> {{item.kind}}
</view>
<!-- <view class="">
种植品牌: {{item.breed}}
</view> -->
<view class="">
<text style="color: black;">种植面积:</text> {{item.area}}亩
</view>
<view class="te">
<text style="color: black;white-space: nowrap;">参与人员:</text> {{item.user}}
</view>
<view class="">
<text style="color: black;">种植日期:</text> {{item.plant_date}}
</view>
<view class="" style="display: flex;justify-content: space-between;">
<view class="te">
<text style="color: black; white-space: nowrap; margin-top: 10rpx;">备注:</text>
{{item.remark}}
</view>
<view class="" v-if="item.status==2">
<view class="code-btn" @click.stop="showCodeFn(index)"
:class="{actBtn:item.showCode}"> 溯源码</view>
<!-- <u--image @click="perviewFn1(item.qr_code)" radius='10' :src="item.qr_code"
width="200rpx" height="200rpx" style="margin-top: 10rpx;"></u--image> -->
</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>
</template>
<script setup>
import landInfo from "@/components/plant/landInfo.vue"
import {
lindexist,
} from '@/api/api.js'
import {
ref,
reactive
} from "vue"
import {
plantlist,
landdetail
} from '@/api/api.js'
import {
onLoad,
onShow
} from "@dcloudio/uni-app"
const videoUrl = ref('')
const goLive = () => {
uni.navigateTo({
url: `/pages/live/live?url=${videoUrl.value }&user=${userInfo.value.master_phone}&device=${userInfo.value.device_id} `
})
}
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 dataList = reactive([])
const dataList1 = reactive([])
const dataobj = reactive({})
const typeID = ref('')
const columns = reactive([
[{
label: '种植',
route: "/pages/husbandryForm/sow"
}, {
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"
}]
]);
const userInfo = ref("")
onLoad((option) => {
typeID.value = option.id;
lindexist({
land_id: option.id
}).then(res => {
userInfo.value = res.data
videoUrl.value = res.data.video_url
console.log(videoUrl.value, 25545)
// console.log(userInfo.value)
})
});
// const goLive = () => {
// }
onShow(() => {
getlist();
getlist1();
})
const getlist1 = () => {
landdetail({
land_id: typeID.value
}).then((res) => {
if (res.code == 1) {
if (res.data.user_id == 23) {
// videoUrl.value =
// 'http://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_4.live.mp4?secret=YwDtp2llj80HA19JhMXL4Po99nsMAyNT'
}
console.log(videoUrl.value)
// videoUrl.value=res.data.
Object.assign(dataobj, res.data);
}
});
};
const getlist = () => {
plantlist({
land_id: typeID.value
}).then((res) => {
if (res.code == 1) {
dataList.splice(0, dataList.length, ...res.data);
dataList.forEach(item => {
item.showCode = false
})
}
});
};
//新增种植
const addshowPicke = () => {
uni.navigateTo({
url: '/pages/husbandryForm/sow?id=' + typeID.value
})
}
//跳转
const navto = (url) => {
uni.navigateTo({
url
})
}
const navtoForm = (item, type) => {
uni.navigateTo({
url: '/pages/landDetail/tudi?data=' + item.id
})
// }
}
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 perviewFn1 = (url) => {
uni.previewImage({
urls: [url]
})
}
let img = ''
let codeImg = ''
const showCodeFn = (i) => {
// dataList[i].showCode != dataList[i].showCode
dataList[i].showCode = !dataList[i].showCode
console.log(dataList[i].showCode)
}
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 {
height: 90rpx;
border-radius: 42.06rpx 42.06rpx 42.06rpx 42.06rpx;
margin: 20rpx auto;
line-height: 90rpx;
text-align: center;
color: white;
background-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;
position: relative;
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20rpx;
}
// justify-content: space-between;
.right {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-left: 20rpx;
font-size: 26rpx;
}
}
}
.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;
}
.code-btn {
border: 1px solid $theme-main-color;
border-radius: 30rpx;
padding: 3rpx 20rpx;
color: $theme-main-color;
position: absolute;
right: 20rpx;
}
.actBtn {
background: linear-gradient(to right, #FEFFFF 0%, #E8FAF2 100%);
}
</style>
Reference in New Issue View Git Blame Copy Permalink