From dcd75a9a37d281f8aa5aabbeb76bd544dc08a4da Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 18 May 2022 19:04:34 +0800
Subject: [PATCH] 采收记录完善，结束完成，新增农产品种植，页面样式优化
---
src/views/wel/index.vue | 258 +++++++++++++++++++++++++--------------------------
1 files changed, 126 insertions(+), 132 deletions(-)
diff --git a/src/views/wel/index.vue b/src/views/wel/index.vue
index 9a71724..5903f13 100644
--- a/src/views/wel/index.vue
+++ b/src/views/wel/index.vue
@@ -5,13 +5,12 @@
<div class="farm-title">农场概览</div>
<div class="statis">
<div class="echarts-statis">
- <div id="alarmTypeProEcharts"></div>
- <div class="alarmTypeTotal">
- <div class="numAlarmType">
- <span>{{ alarmTypeTotal }}</span>
- </div>
- <div class="textAlarmType"><span>地块使用率</span></div>
- </div>
+ <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>
@@ -22,12 +21,16 @@
<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="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">结束</el-button>
+ <el-button plain size="small" @click="recovery(item)"
+ >采收</el-button
+ >
+ <el-button plain size="small" @click="over(item.id)"
+ >结束</el-button
+ >
</div>
</div>
</div>
@@ -38,28 +41,38 @@
<div class="title">生产管理</div>
<div class="btn">
<div class="production-button">
- <div class="button">
- <img src="" class="img" />
+ <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">
- <img src="" class="img" />
+ <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">
- <img src="" class="img" />
+ <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">
- <img src="" class="img" />
+ <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">
- <img src="" class="img" />
+ <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>
@@ -72,24 +85,44 @@
<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 } from "@/api/farmplant/farmplant";
+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: [
@@ -125,7 +158,6 @@
},
created() {
//地块使用率统计
- // this.getAlarmTypeProEcharts();
this.onLoad();
},
methods: {
@@ -143,112 +175,62 @@
});
},
//采收
- recovery(data){
+ recovery(data) {
this.recoveryVisible = true;
this.$nextTick(() => {
this.$refs.recovery.init(data);
});
},
- //预警类型占比统计
- getAlarmTypeProEcharts(data) {
- // selAlarmDayAveragePro(data).then((res) => {
- // var that = this;
- // //计算总和
- // var data = [];
- // var startDate = this.dateTime[0];
- // var endDate = this.dateTime[1];
- // data.push(
- // { value: res.data.data[0], name: "一键求助" },
- // { value: res.data.data[1], name: "违禁品" },
- // { value: res.data.data[2], name: "红色健康码" },
- // { value: res.data.data[3], name: "体温异常" }
- // );
- // let echarts = require("echarts");
- // let myChart = echarts.init(
- // document.getElementById("alarmTypeProEcharts")
- // );
- // myChart.on("click", function (params) {
- // var data = [];
- // if (params.name == "一键求助") {
- // data.push({
- // startTime: startDate,
- // endTime: endDate,
- // waringType: "紧急求救",
- // });
- // window.parent.handleStartAlarm(data);
- // }
- // if (params.name == "违禁品") {
- // data.push({
- // startTime: startDate,
- // endTime: endDate,
- // decisioDiagramResult: "contraband",
- // });
- // window.parent.handleStartParcelKind(data);
- // }
- // if (params.name == "红色健康码") {
- // data.push({
- // startTime: startDate,
- // endTime: endDate,
- // type: 3,
- // });
- // window.parent.handleStartHealthcode(data);
- // }
- // if (params.name == "体温异常") {
- // data.push({
- // startTime: startDate,
- // endTime: endDate,
- // status: 1,
- // });
- // window.parent.handleStartAnimalHeat(data);
- // }
- // });
- // var colors = ["#FF9836", "#3fa1ff", "#F34A4A", "#8058A5"];
- // let option = {
- // color: colors,
- // title: {
- // textStyle: {
- // fontWeight: "normal",
- // fontSize: 16,
- // color: "#000",
- // },
- // left: "1%",
- // top: 25,
- // textAlign: "left",
- // text: "预警类型占比",
- // },
- // tooltip: {
- // trigger: "item",
- // },
- // grid: {
- // left: "1%",
- // right: "10%",
- // bottom: "5%",
- // top: "25%",
- // containLabel: true,
- // },
- // series: [
- // {
- // type: "pie",
- // radius: ["43%", "60%"],
- // center: ["45%", "53%"],
- // avoidLabelOverlap: false,
- // label: {
- // show: false,
- // position: "center",
- // },
- // labelLine: {
- // show: false,
- // },
- // data: data,
- // },
- // ],
- // };
- // myChart.setOption(option);
- // //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
- // window.addEventListener("resize", function () {
- // myChart.resize();
- // });
- // });
+ //结束种植
+ 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();
+ });
},
},
};
@@ -294,6 +276,9 @@
height: 170px;
line-height: 170px;
margin: 0 auto;
+ margin-left: 50px;
+ text-align: center;
+ padding-top: 30px;
}
.avue-statis {
@@ -331,7 +316,7 @@
.farm {
width: 150px;
height: 180px;
- background-color: rgb(240, 230, 230);
+ background-color: #F7F9FB;
border-radius: 5px;
margin-left: 20px;
@@ -341,7 +326,7 @@
margin: 0 auto;
text-align: center;
- .img{
+ .img {
width: 50px;
height: 50px;
border-radius: 100px;
@@ -407,16 +392,25 @@
line-height: 50px;
align-content: center;
justify-content: center;
- background-color: aqua;
border-radius: 3px;
cursor: pointer;
- .img {
- width: 20px;
- height: 20px;
- background-color: antiquewhite;
+ .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;
--
Gitblit v1.9.3