<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="countStatis.rate"
|
:stroke-width="15"
|
:width="150"
|
:show-text="false"
|
></el-progress>
|
</div>
|
<div class="percentText">
|
<p>地块使用率</p>
|
<p style="position: relative;top:-12px;"><span style="font-size:32px;font-weight: 550;margin-top:-10px">{{ countStatis.rate || 0 }}</span>%</p>
|
</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">种植面积：{{ item.area }}</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 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">
|
<el-divider></el-divider>
|
</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 { getFarmingCount } from "@/api/farm/farmingrecord";
|
import { selectCount } from "@/api/land/land";
|
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 {
|
total: 0,
|
farmingCount:0,
|
countStatis: {},
|
farmPlanList: [],
|
recoveryVisible: false,
|
landVisible: false,
|
plantVisible: false,
|
farmingVisible: false,
|
stockVisible: false,
|
option: {
|
span: 8,
|
data: [],
|
},
|
};
|
},
|
computed: {
|
...mapGetters(["userInfo"]),
|
},
|
created() {
|
//地块使用率统计
|
this.getCountStatis();
|
//采收列表
|
this.onLoad();
|
//本年农事操作记录
|
this.getFarmingCount();
|
},
|
methods: {
|
//本年农事操作记录
|
getFarmingCount(){
|
var that = this;
|
getFarmingCount().then((res)=>{
|
that.total = res.data.data;
|
})
|
},
|
//地块使用率统计
|
getCountStatis() {
|
var that = this;
|
selectCount().then((res) => {
|
var data = res.data.data;
|
that.countStatis = data;
|
that.option.data.push(
|
{
|
click: function (item) {
|
alert(JSON.stringify(item));
|
},
|
count: data.zarea + "亩",
|
decimals: 2,
|
title: "地块总面积",
|
},
|
{
|
click: function (item) {
|
alert(JSON.stringify(item));
|
},
|
count: data.sarea + "亩",
|
decimals: 2,
|
title: "当前种养面积",
|
},
|
{
|
click: function (item) {
|
alert(JSON.stringify(item));
|
},
|
count: data.num + "种",
|
title: "当前种养品种",
|
}
|
);
|
});
|
},
|
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();
|
});
|
},
|
//本年农事操作明细
|
farmPlantDetail() {
|
const data = {
|
activeName: "tab2",
|
};
|
this.$router.push({
|
path: `/farmDetail`,
|
query: data,
|
});
|
},
|
},
|
};
|
</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: 90px;
|
text-align: center;
|
padding-top: 30px;
|
}
|
|
.percentText {
|
position: relative;
|
left: -15.0%;
|
top: 57px;
|
width: 90px;
|
font-size: 16px;
|
text-align: center;
|
}
|
|
.avue-statis {
|
width: 75%;
|
height: 170px;
|
padding-top: 50px;
|
text-align: center;
|
margin-left: -80px;
|
}
|
}
|
}
|
|
.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: 200px;
|
|
.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: 36px;
|
font-weight: 550;
|
}
|
}
|
}
|
|
.right {
|
margin-left: 60px;
|
line-height: 100px;
|
height: 100px;
|
}
|
}
|
|
.farming-divider{
|
width: 94%;
|
margin: 0 auto;
|
}
|
}
|
|
.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;
|
}
|
}
|
}
|
|
.avue-data-display .count {
|
color: #000 !important;
|
font-size: 28px !important;
|
}
|
}
|
</style>
|
