采收记录完善，结束完成，新增农产品种植，页面样式优化

Administrator

2022-05-18 dcd75a9a37d281f8aa5aabbeb76bd544dc08a4da

 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;