<template>
|
<div class="getMapData" :key="Refresh">
|
<div class="getMapData_left" :style="{ height: longLength * 50 + 'px' }">
|
<transition-group
|
:name="animateName"
|
:enter-active-class="animateEnter"
|
:leave-active-class="animateLeave"
|
>
|
<div
|
class="getMapData__once"
|
v-for="(item, index) in routers"
|
: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"
|
v-model="item.routerName"
|
placeholder="请输入路径名称"
|
></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="el-icon-finished"
|
@click="openMap(item.label, index, item.value)"
|
:disabled="MapDataShow"
|
></el-button>
|
<el-button
|
class="getMapData_once_endBut"
|
icon="el-icon-delete"
|
circle
|
@click="deleteRow(['routers', index])"
|
:disabled="MapDataShow || fromView"
|
v-if="index != 0"
|
></el-button>
|
<el-button
|
icon="el-icon-plus"
|
circle
|
@click="addRow('routers')"
|
:disabled="MapDataShow || fromView"
|
v-else
|
></el-button>
|
</div>
|
</transition-group>
|
</div>
|
<div class="getMapData_right" :style="{ height: longLength * 50 + 'px' }">
|
<transition-group
|
:name="animateName"
|
:enter-active-class="animateEnter"
|
:leave-active-class="animateLeave"
|
>
|
<div
|
class="getMapData__once"
|
v-for="(item, index) in potions"
|
:key="index"
|
>
|
<div class="getMapData_once_label">
|
<el-tag> {{ item.label }}</el-tag>
|
</div>
|
<el-input
|
:class="[
|
'getMapData_once_name',
|
item.notPath == 2 ? 'notPath' : '',
|
]"
|
v-model="item.potionName"
|
placeholder="请输入标点名称"
|
></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="el-icon-add-location"
|
@click="openMap(item.label, index, item.value)"
|
:disabled="MapDataShow"
|
></el-button>
|
<el-button
|
class="getMapData_once_endBut"
|
icon="el-icon-delete"
|
circle
|
@click="deleteRow(['potions', index])"
|
:disabled="MapDataShow || fromView"
|
v-if="index != 0"
|
></el-button>
|
<el-button
|
icon="el-icon-plus"
|
circle
|
@click="addRow('potions')"
|
:disabled="MapDataShow || fromView"
|
v-else
|
></el-button>
|
</div>
|
</transition-group>
|
</div>
|
<div id="choiseMap" v-if="MapDataShow">
|
<div class="choiseMap_title">当前选择：{{ openTitle }}</div>
|
<i class="el-icon-close icon" @click="closeOpenedMap"></i>
|
<Map ref="getMapDataRefs" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import Map from "@/components/map/main.vue";
|
export default {
|
name: "getMapData",
|
components: {
|
Map,
|
},
|
computed: {
|
...mapGetters(["rotesData", "pointData"]),
|
longLength() {
|
let k = this.Refresh;
|
return this.routers.length > this.potions.length
|
? this.routers.length
|
: this.potions.length;
|
},
|
},
|
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,
|
};
|
},
|
mounted() {
|
this.$emit("setMapData", [this.routers, this.potions]);
|
},
|
methods: {
|
editInit(val) {
|
//查看情况逆转String成为当页可使用数据,并做动作
|
this.reverseMapData(val);
|
},
|
viewInit(val) {
|
//查看情况逆转String成为当页可使用数据,并做动作
|
this.reverseMapData(val);
|
this.fromView = true; //查看数据不可改
|
},
|
reverseMapData(val, label) {
|
// console.log(val);
|
let rname = val[0][0].split(";"),
|
r = val[0][1].split(";"),
|
pname = val[1][0].split(";"),
|
p = val[1][1].split(";");
|
this.routers = [];
|
this.potions = [];
|
for (let k in r) {
|
this.routers.push({
|
label: "路径" + (+k + 1),
|
value: r[k],
|
routerName: rname[k],
|
notPath: true,
|
});
|
}
|
for (let k in p) {
|
this.potions.push({
|
label: "标点" + (+k + 1),
|
value: p[k],
|
potionName: pname[k],
|
notPath: true,
|
});
|
}
|
// console.log(this.potions);
|
//刷新
|
// this.Refresh = !this.Refresh;
|
},
|
myRules() {
|
for (let i in this.routers) {
|
this.routers[i].notPath = false;
|
}
|
for (let i in this.potions) {
|
this.potions[i].notPath = false;
|
}
|
},
|
//自定义验证
|
myRulesUse() {
|
// return;
|
let line = this.changeMapData(this.routers, "routerName");
|
let point = this.changeMapData(this.potions, "potionName");
|
if (line[0] == "routerNamenot" || point[0] == "potionNamenot") {
|
if (line[0] == "routerNamenot") {
|
//验证不通过
|
// console.log("router验证不通过", line[1]);
|
for (let i in this.routers) {
|
let flog = true;
|
for (let k in line[1]) {
|
if (line[1][k] == i) {
|
flog = false;
|
}
|
}
|
if (flog) {
|
this.routers[i].notPath = false;
|
} else {
|
this.routers[i].notPath = 2;
|
}
|
}
|
} else {
|
// console.log("routTonguo");
|
for (let m in this.routers) {
|
this.routers[m].notPath = false;
|
}
|
}
|
if (point[0] == "potionNamenot") {
|
//验证不通过
|
// console.log("potion验证不通过", point[1]);
|
for (let i in this.potions) {
|
let flog = true;
|
for (let k in point[1]) {
|
if (point[1][k] == i) {
|
flog = false;
|
}
|
}
|
if (flog) {
|
this.potions[i].notPath = false;
|
} else {
|
this.potions[i].notPath = 2;
|
}
|
}
|
} else {
|
// console.log("potionsonguo");
|
for (let m in this.potions) {
|
this.potions[m].notPath = 3;
|
}
|
}
|
return false;
|
} else {
|
// console.log("通过");
|
for (let i in this.routers) {
|
this.routers[i].notPath = false;
|
}
|
for (let i in this.potions) {
|
this.potions[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") {
|
notData.push(k);
|
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];
|
},
|
addRow(val) {
|
// let d = {
|
// label: (val == "routers" ? "路径" : "标点") + (+this[val].length + 1),
|
// value: "",
|
// routerName: "",
|
// };
|
let d =
|
val == "routers"
|
? {
|
label: "路径" + (+this[val].length + 1),
|
value: "",
|
routerName: "",
|
notPath: false,
|
}
|
: {
|
label: "标点" + (+this[val].length + 1),
|
value: "",
|
potionName: "",
|
notPath: false,
|
};
|
this[val].push(d);
|
this.$emit("setMapData", [this.routers, this.potions]);
|
},
|
deleteRow(val) {
|
this[val[0]].splice(val[1], 1);
|
this.$emit("setMapData", [this.routers, this.potions]);
|
},
|
openMap(val, num, value) {
|
this.MapDataShow = true;
|
this.openTitle = val;
|
let that = this;
|
this.checkDom("getMapDataRefs", (dom) => {
|
dom.init(val, num, value, that.fromView);
|
});
|
},
|
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();
|
},
|
backMapData(val, index) {
|
// console.log(val, index);
|
if (val == "line") {
|
this.routers[index].value = this.rotesData;
|
} else if (val == "point") {
|
this.potions[index].value = this.pointData;
|
}
|
this.$emit("setMapData", [this.routers, this.potions]);
|
//验证
|
this.myRules();
|
},
|
closeOpenedMap() {
|
this.MapDataShow = false;
|
this.openTitle = "";
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.flexCenter {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.getMapData {
|
width: 100%;
|
height: auto;
|
position: relative;
|
@extend .flexCenter;
|
flex-direction: row;
|
.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;
|
}
|
}
|
#choiseMap {
|
position: fixed;
|
z-index: 110;
|
width: 100%;
|
height: 400px;
|
bottom: 0;
|
left: 0;
|
padding: 0 15px 15px 15px;
|
box-sizing: border-box;
|
border-radius: 15px 15px 0 0;
|
background-color: #fff;
|
box-shadow: 0 0 1px 1px #409eff;
|
.choiseMap_title {
|
height: 40px;
|
background-color: #fff;
|
text-align: center;
|
font-size: 20px;
|
}
|
.icon {
|
position: absolute;
|
right: 20px;
|
top: 5px;
|
font-size: 25px;
|
&:hover {
|
color: red;
|
}
|
}
|
}
|
// 验证
|
.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>
|
