<template>
|
<div class="baseMapMap" :key="Refresh">
|
<MapInThere ref="baseMapMapsMap" />
|
<div class="controlbaseMapMap">
|
<div v-for="(item, index) in mapServiceValue" :key="index">
|
{{ item.name }}
|
<div style="float: right">
|
<el-switch class="around_left" v-model="item.show"> </el-switch>
|
<el-button
|
class="around_left"
|
type="danger"
|
icon="el-icon-delete"
|
circle
|
@click="deleteMapService(index)"
|
:disabled="notSet"
|
></el-button>
|
</div>
|
<el-divider v-if="index != mapServiceValue.length - 1"></el-divider>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import MapInThere from "@/components/basemap/mainInThere.vue";
|
export default {
|
name: "getMapData",
|
components: {
|
MapInThere,
|
},
|
computed: {
|
...mapGetters(["mapServiceValue", "notSet"]),
|
},
|
watch: {
|
mapServiceValue: {
|
handler(val) {
|
// console.log("深度监听：", val);
|
//改变父级标单字段验证状态
|
this.$emit("changeMapSI");
|
this.checkDom("baseMapMapsMap", (dom) => {
|
//更改地图图层数据
|
dom.setServiceData(this.mapServiceValue);
|
});
|
},
|
deep: true,
|
},
|
},
|
data() {
|
return {
|
mapServiceData: [],
|
};
|
},
|
destroyed() {
|
//销毁清楚数据
|
this.$store.commit("clearMapServiceValue");
|
this.checkDom("baseMapMapsMap", (dom) => {
|
//更改地图图层数据
|
dom.clearServiceData();
|
});
|
},
|
mounted() {},
|
methods: {
|
deleteMapService(index) {
|
// console.log(index);
|
this.$store.commit("deleteMapServiceValue", index);
|
},
|
// addService(data) {
|
// this.mapServiceData.push({
|
// ...data,
|
// show: true,
|
// });
|
// console.log(this.mapServiceData);
|
// this.$refs.baseMapMapsMap.addMapService();
|
// },
|
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;
|
}
|
.baseMapMap {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.controlbaseMapMap {
|
position: absolute;
|
top: 5px;
|
right: 5px;
|
background-color: #fff;
|
padding: 10px;
|
border-radius: 10px;
|
box-shadow: 0px 0px 10px -3px #000;
|
max-height: 370px;
|
overflow-x: auto;
|
overflow-y: scroll;
|
}
|
// 验证
|
.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;
|
}
|
.around_left {
|
padding: 0 5px;
|
}
|
</style>
|
