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

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,86 +1,95 @@
<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>

<script>
  import config from "../sidebar/config.js";
  import {mapGetters} from "vuex";
  import {getFarmList} from "@/api/farm/farm";
import config from "../sidebar/config.js";
import { mapGetters } from "vuex";
import { getFarmList } from "@/api/farm/farm";

  export default {
    data() {
      return {
        config: config,
        value: "",
        farm:{id:11},
        farmList:[]
      };
    },
    created() {
      let ids = ''
      if (this.userInfo.role_name != "administrator") {
        ids = this.userInfo.farmId
      }
      let params = {
        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 )
      })
    },
    computed: {
      ...mapGetters(['userInfo', '$farmId'])
    },
    methods: {
export default {
  name: "top-search",
  data() {
    return {
      config: config,
      value: "",
      farm: { id: 11 },
      farmList: [],
    };
  },
  created() {
    this.$EventBus.$on("setFarmId", this.farmChange);

      farmChange(data) {
        this.farm.id = data
        this.$store.commit("SET_FARMID", data)
      }
    let ids = "";
    if (this.userInfo.role_name != "administrator") {
      ids = this.userInfo.farmId;
    }
  };
    let params = {
      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);
    });
  },
  computed: {
    ...mapGetters(["userInfo", "$farmId"]),
  },
  methods: {
    farmChange(data) {
      this.farm.id = data;
      this.$store.commit("SET_FARMID", data);
    },
  },
};
</script>

<style lang="scss">
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

      .icon {
        margin-right: 5px;
        display: inline-block;
        vertical-align: middle;
      }
    .icon {
      margin-right: 5px;
      display: inline-block;
      vertical-align: middle;
    }

      .name {
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: middle;
      }
    .name {
      display: inline-block;
      text-overflow: ellipsis;
      overflow: hidden;
      vertical-align: middle;
    }

      .addr {
        padding-top: 5px;
        width: 100%;
        font-size: 12px;
        color: #b4b4b4;
      }
    .addr {
      padding-top: 5px;
      width: 100%;
      font-size: 12px;
      color: #b4b4b4;
    }

      .highlighted .addr {
        color: #ddd;
      }
    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>

 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

