<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="landInfo.rate"
|
:stroke-width="15"
|
:width="150"
|
:color="customColor"
|
: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"
|
>{{ 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">
|
<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
|
>
|
</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">明细>></el-link>
|
</div>
|
</div>
|
<div class="repertory-centont">
|
<div class="detail">
|
<div class="detail-title">肥料</div>
|
<div class="detail-number">剩余库存 <span>1</span>公斤</div>
|
</div>
|
</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, getFarmingStatis } 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 {
|
farmingList: [],
|
isFarmingDetail: false,
|
landInfo: {},
|
customColor: "#5ABF78",
|
total: 0,
|
farmingCount: 0,
|
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();
|
//本年农事操作记录,分组
|
this.getFarmingStatis();
|
},
|
methods: {
|
//本年农事操作记录
|
getFarmingCount() {
|
var that = this;
|
getFarmingCount().then((res) => {
|
that.total = res.data.data;
|
// that.total = 0;
|
if (that.total > 0) {
|
that.isFarmingDetail = true;
|
}
|
});
|
},
|
//本年农事操作记录，分组统计
|
getFarmingStatis() {
|
var that = this;
|
getFarmingStatis().then((res) => {
|
that.farmingList = res.data.data;
|
});
|
},
|
//地块使用率统计
|
getCountStatis() {
|
var that = this;
|
selectCount().then((res) => {
|
var data = res.data.data;
|
that.landInfo = data;
|
});
|
},
|
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,
|
});
|
},
|
//本年农事操作明细--有参
|
farmPlantDetails(item) {
|
console.log(item,11111);
|
const data = {
|
type:item.value,
|
activeName: "tab2",
|
};
|
this.$router.push({
|
path: `/farmDetail`,
|
query: data,
|
});
|
},
|
//采收记录
|
recoveryDetail() {
|
const data = {
|
activeName: "tab1",
|
};
|
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: 20%;
|
height: 170px;
|
line-height: 170px;
|
margin: 0 auto;
|
margin-left: 90px;
|
// text-align: center;
|
padding-top: 30px;
|
}
|
|
.percentText {
|
position: relative;
|
left: -16%;
|
top: 57px;
|
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% 8%;
|
|
.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>
|
