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

409 lines
8.5 KiB
Vue
Raw Normal View History

页面完善
2023-10-23 17:57:19 +08:00
<template>
<view class="content">
加班
2023-10-26 19:02:26 +08:00
<imgCard :imgUrl='headData?.pic_detail?.pic'></imgCard>
页面完善
2023-10-23 17:57:19 +08:00
<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>
加班
2023-10-26 19:02:26 +08:00
<view style="display: flex;" @click="navgo(`/pages/aquatic/imgList?pond_id=${pond_id}`)">
页面完善
2023-10-23 17:57:19 +08:00
查看历史条件 <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">
上传新的种植情况
</view>
<view class="card">
<view class="tit">
<view class="">
农户名称: 1号土地
</view>
<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 class="card-li">
<view class="">
具体种类: 20亩
</view>
</view>
加班
2023-10-26 19:02:26 +08:00
<view class="add-btn" @click="navgo(`/pages/aquatic/addPond?pond_id=${pond_id}`)">
页面完善
2023-10-23 17:57:19 +08:00
添加水产养殖
</view>
</view>
加班
2023-10-26 19:02:26 +08:00
<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')">
更新{{index.slice(0,-2)}}
</view>
</view>
<myTable :tit='`查看${index.slice(0,-2)}`' :dataList="item.action_record" route='/pages/feedIng/allRecording'>
</myTable>
</view>
<!-- <view class="circumstance">
页面完善
2023-10-23 17:57:19 +08:00
<view class="card-tit">
<view class="">
生长密度记录
</view>
<view class="updata-btn" @click="navgo('/pages/aquatic/updateGrow')">
更新生长记录
</view>
</view>
<myTable tit='查看历史清点记录' route='/pages/feedIng/allRecording'></myTable>
</view>
<view class="circumstance">
<view class="card-tit">
<view class="">
饲养记录
</view>
<view class="updata-btn" style="width: 300rpx;" @click="navgo('/pages/growRecord/index')">
更新饲养记录
</view>
</view>
<myTable tit='查看历史消毒记录' route='/pages/feedIng/allRecording'></myTable>
加班
2023-10-26 19:02:26 +08:00
</view> -->
页面完善
2023-10-23 17:57:19 +08:00
<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>
加班
2023-10-26 19:02:26 +08:00
<text>刷新时间: {{dateFn()}}</text>
页面完善
2023-10-23 17:57:19 +08:00
</view>
</view>
加班
2023-10-26 19:02:26 +08:00
<!-- 你这不是 -->
页面完善
2023-10-23 17:57:19 +08:00
<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-26 19:02:26 +08:00
import {
actionsAPI
} from "@/api/animal.js"
import {
pondInfoAPI,
addFishPicAPI,
pondEnvDataAPI
} from "@/api/aquatic.js"
页面完善
2023-10-23 17:57:19 +08:00
import myTable from "@/components/myTable/index.vue"
import imgCard from "@/components/imgCard.vue"
加班
2023-10-26 19:02:26 +08:00
import {
onLoad
} from "@dcloudio/uni-app"
import uplodeImg from "@/utils/uplodeImg.js"
页面完善
2023-10-23 17:57:19 +08:00
const data = reactive([{
tit: "水温",
icon: 'TRWD',
dw: "℃",
加班
2023-10-26 19:02:26 +08:00
cont: 'water_temp',
页面完善
2023-10-23 17:57:19 +08:00
flag: false,
}, {
tit: "PH值",
icon: 'TRSD',
加班
2023-10-26 19:02:26 +08:00
cont: 'ph_content',
页面完善
2023-10-23 17:57:19 +08:00
}, {
tit: "溶解氧",
icon: 'FX',
加班
2023-10-26 19:02:26 +08:00
cont: 'dissolved_oxygen',
dw: "%",
页面完善
2023-10-23 17:57:19 +08:00
}, {
tit: "电导率",
icon: 'FS',
加班
2023-10-26 19:02:26 +08:00
dw: "mg/l",
cont: 'electric_conductivity',
页面完善
2023-10-23 17:57:19 +08:00
}, {
tit: "TDS",
icon: 'JYL',
加班
2023-10-26 19:02:26 +08:00
dw: "lux",
cont: 'tds',
页面完善
2023-10-23 17:57:19 +08:00
},
])
加班
2023-10-26 19:02:26 +08:00
const baseData = reactive({})
页面完善
2023-10-23 17:57:19 +08:00
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 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
// 输出日期字符串
}
加班
2023-10-26 19:02:26 +08:00
const updateImgFn = () => {
let image = ""
uplodeImg().then(res => {
image = res.data.image
headData.pic_detail.pic = image
addFishPicAPI({
pond_id: pond_id.value,
pic: image
})
})
}
const pond_id = ref(0)
const headData = reactive({})
onLoad((option) => {
pondEnvDataAPI({
user_id: 307
}).then(res => {
for (let key in res.data) {
baseData[key] = (res.data)[key]
}
})
pond_id.value = option.pond_id
pondInfoAPI({
user_id: 307,
pond_id: pond_id.value
}).then(res => {
for (let key in res.data) {
headData[key] = (res.data)[key]
}
})
})
const actionList = reactive({})
actionsAPI({
type: 4
}).then(res => {
for (let key in res.data) {
actionList[key] = (res.data)[key]
}
})
页面完善
2023-10-23 17:57:19 +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;
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;
}
.add-btn {
margin: 0 auto;
width: 220.79rpx;
height: 57.83rpx;
color: #00A15E;
border: 1px solid #00A15E;
border-radius: 50rpx;
display: flex;
justify-content: center;
line-height: 57rpx;
font-size: 26rpx;
}
.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;
}
</style>