@@ -1,357 +1,369 @@
<template>
    <div class="wraaper-box farming-detail-box">
        <div class="dd">
            <div class="da">
                <!--                <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" />
                </div>
                <div class="cent">
                    <div class="l">{{ landName }}</div>
                    <div class="ln">{{ dic }}</div>
                </div>
                <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
                <div class="dck">所属农场:{{ deptname }}</div>

                <div class="edit">
                    <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>
                        <el-button size="small" @click="land">编辑地块</el-button>
                    </div>
                </div>
            </div>
            <div class="dv">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <!-- 种植记录 -->
                    <el-tab-pane label="种养品种" name="tab1">
                        <farmplant></farmplant>
                    </el-tab-pane>
                    <!-- 农事记录 -->
                    <el-tab-pane label="农事记录" name="tab2">
                        <farming></farming>
                    </el-tab-pane>
                    <!-- 采收记录 -->
                    <el-tab-pane label="采收记录" name="tab3">
                        <recovery></recovery>
                    </el-tab-pane>
                    <!-- 农资记录 -->
                    <el-tab-pane label="农资使用记录" name="tab4">
                        <stockUseInfo></stockUseInfo>
                    </el-tab-pane>
                </el-tabs>
            </div>
  <div class="wraaper-box farming-detail-box">
    <div class="dd">
      <div class="da">
        <!--                <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"
          />
        </div>
        <div class="cent">
          <div class="l">{{ landName }}</div>
          <div class="ln">{{ dic }}</div>
        </div>
        <div class="dc">占地面积:{{ landArea }}{{ dica }}</div>
        <div class="dck">所属农场:{{ deptname }}</div>

        <!--        <el-dialog-->
        <!--            title="地块位置"-->
        <!--            class="current-map-box"-->
        <!--            :visible.sync="gradeBoxVisible1"-->
        <!--            :modal="true"-->
        <!--            :modal-append-to-body="true"-->
        <!--            :append-to-body="true"-->
        <!--            :close-on-click-modal="false"-->
        <!--            :close-on-press-escape="false"-->
        <!--            :before-close="dialogBeforeClose"-->
        <!--        >-->
        <!--            <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>
        <div class="edit">
          <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>
            <el-button size="small" @click="land">编辑地块</el-button>
          </div>
        </div>
      </div>
      <div class="dv">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 种植记录 -->
          <el-tab-pane label="种养品种" name="tab1">
            <farmplant></farmplant>
          </el-tab-pane>
          <!-- 农事记录 -->
          <el-tab-pane label="农事记录" name="tab2">
            <farming></farming>
          </el-tab-pane>
          <!-- 采收记录 -->
          <el-tab-pane label="采收记录" name="tab3">
            <recovery></recovery>
          </el-tab-pane>
          <!-- 农资记录 -->
          <el-tab-pane label="农资使用记录" name="tab4">
            <stockUseInfo></stockUseInfo>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--        <el-dialog-->
    <!--            title="地块位置"-->
    <!--            class="current-map-box"-->
    <!--            :visible.sync="gradeBoxVisible1"-->
    <!--            :modal="true"-->
    <!--            :modal-append-to-body="true"-->
    <!--            :append-to-body="true"-->
    <!--            :close-on-click-modal="false"-->
    <!--            :close-on-press-escape="false"-->
    <!--            :before-close="dialogBeforeClose"-->
    <!--        >-->
    <!--            <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>
  </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: {
        farmplant,
        farming,
        recovery,
        stockUseInfo,
        landUpdate,
        getMapDataInThere
  components: {
    farmplant,
    farming,
    recovery,
    stockUseInfo,
    landUpdate,
    getMapDataInThere,
  },
  data() {
    return {
      farmId: "",
      activeName: "tab1",
      url: "",
      dica: "",
      deptname: "",
      landUnit: "",
      delId: "",
      landArea: "",
      usePolygons: "",
      dic: "",
      formC: {},
      gradeBoxVisible1: false,
      landVisible: false,
      option2: {
        index: true,
        tip: false,
        searchMenuSpan: 6,
        height: 583,
        menuWidth: 300,
        border: true,
        align: "center",
        selection: true,
        column: [
          {
            label: "路线展示",
            labelWidth: "0",
            prop: "line",
            className: "mapClass",
            hide: true,
            display: true,
            span: 24,
            formslot: true,
            addDisplay: true,
          },
        ],
      },
      btnGrounpShow: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo", "permission", "polygons", "$farmId"]),
  },
  created() {
    this.$nextTick(() => {
        this.$EventBus.$emit("setFarmId", this.$route.query.farmId-0);
    });
  },
  methods: {
    //圈地
    land() {
      this.landVisible = true;
      this.$nextTick(() => {
        this.$refs.landUpdate.init();
      });
    },
    data () {
        return {
            farmId: "",
            activeName: "tab1",
            url: "",
            dica: "",
            deptname: "",
            landUnit: "",
            delId: "",
            landArea: "",
            usePolygons: "",
            dic: "",
            formC: {},
            gradeBoxVisible1: false,
            landVisible: false,
            option2: {
                index: true,
                tip: false,
                searchMenuSpan: 6,
                height: 583,
                menuWidth: 300,
                border: true,
                align: "center",
                selection: true,
                column: [
                    {
                        label: "路线展示",
                        labelWidth: "0",
                        prop: "line",
                        className: "mapClass",
                        hide: true,
                        display: true,
                        span: 24,
                        formslot: true,
                        addDisplay: true
                    }
                ],
            },
            btnGrounpShow: false
        }
    openLandUpdate(page, params = {}) {
      // getList(1, 10, Object.assign(params, this.query)).then(res => {
      //   const data = res.data.data
      //
      //   this.farmPlanList = data.records
      // })
    },
    computed: {
        ...mapGetters(["userInfo", "permission", "polygons"]),
    mod(usePolygons) {
      this.gradeBoxVisible1 = true;
      this.$refs.getMapData.draw(usePolygons);
    },
    created () {

    setMapData(val) {
      this.LineData = val[0];
      this.PointData = val[1];
    },
    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)
        },
        setMapData (val) {
            this.LineData = val[0]
            this.PointData = val[1]
        },
        //删除地块
        DelLand (delId) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    return remove(delId)
                })
                .then(() => {
                    this.$message({
                        type: "success",
                        message: "操作成功!"
                    })
                    var arr = [];
                    this.$store.state.tags.tagList.forEach((item) => {
                      if (item.label != "地块详情") {
                        arr.push(item);
                      }
                    });
                    this.$store.state.tags.tagList = arr;
                    this.$router.back()
                })
        },
        //修改地块
        upLand () {
            var params = {}
            if (this.polygons.length == 0) {
                //没有面的数据
                this.$refs.getMapData.isCheck = true
                // loading()
            } 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 += ";"
                    }
                }
                //设置坐标点
                params.userId = this.userInfo.user_id
                params.landRange = usePolygons
                params.id = this.delId,
                    params.landUnit = this.landUnit
    //删除地块
    DelLand(delId) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(delId);
        })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          var arr = [];
          this.$store.state.tags.tagList.forEach((item) => {
            if (item.label != "地块详情") {
              arr.push(item);
            }
            // update(params).then(() => {
            //   that.$refs.form.resetFields();
            //   that.visible = false;
            //   this.$message({
            //     type: "success",
            //     message: "操作成功!"
            //   });
            //   done();
            // }, error => {
            //   loading();
            //   window.console.log(error);
            // });
        }
          });
          this.$store.state.tags.tagList = arr;
          this.$router.back();
        });
    },
    watch: {
        '$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.form = res.data.data;
                this.usePolygons = this.$route.query.landRange
                    // .split("POLYGON((")[1]
                    // .split("))")[0]
                    .split(",")
            }
    //修改地块
    upLand() {
      var params = {};
      if (this.polygons.length == 0) {
        //没有面的数据
        this.$refs.getMapData.isCheck = true;
        // loading()
      } 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 += ";";
          }
        }
        //设置坐标点
        params.userId = this.userInfo.user_id;
        params.landRange = usePolygons;
        (params.id = this.delId), (params.landUnit = this.landUnit);
      }
      // update(params).then(() => {
      //   that.$refs.form.resetFields();
      //   that.visible = false;
      //   this.$message({
      //     type: "success",
      //     message: "操作成功!"
      //   });
      //   done();
      // }, error => {
      //   loading();
      //   window.console.log(error);
      // });
    },
}
  },
  watch: {
    "$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.form = res.data.data;
        this.usePolygons = this.$route.query.landRange
          // .split("POLYGON((")[1]
          // .split("))")[0]
          .split(",");
      },
    },
  },
};
</script>

