From bcb6af1fa7973001a43bb08a2d7a8f96e81bc5e5 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Fri, 02 Sep 2022 17:53:22 +0800
Subject: [PATCH] 地块添加修改显示天地图
---
src/store/modules/user.js | 3
src/components/map/mainInThere.vue | 29 +++
src/views/wel/land.vue | 129 ++++++++++++++----
src/views/land/landAdd.vue | 137 +++++++++++++++---
src/views/farmplant/farmplant.vue | 2
src/store/getters.js | 1
src/views/land/landUpdate.vue | 116 +++++++++++----
7 files changed, 320 insertions(+), 97 deletions(-)
diff --git a/src/components/map/mainInThere.vue b/src/components/map/mainInThere.vue
index 05a9d69..5c4b791 100644
--- a/src/components/map/mainInThere.vue
+++ b/src/components/map/mainInThere.vue
@@ -113,7 +113,12 @@
//面实例
zIndex: 22,
source: new VectorSource()
- })
+ }),
+ urls:[
+ "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0",
+ "http://t{0-7}.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0"
+ ],
+ imgSrc:''
};
},
computed: {
@@ -134,9 +139,21 @@
new OlLayerTile({
zIndex: 4,
title: "影像",
- source: new XYZ({
- url:
- "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
+ source:
+ new XYZ({
+ // url:
+ // "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
+ url:this.urls[0]
+ })
+ }),
+ new OlLayerTile({
+ zIndex: 5,
+ title: "区划",
+ source:
+ new XYZ({
+ // url:
+ // "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
+ url:this.urls[1],
})
})
],
@@ -155,8 +172,8 @@
var view = ol2d.getView();
this.source = new VectorSource({ wrapX: false });
- view.setCenter([115.9032747077233, 28.67433116990186]);
-
+ // view.setCenter([115.9032747077233, 28.67433116990186]);
+ view.setCenter([116.56705776, 27.42386903]);
this.view = view;
},
methods: {
diff --git a/src/store/getters.js b/src/store/getters.js
index 834a8ab..36f6173 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -22,6 +22,7 @@
menu: state => state.user.menu,
menuId: state => state.user.menuId,
menuAll: state => state.user.menuAll,
+ drawMapUrlBase: state => state.user.drawMapUrlBase,
logsList: state => state.logs.logsList,
logsLen: state => state.logs.logsList.length || 0,
logsFlag: (state, getters) => getters.logsLen === 0,
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 2fdc3b8..b0bdaa0 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -51,7 +51,8 @@
menuAll: getStore({name: 'menuAll'}) || [],
token: getStore({name: 'token'}) || '',
refreshToken: getStore({name: 'refreshToken'}) || '',
- $farmId: 0
+ $farmId: 0,
+ drawMapUrlBase: 'http://127.0.0.1:8080'
},
actions: {
loginInfoByToken({commit}) {
diff --git a/src/views/farmplant/farmplant.vue b/src/views/farmplant/farmplant.vue
index 16db0fa..37761d1 100644
--- a/src/views/farmplant/farmplant.vue
+++ b/src/views/farmplant/farmplant.vue
@@ -30,7 +30,7 @@
>删 除</el-button>
</template>
<template slot-scope="{ type, size, row }" slot="menu">
- <el-button icon="el-icon-check" :size="size" :type="type" @click="recovery(row)">采 收</el-button>
+ <el-button :disabled="row.plantingWay == 2" icon="el-icon-check" :size="size" :type="type" @click="recovery(row)">采 收</el-button>
<!-- <el-button icon="el-icon-error" :size="size" :type="type" @click="over(row.id)">结 束</el-button> -->
<el-button icon="el-icon-error" :size="size" :type="type" @click="getData(row)">结 束</el-button>
diff --git a/src/views/land/landAdd.vue b/src/views/land/landAdd.vue
index cf861a7..d8f1a47 100644
--- a/src/views/land/landAdd.vue
+++ b/src/views/land/landAdd.vue
@@ -4,15 +4,21 @@
:modal-append-to-body="false"
:append-to-body="true"
:close-on-click-modal="false"
- width="60%"
+ width="80%"
:visible.sync="visible"
+ top="10vh"
>
<avue-form ref="form" v-model="form" :option="option" @submit="submit">
<!-- 地图插入 -->
<template slot-scope="{ type, disabled }" slot="line">
- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
+ <!-- <getMapDataInThere ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
+
</template>
</avue-form>
+ <div class="map">
+ <iframe :src="url" frameborder="0" width="100%" height="100%" ></iframe>
+ </div>
+
</el-dialog>
</template>
@@ -23,7 +29,10 @@
import { getDeptTree } from "@/api/system/dept"
import { add } from "@/api/land/land"
import website from '@/config/website'
+import domtoimage from 'dom-to-image'
+import h2 from 'html2canvas'
import getMapDataInThere from "./getMapDataInThere.vue"
+// import canvas2Image from 'canvas2Image'
export default {
components: {
@@ -36,6 +45,7 @@
option: {
emptyBtn: false,
submitText: "保存",
+ submitBtn:false,
gutter: 30,
column: [
{
@@ -99,26 +109,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"
+ },
computed: {
- ...mapGetters(["userInfo", "permission", "polygons","$farmId"]),
+ ...mapGetters(["userInfo", "permission", "polygons","$farmId", "drawMapUrlBase"]),
+ },
+ watch:{
+ "landUrl":{
+ handler(newVal,oldVal){
+ this.$refs.form.submit()
+ }
+ }
},
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) {
getFarmList().then(res => {
const column = this.findObject(this.option.column, "farmId")
@@ -135,17 +168,32 @@
},
// 表单提交
submit (row, done) {
+ console.log(row)
row['deptId'] = this.userInfo.dept_id
// row.farmId = this.farm.id
+
+
var that = this
- if (this.polygons.length == 0) {
+ 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.polygons
- let polLength = this.polygons.length - 1
+ let pol = this.polygon
+ let polLength = this.polygon.length - 1
let usePolygons = ""
for (let k in pol) {
usePolygons += pol[k].lng + "," + pol[k].lat
@@ -156,26 +204,59 @@
//设置坐标点
row.userId = this.userInfo.user_id
row.landRange = usePolygons
+
}
+
+ // 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 += ";"
+ // }
+ // }
+ // //设置坐标点
+ // row.userId = this.userInfo.user_id
+ // row.landRange = usePolygons
+ // console.log(row.landRange)
+ // }
+
+
+
+ row['url'] = this.landUrl
+ row['landArea'] = this.area
add(row).then(() => {
- that.$emit("refreshOnLoad")
- that.$refs.form.resetFields()
- that.form.landUnit = "0"
- that.visible = false
- this.$message({
- type: "success",
- message: "操作成功!"
+ that.$emit("refreshOnLoad")
+ that.$refs.form.resetFields()
+ that.form.landUnit = "0"
+ that.visible = false
+ this.$message({
+ type: "success",
+ message: "操作成功!"
+ })
+ done()
+ }, error => {
+ // loading()
+ window.console.log(error)
})
- done()
- }, error => {
- // loading()
- window.console.log(error)
- })
+
},
+
setMapData (val) {
this.LineData = val[0]
this.PointData = val[1]
},
+
+ showMap(){
+ this.mapVisible = true
+ }
},
};
</script>
@@ -191,4 +272,8 @@
top: 10px;
left: 90px;
}
+
+.map{
+ height: 450px;
+}
</style>
diff --git a/src/views/land/landUpdate.vue b/src/views/land/landUpdate.vue
index 57029e4..488f21c 100644
--- a/src/views/land/landUpdate.vue
+++ b/src/views/land/landUpdate.vue
@@ -4,15 +4,20 @@
: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 :currentPolygons="form.landRange" ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere>
+ <!-- <getMapDataInThere :currentPolygons="form.landRange" ref="getMapData" id="getMapData" @setMapData="setMapData"></getMapDataInThere> -->
+
</template>
</avue-form>
+ <div class="map">
+ <iframe :src="url" frameborder="0" width="100%" height="100%" ></iframe>
+ </div>
</el-dialog>
</template>
@@ -37,6 +42,7 @@
option: {
emptyBtn: false,
submitText: "保存",
+ submitBtn:false,
gutter: 30,
farmName:'',
column: [
@@ -98,27 +104,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,
}
},
+ watch:{
+ "landUrl":{
+ handler(newVal,oldVal){
+ this.$refs.form.submit()
+ }
+ }
+ },
computed: {
- ...mapGetters(["userInfo", "permission", "polygons"]),
+ ...mapGetters(["userInfo", "permission", "polygons","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
}
@@ -129,6 +157,7 @@
},
//初始化
init () {
+ this.url = this.drawMapUrlBase+"/revamp?type=1&status=manage&position="+this.$route.query.landRange
//清空面的数据
this.$store.commit('clear_polygon')
//计算当前时间
@@ -145,22 +174,35 @@
this.form.landRange = this.form.landRange.replace(/POLYGON\(\(/g, '')
this.form.landRange = this.form.landRange.replace(/\)\)/g, '')
- this.form.landRange = this.form.landRange.split(',')
+ // this.form.landRange = this.form.landRange.split(',')
+ this.form.landRange = this.form.landRange.replaceAll(',',';')
+ this.form.landRange = this.form.landRange.replaceAll(' ',',')
+
+
+
},
// 表单提交
submit (row, loading) {
row['deptId'] = this.userInfo.dept_id
var that = this
- if (this.polygons.length == 0) {
- //没有面的数据
- this.$refs.getMapData.isCheck = true
- loading()
- return
- } else {
+
+
+ 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) {
//如果有值，空间坐标转换
- let pol = this.polygons
- let polLength = this.polygons.length - 1
+ let pol = this.polygon
+ let polLength = this.polygon.length - 1
let usePolygons = ""
for (let k in pol) {
usePolygons += pol[k].lng + "," + pol[k].lat
@@ -171,8 +213,11 @@
//设置坐标点
row.userId = this.userInfo.user_id
row.landRange = usePolygons
- }
+ row['url'] = this.landUrl
+ row['landArea'] = this.area
+
+ }
update(row).then(() => {
that.$emit("refreshOnLoad")
that.$refs.form.validate((vaild,done)=>{
@@ -183,19 +228,21 @@
message: "操作成功!"
})
done()
- this.form.landRange = this.$route.query.landRange
- this.form.dica = row.$landUnit
- this.form.dic = row.$landType
- this.form.deptname = row.$farmId
- var arr = [];
- this.$store.state.tags.tagList.forEach((item) => {
- if (item.label != "地块详情") {
- arr.push(item);
- }
- });
- this.$store.state.tags.tagList = arr;
- this.$router.replace({ path: `/LandDetail`, query: this.form });
+ // this.form.landRange = this.$route.query.landRange
+ // this.form.dica = row.$landUnit
+ // this.form.dic = row.$landType
+ // this.form.deptname = row.$farmId
+
+ // var arr = [];
+ // this.$store.state.tags.tagList.forEach((item) => {
+ // if (item.label != "地块详情") {
+ // arr.push(item);
+ // }
+ // });
+ // this.$store.state.tags.tagList = arr;
+ // this.$router.replace({ path: `/land`, query: this.form });
+ this.$router.go(-1)
}
})
@@ -224,4 +271,7 @@
top: 10px;
left: 90px;
}
+.map{
+ height: 450px;
+}
</style>
diff --git a/src/views/wel/land.vue b/src/views/wel/land.vue
index 1f26d0a..49bc3e8 100644
--- a/src/views/wel/land.vue
+++ b/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>
--
Gitblit v1.9.3