<template>
|
<div class="home">
|
<div class="left">
|
<div class="farm-info">
|
<div class="farm-title">农场概览</div>
|
<div class="statis">
|
<div class="echarts-statis">
|
<el-progress
|
type="circle"
|
:percentage="100"
|
:stroke-width="15"
|
:width="150"
|
></el-progress>
|
</div>
|
<div class="avue-statis">
|
<avue-data-display :option="option"></avue-data-display>
|
</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"><img :src="item.url" class="img" /></div>
|
<div class="cai">{{ item.strainName }}</div>
|
<div class="area">种植面积：371.13亩</div>
|
<div class="btn">
|
<el-button plain size="small" @click="recovery(item)"
|
>采收</el-button
|
>
|
<el-button plain size="small" @click="over(item.id)"
|
>结束</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="production">
|
<div class="title">生产管理</div>
|
<div class="btn">
|
<div class="production-button">
|
<div class="button" style="background-color: #f1fae6" @click="land">
|
<div class="btn-img" style="background-color: #91CD4D">
|
<img src="../../../public/img/wel/land.png" class="img" />
|
</div>
|
<div class="text">圈地</div>
|
</div>
|
<div class="button" style="background-color: #edf9fe" @click="plant">
|
<div class="btn-img" style="background-color: #40C4FF">
|
<img src="../../../public/img/wel/plant.png" class="img" />
|
</div>
|
<div class="text">添加种养品种</div>
|
</div>
|
</div>
|
<div class="production-button">
|
<div class="button" style="background-color: #fbf0e9" @click="farming">
|
<div class="btn-img" style="background-color: #FFAC92">
|
<img src="../../../public/img/wel/farming.png" class="img" />
|
</div>
|
<div class="text">农事操作</div>
|
</div>
|
<div class="button" style="background-color: #ebf1fd" @click="stock">
|
<div class="btn-img" style="background-color: #80A6FA">
|
<img src="../../../public/img/wel/nongzi.png" class="img" />
|
</div>
|
<div class="text">农资入库</div>
|
</div>
|
</div>
|
<div class="production-button">
|
<div class="button" style="background-color: #eefaf1">
|
<div class="btn-img" style="background-color: #96DBAA">
|
<img src="../../../public/img/wel/xiaosou.png" class="img" />
|
</div>
|
<div class="text">销售农产品</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="statistics">
|
<div class="title">生产统计</div>
|
</div>
|
<div class="repertory">
|
<div class="title">农资库存</div>
|
</div>
|
</div>
|
<!-- 弹窗, 采收 -->
|
<recovery v-if="recoveryVisible" ref="recovery"></recovery>
|
<!-- 圈地 -->
|
<land v-if="landVisible" ref="land"></land>
|
<!-- 种养品 -->
|
<plant v-if="plantVisible" ref="plant" @refreshOnLoad="onLoad"></plant>
|
<!-- 农事操作 -->
|
<farming v-if="farmingVisible" ref="farming"></farming>
|
<!-- 农资入库 -->
|
<stock v-if="stockVisible" ref="stock"></stock>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { getList, update } from "@/api/farmplant/farmplant";
|
import recovery from "./recovery.vue";
|
import land from "./land.vue";
|
import plant from "./plant.vue";
|
import farming from "./farming.vue";
|
import stock from "./stock.vue";
|
export default {
|
components: {
|
recovery,
|
land,
|
plant,
|
farming,
|
stock
|
},
|
name: "wel",
|
data() {
|
return {
|
farmPlanList: [],
|
recoveryVisible: false,
|
landVisible: false,
|
plantVisible: false,
|
farmingVisible: false,
|
stockVisible: false,
|
option: {
|
span: 8,
|
data: [
|
{
|
click: function (item) {
|
alert(JSON.stringify(item));
|
},
|
count: 100,
|
decimals: 2,
|
title: "地块总面积",
|
},
|
{
|
click: function (item) {
|
alert(JSON.stringify(item));
|
},
|
count: "3,000",
|
decimals: 2,
|
title: "当前种养面积",
|
},
|
{
|
click: function (item) {
|
alert(JSON.stringify(item));
|
},
|
count: "40,000",
|
title: "当前种养品种",
|
},
|
],
|
},
|
};
|
},
|
computed: {
|
...mapGetters(["userInfo"]),
|
},
|
created() {
|
//地块使用率统计
|
this.onLoad();
|
},
|
methods: {
|
handleChange(val) {
|
window.console.log(val);
|
},
|
//获取种植中的种养品
|
onLoad() {
|
var params = {
|
status: 1,
|
};
|
getList(1, 10, Object.assign(params)).then((res) => {
|
const data = res.data.data;
|
this.farmPlanList = data.records;
|
});
|
},
|
//采收
|
recovery(data) {
|
this.recoveryVisible = true;
|
this.$nextTick(() => {
|
this.$refs.recovery.init(data);
|
});
|
},
|
//结束种植
|
over(id) {
|
var that = this;
|
this.$confirm("确定结束当前种植的农产品?", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
const data = {
|
id: id,
|
status: 2,
|
};
|
return update(data);
|
})
|
.then(() => {
|
that.onLoad();
|
this.$message({
|
type: "success",
|
message: "操作成功!",
|
});
|
});
|
},
|
//圈地
|
land() {
|
this.landVisible = true;
|
this.$nextTick(() => {
|
this.$refs.land.init();
|
});
|
},
|
//种植
|
plant() {
|
this.plantVisible = true;
|
this.$nextTick(() => {
|
this.$refs.plant.init();
|
});
|
},
|
//农事操作
|
farming() {
|
this.farmingVisible = true;
|
this.$nextTick(() => {
|
this.$refs.farming.init();
|
});
|
},
|
//农资入库
|
stock() {
|
this.stockVisible = true;
|
this.$nextTick(() => {
|
this.$refs.stock.init();
|
});
|
},
|
},
|
};
|
</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: 25%;
|
height: 170px;
|
line-height: 170px;
|
margin: 0 auto;
|
margin-left: 50px;
|
text-align: center;
|
padding-top: 30px;
|
}
|
|
.avue-statis {
|
width: 75%;
|
height: 170px;
|
padding-top: 50px;
|
text-align: center;
|
}
|
}
|
}
|
|
.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: 96%;
|
margin: 0 auto;
|
margin-top: 20px;
|
display: flex;
|
flex-direction: row;
|
|
.farm {
|
width: 150px;
|
height: 180px;
|
background-color: #F7F9FB;
|
border-radius: 5px;
|
margin-left: 20px;
|
|
.farm-img {
|
width: 100px;
|
height: 86px;
|
margin: 0 auto;
|
text-align: center;
|
|
.img {
|
width: 50px;
|
height: 50px;
|
border-radius: 100px;
|
margin-top: 20px;
|
}
|
}
|
|
.cai {
|
text-align: center;
|
font-size: 16px;
|
}
|
|
.area {
|
text-align: center;
|
font-size: 14px;
|
margin-top: 5px;
|
}
|
|
.btn {
|
text-align: center;
|
margin-top: 8px;
|
}
|
}
|
}
|
}
|
}
|
|
.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 {
|
padding-top: 20px;
|
height: 200px;
|
|
.production-button {
|
display: flex;
|
padding-top: 12px;
|
height: 50px;
|
|
.button {
|
margin-left: 20px;
|
display: flex;
|
flex-direction: row;
|
width: 150px;
|
height: 50px;
|
line-height: 50px;
|
align-content: center;
|
justify-content: center;
|
border-radius: 3px;
|
cursor: pointer;
|
|
.btn-img{
|
height: 25px;
|
line-height: 25px;
|
margin-top: 12px;
|
border-radius: 3px;
|
|
|
.img {
|
width: 25px;
|
height: 25px;
|
z-index: 999;
|
}
|
}
|
|
|
|
.text {
|
font-size: 14px;
|
margin-left: 5px;
|
letter-spacing: 1px;
|
}
|
}
|
}
|
}
|
}
|
|
.statistics {
|
margin-top: 15px;
|
width: 100%;
|
background-color: #fff;
|
border-radius: 5px;
|
min-height: 250px;
|
|
.title {
|
padding-top: 20px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 24px;
|
font-weight: 550;
|
text-align: center;
|
}
|
}
|
|
.repertory {
|
margin-top: 15px;
|
width: 100%;
|
min-height: 80;
|
background-color: #fff;
|
border-radius: 5px;
|
|
.title {
|
padding-top: 20px;
|
height: 30px;
|
line-height: 30px;
|
font-size: 24px;
|
font-weight: 550;
|
text-align: center;
|
}
|
}
|
}
|
}
|
</style>
|
