地块添加修改显示天地图

guoshilong

2022-09-02 bcb6af1fa7973001a43bb08a2d7a8f96e81bc5e5

 src/views/wel/land.vue

@@ -4,19 +4,25 @@
    :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
        <!-- <getMapDataInThere
          ref="getMapData"
          id="getMapData"
          @setMapData="setMapData"
        ></getMapDataInThere>
        ></getMapDataInThere> -->
        
      </template>
    </avue-form>

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

@@ -39,6 +45,7 @@
      option: {
        emptyBtn: false,
        submitText: "保存",
        submitBtn:false,
        gutter: 30,
        column: [
          {
@@ -96,26 +103,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,
    };
  },
  created(){
    this.url = this.drawMapUrlBase + "/base?type=1&lng=112&lat=24&status=manage"
  },
  watch:{
      "landUrl":{
          handler(newVal,oldVal){
              this.$refs.form.submit()
          }
      }
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons","$farmId"]),
    ...mapGetters(["userInfo", "permission", "polygons","$farmId","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
@@ -134,27 +164,63 @@
    // 表单提交
    submit(row,done) {
      var that = this;
      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;


      // 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
      add(row).then(() => {
        that.$refs.form.resetFields();
        this.form.landUnit = "0"
@@ -189,4 +255,7 @@
  top: 10px;
  left: 90px;
}
.map{
    height: 450px;
}
</style>