From 3d246e2571ca60eb71e5060a1eee2e95e7235ca7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 18 Jul 2022 11:55:42 +0800
Subject: [PATCH] bufen
---
src/views/land/getMapDataInThere.vue | 609 +++++++++++++++++++++++++++---------------------------
1 files changed, 302 insertions(+), 307 deletions(-)
diff --git a/src/views/land/getMapDataInThere.vue b/src/views/land/getMapDataInThere.vue
index d1a0abf..e3950e0 100644
--- a/src/views/land/getMapDataInThere.vue
+++ b/src/views/land/getMapDataInThere.vue
@@ -1,345 +1,340 @@
<template>
- <div class="getMapData" :key="Refresh">
- <MapInThere ref="getMapDataRefs" />
- <div class="notDatas" v-show="isCheck">
- <div style="color: red">*</div>
- 未绘画区域
+ <div class="getMapData" :key="Refresh">
+ <MapInThere ref="getMapDataRefs" />
+ <div class="notDatas" v-show="isCheck">
+ <div style="color: red">*</div>未绘画区域
+ </div>
+ <div class="controlMapWindowTitle">
+ <el-button-group>
+ <el-button type="primary" icon="el-icon-finished" @click="drawFace">绘画区域</el-button>
+ <el-button type="danger" @click="giveUp" icon="el-icon-close">取消</el-button>
+ </el-button-group>
+ </div>
</div>
- <div class="controlMapWindowTitle">
- <el-button-group>
- <el-button type="primary" icon="el-icon-finished" @click="drawFace"
- >绘画区域</el-button
- >
- <el-button type="danger" @click="giveUp" icon="el-icon-close"
- >取消</el-button
- >
- </el-button-group>
- </div>
- </div>
</template>
<script>
-import { mapGetters } from "vuex";
-import MapInThere from "@/components/map/mainInThere.vue";
+import { mapGetters } from "vuex"
+import MapInThere from "@/components/map/mainInThere.vue"
export default {
- name: "getMapData",
- components: {
- MapInThere,
- },
- computed: {
- ...mapGetters(["rotesData", "pointData", "polygons"]),
- },
- watch: {
- ourDatas: {
- handler(val) {
- this.checkDom("getMapDataRefs", (dom) => {
- dom.onceOnlodad(val);
- });
- },
- deep: true,
+ name: "getMapData",
+ components: {
+ MapInThere,
},
- polygons() {
- if (this.polygons.length > 0) {
- this.isCheck = false;
- }
+ computed: {
+ ...mapGetters(["rotesData", "pointData", "polygons"]),
},
- },
- data() {
- return {
- Refresh: false,
- //动画效果
- animateName: "custom-classes-transition",
- animateEnter: "animated fadeIn",
- animateLeave: "animated fadeOut",
- //未输入动画效果
- animateName: "custom-classes-transition",
- animateEnter: "animated fadeInDown",
- animateLeave: "animated fadeOut",
- openTitle: "路径1",
- MapDataShow: false,
- fromView: false,
- ourDatas: [],
- nowId: 0,
- isCheck: false,
- };
- },
- mounted() {
-
- },
- methods: {
- draw(usePolygons) {
- this.$store.commit("setpolygon", usePolygons); //用vuex传最终数据
- this.doThat(usePolygons)
- },
- doThat(val) {
- this.checkDom("getMapDataRefs", (dom) => {
- dom.addLines(val);
- // 移动位置
- dom.move(val);
- });
- },
- drawFace() {
- this.$refs.getMapDataRefs.drawStart();
- },
- giveUp() {
- this.$refs.getMapDataRefs.closeDraw();
- },
- openDrawLineMethod() {
- let id = this.nowId++;
- this.ourDatas.push({
- label: "路径" + +id,
- value: "",
- name: "",
- notPath: false,
- isLine: true,
- id: +id,
- });
- },
- openDrawPointMethod() {
- let id = this.nowId++;
- this.ourDatas.push({
- label: "标点" + +id,
- value: "",
- name: "",
- notPath: false,
- isLine: false,
- id: +id,
- });
- },
- deleteRowOurs(index) {
- this.ourDatas.splice(index, 1);
- },
- backMapDataOurData(val, index) {
- if (val == "line") {
- this.ourDatas[index].value = this.rotesData;
- } else if (val == "point") {
- this.ourDatas[index].value = this.pointData;
- } else if (val == "notData") {
- this.ourDatas[index].value = "";
- }
- //单个验证
- this.myRules(index);
- },
- //以上是添加数据集方法
- //选择map数据
- openMap(val, num, value) {
- this.MapDataShow = true;
- this.openTitle = val;
- this.$refs.getMapDataRefs.init(val, num, value);
- },
- closeOpenedMap() {
- this.MapDataShow = false;
- // this.openTitle = "";
- },
- //下面是旧代码
- editInit(val) {
- //查看情况逆转String成为当页可使用数据,并做动作
- this.reverseMapData(val);
- },
- viewInit(val) {
- //查看情况逆转String成为当页可使用数据,并做动作
- this.reverseMapData(val);
- this.fromView = true; //查看数据不可改
- },
- reverseMapData(val, label) {
- //解释数据
- let rname = val[0][0].split(";"),
- r = val[0][1].split(";"),
- pname = val[1][0].split(";"),
- p = val[1][1].split(";");
- this.ourDatas = [];
- for (let k in r) {
- this.ourDatas.push({
- label: "路径" + (+k + 1),
- value: r[k],
- name: rname[k],
- notPath: false,
- isLine: true,
- id: this.ourDatas.length,
- });
- }
- for (let k in p) {
- let potion = p[k].split(",");
- this.ourDatas.push({
- label: "标点" + (+k + 1),
- value: [+potion[0], +potion[1]],
- name: pname[k],
- notPath: false,
- isLine: false,
- id: this.ourDatas.length,
- });
- }
- this.nowId = +this.ourDatas.length + 1;
- },
- myRules(index) {
- //单个验证
- if (this.ourDatas[index].name && this.ourDatas[index].value) {
- this.ourDatas[index].notPath = false;
- } else {
- this.ourDatas[index].notPath = 2;
- }
- },
- //自定义验证
- myRulesUse() {
- //把一个数组拆开两个来对应之前的数据
- let ourData = this.ourDatas;
- let lineBefor = [];
- let pointBefor = [];
- for (let o in ourData) {
- if (ourData[o].isLine) {
- lineBefor.push(ourData[o]);
- } else {
- pointBefor.push(ourData[o]);
- }
- }
- let line = this.changeMapData(lineBefor, "name");
- let point = this.changeMapData(pointBefor, "name");
- if (line[0] == "namenot" || point[0] == "namenot") {
- //需要显示验证失败合集
- let errorId = [];
- if (line[0] == "namenot") {
- errorId.push(...line[1]);
- }
- if (point[0] == "namenot") {
- errorId.push(...point[1]);
- }
- for (let x in this.ourDatas) {
- let flog = true;
- for (let k in errorId) {
- if (errorId[k] == this.ourDatas[x].id) {
- flog = false;
+ watch: {
+ ourDatas: {
+ handler (val) {
+ this.checkDom("getMapDataRefs", (dom) => {
+ dom.onceOnlodad(val)
+ })
+ },
+ deep: true,
+ },
+ polygons () {
+ if (this.polygons.length > 0) {
+ this.isCheck = false
}
- }
- if (flog) {
- this.ourDatas[x].notPath = false;
- } else {
- this.ourDatas[x].notPath = 2;
- }
- }
- return false;
- } else {
- for (let i in this.ourDatas) {
- this.ourDatas[i].notPath = false;
- }
- return [line, point];
- }
+ },
},
- //规则
- changeMapData(item, names) {
- let name = "",
- value = "",
- notData = [];
- let itemLength = item.length - 1;
- for (let k in item) {
- let inItem = item[k];
- for (let kin in inItem) {
- if (
- inItem[kin] == "" &&
- kin != "notPath" &&
- kin != "isLine" &&
- kin != "id"
- ) {
- notData.push(inItem.id);
- break;
- }
- if (kin == names) {
- name += inItem[kin];
- if (k != itemLength) {
- name += ";";
+ data () {
+ return {
+ Refresh: false,
+ //动画效果
+ animateName: "custom-classes-transition",
+ animateEnter: "animated fadeIn",
+ animateLeave: "animated fadeOut",
+ //未输入动画效果
+ animateName: "custom-classes-transition",
+ animateEnter: "animated fadeInDown",
+ animateLeave: "animated fadeOut",
+ openTitle: "路径1",
+ MapDataShow: false,
+ fromView: false,
+ ourDatas: [],
+ nowId: 0,
+ isCheck: false,
+ }
+ },
+ mounted () {
+
+ },
+ methods: {
+ draw (usePolygons) {
+ this.$store.commit("setpolygon", usePolygons) //用vuex传最终数据
+ this.doThat(usePolygons)
+ },
+ doThat (val) {
+ this.checkDom("getMapDataRefs", (dom) => {
+ dom.addLines(val)
+ // 移动位置
+ dom.move(val)
+ })
+ },
+ drawFace () {
+ this.$refs.getMapDataRefs.drawStart()
+ },
+ giveUp () {
+ this.$refs.getMapDataRefs.closeDraw()
+ },
+ openDrawLineMethod () {
+ let id = this.nowId++
+ this.ourDatas.push({
+ label: "路径" + +id,
+ value: "",
+ name: "",
+ notPath: false,
+ isLine: true,
+ id: +id,
+ })
+ },
+ openDrawPointMethod () {
+ let id = this.nowId++
+ this.ourDatas.push({
+ label: "标点" + +id,
+ value: "",
+ name: "",
+ notPath: false,
+ isLine: false,
+ id: +id,
+ })
+ },
+ deleteRowOurs (index) {
+ this.ourDatas.splice(index, 1)
+ },
+ backMapDataOurData (val, index) {
+ if (val == "line") {
+ this.ourDatas[index].value = this.rotesData
+ } else if (val == "point") {
+ this.ourDatas[index].value = this.pointData
+ } else if (val == "notData") {
+ this.ourDatas[index].value = ""
}
- }
- if (kin == "value") {
- value += inItem[kin];
- if (k != itemLength) {
- value += ";";
+ //单个验证
+ this.myRules(index)
+ },
+ //以上是添加数据集方法
+ //选择map数据
+ openMap (val, num, value) {
+ this.MapDataShow = true
+ this.openTitle = val
+ this.$refs.getMapDataRefs.init(val, num, value)
+ },
+ closeOpenedMap () {
+ this.MapDataShow = false
+ // this.openTitle = "";
+ },
+ //下面是旧代码
+ editInit (val) {
+ //查看情况逆转String成为当页可使用数据,并做动作
+ this.reverseMapData(val)
+ },
+ viewInit (val) {
+ //查看情况逆转String成为当页可使用数据,并做动作
+ this.reverseMapData(val)
+ this.fromView = true //查看数据不可改
+ },
+ reverseMapData (val, label) {
+ //解释数据
+ let rname = val[0][0].split(";"),
+ r = val[0][1].split(";"),
+ pname = val[1][0].split(";"),
+ p = val[1][1].split(";")
+ this.ourDatas = []
+ for (let k in r) {
+ this.ourDatas.push({
+ label: "路径" + (+k + 1),
+ value: r[k],
+ name: rname[k],
+ notPath: false,
+ isLine: true,
+ id: this.ourDatas.length,
+ })
}
- }
- }
- }
- return notData.length > 0 ? [names + "not", notData] : [name, value];
+ for (let k in p) {
+ let potion = p[k].split(",")
+ this.ourDatas.push({
+ label: "标点" + (+k + 1),
+ value: [+potion[0], +potion[1]],
+ name: pname[k],
+ notPath: false,
+ isLine: false,
+ id: this.ourDatas.length,
+ })
+ }
+ this.nowId = +this.ourDatas.length + 1
+ },
+ myRules (index) {
+ //单个验证
+ if (this.ourDatas[index].name && this.ourDatas[index].value) {
+ this.ourDatas[index].notPath = false
+ } else {
+ this.ourDatas[index].notPath = 2
+ }
+ },
+ //自定义验证
+ myRulesUse () {
+ //把一个数组拆开两个来对应之前的数据
+ let ourData = this.ourDatas
+ let lineBefor = []
+ let pointBefor = []
+ for (let o in ourData) {
+ if (ourData[o].isLine) {
+ lineBefor.push(ourData[o])
+ } else {
+ pointBefor.push(ourData[o])
+ }
+ }
+ let line = this.changeMapData(lineBefor, "name")
+ let point = this.changeMapData(pointBefor, "name")
+ if (line[0] == "namenot" || point[0] == "namenot") {
+ //需要显示验证失败合集
+ let errorId = []
+ if (line[0] == "namenot") {
+ errorId.push(...line[1])
+ }
+ if (point[0] == "namenot") {
+ errorId.push(...point[1])
+ }
+ for (let x in this.ourDatas) {
+ let flog = true
+ for (let k in errorId) {
+ if (errorId[k] == this.ourDatas[x].id) {
+ flog = false
+ }
+ }
+ if (flog) {
+ this.ourDatas[x].notPath = false
+ } else {
+ this.ourDatas[x].notPath = 2
+ }
+ }
+ return false
+ } else {
+ for (let i in this.ourDatas) {
+ this.ourDatas[i].notPath = false
+ }
+ return [line, point]
+ }
+ },
+ //规则
+ changeMapData (item, names) {
+ let name = "",
+ value = "",
+ notData = []
+ let itemLength = item.length - 1
+ for (let k in item) {
+ let inItem = item[k]
+ for (let kin in inItem) {
+ if (
+ inItem[kin] == "" &&
+ kin != "notPath" &&
+ kin != "isLine" &&
+ kin != "id"
+ ) {
+ notData.push(inItem.id)
+ break
+ }
+ if (kin == names) {
+ name += inItem[kin]
+ if (k != itemLength) {
+ name += ";"
+ }
+ }
+ if (kin == "value") {
+ value += inItem[kin]
+ if (k != itemLength) {
+ value += ";"
+ }
+ }
+ }
+ }
+ return notData.length > 0 ? [names + "not", notData] : [name, value]
+ },
+ checkDom (name, fn) {
+ // 声明定时器
+ let that = this
+ var timer = null
+ // 检查dom是否执行完成
+ function checkDom () {
+ let dom = that.$refs[name]
+ if (dom) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer)
+ }
+ if (fn) {
+ //回调函数
+ fn(dom)
+ return
+ } else {
+ return dom
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 100)
+ }
+ }
+ // 首次执行
+ checkDom()
+ },
},
- checkDom(name, fn) {
- // 声明定时器
- let that = this;
- var timer = null;
- // 检查dom是否执行完成
- function checkDom() {
- let dom = that.$refs[name];
- if (dom) {
- // 执行dom加载完成后的操作
- // 清除定时器
- if (!timer) {
- clearTimeout(timer);
- }
- if (fn) {
- //回调函数
- fn(dom);
- return;
- } else {
- return dom;
- }
- } else {
- // 自我调用
- timer = setTimeout(checkDom, 100);
- }
- }
- // 首次执行
- checkDom();
- },
- },
};
</script>
<style lang="scss">
.flexCenter {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.getMapData {
- width: 100%;
- height: 100%;
- position: relative;
- .controlMapWindowTitle {
- position: absolute;
- left: calc(50% - 42px);
- top: 0;
- }
- .notPath {
- // border-bottom: 0.5px solid red;
- }
+ width: 100%;
+ height: 100%;
+ position: relative;
+ .controlMapWindowTitle {
+ position: absolute;
+ left: calc(50% - 102.5px);
+ top: 0;
+ }
+ .notPath {
+ // border-bottom: 0.5px solid red;
+ }
}
//过度动画
.list-enter {
- opacity: 0;
- transform: translateY(10px);
+ opacity: 0;
+ transform: translateY(10px);
}
.list-leave-to {
- opacity: 0;
- transform: translateY(-10px);
+ opacity: 0;
+ transform: translateY(-10px);
}
.list-enter-to,
.list-leave {
- opacity: 1;
+ opacity: 1;
}
.list-enter-active,
.list-leave-active {
- transition: all 0.3s;
+ transition: all 0.3s;
}
.notDatas {
- width: auto;
- height: auto;
- position: absolute;
- top: 5px;
- left: 100px;
- background-color: #fff;
- border-radius: 5px;
- padding: 2px 8px;
- div {
- display: inline;
- }
+ width: auto;
+ height: auto;
+ position: absolute;
+ top: 5px;
+ left: 100px;
+ background-color: #fff;
+ border-radius: 5px;
+ padding: 2px 8px;
+ div {
+ display: inline;
+ }
}
</style>
--
Gitblit v1.9.3