<template>
|
<div class="getMapData" :key="Refresh">
|
<MapInThere ref="getMapDataRefs" />
|
<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>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import MapInThere from "@/components/map/mainInThere.vue";
|
export default {
|
name: "getMapData",
|
components: {
|
MapInThere,
|
},
|
computed: {
|
...mapGetters(["rotesData", "pointData"]),
|
},
|
watch: {
|
ourDatas: {
|
handler(val) {
|
// console.log("深度监听：", val);
|
this.checkDom("getMapDataRefs", (dom) => {
|
dom.onceOnlodad(val);
|
});
|
},
|
deep: true,
|
},
|
},
|
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",
|
animateLeave: "animated fadeOut",
|
//未输入动画效果
|
animateName: "custom-classes-transition",
|
animateEnter: "animated fadeInDown",
|
animateLeave: "animated fadeOut",
|
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,
|
// },
|
],
|
nowId: 0,
|
};
|
},
|
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.onceOnlodad(that.ourDatas);
|
});
|
this.nowId = +this.ourDatas.length + 1;
|
},
|
methods: {
|
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");
|
// console.log(line, point);
|
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]);
|
}
|
// 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) {
|
flog = false;
|
}
|
}
|
if (flog) {
|
this.ourDatas[x].notPath = false;
|
} else {
|
this.ourDatas[x].notPath = 2;
|
}
|
}
|
return false;
|
} else {
|
// console.log("通过");
|
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;
|
// console.log(item, names, 7777);
|
for (let k in item) {
|
let inItem = item[k];
|
for (let kin in inItem) {
|
if (
|
inItem[kin] == "" &&
|
kin != "notPath" &&
|
kin != "isLine" &&
|
kin != "id"
|
) {
|
// console.log(kin);
|
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;
|
.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;
|
}
|
}
|
|
//过度动画
|
.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;
|
}
|
</style>
|
