地图模式进入地块，顶部农场不切换

guoshilong

2022-08-29 08ec550924baf2b9b148bab5edcb87c69560068d

地图模式进入地块，顶部农场不切换

 src/main.js

@@ -89,6 +89,9 @@
    loadStyle(iconfontUrl.replace('$key', ele))
})


Vue.prototype.$EventBus = new Vue()

Vue.config.productionTip = false

new Vue({

 src/page/index/top/top-search2.vue

@@ -1,10 +1,17 @@
<template>
  <el-select class="top-search" v-model="farm.id" placeholder="请选择所属农场" filterable @change="farmChange">
  <el-select
    class="top-search"
    v-model="farm.id"
    placeholder="请选择所属农场"
    filterable
    @change="farmChange"
  >
    <el-option
      v-for="item in farmList"
      :key="item.id"
      :label="item.farmName"
      :value="item.id">
      :value="item.id"
    >
    </el-option>
  </el-select>
</template>
@@ -15,40 +22,42 @@
  import {getFarmList} from "@/api/farm/farm";

  export default {
  name: "top-search",
    data() {
      return {
        config: config,
        value: "",
        farm:{id:11},
        farmList:[]
      farmList: [],
      };
    },
    created() {
      let ids = ''
    this.$EventBus.$on("setFarmId", this.farmChange);

    let ids = "";
      if (this.userInfo.role_name != "administrator") {
        ids = this.userInfo.farmId
      ids = this.userInfo.farmId;
      }
      let params = {
        ids : ids
      }
      getFarmList(params).then(res => {
        this.farmList = res.data.data
      })
      ids: ids,
    };
    getFarmList(params).then((res) => {
      this.farmList = res.data.data;
    });
      this.$nextTick(() => {
        this.farm.id = parseInt(this.userInfo.farmId.split(',')[0])
        this.$store.commit("SET_FARMID", this.farm.id )
      })
      this.farm.id = parseInt(this.userInfo.farmId.split(",")[0]);
      this.$store.commit("SET_FARMID", this.farm.id);
    });
    },
    computed: {
      ...mapGetters(['userInfo', '$farmId'])
    ...mapGetters(["userInfo", "$farmId"]),
    },
    methods: {

      farmChange(data) {
        this.farm.id = data
        this.$store.commit("SET_FARMID", data)
      }
    }
      this.farm.id = data;
      this.$store.commit("SET_FARMID", data);
    },
  },
  };
</script>


 src/util/eventBus.js

New file
@@ -0,0 +1,2 @@
import Vue from 'vue'
export const EventBus = new Vue()

 src/views/farmplant/farmplant.vue

