From bcb0b5f05984af58e329404ec8e7b3862878515f Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Wed, 11 May 2022 11:40:25 +0800
Subject: [PATCH] 农场地图展示完善
---
src/views/farm/getMapDataInThere.vue | 244 ++++--------------------------------------------
1 files changed, 23 insertions(+), 221 deletions(-)
diff --git a/src/views/farm/getMapDataInThere.vue b/src/views/farm/getMapDataInThere.vue
index 41e4922..d1a0abf 100644
--- a/src/views/farm/getMapDataInThere.vue
+++ b/src/views/farm/getMapDataInThere.vue
@@ -2,7 +2,7 @@
<div class="getMapData" :key="Refresh">
<MapInThere ref="getMapDataRefs" />
<div class="notDatas" v-show="isCheck">
- <div style="color:red">*</div>
+ <div style="color: red">*</div>
未绘画区域
</div>
<div class="controlMapWindowTitle">
@@ -15,77 +15,6 @@
>
</el-button-group>
</div>
- <!-- <div class="controlMapWindow">
- <div class="controlMapWindowTitle">
- <el-button-group>
- <el-button
- type="primary"
- icon="el-icon-finished"
- @click="openDrawLineMethod"
- :disabled="fromView"
- >新增路线</el-button
- >
- <el-button
- type="primary"
- @click="openDrawPointMethod"
- icon="el-icon-coordinate"
- :disabled="fromView"
- >新增标点</el-button
- >
- </el-button-group>
- </div>
- <div class="controlMapWindowmain">
- <transition-group
- :name="animateName"
- :enter-active-class="animateEnter"
- :leave-active-class="animateLeave"
- >
- <div
- class="getMapData__once"
- v-for="(item, index) in ourDatas"
- :key="index"
- >
- <div class="getMapData_once_label">
- <el-tag> {{ item.label }}</el-tag>
- </div>
- <el-input
- :class="[
- 'getMapData_once_name',
- item.notPath == 2 ? 'notPath' : '',
- ]"
- @blur="myRules(index)"
- v-model="item.name"
- placeholder="请输入路径名称"
- :disabled="fromView"
- ></el-input>
- <transition
- :name="animateNames"
- :enter-active-class="animateEnters"
- :leave-active-class="animateLeaves"
- >
- <div class="notPathTitile" v-show="item.notPath == 2">
- 请输入名称或选择路径
- </div>
- </transition>
- <el-button
- class="getMapData_once_get"
- :type="item.value ? 'success' : 'primary'"
- :title="item.value ? '重新选择' : '点击选择'"
- :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
- @click="openMap(item.label, index, item.value)"
- :disabled="MapDataShow || fromView"
- ></el-button>
- <el-button
- class="getMapData_once_endBut"
- icon="el-icon-delete"
- circle
- @click="deleteRowOurs(index)"
- :disabled="MapDataShow || fromView"
- ></el-button>
- </div>
- </transition-group>
- </div>
- </div> -->
</div>
</template>
@@ -95,47 +24,29 @@
export default {
name: "getMapData",
components: {
- MapInThere
+ MapInThere,
},
computed: {
- ...mapGetters(["rotesData", "pointData", "polygons"])
+ ...mapGetters(["rotesData", "pointData", "polygons"]),
},
watch: {
ourDatas: {
handler(val) {
- // console.log("深度监听：", val);
- this.checkDom("getMapDataRefs", dom => {
+ this.checkDom("getMapDataRefs", (dom) => {
dom.onceOnlodad(val);
});
},
- deep: true
+ deep: true,
},
polygons() {
- console.log(this.polygons);
if (this.polygons.length > 0) {
this.isCheck = false;
}
- }
+ },
},
data() {
return {
Refresh: false,
- // routers: [
- // {
- // label: "路径1",
- // value: "",
- // routerName: "",
- // notPath: true,
- // },
- // ],
- // potions: [
- // {
- // label: "标点1",
- // value: "",
- // potionName: "",
- // notPath: true,
- // },
- // ],
//动画效果
animateName: "custom-classes-transition",
animateEnter: "animated fadeIn",
@@ -147,68 +58,30 @@
openTitle: "路径1",
MapDataShow: false,
fromView: false,
- ourDatas: [
- // {
- // label: "路径2",
- // value:
- // "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
- // name: "xxx2",
- // notPath: false,
- // isLine: true,
- // id: 2,
- // },
- // {
- // label: "路径3",
- // value:
- // "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
- // name: "xxx3",
- // notPath: false,
- // isLine: true,
- // id: 3,
- // },
- // {
- // label: "标点4",
- // value: [114.03887343706977, 27.63000553765213],
- // name: "喜迎校庆选点1",
- // notPath: false,
- // isLine: false,
- // id: 4,
- // },
- ],
+ ourDatas: [],
nowId: 0,
- isCheck: false
+ isCheck: false,
};
},
mounted() {
- // this.$emit("setMapData", [this.routers, this.potions]);
- // let that = this;
- // if (that.ourDatas.length != 0) {
- // for (let k in that.ourDatas) {
- // that.ourDatas[k].id = +k + 1;
- // }
- // }
- // this.checkDom("getMapDataRefs", dom => {
- // dom.addLines(that.polygons);
- // });
- // this.nowId = +this.ourDatas.length + 1;
- if (this.polygons.length > 0) {
- this.doThat(this.polygons);
- }
+
},
methods: {
+ draw(usePolygons) {
+ this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
+ this.doThat(usePolygons)
+ },
doThat(val) {
- this.checkDom("getMapDataRefs", dom => {
- dom.addLines(val);
- // 移动位置
- dom.move(val);
+ this.checkDom("getMapDataRefs", (dom) => {
+ dom.addLines(val);
+ // 移动位置
+ dom.move(val);
});
},
drawFace() {
- // console.log(this.$refs.getMapDataRefs);
this.$refs.getMapDataRefs.drawStart();
},
giveUp() {
- // console.log(234);
this.$refs.getMapDataRefs.closeDraw();
},
openDrawLineMethod() {
@@ -219,7 +92,7 @@
name: "",
notPath: false,
isLine: true,
- id: +id
+ id: +id,
});
},
openDrawPointMethod() {
@@ -230,7 +103,7 @@
name: "",
notPath: false,
isLine: false,
- id: +id
+ id: +id,
});
},
deleteRowOurs(index) {
@@ -282,7 +155,7 @@
name: rname[k],
notPath: false,
isLine: true,
- id: this.ourDatas.length
+ id: this.ourDatas.length,
});
}
for (let k in p) {
@@ -293,7 +166,7 @@
name: pname[k],
notPath: false,
isLine: false,
- id: this.ourDatas.length
+ id: this.ourDatas.length,
});
}
this.nowId = +this.ourDatas.length + 1;
@@ -321,7 +194,6 @@
}
let line = this.changeMapData(lineBefor, "name");
let point = this.changeMapData(pointBefor, "name");
- // console.log(line, point);
if (line[0] == "namenot" || point[0] == "namenot") {
//需要显示验证失败合集
let errorId = [];
@@ -331,9 +203,7 @@
if (point[0] == "namenot") {
errorId.push(...point[1]);
}
- // console.log(errorId, "errorId");
for (let x in this.ourDatas) {
- // console.log(this.ourDatas[x], "x");
let flog = true;
for (let k in errorId) {
if (errorId[k] == this.ourDatas[x].id) {
@@ -348,7 +218,6 @@
}
return false;
} else {
- // console.log("通过");
for (let i in this.ourDatas) {
this.ourDatas[i].notPath = false;
}
@@ -361,7 +230,6 @@
value = "",
notData = [];
let itemLength = item.length - 1;
- // console.log(item, names, 7777);
for (let k in item) {
let inItem = item[k];
for (let kin in inItem) {
@@ -371,7 +239,6 @@
kin != "isLine" &&
kin != "id"
) {
- // console.log(kin);
notData.push(inItem.id);
break;
}
@@ -418,8 +285,8 @@
}
// 首次执行
checkDom();
- }
- }
+ },
+ },
};
</script>
@@ -438,71 +305,6 @@
left: calc(50% - 42px);
top: 0;
}
- // .controlMapWindow {
- // width: 320px;
- // height: calc(100% - 20px);
- // // border: 1px solid red;
- // // box-shadow: 2px 0 15px 2px #acacac;
- // position: absolute;
- // left: 10px;
- // top: 10px;
- // background-color: #fff;
- // border-radius: 0 15px 15px 0;
- // padding: 10px 10px;
- // overflow: hidden;
- // // .controlMapWindowTitle {
- // // height: 40px;
- // // width: 100%;
- // // margin-bottom: 5px;
- // // @extend .flexCenter;
- // // }
- // .controlMapWindowmain {
- // width: 100%;
- // height: calc(100% - 45px);
- // overflow-x: hidden;
- // overflow-y: scroll;
- // .getMapData_left {
- // width: 50%;
- // height: 40px;
- // box-sizing: border-box;
- // }
- // .getMapData_right {
- // width: 50%;
- // height: 40px;
- // box-sizing: border-box;
- // }
- // .getMapData__once {
- // width: 100%;
- // height: 40px;
- // margin-bottom: 10px;
- // position: relative;
- // @extend .flexCenter;
- // flex-direction: row;
- // .getMapData_once_label {
- // padding-left: 15px;
- // width: 90px;
- // height: 100%;
- // @extend .flexCenter;
- // justify-content: space-around;
- // }
- // .getMapData_once_name {
- // width: calc(100% - 130px);
- // }
- // .getMapData_once_get {
- // padding: 6px 16px;
- // font-size: 20px;
- // }
- // .notPathTitile {
- // position: absolute;
- // left: 90px;
- // bottom: -20px;
- // color: red;
- // font-size: 1px;
- // }
- // }
- // }
- // }
- // 验证
.notPath {
// border-bottom: 0.5px solid red;
}
--
Gitblit v1.9.3