地块添加修改显示天地图

guoshilong

2022-09-02 bcb6af1fa7973001a43bb08a2d7a8f96e81bc5e5

 src/views/land/landUpdate.vue

@@ -4,15 +4,20 @@
        :modal-append-to-body="false"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="60%"
        width="80%"
        top="10vh"
        :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>
                <!-- <getMapDataInThere :currentPolygons="form.landRange" 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>

@@ -37,6 +42,7 @@
            option: {
                emptyBtn: false,
                submitText: "保存",
                submitBtn:false,
                gutter: 30,
                farmName:'',
                column: [
@@ -98,27 +104,49 @@
                        dataType: "number",
                        span: 6,
                    },
                    {
                        label: "地块展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        span: 24,
                        formslot: true,
                    }
                    // {
                    //     label: "地块展示",
                    //     labelWidth: "0",
                    //     prop: "line",
                    //     className: "mapClass",
                    //     span: 24,
                    //     formslot: true,
                    // }
                ],
            },
            url:"",
            landUrl:"",
            polygon:[],
            area:"",
            visible: false,
        }
    },
    watch:{
        "landUrl":{
            handler(newVal,oldVal){
                this.$refs.form.submit()
            }
        }
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
        ...mapGetters(["userInfo", "permission", "polygons","drawMapUrlBase"]),
    },
    mounted () {
        this.initData(this.userInfo.tenant_id)
        window.addEventListener('message', this.handleMessage)
    },
    methods: {
        handleMessage(event) {
            if(event.type){
                var obj = event.data
                this.polygon = obj.polygons
                this.landUrl =  obj.url
                this.area = obj.area.toFixed(2) 

            }
        },
        initData (tenantId) {
            
            const data = {
                deptId: this.userInfo.dept_id
            }
@@ -129,6 +157,7 @@
        },
        //初始化
        init () {
            this.url = this.drawMapUrlBase+"/revamp?type=1&status=manage&position="+this.$route.query.landRange
            //清空面的数据
            this.$store.commit('clear_polygon')
            //计算当前时间
@@ -145,22 +174,35 @@

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




        },
        // 表单提交
        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 {


            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) {
                //如果有值，空间坐标转换
                let pol = this.polygons
                let polLength = this.polygons.length - 1
                let pol = this.polygon
                let polLength = this.polygon.length - 1
                let usePolygons = ""
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
@@ -171,8 +213,11 @@
                //设置坐标点
                row.userId = this.userInfo.user_id
                row.landRange = usePolygons
            }

                row['url'] = this.landUrl
                row['landArea'] = this.area

            }
            update(row).then(() => {
                that.$emit("refreshOnLoad")
                that.$refs.form.validate((vaild,done)=>{
@@ -183,19 +228,21 @@
                          message: "操作成功!"
                        })
                      done()
                      this.form.landRange = this.$route.query.landRange
                      this.form.dica = row.$landUnit
                      this.form.dic = row.$landType
                      this.form.deptname = row.$farmId

                      var arr = [];
                      this.$store.state.tags.tagList.forEach((item) => {
                        if (item.label != "地块详情") {
                          arr.push(item);
                        }
                      });
                      this.$store.state.tags.tagList = arr;
                      this.$router.replace({  path: `/LandDetail`, query: this.form  });
                    //   this.form.landRange = this.$route.query.landRange
                    //   this.form.dica = row.$landUnit
                    //   this.form.dic = row.$landType
                    //   this.form.deptname = row.$farmId

                    //   var arr = [];
                    //   this.$store.state.tags.tagList.forEach((item) => {
                    //     if (item.label != "地块详情") {
                    //       arr.push(item);
                    //     }
                    //   });
                    //   this.$store.state.tags.tagList = arr;
                    //   this.$router.replace({  path: `/land`, query: this.form  });
                    this.$router.go(-1)
                    }

                })
@@ -224,4 +271,7 @@
    top: 10px;
    left: 90px;
}
.map{
    height: 450px;
}
</style>