首页更新，新增采收页面

Administrator

2022-05-17 0d518fcfe85697544ec0d9e8991d832f13ab33f4

首页更新，新增采收页面

 package.json

@@ -23,6 +23,7 @@
        "ol": "^6.5.0",
        "olcs": "^2.12.0",
        "js-md5": "^0.7.3",
        "echarts": "^5.0.2",
        "mockjs": "^1.0.1-beta3",
        "node-gyp": "^5.0.6",
        "nprogress": "^0.2.0",

 src/main.js

@@ -27,6 +27,8 @@
import tenantPackage from './views/system/tenantpackage';

import Map from './components/map/main';
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;
Vue.component('Map', Map);

// 注册全局crud驱动

 src/views/farmplant/farmplant.vue

@@ -174,7 +174,7 @@
            label: "种植标准",
            prop: "plant",
            search:true,
            searchSpan:3,
            searchSpan:4,
            labelWidth:110,
            type: "select",
            dicData:[
@@ -208,7 +208,7 @@
            label: "种植方式",
            prop: "plantingWay",
            search:true,
            searchSpan:3,
            searchSpan:4,
            type: "select",
            labelWidth:110,
            dicData:[
@@ -234,7 +234,7 @@
            label: "作业方式",
            prop: "jobWay",
            search:true,
            searchSpan:3,
            searchSpan:4,
            labelWidth:110,
            type: "select",
            dicData:[
@@ -366,6 +366,25 @@
          //   ],
          //   display:false,
          // },
          {
            label: "种植状态",
            prop: "status",
            search:true,
            searchSpan:4,
            labelWidth:110,
            type: "select",
            dicData:[
              {
                label:"种植中",
                value:"1"
              },
              {
                label:"已结束",
                value:"2"
              },
            ],
            display:false,
          },
        ],
      },
      data: [],

 src/views/wel/index.vue

@@ -1,101 +1,466 @@
<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">
            <div id="alarmTypeProEcharts"></div>
            <div class="alarmTypeTotal">
              <div class="numAlarmType">
                <span>{{ alarmTypeTotal }}</span>
              </div>
              <div class="textAlarmType"><span>地块使用率</span></div>
            </div>
          </div>
          <div class="avue-statis">
            <avue-data-display :option="option"></avue-data-display>
          </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"><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>
            </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">
              <img src="" class="img" />
              <div class="text">圈地</div>
            </div>
            <div class="button">
              <img src="" class="img" />
              <div class="text">添加种养品种</div>
            </div>
          </div>
          <div class="production-button">
            <div class="button">
              <img src="" class="img" />
              <div class="text">农事操作</div>
            </div>
            <div class="button">
              <img src="" class="img" />
              <div class="text">农资入库</div>
            </div>
          </div>
          <div class="production-button">
            <div class="button">
              <img src="" class="img" />
              <div class="text">销售农产品</div>
            </div>
          </div>
        </div>
      </div>
      <div class="statistics">
        <div class="title">生产统计</div>
      </div>
      <div class="repertory">
        <div class="title">农资库存</div>
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <recovery v-if="recoveryVisible" ref="recovery"></recovery>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";

  export default {
    name: "wel",
    data() {
      return {
import { mapGetters } from "vuex";
import { getList } from "@/api/farmplant/farmplant";
import recovery from "./recovery.vue";
export default {
  components: {
    recovery,
  },
  name: "wel",
  data() {
    return {
      farmPlanList: [],
      recoveryVisible: false,
      option: {
        span: 8,
        data: [
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: 100,
            decimals: 2,
            title: "地块总面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: "3,000",
            decimals: 2,
            title: "当前种养面积",
          },
          {
            click: function (item) {
              alert(JSON.stringify(item));
            },
            count: "40,000",
            title: "当前种养品种",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    //地块使用率统计
    // this.getAlarmTypeProEcharts();
    this.onLoad();
  },
  methods: {
    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);
      }
    //预警类型占比统计
    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();
      //   });
      // });
    },
  };
  },
};
</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: 25%;
          height: 170px;
          line-height: 170px;
          margin: 0 auto;
        }

        .avue-statis {
          width: 75%;
          height: 170px;
          padding-top: 50px;
          text-align: center;
        }
      }
    }

    .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;
      }
      .repertory{
        margin-top: 15px;
        width: 100%;
        height: 20%;
        background-color:#fff ;
        border-radius: 5px;

      .content {
        width: 96%;
        margin: 0 auto;
        margin-top: 20px;
        display: flex;
        flex-direction: row;

        .farm {
          width: 150px;
          height: 180px;
          background-color: rgb(240, 230, 230);
          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;
            background-color: aqua;
            border-radius: 3px;
            cursor: pointer;

            .img {
              width: 20px;
              height: 20px;
              background-color: antiquewhite;
            }

            .text {
              font-size: 14px;
              margin-left: 5px;
              letter-spacing: 1px;
            }
          }
        }
      }
    }

    .statistics {
      margin-top: 15px;
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      min-height: 250px;

      .title {
        padding-top: 20px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 550;
        text-align: center;
      }
    }

    .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;
      }
    }
  }
}
</style>


 src/views/wel/recovery.vue

