<template>
|
<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>
|
</template>
|
|
<script>
|
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,
|
},
|
polygons() {
|
if (this.polygons.length > 0) {
|
this.isCheck = false;
|
}
|
},
|
},
|
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;
|
}
|
}
|
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();
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.flexCenter {
|
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;
|
}
|
}
|
|
//过度动画
|
.list-enter {
|
opacity: 0;
|
transform: translateY(10px);
|
}
|
.list-leave-to {
|
opacity: 0;
|
transform: translateY(-10px);
|
}
|
|
.list-enter-to,
|
.list-leave {
|
opacity: 1;
|
}
|
.list-enter-active,
|
.list-leave-active {
|
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;
|
}
|
}
|
</style>
|
