<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",
|
props: {
|
currentPolygons: {
|
type: Array,
|
// eslint-disable-next-line vue/require-valid-default-prop
|
default: []
|
}
|
},
|
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
|
}
|
},
|
currentPolygons: {
|
immediate: true,
|
handler (newData, oldData) {
|
// console.log(newData, 5656)
|
if (newData.length > 0) {
|
|
this.draw(newData)
|
}
|
},
|
}
|
},
|
data () {
|
return {
|
Refresh: false,
|
//动画效果
|
animateName: "custom-classes-transition",
|
animateEnter: "animated fadeIn",
|
animateLeave: "animated fadeOut",
|
//未输入动画效果
|
|
|
|
|
openTitle: "路径1",
|
MapDataShow: false,
|
fromView: false,
|
ourDatas: [],
|
nowId: 0,
|
isCheck: false,
|
}
|
},
|
mounted () {
|
|
},
|
methods: {
|
draw (usePolygons) {
|
|
console.log(usePolygons, 456)
|
|
let arr = []
|
|
usePolygons.forEach(item => {
|
arr.push({
|
lng: item.split(' ')[0],
|
lat: item.split(' ')[1]
|
})
|
})
|
|
console.log(arr, 23)
|
|
this.$store.commit("setpolygon", arr) //用vuex传最终数据
|
this.doThat(arr)
|
},
|
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% - 102.5px);
|
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>
|
