农事操作隐藏后四个，地图模式2d改为3d

guoshilong

2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23

 src/views/wel/land.vue

@@ -5,311 +5,307 @@
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    top="10vh"
    :visible.sync="visible"
  >
    <avue-form ref="form" v-model="form" :option="option" @submit="submit">
      <!-- 地图插入 -->
      <template slot-scope="{ type, disabled }" slot="line">
        <!-- <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere> -->
      </template>
    </avue-form>

    <div class="map">
      <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
    </div>
  </el-dialog>
</template>

<script>

import { mapState } from "vuex";
import { mapGetters } from "vuex";
import { getLandList } from "@/api/land/land";
import { getUserList } from "@/api/system/user";
import { getDetail } from "@/api/farm/farm";
import { getStrainList } from "@/api/farmplant/strain";
import { save } from "@/api/farmplant/recovery";
import { add } from "@/api/land/land";
import getMapDataInThere from "./getMapDataInThere.vue";
import { getFarmList } from "@/api/farm/farm";
export default {
  components: {
    getMapDataInThere,
  },
  data() {
    return {
      title:"采收/捕捞",
      title: "新增地块",
      form: {},
      option: {
        emptyBtn: false,
        submitText: "保存",
        submitBtn: false,
        gutter: 30,
        column: [
          {
            label: "采收品种",
            prop: "strainId",
            span: 12,
            label: "地块名称",
            prop: "landName",
            maxlength:30,
            rules: [
              {
                required: true,
                message: "请输入地块名称",
                trigger: ["blur","change"],
              },
            ],
          },
          {
            label: "所属农场",
            prop: "farmId",
            type: "tree",
            dicData: [],
            props: {
              label: "strainName",
              value: "id"
            },
            labelWidth: 145,
            rules: [
              {
                required: true,
                message: "请输入采收品种",
                trigger: "blur",
              },
            ],
            disabled:true,
          },
          {
            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: "weight",
            tip: '公斤',
            span: 12,
            labelWidth: 145,
            width: 110,
            controls:false,
            type:'number',
            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",
              label: "farmName",
              value: "id",
            },
            span: 12,
            labelWidth: 145,
            width: 110,
            disabled: true,
            slot: true,
            rules: [
              {
                required: true,
                message: "请输入操作人",
                message: "请选择所属农场",
                trigger: "click",
              },
            ],
          },
          {
            label: "产品等级",
            prop: "leaves",
            span: 12,
            labelWidth: 145,
            width: 110,
            value:"0",
            label: "地块类型",
            type: "select",
            dicData:[
              {
                label:"一等品",
                value:"0"
              },
              {
                label:"二等品",
                value:"1"
              },
              {
                label:"三等品",
                value:"2"
              },
              {
                label:"四等品",
                value:"3"
              },
              {
                label:"五等品",
                value:"4"
              },
            ],
            prop: "landType",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            dataType: "number",
            rules: [
              {
                required: true,
                message: "请输入产品等级",
                trigger: "click",
                message: "请选择地块类型",
                trigger: ["blur","change"],
              },
            ],
          },
          {
            label: "备注",
            prop: "remark",
            span: 24,
            type:"textarea",
            labelWidth: 145,
            width: 110,
            label: "面积",
            prop: "landArea",
            rules: [
              {
                required: false,
                message: "请输入备注",
                trigger: "click",
                required: true,
                message: "请输入面积",
                trigger: ["blur","change"],
              },
            ],
            span: 6,
            type: "number",
            controls: false,
          },
          {
            label: "面积单位",
            prop: "landUnit",
            type: "select",
            value: "0",
            dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
            props: {
              label: "dictValue",
              value: "dictKey",
            },
            rules: [
              {
                required: true,
                message: "请选择面积单位",
                trigger: ["blur","change"],
              },
            ],
            dataType: "number",
            span: 6,
          },
          // {
          //   label: "地块展示",
          //   labelWidth: "0",
          //   prop: "line",
          //   className: "mapClass",
          //   span: 24,
          //   formslot: true,
          // }
        ],
      },
      url: "",
      landUrl: "",
      polygon: [],
      area: "",
      visible: false,
    };
  },
  created() {
    this.url =
      this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage";
  },
  watch: {
    landUrl: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.$refs.form.submit();
        }
      },
    },
    "form.landName": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
    "form.landType": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
    "form.landArea": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
    "form.landUnit": {
      handler(newVal, oldVal) {
        this.landUrl = "";
      },
    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    ...mapGetters([
      "userInfo",
      "permission",
      "polygons",
      "$farmId",
      "drawMapUrlBase",
    ]),
  },
  mounted() {
    this.initData(this.userInfo.tenant_id);
    window.addEventListener("message", this.handleMessage);
  },
  methods: {
    //计算当前时间
    getNowTime(){
        var date = new Date();
        //年 getFullYear()：四位数字返回年份
        var year = date.getFullYear();  //getFullYear()代替getYear()
        //月 getMonth()：0 ~ 11
        var month = date.getMonth() + 1;
        //日 getDate()：(1 ~ 31)
        var day = date.getDate();
        //时 getHours()：(0 ~ 23)
        var hour = date.getHours();
        //分 getMinutes()： (0 ~ 59)
        var minute = date.getMinutes();
        //秒 getSeconds()：(0 ~ 59)
        var second = date.getSeconds();
        //赋值
        this.form['time'] = year + '-' 
                          + this.addZero(month) + '-' 
                          + this.addZero(day) + ' ' 
                          + this.addZero(hour) + ':' 
                          + this.addZero(minute);
    handleMessage(event) {
      if (Number.isFinite(event.data)) {
        this.form.landArea = (event.data * 0.0015).toFixed(2);
      }

      if (Object.prototype.toString.call(event.data) === "[object Object]") {
        var obj = event.data;
        this.polygon = obj.polygons;
        this.landUrl = obj.url;
      }
    },
    //小于10的拼接上0字符串
    addZero(s) {
      return s < 10 ? ('0' + s) : s;
    initData(tenantId) {
      const data = {
        deptId: this.userInfo.dept_id,
      };
      getFarmList(data).then((res) => {
        const column = this.findObject(this.option.column, "farmId");
        column.dicData = res.data.data;
      });
    },
    //初始化
    init(data) {
      this.form = {
        farmPlantId:data.id,
        strainId:data.strainId,
        landId:data.landId,
        weight:data.weight,
        leaves:'0',
        jobWay:data.jobWay,
        operator:data.operator,
        remark:''
      };
      this.form['operator'] = this.userInfo.user_id;
    init() {
      //计算当前时间
      this.getNowTime();
      this.form.landArea = 0
      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;
        }
      });
      //获取农产品数据
      getStrainList(0).then((res)=>{
          if(res.data.code==200){
              var strainId = that.findObject(that.option.column,"strainId");
              strainId.dicData = res.data.data;
          }
      this.$nextTick(()=>{
        this.$refs.form.clearValidate()
      })
      this.form.farmId = this.$farmId;
      this.form.landName = ""
      this.form.landType = ""
      getDetail(this.form.farmId).then(res=>{
        this.farmInfo = res.data.data
        this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage&longitude="+this.farmInfo.longitude+"&latitude="+this.farmInfo.latitude;
      })
    },
    // 表单提交
    submit(row,loading,done) {
    submit(row, done) {
      var that = this;
      row.time = row.time + ":00";
      save(row).then(

      // if (this.polygons.length == 0) {
      //   //没有面的数据
      //   this.$refs.getMapData.isCheck = true;
      //   done();
      // } else {
      //   //如果有值，空间坐标转换
      //   let pol = this.polygons;
      //   let polLength = this.polygons.length - 1;
      //   let usePolygons = "";
      //   for (let k in pol) {
      //     usePolygons += pol[k].lng + "," + pol[k].lat;
      //     if (k != polLength) {
      //       usePolygons += ";";
      //     }
      //   }
      //   //设置坐标点
      //   row.userId = this.userInfo.user_id;
      //   row.landRange = usePolygons;
      // }
      var poly = [];
      if (this.polygon.length != 0) {
        this.polygon.forEach((e) => {
          poly.push({
            lng: e[0],
            lat: e[1],
          });
        });
        this.polygon = poly;
      }

      if (this.polygon.length == 0) {
        //没有面的数据
        // this.$refs.getMapData.isCheck = true
        // loading()
      } else {
        //如果有值，空间坐标转换
        let pol = this.polygon;
        let polLength = this.polygon.length - 1;
        let usePolygons = "";
        for (let k in pol) {
          usePolygons += pol[k].lng + "," + pol[k].lat;
          if (k != polLength) {
            usePolygons += ";";
          }
        }
        //设置坐标点
        row.userId = this.userInfo.user_id;
        row.landRange = usePolygons;
      }

      row["tenantId"] = this.userInfo.tenant_id;
      row["deptId"] = this.userInfo.dept_id;
      row["url"] = this.landUrl;
      // row['landArea'] = this.area

      if (row.landArea < 0) {
        this.$message.warning("地块面积不能为负数");
        done();
        return;
      }

      add(row).then(
        () => {
          this.$refs.form.resetFields();
          that.$refs.form.resetFields();
          this.form.landUnit = "0";
          that.visible = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
           done();
          this.$emit("refreshOnLoad");
          done();
        },
        (error) => {
          done();
@@ -317,6 +313,26 @@
        }
      );
    },
    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
  },
};
</script>
<style lang="scss" scoped>
.mapClass div label {
  display: none;
}

#getMapData {
  width: 90%;
  position: relative;
  height: 400px;
  top: 10px;
  left: 90px;
}
.map {
  height: 450px;
}
</style>