@@ -675,6 +675,7 @@
    methods: {
        //初始化数据
        initData () {
            console.log(this.$farmId,66666666666)
            var that = this
            //获取农地数据
            getLandList(this.$farmId).then((res) => {

 src/views/land/LandDetail.vue

@@ -5,7 +5,11 @@
                <!--                <div class="land-img" @click="mod(usePolygons)">-->
                <div class="land-img">
                    <img v-if="url" :src="url" class="landimg" />
                    <img v-else src="../../../public/img/bg/noimage.jpg" class="landimg" />
          <img
            v-else
            src="../../../public/img/bg/noimage.jpg"
            class="landimg"
          />
                </div>
                <div class="cent">
                    <div class="l">{{ landName }}</div>
@@ -15,7 +19,10 @@
                <div class="dck">所属农场:{{ deptname }}</div>

                <div class="edit">
                    <el-button @click="btnGrounpShow = !btnGrounpShow" icon="el-icon-menu"></el-button>
          <el-button
            @click="btnGrounpShow = !btnGrounpShow"
            icon="el-icon-menu"
          ></el-button>

                    <div v-show="btnGrounpShow" class="btn-grounp">
                        <el-button size="small" @click="DelLand(delId)">删除地块</el-button>
@@ -59,19 +66,24 @@
        <!--            <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"></landUpdate>
    <landUpdate
      v-if="landVisible"
      ref="landUpdate"
      id="landUpdate"
    ></landUpdate>
    </div>
</template>

<script>
import { mapGetters } from "vuex"
import farmplant from "@/views/farmplant/farmplant.vue"
import farming from "@/views/farm/farmingrecord.vue"
import recovery from "@/views/recovery/recovery.vue"
import stockUseInfo from "@/views/farm/stockUseInfo.vue"
import getMapDataInThere from "./getMapDataInThere.vue"
import { getList, remove, update } from "@/api/land/land"
import landUpdate from "./landUpdate"
import { mapGetters } from "vuex";
import farmplant from "@/views/farmplant/farmplant.vue";
import farming from "@/views/farm/farmingrecord.vue";
import recovery from "@/views/recovery/recovery.vue";
import stockUseInfo from "@/views/farm/stockUseInfo.vue";
import getMapDataInThere from "./getMapDataInThere.vue";
import { getList, remove, update } from "@/api/land/land";
import landUpdate from "./landUpdate";
import topSearch2Vue from "../../page/index/top/top-search2.vue";

export default {
    components: {
@@ -80,7 +92,7 @@
        recovery,
        stockUseInfo,
        landUpdate,
        getMapDataInThere
    getMapDataInThere,
    },
    data () {
        return {
@@ -116,29 +128,30 @@
                        display: true,
                        span: 24,
                        formslot: true,
                        addDisplay: true
                    }
            addDisplay: true,
          },
                ],
            },
            btnGrounpShow: false
        }
      btnGrounpShow: false,
    };
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
    ...mapGetters(["userInfo", "permission", "polygons", "$farmId"]),
    },
    created () {

    this.$nextTick(() => {
        this.$EventBus.$emit("setFarmId", this.$route.query.farmId-0);
    });
    },
    methods: {
        //圈地
        land () {
            this.landVisible = true
      this.landVisible = true;
            this.$nextTick(() => {
                this.$refs.landUpdate.init()
            })
        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
            //
@@ -146,28 +159,28 @@
            // })
        },
        mod (usePolygons) {
            this.gradeBoxVisible1 = true
            this.$refs.getMapData.draw(usePolygons)
      this.gradeBoxVisible1 = true;
      this.$refs.getMapData.draw(usePolygons);
        },
        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
      this.LineData = val[0];
      this.PointData = val[1];
        },
        //删除地块
        DelLand (delId) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
        type: "warning",
            })
                .then(() => {
                    return remove(delId)
          return remove(delId);
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
            message: "操作成功!",
          });
                    var arr = [];
                    this.$store.state.tags.tagList.forEach((item) => {
                      if (item.label != "地块详情") {
@@ -175,32 +188,31 @@
                      }
                    });
                    this.$store.state.tags.tagList = arr;
                    this.$router.back()
                })
          this.$router.back();
        });
        },
        //修改地块
        upLand () {
            var params = {}
      var params = {};
            if (this.polygons.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
        this.$refs.getMapData.isCheck = true;
                // loading()
            } else {
                //如果有值，空间坐标转换
                let pol = this.polygons
                let polLength = this.polygons.length - 1
                let usePolygons = ""
        let pol = this.polygons;
        let polLength = this.polygons.length - 1;
        let usePolygons = "";
                for (let k in pol) {
                    usePolygons += pol[k].lng + "," + pol[k].lat
          usePolygons += pol[k].lng + "," + pol[k].lat;
                    if (k != polLength) {
                        usePolygons += ";"
            usePolygons += ";";
                    }
                }
                //设置坐标点
                params.userId = this.userInfo.user_id
                params.landRange = usePolygons
                params.id = this.delId,
                    params.landUnit = this.landUnit
        params.userId = this.userInfo.user_id;
        params.landRange = usePolygons;
        (params.id = this.delId), (params.landUnit = this.landUnit);
            }
            // update(params).then(() => {
            //   that.$refs.form.resetFields();
@@ -214,29 +226,29 @@
            //   loading();
            //   window.console.log(error);
            // });
        }
    },
    },
    watch: {
        '$route.query': {
    "$route.query": {
            immediate: true,
            handler (newData, oldData) {
                this.url = this.$route.query.url
                this.landName = this.$route.query.landName
                this.dic = this.$route.query.dic
                this.landArea = this.$route.query.landArea
                this.dica = this.$route.query.dica
                this.deptname = this.$route.query.deptname
                this.delId = this.$route.query.id
                this.landUnit = this.$route.query.landUnit
        this.url = this.$route.query.url;
        this.landName = this.$route.query.landName;
        this.dic = this.$route.query.dic;
        this.landArea = this.$route.query.landArea;
        this.dica = this.$route.query.dica;
        this.deptname = this.$route.query.deptname;
        this.delId = this.$route.query.id;
        this.landUnit = this.$route.query.landUnit;
                // this.form = res.data.data;
                this.usePolygons = this.$route.query.landRange
                    // .split("POLYGON((")[1]
                    // .split("))")[0]
                    .split(",")
            }
        }
          .split(",");
    },
}
    },
  },
};
</script>

<style scoped lang="scss">