<style lang="scss" scoped> .container { background:#F6F6F6; padding-bottom:20rpx; min-height:100%; &>.top{ position:absolute; top:0; left:0; width:100%; z-index: 20; padding:calc(var(--status-bar-height) + 10rpx) 30rpx 0; color:#fff; font-size:24rpx; display:flex; justify-content: space-between; align-items: center; background:rgba(0,0,0,0.1); .plant-dingweixiao:before{ font-size:20rpx; margin-right:5rpx; } } &>.head{ padding:30rpx; width:calc(100% - 60rpx); background:#31C888; height:290rpx; margin-bottom:-80rpx; border-radius: 0 0 80rpx 80rpx; box-sizing:content-box; } swiper.headImg{ height:424rpx; margin-bottom:-80rpx; .u-transition{ height:100%; &/deep/ image{ border-radius: 0 0 35rpx 35rpx!important; } } } .card{ &.area{ position:relative; z-index: 20; table{ width:100%; border-bottom:2rpx solid rgba(216, 216, 216, 0.2); tr{ &.title{ font-size:24rpx; } &.value{ color:#10C176; font-size:32rpx; font-weight: bold; } } } .article{ display:flex; align-items: center; padding-top:20rpx; &>.plant{ flex-grow: 1; display:flex; align-items: center; .u-transition{ &+.u-transition{ margin-left:15rpx; } .plant-xiaopangchetupianjiazaishibai{ &:before{ color:#999; margin:0; } } } .link{ color:#999; margin-left:10rpx; font-size:30rpx ; } } text{ &:before{ color:#31C888; margin-right:14rpx; } &.line{ width:5rpx; height: 52rpx; background:rgba(216, 216, 216, 0.2); margin:0 30rpx 0 auto; } } } } &.mana{ width:calc(50% - 46rpx); flex-shrink: 0; margin-top:0; .title{ color:#333; font-size:32rpx; display:flex; align-items: center; padding-bottom:24rpx; border-bottom:2rpx solid #D8D8D8; [class*=plant-]{ color:#10C176; } .more{ color:#999; font-size:24rpx; margin-left:auto; } } .item{ display:flex; align-items: center; margin-top:24rpx; color:#707070; font-size:24rpx; &:nth-child(2){ --c:235, 67, 118; } &:nth-child(3){ --c:255, 195, 83; } &:nth-child(4){ --c:16, 193, 118; } &:before{ flex-shrink: 0; content:" "; width:20rpx; height:20rpx; border-radius: 50%; background-image:radial-gradient(rgba(var(--c), 1) 2px,rgba(var(--c), 0.2) 2.5px); margin-right:10rpx; } text{ &:nth-child(2){ margin-left:auto; flex-shrink: 0; } } } .u-empty{ min-height:auto; } &:first-child{ margin-right:calc(30rpx/2); } &:nth-child(2){ margin-left:calc(30rpx/2); } } &.base{ margin-top:0; background:linear-gradient(#fff,#F1FBF6); .title{ display:flex; align-items: center; &:before{ content:" "; width:12rpx; height:30rpx; border-radius: 20rpx; background:#10C176; margin-right:14rpx; } .plant-jiantou_zuoyouqiehuan{ margin-left:auto; color:#10C176; font-size:28rpx; &:before{ margin-right:8rpx; color:#fff; background:#10C176; font-weight: normal; border-radius: 50%; width:34rpx; height:34rpx; text-align: center; line-height: 34rpx; } } } .matter{ margin:20rpx 0; padding-bottom:20rpx; border-bottom:2rpx solid #D8D8D8; display:flex; align-items: center; text{ flex-shrink: 0; display: inline-flex; align-items: center; &:before{ color:rgba(var(--c),1); margin-right:12rpx; text-shadow: 6rpx -6rpx rgba(var(--c),0.3); } &.active{ color:rgba(var(--c),1); } &.more{ color:#999; margin-left:auto; } } } .item{ display:flex; align-items: center; margin-top:40rpx; &:before{ content:" "; flex-shrink: 0; width:20rpx; height:20rpx; margin-right:16rpx; border-radius: 50%; background-image:radial-gradient(rgba(var(--c),1) 2px, rgba(var(--c),0.3) 2.5px) } text{ &:first-child{ flex-shrink: 0; min-width:90rpx; color:#333333; font-size:28rpx; margin-right:20rpx; } } } } } .u-popup{ &/deep/ .u-popup__content{ border-radius: 24rpx 24rpx 0 0; padding-top:90px; background-image:url(@/static/home_picker_head.png); background-repeat: no-repeat; background-size:100% 90px; } } } </style> <template> <view class="container"> <view class="top"> <text class="plant-dingweixiao" @click="!adderss.isOk && refreshPosition()">{{adderss.isOk?`${adderss.city}${adderss.district}`:"点击重新获取定位"}}</text> </view> <swiper autoplay :interval="5*1000" v-if="headImgs.length>0" class="headImg" circular> <swiper-item v-for="(v,k) in headImgs" :key="k"> <u-image :src="`${host}/${v}`" width="100%" height="100%" mode="aspectFill"> <text slot="error" class="plant-xiaopangchetupianjiazaishibai"/> </u-image> </swiper-item> </swiper> <image v-else class="head" src="@/static/banner.png" mode="aspectFit"/> <view class="area card"> <table> <tr class="title"> <td>地块个数(个)</td><td>地块面积(亩)</td><td>在种面积(亩)</td><td>在种品种(种)</td> </tr> <tr class="value"> <td>{{massif.plotNum||0}}</td> <td>{{massif.totalArea||0}}</td> <td>{{massif.plantArea||0}}</td> <td>{{massif.productCount||0}}</td> </tr> </table> <view class="article"> <view class="plant" @click="$u.route({url:'pages/massif/myPlant'})"> <text class="plant-bijibenjilutongxunlu"/> <u-image v-for="(v,k) in (massif.images||[])" :key="k" mode="aspectFill" width="56rpx" height="46rpx" radius="8rpx" :src="`${host}/${v}`"> <text slot="error" class="plant-xiaopangchetupianjiazaishibai"/> </u-image> <text class="link">>></text> </view> <text class="line"/> <text class="plant-nongzi" style="margin-right:64rpx;" @click="$u.route({url:'pages/stock/mana'})">库存</text> <text class="plant-caigou" @click="$u.route({url:'pages/purchase/apply'})">采购</text> </view> </view> <view style="display:flex;"> <view class="card mana"> <view class="title"> <text class="plant-dikuaimianji"/> 地块管理 <text class="more" @click="$u.route({type:'switchTab',url:'pages/massif/index'})">更多>></text> </view> <view class="item" v-for="(v,k) in massif.plotList||[]" :key="k"> <text class="over">{{v.plotName}}</text> <text>{{v.realityArea}}亩</text> </view> <u-empty :show="(massif.plotList||[]).length<=0" text=" " width="70%" icon="/static/noData.png"/> </view> <view class="card mana"> <view class="title"> <text class="plant-cangkuguanliguanli"/> 仓库管理 <text class="more" @click="$u.route({url:'pages/warehouse/mana'})">更多>></text> </view> <view class="item" v-for="(v,k) in stockList" :key="k"> <text class="over">{{v.warehouseName}}</text> <text>{{v.warehouseVolume}}㎡</text> </view> <u-empty :show="stockList.length<=0" text=" " width="60%" icon="/static/noData.png"/> </view> </view> <view class="card base"> <view class="title"> {{$store.state.baseInfo.name||'基地管理'}} <text class="plant-jiantou_zuoyouqiehuan" v-if="isAdmin" @click="show=true">切换基地</text> </view> <view class="matter"> <text class="plant-jilu" :class="{active:baseIndex=='record'}" style="--c:16, 193, 118;margin-right:40px;" @click="baseIndex=='record'?baseIndex='':baseIndex='record'">农事记录</text> <text class="plant-tourupin" :class="{active:baseIndex=='input'}" style="--c:255, 195, 83;" @click="baseIndex=='input'?baseIndex='':baseIndex='input'">投入品</text> <text class="more" @click="$u.route({url:'/pages/baseMana/formReacord'})">更多>></text> </view> <template v-if="!baseIndex || baseIndex=='record'"> <view v-for="(v,k) in baseInfo.farmWork||[]" :key="`${k}_work`" class="item" style="--c:16, 193, 118;"> <text>农事</text> <u-notice-bar style="padding:0rpx;" icon="" speed="45" color="#777" bgColor="" :text="`${new Date(v.time).format('yyyy-MM-dd')}:${v.userName} 完成了${v.plotName}${v.farmWorkName}任务`"/> </view> </template> <template v-if="!baseIndex || baseIndex=='input'"> <view v-for="(v,k) in baseInfo.farmingInput||[]" :key="`${k}_input`" class="item" style="--c:255, 195, 83;"> <text>投入品</text> <u-notice-bar style="padding:0rpx;" icon="" speed="45" color="#777" bgColor="" :text="`${new Date(v.time).format('yyyy-MM-dd')}:${v.userName} 完成了${v.plotName}${v.farmWorkName}任务`"/> </view> </template> <u-empty :show="isEmpty" text="为查询到相关信息" width="50%" icon="/static/noData.png"/> </view> <u-picker v-if="isAdmin" :show="show" :columns="plantBase" keyName="baseName" closeOnClickOverlay @close="show=false" @confirm="$store.commit('setBaseId', {id:$event.value[0].id,name:$event.value[0].baseName});show=false" @cancel="show=false"/> </view> </template> <script> import request,{host} from '@/common/request' export default { data() { return { host:host('imgUrl'), headImgs:[], mapContext:null, show:false, plantBase:[[]], massif:{images:[]}, baseInfo:{}, baseIndex:"", stockList:[], adderss:{}, } }, computed:{ //是否可以切换基地 isAdmin(){ return /^company_admin$|^base_admin$|^ware_admin$/.test(this.$store.getters.userInfo.roleCode) }, isEmpty(){ if(!this.baseIndex)return (this.baseInfo.farmWork||[]).length+(this.baseInfo.farmingInput||[]).length<=0 else if(this.baseIndex=='record')return (this.baseInfo.farmWork||[]).length<=0 else return (this.baseInfo.farmingInput||[]).length<=0 }, }, watch:{ "$store.state.baseInfo.id"(n){ this.getMassif() this.getBaseInfo() this.getStock() } }, onLoad() { this.getHeadImg() if(this.isAdmin){ this.getPlantBase() }else{ this.$store.commit("setBaseId", { id: this.$store.getters['userInfo'].plantBaseInfoId, name: this.$store.getters['userInfo'].plantBaseInfoName }) } this.$provise.on("updateMassif", this.getMassif) this.$provise.on("updateStock", this.getStock) //#ifdef APP-PLUS uni.getLocation({ type:"gcj02", geocode:true, isHighAccuracy:true, success:res=>{ this.adderss={ ...res.address, longitude:res.longitude, latitude:res.latitude, isOk:true } } }) //#endif }, methods: { async getHeadImg(){ var res=await request("/base/api/plantCompany/queryCompanyPicById") if(res.statu){ this.headImgs=res.data } }, //获取地块信息 async getMassif(){ if(this.$store.state.baseInfo.id){ var res=await request("/api/plantIndex/queryPlot",{ params:{plantBaseId: this.$store.state.baseInfo.id} }) if(res.statu){ this.massif={ ...res.data, images:res.data.images.slice(0,3) } }else{ uni.showModal({ title:"提示", content:res.msg||"获取地块信息失败!", showCancel:false, }) } } }, //获取基地列表 async getPlantBase(){ var res=await request("/api/plantPlot/getAllPlantBaseInfo",{ params:{companyId:this.$store.getters.userInfo.companyId} }) if(res.statu){ if(res.data.length>0){ this.plantBase=[res.data] this.$store.commit("setBaseId", {id:res.data[0].id,name:res.data[0].baseName}) }else{ uni.showToast({title:"请先至管理端维护基地信息!",icon:"none",duration:5000}) } }else{ uni.showModal({ title:"提示", content:res.msg||"获取基地列表失败!", showCancel:false, }) } }, //获取基地名称 // async getBaseName(plantBaseInfoId){ // var res=await request("/api/purchase/purchaseUserShow",{ // params:{plantBaseInfoId} // }) // if(res.statu){ // this.$store.commit("setBaseId", {id:plantBaseInfoId,name:res.data.baseName}) // }else{ // uni.showModal({ // title:"提示", // content:res.msg||"获取基地名称失败!", // showCancel:false, // }) // } // }, async getBaseInfo(){ if(this.$store.state.baseInfo.id){ var res=await request("/api/plantIndex/queryFarmWorkAndInput",{ params:{plantBaseId: this.$store.state.baseInfo.id} }) if(res.statu){ this.baseInfo=res.data }else{ uni.showModal({ title:"提示", content:res.msg||"获取基地管理信息失败!", showCancel:false, }) } } }, // 获取仓库 async getStock(){ if(this.$store.state.baseInfo.id){ var res=await request("/api/plantIndex/queryWarehouse",{ params:{baseId: this.$store.state.baseInfo.id} }) if(res.statu){ this.stockList=res.data }else{ uni.showModal({ title:"提示", content:res.msg||"获取仓库信息失败!", showCancel:false, }) } } }, //重新定位 refreshPosition(){ uni.getLocation({ type:"gcj02", geocode:true, isHighAccuracy:true, success:res=>{ this.adderss={ ...res.address, longitude:res.longitude, latitude:res.latitude, isOk:true } }, fail(){ uni.showModal({ title:"提示", content:"获取定位失败!", showCancel:false, }) }, }) }, }, onUnload(){ this.$provise.off("updateMassif") this.$provise.off("updateStock") }, } </script>