From 08ec550924baf2b9b148bab5edcb87c69560068d Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 29 Aug 2022 17:58:29 +0800
Subject: [PATCH] 地图模式进入地块，顶部农场不切换
---
src/util/eventBus.js | 2
src/main.js | 3
src/views/farmplant/farmplant.vue | 1
src/views/land/LandDetail.vue | 608 +++++++++++++++++++++++----------------------
src/page/index/top/top-search2.vue | 135 +++++----
5 files changed, 388 insertions(+), 361 deletions(-)
diff --git a/src/main.js b/src/main.js
index 6ed828e..af24080 100644
--- a/src/main.js
+++ b/src/main.js
@@ -89,6 +89,9 @@
loadStyle(iconfontUrl.replace('$key', ele))
})
+
+Vue.prototype.$EventBus = new Vue()
+
Vue.config.productionTip = false
new Vue({
diff --git a/src/page/index/top/top-search2.vue b/src/page/index/top/top-search2.vue
index a71fafc..8642f57 100644
--- a/src/page/index/top/top-search2.vue
+++ b/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>
diff --git a/src/util/eventBus.js b/src/util/eventBus.js
new file mode 100644
index 0000000..b8baaeb
--- /dev/null
+++ b/src/util/eventBus.js
@@ -0,0 +1,2 @@
+import Vue from 'vue'
+export const EventBus = new Vue()
\ No newline at end of file
diff --git a/src/views/farmplant/farmplant.vue b/src/views/farmplant/farmplant.vue
index a5d0707..16db0fa 100644
--- a/src/views/farmplant/farmplant.vue
+++ b/src/views/farmplant/farmplant.vue
@@ -675,6 +675,7 @@
methods: {
//初始化数据
initData () {
+ console.log(this.$farmId,66666666666)
var that = this
//获取农地数据
getLandList(this.$farmId).then((res) => {
diff --git a/src/views/land/LandDetail.vue b/src/views/land/LandDetail.vue
index 170a4df..0050703 100644
--- a/src/views/land/LandDetail.vue
+++ b/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>
--
Gitblit v1.9.3