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

guoshilong

2022-11-08 082613d446e29e4ec1c16bfaa52345106a498b23

 src/views/land/landAdd.vue

@@ -1,42 +1,40 @@
<template>
    <el-dialog
        :title="title"
        :modal-append-to-body="false"
        :append-to-body="true"
        :close-on-click-modal="false"
        width="80%"
        :visible.sync="visible"
        top="10vh"
    >
        <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>
  <el-dialog
    :title="title"
    :modal-append-to-body="false"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="60%"
    :visible.sync="visible"
    top="10vh"
  >
    <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 { mapGetters } from "vuex"
import { getFarmList } from "@/api/farm/farm"
import { getFarmList, getDetail } from "@/api/farm/farm"
import { getDeptTree } from "@/api/system/dept"
import { add } from "@/api/land/land"
import website from '@/config/website'
import domtoimage from 'dom-to-image'
import h2 from 'html2canvas'
import website from "@/config/website"
import domtoimage from "dom-to-image"
// import h2 from "html2canvas";
import getMapDataInThere from "./getMapDataInThere.vue"
import { number } from "echarts"
// import canvas2Image from 'canvas2Image'

export default {
    components: {
        getMapDataInThere
        getMapDataInThere,
    },
    data () {
        return {
@@ -45,35 +43,40 @@
            option: {
                emptyBtn: false,
                submitText: "保存",
                submitBtn:false,
                submitBtn: false,
                gutter: 30,
                column: [
                    {
                        label: "地块名称",
                        prop: "landName",
                        rules: [{
                            required: true,
                            message: "请输入地块名称",
                            trigger: "blur"
                        }]
                        maxlength:30,
                        rules: [
                            {
                                required: true,
                                message: "请输入地块名称",
                                trigger: ["blur","change"],
                            },
                        ],
                    },
                    {
                        label: "所属农场",
                        prop: "farmId",
                        type: "tree",
                        value:"",
                        value: "",
                        dicData: [],
                        props: {
                            label: "farmName",
                            value: "id"
                            value: "id",
                        },
                        disabled:true,
                        disabled: true,
                        slot: true,
                        rules: [{
                            required: true,
                            message: "请选择所属农场",
                            trigger: "click"
                        }]
                        rules: [
                            {
                                required: true,
                                message: "请选择所属农场",
                                trigger: "click",
                            },
                        ],
                    },
                    {
                        label: "地块类型",
@@ -82,14 +85,30 @@
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=land",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                            value: "dictKey",
                        },
                        dataType: "number",
                        rules: [{
                            required: true,
                            message: "请选择地块类型",
                            trigger: "blur"
                        }]
                        rules: [
                            {
                                required: true,
                                message: "请选择地块类型",
                                trigger: ["blur","change"],
                            },
                        ],
                    },
                    {
                        label: "面积",
                        prop: "landArea",
                        rules: [
                            {
                                required: true,
                                message: "请输入面积",
                                trigger: ["blur","change"],
                            },
                        ],
                        span: 6,
                        type: "number",
                        controls: false,
                    },
                    {
                        label: "面积单位",
@@ -99,13 +118,15 @@
                        dicUrl: "/api/blade-system/dict-biz/dictionary?code=landunit",
                        props: {
                            label: "dictValue",
                            value: "dictKey"
                            value: "dictKey",
                        },
                        rules: [{
                            required: true,
                            message: "请选择面积单位",
                            trigger: "click"
                        }],
                        rules: [
                            {
                                required: true,
                                message: "请选择面积单位",
                                trigger: ["blur","change"],
                            },
                        ],
                        dataType: "number",
                        span: 6,
                    },
@@ -119,41 +140,73 @@
                    // }
                ],
            },
            url:"",
            landUrl:"",
            polygon:[],
            area:"",
            url: "",
            landUrl: "",
            polygon: [],
            area: "",
            farmInfo: {},
            visible: false,
        }
    },
    created() {
        this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage"
    created () {

    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons","$farmId", "drawMapUrlBase"]),
        ...mapGetters([
            "userInfo",
            "permission",
            "polygons",
            "$farmId",
            "drawMapUrlBase",
        ]),
    },
    watch:{
        "landUrl":{
            handler(newVal,oldVal){
                this.$refs.form.submit()
            }
        }
    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 = ""
            },
        },
    },
    mounted () {
        this.initData(this.userInfo.tenant_id)
        window.addEventListener('message', this.handleMessage)
        window.addEventListener("message", this.handleMessage)
    },
    methods: {
        handleMessage(event) {
            if(event.type){
        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
                this.area = obj.area.toFixed(2) 
                this.landUrl = obj.url
            }
        },
        initData (tenantId) {
            getFarmList().then(res => {
            getFarmList().then((res) => {
                const column = this.findObject(this.option.column, "farmId")
                column.dicData = res.data.data
            })
@@ -161,30 +214,41 @@
        //初始化
        init () {
            //清空面的数据
            this.$store.commit('clear_polygon')
            //计算当前时间
            this.$store.commit("clear_polygon")
            this.form.landArea = 0
            this.visible = true

            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, done) {
            console.log(row)
            row['deptId'] = this.userInfo.dept_id
            row["deptId"] = this.userInfo.dept_id
            // row.farmId = this.farm.id


            var that = this
            var poly = []
            if(this.polygon.length !=0 ){
                this.polygon.forEach((e)=>{
            if (this.polygon.length != 0) {
                this.polygon.forEach((e) => {
                    poly.push({
                        lng:e[0],
                        lat:e[1]
                        lng: e[0],
                        lat: e[1],
                    })
                })
                this.polygon = poly
            }


            if (this.polygon.length == 0) {
                //没有面的数据
@@ -204,7 +268,6 @@
                //设置坐标点
                row.userId = this.userInfo.user_id
                row.landRange = usePolygons

            }

            // if (this.polygons.length == 0) {
@@ -227,36 +290,38 @@
            //     row.landRange = usePolygons
            //     console.log(row.landRange)
            // }
            

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

            row['url'] = this.landUrl
            row['landArea'] = this.area
            add(row).then(() => {
                    that.$emit("refreshOnLoad")
                    that.$refs.form.resetFields()
                    that.form.landUnit = "0"
                    that.visible = false
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    done()
                }, error => {
                    // loading()
                    window.console.log(error)
                })
            
        },
        
            if (row.landArea < 0) {
                this.$message.warning("地块面积不能为负数")
                done()
                return
            }

      add(row).then(() => {
          that.$emit("refreshOnLoad");
          that.$refs.form.resetFields();
          that.form.landUnit = "0";
          that.$parent.onLoad()
          that.visible = false;
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          done();
        })
      },

        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
        },

        showMap(){
        showMap () {
            this.mapVisible = true
        }
        },
    },
};
</script>
@@ -273,7 +338,7 @@
    left: 90px;
}

.map{
.map {
    height: 450px;
}
</style>