manage_mobile/pages/massif/mana/index.vue

<style lang="scss">
	.container{
		height: 100%;
		background:#F6F6F6;
		&>map{
			flex-shrink: 0;
			height:348rpx;
			width:100%;
			margin-bottom:-9rpx;
		}
		&>.u-tabs{
			flex-shrink: 0;
			background:#fff;
			box-shadow: 0 6rpx 12rpx 2rpx rgba(0,0,0,0.1);
			&/deep/ .u-tabs__wrapper__nav__item__text{
				font-size:28rpx;
			}
		}
		swiper{
			flex-grow: 1;
			height:1rpx;
		}
	}
</style>
<template>
	<view class="container flex">
		<map id="amap"/>

		<u-tabs :list="tabs" :current="tabIndex" activeStyle="color:#10C176;" lineColor="#10C176" lineWidth="50" :scrollable="false" @change="plantId='';tabIndex=$event.index"/>

		<swiper :current="tabIndex" @change="tabIndex=$event.detail.current">
			<swiper-item>
				<plant-plan
					:plotId="plotId"
					@trigger="plantId=$event"
					@farm="farm_plantId=$event"/>
			</swiper-item>
			<swiper-item>
				<farmRecord :plantId="farm_plantId" :plotId="plotId" ref="farmRecord"/>
			</swiper-item>
			<swiper-item>
				<recovery :plotId="plotId" :plantId="plantId" ref="recovery" @trigger="recoveryId=$event"/>
			</swiper-item>
			<swiper-item>
				<transactions :recoveryId="recoveryId" :plotId="plotId" ref="transactions"/>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import plantPlan from './plantPlan.vue'
import farmRecord from './farmRecord.vue'
import recovery from './recovery.vue'
import transactions from './transactions.vue'

import request from '@/common/request.js'
import {computeArea} from '@/common/utils'
export default {
	components:{plantPlan,farmRecord,recovery,transactions},
	data(){
		return{
			tabIndex:0,
			tabs:[
				{name:"种植计划"},
				{name:"农事操作"},
				{name:"采收记录"},
				{name:"交易记录"},
			],
			plotId:"",
			plantId:"",
			farm_plantId:"",
			recoveryId:"",
			plotName:"",

			maps:null,
		}
	},
	watch:{
		plantId(n){
			this.$nextTick(()=>{
				this.$refs.recovery.reSearch()
			})
			if(n)this.tabIndex=2;
		},
		farm_plantId(n){
			this.$nextTick(()=>{
				this.$refs.farmRecord.reSearch()
			})
			if(n)this.tabIndex=1;
		},
		recoveryId(n){
			this.$nextTick(()=>{
				this.$refs.transactions.reSearch()
			})
			if(n)this.tabIndex=3
		},
		tabIndex(n,o){
			if(n!=2)this.plantId="";
			if(n!=1)this.farm_plantId="";
			if(n!=3)this.recoveryId="";
		}
	},
	onLoad(options){
		this.plotId=options.id
	},
	async onReady(){
		/* #ifdef APP-PLUS */
			var amap=uni.createMapContext("amap",this)
			var points=await this.getDetail()
			
			this.maps=amap.$getAppMap()
			
			this.maps.setMapType(plus.maps.MapType.MAPTYPE_SATELLITE)
			if(points.length>0){
				var bound=computeArea(points)
				this.maps.centerAndZoom(new plus.maps.Point(bound.center.longitude, bound.center.latitude),10)

				var polygon=new plus.maps.Polygon( points.map(v=>new plus.maps.Point(v.longitude, v.latitude)) )
				polygon.setLineWidth(2)
				polygon.setStrokeColor("#10C176")
				polygon.setFillColor("#10C176")
				polygon.setFillOpacity(0.3)
				this.maps.addOverlay(polygon)
				//地名标签
				var marker=new plus.maps.Marker(new plus.maps.Point(bound.center.longitude, bound.center.latitude));
				marker.setLabel(this.plotName)
				this.maps.addOverlay(marker)
			}else{
				this.maps.getUserLocation((state,point)=>{
					if(state==0){
						this.maps.centerAndZoom(new plus.maps.Point(point.longitude, point.latitude),10)
					}else{
						this.maps.centerAndZoom(new plus.maps.Point(102.712251,25.040609),10)
					}
				})
			}
			
		/* #endif */
	},
	methods:{
		async getDetail(){
			var res=await request('/api/plantPlot/queryById',{
				params:{id:this.plotId}
			})
			if(res.statu){
				this.plotName=res.data.plotName
				return (res.data.longitude||'').split(";").map(v=>{
						var point=v.split(",")
						if(point.length==2){
							return {longitude:point[0],latitude:point[1]}
						}
						return null
					}).filter(v=>v)
			}else{
				uni.showModal({
					title:"提示",
					content:res.msg||"获取地块详情失败！",
					showCancel:false,
				})
				return[]
			}
		},
	}
}
</script>