You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
536 lines
15 KiB
536 lines
15 KiB
<template>
|
|
<view class="v-pages-l">
|
|
<view class="m-tabs-box">
|
|
<z-paging ref="paging" :pagingStyle="padingStyle" v-model="dataList" @query="queryList">
|
|
<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
|
|
<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
|
|
<template #top>
|
|
<view class="m-mapbox">
|
|
<map class="m-map" name="" id="map" :longitude="longitude" :latitude="latitude" :polygons="polygons" enable-satellite="true"></map>
|
|
<view class="m-shadow">
|
|
<view class="m-type"><dict-tag :type="'land_type'" :value="blockData.blockType" class="m-dic-tag" /></view>
|
|
<view class="m-mj">占地面积:{{ blockData.blockArea || '0' }}亩</view>
|
|
</view>
|
|
</view>
|
|
<z-tabs active-color="#14C171 " :list="tabList" @change="tabChange" />
|
|
<view class="m-data-pick" v-if="tabIndex == 2">
|
|
<uni-datetime-picker class="no-time-pick" @change="searchData" v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
|
|
</view>
|
|
</template>
|
|
<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
|
|
<view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item, index)">
|
|
<template v-if="tabIndex == 0 && dataList.length > 0">
|
|
<view class="m-item-box">
|
|
<view class="m-item-top">
|
|
<image class="m-item-img" :mode="aspectFill" :src="item.productPic"></image>
|
|
<view class="m-pro-custrom">
|
|
<view class="m-pro-name">
|
|
{{ item.productName }}
|
|
</view>
|
|
<view class="tag-box">
|
|
<view class="item-verity" v-if="item.speciesName">{{ item.speciesName }}</view>
|
|
<dict-tag class="m-dic-tag" :type="'authentication_type'" :value="item.authenticationType" />
|
|
</view>
|
|
<view class="m-pro-Time">
|
|
种植时间：{{ parseTime(item.plantingTime, '{y}-{m}-{d}') }}
|
|
<view class="m-daysdiff">第{{ calculateDaysDifference(item.plantingTime) }}天</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-item-bottom">
|
|
<view class="m-note" @click.stop="getNoteList(item)">
|
|
<uni-icons type="compose" size="16"></uni-icons>
|
|
农事记录
|
|
</view>
|
|
<view class="m-end-pro" @click.stop="stopCropper(item)">
|
|
<text class="iconfont icon-end m-r-mini"></text>
|
|
种植结束
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-if="tabIndex == 1 && dataList.length > 0">
|
|
<view class="m-item-box">
|
|
<view class="m-item-top">
|
|
<image class="m-item-img" :mode="aspectFill" :src="item.productPic"></image>
|
|
<view class="m-pro-custrom">
|
|
<view class="m-pro-name">
|
|
{{ item.productName }}
|
|
</view>
|
|
<view class="tag-box">
|
|
<view class="item-verity" v-if="item.speciesName">{{ item.speciesName }}</view>
|
|
<dict-tag class="m-dic-tag" :type="'authentication_type'" :value="item.authenticationType" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="m-item-bottom noflex">
|
|
<uni-steps
|
|
class="m-steps"
|
|
:active-color="'#666'"
|
|
:options="[
|
|
{ title: '种植时间', desc: parseTime(item.plantTime, '{y}-{m}-{d}') },
|
|
{ title: '结束时间', desc: parseTime(item.endTime, '{y}-{m}-{d}') }
|
|
]"
|
|
:active="3"
|
|
></uni-steps>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<template v-if="tabIndex == 2 && dataList.length > 0">
|
|
<view class="m-item-box">
|
|
<view class="m-item-top no-border">
|
|
<image class="m-item-img" :mode="aspectFill" :src="item.productPic"></image>
|
|
<view class="m-pro-custrom">
|
|
<view class="m-pro-name">
|
|
{{ item.productName }}
|
|
</view>
|
|
<view class="tag-box">
|
|
<view class="item-verity" v-if="item.speciesName">{{ item.speciesName }}</view>
|
|
<dict-tag class="m-dic-tag" :type="'authentication_type'" :value="item.authenticationType" />
|
|
</view>
|
|
<view class="m-pro-Time">采收时间：{{ parseTime(item.jobTime, '{y}-{m}-{d}') }}</view>
|
|
</view>
|
|
<view class="m-big-num">
|
|
<span class="weight">{{ item.production }}</span>
|
|
<br />
|
|
公斤
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</z-paging>
|
|
<view class="m-add-pro" @click="addCopper" v-if="tabIndex == 0 && dataList.length == 0">+新增种养品种</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import DictTag from '@/components/DictTag/index.vue';
|
|
import { parseTime } from '@/utils/ruoyi';
|
|
import { getCropperPage, getGrowRecordPage, getRecoveryRecordPage, stopCropper } from '@/api/system/block/block.js';
|
|
export default {
|
|
components: {
|
|
DictTag
|
|
},
|
|
data() {
|
|
return {
|
|
blockData: undefined,
|
|
polygons: [],
|
|
includePoints: [],
|
|
longitude: null,
|
|
latitude: null,
|
|
padingStyle: {
|
|
top: '0',
|
|
'z-index': 9
|
|
},
|
|
datetimerange: [],
|
|
|
|
dataList: [],
|
|
tabList: ['种植产品', '种植历史', '采收记录'],
|
|
tabIndex: 0
|
|
};
|
|
},
|
|
watch: {
|
|
datetimerange: {
|
|
handler(val) {
|
|
console.log(val);
|
|
if (val.length == 0) {
|
|
this.$refs.paging.reload();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onReady() {},
|
|
onLoad: function (option) {
|
|
//option为object类型，会序列化上个页面传递的参数
|
|
const obj = JSON.parse(option.val);
|
|
console.log(obj);
|
|
this.blockData = obj;
|
|
},
|
|
mounted() {
|
|
this.initmapPolygon();
|
|
},
|
|
onUnload() {
|
|
const pages = getCurrentPages();
|
|
pages[0].$vm.$refs.paging.reload();
|
|
console.log(pages);
|
|
},
|
|
methods: {
|
|
parseTime(time, pattern) {
|
|
return parseTime(time, pattern);
|
|
},
|
|
calculateDaysDifference(val) {
|
|
console.log(val);
|
|
const timestampDate = new Date(val);
|
|
const timeDiff = new Date().getTime() - timestampDate.getTime();
|
|
return Math.floor(timeDiff / (1000 * 3600 * 24));
|
|
},
|
|
initmapPolygon() {
|
|
let this_ = this;
|
|
const mapCon = uni.createMapContext('map');
|
|
const arr = JSON.parse(this.blockData.positionStr);
|
|
const center = this_.calculateCenter(arr);
|
|
let Arr = arr.map((item) => {
|
|
const obj = {
|
|
latitude: item[1],
|
|
longitude: item[0]
|
|
};
|
|
return obj;
|
|
});
|
|
console.log(Arr);
|
|
let Obj = {
|
|
points: Arr,
|
|
strokeColor: this_.blockData.blockColor && this_.blockData.blockColor != null ? this_.blockData.blockColor : '#007969',
|
|
fillColor: this_.blockData.blockColor && this_.blockData.blockColor != null ? this_.blockData.blockColor + '5c' : '#0079695c',
|
|
zIndex: 1
|
|
};
|
|
this_.$nextTick(() => {
|
|
this_.polygons.push(Obj);
|
|
mapCon.includePoints({
|
|
padding: [30, 30, 30, 30],
|
|
points: Arr
|
|
});
|
|
this_.longitude = center[0];
|
|
this_.latitude = center[1];
|
|
});
|
|
},
|
|
//计算中心点
|
|
calculateCenter(coordinates) {
|
|
let sumLat = 0;
|
|
let sumLng = 0;
|
|
coordinates.forEach((coord) => {
|
|
sumLat += coord[0];
|
|
sumLng += coord[1];
|
|
});
|
|
const count = coordinates.length;
|
|
const centerLat = sumLat / count;
|
|
const centerLng = sumLng / count;
|
|
return [centerLat, centerLng];
|
|
},
|
|
tabChange(index) {
|
|
this.tabIndex = index;
|
|
//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
|
|
this.$refs.paging.reload();
|
|
},
|
|
queryList(pageNo, pageSize) {
|
|
//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
|
|
//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
|
|
//模拟请求服务器获取分页数据，请替换成自己的网络请求
|
|
if (this.tabIndex == 0) {
|
|
const params = {
|
|
pageNo: pageNo,
|
|
pageSize: pageSize,
|
|
baseId: this.$store.state.user.baseId,
|
|
blockId: this.blockData.id
|
|
};
|
|
getCropperPage(params)
|
|
.then((res) => {
|
|
//将请求的结果数组传递给z-paging
|
|
this.$nextTick(() => {
|
|
this.$refs.paging.complete(res.data.list);
|
|
});
|
|
})
|
|
.catch((res) => {
|
|
//如果请求失败写this.$refs.paging.complete(false);
|
|
//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
this.$refs.paging.complete(false);
|
|
});
|
|
}
|
|
if (this.tabIndex == 1) {
|
|
const params = {
|
|
pageNo: pageNo,
|
|
pageSize: pageSize,
|
|
baseId: this.$store.state.user.baseId,
|
|
blockId: this.blockData.id
|
|
};
|
|
getGrowRecordPage(params)
|
|
.then((res) => {
|
|
//将请求的结果数组传递给z-paging
|
|
this.$nextTick(() => {
|
|
this.$refs.paging.complete(res.data.list);
|
|
});
|
|
})
|
|
.catch((res) => {
|
|
//如果请求失败写this.$refs.paging.complete(false);
|
|
//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
this.$refs.paging.complete(false);
|
|
});
|
|
}
|
|
if (this.tabIndex == 2) {
|
|
const params = {
|
|
pageNo: pageNo,
|
|
pageSize: pageSize,
|
|
baseId: this.$store.state.user.baseId,
|
|
blockId: this.blockData.id,
|
|
jobTime: this.datetimerange
|
|
};
|
|
getRecoveryRecordPage(params)
|
|
.then((res) => {
|
|
//将请求的结果数组传递给z-paging
|
|
this.$nextTick(() => {
|
|
this.$refs.paging.complete(res.data.list);
|
|
});
|
|
})
|
|
.catch((res) => {
|
|
//如果请求失败写this.$refs.paging.complete(false);
|
|
//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
|
//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
|
this.$refs.paging.complete(false);
|
|
});
|
|
}
|
|
},
|
|
itemClick(item, index) {
|
|
console.log('点击了', item, index);
|
|
},
|
|
searchData(val) {
|
|
console.log(val, this.datetimerange);
|
|
if (val.length > 0) {
|
|
const t1 = val[0].split(' ')[0] + ' 00:00:00';
|
|
const t2 = val[1].split(' ')[0] + ' 23:59:59';
|
|
this.$nextTick(() => {
|
|
this.datetimerange = [t1, t2];
|
|
this.$forceUpdate();
|
|
});
|
|
console.log(val, this.datetimerange);
|
|
this.$refs.paging.reload();
|
|
}
|
|
},
|
|
getNoteList(row) {
|
|
console.log(row)
|
|
const obj = {
|
|
cropperId: row.id,
|
|
productName: row.productName,
|
|
batch: row.currentBatch,
|
|
blockName: row.blockName,
|
|
authenticationType:row.authenticationType
|
|
};
|
|
const data = JSON.stringify(obj);
|
|
uni.navigateTo({
|
|
url: '/sunPages/noteJobList/noteJobList?params=' + data
|
|
});
|
|
},
|
|
stopCropper(row) {
|
|
let that = this;
|
|
const id = row.id;
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: '确定将编号为' + id + '作物结束种植吗',
|
|
showCancel: true,
|
|
confirmText: '结束',
|
|
success(res) {
|
|
if (res.confirm) {
|
|
row.plantEnd = 2;
|
|
stopCropper(row)
|
|
.then((res) => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '已结束'
|
|
});
|
|
that.blockData = undefined
|
|
setTimeout(() => {
|
|
that.$refs.paging.reload();
|
|
}, 1500);
|
|
})
|
|
.catch((err) => {
|
|
console.log(err);
|
|
});
|
|
} else if (res.cancel) {
|
|
console.log('用户点击取消');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
addCopper() {
|
|
this.blockData.choose = false;
|
|
const params = encodeURIComponent(JSON.stringify(this.blockData));
|
|
uni.navigateTo({
|
|
url: '/sunPages/addCrops/addCrops?params=' + params
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.m-add-pro {
|
|
display: block;
|
|
position: fixed;
|
|
bottom: 200rpx;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
background-color: #32c38f;
|
|
padding: 10rpx 15rpx;
|
|
border: none;
|
|
border-radius: 10rpx;
|
|
color: #eee;
|
|
z-index: 99999;
|
|
}
|
|
.m-mapbox {
|
|
width: 100%;
|
|
height: 500rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
border-radius: 10rpx;
|
|
|
|
.m-map {
|
|
width: 100%;
|
|
height: 550rpx;
|
|
}
|
|
|
|
.m-shadow {
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
bottom: 22rpx;
|
|
left: 20rpx;
|
|
white-space: nowrap;
|
|
background: #ebfff5;
|
|
box-shadow: 0rpx 6rpx 14rpx 0rpx rgba(20, 193, 113, 0.15);
|
|
border-radius: 28rpx;
|
|
border: 1px solid #ffffff;
|
|
padding: 10rpx 15rpx;
|
|
width: fit-content;
|
|
color: #1b1b1b;
|
|
font-size: 24rpx;
|
|
|
|
/deep/ .m-dic-tag {
|
|
margin-right: 16rpx;
|
|
color: #fff;
|
|
background-color: #14c171;
|
|
border: 2rpx solid #14c171;
|
|
padding: 2rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
.item {
|
|
margin: 30rpx 20rpx;
|
|
box-shadow: 0 0 9px 1px #ddd;
|
|
padding: 20rpx 30rpx;
|
|
border-radius: 20rpx;
|
|
background: #fff;
|
|
|
|
.m-item-box {
|
|
.m-item-top {
|
|
border-bottom: solid 1rpx #dedede;
|
|
display: flex;
|
|
padding-bottom: 20rpx;
|
|
align-items: center;
|
|
|
|
.m-item-img {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
border-radius: 20rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
.m-pro-custrom {
|
|
flex: 1;
|
|
.m-pro-name {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
padding-left: 20rpx;
|
|
position: relative;
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 0;
|
|
width: 4rpx;
|
|
height: 60%;
|
|
border-radius: 8rpx;
|
|
background-color: #14c171;
|
|
}
|
|
}
|
|
.tag-box {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.item-verity {
|
|
font-size: 24rpx;
|
|
color: #ffa800;
|
|
background-color: rgba(255, 168, 0, 0.1);
|
|
border: 2rpx solid rgba(255, 168, 0, 0.1);
|
|
margin-right: 15rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
.m-dic-tag {
|
|
font-size: 24rpx;
|
|
color: #14c171;
|
|
background-color: rgba(20, 193, 113, 0.1);
|
|
border: 2rpx solid rgba(20, 193, 113, 0.1);
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
.m-pro-Time {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
color: #666;
|
|
|
|
.m-daysdiff {
|
|
color: #00af7f;
|
|
}
|
|
}
|
|
}
|
|
.m-big-num {
|
|
width: 20%;
|
|
font-size: 28rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
color: #666;
|
|
|
|
.weight{
|
|
color: #00af7f;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.m-item-bottom {
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-right: 20rpx;
|
|
align-items: center;
|
|
|
|
.m-note {
|
|
margin-right: 20rpx;
|
|
background: #14c171;
|
|
padding: 4rpx 10rpx;
|
|
color: #fff;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
/deep/ .uni-icons {
|
|
color: #fff !important;
|
|
}
|
|
}
|
|
.m-end-pro {
|
|
background: #ffa800;
|
|
color: #fff;
|
|
padding: 4rpx 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.noflex {
|
|
display: block;
|
|
}
|
|
.no-border {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
/deep/ .m-data-pick .uni-calendar--fixed-top {
|
|
display: none;
|
|
}
|
|
</style>
|
|
|