<template>
|
<div class="home">
|
<div class="left">
|
<div class="farm-info">
|
<div class="farm-title">农场概览</div>
|
<!-- <div class="statis" style="padding-left: 50px">-->
|
<!-- <el-select v-model="farm.id" placeholder="请选择所属农场" filterable @change="farmChange">-->
|
<!-- <el-option-->
|
<!-- v-for="item in farmList"-->
|
<!-- :key="item.id"-->
|
<!-- :label="item.farmName"-->
|
<!-- :value="item.id">-->
|
<!-- </el-option>-->
|
<!-- </el-select>-->
|
<!-- </div>-->
|
<div class="statis">
|
<div class="echarts-statis">
|
<el-progress
|
type="circle"
|
:percentage="landInfo.rate"
|
:stroke-width="15"
|
:width="150"
|
:color="customColor"
|
:show-text="false"
|
></el-progress>
|
</div>
|
<div class="percentText">
|
<p>地块使用率</p>
|
<p>
|
<span
|
style="font-size: 32px; font-weight: 550; margin-top: -10px"
|
>{{ landInfo.rate || 0 }}</span>%
|
</p>
|
</div>
|
<div class="avue-statis">
|
<!-- <avue-data-display :option="option"></avue-data-display> -->
|
<div class="land-statis">
|
<div class="land-title">地块总面积</div>
|
<div class="land-num">
|
<span>{{ landInfo.zarea }}</span> 亩
|
</div>
|
</div>
|
<div class="land-statis">
|
<div class="land-title">当前种养面积</div>
|
<div class="land-num">
|
<span>{{ landInfo.sarea }}</span> 亩
|
</div>
|
</div>
|
<div class="land-statis">
|
<div class="land-title">当前种养品种</div>
|
<div class="land-num">
|
<span>{{ landInfo.num }}</span> 种
|
</div>
|
</div>
|
</div>
|
<div class="map-view" @click="goToMapModel">
|
<img src="../../../public/img/map.png" />
|
<div class="title">农场地图→</div>
|
</div>
|
</div>
|
</div>
|
<div class="farm-variety">
|
<div class="title">当前种养品种</div>
|
<div class="content">
|
<div class="farm" v-for="(item, index) in farmPlanList" :key="index">
|
<div class="farm-img" @click="recoveryDetail(item)">
|
<img :src="item.url" class="img" />
|
</div>
|
<div class="cai">{{ item.strainName }}</div>
|
<div class="area">
|
种植面积：
|
<span>{{ item.area }}</span>亩
|
</div>
|
<div class="btn">
|
<el-button plain size="small" @click="recovery(item)">
|
<span style="color: #5abf78">采收</span>
|
</el-button>
|
<!-- <el-button plain size="small" @click="over(item.id)">结束</el-button> -->
|
<el-button plain size="small" @click="over(item)">结束</el-button>
|
</div>
|
</div>
|
<!-- 秧苗 -->
|
<div class="farm" v-for="(item, index) in farmPlanListYM" :key="index">
|
<div class="farm-img" @click="recoveryDetail(item)">
|
<img :src="item.url" class="img" />
|
</div>
|
<div class="cai">{{ item.strainName }}(秧苗)</div>
|
<div class="area">
|
种植面积：
|
<span>{{ item.area }}</span>亩
|
</div>
|
<div class="btn">
|
<el-button plain size="small" @click="plant(item)">
|
<span style="color: #5abf78">移栽</span>
|
</el-button>
|
<!-- <el-button plain size="small" @click="over(item.id)">结束</el-button> -->
|
<el-button plain size="small" @click="over(item)">结束</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="farm-bottom"></div>
|
</div>
|
<div class="right">
|
<div class="production">
|
<div class="title">生产管理</div>
|
<div class="btn">
|
<!-- <div class="production-button"> -->
|
<div class="button" @click="land" style="background-color: #6991f4">
|
<div class="btn-img">
|
<img src="../../../public/img/wel/tian.png" class="img" />
|
</div>
|
<div class="text">圈地</div>
|
</div>
|
<div class="button" style="background-color: #f2a560" @click="plant">
|
<div class="btn-img">
|
<img src="../../../public/img/wel/ye.png" class="img" />
|
</div>
|
<div class="text">添加种养品种</div>
|
</div>
|
<div class="button" style="background-color: #f37ba1" @click="farming">
|
<div class="btn-img">
|
<img src="../../../public/img/wel/tuo.png" class="img" />
|
</div>
|
<div class="text">农事操作</div>
|
</div>
|
<div class="button" style="background-color: #9d82f6" @click="stock">
|
<div class="btn-img">
|
<img src="../../../public/img/wel/fang.png" class="img" />
|
</div>
|
<div class="text">农资入库</div>
|
</div>
|
</div>
|
</div>
|
<div class="statistics">
|
<div class="title">生产统计</div>
|
<div class="farming-statis">
|
<div class="left">
|
<div class="farm-text">本年农事操作</div>
|
<div class="num">
|
<span>{{ total }}</span> 次
|
</div>
|
</div>
|
<div class="right">
|
<el-link type="success" :underline="false" @click="farmPlantDetail">明细>></el-link>
|
</div>
|
</div>
|
<div class="farming-divider" v-if="isFarmingDetail">
|
<el-divider></el-divider>
|
</div>
|
<div class="farming-details" :v-if="isFarmingDetail">
|
<div
|
class="detail"
|
v-for="(item, index) in farmingList"
|
:key="index"
|
@click="farmPlantDetails(item)"
|
>
|
<div class="detail-title">{{ item.name }}</div>
|
<div class="detail-number">
|
<span>{{ item.value }}</span>次
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="repertory">
|
<div class="title">
|
<div class="repertory-title">农资库存</div>
|
<div class="detail">
|
<el-link type="success" :underline="false " @click="stockDetail">明细>></el-link>
|
</div>
|
</div>
|
<div class="repertory-centont">
|
<div
|
class="detail"
|
v-for="(item, index) in stockList"
|
:key="index"
|
@click="stockDetails(item)"
|
>
|
<div class="detail-title">{{ item.name}}</div>
|
<div class="detail-number">
|
剩余库存
|
<span>{{ item.val}}</span>公斤
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 弹窗, 采收 -->
|
<recovery v-if="recoveryVisible" ref="recovery" :farmDetail="farm"></recovery>
|
<!-- 弹窗，结束种养-->
|
<over v-if="overVisible" ref="over" @refreshOnLoad="refreshAll"></over>
|
<!-- 圈地 -->
|
<land v-if="landVisible" ref="land" @refreshOnLoad="refreshAll"></land>
|
<!-- 种养品 -->
|
<plant v-if="plantVisible" ref="plant" @refreshOnLoad="refreshAll"></plant>
|
<!-- 农事操作 -->
|
<farming v-if="farmingVisible" ref="farming" @refreshOnLoad="refreshAll"></farming>
|
<!-- 农资入库 -->
|
<stock v-if="stockVisible" ref="stock" @refreshOnLoad="refreshAll"></stock>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex"
|
import { getList, update,getStrainCount,getStrainCountYM } from "@/api/farmplant/farmplant"
|
import { getFarmingCount, getFarmingStatis } from "@/api/farm/farmingrecord"
|
import { selectCount } from "@/api/land/land"
|
import { StockCount } from "@/api/stock/stock"
|
import {getFarmList} from "@/api/farm/farm";
|
import recovery from "./recovery.vue"
|
import over from "./over.vue"
|
import land from "./land.vue"
|
import plant from "./plant.vue"
|
import farming from "./farming.vue"
|
import stock from "./stock.vue"
|
import fixed from "@/util/mathHandler"
|
export default {
|
components: {
|
recovery,
|
over,
|
land,
|
plant,
|
farming,
|
stock,
|
},
|
name: "wel",
|
data () {
|
return {
|
farmingList: [],
|
stockList: [],
|
isFarmingDetail: false,
|
isStockDetail: false,
|
landInfo: {},
|
farm:{},
|
farmList:[],
|
customColor: "#5ABF78",
|
total: 0,
|
farmingCount: 0,
|
farmPlanList: [],
|
farmPlanListYM:[],
|
recoveryVisible: false,
|
overVisible:false,
|
landVisible: false,
|
plantVisible: false,
|
farmingVisible: false,
|
stockVisible: false,
|
option: {
|
span: 8,
|
data: [],
|
},
|
}
|
},
|
computed: {
|
...mapGetters(["userInfo","$farmId"]),
|
},
|
created () {
|
|
this.$EventBus.$on('getFarmObj', (farmObj)=>{
|
// this.$nextTick(() => {
|
// this.$EventBus.$emit("setFarmId", farmObj.id);
|
// });
|
setTimeout(() => {
|
this.$EventBus.$emit("setFarmId", farmObj.id);
|
}, 100);
|
})
|
|
|
//初始化农场信息
|
// let farmId = this.userInfo.$farmId
|
this.farm.id = this.$farmId
|
this.initData(this.userInfo.tenant_id);
|
//地块使用率统计
|
this.getCountStatis()
|
//采收列表
|
this.onLoad()
|
//本年农事操作记录
|
this.getFarmingCount()
|
//本年农事操作记录,分组
|
this.getFarmingStatis()
|
this.StockCount()
|
|
},
|
watch: {
|
'$farmId':{
|
handler (newName, oldName) {
|
this.farm.id = newName
|
|
setTimeout(() => {
|
//农场概览 地块使用率
|
this.getCountStatis ()
|
//本年农事操作记录
|
this.getFarmingCount()
|
//本年农事操作记录,分组
|
this.getFarmingStatis()
|
this.StockCount()
|
//当前农场种养品种
|
this.onLoad()
|
}, 100);
|
|
}
|
}
|
},
|
methods: {
|
//获取农场信息
|
initData(tenantId) {
|
const data = {
|
deptId:this.userInfo.dept_id
|
}
|
getFarmList(data).then(res => {
|
this.farmList = this.farmList.concat(res.data.data)
|
});
|
},
|
refreshAll(){
|
this.getCountStatis ()
|
//本年农事操作记录
|
this.getFarmingCount()
|
//本年农事操作记录,分组
|
this.getFarmingStatis()
|
this.StockCount()
|
//当前农场种养品种
|
this.onLoad()
|
},
|
//农场下拉框change事件
|
farmChange(data) {
|
this.farm.id = data
|
//更新农场数据
|
//农场概览 地块使用率
|
this.getCountStatis ()
|
//当前农场种养品种
|
this.onLoad()
|
//本年农事操作记录
|
// this.getFarmingCount()
|
//农资库存
|
// this.StockCount()
|
|
},
|
//本年农事操作记录
|
getFarmingCount () {
|
var that = this
|
getFarmingCount(this.$farmId).then((res) => {
|
that.total = res.data.data
|
// that.total = 0;
|
if (that.total > 0) {
|
that.isFarmingDetail = true
|
}
|
})
|
},
|
//本年农事操作记录，分组统计
|
getFarmingStatis () {
|
var that = this
|
getFarmingStatis(this.$farmId).then((res) => {
|
that.farmingList = res.data.data
|
})
|
},
|
//农资库存
|
StockCount () {
|
var that = this
|
StockCount(this.$farmId).then((res) => {
|
that.stockList = res.data.data.filter((e)=>{
|
return e.val != 0
|
})
|
that.stockList.forEach((e)=>{
|
e.val = fixed.fixedNum(e.val)
|
})
|
})
|
},
|
//地块使用率统计
|
getCountStatis () {
|
var that = this
|
selectCount(this.farm.id).then((res) => {
|
var data = res.data.data
|
that.landInfo = data
|
that.landInfo.zarea = fixed.fixedNum(that.landInfo.zarea)
|
that.landInfo.sarea = fixed.fixedNum(that.landInfo.sarea)
|
})
|
},
|
handleChange (val) {
|
window.console.log(val)
|
},
|
//获取种植中的种养品
|
onLoad () {
|
var params = {
|
status: 1,
|
}
|
params['tenantId'] = this.userInfo.tenant_id
|
params['farmId'] = this.farm.id
|
getStrainCount(1, 100, Object.assign(params)).then((res) => {
|
const data = res.data.data.records
|
this.farmPlanList = data
|
this.farmPlanList.forEach((e)=>{
|
e.area = fixed.fixedNum(e.area)
|
})
|
})
|
|
getStrainCountYM(1, 100, Object.assign(params)).then((res) => {
|
const data = res.data.data.records
|
this.farmPlanListYM = data
|
this.farmPlanListYM.forEach((e)=>{
|
e.area = fixed.fixedNum(e.area)
|
})
|
})
|
},
|
//采收
|
recovery (data) {
|
this.recoveryVisible = true
|
this.$nextTick(() => {
|
this.$refs.recovery.init(data)
|
})
|
},
|
//结束种养
|
over(data) {
|
this.overVisible = true
|
this.$nextTick(() => {
|
this.$refs.over.initData(data,this.farm.id)
|
})
|
},
|
land () {
|
this.landVisible = true
|
this.$nextTick(() => {
|
this.$refs.land.init()
|
})
|
},
|
//种植
|
plant (item) {
|
this.plantVisible = true
|
this.$nextTick(() => {
|
this.$refs.plant.init(item)
|
})
|
},
|
//农事操作
|
farming () {
|
this.farmingVisible = true
|
this.$nextTick(() => {
|
this.$refs.farming.init()
|
})
|
},
|
//农资入库
|
stock () {
|
this.stockVisible = true
|
this.$nextTick(() => {
|
this.$refs.stock.init()
|
})
|
},
|
//本年农事操作明细
|
farmPlantDetail () {
|
const data = {
|
activeName: "tab2",
|
}
|
this.$router.push({
|
path: `/farmDetail`,
|
query: data,
|
})
|
},
|
stockDetail () {
|
this.$router.push({
|
path: `/stockmanage`,
|
})
|
},
|
//本年农事操作明细--有参
|
farmPlantDetails (item) {
|
const data = {
|
type: item.value,
|
activeName: "tab2",
|
}
|
this.$router.push({
|
path: `/farmDetail`,
|
query: data,
|
})
|
},
|
//农资库存点击事件
|
stockDetails (item) {
|
var type
|
if (item.name == "化肥") {
|
type = 0
|
}
|
if (item.name == "有机肥") {
|
type = 1
|
}
|
if (item.name == "杀虫剂") {
|
type = 2
|
}
|
if (item.name == "杀菌剂") {
|
type = 3
|
}
|
if (item.name == "饲料") {
|
type = 4
|
}
|
const data = {
|
type: type,
|
}
|
this.$router.push({
|
path: `/stockmanage`,
|
query: data,
|
})
|
},
|
//采收记录
|
recoveryDetail () {
|
const data = {
|
activeName: "tab1",
|
}
|
this.$router.push({
|
path: `/farmDetail`,
|
query: data,
|
})
|
},
|
//进入地图模式
|
goToMapModel () {
|
this.$router.push({
|
path: `/mapPattern`,
|
// query: row,
|
})
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scope>
|
.el-font-size {
|
font-size: 14px;
|
}
|
|
.home {
|
width: 100%;
|
// height: 100%;
|
display: flex;
|
flex-direction: row;
|
|
.left {
|
margin-left: 1%;
|
width: 75%;
|
height: 100%;
|
|
.farm-info {
|
width: 100%;
|
height: 30%;
|
background-color: #fff;
|
border-radius: 5px;
|
|
.farm-title {
|
padding-top: 20px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 24px;
|
font-weight: 550;
|
text-align: center;
|
}
|
|
.statis {
|
width: 100%;
|
display: flex;
|
|
.echarts-statis {
|
width: 20%;
|
height: 170px;
|
line-height: 170px;
|
margin: 0 auto;
|
margin-left: 90px;
|
// text-align: center;
|
padding-top: 30px;
|
}
|
|
.percentText {
|
position: relative;
|
left: -15.8%;
|
top: 77px;
|
width: 90px;
|
font-size: 16px;
|
text-align: center;
|
}
|
|
.avue-statis {
|
width: 60%;
|
height: 170px;
|
padding-top: 50px;
|
margin-left: -80px;
|
display: flex;
|
flex-direction: row;
|
|
.land-statis {
|
width: 33%;
|
margin: 3% 3%;
|
|
.land-num {
|
margin-top: 20px;
|
|
span {
|
font-size: 30px;
|
font-weight: 550;
|
color: #5abf78;
|
}
|
}
|
}
|
}
|
|
.map-view {
|
width: 20%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
|
img {
|
width: 90px;
|
height: 66px;
|
}
|
|
.title {
|
font-size: 13px;
|
color: #fff;
|
z-index: 999;
|
position: relative;
|
left: -70px;
|
top: 15px;
|
}
|
}
|
}
|
}
|
|
.farm-variety {
|
margin-top: 15px;
|
width: 100%;
|
min-height: 600px;
|
background-color: #fff;
|
border-radius: 5px;
|
|
.title {
|
padding-top: 20px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 24px;
|
font-weight: 550;
|
text-align: center;
|
}
|
|
.content {
|
width: 99%;
|
height: 630px;
|
margin: 0 auto;
|
|
word-wrap: break-word;
|
word-break: break-all;
|
|
.farm {
|
width: 168px;
|
height: 277px;
|
background-color: #f7f9fb;
|
border-radius: 5px;
|
margin-left: 30px;
|
margin-top: 30px;
|
float: left;
|
|
.farm-img {
|
width: 168px;
|
height: 168px;
|
|
.img {
|
width: 168px;
|
height: 168px;
|
border-radius: 8px 8px 0px 0px;
|
}
|
}
|
|
.cai {
|
text-align: center;
|
font-size: 18px;
|
font-weight: 550;
|
margin-top: 8px;
|
color: #5abf78;
|
}
|
|
.area {
|
text-align: center;
|
font-size: 14px;
|
margin-top: 5px;
|
color: #333333;
|
|
span {
|
font-size: 15px;
|
color: #333333;
|
}
|
}
|
|
.btn {
|
text-align: center;
|
margin-top: 8px;
|
}
|
}
|
}
|
}
|
|
.farm-bottom {
|
min-height: 50px;
|
}
|
}
|
|
.right {
|
width: 22%;
|
height: 100%;
|
margin-left: 1%;
|
|
.production {
|
width: 100%;
|
height: 30%;
|
background-color: #fff;
|
border-radius: 5px;
|
|
.title {
|
padding-top: 20px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 24px;
|
font-weight: 550;
|
text-align: center;
|
}
|
|
.btn {
|
width: 88%;
|
margin-left: 7%;
|
padding-top: 20px;
|
height: 200px;
|
word-wrap: break-word;
|
word-break: break-all;
|
|
// .production-button {
|
// display: flex;
|
// padding-top: 12px;
|
// height: 100px;
|
|
.button {
|
margin-left: 10px;
|
margin-top: 10px;
|
display: flex;
|
flex-direction: column;
|
float: left;
|
width: 140px;
|
height: 80px;
|
align-content: center;
|
justify-content: center;
|
border-radius: 3px;
|
cursor: pointer;
|
align-items: center;
|
|
.btn-img {
|
height: 32px;
|
line-height: 32px;
|
border-radius: 3px;
|
|
.img {
|
width: 32px;
|
height: 32px;
|
}
|
}
|
|
.text {
|
font-size: 18px;
|
color: #fff;
|
}
|
}
|
// }
|
}
|
}
|
|
.statistics {
|
margin-top: 15px;
|
width: 100%;
|
background-color: #fff;
|
border-radius: 5px;
|
height: auto;
|
// white-space: nowrap;
|
|
.title {
|
padding-top: 20px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 24px;
|
font-weight: 550;
|
text-align: center;
|
}
|
|
.farming-statis {
|
width: 94%;
|
margin: 0 auto;
|
height: 100px;
|
display: flex;
|
flex-direction: row;
|
// background-color: aqua;
|
|
.left {
|
width: 60%;
|
height: 100px;
|
|
.farm-text {
|
font-size: 20px;
|
margin-top: 20px;
|
}
|
.num {
|
font-size: 16px;
|
margin-top: 10px;
|
|
span {
|
font-size: 38px;
|
font-weight: 550;
|
color: #5abf78;
|
}
|
}
|
}
|
|
.right {
|
margin-left: 60px;
|
line-height: 100px;
|
height: 100px;
|
}
|
}
|
|
.farming-divider {
|
width: 94%;
|
margin: 0 auto;
|
}
|
|
.farming-details {
|
margin-top: -10px;
|
width: 100%;
|
height: auto;
|
word-wrap: break-word;
|
word-break: break-all;
|
//自适应高度
|
display: inline-block;
|
|
.detail {
|
background-color: #eff3f8;
|
cursor: pointer;
|
float: left;
|
width: 45%;
|
border-radius: 4px;
|
margin-left: 3%;
|
margin-top: 10px;
|
display: flex;
|
flex-flow: row nowrap;
|
justify-content: space-between;
|
height: 40px;
|
line-height: 40px;
|
|
.detail-title {
|
color: #707070;
|
font-size: 14px;
|
margin-left: 10px;
|
}
|
|
.detail-number {
|
color: #707070;
|
font-size: 14px;
|
margin-right: 15px;
|
|
span {
|
font-size: 18px;
|
font-weight: 550;
|
}
|
}
|
}
|
|
.detail:hover {
|
background: #e3f0ff;
|
}
|
}
|
}
|
|
.repertory {
|
margin-top: 15px;
|
width: 100%;
|
height: auto;
|
background-color: #fff;
|
border-radius: 5px;
|
|
.title {
|
padding-top: 20px;
|
height: 30px;
|
line-height: 30px;
|
text-align: center;
|
|
.repertory-title {
|
font-size: 24px;
|
font-weight: 550;
|
float: left;
|
padding-left: 35%;
|
}
|
|
.detail {
|
}
|
}
|
|
.repertory-centont {
|
width: 94%;
|
margin: 0 auto;
|
height: auto;
|
word-wrap: break-word;
|
word-break: break-all;
|
//自适应高度
|
display: inline-block;
|
|
.detail:hover {
|
background: #e3f0ff;
|
}
|
|
.detail {
|
background-color: #eff3f8;
|
cursor: pointer;
|
float: left;
|
border-radius: 4px;
|
margin-left: 3%;
|
margin-top: 10px;
|
display: flex;
|
flex-flow: row nowrap;
|
justify-content: space-between;
|
height: 50px;
|
line-height: 50px;
|
width: 100%;
|
|
.detail-title {
|
color: #707070;
|
font-size: 16px;
|
margin-left: 10px;
|
}
|
|
.detail-number {
|
color: #707070;
|
font-size: 14px;
|
margin-right: 15px;
|
|
span {
|
font-size: 18px;
|
font-weight: 550;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.avue-data-display .count {
|
color: #000 !important;
|
font-size: 28px !important;
|
}
|
}
|
</style>
|
