From 0ddaebe0030d7fa7545f20ce894861856a35bf4c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 18 Jul 2022 17:28:11 +0800
Subject: [PATCH] 解数据
---
src/views/land/LandDetail.vue | 522 ++++++++++++++++++++++++++++-----------------------------
src/views/land/getMapDataInThere.vue | 16 +
2 files changed, 272 insertions(+), 266 deletions(-)
diff --git a/src/views/land/LandDetail.vue b/src/views/land/LandDetail.vue
index 3dce1b0..66c0cd8 100644
--- a/src/views/land/LandDetail.vue
+++ b/src/views/land/LandDetail.vue
@@ -1,323 +1,317 @@
<template>
- <div class="wraaper-box farming-detail-box">
- <div class="dd">
- <div class="da">
- <div class="land-img" @click="mod(usePolygons)">
- <img :src="url" 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="wraaper-box farming-detail-box">
+ <div class="dd">
+ <div class="da">
+ <div class="land-img" @click="mod(usePolygons)">
+ <img :src="url" 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 class="edit">
+ <el-button @click="btnGrounpShow = !btnGrounpShow" icon="el-icon-menu"></el-button>
- <div v-show="btnGrounpShow" class="btn-grounp" @click="DelLand(delId)">
- <el-button>删除地块</el-button>
- </div>
+ <div v-show="btnGrounpShow" class="btn-grounp" @click="DelLand(delId)">
+ <el-button>删除地块</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-tabs>
+ </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-tabs>
- </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>
</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>
- </div>
</template>
<script>
-import {mapGetters} from "vuex"
+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 getMapDataInThere from "./getMapDataInThere.vue"
-import {remove, update} from "@/api/land/land"
+import { remove, update } from "@/api/land/land"
export default {
- components: {
- farmplant,
- farming,
- recovery,
- getMapDataInThere
- },
- data() {
- return {
- farmId: "",
- activeName: "tab1",
- url: "",
- dica: "",
- deptname: "",
- landUnit: "",
- delId: "",
- landArea: "",
- usePolygons: "",
- dic: "",
- formC: {},
- gradeBoxVisible1: 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"]),
- },
- created() {
- 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(",")
- for (let k in usePolygons) {
- usePolygons[k] = {
- lng: +usePolygons[k].split(" ")[0],
- lat: +usePolygons[k].split(" ")[1],
- }
- }
- },
- methods: {
- mod(usePolygons) {
- this.gradeBoxVisible1 = true
- this.$refs.getMapData.draw(usePolygons)
+ components: {
+ farmplant,
+ farming,
+ recovery,
+ getMapDataInThere
},
- 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: "操作成功!"
- });
- this.$router.push({
- path: `/land/cs`,
- });
- });
- },
- //修改地块
- 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 += ";";
- }
+ data () {
+ return {
+ farmId: "",
+ activeName: "tab1",
+ url: "",
+ dica: "",
+ deptname: "",
+ landUnit: "",
+ delId: "",
+ landArea: "",
+ usePolygons: "",
+ dic: "",
+ formC: {},
+ gradeBoxVisible1: 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
}
- //设置坐标点
- 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: {},
+ },
+ computed: {
+ ...mapGetters(["userInfo", "permission", "polygons"]),
+ },
+ created () {
+ 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(",")
+ },
+ methods: {
+ 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: "操作成功!"
+ })
+ this.$router.push({
+ path: `/land/cs`,
+ })
+ })
+ },
+ //修改地块
+ 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: {},
}
</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>
diff --git a/src/views/land/getMapDataInThere.vue b/src/views/land/getMapDataInThere.vue
index e3950e0..cb6886e 100644
--- a/src/views/land/getMapDataInThere.vue
+++ b/src/views/land/getMapDataInThere.vue
@@ -63,8 +63,20 @@
},
methods: {
draw (usePolygons) {
- this.$store.commit("setpolygon", usePolygons) //用vuex传最终数据
- this.doThat(usePolygons)
+
+ let arr = []
+
+ usePolygons.forEach(item => {
+ arr.push({
+ lng: item.split(' ')[0],
+ lat: item.split(' ')[1]
+ })
+ })
+
+ console.log(arr, 23)
+
+ this.$store.commit("setpolygon", arr) //用vuex传最终数据
+ this.doThat(arr)
},
doThat (val) {
this.checkDom("getMapDataRefs", (dom) => {
--
Gitblit v1.9.3