New file
@@ -0,0 +1,249 @@
<template>
  <el-dialog
    :title="title"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    :visible.sync="visible"
  >
    <avue-form ref="form" v-model="form" :option="option" @submit="submit">
    </avue-form>
  </el-dialog>
</template>

<script>

import { mapState } from "vuex";
import { getLandList } from "@/api/land/land";
import { getUserList } from "@/api/system/user";
export default {
  data() {
    return {
      title:"采收/捕捞",
      form: {},
      option: {
        emptyBtn: false,
        submitText: "保存",
        gutter: 30,
        column: [
          {
            label: "采收品种",
            prop: "farmName",
            span: 12,
            labelWidth: 145,
            rules: [
              {
                required: true,
                message: "请输入采收品种",
                trigger: "blur",
              },
            ],
          },
          {
            label: "采收地块",
            span: 12,
            labelWidth: 145,
            width: 110,
            prop: "landId",
            type:"tree",
            dicData: [],
            props: {
              label: "landName",
              value: "id"
            },
            rules: [
              {
                required: true,
                message: "请选择采收地块",
                trigger: "click",
              },
            ],
          },
          {
            label: "采收重量",
            prop: "farmArea",
            span: 12,
            labelWidth: 145,
            width: 110,
            rules: [
              {
                required: true,
                message: "请输入采收重量",
                trigger: "click",
              },
            ],
          },
          {
            label: "作业方式",
            prop: "jobWay",
            span: 12,
            labelWidth: 145,
            width: 110,
            type: "select",
            value:"0",
            dicData:[
              {
                label:"人工",
                value:"0"
              },
              {
                label:"机械",
                value:"1"
              },
            ],
            rules: [
              {
                required: true,
                message: "请选择作业方式",
                trigger: "click",
              },
            ],
          },
          {
            label: "采收时间",
            prop: "time",
            span: 12,
            labelWidth: 145,
            width: 110,
            type: "datetime",
            format: "yyyy-MM-dd HH:mm",
            valueFormat: "yyyy-MM-dd HH:mm",
            rules: [
              {
                required: true,
                message: "请选择采收时间",
                trigger: "click",
              },
            ],
          },
          {
            label: "采收产品",
            prop: "farmArea",
            span: 12,
            labelWidth: 145,
            width: 110,
            rules: [
              {
                required: true,
                message: "请输入采收产品",
                trigger: "click",
              },
            ],
          },
          {
            label: "操作人",
            prop: "operator",
            type: "tree",
            dicData: [],
            props: {
              label: "realName",
              value: "id",
            },
            span: 12,
            labelWidth: 145,
            width: 110,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                trigger: "click",
              },
            ],
          },
          {
            label: "产品等级",
            prop: "leave",
            span: 12,
            labelWidth: 145,
            width: 110,
            value:"0",
            type: "select",
            dicData:[
              {
                label:"一等品",
                value:"0"
              },
              {
                label:"二等品",
                value:"1"
              },
              {
                label:"三等品",
                value:"2"
              },
              {
                label:"四等品",
                value:"3"
              },
              {
                label:"五等品",
                value:"4"
              },
            ],
            rules: [
              {
                required: true,
                message: "请输入产品等级",
                trigger: "click",
              },
            ],
          },
          {
            label: "备注",
            prop: "farmArea",
            span: 24,
            type:"textarea",
            labelWidth: 145,
            width: 110,
            rules: [
              {
                required: false,
                message: "请输入备注",
                trigger: "click",
              },
            ],
          },
        ],
      },
      visible: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    //初始化
    init(data) {
      this.visible = true;
      var that = this;
      //获取农地数据
      getLandList(this.userInfo.user_id).then((res) => {
        if (res.data.code == 200) {
          var landIdcolumn = that.findObject(that.option.column, "landId");
          that.landList = res.data.data;
          landIdcolumn.dicData = res.data.data;
        }
      });
      //获取操作人
      const user = {
        tenantId: this.userInfo.tenant_id,
      };
      getUserList(user).then((res) => {
        if (res.data.code == 200) {
          var operatorcolumn = that.findObject(that.option.column, "operator");
          operatorcolumn.dicData = res.data.data;
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.dataForm["userId"] = this.userInfo.id;
      this.$refs["dataForm"].validate((valid) => {
      });
    },
  },
};
</script>