<style scoped lang="scss">
#getMapData {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

.wraaper-box {
    padding: 0 !important;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
  padding: 0 !important;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
}

.land-img {
    width: 200px;
    height: 200px;
    margin-top: 25px;
    margin-left: 60px;
    float: left;
  width: 200px;
  height: 200px;
  margin-top: 25px;
  margin-left: 60px;
  float: left;
}

.cent {
    width: 250px;
    height: 40px;
    margin-top: 25px;
    margin-left: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
  width: 250px;
  height: 40px;
  margin-top: 25px;
  margin-left: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
}

.l {
    width: 120px;
    height: 40px;
    float: left;
    text-align: center;
    line-height: 40px;
  width: 120px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
}

.ln {
    width: 120px;
    height: 40px;
    margin-left: 2px;
    float: left;
    text-align: center;
    line-height: 40px;
    display: inline-block;
    vertical-align: 1px;
    border-radius: 3px;
  width: 120px;
  height: 40px;
  margin-left: 2px;
  float: left;
  text-align: center;
  line-height: 40px;
  display: inline-block;
  vertical-align: 1px;
  border-radius: 3px;
}

.dc {
    width: 151px;
    margin-top: 20px;
    margin-left: 340px;
    width: 175px;
  width: 151px;
  margin-top: 20px;
  margin-left: 340px;
  width: 175px;
}

.dck {
    width: 151px;
    margin-left: 340px;
    width: 175px;
  width: 151px;
  margin-left: 340px;
  width: 175px;
}

.landimg {
    width: 200px;
    height: 200px;
  width: 200px;
  height: 200px;
}

.dd {
    padding: 10px;
    wdith: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  padding: 10px;
  wdith: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.da {
    position: relative;
    width: 100%;
    line-height: 60px;
    background: #fff;
  position: relative;
  width: 100%;
  line-height: 60px;
  background: #fff;

    .edit {
        position: absolute;
        top: 25px;
        right: 60px;
  .edit {
    position: absolute;
    top: 25px;
    right: 60px;

        .btn-grounp {
            padding: 0 10px;
            position: absolute;
            top: 40px;
            right: 60px;
            background: #fff;
            box-shadow: 0 0 10px 1px #ccc;
        }
    .btn-grounp {
      padding: 0 10px;
      position: absolute;
      top: 40px;
      right: 60px;
      background: #fff;
      box-shadow: 0 0 10px 1px #ccc;
    }
  }
}

.dv {
    flex: 1;
    line-height: 60px;
    background: #fff;
    width: 100%;
    overflow: hidden;
  flex: 1;
  line-height: 60px;
  background: #fff;
  width: 100%;
  overflow: hidden;
}
</style>