<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
|
}
|
}
|
//判断dom是否存在
|
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,
|
//notpath判断是否验证通过的提示 2 为不通过
|
isLine: true,
|
//isLine来判断是否是线
|
id: +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) {
|
//在地图内useMapData方法中触发
|
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>
|
