From 00a2a8e080d0822529c8b09fc5029ac6519fda16 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 01 Jun 2022 18:14:43 +0800
Subject: [PATCH] 新增溯源码二维码下载
---
src/views/wel/index.vue | 813 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 747 insertions(+), 66 deletions(-)
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index ee6a6c3..3a2e4df 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -1,101 +1,782 @@
<template>
<div class="home">
- <div class="left">
- <div class="farm-info">
- 农场概览
- </div>
- <div class="farm-variety">
- 当前种养品种
+ <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="right">
- <div class="production">生成管理</div>
- <div class="statistics">生成统计</div>
- <div class="repertory">农资库存</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";
-
- export default {
- name: "wel",
- data() {
- return {
+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;
+ });
},
- computed: {
- ...mapGetters(["userInfo"]),
+ //采收
+ recovery(data) {
+ this.recoveryVisible = true;
+ this.$nextTick(() => {
+ this.$refs.recovery.init(data);
+ });
},
- methods: {
- handleChange(val) {
- window.console.log(val);
- }
+ //结束种植
+ 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;
- }
+.el-font-size {
+ font-size: 14px;
+}
- .home{
- width: 100%;
+.home {
+ width: 100%;
+ // height: 100%;
+ display: flex;
+ flex-direction: row;
+
+ .left {
+ margin-left: 1%;
+ width: 75%;
height: 100%;
- display: flex;
- flex-direction: row;
- .left{
- margin-left: 1%;
- width: 71%;
- height: 100%;
-
+ .farm-info {
+ width: 100%;
+ height: 30%;
+ background-color: #fff;
+ border-radius: 5px;
- .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;
}
- .farm-variety{
- margin-top: 15px;
+ .statis {
width: 100%;
- height: 65%;
- background-color:#fff ;
- border-radius: 5px;
+ 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;
+ }
+ }
}
}
- .right{
- width: 26%;
- height: 100%;
- margin-left: 1%;
+ .farm-variety {
+ margin-top: 15px;
+ width: 100%;
+ min-height: 600px;
+ background-color: #fff;
+ border-radius: 5px;
- .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;
}
- .statistics{
- margin-top: 15px;
- width: 100%;
- height: 20%;
- background-color:#fff ;
- border-radius: 5px;
+
+ .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;
+ }
+ }
}
- .repertory{
- margin-top: 15px;
+ }
+
+ .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: 20%;
- background-color:#fff ;
- border-radius: 5px;
+ 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>
--
Gitblit v1.9.3