地块编辑

xiebin

2022-08-02 2c8f7d06ec1694667e0d03a76b36eceed5f3bdbb

地块编辑

 src/api/land/land.js

@@ -44,9 +44,7 @@
  return request({
    url: '/api/land/land/updateLandAr',
    method: 'post',
    params: {
      ...params,
    }
    data: params
  })
}


 src/views/land/LandDetail.vue

@@ -15,8 +15,9 @@
                <div class="edit">
                    <el-button @click="btnGrounpShow = !btnGrounpShow" icon="el-icon-menu"></el-button>

                    <div v-show="btnGrounpShow" class="btn-grounp" @click="DelLand(delId)">
                        <el-button>删除地块</el-button>
                    <div v-show="btnGrounpShow" class="btn-grounp">
                        <el-button @click="DelLand(delId)">删除地块</el-button>
                        <el-button size="small" @click="land">编辑地块</el-button>
                    </div>
                </div>
            </div>
@@ -56,6 +57,7 @@
            <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            <el-button class="save" type="success" @click="upLand()">保存</el-button>
        </el-dialog>
        <landUpdate v-if="landVisible" ref="landUpdate" id="landUpdate" @refreshOnLoad="openLandUpdate"></landUpdate>
    </div>
</template>

@@ -66,7 +68,8 @@
import recovery from "@/views/recovery/recovery.vue"
import stockUseInfo from "@/views/farm/stockUseInfo.vue"
import getMapDataInThere from "./getMapDataInThere.vue"
import { remove, update } from "@/api/land/land"
import {getList, remove, update} from "@/api/land/land"
import landUpdate from "./landUpdate"

export default {
    components: {
@@ -74,6 +77,7 @@
        farming,
        recovery,
        stockUseInfo,
        landUpdate,
        getMapDataInThere
    },
    data () {
@@ -90,6 +94,7 @@
            dic: "",
            formC: {},
            gradeBoxVisible1: false,
            landVisible: false,
            option2: {
                index: true,
                tip: false,
@@ -135,6 +140,21 @@
            .split(",")
    },
    methods: {
        //圈地
        land () {
          this.landVisible = true
          this.$nextTick(() => {
            this.$refs.landUpdate.init()
          })
        },
        openLandUpdate (page, params = {}) {
          console.log('11111111111refreshOnLoad')
          // getList(1, 10, Object.assign(params, this.query)).then(res => {
          //   const data = res.data.data
          //
          //   this.farmPlanList = data.records
          // })
        },
        mod (usePolygons) {
            this.gradeBoxVisible1 = true
            this.$refs.getMapData.draw(usePolygons)

 src/views/land/cs.vue

@@ -173,7 +173,6 @@
        onLoad (page, params = {}) {
            getList(1, 10, Object.assign(params, this.query)).then(res => {
                const data = res.data.data

                this.farmPlanList = data.records
            })
        },

 src/views/land/getMapDataInThere.vue

@@ -18,6 +18,12 @@
import MapInThere from "@/components/map/mainInThere.vue"
export default {
    name: "getMapData",
    props: {
      currentPolygons: {
        type: Array,
        default: []
      }
    },
    components: {
        MapInThere,
    },
@@ -38,6 +44,16 @@
                this.isCheck = false
            }
        },
      currentPolygons: {
          immediate: true,
        handler (newData, oldData) {
            console.log(newData, 5656)
            if (newData.length > 0) {

              this.draw(newData)
            }
        },
      }
    },
    data () {
        return {
@@ -64,6 +80,8 @@
    methods: {
        draw (usePolygons) {

          console.log(usePolygons, 456)

            let arr = []

            usePolygons.forEach(item => {

 src/views/land/landUpdate.vue

New file
@@ -0,0 +1,208 @@
<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">
            <!-- 地图插入 -->
            <template slot-scope="{ type, disabled }" slot="line">
                <getMapDataInThere :currentPolygons="form.landRange" ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
            </template>
        </avue-form>
    </el-dialog>
</template>

<script>

import { mapGetters } from "vuex"
import { getFarmList } from "@/api/farm/farm"
import { getDeptTree } from "@/api/system/dept"
import {update} from "@/api/land/land"
import website from '@/config/website'
import getMapDataInThere from "./getMapDataInThere.vue"

export default {
    components: {
        getMapDataInThere
    },
    data () {
        return {
            title: "编辑地块",
            form: {},
            option: {
                emptyBtn: false,
                submitText: "保存",
                gutter: 30,
                column: [
                    {
                        label: "地块名称",
                        prop: "landName",
                        rules: [{
                            required: true,
                            message: "请输入地块名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "所属农场",
                        prop: "farmId",
                        type: "tree",
                        dicData: [],
                        props: {
                            label: "farmName",
                            value: "id"
                        },
                        slot: true,
                        rules: [{
                            required: true,
                            message: "请选择所属农场",
                            trigger: "click"
                        }]
                    },
                    {
                        label: "地块类型",
                        type: "select",
                        prop: "landType",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        rules: [{
                            required: true,
                            message: "请选择地块类型",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "面积单位",
                        prop: "landUnit",
                        value: "0",
                        type: "select",
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                        },
                        dataType: "number",
                        span: 6,
                    },
                    {
                        label: "地块展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        span: 24,
                        formslot: true,
                    }
                ],
            },
            visible: false,
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
    },
    mounted () {
        this.initData(this.userInfo.tenant_id)
    },
    methods: {
        initData (tenantId) {
            // getDeptTree(tenantId).then(res => {        console.log(res)

            //   const column = this.findObject(this.option.column, "deptId");
            //   column.dicData = res.data.data;
            // });
            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 () {
            //清空面的数据
            this.$store.commit('clear_polygon')
            //计算当前时间
            this.visible = true
            console.log('land1111111111111:',this.$route.query)
            this.form.landName = this.$route.query.landName
            this.form.id = this.$route.query.id
            this.form.landArea = this.$route.query.landArea
            this.form.farmId = this.$route.query.farmId
            this.form.landUnit = this.$route.query.landUnit
            this.form.landType = this.$route.query.landType
            this.form.landRange = this.$route.query.landRange


          this.form.landRange = this.form.landRange.replace(/POLYGON\(\(/g, '')
          this.form.landRange = this.form.landRange.replace(/\)\)/g, '')
          this.form.landRange = this.form.landRange.split(',')

        },
        // 表单提交
        submit (row, loading) {
            row['deptId'] = this.userInfo.dept_id
            var that = this
            if (this.polygons.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                loading()
                return
            } 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
            }

            update(row).then(() => {
                  that.$emit("refreshOnLoad")
                  that.$refs.form.resetFields()
                  that.visible = false
                  this.$message({
                      type: "success",
                      message: "操作成功!"
                  })
                  done()
              }, error => {
                  loading()
                  window.console.log(error)
              })
        },
        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;
}
</style>